pptx-angular-viewer 1.31.2 → 1.31.3

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.31.2](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.2) - 2026-07-19
+
 ## [1.31.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.1) - 2026-07-18
 
 ## [1.31.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.0) - 2026-07-18

package/fesm2022/pptx-angular-viewer.mjs

@@ -450,22 +450,96 @@ function getResolvedShapeClipPathFor(shapeType, width, height, adjustments) {
     // 4. Final fallback: core's static preset clip-path table.
     return getShapeClipPath(shapeType);
 }
+/**
+ * Build a CSS `clip-path: path('…')` value from a custom-geometry (`a:custGeom`)
+ * SVG path string, rescaling its path-space coordinates (`pathWidth` x
+ * `pathHeight`) into the element's pixel box.
+ *
+ * CSS `path()` coordinates live in the element's own border-box pixel space
+ * (there is no viewBox), so freeform coordinates authored against the OOXML path
+ * extent must be scaled by `elemW / pathWidth` and `elemH / pathHeight`. Every
+ * binding already clips its shape container's background fill with the resolved
+ * clip-path, so returning one here lets a themed freeform (e.g. the "Balloons"
+ * background) render as its true outline instead of flooding its bounding box.
+ *
+ * Supports the absolute command set produced by the core geometry engine
+ * (M/L/C/Q/Z) plus elliptical arcs (A); unknown commands are passed through
+ * unscaled rather than dropped.
+ */
+function buildCustomGeometryClipPath(pathData, pathWidth, pathHeight, elemWidth, elemHeight) {
+    if (!pathData ||
+        !Number.isFinite(pathWidth) ||
+        !Number.isFinite(pathHeight) ||
+        pathWidth <= 0 ||
+        pathHeight <= 0 ||
+        !Number.isFinite(elemWidth) ||
+        !Number.isFinite(elemHeight) ||
+        elemWidth <= 0 ||
+        elemHeight <= 0) {
+        return undefined;
+    }
+    const sx = elemWidth / pathWidth;
+    const sy = elemHeight / pathHeight;
+    const round = (n) => {
+        const r = Math.round(n * 100) / 100;
+        return Object.is(r, -0) ? '0' : String(r);
+    };
+    const tokens = pathData.match(/[MLCQZAHVmlcqzahv][^MLCQZAHVmlcqzahv]*/g) ?? [];
+    const out = [];
+    for (const token of tokens) {
+        const cmd = token[0];
+        const upper = cmd.toUpperCase();
+        if (upper === 'Z') {
+            out.push('Z');
+            continue;
+        }
+        const nums = (token.slice(1).match(/-?[\d.]+(?:e-?\d+)?/gi) ?? []).map(Number);
+        if (upper === 'A') {
+            // rx ry x-axis-rotation large-arc-flag sweep-flag x y (per 7-number group)
+            const parts = [];
+            for (let i = 0; i + 6 < nums.length; i += 7) {
+                parts.push(round(nums[i] * sx), round(nums[i + 1] * sy), String(nums[i + 2]), String(nums[i + 3]), String(nums[i + 4]), round(nums[i + 5] * sx), round(nums[i + 6] * sy));
+            }
+            out.push(`A ${parts.join(' ')}`);
+            continue;
+        }
+        // M/L/C/Q (and H/V) carry (x, y) pairs; scale x by sx and y by sy.
+        const scaled = nums.map((n, i) => round(n * (i % 2 === 0 ? sx : sy)));
+        out.push(`${upper} ${scaled.join(' ')}`);
+    }
+    if (out.length === 0) {
+        return undefined;
+    }
+    return `path('${out.join(' ')}')`;
+}
 /**
  * Element-level convenience wrapper. Pulls `shapeType`, `width`, `height`, and
  * `shapeAdjustments` off a {@link PptxElement} and delegates to
  * {@link getResolvedShapeClipPathFor}.
  *
+ * Custom-geometry freeforms (which carry `pathData`/`pathWidth`/`pathHeight`
+ * rather than a preset `shapeType`) take priority: their outline is rescaled
+ * into the element box via {@link buildCustomGeometryClipPath} so the fill clips
+ * to the real shape instead of its bounding rectangle.
+ *
  * @param element The PPTX element to resolve a clip-path for.
  * @param width   Optional width override (pixels). Defaults to `element.width`.
  * @param height  Optional height override (pixels). Defaults to `element.height`.
  */
 function getResolvedShapeClipPath(element, width, height) {
+    const w = typeof width === 'number' ? width : element.width;
+    const h = typeof height === 'number' ? height : element.height;
+    const custom = element;
+    if (custom.pathData && custom.pathWidth && custom.pathHeight) {
+        const customClip = buildCustomGeometryClipPath(custom.pathData, custom.pathWidth, custom.pathHeight, w, h);
+        if (customClip) {
+            return customClip;
+        }
+    }
     const shapeType = element.shapeType;
     if (!shapeType) {
         return undefined;
     }
-    const w = typeof width === 'number' ? width : element.width;
-    const h = typeof height === 'number' ? height : element.height;
     const adjustments = element.shapeAdjustments;
     return getResolvedShapeClipPathFor(shapeType, w, h, adjustments);
 }
@@ -1450,20 +1524,29 @@ function getSvgStrokeDasharray(dashType, strokeWidth, customDashSegments) {
 /**
  * Builds a CSS `transform` string combining flip and rotation transforms for an element.
  * Flips are expressed as `scaleX(-1)` / `scaleY(-1)`, rotation as `rotate(Ndeg)`.
+ *
+ * Order matters: OOXML `a:xfrm` mirrors the shape *within* its bounding box
+ * (`flipH`/`flipV`) and *then* rotates the box by `rot`. With CSS
+ * `transform-origin: center`, transforms apply right-to-left, so the flips must
+ * come AFTER the rotation in the string (`rotate(θ) scaleX(-1)`) to be applied
+ * first. Emitting `scaleX(-1) rotate(θ)` instead reflects the rotation direction
+ * for any shape that is both flipped and rotated (e.g. the "Balloons" freeforms
+ * render mirrored/tilted the wrong way). This matches the Angular binding's
+ * `getContainerStyle`, which already emits `rotate() scaleX() scaleY()`.
  * @param element - The element whose transforms are read.
  * @returns A CSS transform string, or `undefined` if no transforms apply.
  */
 function getElementTransform(element) {
     const transforms = [];
+    if (element.rotation) {
+        transforms.push(`rotate(${element.rotation}deg)`);
+    }
     if (element.flipHorizontal) {
         transforms.push('scaleX(-1)');
     }
     if (element.flipVertical) {
         transforms.push('scaleY(-1)');
     }
-    if (element.rotation) {
-        transforms.push(`rotate(${element.rotation}deg)`);
-    }
     if (element.skewX) {
         transforms.push(`skewX(${element.skewX}deg)`);
     }
@@ -73870,7 +73953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], propDecorators: { canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }] } });
 
 // Generated by scripts/inline-shared.mjs from package.json. Do not edit.
-const PPTX_ANGULAR_VIEWER_VERSION = "1.31.1";
+const PPTX_ANGULAR_VIEWER_VERSION = "1.31.2";
 
 /**
  * account-page.component.ts: File > Account content.