dom-to-pptx 1.0.7 → 1.0.9

package/dist/dom-to-pptx.min.js

@@ -8079,6 +8079,7 @@
 
     /**
      * Determines if a given DOM node is primarily a text container.
+     * Updated to correctly reject Icon elements so they are rendered as images.
      */
     function isTextContainer(node) {
       const hasText = node.textContent.trim().length > 0;
@@ -8087,28 +8088,46 @@
       const children = Array.from(node.children);
       if (children.length === 0) return true;
 
-      // Check if children are purely inline text formatting or visual shapes
       const isSafeInline = (el) => {
-        // 1. Reject Web Components / Icons / Images
+        // 1. Reject Web Components / Custom Elements
         if (el.tagName.includes('-')) return false;
+        // 2. Reject Explicit Images/SVGs
         if (el.tagName === 'IMG' || el.tagName === 'SVG') return false;
 
+        // 3. Reject Class-based Icons (FontAwesome, Material, Bootstrap, etc.)
+        // If an <i> or <span> has icon classes, it is a visual object, not text.
+        if (el.tagName === 'I' || el.tagName === 'SPAN') {
+          const cls = el.getAttribute('class') || '';
+          if (
+            cls.includes('fa-') ||
+            cls.includes('fas') ||
+            cls.includes('far') ||
+            cls.includes('fab') ||
+            cls.includes('material-icons') ||
+            cls.includes('bi-') ||
+            cls.includes('icon')
+          ) {
+            return false;
+          }
+        }
+
         const style = window.getComputedStyle(el);
         const display = style.display;
 
-        // 2. Initial check: Must be a standard inline tag OR display:inline
-        const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(el.tagName);
+        // 4. Standard Inline Tag Check
+        const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(
+          el.tagName
+        );
         const isInlineDisplay = display.includes('inline');
 
         if (!isInlineTag && !isInlineDisplay) return false;
 
-        // 3. CRITICAL FIX: Check for Structural Styling
-        // PPTX Text Runs (parts of a text line) CANNOT have backgrounds, borders, or padding.
-        // If a child element has these, the parent is NOT a simple text container; 
-        // it is a layout container composed of styled blocks.
+        // 5. Structural Styling Check
+        // If a child has a background or border, it's a layout block, not a simple text span.
         const bgColor = parseColor(style.backgroundColor);
         const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
-        const hasBorder = parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
+        const hasBorder =
+          parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
 
         if (hasVisibleBg || hasBorder) {
           return false;
@@ -8135,6 +8154,69 @@
       return Math.round(Math.atan2(b, a) * (180 / Math.PI));
     }
 
+    function svgToPng(node) {
+      return new Promise((resolve) => {
+        const clone = node.cloneNode(true);
+        const rect = node.getBoundingClientRect();
+        const width = rect.width || 300;
+        const height = rect.height || 150;
+
+        function inlineStyles(source, target) {
+          const computed = window.getComputedStyle(source);
+          const properties = [
+            'fill',
+            'stroke',
+            'stroke-width',
+            'stroke-linecap',
+            'stroke-linejoin',
+            'opacity',
+            'font-family',
+            'font-size',
+            'font-weight',
+          ];
+
+          if (computed.fill === 'none') target.setAttribute('fill', 'none');
+          else if (computed.fill) target.style.fill = computed.fill;
+
+          if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+          else if (computed.stroke) target.style.stroke = computed.stroke;
+
+          properties.forEach((prop) => {
+            if (prop !== 'fill' && prop !== 'stroke') {
+              const val = computed[prop];
+              if (val && val !== 'auto') target.style[prop] = val;
+            }
+          });
+
+          for (let i = 0; i < source.children.length; i++) {
+            if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+          }
+        }
+
+        inlineStyles(node, clone);
+        clone.setAttribute('width', width);
+        clone.setAttribute('height', height);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        const xml = new XMLSerializer().serializeToString(clone);
+        const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          const scale = 3;
+          canvas.width = width * scale;
+          canvas.height = height * scale;
+          const ctx = canvas.getContext('2d');
+          ctx.scale(scale, scale);
+          ctx.drawImage(img, 0, 0, width, height);
+          resolve(canvas.toDataURL('image/png'));
+        };
+        img.onerror = () => resolve(null);
+        img.src = svgUrl;
+      });
+    }
+
     function getVisibleShadow(shadowStr, scale) {
       if (!shadowStr || shadowStr === 'none') return null;
       const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -8166,57 +8248,119 @@
       return null;
     }
 
+    /**
+     * Generates an SVG image for gradients, supporting degrees and keywords.
+     */
     function generateGradientSVG(w, h, bgString, radius, border) {
       try {
         const match = bgString.match(/linear-gradient\((.*)\)/);
         if (!match) return null;
         const content = match[1];
+
+        // Split by comma, ignoring commas inside parentheses (e.g. rgba())
         const parts = content.split(/,(?![^()]*\))/).map((p) => p.trim());
+        if (parts.length < 2) return null;
 
         let x1 = '0%',
           y1 = '0%',
           x2 = '0%',
           y2 = '100%';
-        let stopsStartIdx = 0;
-        if (parts[0].includes('to right')) {
-          x1 = '0%';
-          x2 = '100%';
-          y2 = '0%';
-          stopsStartIdx = 1;
-        } else if (parts[0].includes('to left')) {
-          x1 = '100%';
-          x2 = '0%';
-          y2 = '0%';
-          stopsStartIdx = 1;
-        } else if (parts[0].includes('to top')) {
-          y1 = '100%';
-          y2 = '0%';
-          stopsStartIdx = 1;
-        } else if (parts[0].includes('to bottom')) {
-          y1 = '0%';
-          y2 = '100%';
-          stopsStartIdx = 1;
+        let stopsStartIndex = 0;
+        const firstPart = parts[0].toLowerCase();
+
+        // 1. Check for Keywords (to right, etc.)
+        if (firstPart.startsWith('to ')) {
+          stopsStartIndex = 1;
+          const direction = firstPart.replace('to ', '').trim();
+          switch (direction) {
+            case 'top':
+              y1 = '100%';
+              y2 = '0%';
+              break;
+            case 'bottom':
+              y1 = '0%';
+              y2 = '100%';
+              break;
+            case 'left':
+              x1 = '100%';
+              x2 = '0%';
+              break;
+            case 'right':
+              x2 = '100%';
+              break;
+            case 'top right':
+              x1 = '0%';
+              y1 = '100%';
+              x2 = '100%';
+              y2 = '0%';
+              break;
+            case 'top left':
+              x1 = '100%';
+              y1 = '100%';
+              x2 = '0%';
+              y2 = '0%';
+              break;
+            case 'bottom right':
+              x2 = '100%';
+              y2 = '100%';
+              break;
+            case 'bottom left':
+              x1 = '100%';
+              y2 = '100%';
+              break;
+          }
+        }
+        // 2. Check for Degrees (45deg, 90deg, etc.)
+        else if (firstPart.match(/^-?[\d.]+(deg|rad|turn|grad)$/)) {
+          stopsStartIndex = 1;
+          const val = parseFloat(firstPart);
+          // CSS 0deg is Top (North), 90deg is Right (East), 180deg is Bottom (South)
+          // We convert this to SVG coordinates on a unit square (0-100%).
+          // Formula: Map angle to perimeter coordinates.
+          if (!isNaN(val)) {
+            const deg = firstPart.includes('rad') ? val * (180 / Math.PI) : val;
+            const cssRad = ((deg - 90) * Math.PI) / 180; // Correct CSS angle offset
+
+            // Calculate standard vector for rectangle center (50, 50)
+            const scale = 50; // Distance from center to edge (approx)
+            const cos = Math.cos(cssRad); // Y component (reversed in SVG)
+            const sin = Math.sin(cssRad); // X component
+
+            // Invert Y for SVG coordinate system
+            x1 = (50 - sin * scale).toFixed(1) + '%';
+            y1 = (50 + cos * scale).toFixed(1) + '%';
+            x2 = (50 + sin * scale).toFixed(1) + '%';
+            y2 = (50 - cos * scale).toFixed(1) + '%';
+          }
         }
 
+        // 3. Process Color Stops
         let stopsXML = '';
-        const stopParts = parts.slice(stopsStartIdx);
+        const stopParts = parts.slice(stopsStartIndex);
+
         stopParts.forEach((part, idx) => {
+          // Parse "Color Position" (e.g., "red 50%")
+          // Regex looks for optional space + number + unit at the end of the string
           let color = part;
           let offset = Math.round((idx / (stopParts.length - 1)) * 100) + '%';
-          const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
+
+          const posMatch = part.match(/^(.*?)\s+(-?[\d.]+(?:%|px)?)$/);
           if (posMatch) {
             color = posMatch[1];
             offset = posMatch[2];
           }
+
+          // Handle RGBA/RGB for SVG compatibility
           let opacity = 1;
           if (color.includes('rgba')) {
-            const rgba = color.match(/[\d.]+/g);
-            if (rgba && rgba.length > 3) {
-              opacity = rgba[3];
-              color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`;
+            const rgbaMatch = color.match(/[\d.]+/g);
+            if (rgbaMatch && rgbaMatch.length >= 4) {
+              opacity = rgbaMatch[3];
+              color = `rgb(${rgbaMatch[0]},${rgbaMatch[1]},${rgbaMatch[2]})`;
             }
           }
-          stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
+
+          stopsXML += `<stop offset="${offset}" stop-color="${color.trim()}" stop-opacity="${opacity}"/>`;
         });
 
         let strokeAttr = '';
@@ -8225,12 +8369,18 @@
         }
 
         const svg = `
-          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-              <defs><linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">${stopsXML}</linearGradient></defs>
-              <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
-          </svg>`;
+      <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+          <defs>
+            <linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">
+              ${stopsXML}
+            </linearGradient>
+          </defs>
+          <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
+      </svg>`;
+
         return 'data:image/svg+xml;base64,' + btoa(svg);
-      } catch {
+      } catch (e) {
+        console.warn('Gradient generation failed:', e);
         return null;
       }
     }
@@ -8505,29 +8655,69 @@
      * Optimized html2canvas wrapper
      * Now strictly captures the node itself, not the root.
      */
+    /**
+     * Optimized html2canvas wrapper
+     * Includes fix for cropped icons by adjusting styles in the cloned document.
+     */
     async function elementToCanvasImage(node, widthPx, heightPx) {
       return new Promise((resolve) => {
+        // 1. Assign a temp ID to locate the node inside the cloned document
+        const originalId = node.id;
+        const tempId = 'pptx-capture-' + Math.random().toString(36).substr(2, 9);
+        node.id = tempId;
+
         const width = Math.max(Math.ceil(widthPx), 1);
         const height = Math.max(Math.ceil(heightPx), 1);
         const style = window.getComputedStyle(node);
 
-        // Optimized: Capture ONLY the specific node
         html2canvas(node, {
           backgroundColor: null,
           logging: false,
-          scale: 2, // Slight quality boost
+          scale: 3, // Higher scale for sharper icons
+          useCORS: true, // critical for external fonts/images
+          onclone: (clonedDoc) => {
+            const clonedNode = clonedDoc.getElementById(tempId);
+            if (clonedNode) {
+              // --- FIX: PREVENT ICON CLIPPING ---
+              // 1. Force overflow visible so glyphs bleeding out aren't cut
+              clonedNode.style.overflow = 'visible';
+
+              // 2. Adjust alignment for Icons to prevent baseline clipping
+              // (Applies to <i>, <span>, or standard icon classes)
+              const tag = clonedNode.tagName;
+              if (tag === 'I' || tag === 'SPAN' || clonedNode.className.includes('fa-')) {
+                // Flex center helps align the glyph exactly in the middle of the box
+                // preventing top/bottom cropping due to line-height mismatches.
+                clonedNode.style.display = 'inline-flex';
+                clonedNode.style.justifyContent = 'center';
+                clonedNode.style.alignItems = 'center';
+
+                // Remove margins that might offset the capture
+                clonedNode.style.margin = '0';
+
+                // Ensure the font fits
+                clonedNode.style.lineHeight = '1';
+                clonedNode.style.verticalAlign = 'middle';
+              }
+            }
+          },
         })
           .then((canvas) => {
+            // Restore the original ID
+            if (originalId) node.id = originalId;
+            else node.removeAttribute('id');
+
             const destCanvas = document.createElement('canvas');
             destCanvas.width = width;
             destCanvas.height = height;
             const ctx = destCanvas.getContext('2d');
 
-            // Draw the captured canvas into our sized canvas
-            // html2canvas might return a larger canvas if scale > 1, so we fit it
+            // Draw captured canvas.
+            // We simply draw it to fill the box. Since we centered it in 'onclone',
+            // the glyph should now be visible within the bounds.
             ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
 
-            // Apply border radius clipping
+            // --- Border Radius Clipping (Existing Logic) ---
             let tl = parseFloat(style.borderTopLeftRadius) || 0;
             let tr = parseFloat(style.borderTopRightRadius) || 0;
             let br = parseFloat(style.borderBottomRightRadius) || 0;
@@ -8566,12 +8756,62 @@
             resolve(destCanvas.toDataURL('image/png'));
           })
           .catch((e) => {
+            if (originalId) node.id = originalId;
+            else node.removeAttribute('id');
             console.warn('Canvas capture failed for node', node, e);
             resolve(null);
           });
       });
     }
 
+    /**
+     * Helper to identify elements that should be rendered as icons (Images).
+     * Detects Custom Elements AND generic tags (<i>, <span>) with icon classes/pseudo-elements.
+     */
+    function isIconElement(node) {
+      // 1. Custom Elements (hyphenated tags) or Explicit Library Tags
+      const tag = node.tagName.toUpperCase();
+      if (
+        tag.includes('-') ||
+        [
+          'MATERIAL-ICON',
+          'ICONIFY-ICON',
+          'REMIX-ICON',
+          'ION-ICON',
+          'EVA-ICON',
+          'BOX-ICON',
+          'FA-ICON',
+        ].includes(tag)
+      ) {
+        return true;
+      }
+
+      // 2. Class-based Icons (FontAwesome, Bootstrap, Material symbols) on <i> or <span>
+      if (tag === 'I' || tag === 'SPAN') {
+        const cls = node.getAttribute('class') || '';
+        if (
+          typeof cls === 'string' &&
+          (cls.includes('fa-') ||
+            cls.includes('fas') ||
+            cls.includes('far') ||
+            cls.includes('fab') ||
+            cls.includes('bi-') ||
+            cls.includes('material-icons') ||
+            cls.includes('icon'))
+        ) {
+          // Double-check: Must have pseudo-element content to be a CSS icon
+          const before = window.getComputedStyle(node, '::before').content;
+          const after = window.getComputedStyle(node, '::after').content;
+          const hasContent = (c) => c && c !== 'none' && c !== 'normal' && c !== '""';
+
+          if (hasContent(before) || hasContent(after)) return true;
+        }
+        console.log('Icon element:', node, cls);
+      }
+
+      return false;
+    }
+
     /**
      * Replaces createRenderItem.
      * Returns { items: [], job: () => Promise, stopRecursion: boolean }
@@ -8645,23 +8885,18 @@
 
       const items = [];
 
-      // --- ASYNC JOB: SVGs / Icons ---
-      if (
-        node.nodeName.toUpperCase() === 'SVG' ||
-        node.tagName.includes('-') ||
-        node.tagName === 'ION-ICON'
-      ) {
+      // --- ASYNC JOB: SVG Tags ---
+      if (node.nodeName.toUpperCase() === 'SVG') {
         const item = {
           type: 'image',
           zIndex,
           domOrder,
-          options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+          options: { data: null, x, y, w, h, rotate: rotation },
         };
 
-        // Create Job
         const job = async () => {
-          const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-          if (pngData) item.options.data = pngData;
+          const processed = await svgToPng(node);
+          if (processed) item.options.data = processed;
           else item.skip = true;
         };
 
@@ -8711,6 +8946,22 @@
         return { items: [item], job, stopRecursion: true };
       }
 
+      // --- ASYNC JOB: Icons and Other Elements ---
+      if (isIconElement(node)) {
+        const item = {
+          type: 'image',
+          zIndex,
+          domOrder,
+          options: { x, y, w, h, rotate: rotation, data: null },
+        };
+        const job = async () => {
+          const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+          if (pngData) item.options.data = pngData;
+          else item.skip = true;
+        };
+        return { items: [item], job, stopRecursion: true };
+      }
+
       // Radii logic
       const borderRadiusValue = parseFloat(style.borderRadius) || 0;
       const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;