json2pptx 0.5.2 → 0.5.4

package/dist/index.d.mts

@@ -33,7 +33,11 @@ type ElementOutline = {
     style?: 'solid' | 'dashed' | 'dotted';
 };
 type ElementFilters = {
-    opacity?: string;
+    opacity?: string | number;
+    grayscale?: string | number;
+    blur?: string | number;
+    sepia?: string | number;
+    saturate?: string | number;
 };
 type ElementClip = {
     shape?: 'ellipse' | string;

package/dist/index.d.ts

@@ -33,7 +33,11 @@ type ElementOutline = {
     style?: 'solid' | 'dashed' | 'dotted';
 };
 type ElementFilters = {
-    opacity?: string;
+    opacity?: string | number;
+    grayscale?: string | number;
+    blur?: string | number;
+    sepia?: string | number;
+    saturate?: string | number;
 };
 type ElementClip = {
     shape?: 'ellipse' | string;

package/dist/index.js

@@ -764,7 +764,10 @@ function clampOpacity(value) {
   return Math.min(1, Math.max(0, value));
 }
 function getOpacityRatio(value) {
-  if (!value) return void 0;
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "number") {
+    return value > 1 ? Math.min(1, Math.max(0, value / 100)) : Math.min(1, Math.max(0, value));
+  }
   const normalized = value.trim();
   if (!normalized) return void 0;
   if (normalized.endsWith("%")) {
@@ -909,8 +912,9 @@ function getShadowOption(shadow, ratioPx2Pt) {
     angle = 225;
   }
   return {
+    type: "outer",
     color: c.color,
-    transparency: (1 - c.alpha) * 100,
+    opacity: c.alpha,
     blur: ((_b = shadow.blur) != null ? _b : 0) / ratioPx2Pt,
     offset,
     angle
@@ -1052,6 +1056,74 @@ function applySlideBackground(slide, slideJson, theme) {
   slide.background = { color: c.color, transparency: (1 - c.alpha) * 100 };
 }
 
+// src/renderers/image-patch.ts
+function stripImageFilterTags(value) {
+  return value.replace(/<a:alphaModFix\b[^>]*\/>/g, "").replace(/<a:grayscl\s*\/>/g, "");
+}
+function hasEnabledGrayscale(value) {
+  if (value === void 0 || value === null) return false;
+  if (typeof value === "number") return value > 0;
+  const normalized = value.trim();
+  if (!normalized) return false;
+  if (normalized.endsWith("%")) {
+    const percent = Number.parseFloat(normalized);
+    return Number.isFinite(percent) && percent > 0;
+  }
+  const numeric = Number.parseFloat(normalized);
+  return Number.isFinite(numeric) && numeric > 0;
+}
+function buildImageFilterXml(filters) {
+  if (!filters) return "";
+  const xml = [];
+  const opacity = getFilterOpacity(filters.opacity);
+  if (opacity !== void 0) {
+    xml.push(`<a:alphaModFix amt="${Math.round(opacity * 1e5)}"/>`);
+  }
+  if (hasEnabledGrayscale(filters.grayscale)) {
+    xml.push("<a:grayscl/>");
+  }
+  return xml.join("");
+}
+function imageFiltersRequireXmlPatch(filters) {
+  if (!filters) return false;
+  return getFilterOpacity(filters.opacity) !== void 0 || hasEnabledGrayscale(filters.grayscale);
+}
+function applyImageFilterPatch(slideXml, objectName, filters) {
+  const filterXml = buildImageFilterXml(filters);
+  if (!filterXml) return slideXml;
+  const nameToken = `name="${objectName}"`;
+  let cursor = 0;
+  let result = slideXml;
+  while (true) {
+    const nameIndex = result.indexOf(nameToken, cursor);
+    if (nameIndex === -1) break;
+    const picStart = result.lastIndexOf("<p:pic", nameIndex);
+    const picEnd = result.indexOf("</p:pic>", nameIndex);
+    if (picStart === -1 || picEnd === -1) break;
+    const picXml = result.slice(picStart, picEnd + "</p:pic>".length);
+    const blipOpenClose = picXml.match(/<a:blip\b([^>]*)>([\s\S]*?)<\/a:blip>/);
+    let updatedPicXml = picXml;
+    if (blipOpenClose) {
+      const attrs = blipOpenClose[1];
+      const inner = stripImageFilterTags(blipOpenClose[2]);
+      const nextBlip = `<a:blip${attrs}>${filterXml}${inner}</a:blip>`;
+      updatedPicXml = picXml.replace(blipOpenClose[0], nextBlip);
+    } else {
+      const blipSelfClosing = picXml.match(/<a:blip\b([^>]*)\/>/);
+      if (!blipSelfClosing) {
+        cursor = picEnd + 1;
+        continue;
+      }
+      const attrs = blipSelfClosing[1];
+      const nextBlip = `<a:blip${attrs}>${filterXml}</a:blip>`;
+      updatedPicXml = picXml.replace(blipSelfClosing[0], nextBlip);
+    }
+    result = result.slice(0, picStart) + updatedPicXml + result.slice(picEnd + "</p:pic>".length);
+    cursor = picStart + updatedPicXml.length;
+  }
+  return result;
+}
+
 // src/renderers/layout.ts
 function applyPptxLayout(pptx, width, height) {
   const viewportRatio = height / width;
@@ -1096,7 +1168,7 @@ var toPoints = (d) => {
   if (d.includes("NaN") || d.includes("undefined") || d.includes("null")) return [];
   let pathData;
   try {
-    pathData = new import_svg_pathdata.SVGPathData(d);
+    pathData = new import_svg_pathdata.SVGPathData(d).toAbs().normalizeST().normalizeHVZ(false);
   } catch {
     return [];
   }
@@ -1289,33 +1361,33 @@ function addTextElement(slide, element, presentation, slideIndex, elementIndex,
   if (element.flipV) options.flipV = element.flipV;
   slide.addText(textProps, options);
 }
-async function addImageElement(slide, element, ratioPx2Inch) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+async function addImageElement(slide, element, ratioPx2Inch, slideIndex, elementIndex, imageFilterPatches) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   if (element.type !== "image" || !element.src) return;
+  const objectName = `image-${slideIndex}-${(_a = element.id) != null ? _a : elementIndex}`;
   const options = {
-    x: ((_a = element.left) != null ? _a : 0) / ratioPx2Inch,
-    y: ((_b = element.top) != null ? _b : 0) / ratioPx2Inch,
-    w: ((_c = element.width) != null ? _c : 0) / ratioPx2Inch,
-    h: ((_d = element.height) != null ? _d : 0) / ratioPx2Inch
+    x: ((_b = element.left) != null ? _b : 0) / ratioPx2Inch,
+    y: ((_c = element.top) != null ? _c : 0) / ratioPx2Inch,
+    w: ((_d = element.width) != null ? _d : 0) / ratioPx2Inch,
+    h: ((_e = element.height) != null ? _e : 0) / ratioPx2Inch,
+    objectName
   };
   if (isBase64Image(element.src)) options.data = element.src;
   else options.data = await resolveImageData(element.src);
   if (element.flipH) options.flipH = element.flipH;
   if (element.flipV) options.flipV = element.flipV;
   if (element.rotate) options.rotate = element.rotate;
-  const filterOpacity = (_f = getFilterOpacity((_e = element.filters) == null ? void 0 : _e.opacity)) != null ? _f : 1;
   const elementOpacity = getElementOpacity(element.opacity);
-  const imageOpacity = filterOpacity * elementOpacity;
-  if (imageOpacity !== 1) {
-    options.transparency = (1 - imageOpacity) * 100;
+  if (elementOpacity !== 1) {
+    options.transparency = (1 - elementOpacity) * 100;
   }
-  if ((_g = element.clip) == null ? void 0 : _g.range) {
+  if ((_f = element.clip) == null ? void 0 : _f.range) {
     if (element.clip.shape === "ellipse") options.rounding = true;
     const [start, end] = element.clip.range;
     const [startX, startY] = start;
     const [endX, endY] = end;
-    const originW = ((_h = element.width) != null ? _h : 0) / ((endX - startX) / ratioPx2Inch);
-    const originH = ((_i = element.height) != null ? _i : 0) / ((endY - startY) / ratioPx2Inch);
+    const originW = ((_g = element.width) != null ? _g : 0) / ((endX - startX) / ratioPx2Inch);
+    const originH = ((_h = element.height) != null ? _h : 0) / ((endY - startY) / ratioPx2Inch);
     options.w = originW / ratioPx2Inch;
     options.h = originH / ratioPx2Inch;
     options.sizing = {
@@ -1327,6 +1399,14 @@ async function addImageElement(slide, element, ratioPx2Inch) {
     };
   }
   slide.addImage(options);
+  if (imageFiltersRequireXmlPatch(element.filters)) {
+    imageFilterPatches.push({
+      kind: "image",
+      slideIndex,
+      objectName,
+      filters: element.filters
+    });
+  }
 }
 function addShapeElement(slide, element, ratioPx2Pt, ratioPx2Inch, slideIndex, elementIndex, fillPatches) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -1385,7 +1465,7 @@ function addShapeElement(slide, element, ratioPx2Pt, ratioPx2Inch, slideIndex, e
     fontFace: element.text.defaultFontName || DEFAULT_FONT_FACE,
     color: "#000000",
     paraSpaceBefore: 0,
-    valign: element.text.align === "middle" ? "mid" : element.text.align,
+    valign: element.text.align === "middle" ? "middle" : element.text.align,
     fill: { color: "FFFFFF", transparency: 100 },
     fit: "none",
     objectName: `shape-text-${slideIndex}-${(_n = element.id) != null ? _n : elementIndex}`
@@ -1490,11 +1570,12 @@ function parseDataUrlImage(dataUrl) {
   return { mime, data, ext: (_a = extMap[mime]) != null ? _a : "png" };
 }
 async function createPPTX(presentation) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const parsedPresentation = (0, import_json2pptx_schema.parseDocument)(presentation);
   const normalizedPresentation = parsedPresentation;
   const pptx = new import_pptxgenjs.default();
   const fillPatches = [];
+  const imageFilterPatches = [];
   const width = parsedPresentation.width;
   const height = parsedPresentation.height;
   const ratioPx2Inch = 96 * (width / 960);
@@ -1523,7 +1604,7 @@ async function createPPTX(presentation) {
         textPadding,
         fillPatches
       );
-      await addImageElement(slide, element, ratioPx2Inch);
+      await addImageElement(slide, element, ratioPx2Inch, slideIndex, elementIndex, imageFilterPatches);
       addShapeElement(
         slide,
         element,
@@ -1542,7 +1623,7 @@ async function createPPTX(presentation) {
     outputType: "arraybuffer",
     compression: true
   });
-  if (!fillPatches.length) {
+  if (!fillPatches.length && !imageFilterPatches.length) {
     return { blob: new Blob([pptxBuffer]), fileName };
   }
   const zip = await import_jszip.default.loadAsync(pptxBuffer);
@@ -1587,6 +1668,18 @@ async function createPPTX(presentation) {
     const nextSlideXml = patch.kind === "background" ? applyBackgroundFillPatch(slideXml, patch.fill, relId) : applyShapeFillPatch(slideXml, patch.objectName, patch.fill, relId);
     slideCache.set(slideNumber, nextSlideXml);
   }
+  for (const patch of imageFilterPatches) {
+    const slideNumber = patch.slideIndex + 1;
+    const slidePath = `ppt/slides/slide${slideNumber}.xml`;
+    const slideXml = (_e = slideCache.get(slideNumber)) != null ? _e : zip.file(slidePath) ? await zip.file(slidePath).async("string") : "";
+    if (!slideXml) {
+      continue;
+    }
+    slideCache.set(
+      slideNumber,
+      applyImageFilterPatch(slideXml, patch.objectName, patch.filters)
+    );
+  }
   for (const [slideNumber, xml] of slideCache.entries()) {
     zip.file(`ppt/slides/slide${slideNumber}.xml`, xml);
   }