@contrail/documents 1.20.0 → 1.21.0-alpha.0c990fd

package/CHANGELOG.md

@@ -5,6 +5,63 @@ All notable changes to `@contrail/documents` are documented here.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.21.0] - 2026-09-26
+
+Maintenance release on the 1.x line; the same change ships on 2.x as 2.4.0.
+
+### Added
+
+- `DocumentContainerService.buildIndex` and `DocumentContainerIndex` — which containers hold which
+  elements, for one document, resolved once and read back by lookup. A container is a frame or a
+  section; membership is geometry, draw order and kind, with nothing inherited and nothing stored.
+  The rule is written out in `src/containers/DOCUMENT_CONTAINERS_SPEC.md`, which the code is
+  measured against.
+- `DocumentContainerUtil` — the container geometry as statics. `anchorFor` answers "which point is
+  this element placed by" for a caller holding an element rather than a measured box, and
+  `resizeKeepingAnchor` returns the size a new value needs with the position that keeps that point
+  still. Applying one without the other drags the corner membership reads.
+- `SECTION_ELEMENT_TYPE` and `FRAME_ELEMENT_TYPE` in `document-element-constants`, alongside
+  `SHAPE_ELEMENT_TYPES`, which moved here for the board's shape handling.
+- `DocumentElementFactory.getBoundingClientRectScaled` — the space an element covers on the canvas,
+  with `scale` applied. `getBoundingClientRect` still returns the unscaled box, which is what layout
+  works in: `@contrail/document-table` places table members from it, and scaling it moves a scaled
+  member into a different cell. Anything deciding what an element overlaps or sits on wants the
+  scaled one.
+
+### Deprecated
+
+- `isContainerBinding()` in favour of `DynamicTextUtil.takesValueFromContainer()`. Same rule, named
+  for what it decides. The old name still works and delegates to the new one.
+
+### Fixed
+
+- A dynamic text is anchored at its drawn top-left corner rather than its centre. Its size comes
+  from the value it resolves to and that value comes from its container, so an anchor that moved
+  with the size let the two choose each other: near an edge they never settled, flipping between a
+  value and "Move to a frame" on every read. The corner is the rotated one, so a text turned on its
+  side anchors where it appears (VIBE-9567).
+- `isDynamicText` requires a `propertyBindings.text` binding, the one the value is read from. The
+  text tool creates an element with empty bindings and empty metadata, both truthy, so an
+  unconfigured text was anchored at its corner while the canvas centred it.
+- An element covering a container is not inside it, whatever its type. The rule it replaces looked
+  only at shapes wider and taller than the container, so a background image joined the frame it
+  covered.
+- A line or callout is measured from the elements it connects even with no stored `position`, where
+  it was previously left out of the index entirely.
+- `min` and `max` rendered an infinity sign when every member value was empty; both fall through to
+  `n/a`. `calculateSize` no longer throws on an element that reaches it without a `size`, which on
+  the server failed the read for the whole document.
+
+### Changed
+
+- `anchorFor` and the index measure through the same factory call, so a caller holding an element
+  gets the answer the index would give it. Reading `size` directly disagreed for the types whose box
+  is not position plus size.
+- A container path is a containment chain, walked outward from the container the element sits on, so
+  two containers that merely cross no longer both claim it.
+- `buildIndex` scans element types before measuring, so a document with no containers of the kinds
+  asked for returns an empty index without a geometry pass.
+
 ## [1.20.0] - 2026-09-25
 
 Maintenance release on the 1.x line; the same change ships on 2.x as 2.3.0.

package/lib/containers/container-kind.d.ts

@@ -0,0 +1,9 @@
+import { FRAME_ELEMENT_TYPE, SECTION_ELEMENT_TYPE } from '../document-element-constants';
+export type ContainerElementType = typeof FRAME_ELEMENT_TYPE | typeof SECTION_ELEMENT_TYPE;
+export interface ContainerKind {
+    elementType: ContainerElementType;
+    nests: boolean;
+}
+export declare const SECTION_KIND: ContainerKind;
+export declare const FRAME_KIND: ContainerKind;
+export declare const CONTAINER_KINDS: ContainerKind[];

package/lib/containers/container-kind.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTAINER_KINDS = exports.FRAME_KIND = exports.SECTION_KIND = void 0;
+const document_element_constants_1 = require("../document-element-constants");
+exports.SECTION_KIND = { elementType: document_element_constants_1.SECTION_ELEMENT_TYPE, nests: true };
+exports.FRAME_KIND = { elementType: document_element_constants_1.FRAME_ELEMENT_TYPE, nests: false };
+exports.CONTAINER_KINDS = [exports.SECTION_KIND, exports.FRAME_KIND];

package/lib/containers/document-container-index.d.ts

@@ -0,0 +1,24 @@
+import { DocumentElement, PositionDefinition } from '../types';
+import { ContainerElementType } from './container-kind';
+import { DocumentContainer } from './document-container';
+export declare class DocumentContainerIndex {
+    private readonly data;
+    constructor(data: {
+        documentElementsById: Map<string, DocumentElement>;
+        containersById: Map<string, DocumentContainer>;
+        containerPathsByDocumentElementId: Map<string, Map<string, string[]>>;
+        memberIdsByContainerId: Map<string, string[]>;
+        containerIdsByElementType: Map<string, string[]>;
+    });
+    static empty(): DocumentContainerIndex;
+    getContainer(containerId: string): DocumentContainer | null;
+    containersOf(documentElementId: string, elementType: ContainerElementType): DocumentContainer[];
+    containerIdsOf(documentElementId: string, elementType: ContainerElementType): readonly string[];
+    innermostContainerIdOf(documentElementId: string, elementType: ContainerElementType): string | null;
+    memberIdsOf(containerId: string): readonly string[];
+    memberDocumentElementsOf(containerId: string): DocumentElement[];
+    containerPathAtPoint(point: PositionDefinition, elementType: ContainerElementType): readonly string[];
+    private containersOfType;
+    private resolveAll;
+    private containerPath;
+}

package/lib/containers/document-container-index.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentContainerIndex = void 0;
+const document_container_1 = require("./document-container");
+class DocumentContainerIndex {
+    constructor(data) {
+        this.data = data;
+    }
+    static empty() {
+        return new DocumentContainerIndex({
+            documentElementsById: new Map(),
+            containersById: new Map(),
+            containerPathsByDocumentElementId: new Map(),
+            memberIdsByContainerId: new Map(),
+            containerIdsByElementType: new Map(),
+        });
+    }
+    getContainer(containerId) {
+        var _a;
+        return (_a = this.data.containersById.get(containerId)) !== null && _a !== void 0 ? _a : null;
+    }
+    containersOf(documentElementId, elementType) {
+        return this.resolveAll(this.containerIdsOf(documentElementId, elementType));
+    }
+    containerIdsOf(documentElementId, elementType) {
+        return [...this.containerPath(documentElementId, elementType)];
+    }
+    innermostContainerIdOf(documentElementId, elementType) {
+        const path = this.containerPath(documentElementId, elementType);
+        return path.length ? path[path.length - 1] : null;
+    }
+    memberIdsOf(containerId) {
+        var _a;
+        return [...((_a = this.data.memberIdsByContainerId.get(containerId)) !== null && _a !== void 0 ? _a : [])];
+    }
+    memberDocumentElementsOf(containerId) {
+        const members = [];
+        for (const memberId of this.memberIdsOf(containerId)) {
+            const member = this.data.documentElementsById.get(memberId);
+            if (member) {
+                members.push(member);
+            }
+        }
+        return members;
+    }
+    containerPathAtPoint(point, elementType) {
+        var _a, _b;
+        const containers = this.containersOfType(elementType);
+        const covering = containers.filter((container) => document_container_1.DocumentContainerUtil.containsPoint(container.box, point));
+        const nests = (_b = (_a = containers[0]) === null || _a === void 0 ? void 0 : _a.kind.nests) !== null && _b !== void 0 ? _b : true;
+        const path = nests ? document_container_1.DocumentContainerUtil.chain(covering) : document_container_1.DocumentContainerUtil.topmost(covering);
+        return path.map((container) => container.id);
+    }
+    containersOfType(elementType) {
+        var _a;
+        return this.resolveAll((_a = this.data.containerIdsByElementType.get(elementType)) !== null && _a !== void 0 ? _a : []);
+    }
+    resolveAll(containerIds) {
+        const containers = [];
+        for (const containerId of containerIds) {
+            const container = this.data.containersById.get(containerId);
+            if (container) {
+                containers.push(container);
+            }
+        }
+        return containers;
+    }
+    containerPath(documentElementId, elementType) {
+        var _a, _b;
+        return (_b = (_a = this.data.containerPathsByDocumentElementId.get(documentElementId)) === null || _a === void 0 ? void 0 : _a.get(elementType)) !== null && _b !== void 0 ? _b : [];
+    }
+}
+exports.DocumentContainerIndex = DocumentContainerIndex;

package/lib/containers/document-container.d.ts

@@ -0,0 +1,29 @@
+import { CoordinateBox, DocumentElement, PositionDefinition, SizeDefinition } from '../types';
+import { ContainerKind } from './container-kind';
+export interface DocumentContainer {
+    id: string;
+    kind: ContainerKind;
+    documentElement: DocumentElement;
+    box: CoordinateBox;
+    drawOrder: number;
+}
+export interface MeasuredDocumentElement {
+    documentElement: DocumentElement;
+    box: CoordinateBox | null;
+    drawOrder: number;
+}
+export declare class DocumentContainerUtil {
+    static toCoordinateBox(x: number, y: number, width: number, height: number): CoordinateBox;
+    static centerOf(box: CoordinateBox): PositionDefinition;
+    static anchorOf(documentElement: DocumentElement, box: CoordinateBox): PositionDefinition;
+    static positionKeepingAnchor(documentElement: DocumentElement, newSize: SizeDefinition): PositionDefinition;
+    static resizeKeepingAnchor(dynamicTextElement: DocumentElement, entityType: any, text: string): {
+        size: SizeDefinition;
+        position: PositionDefinition;
+    };
+    static anchorFor(documentElement: DocumentElement, position?: PositionDefinition, startElement?: DocumentElement, endElement?: DocumentElement): PositionDefinition;
+    static containsPoint(box: CoordinateBox, point: PositionDefinition): boolean;
+    static encloses(outer: CoordinateBox, inner: CoordinateBox): boolean;
+    static chain(candidates: DocumentContainer[]): DocumentContainer[];
+    static topmost(containers: DocumentContainer[]): DocumentContainer[];
+}

package/lib/containers/document-container.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentContainerUtil = void 0;
+const rotation_math_1 = require("../util/mask/rotation-math");
+const dynamic_text_util_1 = require("../util/dynamic-text/dynamic-text-util");
+const document_element_factory_1 = require("../document-element-factory");
+class DocumentContainerUtil {
+    static toCoordinateBox(x, y, width, height) {
+        return { x, y, width, height, left: x, right: x + width, top: y, bottom: y + height };
+    }
+    static centerOf(box) {
+        return { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+    }
+    static anchorOf(documentElement, box) {
+        var _a;
+        if (!dynamic_text_util_1.DynamicTextUtil.isDynamicText(documentElement)) {
+            return DocumentContainerUtil.centerOf(box);
+        }
+        const angle = (_a = documentElement.rotate) === null || _a === void 0 ? void 0 : _a.angle;
+        const corner = { x: box.left, y: box.top };
+        return angle ? (0, rotation_math_1.rotatePoint)(corner, angle, DocumentContainerUtil.centerOf(box)) : corner;
+    }
+    static positionKeepingAnchor(documentElement, newSize) {
+        var _a, _b, _c, _d, _e;
+        const position = documentElement === null || documentElement === void 0 ? void 0 : documentElement.position;
+        const angle = (_a = documentElement === null || documentElement === void 0 ? void 0 : documentElement.rotate) === null || _a === void 0 ? void 0 : _a.angle;
+        if (!position) {
+            return position;
+        }
+        if (!angle || !newSize || !documentElement.size) {
+            return Object.assign({}, position);
+        }
+        const scaleX = (_c = (_b = documentElement.scale) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 1;
+        const scaleY = (_e = (_d = documentElement.scale) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 1;
+        const cornerOffset = (size) => {
+            const half = { x: (size.width * scaleX) / 2, y: (size.height * scaleY) / 2 };
+            const turned = (0, rotation_math_1.rotatePoint)(half, angle);
+            return { x: half.x - turned.x, y: half.y - turned.y };
+        };
+        const before = cornerOffset(documentElement.size);
+        const after = cornerOffset(newSize);
+        const moved = { x: position.x + before.x - after.x, y: position.y + before.y - after.y };
+        return Number.isFinite(moved.x) && Number.isFinite(moved.y) ? moved : Object.assign({}, position);
+    }
+    static resizeKeepingAnchor(dynamicTextElement, entityType, text) {
+        const size = dynamic_text_util_1.DynamicTextUtil.calculateSize(dynamicTextElement, entityType, text);
+        return { size, position: DocumentContainerUtil.positionKeepingAnchor(dynamicTextElement, size) };
+    }
+    static anchorFor(documentElement, position, startElement, endElement) {
+        const at = position !== null && position !== void 0 ? position : documentElement === null || documentElement === void 0 ? void 0 : documentElement.position;
+        try {
+            const measured = document_element_factory_1.DocumentElementFactory.getBoundingClientRectScaled(at ? Object.assign(Object.assign({}, documentElement), { position: at }) : documentElement, startElement, endElement);
+            const box = DocumentContainerUtil.toCoordinateBox(measured.x, measured.y, measured.width, measured.height);
+            return DocumentContainerUtil.anchorOf(documentElement, box);
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    static containsPoint(box, point) {
+        return point.x >= box.left && point.x <= box.right && point.y >= box.top && point.y <= box.bottom;
+    }
+    static encloses(outer, inner) {
+        const covers = outer.left <= inner.left && outer.right >= inner.right && outer.top <= inner.top && outer.bottom >= inner.bottom;
+        const identical = outer.left === inner.left &&
+            outer.right === inner.right &&
+            outer.top === inner.top &&
+            outer.bottom === inner.bottom;
+        return covers && !identical;
+    }
+    static chain(candidates) {
+        if (!candidates.length) {
+            return [];
+        }
+        const topmostOf = (of) => of.reduce((topmost, container) => (container.drawOrder > topmost.drawOrder ? container : topmost));
+        const path = [topmostOf(candidates)];
+        for (;;) {
+            const current = path[0];
+            const enclosing = candidates.filter((container) => !path.includes(container) && this.encloses(container.box, current.box));
+            if (!enclosing.length) {
+                return path;
+            }
+            path.unshift(topmostOf(enclosing));
+        }
+    }
+    static topmost(containers) {
+        return containers.length
+            ? [containers.reduce((topmost, container) => (container.drawOrder > topmost.drawOrder ? container : topmost))]
+            : [];
+    }
+}
+exports.DocumentContainerUtil = DocumentContainerUtil;

package/lib/containers/document-container.service.d.ts

@@ -0,0 +1,13 @@
+import { DocumentElement } from '../types';
+import { ContainerKind } from './container-kind';
+import { DocumentContainerIndex } from './document-container-index';
+export declare class DocumentContainerService {
+    static buildIndex(documentElements: readonly DocumentElement[], kinds?: ContainerKind[]): DocumentContainerIndex;
+    static isContainer(documentElement: DocumentElement, kinds?: ContainerKind[]): boolean;
+    private static measureDocumentElements;
+    private static measure;
+    private static collectContainers;
+    private static resolvePath;
+    private static enclosersOf;
+    private static candidateContainers;
+}

package/lib/containers/document-container.service.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentContainerService = void 0;
+const document_element_factory_1 = require("../document-element-factory");
+const container_kind_1 = require("./container-kind");
+const document_container_index_1 = require("./document-container-index");
+const document_container_1 = require("./document-container");
+class DocumentContainerService {
+    static buildIndex(documentElements, kinds = container_kind_1.CONTAINER_KINDS) {
+        var _a, _b;
+        const elements = (documentElements !== null && documentElements !== void 0 ? documentElements : []).filter((element) => !!element);
+        const containerElementTypes = new Set(kinds.map((kind) => kind.elementType));
+        if (!elements.some((element) => containerElementTypes.has(element.type))) {
+            return document_container_index_1.DocumentContainerIndex.empty();
+        }
+        const documentElementsById = new Map(elements.map((element) => [element.id, element]));
+        const measuredDocumentElements = this.measureDocumentElements(elements, documentElementsById);
+        const containersByElementType = new Map(kinds.map((kind) => [kind.elementType, this.collectContainers(measuredDocumentElements, kind)]));
+        const containersById = new Map();
+        const containerIdsByElementType = new Map();
+        containersByElementType.forEach((containers, elementType) => {
+            containerIdsByElementType.set(elementType, containers.map((container) => container.id));
+            containers.forEach((container) => containersById.set(container.id, container));
+        });
+        const pathsByMeasured = new Map();
+        for (const measured of measuredDocumentElements) {
+            const byElementType = new Map();
+            for (const kind of kinds) {
+                byElementType.set(kind.elementType, this.resolvePath(measured, kind, (_a = containersByElementType.get(kind.elementType)) !== null && _a !== void 0 ? _a : []));
+            }
+            pathsByMeasured.set(measured, byElementType);
+        }
+        const containerPathsByDocumentElementId = new Map();
+        const memberIdsByContainerId = new Map();
+        const memberIdsSeen = new Map();
+        for (const measured of measuredDocumentElements) {
+            const documentElementId = measured.documentElement.id;
+            const pathsByElementType = new Map();
+            ((_b = pathsByMeasured.get(measured)) !== null && _b !== void 0 ? _b : new Map()).forEach((path, elementType) => pathsByElementType.set(elementType, path.map((container) => container.id)));
+            for (const path of pathsByElementType.values()) {
+                for (const containerId of path) {
+                    const seen = memberIdsSeen.get(containerId);
+                    if (!seen) {
+                        memberIdsSeen.set(containerId, new Set([documentElementId]));
+                        memberIdsByContainerId.set(containerId, [documentElementId]);
+                    }
+                    else if (!seen.has(documentElementId)) {
+                        seen.add(documentElementId);
+                        memberIdsByContainerId.get(containerId).push(documentElementId);
+                    }
+                }
+            }
+            containerPathsByDocumentElementId.set(documentElementId, pathsByElementType);
+        }
+        return new document_container_index_1.DocumentContainerIndex({
+            documentElementsById,
+            containersById,
+            containerPathsByDocumentElementId,
+            memberIdsByContainerId,
+            containerIdsByElementType,
+        });
+    }
+    static isContainer(documentElement, kinds = container_kind_1.CONTAINER_KINDS) {
+        return kinds.some((kind) => kind.elementType === (documentElement === null || documentElement === void 0 ? void 0 : documentElement.type));
+    }
+    static measureDocumentElements(documentElements, documentElementsById) {
+        return documentElements.map((documentElement, drawOrder) => ({
+            documentElement,
+            drawOrder,
+            box: this.measure(documentElement, documentElementsById),
+        }));
+    }
+    static measure(documentElement, documentElementsById) {
+        var _a, _b;
+        try {
+            const start = ((_a = documentElement === null || documentElement === void 0 ? void 0 : documentElement.start) === null || _a === void 0 ? void 0 : _a.id) ? documentElementsById.get(documentElement.start.id) : undefined;
+            const end = ((_b = documentElement === null || documentElement === void 0 ? void 0 : documentElement.end) === null || _b === void 0 ? void 0 : _b.id) ? documentElementsById.get(documentElement.end.id) : undefined;
+            const { x, y, width, height } = document_element_factory_1.DocumentElementFactory.getBoundingClientRectScaled(documentElement, start, end);
+            if (!width && !height && !documentElement.position) {
+                return null;
+            }
+            return document_container_1.DocumentContainerUtil.toCoordinateBox(x, y, width, height);
+        }
+        catch (_c) {
+            return null;
+        }
+    }
+    static collectContainers(measuredDocumentElements, kind) {
+        return measuredDocumentElements
+            .filter((measured) => measured.documentElement.type === kind.elementType && measured.box)
+            .map((measured) => ({
+            id: measured.documentElement.id,
+            kind,
+            documentElement: measured.documentElement,
+            box: measured.box,
+            drawOrder: measured.drawOrder,
+        }));
+    }
+    static resolvePath(measured, kind, containers) {
+        if (!containers.length || !measured.box) {
+            return [];
+        }
+        if (measured.documentElement.type === kind.elementType) {
+            return kind.nests ? document_container_1.DocumentContainerUtil.chain(this.enclosersOf(measured, containers)) : [];
+        }
+        const candidates = this.candidateContainers(measured, containers);
+        return kind.nests ? document_container_1.DocumentContainerUtil.chain(candidates) : document_container_1.DocumentContainerUtil.topmost(candidates);
+    }
+    static enclosersOf(measured, containers) {
+        return containers.filter((container) => {
+            var _a;
+            return container.id !== measured.documentElement.id &&
+                document_container_1.DocumentContainerUtil.encloses(container.box, measured.box) &&
+                measured.drawOrder > container.drawOrder &&
+                !((_a = measured.documentElement.elementIds) === null || _a === void 0 ? void 0 : _a.includes(container.id));
+        });
+    }
+    static candidateContainers(measured, containers) {
+        const anchor = document_container_1.DocumentContainerUtil.anchorOf(measured.documentElement, measured.box);
+        return containers.filter((container) => {
+            var _a;
+            if (container.id === measured.documentElement.id || measured.drawOrder <= container.drawOrder) {
+                return false;
+            }
+            if (!document_container_1.DocumentContainerUtil.containsPoint(container.box, anchor)) {
+                return false;
+            }
+            if (document_container_1.DocumentContainerUtil.encloses(measured.box, container.box)) {
+                return false;
+            }
+            return !((_a = measured.documentElement.elementIds) === null || _a === void 0 ? void 0 : _a.includes(container.id));
+        });
+    }
+}
+exports.DocumentContainerService = DocumentContainerService;

package/lib/document-element-constants.d.ts

@@ -3,3 +3,6 @@ export declare const ANNOTATION_PADDING_Y = 8;
 export declare const COLOR_PADDING = 5;
 export declare const COLOR_FONT_SIZE = 8;
 export declare const COLOR_WIDTH = 140;
+export declare const SECTION_ELEMENT_TYPE = "section";
+export declare const FRAME_ELEMENT_TYPE = "frame";
+export declare const SHAPE_ELEMENT_TYPES: string[];

package/lib/document-element-constants.js

@@ -1,8 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_WIDTH = exports.COLOR_FONT_SIZE = exports.COLOR_PADDING = exports.ANNOTATION_PADDING_Y = exports.ANNOTATION_IMG_SIZE = void 0;
+exports.SHAPE_ELEMENT_TYPES = exports.FRAME_ELEMENT_TYPE = exports.SECTION_ELEMENT_TYPE = exports.COLOR_WIDTH = exports.COLOR_FONT_SIZE = exports.COLOR_PADDING = exports.ANNOTATION_PADDING_Y = exports.ANNOTATION_IMG_SIZE = void 0;
 exports.ANNOTATION_IMG_SIZE = 15;
 exports.ANNOTATION_PADDING_Y = 8;
 exports.COLOR_PADDING = 5;
 exports.COLOR_FONT_SIZE = 8;
 exports.COLOR_WIDTH = 140;
+exports.SECTION_ELEMENT_TYPE = 'section';
+exports.FRAME_ELEMENT_TYPE = 'frame';
+exports.SHAPE_ELEMENT_TYPES = [
+    'text',
+    'line',
+    'arrow',
+    'circle',
+    'rectangle',
+    'round_rectangle',
+    'triangle',
+    'diamond',
+    'star',
+    'heart',
+    'double_arrow',
+    'right_arrow',
+    'rhombus',
+    'cloud',
+    'callout',
+    'draw_frame',
+    'draw_section',
+];

package/lib/document-element-factory.d.ts

@@ -22,6 +22,12 @@ export declare class DocumentElementFactory {
         width: any;
         height: any;
     };
+    static getBoundingClientRectScaled(documentElement: DocumentElement, startElement?: DocumentElement, endElement?: DocumentElement): {
+        x: any;
+        y: any;
+        width: any;
+        height: any;
+    };
     private static getPosition;
     private static getSize;
     private static getComponentSize;

package/lib/document-element-factory.js

@@ -216,6 +216,16 @@ class DocumentElementFactory {
             height,
         };
     }
+    static getBoundingClientRectScaled(documentElement, startElement, endElement) {
+        var _a, _b, _c, _d;
+        const { x, y, width, height } = this.getBoundingClientRect(documentElement, startElement, endElement);
+        return {
+            x,
+            y,
+            width: width * ((_b = (_a = documentElement.scale) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 1),
+            height: height * ((_d = (_c = documentElement.scale) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 1),
+        };
+    }
     static getPosition(documentElement, startElement, endElement) {
         var _a, _b;
         if (documentElement.type === 'line' || documentElement.type === 'callout') {

package/lib/index.d.ts

@@ -14,3 +14,7 @@ export * from './util/curved-line/curved-line';
 export * from './util/callout/callout';
 export * from './util/mask';
 export * from './document-frame.service';
+export * from './containers/container-kind';
+export * from './containers/document-container';
+export * from './containers/document-container-index';
+export * from './containers/document-container.service';

package/lib/index.js

@@ -30,3 +30,7 @@ __exportStar(require("./util/curved-line/curved-line"), exports);
 __exportStar(require("./util/callout/callout"), exports);
 __exportStar(require("./util/mask"), exports);
 __exportStar(require("./document-frame.service"), exports);
+__exportStar(require("./containers/container-kind"), exports);
+__exportStar(require("./containers/document-container"), exports);
+__exportStar(require("./containers/document-container-index"), exports);
+__exportStar(require("./containers/document-container.service"), exports);

package/lib/util/dynamic-text/dynamic-text-util.d.ts

@@ -27,6 +27,8 @@ export declare enum DynamicTextDisplayFunction {
 export declare const MOVE_TO_FRAME_TEXT = "Move to a frame";
 export declare const MOVE_TO_SECTION_TEXT = "Move to a section";
 export declare const CLICK_TO_CONFIGURE = "Click to configure";
+export declare function placeholderForMissingContainer(entityType: string): string;
+export declare function isPlaceholderText(text: string): boolean;
 export declare const HARD_CODED_TEXT: {
     'project.name': string;
     'project.createdBy.email': string;
@@ -50,8 +52,13 @@ export declare const HARD_CODED_TEXT: {
 };
 export declare function isContainerBinding(bindingProperty: string | null | undefined): boolean;
 export declare class DynamicTextUtil {
+    static isDynamicText(documentElement: DocumentElement): boolean;
+    static takesValueFromContainer(bindingProperty: string | null | undefined): boolean;
     static getDynamicTextValue(dynamicTextElement: DocumentElement, property: TypeProperty, propertyLevel: PropertyLevel, container: DynamicTextContainer | null, componentModels: any[], ownerReferenceModel?: any): string;
-    static calculateSize(dynamicTextElement: DocumentElement, entityType: any, text: string): import("../..").SizeDefinition;
+    static calculateSize(dynamicTextElement: DocumentElement, entityType: any, text: string): {
+        width: number;
+        height: number;
+    };
     static getTextFromFrameMemberValues(displayFunction: string, property: any, memberValues: any[]): string;
     private static getItemCount;
 }

package/lib/util/dynamic-text/dynamic-text-util.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicTextUtil = exports.HARD_CODED_TEXT = exports.CLICK_TO_CONFIGURE = exports.MOVE_TO_SECTION_TEXT = exports.MOVE_TO_FRAME_TEXT = exports.DynamicTextDisplayFunction = exports.DYNAMIC_TEXT_DATA_SOURCE = void 0;
+exports.placeholderForMissingContainer = placeholderForMissingContainer;
+exports.isPlaceholderText = isPlaceholderText;
 exports.isContainerBinding = isContainerBinding;
 const types_1 = require("@contrail/types");
 const util_1 = require("@contrail/util");
@@ -28,6 +30,12 @@ var DynamicTextDisplayFunction;
 exports.MOVE_TO_FRAME_TEXT = 'Move to a frame';
 exports.MOVE_TO_SECTION_TEXT = 'Move to a section';
 exports.CLICK_TO_CONFIGURE = 'Click to configure';
+function placeholderForMissingContainer(entityType) {
+    return entityType === DYNAMIC_TEXT_DATA_SOURCE.SECTION ? exports.MOVE_TO_SECTION_TEXT : exports.MOVE_TO_FRAME_TEXT;
+}
+function isPlaceholderText(text) {
+    return text === exports.MOVE_TO_FRAME_TEXT || text === exports.MOVE_TO_SECTION_TEXT || text === exports.CLICK_TO_CONFIGURE;
+}
 exports.HARD_CODED_TEXT = {
     'project.name': 'Project name',
     'project.createdBy.email': 'Project created by',
@@ -52,13 +60,22 @@ exports.HARD_CODED_TEXT = {
 const CONTAINER_PROPERTY_SLUGS = ['name', 'count', 'itemFamilyCount', 'itemOptionCount', 'colorCount'];
 const CONTAINER_SOURCES = [DYNAMIC_TEXT_DATA_SOURCE.FRAME, DYNAMIC_TEXT_DATA_SOURCE.SECTION];
 function isContainerBinding(bindingProperty) {
-    if (!bindingProperty) {
-        return false;
-    }
-    const [entityType, propertySlug] = bindingProperty.split('.');
-    return CONTAINER_SOURCES.includes(entityType) && CONTAINER_PROPERTY_SLUGS.includes(propertySlug);
+    return DynamicTextUtil.takesValueFromContainer(bindingProperty);
 }
 class DynamicTextUtil {
+    static isDynamicText(documentElement) {
+        var _a;
+        return ((documentElement === null || documentElement === void 0 ? void 0 : documentElement.type) === 'text' &&
+            !!((_a = documentElement.propertyBindings) === null || _a === void 0 ? void 0 : _a.text) &&
+            !!documentElement.propertyBindingsMetaData);
+    }
+    static takesValueFromContainer(bindingProperty) {
+        if (!bindingProperty) {
+            return false;
+        }
+        const [entityType, propertySlug] = bindingProperty.split('.');
+        return CONTAINER_SOURCES.includes(entityType) && CONTAINER_PROPERTY_SLUGS.includes(propertySlug);
+    }
     static getDynamicTextValue(dynamicTextElement, property, propertyLevel, container, componentModels, ownerReferenceModel = null) {
         var _a, _b, _c, _d;
         if (!dynamicTextElement.propertyBindings || !dynamicTextElement.propertyBindings.text) {
@@ -89,7 +106,7 @@ class DynamicTextUtil {
         }
         else {
             if (!container && !isSpecRelated) {
-                text = entityType === DYNAMIC_TEXT_DATA_SOURCE.SECTION ? exports.MOVE_TO_SECTION_TEXT : exports.MOVE_TO_FRAME_TEXT;
+                text = placeholderForMissingContainer(entityType);
             }
             else {
                 if (CONTAINER_SOURCES.includes(entityType)) {
@@ -132,7 +149,7 @@ class DynamicTextUtil {
                 text = exports.HARD_CODED_TEXT[bindingProperty] || (property === null || property === void 0 ? void 0 : property.label);
             }
             else if (!container) {
-                text = exports.MOVE_TO_FRAME_TEXT;
+                text = placeholderForMissingContainer(entityType);
             }
             else {
                 text = property === null || property === void 0 ? void 0 : property.label;
@@ -142,7 +159,7 @@ class DynamicTextUtil {
             text = 'n/a';
         }
         if (displayLabel &&
-            ![exports.MOVE_TO_FRAME_TEXT, exports.CLICK_TO_CONFIGURE].includes(text) &&
+            !isPlaceholderText(text) &&
             displayFunction !== DynamicTextDisplayFunction.LABEL &&
             text !== bindingProperty) {
             text = `${exports.HARD_CODED_TEXT[bindingProperty] || (property === null || property === void 0 ? void 0 : property.label) || ''}: ${text}`;
@@ -150,16 +167,19 @@ class DynamicTextUtil {
         return text;
     }
     static calculateSize(dynamicTextElement, entityType, text) {
-        var _a, _b, _c, _d;
-        let size = dynamicTextElement.size;
-        const fontFamily = (_a = document_util_1.DocumentStyleUtil.getFirstFontFamily(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text)) !== null && _a !== void 0 ? _a : document_util_1.DEFAULT_TEXT_FONT_FAMILY;
-        const fontSize = (_d = (dynamicTextElement.isTextTool
-            ? (_c = (_b = dynamicTextElement.style) === null || _b === void 0 ? void 0 : _b.font) === null || _c === void 0 ? void 0 : _c.size
-            : document_util_1.DocumentStyleUtil.getFirstFontSize(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text, true))) !== null && _d !== void 0 ? _d : document_util_1.DEFAULT_TEXT_FONT_SIZE;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        let size = {
+            width: (_b = (_a = dynamicTextElement.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0,
+            height: (_d = (_c = dynamicTextElement.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0,
+        };
+        const fontFamily = (_f = document_util_1.DocumentStyleUtil.getFirstFontFamily((_e = dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text) !== null && _e !== void 0 ? _e : '')) !== null && _f !== void 0 ? _f : document_util_1.DEFAULT_TEXT_FONT_FAMILY;
+        const fontSize = (_j = (dynamicTextElement.isTextTool
+            ? (_h = (_g = dynamicTextElement.style) === null || _g === void 0 ? void 0 : _g.font) === null || _h === void 0 ? void 0 : _h.size
+            : document_util_1.DocumentStyleUtil.getFirstFontSize(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text, true))) !== null && _j !== void 0 ? _j : document_util_1.DEFAULT_TEXT_FONT_SIZE;
         const fontSizePx = document_util_1.DocumentStyleUtil.toPx(fontSize, 4);
         const padding = dynamicTextElement.isTextTool ? document_util_1.TEXT_TOOL_PADDING : document_util_1.TEXT_BOX_PADDING;
-        const bold = document_util_1.DocumentStyleUtil.isBold(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text, fontFamily);
-        const italic = document_util_1.DocumentStyleUtil.isItalic(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text);
+        const bold = document_util_1.DocumentStyleUtil.isBold((_k = dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text) !== null && _k !== void 0 ? _k : '', fontFamily);
+        const italic = document_util_1.DocumentStyleUtil.isItalic((_l = dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text) !== null && _l !== void 0 ? _l : '');
         const measureTextSettings = {
             fontFamily,
             fontSize: fontSizePx,
@@ -168,8 +188,9 @@ class DynamicTextUtil {
             bold,
             italic,
         };
-        if (!dynamicTextElement.isTextTool) {
-            measureTextSettings.width = dynamicTextElement.size.width - padding * 2;
+        const fixedWidth = size.width - padding * 2;
+        if (!dynamicTextElement.isTextTool && fixedWidth > 0) {
+            measureTextSettings.width = fixedWidth;
         }
         try {
             const dimensions = document_util_1.DocumentTextUtil.measureText(text, measureTextSettings);
@@ -199,7 +220,7 @@ class DynamicTextUtil {
         }
         else if (displayFunction === DynamicTextDisplayFunction.UNIQUE_ARRAY) {
             text = Array.from(new Set(memberValues
-                .filter((e) => e !== null && e !== undefined)
+                .filter((e) => e !== null && e !== undefined && e !== '')
                 .flat()
                 .map((e) => formatter.formatValueForProperty(e, property))))
                 .sort()
@@ -212,13 +233,17 @@ class DynamicTextUtil {
         else if (displayFunction === DynamicTextDisplayFunction.LAST) {
             text = formatter.formatValueForProperty(memberValues[memberValues.length - 1], property);
         }
-        else if (displayFunction === DynamicTextDisplayFunction.MIN) {
-            memberValues = memberValues.filter((e) => e !== null && e !== undefined);
-            text = formatter.formatValueForProperty(Math.min(...memberValues), property);
-        }
-        else if (displayFunction === DynamicTextDisplayFunction.MAX) {
-            memberValues = memberValues.filter((e) => e !== null && e !== undefined);
-            text = formatter.formatValueForProperty(Math.max(...memberValues), property);
+        else if (displayFunction === DynamicTextDisplayFunction.MIN ||
+            displayFunction === DynamicTextDisplayFunction.MAX) {
+            const present = memberValues
+                .filter((e) => e !== null && e !== undefined && e !== '')
+                .map(Number)
+                .filter((e) => !Number.isNaN(e));
+            if (!present.length) {
+                return '';
+            }
+            const extreme = displayFunction === DynamicTextDisplayFunction.MIN ? Math.min(...present) : Math.max(...present);
+            text = formatter.formatValueForProperty(extreme, property);
         }
         return text;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contrail/documents",
-  "version": "1.20.0",
+  "version": "1.21.0-alpha.0c990fd",
   "description": "Documents library for contrail platform",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",