dom-to-pptx 1.1.0 → 1.1.1

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

@@ -62410,11 +62410,14 @@
 
   // src/utils.js
 
-  /**
-   * Checks if any parent element has overflow: hidden which would clip this element
-   * @param {HTMLElement} node - The DOM node to check
-   * @returns {boolean} - True if a parent has overflow-hidden or overflow-clip
-   */
+  // canvas context for color normalization
+  let _ctx;
+  function getCtx() {
+    if (!_ctx) _ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    return _ctx;
+  }
+
+  // Checks if any parent element has overflow: hidden which would clip this element
   function isClippedByParent(node) {
     let parent = node.parentElement;
     while (parent && parent !== document.body) {
@@ -62580,28 +62583,58 @@
     return 'data:image/svg+xml;base64,' + btoa(svg);
   }
 
+  // --- REPLACE THE EXISTING parseColor FUNCTION ---
   function parseColor(str) {
-    if (!str || str === 'transparent' || str.startsWith('rgba(0, 0, 0, 0)')) {
+    if (!str || str === 'transparent' || str.trim() === 'rgba(0, 0, 0, 0)') {
       return { hex: null, opacity: 0 };
     }
-    if (str.startsWith('#')) {
-      let hex = str.slice(1);
-      if (hex.length === 3)
-        hex = hex
-          .split('')
-          .map((c) => c + c)
-          .join('');
-      return { hex: hex.toUpperCase(), opacity: 1 };
+
+    const ctx = getCtx();
+    ctx.fillStyle = str;
+    // This forces the browser to resolve variables and convert formats (oklch -> rgb/hex)
+    const computed = ctx.fillStyle; 
+
+    // 1. Handle Hex Output (e.g. #ff0000 or #ff0000ff)
+    if (computed.startsWith('#')) {
+      let hex = computed.slice(1); // Remove '#'
+      let opacity = 1;
+
+      // Expand shorthand #RGB -> #RRGGBB
+      if (hex.length === 3) {
+        hex = hex.split('').map(c => c + c).join('');
+      }
+      // Expand shorthand #RGBA -> #RRGGBBAA
+      else if (hex.length === 4) {
+        hex = hex.split('').map(c => c + c).join('');
+      }
+
+      // Handle 8-digit Hex (RRGGBBAA) - PptxGenJS fails if we send 8 digits
+      if (hex.length === 8) {
+        opacity = parseInt(hex.slice(6), 16) / 255;
+        hex = hex.slice(0, 6); // Keep only RRGGBB
+      }
+
+      return { hex: hex.toUpperCase(), opacity };
     }
-    const match = str.match(/[\d.]+/g);
+
+    // 2. Handle RGB/RGBA Output (e.g. "rgb(55, 65, 81)" or "rgba(55, 65, 81, 1)")
+    const match = computed.match(/[\d.]+/g);
     if (match && match.length >= 3) {
       const r = parseInt(match[0]);
       const g = parseInt(match[1]);
       const b = parseInt(match[2]);
       const a = match.length > 3 ? parseFloat(match[3]) : 1;
-      const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+
+      // Bitwise shift to get Hex
+      const hex = ((1 << 24) + (r << 16) + (g << 8) + b)
+        .toString(16)
+        .slice(1)
+        .toUpperCase();
+
       return { hex, opacity: a };
     }
+
+    // Fallback (Parsing failed)
     return { hex: null, opacity: 0 };
   }
 
@@ -63085,33 +63118,30 @@
 
   // src/image-processor.js
 
-  async function getProcessedImage(src, targetW, targetH, radius) {
+  async function getProcessedImage(src, targetW, targetH, radius, objectFit = 'fill', objectPosition = '50% 50%') {
     return new Promise((resolve) => {
       const img = new Image();
-      img.crossOrigin = 'Anonymous'; // Critical for canvas manipulation
+      img.crossOrigin = 'Anonymous'; 
 
       img.onload = () => {
         const canvas = document.createElement('canvas');
-        // Double resolution for better quality
-        const scale = 2;
+        const scale = 2; // Double resolution
         canvas.width = targetW * scale;
         canvas.height = targetH * scale;
         const ctx = canvas.getContext('2d');
         ctx.scale(scale, scale);
 
-        // Normalize radius input to an object { tl, tr, br, bl }
+        // Normalize radius
         let r = { tl: 0, tr: 0, br: 0, bl: 0 };
         if (typeof radius === 'number') {
           r = { tl: radius, tr: radius, br: radius, bl: radius };
         } else if (typeof radius === 'object' && radius !== null) {
-          r = { ...r, ...radius }; // Merge with defaults
+          r = { ...r, ...radius };
         }
 
-        // 1. Draw the Mask (Custom Shape with specific corners)
+        // 1. Draw Mask
         ctx.beginPath();
-
-        // Border Radius Clamping Logic (CSS Spec)
-        // Prevents corners from overlapping if radii are too large for the container
+        // ... (radius clamping logic remains the same) ...
         const factor = Math.min(
           targetW / (r.tl + r.tr) || Infinity,
           targetH / (r.tr + r.br) || Infinity,
@@ -63120,13 +63150,9 @@
         );
 
         if (factor < 1) {
-          r.tl *= factor;
-          r.tr *= factor;
-          r.br *= factor;
-          r.bl *= factor;
+          r.tl *= factor; r.tr *= factor; r.br *= factor; r.bl *= factor;
         }
 
-        // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
         ctx.moveTo(r.tl, 0);
         ctx.lineTo(targetW - r.tr, 0);
         ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
@@ -63136,22 +63162,58 @@
         ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
         ctx.lineTo(0, r.tl);
         ctx.arcTo(0, 0, r.tl, 0, r.tl);
-
         ctx.closePath();
         ctx.fillStyle = '#000';
         ctx.fill();
 
-        // 2. Composite Source-In (Crops the next image draw to the mask)
+        // 2. Composite Source-In
         ctx.globalCompositeOperation = 'source-in';
 
-        // 3. Draw Image (Object Cover Logic)
+        // 3. Draw Image with Object Fit logic
         const wRatio = targetW / img.width;
         const hRatio = targetH / img.height;
-        const maxRatio = Math.max(wRatio, hRatio);
-        const renderW = img.width * maxRatio;
-        const renderH = img.height * maxRatio;
-        const renderX = (targetW - renderW) / 2;
-        const renderY = (targetH - renderH) / 2;
+        let renderW, renderH;
+
+        if (objectFit === 'contain') {
+          const fitScale = Math.min(wRatio, hRatio);
+          renderW = img.width * fitScale;
+          renderH = img.height * fitScale;
+        } else if (objectFit === 'cover') {
+          const coverScale = Math.max(wRatio, hRatio);
+          renderW = img.width * coverScale;
+          renderH = img.height * coverScale;
+        } else if (objectFit === 'none') {
+          renderW = img.width;
+          renderH = img.height;
+        } else if (objectFit === 'scale-down') {
+          const scaleDown = Math.min(1, Math.min(wRatio, hRatio));
+          renderW = img.width * scaleDown;
+          renderH = img.height * scaleDown;
+        } else {
+          // 'fill' (default)
+          renderW = targetW;
+          renderH = targetH;
+        }
+
+        // Handle Object Position (simplified parsing for "x% y%" or keywords)
+        let posX = 0.5; // Default center
+        let posY = 0.5;
+
+        const posParts = objectPosition.split(' ');
+        if (posParts.length > 0) {
+          const parsePos = (val) => {
+            if (val === 'left' || val === 'top') return 0;
+            if (val === 'center') return 0.5;
+            if (val === 'right' || val === 'bottom') return 1;
+            if (val.includes('%')) return parseFloat(val) / 100;
+            return 0.5; // fallback
+          };
+          posX = parsePos(posParts[0]);
+          posY = posParts.length > 1 ? parsePos(posParts[1]) : 0.5;
+        }
+
+        const renderX = (targetW - renderW) * posX;
+        const renderY = (targetH - renderH) * posY;
 
         ctx.drawImage(img, renderX, renderY, renderW, renderH);
 
@@ -63207,34 +63269,37 @@
       await processSlide(root, slide, pptx);
     }
 
-      // 3. Font Embedding Logic
+    // 3. Font Embedding Logic
     let finalBlob;
     let fontsToEmbed = options.fonts || [];
 
     if (options.autoEmbedFonts) {
       // A. Scan DOM for used font families
       const usedFamilies = getUsedFontFamilies(elements);
-      
+
       // B. Scan CSS for URLs matches
       const detectedFonts = await getAutoDetectedFonts(usedFamilies);
-      
+
       // C. Merge (Avoid duplicates)
-      const explicitNames = new Set(fontsToEmbed.map(f => f.name));
+      const explicitNames = new Set(fontsToEmbed.map((f) => f.name));
       for (const autoFont of detectedFonts) {
-          if (!explicitNames.has(autoFont.name)) {
-              fontsToEmbed.push(autoFont);
-          }
+        if (!explicitNames.has(autoFont.name)) {
+          fontsToEmbed.push(autoFont);
+        }
       }
-      
+
       if (detectedFonts.length > 0) {
-          console.log('Auto-detected fonts:', detectedFonts.map(f => f.name));
+        console.log(
+          'Auto-detected fonts:',
+          detectedFonts.map((f) => f.name)
+        );
       }
     }
 
     if (fontsToEmbed.length > 0) {
       // Generate initial PPTX
       const initialBlob = await pptx.write({ outputType: 'blob' });
-      
+
       // Load into Embedder
       const zip = await JSZip.loadAsync(initialBlob);
       const embedder = new PPTXEmbedFonts();
@@ -63246,7 +63311,7 @@
           const response = await fetch(fontCfg.url);
           if (!response.ok) throw new Error(`Failed to fetch ${fontCfg.url}`);
           const buffer = await response.arrayBuffer();
-          
+
           // Infer type
           const ext = fontCfg.url.split('.').pop().split(/[?#]/)[0].toLowerCase();
           let type = 'ttf';
@@ -63385,11 +63450,8 @@
 
   /**
    * 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.
+   * Fixes icon clipping by adding padding in the clone to capture font bleed,
+   * then scaling the result to fit the original bounding box.
    */
   async function elementToCanvasImage(node, widthPx, heightPx) {
     return new Promise((resolve) => {
@@ -63405,51 +63467,76 @@
       html2canvas(node, {
         backgroundColor: null,
         logging: false,
-        scale: 3, // Higher scale for sharper icons
-        useCORS: true, // critical for external fonts/images
+        scale: 3, // High resolution capture
+        useCORS: true,
         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)
+            // --- FIX FOR ICON CLIPPING ---
             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';
+            // Detect icons: I tags, SPAN tags, or elements with icon classes
+            const isIcon =
+              tag === 'I' ||
+              tag === 'SPAN' ||
+              clonedNode.className.includes('fa-') ||
+              clonedNode.className.includes('icon');
+
+            if (isIcon) {
+              // 1. Use inline-flex to center the glyph content
+              clonedNode.style.display = 'flex';
               clonedNode.style.justifyContent = 'center';
               clonedNode.style.alignItems = 'center';
 
-              // Remove margins that might offset the capture
-              clonedNode.style.margin = '0';
+              // 2. Reset constraints that might crop content
+              clonedNode.style.overflow = 'visible';
+              clonedNode.style.lineHeight = 'normal';
+
+              // 3. Add padding to the capture area.
+              // This ensures parts of the glyph sticking out of the bounding box (ascenders/descenders)
+              // are captured in the canvas instead of being cropped.
+              // 'content-box' ensures padding adds to the total width/height.
+              clonedNode.style.boxSizing = 'content-box';
+              clonedNode.style.padding = '10px';
+
+              // 4. Ensure the content box itself matches the original size (minimum)
+              // so the icon doesn't collapse.
+              clonedNode.style.minWidth = `${width}px`;
+              clonedNode.style.minHeight = `${height}px`;
 
-              // Ensure the font fits
-              clonedNode.style.lineHeight = '1';
-              clonedNode.style.verticalAlign = 'middle';
+              // Clear margins that might displace the capture
+              clonedNode.style.margin = '0';
             }
           }
         },
       })
         .then((canvas) => {
-          // Restore the original ID
+          // Restore ID
           if (originalId) node.id = originalId;
           else node.removeAttribute('id');
 
+          // Create destination canvas with the EXACT original dimensions
           const destCanvas = document.createElement('canvas');
           destCanvas.width = width;
           destCanvas.height = height;
           const ctx = destCanvas.getContext('2d');
 
-          // 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);
+          // --- SCALE TO FIT ---
+          // The captured 'canvas' is now larger than 'destCanvas' because we added padding.
+          // We draw the larger captured image into the smaller destination box.
+          // This effectively "zooms out" slightly, ensuring the bleed is visible within the bounds.
+          ctx.drawImage(
+            canvas,
+            0,
+            0,
+            canvas.width,
+            canvas.height, // Source: Full captured size (with padding)
+            0,
+            0,
+            width,
+            height // Dest: Original requested size
+          );
 
-          // --- Border Radius Clipping (Existing Logic) ---
+          // --- Border Radius Clipping (Preserve existing logic) ---
           let tl = parseFloat(style.borderTopLeftRadius) || 0;
           let tr = parseFloat(style.borderTopRightRadius) || 0;
           let br = parseFloat(style.borderBottomRightRadius) || 0;
@@ -63661,6 +63748,9 @@
         }
       }
 
+      const objectFit = style.objectFit || 'fill'; // default CSS behavior is fill
+      const objectPosition = style.objectPosition || '50% 50%';
+
       const item = {
         type: 'image',
         zIndex,
@@ -63669,7 +63759,14 @@
       };
 
       const job = async () => {
-        const processed = await getProcessedImage(node.src, widthPx, heightPx, radii);
+        const processed = await getProcessedImage(
+          node.src,
+          widthPx,
+          heightPx,
+          radii,
+          objectFit,
+          objectPosition
+        );
         if (processed) item.options.data = processed;
         else item.skip = true;
       };
@@ -63769,16 +63866,45 @@
       const isList = style.display === 'list-item';
       if (isList) {
         const fontSizePt = parseFloat(style.fontSize) * 0.75 * config.scale;
-        const bulletShift = (parseFloat(style.fontSize) || 16) * PX_TO_INCH * config.scale * 1.5;
-        x -= bulletShift;
-        w += bulletShift;
-        textParts.push({
-          text: '    ',
-          options: {
-            color: parseColor(style.color).hex || '000000',
-            fontSize: fontSizePt,
-          },
-        });
+        const listStyleType = style.listStyleType || 'disc';
+        const listStylePos = style.listStylePosition || 'outside';
+
+        let marker = null;
+
+        // 1. Determine the marker character based on list-style-type
+        if (listStyleType !== 'none') {
+          if (listStyleType === 'decimal') {
+            // Calculate index for ordered lists (1., 2., etc.)
+            const index = Array.prototype.indexOf.call(node.parentNode.children, node) + 1;
+            marker = `${index}.`;
+          } else if (listStyleType === 'circle') {
+            marker = '○';
+          } else if (listStyleType === 'square') {
+            marker = '■';
+          } else {
+            marker = '•'; // Default to disc
+          }
+        }
+
+        // 2. Apply alignment and add marker
+        if (marker) {
+          // Only shift the text box to the left if the bullet is OUTSIDE the content box.
+          // Tailwind 'list-inside' puts the bullet inside the box, so we must NOT shift X.
+          if (listStylePos === 'outside') {
+            const bulletShift = (parseFloat(style.fontSize) || 16) * PX_TO_INCH * config.scale * 1.5;
+            x -= bulletShift;
+            w += bulletShift;
+          }
+
+          // Add the bullet + 3 spaces for visual separation
+          textParts.push({
+            text: marker + '   ',
+            options: {
+              color: parseColor(style.color).hex || '000000',
+              fontSize: fontSizePt,
+            },
+          });
+        }
       }
 
       node.childNodes.forEach((child, index) => {
@@ -63858,6 +63984,7 @@
       }
 
       if (textPayload) {
+        textPayload.text[0].options.fontSize = Math.floor(textPayload.text[0]?.options?.fontSize)|| 12;
         items.push({
           type: 'text',
           zIndex: zIndex + 1,
@@ -63937,21 +64064,46 @@
 
         if (hasShadow) shapeOpts.shadow = getVisibleShadow(shadowStr, config.scale);
 
-        const borderRadius = parseFloat(style.borderRadius) || 0;
-        const aspectRatio = Math.max(widthPx, heightPx) / Math.min(widthPx, heightPx);
-        const isCircle = aspectRatio < 1.1 && borderRadius >= Math.min(widthPx, heightPx) / 2 - 1;
+        // 1. Calculate dimensions first
+        const minDimension = Math.min(widthPx, heightPx);
+
+        let rawRadius = parseFloat(style.borderRadius) || 0;
+        const isPercentage = style.borderRadius && style.borderRadius.toString().includes('%');
+
+        // 2. Normalize radius to pixels
+        let radiusPx = rawRadius;
+        if (isPercentage) {
+          radiusPx = (rawRadius / 100) * minDimension;
+        }
 
         let shapeType = pptx.ShapeType.rect;
-        if (isCircle) shapeType = pptx.ShapeType.ellipse;
-        else if (borderRadius > 0) {
+
+        // 3. Determine Shape Logic
+        const isSquare = Math.abs(widthPx - heightPx) < 1;
+        const isFullyRound = radiusPx >= minDimension / 2;
+
+        // CASE A: It is an Ellipse if:
+        // 1. It is explicitly "50%" (standard CSS way to make ovals/circles)
+        // 2. OR it is a perfect square and fully rounded (a circle)
+        if (isFullyRound && (isPercentage || isSquare)) {
+          shapeType = pptx.ShapeType.ellipse;
+        }
+        // CASE B: It is a Rounded Rectangle (including "Pill" shapes)
+        else if (radiusPx > 0) {
           shapeType = pptx.ShapeType.roundRect;
-          shapeOpts.rectRadius = Math.min(0.5, borderRadius / Math.min(widthPx, heightPx));
+          let r = radiusPx / minDimension;
+          if (r > 0.5) r = 0.5;
+          if (minDimension < 100) r = r * 0.25; // Small size adjustment for small shapes
+
+          shapeOpts.rectRadius = r;
         }
 
         if (textPayload) {
+          textPayload.text[0].options.fontSize = Math.floor(textPayload.text[0]?.options?.fontSize)|| 12;
           const textOptions = {
             shape: shapeType,
             ...shapeOpts,
+            rotate: rotation,
             align: textPayload.align,
             valign: textPayload.valign,
             inset: textPayload.inset,