pptx-angular-viewer 1.1.64 → 1.1.66

package/fesm2022/pptx-angular-viewer.mjs

@@ -49662,8 +49662,14 @@ class InspectorPanelComponent {
      * identically.
      */
     onSmartArtDataChange(smartArtData) {
-        this.editor.updateElement(this.slideIndex(), this.el().id, {
-            smartArtData,
+        // Reflow `drawingShapes` back from the layout engine when the edit cleared
+        // them (every structural/text/style op does) -- otherwise the renderer
+        // falls back to the generic SVG layout for every node, not just the one
+        // just edited.
+        const el = this.el();
+        const reflowed = rebuildDrawingShapesIfCleared(smartArtData, smartArtData.layout, resolvePalette(smartArtData), smartArtData.style ?? 'flat', el.id, { width: el.width, height: el.height });
+        this.editor.updateElement(this.slideIndex(), el.id, {
+            smartArtData: reflowed,
         });
     }
     /** Toggle element lock (noMove + noResize + noSelect). */
@@ -54948,6 +54954,15 @@ class SmartArtRendererComponent {
     /** Container div ref used to project hover rects into local coordinates. */
     smartartContainer = viewChild('smartartContainer', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "smartartContainer" }] : /* istanbul ignore next */ []));
+    /**
+     * The mounted style-bar popover, if any. Mousemove events landing inside it
+     * must not clear hover state, or the popover would unmount as soon as the
+     * pointer reaches the swatches it needs to be clicked.
+     */
+    styleBar = viewChild('styleBar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleBar" }] : /* istanbul ignore next */ []));
+    /** Pending "leave" timeout: grace period for the pointer to reach the style bar. */
+    hideTimeout = null;
     /**
      * Guards against a cancel-triggered DOM-removal blur committing the edit.
      * Set to true before programmatic cancellation; reset to false on each new edit.
@@ -54957,6 +54972,7 @@ class SmartArtRendererComponent {
     canEditNodes = computed(() => this.editable() && this.editor !== null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canEditNodes" }] : /* istanbul ignore next */ []));
     constructor() {
+        inject(DestroyRef).onDestroy(() => this.cancelPendingHide());
         // Focus + select-all the editor as soon as it mounts (mirrors the table
         // renderer's cell-input effect).
         effect(() => {
@@ -55154,7 +55170,7 @@ class SmartArtRendererComponent {
             return;
         }
         editor.updateElement(slideIndex, this.element().id, {
-            smartArtData: next,
+            smartArtData: this.reflow(next),
         });
         // Announce the commit to assistive technology via the polite live region.
         this.liveMessage.set(text.trim().length > 0
@@ -55162,15 +55178,24 @@ class SmartArtRendererComponent {
             : this.translate.instant('pptx.smartart.nodeCleared'));
     }
     // ── Style bar & hover tracking ────────────────────────────────────────
+    /** Approximate rendered size of the style bar (6 swatches + padding/border). */
+    static STYLE_BAR_WIDTH = 168;
+    static STYLE_BAR_HEIGHT = 40;
+    /** Grace period (ms) before clearing hover state once the pointer leaves the
+     * node, so it can cross the small visual gap to the style bar. */
+    static HIDE_GRACE_MS = 150;
     styleBarStyle = computed(() => {
         const rect = this.hoveredNodeRect();
-        if (!rect) {
+        const cnt = this.smartartContainer()?.nativeElement;
+        if (!rect || !cnt) {
             return null;
         }
+        const maxLeft = Math.max(0, cnt.clientWidth - SmartArtRendererComponent.STYLE_BAR_WIDTH);
+        const maxTop = Math.max(0, cnt.clientHeight - SmartArtRendererComponent.STYLE_BAR_HEIGHT);
         return {
             position: 'absolute',
-            left: `${Math.max(0, rect.left + rect.width - 120)}px`,
-            top: `${Math.max(0, rect.top - 22)}px`,
+            left: `${Math.min(maxLeft, Math.max(0, rect.left + rect.width - SmartArtRendererComponent.STYLE_BAR_WIDTH))}px`,
+            top: `${Math.min(maxTop, Math.max(0, rect.top - 22))}px`,
             'z-index': '25',
         };
     }, /* @ts-ignore */
@@ -55181,16 +55206,41 @@ class SmartArtRendererComponent {
         }
         const nodeEl = this.findNodeEl(event.target);
         const cnt = this.smartartContainer()?.nativeElement;
-        const id = nodeEl?.getAttribute('data-smartart-node-id') ?? null;
-        this.hoveredNodeId.set(id);
-        this.hoveredNodeRect.set(id && nodeEl && cnt
-            ? computeInlineEditorRect(nodeEl.getBoundingClientRect(), cnt.getBoundingClientRect())
-            : null);
+        if (nodeEl && cnt) {
+            this.cancelPendingHide();
+            const id = nodeEl.getAttribute('data-smartart-node-id');
+            this.hoveredNodeId.set(id);
+            this.hoveredNodeRect.set(id
+                ? computeInlineEditorRect(nodeEl.getBoundingClientRect(), cnt.getBoundingClientRect())
+                : null);
+            return;
+        }
+        // Pointer may be over the style-bar popover anchored to the currently
+        // hovered node (not the node itself) - keep the hover state so the
+        // popover doesn't unmount out from under the pointer.
+        const styleBarEl = this.styleBar()?.nativeElement;
+        if (styleBarEl && event.target instanceof Node && styleBarEl.contains(event.target)) {
+            this.cancelPendingHide();
+            return;
+        }
+        this.cancelPendingHide();
+        this.hideTimeout = setTimeout(() => {
+            this.hoveredNodeId.set(null);
+            this.hoveredNodeRect.set(null);
+            this.hideTimeout = null;
+        }, SmartArtRendererComponent.HIDE_GRACE_MS);
     }
     onMouseLeave() {
+        this.cancelPendingHide();
         this.hoveredNodeId.set(null);
         this.hoveredNodeRect.set(null);
     }
+    cancelPendingHide() {
+        if (this.hideTimeout !== null) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
     findNodeEl(target) {
         let el = target instanceof Element ? target : null;
         while (el) {
@@ -55215,14 +55265,23 @@ class SmartArtRendererComponent {
             return;
         }
         this.editor.updateElement(slideIndex, this.element().id, {
-            smartArtData: next,
+            smartArtData: this.reflow(next),
         });
     }
+    /**
+     * Reflow `drawingShapes` back from the shared layout engine when an edit op
+     * cleared them (every text/style edit does) -- otherwise the renderer falls
+     * back to the generic SVG layout for every node, not just the edited one.
+     */
+    reflow(data) {
+        const el = this.element();
+        return rebuildDrawingShapesIfCleared(data, data.layout, resolvePalette(data), data.style ?? 'flat', el.id, { width: el.width, height: el.height });
+    }
     // ── Empty / no-data state ──────────────────────────────────────────────
     isEmpty = computed(() => this.nodes().length === 0 && !this.hasDrawingShapes(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SmartArtRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SmartArtRendererComponent, isStandalone: true, selector: "pptx-smart-art-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nodeEditor", first: true, predicate: ["nodeEditor"], descendants: true, isSignal: true }, { propertyName: "smartartContainer", first: true, predicate: ["smartartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SmartArtRendererComponent, isStandalone: true, selector: "pptx-smart-art-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "nodeEditor", first: true, predicate: ["nodeEditor"], descendants: true, isSignal: true }, { propertyName: "smartartContainer", first: true, predicate: ["smartartContainer"], descendants: true, isSignal: true }, { propertyName: "styleBar", first: true, predicate: ["styleBar"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div
 			class="pptx-ng-element pptx-ng-smartart"
 			[ngStyle]="containerStyle()"
@@ -55406,6 +55465,7 @@ class SmartArtRendererComponent {
 
 				@if (canEditNodes() && hoveredNodeId() && !editState() && styleBarStyle()) {
 					<div
+						#styleBar
 						class="pptx-ng-smartart-style-bar"
 						[ngStyle]="styleBarStyle()!"
 						(mousedown)="$event.stopPropagation()"
@@ -55451,7 +55511,7 @@ class SmartArtRendererComponent {
 				<span class="pptx-ng-sr-only" aria-live="polite" role="status">{{ liveMessage() }}</span>
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pptx-ng-smartart-style-bar{position:absolute;pointer-events:auto}.pptx-ng-smartart-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-swatch:hover{transform:scale(1.25)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pptx-ng-smartart-style-bar{position:absolute;pointer-events:auto;display:flex;gap:6px;padding:6px 8px;background:#ffffffe6;border:1px solid var(--border, #e2e8f0);border-radius:9999px;box-shadow:0 1px 2px #0000001a}.pptx-ng-smartart-swatch{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-swatch:hover{transform:scale(1.25)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SmartArtRendererComponent, decorators: [{
             type: Component,
@@ -55639,6 +55699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 				@if (canEditNodes() && hoveredNodeId() && !editState() && styleBarStyle()) {
 					<div
+						#styleBar
 						class="pptx-ng-smartart-style-bar"
 						[ngStyle]="styleBarStyle()!"
 						(mousedown)="$event.stopPropagation()"
@@ -55684,8 +55745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 				<span class="pptx-ng-sr-only" aria-live="polite" role="status">{{ liveMessage() }}</span>
 			</div>
 		</div>
-	`, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pptx-ng-smartart-style-bar{position:absolute;pointer-events:auto}.pptx-ng-smartart-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-swatch:hover{transform:scale(1.25)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], nodeEditor: [{ type: i0.ViewChild, args: ['nodeEditor', { isSignal: true }] }], smartartContainer: [{ type: i0.ViewChild, args: ['smartartContainer', { isSignal: true }] }] } });
+	`, styles: [".pptx-ng-smartart-chrome{box-sizing:border-box;overflow:hidden;position:relative}.pptx-ng-smartart-svg{width:100%;height:100%;pointer-events:none}.pptx-ng-smartart-node--editable{pointer-events:auto;cursor:text}.pptx-ng-smartart-node--editable:hover{filter:drop-shadow(0 0 2px rgba(96,165,250,.8))}.pptx-ng-smartart-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:2}.pptx-ng-smartart-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fffc;pointer-events:none}.pptx-ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pptx-ng-smartart-style-bar{position:absolute;pointer-events:auto;display:flex;gap:6px;padding:6px 8px;background:#ffffffe6;border:1px solid var(--border, #e2e8f0);border-radius:9999px;box-shadow:0 1px 2px #0000001a}.pptx-ng-smartart-swatch{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-swatch:hover{transform:scale(1.25)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], nodeEditor: [{ type: i0.ViewChild, args: ['nodeEditor', { isSignal: true }] }], smartartContainer: [{ type: i0.ViewChild, args: ['smartartContainer', { isSignal: true }] }], styleBar: [{ type: i0.ViewChild, args: ['styleBar', { isSignal: true }] }] } });
 
 const PALETTES = {
     colorful1: ['#3b82f6', '#22c55e', '#f97316', '#eab308', '#a855f7', '#ec4899'],