dom-to-pptx 1.1.0 → 1.1.1

package/dist/dom-to-pptx.mjs

@@ -199,11 +199,14 @@ class PPTXEmbedFonts {
 
 // 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) {
@@ -369,28 +372,58 @@ function generateCustomShapeSVG(w, h, color, opacity, radii) {
   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 };
 }
 
@@ -874,33 +907,30 @@ async function getAutoDetectedFonts(usedFamilies) {
 
 // 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,
@@ -909,13 +939,9 @@ async function getProcessedImage(src, targetW, targetH, radius) {
       );
 
       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);
@@ -925,22 +951,58 @@ async function getProcessedImage(src, targetW, targetH, radius) {
       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);
 
@@ -996,34 +1058,37 @@ async function exportToPptx(target, options = {}) {
     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();
@@ -1035,7 +1100,7 @@ async function exportToPptx(target, options = {}) {
         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';
@@ -1174,11 +1239,8 @@ async function processSlide(root, slide, pptx) {
 
 /**
  * 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) => {
@@ -1194,51 +1256,76 @@ async function elementToCanvasImage(node, widthPx, heightPx) {
     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;
@@ -1450,6 +1537,9 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
       }
     }
 
+    const objectFit = style.objectFit || 'fill'; // default CSS behavior is fill
+    const objectPosition = style.objectPosition || '50% 50%';
+
     const item = {
       type: 'image',
       zIndex,
@@ -1458,7 +1548,14 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
     };
 
     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;
     };
@@ -1558,16 +1655,45 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
     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) => {
@@ -1647,6 +1773,7 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
     }
 
     if (textPayload) {
+      textPayload.text[0].options.fontSize = Math.floor(textPayload.text[0]?.options?.fontSize)|| 12;
       items.push({
         type: 'text',
         zIndex: zIndex + 1,
@@ -1726,21 +1853,46 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
 
       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,