dom-to-pptx 1.0.1 → 1.0.2

package/code_context.txt

@@ -1,346 +0,0 @@
-// File: src/image-processor.js
-// src/image-processor.js
-
-export async function getProcessedImage(src, targetW, targetH, radius) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.crossOrigin = "Anonymous"; // Critical for canvas manipulation
-    
-    img.onload = () => {
-       const canvas = document.createElement('canvas');
-       // Double resolution for better quality
-       const scale = 2; 
-       canvas.width = targetW * scale;
-       canvas.height = targetH * scale;
-       const ctx = canvas.getContext('2d');
-       ctx.scale(scale, scale);
-
-       // 1. Draw the Mask (Rounded Rect)
-       ctx.beginPath();
-       if (ctx.roundRect) {
-         ctx.roundRect(0, 0, targetW, targetH, radius);
-       } else {
-         // Fallback for older browsers if needed
-         ctx.rect(0, 0, targetW, targetH);
-       }
-       ctx.fillStyle = '#000';
-       ctx.fill();
-
-       // 2. Composite Source-In
-       ctx.globalCompositeOperation = 'source-in';
-
-       // 3. Draw Image (Object Cover 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;
-
-       ctx.drawImage(img, renderX, renderY, renderW, renderH);
-
-       resolve(canvas.toDataURL('image/png'));
-    };
-    
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
-}
-// File: src/index.js
-// src/index.js
-import PptxGenJS from "pptxgenjs";
-import { parseColor, getTextStyle, isTextContainer, getVisibleShadow, generateGradientSVG } from "./utils.js";
-import { getProcessedImage } from "./image-processor.js";
-
-const PPI = 96;
-const PX_TO_INCH = 1 / PPI;
-
-/**
- * Converts a DOM element to a PPTX file.
- * @param {HTMLElement | string} elementOrSelector - The root element to convert.
- * @param {Object} options - { fileName: string }
- */
-export async function exportToPptx(elementOrSelector, options = {}) {
-  const root = typeof elementOrSelector === "string" 
-    ? document.querySelector(elementOrSelector) 
-    : elementOrSelector;
-
-  if (!root) throw new Error("Root element not found");
-
-  const pptx = new PptxGenJS();
-  pptx.layout = "LAYOUT_16x9"; // Default
-  const slide = pptx.addSlide();
-
-  // Use the dimensions of the root element to calculate scaling
-  const rootRect = root.getBoundingClientRect();
-  
-  // Standard PPTX 16:9 dimensions in inches
-  const PPTX_WIDTH_IN = 10;
-  const PPTX_HEIGHT_IN = 5.625;
-
-  const contentWidthIn = rootRect.width * PX_TO_INCH;
-  const contentHeightIn = rootRect.height * PX_TO_INCH;
-  
-  // Scale content to fit within the slide
-  const scale = Math.min(
-    PPTX_WIDTH_IN / contentWidthIn,
-    PPTX_HEIGHT_IN / contentHeightIn
-  );
-
-  const layoutConfig = {
-    rootX: rootRect.x,
-    rootY: rootRect.y,
-    scale: scale,
-    // Center the content
-    offX: (PPTX_WIDTH_IN - contentWidthIn * scale) / 2,
-    offY: (PPTX_HEIGHT_IN - contentHeightIn * scale) / 2,
-  };
-
-  await processNode(root, pptx, slide, layoutConfig);
-  
-  const fileName = options.fileName || "export.pptx";
-  pptx.writeFile({ fileName });
-}
-
-async function processNode(node, pptx, slide, config) {
-  if (node.nodeType !== 1) return; // Element nodes only
-  
-  const style = window.getComputedStyle(node);
-  if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return;
-
-  const rect = node.getBoundingClientRect();
-  if (rect.width === 0 || rect.height === 0) return;
-
-  const x = config.offX + (rect.x - config.rootX) * PX_TO_INCH * config.scale;
-  const y = config.offY + (rect.y - config.rootY) * PX_TO_INCH * config.scale;
-  const w = rect.width * PX_TO_INCH * config.scale;
-  const h = rect.height * PX_TO_INCH * config.scale;
-
-  // --- 1. Detect Image Wrapper ---
-  let isImageWrapper = false;
-  const imgChild = Array.from(node.children).find(c => c.tagName === 'IMG');
-  if (imgChild) {
-      const imgRect = imgChild.getBoundingClientRect();
-      if (Math.abs(imgRect.width - rect.width) < 2 && Math.abs(imgRect.height - rect.height) < 2) {
-          isImageWrapper = true;
-      }
-  }
-
-  // --- 2. Backgrounds & Borders ---
-  let bgColor = parseColor(style.backgroundColor);
-  if (isImageWrapper && bgColor) bgColor = null; // Prevent halo
-
-  const hasGradient = style.backgroundImage && style.backgroundImage.includes("linear-gradient");
-  const borderColor = parseColor(style.borderColor);
-  const borderWidth = parseFloat(style.borderWidth);
-  const hasBorder = borderWidth > 0 && borderColor;
-  const shadowStr = style.boxShadow;
-  const hasShadow = shadowStr && shadowStr !== "none";
-  const borderRadius = parseFloat(style.borderRadius) || 0;
-
-  if (hasGradient) {
-    const svgData = generateGradientSVG(rect.width, rect.height, style.backgroundImage, borderRadius, hasBorder ? { color: borderColor, width: borderWidth } : null);
-    if (svgData) slide.addImage({ data: svgData, x, y, w, h });
-  } else if (bgColor || hasBorder || hasShadow) {
-    const isCircle = borderRadius >= Math.min(rect.width, rect.height) / 2 - 1;
-
-    const shapeOpts = {
-      x, y, w, h,
-      fill: bgColor ? { color: bgColor } : null,
-      line: hasBorder ? { color: borderColor, width: borderWidth * 0.75 * config.scale } : null,
-    };
-
-    if (hasShadow) {
-      const shadow = getVisibleShadow(shadowStr, config.scale);
-      if (shadow) shapeOpts.shadow = shadow;
-      
-      // Fix for shadow on transparent background (needed for PPTX to render shadow)
-      if (!bgColor && !hasBorder) {
-        if (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
-             shapeOpts.fill = { color: parseColor(style.backgroundColor) };
-        }
-      }
-    }
-
-    if (isCircle) {
-      slide.addShape(pptx.ShapeType.ellipse, shapeOpts);
-    } else if (borderRadius > 0) {
-      const radiusFactor = Math.min(1, borderRadius / (Math.min(rect.width, rect.height) / 1.75));
-      shapeOpts.rectRadius = radiusFactor;
-      slide.addShape(pptx.ShapeType.roundRect, shapeOpts);
-    } else {
-      slide.addShape(pptx.ShapeType.rect, shapeOpts);
-    }
-  }
-
-  // --- 3. Process Image ---
-  if (node.tagName === "IMG") {
-    let effectiveRadius = borderRadius;
-    // Check parent clipping if current img has no radius
-    if (effectiveRadius === 0) {
-        const parentStyle = window.getComputedStyle(node.parentElement);
-        if (parentStyle.overflow !== 'visible') {
-            effectiveRadius = parseFloat(parentStyle.borderRadius) || 0;
-        }
-    }
-
-    const processedImage = await getProcessedImage(node.src, rect.width, rect.height, effectiveRadius);
-    if (processedImage) {
-      slide.addImage({ data: processedImage, x, y, w, h });
-    }
-    return; // Don't process children of IMG
-  }
-
-  // --- 4. Process Text ---
-  if (isTextContainer(node)) {
-    const textParts = [];
-    node.childNodes.forEach((child, index) => {
-      let textVal = child.nodeType === 3 ? child.nodeValue : child.textContent;
-      let nodeStyle = child.nodeType === 1 ? window.getComputedStyle(child) : style;
-      
-      textVal = textVal.replace(/[\n\r\t]+/g, " ").replace(/\s{2,}/g, " ");
-      if (index === 0) textVal = textVal.trimStart();
-      if (index === node.childNodes.length - 1) textVal = textVal.trimEnd();
-
-      if (nodeStyle.textTransform === "uppercase") textVal = textVal.toUpperCase();
-      if (nodeStyle.textTransform === "lowercase") textVal = textVal.toLowerCase();
-
-      if (textVal.length > 0) {
-        textParts.push({ text: textVal, options: getTextStyle(nodeStyle, config.scale) });
-      }
-    });
-
-    if (textParts.length > 0) {
-      let align = style.textAlign || "left";
-      if (align === "start") align = "left";
-      if (align === "end") align = "right";
-      
-      let valign = "top";
-      if (style.alignItems === "center") valign = "middle"; // Flex approximation
-      
-      slide.addText(textParts, { x, y, w, h, align, valign, margin: 0, wrap: true, autoFit: false });
-    }
-    return;
-  }
-
-  // Recursive call
-  for (const child of node.children) {
-    await processNode(child, pptx, slide, config);
-  }
-}
-// File: src/utils.js
-// src/utils.js
-
-export function parseColor(str) {
-  if (!str || str === "transparent" || str.startsWith("rgba(0, 0, 0, 0)")) return null;
-  const rgb = str.match(/\d+/g);
-  if (!rgb || rgb.length < 3) return null;
-  // Convert RGB to Hex
-  return ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2]))
-    .toString(16).slice(1).toUpperCase();
-}
-
-export function getTextStyle(style, scale) {
-  return {
-    color: parseColor(style.color) || "000000",
-    fontFace: style.fontFamily.split(",")[0].replace(/['"]/g, ""),
-    fontSize: parseFloat(style.fontSize) * 0.75 * scale,
-    bold: parseInt(style.fontWeight) >= 600,
-  };
-}
-
-export function isTextContainer(node) {
-  const hasText = node.textContent.trim().length > 0;
-  if (!hasText) return false;
-  const children = Array.from(node.children);
-  if (children.length === 0) return true;
-  // Check if children are inline elements
-  const isInline = (el) => 
-    window.getComputedStyle(el).display.includes("inline") || 
-    ["SPAN", "B", "STRONG", "EM"].includes(el.tagName);
-  return children.every(isInline);
-}
-
-export function getVisibleShadow(shadowStr, scale) {
-  if (!shadowStr || shadowStr === "none") return null;
-  const shadows = shadowStr.split(/,(?![^(]*\))/);
-  
-  for (let s of shadows) {
-    s = s.trim();
-    if (s.startsWith("rgba(0, 0, 0, 0)")) continue;
-
-    const match = s.match(/(rgba?\([^\)]+\)|#[0-9a-fA-F]+)\s+(-?[\d\.]+)px\s+(-?[\d\.]+)px\s+([\d\.]+)px/);
-    if (match) {
-      const colorStr = match[1];
-      const x = parseFloat(match[2]);
-      const y = parseFloat(match[3]);
-      const blur = parseFloat(match[4]);
-      
-      const distance = Math.sqrt(x*x + y*y);
-      let angle = Math.atan2(y, x) * (180 / Math.PI);
-      if (angle < 0) angle += 360;
-
-      let opacity = 0.4;
-      if (colorStr.includes('rgba')) {
-          const alphaMatch = colorStr.match(/, ([0-9.]+)\)/);
-          if (alphaMatch) opacity = parseFloat(alphaMatch[1]);
-      }
-
-      return {
-        type: "outer",
-        angle: angle,
-        blur: blur * 0.75 * scale,
-        offset: distance * 0.75 * scale,
-        color: parseColor(colorStr) || "000000",
-        opacity: opacity,
-      };
-    }
-  }
-  return null;
-}
-
-export function generateGradientSVG(w, h, bgString, radius, border) {
-    try {
-      const match = bgString.match(/linear-gradient\((.*)\)/);
-      if (!match) return null;
-      const content = match[1];
-      // Basic gradient parsing logic (simplified from your script)
-      const parts = content.split(/,(?![^(]*\))/).map((p) => p.trim());
-      
-      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; }
-      // Add other directions as needed...
-
-      let stopsXML = "";
-      const stopParts = parts.slice(stopsStartIdx);
-      stopParts.forEach((part, idx) => {
-        let color = part;
-        let offset = Math.round((idx / (stopParts.length - 1)) * 100) + "%";
-        // Simple regex to separate color from percentage
-        const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
-        if (posMatch) { color = posMatch[1]; offset = posMatch[2]; }
-        
-        let opacity = 1;
-        if (color.includes("rgba")) {
-           // extract alpha
-           const rgba = color.match(/[\d\.]+/g);
-           if(rgba && rgba.length > 3) { opacity = rgba[3]; color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`; }
-        }
-        stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
-      });
-
-      let strokeAttr = "";
-      if (border) { strokeAttr = `stroke="#${border.color}" stroke-width="${border.width}"`; }
-
-      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>`;
-      return "data:image/svg+xml;base64," + btoa(svg);
-    } catch (e) { return null; }
-}