@microlee666/dom-to-pptx 1.1.4

package/rollup.config.js

@@ -0,0 +1,96 @@
+// rollup.config.js
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import polyfillNode from 'rollup-plugin-polyfill-node';
+import json from '@rollup/plugin-json';
+
+const input = 'src/index.js';
+
+// Helper to suppress circular dependency warnings from specific libraries
+const onwarn = (warning, warn) => {
+  if (warning.code === 'CIRCULAR_DEPENDENCY') {
+    // Ignore circular dependencies in these known packages
+    if (
+      warning.message.includes('node_modules/readable-stream') ||
+      warning.message.includes('node_modules/jszip') ||
+      warning.message.includes('node_modules/semver')
+    ) {
+      return;
+    }
+  }
+  warn(warning);
+};
+
+// --- CONFIG A: Library (NPM) ---
+// Does NOT include dependencies. Consumers (Webpack/Vite) will bundle them.
+const configLibrary = {
+  input,
+  output: [
+    {
+      file: 'dist/dom-to-pptx.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/dom-to-pptx.cjs',
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named',
+    },
+  ],
+  plugins: [
+    resolve({ preferBuiltins: true }), // Allow node resolution
+    commonjs(),
+    json(),
+  ],
+  // Mark all dependencies as external so they aren't bundled into the .mjs/.cjs files
+  external: ['pptxgenjs', 'html2canvas', 'jszip', 'fonteditor-core', 'opentype.js', 'pako'],
+  onwarn,
+};
+
+// --- CONFIG B: Browser Bundle (CDN) ---
+// Includes EVERYTHING (Polyfills + Dependencies). Standalone file.
+const configBundle = {
+  input,
+  output: {
+    file: 'dist/dom-to-pptx.bundle.js',
+    format: 'umd',
+    name: 'domToPptx',
+    esModule: false,
+    sourcemap: false,
+    // Inject global variables for browser compatibility
+    intro: `
+      var global = typeof self !== "undefined" ? self : this; 
+      var process = { env: { NODE_ENV: "production" } };
+    `,
+    globals: {
+      // If you want users to load PptxGenJS separately via script tag, keep this.
+      // If you want to bundle PptxGenJS inside, remove it from external/globals.
+      // Usually for "bundle.js", we bundle everything except maybe very large libs.
+      // Based on your previous config, we are bundling everything.
+    },
+  },
+  plugins: [
+    // 1. JSON plugin (needed for some deps)
+    json(),
+
+    // 2. Resolve browser versions of modules
+    resolve({
+      browser: true,
+      preferBuiltins: false, // Force use of browser polyfills
+    }),
+
+    // 3. Convert CJS to ESM
+    commonjs({
+      transformMixedEsModules: true,
+    }),
+
+    // 4. Inject Node.js Polyfills (Buffer, Stream, etc.)
+    polyfillNode(),
+  ],
+  // Empty external list means "Bundle everything"
+  external: [],
+  onwarn,
+};
+
+export default [configLibrary, configBundle];

package/src/font-embedder.js

@@ -0,0 +1,163 @@
+// src/font-embedder.js
+import opentype from 'opentype.js';
+import { fontToEot } from './font-utils.js';
+
+const START_RID = 201314;
+
+export class PPTXEmbedFonts {
+  constructor() {
+    this.zip = null;
+    this.rId = START_RID;
+    this.fonts = []; // { name, data, rid }
+  }
+
+  async loadZip(zip) {
+    this.zip = zip;
+  }
+
+  /**
+   * Reads the font name from the buffer using opentype.js
+   */
+  getFontInfo(fontBuffer) {
+    try {
+      const font = opentype.parse(fontBuffer);
+      const names = font.names;
+      // Prefer English name, fallback to others
+      const fontFamily = names.fontFamily.en || Object.values(names.fontFamily)[0];
+      return { name: fontFamily };
+    } catch (e) {
+      console.warn('Could not parse font info', e);
+      return { name: 'Unknown' };
+    }
+  }
+
+  async addFont(fontFace, fontBuffer, type) {
+    // Convert to EOT/fntdata for PPTX compatibility
+    const eotData = await fontToEot(type, fontBuffer);
+    const rid = this.rId++;
+    this.fonts.push({ name: fontFace, data: eotData, rid });
+  }
+
+  async updateFiles() {
+    await this.updateContentTypesXML();
+    await this.updatePresentationXML();
+    await this.updateRelsPresentationXML();
+    this.updateFontFiles();
+  }
+
+  async generateBlob() {
+    if (!this.zip) throw new Error('Zip not loaded');
+    return this.zip.generateAsync({
+      type: 'blob',
+      compression: 'DEFLATE',
+      compressionOptions: { level: 6 },
+    });
+  }
+
+  // --- XML Manipulation Methods ---
+
+  async updateContentTypesXML() {
+    const file = this.zip.file('[Content_Types].xml');
+    if (!file) throw new Error('[Content_Types].xml not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+
+    const types = doc.getElementsByTagName('Types')[0];
+    const defaults = Array.from(doc.getElementsByTagName('Default'));
+
+    const hasFntData = defaults.some((el) => el.getAttribute('Extension') === 'fntdata');
+
+    if (!hasFntData) {
+      const el = doc.createElement('Default');
+      el.setAttribute('Extension', 'fntdata');
+      el.setAttribute('ContentType', 'application/x-fontdata');
+      types.insertBefore(el, types.firstChild);
+    }
+
+    this.zip.file('[Content_Types].xml', new XMLSerializer().serializeToString(doc));
+  }
+
+  async updatePresentationXML() {
+    const file = this.zip.file('ppt/presentation.xml');
+    if (!file) throw new Error('ppt/presentation.xml not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    const presentation = doc.getElementsByTagName('p:presentation')[0];
+
+    // Enable embedding flags
+    presentation.setAttribute('saveSubsetFonts', 'true');
+    presentation.setAttribute('embedTrueTypeFonts', 'true');
+
+    // Find or create embeddedFontLst
+    let embeddedFontLst = presentation.getElementsByTagName('p:embeddedFontLst')[0];
+
+    if (!embeddedFontLst) {
+      embeddedFontLst = doc.createElement('p:embeddedFontLst');
+
+      // Insert before defaultTextStyle or at end
+      const defaultTextStyle = presentation.getElementsByTagName('p:defaultTextStyle')[0];
+      if (defaultTextStyle) {
+        presentation.insertBefore(embeddedFontLst, defaultTextStyle);
+      } else {
+        presentation.appendChild(embeddedFontLst);
+      }
+    }
+
+    // Add font references
+    this.fonts.forEach((font) => {
+      // Check if already exists
+      const existing = Array.from(embeddedFontLst.getElementsByTagName('p:font')).find(
+        (node) => node.getAttribute('typeface') === font.name
+      );
+
+      if (!existing) {
+        const embedFont = doc.createElement('p:embeddedFont');
+
+        const fontNode = doc.createElement('p:font');
+        fontNode.setAttribute('typeface', font.name);
+        embedFont.appendChild(fontNode);
+
+        const regular = doc.createElement('p:regular');
+        regular.setAttribute('r:id', `rId${font.rid}`);
+        embedFont.appendChild(regular);
+
+        embeddedFontLst.appendChild(embedFont);
+      }
+    });
+
+    this.zip.file('ppt/presentation.xml', new XMLSerializer().serializeToString(doc));
+  }
+
+  async updateRelsPresentationXML() {
+    const file = this.zip.file('ppt/_rels/presentation.xml.rels');
+    if (!file) throw new Error('presentation.xml.rels not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    const relationships = doc.getElementsByTagName('Relationships')[0];
+
+    this.fonts.forEach((font) => {
+      const rel = doc.createElement('Relationship');
+      rel.setAttribute('Id', `rId${font.rid}`);
+      rel.setAttribute('Target', `fonts/${font.rid}.fntdata`);
+      rel.setAttribute(
+        'Type',
+        'http://schemas.openxmlformats.org/officeDocument/2006/relationships/font'
+      );
+      relationships.appendChild(rel);
+    });
+
+    this.zip.file('ppt/_rels/presentation.xml.rels', new XMLSerializer().serializeToString(doc));
+  }
+
+  updateFontFiles() {
+    this.fonts.forEach((font) => {
+      this.zip.file(`ppt/fonts/${font.rid}.fntdata`, font.data);
+    });
+  }
+}

package/src/font-utils.js

@@ -0,0 +1,32 @@
+// src/font-utils.js
+import { Font } from 'fonteditor-core';
+import pako from 'pako';
+
+/**
+ * Converts various font formats to EOT (Embedded OpenType),
+ * which is highly compatible with PowerPoint embedding.
+ * @param {string} type - 'ttf', 'woff', or 'otf'
+ * @param {ArrayBuffer} fontBuffer - The raw font data
+ */
+export async function fontToEot(type, fontBuffer) {
+  const options = {
+    type,
+    hinting: true,
+    // inflate is required for WOFF decoding
+    inflate: type === 'woff' ? pako.inflate : undefined,
+  };
+
+  const font = Font.create(fontBuffer, options);
+
+  const eotBuffer = font.write({
+    type: 'eot',
+    toBuffer: true,
+  });
+
+  if (eotBuffer instanceof ArrayBuffer) {
+    return eotBuffer;
+  }
+
+  // Ensure we return an ArrayBuffer
+  return eotBuffer.buffer.slice(eotBuffer.byteOffset, eotBuffer.byteOffset + eotBuffer.byteLength);
+}

package/src/image-processor.js

@@ -0,0 +1,118 @@
+// src/image-processor.js
+
+export async function getProcessedImage(
+  src,
+  targetW,
+  targetH,
+  radius,
+  objectFit = 'fill',
+  objectPosition = '50% 50%'
+) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const scale = 2; // Double resolution
+      canvas.width = targetW * scale;
+      canvas.height = targetH * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+
+      // 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 };
+      }
+
+      // 1. Draw Mask
+      ctx.beginPath();
+      // ... (radius clamping logic remains the same) ...
+      const factor = Math.min(
+        targetW / (r.tl + r.tr) || Infinity,
+        targetH / (r.tr + r.br) || Infinity,
+        targetW / (r.br + r.bl) || Infinity,
+        targetH / (r.bl + r.tl) || Infinity
+      );
+
+      if (factor < 1) {
+        r.tl *= factor;
+        r.tr *= factor;
+        r.br *= factor;
+        r.bl *= factor;
+      }
+
+      ctx.moveTo(r.tl, 0);
+      ctx.lineTo(targetW - r.tr, 0);
+      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
+      ctx.lineTo(targetW, targetH - r.br);
+      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
+      ctx.lineTo(r.bl, targetH);
+      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
+      ctx.globalCompositeOperation = 'source-in';
+
+      // 3. Draw Image with Object Fit logic
+      const wRatio = targetW / img.width;
+      const hRatio = targetH / img.height;
+      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);
+
+      resolve(canvas.toDataURL('image/png'));
+    };
+
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}