test_vector_export.js

// 矢量元素导出测试脚本
// 在浏览器控制台中运行此脚本来测试修复效果

(function() {
    console.log('=== PPT矢量元素导出测试开始 ===');
    
    // 测试SVG元素检测
    function testSVGElementDetection() {
        console.log('\n1. 测试SVG元素检测...');
        
        const svgElements = document.querySelectorAll('svg');
        console.log(`找到 ${svgElements.length} 个SVG元素`);
        
        svgElements.forEach((svg, index) => {
            const clientWidth = svg.clientWidth;
            const clientHeight = svg.clientHeight;
            const boundingRect = svg.getBoundingClientRect();
            const computedStyle = window.getComputedStyle(svg);
            
            const hasValidSize = (
                (clientWidth > 0 && clientHeight > 0) ||
                (boundingRect.width > 0 && boundingRect.height > 0) ||
                (parseFloat(computedStyle.width) > 0 && parseFloat(computedStyle.height) > 0)
            );
            
            console.log(`SVG ${index + 1}:`, {
                element: svg,
                clientSize: `${clientWidth}x${clientHeight}`,
                boundingRect: `${boundingRect.width}x${boundingRect.height}`,
                computedSize: `${computedStyle.width}x${computedStyle.height}`,
                hasValidSize,
                classes: svg.className.baseVal || svg.className
            });
        });
    }
    
    // 测试SVG序列化
    function testSVGSerialization() {
        console.log('\n2. 测试SVG序列化...');
        
        const svgElements = document.querySelectorAll('svg');
        let successCount = 0;
        let failCount = 0;
        
        svgElements.forEach((svg, index) => {
            try {
                const serializer = new XMLSerializer();
                const svgString = serializer.serializeToString(svg);
                
                if (svgString && svgString.length > 0) {
                    successCount++;
                    console.log(`✓ SVG ${index + 1} 序列化成功 (${svgString.length} 字符)`);
                } else {
                    failCount++;
                    console.log(`✗ SVG ${index + 1} 序列化返回空字符串`);
                }
            } catch (error) {
                failCount++;
                console.log(`✗ SVG ${index + 1} 序列化失败:`, error.message);
            }
        });
        
        console.log(`序列化结果: ${successCount} 成功, ${failCount} 失败`);
    }
    
    // 测试Base64转换
    function testBase64Conversion() {
        console.log('\n3. 测试Base64转换...');
        
        const svgElements = document.querySelectorAll('svg');
        let successCount = 0;
        let failCount = 0;
        
        svgElements.forEach((svg, index) => {
            try {
                // 模拟改进后的svg2Base64函数
                const clonedElement = svg.cloneNode(true);
                
                if (clonedElement.tagName.toLowerCase() === 'svg') {
                    clonedElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
                    clonedElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
                }
                
                const serializer = new XMLSerializer();
                const svgString = serializer.serializeToString(clonedElement);
                
                if (!svgString || svgString.length === 0) {
                    throw new Error('SVG序列化返回空字符串');
                }
                
                const base64 = btoa(unescape(encodeURIComponent(svgString)));
                const dataUrl = `data:image/svg+xml;base64,${base64}`;
                
                if (base64 && base64.length > 0) {
                    successCount++;
                    console.log(`✓ SVG ${index + 1} Base64转换成功 (${dataUrl.length} 字符)`);
                } else {
                    failCount++;
                    console.log(`✗ SVG ${index + 1} Base64转换返回空字符串`);
                }
            } catch (error) {
                failCount++;
                console.log(`✗ SVG ${index + 1} Base64转换失败:`, error.message);
            }
        });
        
        console.log(`Base64转换结果: ${successCount} 成功, ${failCount} 失败`);
    }
    
    // 测试形状元素检测
    function testShapeElementDetection() {
        console.log('\n4. 测试形状元素检测...');
        
        // 查找可能的形状元素
        const shapeElements = document.querySelectorAll('[class*="base-element-"]');
        console.log(`找到 ${shapeElements.length} 个可能的形状元素`);
        
        shapeElements.forEach((element, index) => {
            const svg = element.querySelector('svg');
            if (svg) {
                const elementId = element.className.match(/base-element-([^\s]+)/);
                console.log(`形状元素 ${index + 1}:`, {
                    elementId: elementId ? elementId[1] : 'unknown',
                    element: element,
                    svg: svg,
                    svgSize: `${svg.clientWidth}x${svg.clientHeight}`,
                    hasValidSize: svg.clientWidth > 0 && svg.clientHeight > 0
                });
            }
        });
    }
    
    // 测试渲染等待机制
    function testRenderWait() {
        console.log('\n5. 测试渲染等待机制...');
        
        return new Promise((resolve) => {
            const startTime = performance.now();
            
            // 强制重绘
            document.body.offsetHeight;
            
            // 等待下一个动画帧
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    const endTime = performance.now();
                    console.log(`✓ 渲染等待完成，耗时: ${(endTime - startTime).toFixed(2)}ms`);
                    resolve();
                });
            });
        });
    }
    
    // 运行所有测试
    async function runAllTests() {
        try {
            testSVGElementDetection();
            testSVGSerialization();
            testBase64Conversion();
            testShapeElementDetection();
            await testRenderWait();
            
            console.log('\n=== 测试完成 ===');
            console.log('如果发现问题，请检查:');
            console.log('1. SVG元素是否正确渲染');
            console.log('2. 元素尺寸是否有效');
            console.log('3. SVG序列化是否成功');
            console.log('4. Base64转换是否正常');
            
        } catch (error) {
            console.error('测试过程中发生错误:', error);
        }
    }
    
    // 导出测试函数到全局作用域
    window.vectorExportTest = {
        runAllTests,
        testSVGElementDetection,
        testSVGSerialization,
        testBase64Conversion,
        testShapeElementDetection,
        testRenderWait
    };
    
    console.log('测试函数已加载，使用 vectorExportTest.runAllTests() 运行所有测试');
    
    // 自动运行测试
    runAllTests();
})();