Update index.html

index.html

@@ -446,11 +446,6 @@
                                 class="grid-cell relative border border-slate-300 cursor-pointer hover:bg-slate-50 select-none"
                                 :class="{ 'ring-4 ring-indigo-500 ring-inset z-20': selectedCellIndex === index }"
                             >
-                                <!-- Grid Coordinate -->
-                                <span class="absolute top-1 left-1 text-[8px] text-slate-200 pointer-events-none z-10">
-                                    {{ Math.floor(index / currentGrid.cols) + 1 }}-{{ (index % currentGrid.cols) + 1 }}
-                                </span>
-
                                 <div class="rotation-wrapper pointer-events-none" :style="{ transform: `rotate(${cell.rotation}deg)` }">
                                     <span v-if="cell.type === 'text'" class="text-4xl md:text-5xl font-bold cell-text block" :style="{ color: cell.color }">
                                         {{ cell.content }}
@@ -908,6 +903,52 @@
                 return content.replace(/['"]/g, '');
             };
 
+            // Helper to convert text (or icon) to image data URL
+            const textToImage = (text, color, font) => {
+                const canvas = document.createElement('canvas');
+                // Increase resolution for print quality
+                canvas.width = 150;
+                canvas.height = 150;
+                const ctx = canvas.getContext('2d');
+                ctx.font = font;
+                ctx.fillStyle = color;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                // Draw
+                ctx.fillText(text, 75, 75);
+                return canvas.toDataURL('image/png');
+            };
+
+            // Helper to replace text element with SVG for perfect centering
+            const replaceWithSvgText = (el, content, color, fontFamily, fontWeight) => {
+                const ns = "http://www.w3.org/2000/svg";
+                const svg = document.createElementNS(ns, "svg");
+                svg.setAttribute("width", "100%");
+                svg.setAttribute("height", "100%");
+                svg.setAttribute("viewBox", "0 0 100 100");
+                svg.style.position = "absolute";
+                svg.style.top = "0";
+                svg.style.left = "0";
+
+                const textNode = document.createElementNS(ns, "text");
+                textNode.setAttribute("x", "50%");
+                textNode.setAttribute("y", "50%");
+                textNode.setAttribute("dominant-baseline", "central");
+                textNode.setAttribute("text-anchor", "middle");
+                textNode.setAttribute("fill", color);
+                textNode.setAttribute("font-family", fontFamily);
+                textNode.setAttribute("font-weight", fontWeight);
+                textNode.setAttribute("font-size", "45"); 
+                textNode.textContent = content;
+
+                svg.appendChild(textNode);
+
+                const parent = el.parentNode;
+                parent.style.position = "relative";
+                parent.innerHTML = '';
+                parent.appendChild(svg);
+            };
+
             // ... PDF Export Logic ...
             const renderPageToCanvas = async (pageId) => {
                 const pageData = pages.value[pageId - 1];
@@ -931,7 +972,7 @@
                         // Text uses the SVG text replacement trick for perfect centering
                         contentHtml = `<span class="export-text" data-color="${cell.color}" style="font-size: 40px; font-weight: bold; color: ${cell.color}; font-family: 'Noto Sans TC', sans-serif;">${cell.content}</span>`;
                     } else if (cell.type === 'icon') {
-                        // FontAwesome Icons -> Convert to Unicode Char + SVG Text Trick
+                        // FontAwesome Icons -> Convert to Unicode Char
                         // This ensures the icon behaves exactly like text (perfectly centered, rotates well)
                         const iconClass = icons[cell.content];
                         const unicode = getIconUnicode(iconClass);
@@ -941,11 +982,10 @@
                         contentHtml = `<img src="${cell.content}" style="width: 80%; height: 80%; object-fit: contain;">`;
                     }
 
-                    const coord = `${Math.floor(idx / cols) + 1}-${(idx % cols) + 1}`;
+                    // Coordinate span REMOVED here
 
                     gridHtml += `
                         <div class="grid-cell" style="position: relative; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden;">
-                            <span style="position: absolute; top: 4px; left: 4px; font-size: 8px; color: #e2e8f0;">${coord}</span>
                             <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg);">
                                 ${contentHtml}
                             </div>
@@ -973,14 +1013,25 @@
                             replaceWithSvgText(el, textContent, color, "'Noto Sans TC', sans-serif", "bold");
                         });
 
-                        // Handle Icon Centering (Same trick!)
+                        // Handle Icon Centering via Image conversion (Fixes PDF box issue)
                         const iconElements = clonedDoc.querySelectorAll('.export-icon');
                         iconElements.forEach(el => {
                             const textContent = el.innerText;
                             const color = el.getAttribute('data-color');
                             if (!textContent) return;
-                            // FontAwesome solid needs font-weight 900
-                            replaceWithSvgText(el, textContent, color, "'Font Awesome 6 Free'", "900");
+                            
+                            // Convert to image using canvas in main thread context
+                            // 'Font Awesome 6 Free' must be loaded in the page
+                            const imgData = textToImage(textContent, color, "900 100px 'Font Awesome 6 Free'");
+                            
+                            const img = document.createElement('img');
+                            img.src = imgData;
+                            img.style.width = '100%';
+                            img.style.height = '100%';
+                            img.style.objectFit = 'contain';
+                            
+                            el.parentNode.innerHTML = ''; // Clear parent
+                            el.parentNode.appendChild(img);
                         });
                     }
                 });
@@ -988,36 +1039,6 @@
                 return canvas;
             };
 
-            // Helper to replace text element with SVG for perfect centering
-            const replaceWithSvgText = (el, content, color, fontFamily, fontWeight) => {
-                const ns = "http://www.w3.org/2000/svg";
-                const svg = document.createElementNS(ns, "svg");
-                svg.setAttribute("width", "100%");
-                svg.setAttribute("height", "100%");
-                svg.setAttribute("viewBox", "0 0 100 100");
-                svg.style.position = "absolute";
-                svg.style.top = "0";
-                svg.style.left = "0";
-
-                const textNode = document.createElementNS(ns, "text");
-                textNode.setAttribute("x", "50%");
-                textNode.setAttribute("y", "50%");
-                textNode.setAttribute("dominant-baseline", "central");
-                textNode.setAttribute("text-anchor", "middle");
-                textNode.setAttribute("fill", color);
-                textNode.setAttribute("font-family", fontFamily);
-                textNode.setAttribute("font-weight", fontWeight);
-                textNode.setAttribute("font-size", "45"); 
-                textNode.textContent = content;
-
-                svg.appendChild(textNode);
-
-                const parent = el.parentNode;
-                parent.style.position = "relative";
-                parent.innerHTML = '';
-                parent.appendChild(svg);
-            };
-
             const exportPDF = async () => {
                 if (selectedCellIndex.value !== null) selectedCellIndex.value = null;
                 isGenerating.value = true;