pptx-angular-viewer 1.1.35 → 1.1.37

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.1.35](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.1.35) - 2026-06-21
+
+### Features
+
+- **angular:** Add full SmartArt editing inspector (by @ChristopherVR) ([c7ab8e2](https://github.com/ChristopherVR/pptx-viewer/commit/c7ab8e24ff3965dae0d18cc9f7373bfc510a62c4))
+
 ## [1.1.32](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.1.32) - 2026-06-21
 
 ### Dependencies

package/fesm2022/pptx-angular-viewer.mjs

@@ -25424,6 +25424,149 @@ function toggleCommentResolvedInList(comments, id) {
     return next;
 }
 
+/**
+ * Framework-agnostic touch-gesture state machine for the viewer canvas.
+ *
+ * Recognises three gestures from raw DOM `TouchEvent`s and emits callbacks:
+ *   - Pinch-to-zoom: two-finger spread/pinch, scaled by the distance ratio.
+ *   - Swipe: single-finger horizontal swipe (slide navigation).
+ *   - Long-press: single-finger hold (context-menu trigger).
+ *
+ * The recogniser holds all mutable pinch/swipe/long-press state internally and
+ * exposes four event handlers plus a `cancel()`. The listener attach/detach
+ * lifecycle (and any framework reactivity) stays in each binding; only this
+ * pure state machine is shared.
+ *
+ * @module touch-gestures
+ */
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** The minimum horizontal distance (px) to recognise a swipe. */
+const SWIPE_THRESHOLD_PX = 50;
+/** Maximum vertical deviation (px) for a swipe to still count. */
+const SWIPE_MAX_VERTICAL_PX = 100;
+/** The hold duration (ms) for a long-press. */
+const LONG_PRESS_DURATION_MS = 500;
+/** If the finger moves more than this (px) during a hold, cancel the long-press. */
+const LONG_PRESS_MOVE_TOLERANCE_PX = 10;
+// ---------------------------------------------------------------------------
+// Pure helpers
+// ---------------------------------------------------------------------------
+/** Compute the Euclidean distance between two touch points. */
+function getTouchDistance(t1, t2) {
+    const dx = t1.clientX - t2.clientX;
+    const dy = t1.clientY - t2.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+/**
+ * Clamp a scale value into the allowed zoom range. The bounds are parameters
+ * (not imported constants) to keep this module framework- and binding-agnostic.
+ */
+function clampScale$1(value, minScale, maxScale) {
+    return Math.min(Math.max(value, minScale), maxScale);
+}
+// ---------------------------------------------------------------------------
+// Recogniser factory
+// ---------------------------------------------------------------------------
+/**
+ * Create a stateful touch-gesture recogniser. The returned handlers mirror the
+ * React viewer's native `touch*` listeners exactly, including `preventDefault()`
+ * on the pinch path and the `setTimeout`-based long-press timer.
+ */
+function createTouchGestureRecognizer(config) {
+    const { getScale, minScale, maxScale, callbacks } = config;
+    // Pinch state.
+    let initialPinchDistance = 0;
+    let pinchBaseScale = 1;
+    let isPinching = false;
+    // Swipe state.
+    let swipeStartX = 0;
+    let swipeStartY = 0;
+    // Long-press state.
+    let longPressTimer = null;
+    let longPressStartX = 0;
+    let longPressStartY = 0;
+    const cancelLongPress = () => {
+        if (longPressTimer !== null) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+    };
+    const onTouchStart = (e) => {
+        if (e.touches.length === 2) {
+            // Start pinch.
+            isPinching = true;
+            initialPinchDistance = getTouchDistance(e.touches[0], e.touches[1]);
+            pinchBaseScale = getScale();
+            cancelLongPress();
+            e.preventDefault();
+        }
+        else if (e.touches.length === 1) {
+            // Potential swipe or long-press.
+            swipeStartX = e.touches[0].clientX;
+            swipeStartY = e.touches[0].clientY;
+            longPressStartX = e.touches[0].clientX;
+            longPressStartY = e.touches[0].clientY;
+            cancelLongPress();
+            longPressTimer = setTimeout(() => {
+                longPressTimer = null;
+                callbacks.onLongPress?.(longPressStartX, longPressStartY);
+            }, LONG_PRESS_DURATION_MS);
+        }
+    };
+    const onTouchMove = (e) => {
+        if (e.touches.length === 2 && isPinching) {
+            e.preventDefault();
+            const currentDistance = getTouchDistance(e.touches[0], e.touches[1]);
+            if (initialPinchDistance > 0) {
+                const ratio = currentDistance / initialPinchDistance;
+                const newScale = clampScale$1(pinchBaseScale * ratio, minScale, maxScale);
+                callbacks.onPinchZoom?.(newScale);
+            }
+        }
+        else if (e.touches.length === 1) {
+            // Cancel the long-press if the finger moved too far.
+            const dx = e.touches[0].clientX - longPressStartX;
+            const dy = e.touches[0].clientY - longPressStartY;
+            if (Math.abs(dx) > LONG_PRESS_MOVE_TOLERANCE_PX ||
+                Math.abs(dy) > LONG_PRESS_MOVE_TOLERANCE_PX) {
+                cancelLongPress();
+            }
+        }
+    };
+    const onTouchEnd = (e) => {
+        if (isPinching) {
+            isPinching = false;
+            initialPinchDistance = 0;
+            return;
+        }
+        cancelLongPress();
+        // Detect a swipe from the touch that just ended.
+        if (e.changedTouches.length === 1 && e.touches.length === 0) {
+            const endX = e.changedTouches[0].clientX;
+            const endY = e.changedTouches[0].clientY;
+            const deltaX = endX - swipeStartX;
+            const deltaY = endY - swipeStartY;
+            if (Math.abs(deltaX) >= SWIPE_THRESHOLD_PX && Math.abs(deltaY) < SWIPE_MAX_VERTICAL_PX) {
+                callbacks.onSwipe?.(deltaX > 0 ? 1 : -1);
+            }
+        }
+    };
+    const onTouchCancel = () => {
+        isPinching = false;
+        initialPinchDistance = 0;
+        cancelLongPress();
+    };
+    return {
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        onTouchCancel,
+        cancel: onTouchCancel,
+    };
+}
+
 /**
  * insert-chart.ts - framework-agnostic factory for a sensible DEFAULT new
  * chart element, the single source of truth every binding (React, Vue,
@@ -54377,6 +54520,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], activeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeName", required: false }] }], applyTheme: [{ type: i0.Output, args: ["applyTheme"] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
+/**
+ * touch-gestures.ts: thin Angular adapter over the framework-agnostic
+ * `createTouchGestureRecognizer` from `pptx-viewer-shared`.
+ *
+ * The gesture state machine itself (pinch-to-zoom, swipe, long-press) lives in
+ * shared and is identical across React / Vue / Angular. This adapter only owns
+ * the DOM listener attach/detach lifecycle, mirroring the React hook
+ * `packages/react/src/viewer/hooks/useTouchGestures.ts`:
+ *   - `touchstart` / `touchmove` are registered with `{ passive: false }` so the
+ *     recogniser can call `preventDefault()` to suppress the browser's native
+ *     pinch-zoom on the canvas;
+ *   - `touchend` / `touchcancel` are passive (they never call preventDefault).
+ *
+ * `attachTouchGestures(element, config)` returns a teardown function that
+ * removes every listener and cancels any pending long-press timer. Components
+ * call it from `afterNextRender` (when the target node is live) and run the
+ * teardown via `DestroyRef.onDestroy`.
+ *
+ * @module touch-gestures (angular)
+ */
+/**
+ * Viewer zoom bounds. The Angular viewer clamps zoom to [0.2, 3] (see
+ * `ZOOM_MIN` / `ZOOM_MAX` in `power-point-viewer.component.ts`); the pinch path
+ * must clamp to the same range so a pinch can never exceed the buttons.
+ */
+const MIN_ZOOM_SCALE = 0.2;
+const MAX_ZOOM_SCALE = 3;
+/** Clamp a scale value to the Angular viewer's allowed zoom range. */
+function clampScale(value) {
+    return clampScale$1(value, MIN_ZOOM_SCALE, MAX_ZOOM_SCALE);
+}
+/**
+ * Attach the shared touch-gesture recogniser to `element` and return a teardown
+ * function. Mirrors the React hook's listener lifecycle exactly:
+ * `touchstart`/`touchmove` are non-passive (so pinch can `preventDefault`),
+ * `touchend`/`touchcancel` are passive.
+ */
+function attachTouchGestures(element, config) {
+    const recognizer = createTouchGestureRecognizer({
+        getScale: config.getScale,
+        minScale: MIN_ZOOM_SCALE,
+        maxScale: MAX_ZOOM_SCALE,
+        callbacks: config.callbacks,
+    });
+    const onStart = (e) => recognizer.onTouchStart(e);
+    const onMove = (e) => recognizer.onTouchMove(e);
+    const onEnd = (e) => recognizer.onTouchEnd(e);
+    const onCancel = () => recognizer.onTouchCancel();
+    element.addEventListener('touchstart', onStart, { passive: false });
+    element.addEventListener('touchmove', onMove, { passive: false });
+    element.addEventListener('touchend', onEnd, { passive: true });
+    element.addEventListener('touchcancel', onCancel, { passive: true });
+    return () => {
+        element.removeEventListener('touchstart', onStart);
+        element.removeEventListener('touchmove', onMove);
+        element.removeEventListener('touchend', onEnd);
+        element.removeEventListener('touchcancel', onCancel);
+        recognizer.cancel();
+    };
+}
+
 const ZOOM_STEP = 0.1;
 const ZOOM_MIN = 0.2;
 const ZOOM_MAX = 3;
@@ -54810,6 +55014,9 @@ class PowerPointViewerComponent {
                 this.activeSession.set(null);
             }
         });
+        // Attach multi-touch gestures (pinch-zoom / swipe-nav / long-press menu)
+        // to the canvas host once it is rendered. See setupTouchGestures().
+        this.setupTouchGestures();
     }
     /**
      * Serialise the current presentation to `.pptx` bytes (imperative handle).
@@ -54946,54 +55153,60 @@ class PowerPointViewerComponent {
         this.collab.disconnect();
         this.activeSession.set(null);
     }
-    /** Horizontal-swipe tracking start coordinates (touch begins on the canvas). */
-    swipeStartX = null;
-    swipeStartY = null;
     /**
-     * Begin tracking a horizontal swipe for slide navigation.
+     * Wire the framework-agnostic touch-gesture recogniser to the `<main>` canvas
+     * host once it is in the DOM. Mirrors React's `useTouchGestures` wiring:
+     *   - pinch-to-zoom always updates the zoom signal (clamped to the viewer
+     *     range), with `preventDefault()` on the pinch path to suppress the
+     *     browser's native pinch-zoom;
+     *   - horizontal swipe navigates slides, but only when editing is off
+     *     (`!canEdit()`): in edit mode single-finger gestures belong to element
+     *     manipulation (move/resize/rotate), so we never hijack them. The large
+     *     ‹ › buttons remain available for explicit navigation in all modes;
+     *   - long-press in edit mode opens the editor context menu at the press
+     *     point for the current selection (mirrors React's onLongPress path).
      *
-     * To disambiguate a navigation swipe from an element drag, swipe-nav is only
-     * armed when editing is off (`!canEdit()`). When `canEdit()` is true,
-     * pointer/touch gestures belong to element manipulation (move/resize/rotate),
-     * so we never hijack them. The large ‹ › buttons remain available in all
-     * modes for explicit navigation.
+     * The recogniser's swipe/long-press callbacks check the live `canEdit()` /
+     * selection state, so a single attach handles every mode without re-binding.
      */
-    onMainTouchStart(event) {
-        if (this.canEdit() || event.changedTouches.length !== 1) {
-            this.swipeStartX = null;
-            this.swipeStartY = null;
-            return;
-        }
-        const touch = event.changedTouches[0];
-        this.swipeStartX = touch.clientX;
-        this.swipeStartY = touch.clientY;
-    }
-    /**
-     * Complete a swipe: a predominantly horizontal drag of at least the threshold
-     * navigates to the previous (swipe right) or next (swipe left) slide.
-     */
-    onMainTouchEnd(event) {
-        const startX = this.swipeStartX;
-        const startY = this.swipeStartY;
-        this.swipeStartX = null;
-        this.swipeStartY = null;
-        if (startX === null || startY === null || event.changedTouches.length !== 1) {
-            return;
-        }
-        const touch = event.changedTouches[0];
-        const dx = touch.clientX - startX;
-        const dy = touch.clientY - startY;
-        const SWIPE_THRESHOLD = 50;
-        // Ignore vertical-dominant gestures (scrolling) and short drags.
-        if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) <= Math.abs(dy)) {
-            return;
-        }
-        if (dx < 0) {
-            this.goNext();
-        }
-        else {
-            this.goPrev();
-        }
+    setupTouchGestures() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const el = this.mainEl()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const teardown = attachTouchGestures(el, {
+                getScale: () => this.zoom(),
+                callbacks: {
+                    onPinchZoom: (newScale) => this.zoom.set(newScale),
+                    onSwipe: (direction) => {
+                        // Edit mode: leave single-finger gestures to element manipulation.
+                        if (this.canEdit()) {
+                            return;
+                        }
+                        // direction 1 = swipe right (previous), -1 = swipe left (next).
+                        if (direction === 1) {
+                            this.goPrev();
+                        }
+                        else {
+                            this.goNext();
+                        }
+                    },
+                    onLongPress: (x, y) => {
+                        if (!this.canEdit() || this.presenting()) {
+                            return;
+                        }
+                        const selected = this.selectedElement();
+                        if (!selected) {
+                            return;
+                        }
+                        this.contextMenuPos.set({ x, y });
+                    },
+                },
+            });
+            destroyRef.onDestroy(teardown);
+        });
     }
     zoomIn() {
         this.zoom.set(Math.min(ZOOM_MAX, Number((this.zoom() + ZOOM_STEP).toFixed(2))));
@@ -55791,12 +56004,7 @@ class PowerPointViewerComponent {
 						</nav>
 					}
 
-					<main
-						class="pptx-ng-main"
-						#mainEl
-						(touchstart)="onMainTouchStart($event)"
-						(touchend)="onMainTouchEnd($event)"
-					>
+					<main class="pptx-ng-main" #mainEl>
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"
@@ -56361,12 +56569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 						</nav>
 					}
 
-					<main
-						class="pptx-ng-main"
-						#mainEl
-						(touchstart)="onMainTouchStart($event)"
-						(touchend)="onMainTouchEnd($event)"
-					>
+					<main class="pptx-ng-main" #mainEl>
 						<pptx-slide-canvas
 							[slide]="activeSlide()"
 							[canvasSize]="loader.canvasSize()"