pptx-angular-viewer 1.1.46 → 1.1.48

package/fesm2022/pptx-angular-viewer.mjs

@@ -49733,6 +49733,11 @@ class SmartArtRendererComponent {
     /** The mounted `<textarea>` for the active node edit, if any. */
     nodeEditor = viewChild('nodeEditor', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nodeEditor" }] : /* istanbul ignore next */ []));
+    /**
+     * Guards against a cancel-triggered DOM-removal blur committing the edit.
+     * Set to true before programmatic cancellation; reset to false on each new edit.
+     */
+    editSettled = false;
     /** Whether node double-click / Enter enters inline edit (editable + has editor). */
     canEditNodes = computed(() => this.editable() && this.editor !== null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canEditNodes" }] : /* istanbul ignore next */ []));
@@ -49837,6 +49842,24 @@ class SmartArtRendererComponent {
     asRect(node) {
         return node.kind === 'rect' ? node : undefined;
     }
+    /**
+     * Split node text on `\n` and compute per-line y offsets (in SVG px) that
+     * centre the block around the node centre y (offset 0). Single-line text
+     * produces one entry with offsetY=0, preserving the existing
+     * `dominant-baseline="central"` behaviour exactly.
+     */
+    textLines(text, fontSize) {
+        const raw = (text ?? '').split('\n').filter((l) => l.length > 0);
+        if (raw.length === 0) {
+            return [{ text: '', offsetY: 0 }];
+        }
+        const lh = fontSize * 1.2;
+        const totalH = raw.length * lh;
+        return raw.map((line, i) => ({
+            text: line,
+            offsetY: -totalH / 2 + lh / 2 + i * lh,
+        }));
+    }
     // ── Inline node-text editing ───────────────────────────────────────────
     /** Double-click a node enters inline edit mode (when editable). */
     onNodeDblClick(event, node) {
@@ -49857,6 +49880,10 @@ class SmartArtRendererComponent {
     }
     /** Commit the current edit (called on blur). */
     commitEdit(event) {
+        if (this.editSettled) {
+            this.editSettled = false;
+            return;
+        }
         const edit = this.editState();
         if (!edit) {
             return;
@@ -49875,11 +49902,14 @@ class SmartArtRendererComponent {
         }
         else if (event.key === 'Escape') {
             event.preventDefault();
+            // Mark as settled so the DOM-removal blur does not commit the cancelled edit.
+            this.editSettled = true;
             this.editState.set(null);
         }
     }
     /** Resolve the node id + geometry and open the editor seeded with full text. */
     enterEdit(node) {
+        this.editSettled = false;
         const elementId = this.element().id;
         const seed = beginNodeEdit(node, elementId, this.rawNodeText(node));
         if (seed) {
@@ -49969,13 +49999,16 @@ class SmartArtRendererComponent {
 								@if (shape.text) {
 									<text
 										[attr.x]="shape.textX"
-										[attr.y]="shape.textY"
 										text-anchor="middle"
 										dominant-baseline="central"
 										[attr.fill]="shape.fontColor"
 										[attr.font-size]="shape.fontSize"
 									>
-										{{ shape.text }}
+										@for (line of textLines(shape.text, shape.fontSize); track $index) {
+											<tspan [attr.x]="shape.textX" [attr.y]="shape.textY + line.offsetY">
+												{{ line.text }}
+											</tspan>
+										}
 									</text>
 								}
 							</g>
@@ -50022,13 +50055,14 @@ class SmartArtRendererComponent {
 									/>
 									<text
 										[attr.x]="c.cx"
-										[attr.y]="c.cy"
 										text-anchor="middle"
 										dominant-baseline="central"
 										fill="white"
 										[attr.font-size]="c.fontSize"
 									>
-										{{ c.text }}
+										@for (line of textLines(c.text, c.fontSize); track $index) {
+											<tspan [attr.x]="c.cx" [attr.y]="c.cy + line.offsetY">{{ line.text }}</tspan>
+										}
 									</text>
 								} @else if (asPolygon(node); as p) {
 									<polygon
@@ -50040,13 +50074,16 @@ class SmartArtRendererComponent {
 									/>
 									<text
 										[attr.x]="p.textX"
-										[attr.y]="p.textY"
 										text-anchor="middle"
 										dominant-baseline="central"
 										fill="white"
 										[attr.font-size]="p.fontSize"
 									>
-										{{ p.text }}
+										@for (line of textLines(p.text, p.fontSize); track $index) {
+											<tspan [attr.x]="p.textX" [attr.y]="p.textY + line.offsetY">
+												{{ line.text }}
+											</tspan>
+										}
 									</text>
 								} @else if (asRect(node); as r) {
 									<rect
@@ -50062,13 +50099,16 @@ class SmartArtRendererComponent {
 									/>
 									<text
 										[attr.x]="r.textX"
-										[attr.y]="r.textY"
 										text-anchor="middle"
 										dominant-baseline="central"
 										fill="white"
 										[attr.font-size]="r.fontSize"
 									>
-										{{ r.text }}
+										@for (line of textLines(r.text, r.fontSize); track $index) {
+											<tspan [attr.x]="r.textX" [attr.y]="r.textY + line.offsetY">
+												{{ line.text }}
+											</tspan>
+										}
 									</text>
 								}
 							</g>
@@ -50106,7 +50146,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-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}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], 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}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SmartArtRendererComponent, decorators: [{
             type: Component,
@@ -50159,13 +50199,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 								@if (shape.text) {
 									<text
 										[attr.x]="shape.textX"
-										[attr.y]="shape.textY"
 										text-anchor="middle"
 										dominant-baseline="central"
 										[attr.fill]="shape.fontColor"
 										[attr.font-size]="shape.fontSize"
 									>
-										{{ shape.text }}
+										@for (line of textLines(shape.text, shape.fontSize); track $index) {
+											<tspan [attr.x]="shape.textX" [attr.y]="shape.textY + line.offsetY">
+												{{ line.text }}
+											</tspan>
+										}
 									</text>
 								}
 							</g>
@@ -50212,13 +50255,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 									/>
 									<text
 										[attr.x]="c.cx"
-										[attr.y]="c.cy"
 										text-anchor="middle"
 										dominant-baseline="central"
 										fill="white"
 										[attr.font-size]="c.fontSize"
 									>
-										{{ c.text }}
+										@for (line of textLines(c.text, c.fontSize); track $index) {
+											<tspan [attr.x]="c.cx" [attr.y]="c.cy + line.offsetY">{{ line.text }}</tspan>
+										}
 									</text>
 								} @else if (asPolygon(node); as p) {
 									<polygon
@@ -50230,13 +50274,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 									/>
 									<text
 										[attr.x]="p.textX"
-										[attr.y]="p.textY"
 										text-anchor="middle"
 										dominant-baseline="central"
 										fill="white"
 										[attr.font-size]="p.fontSize"
 									>
-										{{ p.text }}
+										@for (line of textLines(p.text, p.fontSize); track $index) {
+											<tspan [attr.x]="p.textX" [attr.y]="p.textY + line.offsetY">
+												{{ line.text }}
+											</tspan>
+										}
 									</text>
 								} @else if (asRect(node); as r) {
 									<rect
@@ -50252,13 +50299,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 									/>
 									<text
 										[attr.x]="r.textX"
-										[attr.y]="r.textY"
 										text-anchor="middle"
 										dominant-baseline="central"
 										fill="white"
 										[attr.font-size]="r.fontSize"
 									>
-										{{ r.text }}
+										@for (line of textLines(r.text, r.fontSize); track $index) {
+											<tspan [attr.x]="r.textX" [attr.y]="r.textY + line.offsetY">
+												{{ line.text }}
+											</tspan>
+										}
 									</text>
 								}
 							</g>
@@ -50296,7 +50346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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-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}\n"] }]
+	`, 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}\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 }] }] } });
 
 const PALETTES = {