ts-visio 1.16.3 → 1.16.17

package/dist/Connector.d.ts

@@ -7,10 +7,10 @@ import { ShapeModifier } from './ShapeModifier';
 export interface ConnectorData {
     /** Visio shape ID of the connector (1D shape). */
     id: string;
-    /** ID of the shape at the connector's begin-point (BeginX). */
-    fromShapeId: string;
-    /** ID of the shape at the connector's end-point (EndX). */
-    toShapeId: string;
+    /** ID of the shape at the connector's begin-point (BeginX). `undefined` if the begin endpoint is not connected to any shape. */
+    fromShapeId: string | undefined;
+    /** ID of the shape at the connector's end-point (EndX). `undefined` if the end endpoint is not connected to any shape. */
+    toShapeId: string | undefined;
     /** Connection point used on the from-shape. */
     fromPort: ConnectionTarget;
     /** Connection point used on the to-shape. */
@@ -31,10 +31,10 @@ export declare class Connector {
     private readonly modifier;
     /** Visio shape ID of this connector. */
     readonly id: string;
-    /** ID of the shape this connector starts from. */
-    readonly fromShapeId: string;
-    /** ID of the shape this connector ends at. */
-    readonly toShapeId: string;
+    /** ID of the shape this connector starts from. `undefined` if the begin endpoint is not connected. */
+    readonly fromShapeId: string | undefined;
+    /** ID of the shape this connector ends at. `undefined` if the end endpoint is not connected. */
+    readonly toShapeId: string | undefined;
     /** Connection point used on the from-shape ('center', `{ name }`, or `{ index }`). */
     readonly fromPort: ConnectionTarget;
     /** Connection point used on the to-shape ('center', `{ name }`, or `{ index }`). */

package/dist/ShapeModifier.d.ts

@@ -99,6 +99,8 @@ export declare class ShapeModifier {
     addShape(pageId: string, props: NewShapeProps, parentId?: string): Promise<string>;
     deleteShape(pageId: string, shapeId: string): Promise<void>;
     private removeShapeFromTree;
+    private findShapeInTree;
+    private collectShapeIds;
     updateShapeText(pageId: string, shapeId: string, newText: string): Promise<void>;
     updateShapeStyle(pageId: string, shapeId: string, style: ShapeStyle): Promise<void>;
     /**

package/dist/ShapeModifier.js

@@ -153,7 +153,10 @@ class ShapeModifier {
         if (!Array.isArray(connSection.Row))
             connSection.Row = [connSection.Row];
         const ix = connSection.Row.length;
-        connSection.Row.push(ConnectionPointBuilder_1.ConnectionPointBuilder.buildRow(point, ix));
+        const shapeCells = Array.isArray(shape.Cell) ? shape.Cell : shape.Cell ? [shape.Cell] : [];
+        const shapeWidth = parseFloat(shapeCells.find((c) => c['@_N'] === 'Width')?.['@_V'] ?? '1');
+        const shapeHeight = parseFloat(shapeCells.find((c) => c['@_N'] === 'Height')?.['@_V'] ?? '1');
+        connSection.Row.push(ConnectionPointBuilder_1.ConnectionPointBuilder.buildRow(point, ix, shapeWidth, shapeHeight));
         this.cache.saveParsed(pageId, parsed);
         return ix;
     }
@@ -225,20 +228,24 @@ class ShapeModifier {
     }
     async deleteShape(pageId, shapeId) {
         const parsed = this.cache.getParsed(pageId);
-        const removed = this.removeShapeFromTree(parsed.PageContents.Shapes, shapeId);
-        if (!removed)
+        // Collect the deleted shape's ID and all descendant IDs before removal
+        // so Connect/Relationship entries for child shapes are also cleaned up.
+        const shapeNode = this.findShapeInTree(parsed.PageContents.Shapes, shapeId);
+        if (!shapeNode)
             throw new Error(`Shape ${shapeId} not found on page ${pageId}`);
+        const removedIds = this.collectShapeIds(shapeNode);
+        this.removeShapeFromTree(parsed.PageContents.Shapes, shapeId);
         if (parsed.PageContents.Connects?.Connect) {
             let connects = parsed.PageContents.Connects.Connect;
             if (!Array.isArray(connects))
                 connects = [connects];
-            parsed.PageContents.Connects.Connect = connects.filter((c) => c['@_FromSheet'] !== shapeId && c['@_ToSheet'] !== shapeId);
+            parsed.PageContents.Connects.Connect = connects.filter((c) => !removedIds.has(c['@_FromSheet']) && !removedIds.has(c['@_ToSheet']));
         }
         if (parsed.PageContents.Relationships?.Relationship) {
             let rels = parsed.PageContents.Relationships.Relationship;
             if (!Array.isArray(rels))
                 rels = [rels];
-            parsed.PageContents.Relationships.Relationship = rels.filter((r) => r['@_ShapeID'] !== shapeId && r['@_RelatedShapeID'] !== shapeId);
+            parsed.PageContents.Relationships.Relationship = rels.filter((r) => !removedIds.has(r['@_ShapeID']) && !removedIds.has(r['@_RelatedShapeID']));
         }
         // Invalidate the shape cache so the map is rebuilt on next access.
         this.cache.shapeCache.delete(parsed);
@@ -263,6 +270,34 @@ class ShapeModifier {
         }
         return false;
     }
+    findShapeInTree(shapesContainer, shapeId) {
+        if (!shapesContainer?.Shape)
+            return null;
+        const shapes = Array.isArray(shapesContainer.Shape) ? shapesContainer.Shape : [shapesContainer.Shape];
+        for (const s of shapes) {
+            if (s['@_ID'] === shapeId)
+                return s;
+            if (s.Shapes) {
+                const found = this.findShapeInTree(s.Shapes, shapeId);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    collectShapeIds(shape) {
+        const ids = new Set();
+        const gather = (s) => {
+            ids.add(s['@_ID']);
+            if (s.Shapes?.Shape) {
+                const children = Array.isArray(s.Shapes.Shape) ? s.Shapes.Shape : [s.Shapes.Shape];
+                for (const child of children)
+                    gather(child);
+            }
+        };
+        gather(shape);
+        return ids;
+    }
     async updateShapeText(pageId, shapeId, newText) {
         const parsed = this.cache.getParsed(pageId);
         const shape = this.cache.getShapeMap(parsed).get(shapeId);
@@ -282,20 +317,73 @@ class ShapeModifier {
         else if (!Array.isArray(shape.Section)) {
             shape.Section = [shape.Section];
         }
+        // Upsert a single cell by name inside a flat Cell[].
+        const upsertCell = (cells, name, val, extra) => {
+            const existing = cells.find((c) => c['@_N'] === name);
+            if (existing) {
+                existing['@_V'] = val;
+                if (extra)
+                    Object.assign(existing, extra);
+            }
+            else {
+                cells.push({ '@_N': name, '@_V': val, ...extra });
+            }
+        };
+        // Normalise and return the Cell[] of a flat-cell section.
+        const ensureCells = (section) => {
+            if (!section.Cell)
+                section.Cell = [];
+            else if (!Array.isArray(section.Cell))
+                section.Cell = [section.Cell];
+            return section.Cell;
+        };
+        // Return (creating if absent) the Cell[] of Row[0] in a row-based section.
+        const getOrCreateRow0Cells = (section, rowType) => {
+            if (!section.Row)
+                section.Row = [];
+            else if (!Array.isArray(section.Row))
+                section.Row = [section.Row];
+            let row0 = section.Row.find((r) => r['@_IX'] === '0' || r['@_IX'] === 0);
+            if (!row0) {
+                row0 = { '@_T': rowType, '@_IX': '0', Cell: [] };
+                section.Row.push(row0);
+            }
+            if (!row0.Cell)
+                row0.Cell = [];
+            else if (!Array.isArray(row0.Cell))
+                row0.Cell = [row0.Cell];
+            return row0.Cell;
+        };
         if (style.fillColor) {
-            shape.Section = shape.Section.filter((s) => s['@_N'] !== VisioConstants_1.SECTION_NAMES.Fill);
-            shape.Section.push((0, StyleHelpers_1.createFillSection)(style.fillColor));
+            const existing = shape.Section.find((s) => s['@_N'] === VisioConstants_1.SECTION_NAMES.Fill);
+            if (existing) {
+                upsertCell(ensureCells(existing), 'FillForegnd', style.fillColor, { '@_F': (0, StyleHelpers_1.hexToRgb)(style.fillColor) });
+            }
+            else {
+                shape.Section.push((0, StyleHelpers_1.createFillSection)(style.fillColor));
+            }
         }
         const hasLineProps = style.lineColor !== undefined
             || style.lineWeight !== undefined
             || style.linePattern !== undefined;
         if (hasLineProps) {
-            shape.Section = shape.Section.filter((s) => s['@_N'] !== VisioConstants_1.SECTION_NAMES.Line);
-            shape.Section.push((0, StyleHelpers_1.createLineSection)({
-                color: style.lineColor,
-                weight: style.lineWeight !== undefined ? (style.lineWeight / 72).toString() : undefined,
-                pattern: style.linePattern !== undefined ? style.linePattern.toString() : undefined,
-            }));
+            const existing = shape.Section.find((s) => s['@_N'] === VisioConstants_1.SECTION_NAMES.Line);
+            if (existing) {
+                const cells = ensureCells(existing);
+                if (style.lineColor !== undefined)
+                    upsertCell(cells, 'LineColor', style.lineColor, { '@_F': (0, StyleHelpers_1.hexToRgb)(style.lineColor) });
+                if (style.lineWeight !== undefined)
+                    upsertCell(cells, 'LineWeight', (style.lineWeight / 72).toString(), { '@_U': 'IN' });
+                if (style.linePattern !== undefined)
+                    upsertCell(cells, 'LinePattern', style.linePattern.toString());
+            }
+            else {
+                shape.Section.push((0, StyleHelpers_1.createLineSection)({
+                    color: style.lineColor,
+                    weight: style.lineWeight !== undefined ? (style.lineWeight / 72).toString() : undefined,
+                    pattern: style.linePattern !== undefined ? style.linePattern.toString() : undefined,
+                }));
+            }
         }
         const hasCharProps = style.fontColor !== undefined
             || style.bold !== undefined
@@ -305,42 +393,110 @@ class ShapeModifier {
             || style.fontSize !== undefined
             || style.fontFamily !== undefined;
         if (hasCharProps) {
-            shape.Section = shape.Section.filter((s) => s['@_N'] !== VisioConstants_1.SECTION_NAMES.Character);
-            shape.Section.push((0, StyleHelpers_1.createCharacterSection)({
-                bold: style.bold,
-                italic: style.italic,
-                underline: style.underline,
-                strikethrough: style.strikethrough,
-                color: style.fontColor,
-                fontSize: style.fontSize,
-                fontFamily: style.fontFamily,
-            }));
+            const existing = shape.Section.find((s) => s['@_N'] === VisioConstants_1.SECTION_NAMES.Character);
+            if (existing) {
+                const cells = getOrCreateRow0Cells(existing, 'Character');
+                const hasStyleBits = style.bold !== undefined || style.italic !== undefined
+                    || style.underline !== undefined || style.strikethrough !== undefined;
+                if (hasStyleBits) {
+                    const styleCell = cells.find((c) => c['@_N'] === 'Style');
+                    let styleVal = styleCell ? (parseInt(styleCell['@_V'] || '0') || 0) : 0;
+                    if (style.bold !== undefined) {
+                        if (style.bold)
+                            styleVal |= 1;
+                        else
+                            styleVal &= ~1;
+                    }
+                    if (style.italic !== undefined) {
+                        if (style.italic)
+                            styleVal |= 2;
+                        else
+                            styleVal &= ~2;
+                    }
+                    if (style.underline !== undefined) {
+                        if (style.underline)
+                            styleVal |= 4;
+                        else
+                            styleVal &= ~4;
+                    }
+                    if (style.strikethrough !== undefined) {
+                        if (style.strikethrough)
+                            styleVal |= 8;
+                        else
+                            styleVal &= ~8;
+                    }
+                    upsertCell(cells, 'Style', styleVal.toString());
+                }
+                if (style.fontColor !== undefined)
+                    upsertCell(cells, 'Color', style.fontColor, { '@_F': (0, StyleHelpers_1.hexToRgb)(style.fontColor) });
+                if (style.fontSize !== undefined)
+                    upsertCell(cells, 'Size', (style.fontSize / 72).toString(), { '@_U': 'PT' });
+                if (style.fontFamily !== undefined)
+                    upsertCell(cells, 'Font', '0', { '@_F': `FONT("${style.fontFamily}")` });
+            }
+            else {
+                shape.Section.push((0, StyleHelpers_1.createCharacterSection)({
+                    bold: style.bold,
+                    italic: style.italic,
+                    underline: style.underline,
+                    strikethrough: style.strikethrough,
+                    color: style.fontColor,
+                    fontSize: style.fontSize,
+                    fontFamily: style.fontFamily,
+                }));
+            }
         }
         const hasParagraphProps = style.horzAlign !== undefined
             || style.spaceBefore !== undefined
             || style.spaceAfter !== undefined
             || style.lineSpacing !== undefined;
         if (hasParagraphProps) {
-            shape.Section = shape.Section.filter((s) => s['@_N'] !== VisioConstants_1.SECTION_NAMES.Paragraph);
-            shape.Section.push((0, StyleHelpers_1.createParagraphSection)({
-                horzAlign: style.horzAlign,
-                spaceBefore: style.spaceBefore,
-                spaceAfter: style.spaceAfter,
-                lineSpacing: style.lineSpacing,
-            }));
+            const existing = shape.Section.find((s) => s['@_N'] === VisioConstants_1.SECTION_NAMES.Paragraph);
+            if (existing) {
+                const cells = getOrCreateRow0Cells(existing, 'Paragraph');
+                if (style.horzAlign !== undefined)
+                    upsertCell(cells, 'HorzAlign', (0, StyleHelpers_1.horzAlignValue)(style.horzAlign));
+                if (style.spaceBefore !== undefined)
+                    upsertCell(cells, 'SpBefore', (style.spaceBefore / 72).toString(), { '@_U': 'PT' });
+                if (style.spaceAfter !== undefined)
+                    upsertCell(cells, 'SpAfter', (style.spaceAfter / 72).toString(), { '@_U': 'PT' });
+                if (style.lineSpacing !== undefined)
+                    upsertCell(cells, 'SpLine', (-style.lineSpacing).toString());
+            }
+            else {
+                shape.Section.push((0, StyleHelpers_1.createParagraphSection)({
+                    horzAlign: style.horzAlign,
+                    spaceBefore: style.spaceBefore,
+                    spaceAfter: style.spaceAfter,
+                    lineSpacing: style.lineSpacing,
+                }));
+            }
         }
         const hasTextBlockProps = style.textMarginTop !== undefined
             || style.textMarginBottom !== undefined
             || style.textMarginLeft !== undefined
             || style.textMarginRight !== undefined;
         if (hasTextBlockProps) {
-            shape.Section = shape.Section.filter((s) => s['@_N'] !== VisioConstants_1.SECTION_NAMES.TextBlock);
-            shape.Section.push((0, StyleHelpers_1.createTextBlockSection)({
-                topMargin: style.textMarginTop,
-                bottomMargin: style.textMarginBottom,
-                leftMargin: style.textMarginLeft,
-                rightMargin: style.textMarginRight,
-            }));
+            const existing = shape.Section.find((s) => s['@_N'] === VisioConstants_1.SECTION_NAMES.TextBlock);
+            if (existing) {
+                const cells = ensureCells(existing);
+                if (style.textMarginTop !== undefined)
+                    upsertCell(cells, 'TopMargin', style.textMarginTop.toString(), { '@_U': 'IN' });
+                if (style.textMarginBottom !== undefined)
+                    upsertCell(cells, 'BottomMargin', style.textMarginBottom.toString(), { '@_U': 'IN' });
+                if (style.textMarginLeft !== undefined)
+                    upsertCell(cells, 'LeftMargin', style.textMarginLeft.toString(), { '@_U': 'IN' });
+                if (style.textMarginRight !== undefined)
+                    upsertCell(cells, 'RightMargin', style.textMarginRight.toString(), { '@_U': 'IN' });
+            }
+            else {
+                shape.Section.push((0, StyleHelpers_1.createTextBlockSection)({
+                    topMargin: style.textMarginTop,
+                    bottomMargin: style.textMarginBottom,
+                    leftMargin: style.textMarginLeft,
+                    rightMargin: style.textMarginRight,
+                }));
+            }
         }
         if (style.verticalAlign !== undefined) {
             if (!shape.Cell)
@@ -427,6 +583,7 @@ class ShapeModifier {
         upsert('LocPinX', (width / 2).toString());
         upsert('LocPinY', (height / 2).toString());
         // Keep cached @_V consistent for renderers that don't evaluate formulas.
+        // Evaluate any formula that references Width or Height (e.g. 'Width*0.5').
         if (shape.Section) {
             const sections = Array.isArray(shape.Section) ? shape.Section : [shape.Section];
             for (const section of sections) {
@@ -438,10 +595,23 @@ class ShapeModifier {
                         continue;
                     const cells = Array.isArray(row.Cell) ? row.Cell : [row.Cell];
                     for (const cell of cells) {
-                        if (cell['@_F'] === 'Width')
-                            cell['@_V'] = width.toString();
-                        if (cell['@_F'] === 'Height')
-                            cell['@_V'] = height.toString();
+                        const formula = cell['@_F'];
+                        if (typeof formula !== 'string')
+                            continue;
+                        if (!formula.includes('Width') && !formula.includes('Height'))
+                            continue;
+                        const expr = formula
+                            .replace(/\bWidth\b/g, width.toString())
+                            .replace(/\bHeight\b/g, height.toString());
+                        // Validate expression contains only safe arithmetic characters
+                        if (!/^[\d\s.+\-*/()]+$/.test(expr))
+                            continue;
+                        try {
+                            // eslint-disable-next-line no-new-func
+                            const result = Function(`"use strict"; return (${expr})`)();
+                            cell['@_V'] = result.toString();
+                        }
+                        catch { /* ignore malformed formulas */ }
                     }
                 }
             }

package/dist/ShapeReader.js

@@ -108,13 +108,12 @@ class ShapeReader {
         for (const connShape of connectorShapes) {
             const connId = connShape['@_ID'];
             const entry = connectsByConnector.get(connId);
-            if (!entry?.beginConnect || !entry?.endConnect)
-                continue;
-            const { beginConnect, endConnect } = entry;
-            const fromShapeId = beginConnect['@_ToSheet'];
-            const toShapeId = endConnect['@_ToSheet'];
-            const fromPort = this.decodeToPart(beginConnect['@_ToPart']);
-            const toPort = this.decodeToPart(endConnect['@_ToPart']);
+            const beginConnect = entry?.beginConnect;
+            const endConnect = entry?.endConnect;
+            const fromShapeId = beginConnect?.['@_ToSheet'];
+            const toShapeId = endConnect?.['@_ToSheet'];
+            const fromPort = this.decodeToPart(beginConnect?.['@_ToPart']);
+            const toPort = this.decodeToPart(endConnect?.['@_ToPart']);
             // Extract line style from the connector's Line section
             const sections = (0, VisioParsers_1.asArray)(connShape.Section);
             let lineColor;

package/dist/VisioDocument.js

@@ -106,7 +106,7 @@ class VisioDocument {
             const internalPages = this.pageManager.load();
             this._pageCache = internalPages.map(p => {
                 const pageStub = {
-                    ID: p.id.toString(),
+                    ID: p.id,
                     Name: p.name,
                     // Thread the relationship-resolved path so that loaded files
                     // with non-sequential page filenames are handled correctly.

package/dist/core/ContainerEditor.js

@@ -84,7 +84,7 @@ class ContainerEditor {
         let shapes = shapesContainer.Shape;
         if (!Array.isArray(shapes))
             shapes = [shapes];
-        const idx = shapes.findIndex((s) => s['@_ID'] == shapeId);
+        const idx = shapes.findIndex((s) => s['@_ID'] === shapeId);
         if (idx === -1)
             return;
         const shape = shapes[idx];

package/dist/core/LayerEditor.d.ts

@@ -25,7 +25,8 @@ export declare class LayerEditor {
         locked: boolean;
     }>;
     /**
-     * Delete a layer by index and remove it from all shape LayerMember cells.
+     * Delete a layer by index, re-index remaining layers to close gaps, and
+     * update all shape LayerMember cells to use the new indices.
      */
     deleteLayer(pageId: string, layerIndex: number): void;
     /**

package/dist/core/LayerEditor.js

@@ -139,21 +139,35 @@ class LayerEditor {
         });
     }
     /**
-     * Delete a layer by index and remove it from all shape LayerMember cells.
+     * Delete a layer by index, re-index remaining layers to close gaps, and
+     * update all shape LayerMember cells to use the new indices.
      */
     deleteLayer(pageId, layerIndex) {
         const parsed = this.cache.getParsed(pageId);
+        // Build old-index → new-index mapping while removing the deleted layer.
+        const indexRemap = new Map();
         const pageSheet = parsed.PageContents?.PageSheet;
         if (pageSheet?.Section) {
             const sections = Array.isArray(pageSheet.Section) ? pageSheet.Section : [pageSheet.Section];
             const layerSection = sections.find((s) => s['@_N'] === VisioConstants_1.SECTION_NAMES.Layer);
             if (layerSection?.Row) {
                 const rows = Array.isArray(layerSection.Row) ? layerSection.Row : [layerSection.Row];
-                layerSection.Row = rows.filter((r) => r['@_IX'] !== layerIndex.toString());
+                // Sort by numeric IX so re-indexing is deterministic.
+                const remaining = rows
+                    .filter((r) => r['@_IX'] !== layerIndex.toString())
+                    .sort((a, b) => parseInt(a['@_IX'], 10) - parseInt(b['@_IX'], 10));
+                remaining.forEach((row, newIx) => {
+                    const oldIx = row['@_IX'];
+                    if (oldIx !== newIx.toString()) {
+                        indexRemap.set(oldIx, newIx.toString());
+                        row['@_IX'] = newIx.toString();
+                    }
+                });
+                layerSection.Row = remaining;
             }
         }
-        // Remove this layer index from every shape's LayerMember cell.
-        const idxStr = layerIndex.toString();
+        // Update every shape's LayerMember cell: remove deleted index, remap survivors.
+        const deletedStr = layerIndex.toString();
         for (const [, shape] of this.cache.getShapeMap(parsed)) {
             if (!shape.Section)
                 continue;
@@ -169,10 +183,11 @@ class LayerEditor {
             const memberCell = cells.find((c) => c['@_N'] === 'LayerMember');
             if (!memberCell?.['@_V'])
                 continue;
-            const remaining = memberCell['@_V']
+            const updated = memberCell['@_V']
                 .split(';')
-                .filter((s) => s.length > 0 && s !== idxStr);
-            memberCell['@_V'] = remaining.join(';');
+                .filter((s) => s.length > 0 && s !== deletedStr)
+                .map((s) => indexRemap.get(s) ?? s);
+            memberCell['@_V'] = updated.join(';');
         }
         this.cache.saveParsed(pageId, parsed);
     }

package/dist/core/PageManager.d.ts

@@ -1,6 +1,6 @@
 import { VisioPackage } from '../VisioPackage';
 export interface PageEntry {
-    id: number;
+    id: string;
     name: string;
     relId: string;
     xmlPath: string;

package/dist/core/PageManager.js

@@ -67,7 +67,7 @@ class PageManager {
             const backPageAttr = node['@_BackPage'];
             const backPageId = backPageAttr ? backPageAttr.toString() : undefined;
             return {
-                id: parseInt(node['@_ID']),
+                id: String(node['@_ID']),
                 name: node['@_Name'],
                 relId: rId,
                 xmlPath: fullPath,
@@ -89,8 +89,9 @@ class PageManager {
         this.load();
         let maxId = 0;
         for (const p of this.pages) {
-            if (p.id > maxId)
-                maxId = p.id;
+            const numId = Number(p.id);
+            if (numId > maxId)
+                maxId = numId;
         }
         const newId = maxId + 1;
         const fileName = `page${newId}.xml`;
@@ -150,7 +151,7 @@ class PageManager {
      */
     async deletePage(pageId) {
         this.load();
-        const page = this.pages.find(p => p.id.toString() === pageId);
+        const page = this.pages.find(p => p.id === pageId);
         if (!page)
             throw new Error(`Page ${pageId} not found`);
         const pageFileName = page.xmlPath.split('/').pop();
@@ -242,11 +243,11 @@ class PageManager {
      */
     async duplicatePage(pageId, newName) {
         this.load();
-        const source = this.pages.find(p => p.id.toString() === pageId);
+        const source = this.pages.find(p => p.id === pageId);
         if (!source)
             throw new Error(`Page ${pageId} not found`);
         // 1. Calculate new ID and paths
-        const maxId = Math.max(...this.pages.map(p => p.id));
+        const maxId = Math.max(...this.pages.map(p => Number(p.id)));
         const newId = maxId + 1;
         const newFileName = `page${newId}.xml`;
         const newPath = `visio/pages/${newFileName}`;

package/dist/core/PageXmlCache.js

@@ -91,6 +91,14 @@ class PageXmlCache {
     }
     getParsed(pageId) {
         const pagePath = this.getPagePath(pageId);
+        // If there are pending (unflushed) mutations, the in-memory cache is the
+        // authoritative source of truth. Skip the pkg-content comparison to avoid
+        // re-parsing stale pkg content and discarding in-flight mutations (Bug 6).
+        if (this.dirtyPages.has(pagePath)) {
+            const dirty = this.pageCache.get(pagePath);
+            if (dirty)
+                return dirty.parsed;
+        }
         let content;
         try {
             content = this.pkg.getFileText(pagePath);

package/dist/shapes/ConnectionPointBuilder.d.ts

@@ -12,9 +12,9 @@ import { ConnectionPointDef, ConnectionTarget } from '../types/VisioTypes';
  */
 export declare class ConnectionPointBuilder {
     /** Build the raw XML object for a Connection section from a list of point definitions. */
-    static buildConnectionSection(points: ConnectionPointDef[]): any;
+    static buildConnectionSection(points: ConnectionPointDef[], width?: number, height?: number): any;
     /** Build a single Connection row XML object. */
-    static buildRow(point: ConnectionPointDef, ix: number): any;
+    static buildRow(point: ConnectionPointDef, ix: number, width?: number, height?: number): any;
     /**
      * Resolve a `ConnectionTarget` against a raw shape XML object.
      *

package/dist/shapes/ConnectionPointBuilder.js

@@ -19,19 +19,19 @@ const TYPE_VALUES = {
  */
 class ConnectionPointBuilder {
     /** Build the raw XML object for a Connection section from a list of point definitions. */
-    static buildConnectionSection(points) {
+    static buildConnectionSection(points, width = 1, height = 1) {
         return {
             '@_N': 'Connection',
-            Row: points.map((pt, ix) => this.buildRow(pt, ix)),
+            Row: points.map((pt, ix) => this.buildRow(pt, ix, width, height)),
         };
     }
     /** Build a single Connection row XML object. */
-    static buildRow(point, ix) {
+    static buildRow(point, ix, width = 1, height = 1) {
         const row = {
             '@_IX': ix.toString(),
             Cell: [
-                { '@_N': 'X', '@_V': '0', '@_F': `Width*${point.xFraction}` },
-                { '@_N': 'Y', '@_V': '0', '@_F': `Height*${point.yFraction}` },
+                { '@_N': 'X', '@_V': (width * point.xFraction).toString(), '@_F': `Width*${point.xFraction}` },
+                { '@_N': 'Y', '@_V': (height * point.yFraction).toString(), '@_F': `Height*${point.yFraction}` },
                 { '@_N': 'DirX', '@_V': point.direction ? point.direction.x.toString() : '0' },
                 { '@_N': 'DirY', '@_V': point.direction ? point.direction.y.toString() : '0' },
                 { '@_N': 'Type', '@_V': point.type ? TYPE_VALUES[point.type] : '0' },

package/dist/shapes/ConnectorBuilder.d.ts

@@ -29,6 +29,9 @@ export declare class ConnectorBuilder {
         '@_NameU': string;
         '@_Name': string;
         '@_Type': string;
+        '@_LineStyle': string;
+        '@_FillStyle': string;
+        '@_TextStyle': string;
         Cell: ({
             '@_N': string;
             '@_V': any;

package/dist/shapes/ConnectorBuilder.js

@@ -153,6 +153,9 @@ class ConnectorBuilder {
             '@_NameU': 'Dynamic connector',
             '@_Name': 'Dynamic connector',
             '@_Type': 'Shape',
+            '@_LineStyle': '0',
+            '@_FillStyle': '0',
+            '@_TextStyle': '0',
             Cell: [
                 { '@_N': 'BeginX', '@_V': beginX.toString() },
                 { '@_N': 'BeginY', '@_V': beginY.toString() },

package/dist/shapes/ForeignShapeBuilder.js

@@ -18,7 +18,9 @@ class ForeignShapeBuilder {
                 { '@_N': 'Width', '@_V': props.width.toString() },
                 { '@_N': 'Height', '@_V': props.height.toString() },
                 { '@_N': 'LocPinX', '@_V': (props.width / 2).toString(), '@_F': 'Width*0.5' },
-                { '@_N': 'LocPinY', '@_V': (props.height / 2).toString(), '@_F': 'Height*0.5' }
+                { '@_N': 'LocPinY', '@_V': (props.height / 2).toString(), '@_F': 'Height*0.5' },
+                { '@_N': 'ImgWidth', '@_V': props.width.toString(), '@_F': 'Width' },
+                { '@_N': 'ImgHeight', '@_V': props.height.toString(), '@_F': 'Height' }
             ],
             Section: [
                 // Foreign shapes typically have no border (LinePattern=0)

package/dist/shapes/GeometryBuilder.js

@@ -49,7 +49,10 @@ function section(rows, noFill) {
     return {
         '@_N': 'Geometry',
         '@_IX': '0',
-        Cell: [{ '@_N': 'NoFill', '@_V': noFill }],
+        Cell: [
+            { '@_N': 'NoShow', '@_V': '0' },
+            { '@_N': 'NoFill', '@_V': noFill },
+        ],
         Row: rows,
     };
 }

package/dist/shapes/ShapeBuilder.js

@@ -47,7 +47,7 @@ class ShapeBuilder {
             shape.Section.push((0, StyleHelpers_1.createFillSection)(props.fillColor));
         }
         const hasLineProps = props.lineColor !== undefined || props.linePattern !== undefined;
-        if (props.fillColor || hasLineProps) {
+        if (hasLineProps) {
             shape.Section.push((0, StyleHelpers_1.createLineSection)({
                 color: props.lineColor,
                 pattern: props.linePattern !== undefined ? props.linePattern.toString() : undefined,
@@ -100,7 +100,7 @@ class ShapeBuilder {
             shape.Cell.push({ '@_N': 'VerticalAlign', '@_V': (0, StyleHelpers_1.vertAlignValue)(props.verticalAlign) });
         }
         if (props.connectionPoints && props.connectionPoints.length > 0) {
-            shape.Section.push(ConnectionPointBuilder_1.ConnectionPointBuilder.buildConnectionSection(props.connectionPoints));
+            shape.Section.push(ConnectionPointBuilder_1.ConnectionPointBuilder.buildConnectionSection(props.connectionPoints, props.width, props.height));
         }
         // Groups and master instances inherit geometry from their children / master definition.
         if (props.type !== VisioConstants_1.SHAPE_TYPES.Group && !props.masterId) {

package/dist/templates/MinimalVsdx.js

@@ -54,7 +54,19 @@ exports.PAGES_RELS_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?
 </Relationships>`;
 exports.PAGE1_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <PageContents xmlns="${VisioConstants_1.XML_NAMESPACES.VISIO_MAIN}" xmlns:r="${VisioConstants_1.XML_NAMESPACES.RELATIONSHIPS_OFFICE}" xml:space="preserve">
+    <PageSheet LineStyle="0" FillStyle="0" TextStyle="0">
+        <Cell N="PageWidth" V="8.5"/>
+        <Cell N="PageHeight" V="11"/>
+        <Cell N="PageScale" V="1" Unit="MSG"/>
+        <Cell N="DrawingScale" V="1" Unit="MSG"/>
+        <Cell N="DrawingSizeType" V="0"/>
+        <Cell N="DrawingScaleType" V="0"/>
+        <Cell N="Inhibited" V="0"/>
+        <Cell N="UIVisibility" V="0"/>
+        <Cell N="PageDrawSizeType" V="0"/>
+    </PageSheet>
     <Shapes/>
+    <Connects/>
 </PageContents>`;
 exports.WINDOWS_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <Windows xmlns="${VisioConstants_1.XML_NAMESPACES.VISIO_MAIN}" xmlns:r="${VisioConstants_1.XML_NAMESPACES.RELATIONSHIPS_OFFICE}" xml:space="preserve">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-visio",
-  "version": "1.16.3",
+  "version": "1.16.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {