@contrail/documents 1.20.0-alpha.5014a52 → 1.20.0-alpha.d734088

package/CHANGELOG.md

@@ -5,13 +5,85 @@ 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.20.0] - 2026-09-10
+## [1.20.0] - 2026-09-20
+
+### 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, described by a `ContainerKind` carrying `elementType`, `nests` and `layer`. An element
+  belongs to the container whose box covers its measured centre and which is drawn below it.
+  Nesting gives a path with one container per depth, the later-drawn one winning where two cross.
+  A container is only ever content of a kind layered behind it, so a frame belongs to a section and
+  a section never to a frame. Shapes wider and taller than the container, and groups holding it,
+  are excluded.
+- `SECTION_ELEMENT_TYPE`, `FRAME_ELEMENT_TYPE` and `SHAPE_ELEMENT_TYPES` in
+  `document-element-constants`, so the rule above has one definition rather than one per app.
+- `DocumentElementFactory.getBoundingClientRectScaled` — the space an element covers on the canvas,
+  with `scale` applied. `getBoundingClientRect` keeps returning the element's own box before scale,
+  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: whether the binding's value comes from the container rather than a type
+  property. The old name still works and delegates to the new one.
+
+### Fixed
+
+- A dynamic text is now anchored at its position rather than its centre when deciding which
+  container it belongs to, and `DynamicTextUtil.isDynamicText` is the shared test for one. Its size
+  comes from the value it resolves to, and that value depends on the container, so letting its width
+  feed membership meant its own text could choose its container: near an edge the two answers
+  disagreed indefinitely, flipping between a value and "Move to a frame" on every read. Everything
+  else still resolves on its centre.
+- A dynamic text is also exempt from the oversized-shape exclusion, which keeps a shape wider and
+  taller than a container off it. That rule reads size too, so a dynamic text larger than its frame
+  in both directions had two self-consistent answers and kept whichever it started from. The rule
+  exists to keep a backdrop shape off a frame it covers, which is not what a dynamic text is doing.
+- `min` and `max` rendered an infinity sign when every member value was empty. The early return
+  checked the list length before the empty values were filtered out, so `Math.min` of nothing
+  reached the formatter. Both now fall through to `n/a`.
+- `DynamicTextUtil.calculateSize` threw on an element that reached it without a `size`, which on
+  the server failed the read for the whole document. It now measures from a zero size instead.
+
+### Changed
+
+- Container membership measures a scaled element from its scaled box, through the new
+  `getBoundingClientRectScaled` above. A scaled element previously measured at its unscaled size
+  and could resolve to the wrong container.
+
+## [2.2.1] - 2026-09-15
+
+### Changed
+
+- The DESIGN-150 annotation-row collapse is reverted, to go out in a later release alongside the rest of the change. `calculateAnnotationHeight` returns its flat `fontSize + ANNOTATION_PADDING_Y` minimum again whether or not the row draws anything, and `getComponentSize` reserves a flat 18px row in every item card's height.
+
+### Removed
+
+- `ItemComponentService.isAnnotationRowEmpty` and `ItemComponentService.getAnnotationRowHeight`, both added in 2.2.0, and the optional `annotations` parameter they were reached through on `DocumentElementFactory.getBoundingClientRect` and `getSize`. Removed under a patch because 2.2.0 published hours earlier and nothing had consumed them: the canvas renderer mirrors the predicate privately rather than importing it, and every `contrail-apps` app pins this package on its 1.x range.
+
+## [2.2.0] - 2026-09-15
+
+### Added
+
+- `ItemComponentService.isAnnotationRowEmpty(annotationElement, annotations)` — whether an item card's annotation row will render nothing, because the row is hidden or the item has no `category === 'property'` annotations. The single predicate behind the reservation, so the layout service and the canvas renderers cannot drift apart on the question. A missing row element is not treated as hidden: renderers supply a default row for item components that have none stored, so only the annotation data decides there.
+- `ItemComponentService.getAnnotationRowHeight(annotationElement, annotations, width)` — the row's reserved height, wrapping onto further rows when the badges do not fit `width`, and `0` when the row is empty. Every creation path must size the row through here so a card laid out by the Item Chooser and one laid out by board generation agree.
+
+### Fixed
+
+- `updateSizeAndPosition` no longer reserves space above the thumbnail for an annotation row that renders nothing. `calculateAnnotationHeight` returned a flat `fontSize + ANNOTATION_PADDING_Y` minimum even when the row was hidden or the item had no annotations, pushing the thumbnail down ~8px on every such card (DESIGN-150). It now returns `0` in those cases and the thumbnail sits at the card origin. Cards whose row does show a badge are unchanged.
+
+## [1.19.0] - 2026-09-11
 
 ### Added
 
 - `MaskDefinition` and `MaskShapeKey` on `DocumentElement` — `maskDefinition` records that an image is masked into one of nine preset shapes, with an optional clockwise `rotation`. Its presence changes how `cropDefinition`'s percents are read: element-space (the mask window within the element) instead of the source-image crop they otherwise mean. Anything deriving image geometry must check `hasShapeMask` before treating a crop as a source crop — reading one as the other samples the wrong region of the bitmap.
 - `@contrail/documents/util/mask` — the shared mask model, exported from the package root: the nine shapes as renderer-agnostic cubic path segments (`getMaskShapeSegments`), `rotatedRectAABB` for the bounds a tilted shape actually occupies, `rotatePoint`, and the mask-rect/percent conversions, so exporters and the canvas cannot drift apart. Segments are cubic-only because cubics survive affine maps exactly, letting each consumer render them however it draws — `Path2D` in a browser, an SVG composite in a service.
 - `getMaskBakeGeometry`, `getMaskBakeLayout` and `maskShapeSegmentsToSvgPath` — the bake inputs a consumer needs to flatten a mask into a bitmap, and an SVG serializer for renderers that go through SVG rather than a canvas path. The layout scales to the source bitmap's own resolution rather than the element's on-board size, so a shrunk image does not bake at reduced detail, and re-bases a rotated mask onto its own bounding box. Only the rasterizer stays per-consumer: `Path2D` in a browser, an SVG composite in a service.
+- `hasShapeMask` is a type guard and the complete discriminator: it requires a shape key the renderer knows and all four crop percents, so an origin of `0` passes while a missing origin (previously multiplied into `NaN` by `cropDefinitionToMaskRect`) and an unknown shape (previously thrown on by `getMaskShapeSegments`) are rejected up front. The true branch narrows the percents to numbers.
 
 ## [1.18.0] - 2026-09-10
 

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

@@ -0,0 +1,10 @@
+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;
+    layer: number;
+}
+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, layer: 0 };
+exports.FRAME_KIND = { elementType: document_element_constants_1.FRAME_ELEMENT_TYPE, nests: false, layer: 1 };
+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[]>;
+    });
+    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[];
+    maxDepth(elementType: ContainerElementType): number;
+    private containersOfType;
+    private resolveAll;
+    private containerPath;
+}

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

@@ -0,0 +1,63 @@
+"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;
+    }
+    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) {
+        const covering = this.containersOfType(elementType).filter((container) => (0, document_container_1.containsPoint)(container.box, point));
+        return (0, document_container_1.topmostPerDepth)(covering).map((container) => container.id);
+    }
+    maxDepth(elementType) {
+        return this.containersOfType(elementType).reduce((max, container) => Math.max(max, container.depth + 1), 0);
+    }
+    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,23 @@
+import { CoordinateBox, DocumentElement, PositionDefinition } from '../types';
+import { ContainerKind } from './container-kind';
+export interface DocumentContainer {
+    id: string;
+    kind: ContainerKind;
+    name: string;
+    documentElement: DocumentElement;
+    box: CoordinateBox;
+    depth: number;
+    drawOrder: number;
+}
+export interface MeasuredDocumentElement {
+    documentElement: DocumentElement;
+    box: CoordinateBox | null;
+    drawOrder: number;
+}
+export declare function toCoordinateBox(x: number, y: number, width: number, height: number): CoordinateBox;
+export declare function centerOf(box: CoordinateBox): PositionDefinition;
+export declare function anchorOf(documentElement: DocumentElement, box: CoordinateBox): PositionDefinition;
+export declare function containsPoint(box: CoordinateBox, point: PositionDefinition): boolean;
+export declare function encloses(outer: CoordinateBox, inner: CoordinateBox): boolean;
+export declare function isWiderAndTallerThan(box: CoordinateBox, other: CoordinateBox): boolean;
+export declare function topmostPerDepth(containers: DocumentContainer[]): DocumentContainer[];

package/lib/containers/document-container.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCoordinateBox = toCoordinateBox;
+exports.centerOf = centerOf;
+exports.anchorOf = anchorOf;
+exports.containsPoint = containsPoint;
+exports.encloses = encloses;
+exports.isWiderAndTallerThan = isWiderAndTallerThan;
+exports.topmostPerDepth = topmostPerDepth;
+const dynamic_text_util_1 = require("../util/dynamic-text/dynamic-text-util");
+function toCoordinateBox(x, y, width, height) {
+    return { x, y, width, height, left: x, right: x + width, top: y, bottom: y + height };
+}
+function centerOf(box) {
+    return { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+}
+function anchorOf(documentElement, box) {
+    return dynamic_text_util_1.DynamicTextUtil.isDynamicText(documentElement) ? { x: box.left, y: box.top } : centerOf(box);
+}
+function containsPoint(box, point) {
+    return point.x >= box.left && point.x <= box.right && point.y >= box.top && point.y <= box.bottom;
+}
+function 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;
+}
+function isWiderAndTallerThan(box, other) {
+    return box.width > other.width && box.height > other.height;
+}
+function topmostPerDepth(containers) {
+    const byDepth = [];
+    for (const container of containers) {
+        const existing = byDepth[container.depth];
+        if (!existing || container.drawOrder > existing.drawOrder) {
+            byDepth[container.depth] = container;
+        }
+    }
+    return byDepth.filter(Boolean);
+}

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

@@ -0,0 +1,14 @@
+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 buildNesting;
+    private static resolveContainerPath;
+    private static resolveInnermostOnTop;
+    private static toContainerPath;
+    private static candidateContainers;
+}

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

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentContainerService = void 0;
+const document_element_factory_1 = require("../document-element-factory");
+const dynamic_text_util_1 = require("../util/dynamic-text/dynamic-text-util");
+const document_element_constants_1 = require("../document-element-constants");
+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) {
+        const measuredDocumentElements = this.measureDocumentElements(documentElements !== null && documentElements !== void 0 ? documentElements : []);
+        const nestingByElementType = new Map(kinds.map((kind) => [kind.elementType, this.buildNesting(measuredDocumentElements, kind)]));
+        const containersById = new Map();
+        const containerIdsByElementType = new Map();
+        nestingByElementType.forEach((nesting, elementType) => {
+            containerIdsByElementType.set(elementType, nesting.containers.map((container) => container.id));
+            nesting.containers.forEach((container) => containersById.set(container.id, container));
+        });
+        const containerPathsByDocumentElementId = new Map();
+        const memberIdsByContainerId = new Map();
+        for (const measured of measuredDocumentElements) {
+            const documentElementId = measured.documentElement.id;
+            const pathsByElementType = new Map();
+            for (const kind of kinds) {
+                const path = this.resolveContainerPath(measured, kind, kinds, nestingByElementType.get(kind.elementType));
+                pathsByElementType.set(kind.elementType, path);
+                for (const containerId of path) {
+                    const members = memberIdsByContainerId.get(containerId);
+                    if (members) {
+                        members.push(documentElementId);
+                    }
+                    else {
+                        memberIdsByContainerId.set(containerId, [documentElementId]);
+                    }
+                }
+            }
+            containerPathsByDocumentElementId.set(documentElementId, pathsByElementType);
+        }
+        return new document_container_index_1.DocumentContainerIndex({
+            documentElementsById: new Map(measuredDocumentElements.map((measured) => [measured.documentElement.id, measured.documentElement])),
+            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) {
+        const documentElementsById = new Map(documentElements.map((documentElement) => [documentElement.id, documentElement]));
+        return documentElements.map((documentElement, drawOrder) => ({
+            documentElement,
+            drawOrder,
+            box: this.measure(documentElement, documentElementsById),
+        }));
+    }
+    static measure(documentElement, documentElementsById) {
+        var _a, _b;
+        if (!(documentElement === null || documentElement === void 0 ? void 0 : documentElement.position)) {
+            return null;
+        }
+        try {
+            const start = ((_a = documentElement.start) === null || _a === void 0 ? void 0 : _a.id) ? documentElementsById.get(documentElement.start.id) : undefined;
+            const end = ((_b = 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);
+            return (0, document_container_1.toCoordinateBox)(x, y, width, height);
+        }
+        catch (_c) {
+            return null;
+        }
+    }
+    static buildNesting(measuredDocumentElements, kind) {
+        const containers = measuredDocumentElements
+            .filter((measured) => measured.documentElement.type === kind.elementType && measured.box)
+            .map((measured) => ({
+            id: measured.documentElement.id,
+            kind,
+            name: measured.documentElement.name,
+            documentElement: measured.documentElement,
+            box: measured.box,
+            depth: 0,
+            drawOrder: measured.drawOrder,
+        }));
+        const ancestorsById = new Map();
+        for (const container of containers) {
+            const ancestors = kind.nests
+                ? containers.filter((other) => other !== container && (0, document_container_1.encloses)(other.box, container.box))
+                : [];
+            ancestorsById.set(container.id, ancestors);
+            container.depth = ancestors.length;
+        }
+        return { containers, ancestorsById };
+    }
+    static resolveContainerPath(measured, kind, kinds, nesting) {
+        var _a, _b;
+        if (!(nesting === null || nesting === void 0 ? void 0 : nesting.containers.length) || !measured.box) {
+            return [];
+        }
+        const ownKind = kinds.find((candidate) => candidate.elementType === measured.documentElement.type);
+        if (ownKind) {
+            if (ownKind.elementType === kind.elementType) {
+                return kind.nests ? this.toContainerPath((_a = nesting.ancestorsById.get(measured.documentElement.id)) !== null && _a !== void 0 ? _a : []) : [];
+            }
+            if (kind.layer > ownKind.layer) {
+                return [];
+            }
+        }
+        const candidates = this.candidateContainers(measured, nesting.containers);
+        if (!candidates.length) {
+            return [];
+        }
+        const innermostOnTop = this.resolveInnermostOnTop(candidates, nesting);
+        const candidateIds = new Set(candidates.map((container) => container.id));
+        const ancestors = ((_b = nesting.ancestorsById.get(innermostOnTop.id)) !== null && _b !== void 0 ? _b : []).filter((container) => candidateIds.has(container.id));
+        return this.toContainerPath([...ancestors, innermostOnTop]);
+    }
+    static resolveInnermostOnTop(candidates, nesting) {
+        const enclosingIds = new Set(candidates.flatMap((container) => { var _a; return (_a = nesting.ancestorsById.get(container.id)) !== null && _a !== void 0 ? _a : []; }).map((ancestor) => ancestor.id));
+        return candidates
+            .filter((container) => !enclosingIds.has(container.id))
+            .reduce((topmost, container) => (container.drawOrder > topmost.drawOrder ? container : topmost));
+    }
+    static toContainerPath(containers) {
+        return (0, document_container_1.topmostPerDepth)(containers).map((container) => container.id);
+    }
+    static candidateContainers(measured, containers) {
+        const anchor = (0, document_container_1.anchorOf)(measured.documentElement, measured.box);
+        const isShape = document_element_constants_1.SHAPE_ELEMENT_TYPES.includes(measured.documentElement.type) &&
+            !dynamic_text_util_1.DynamicTextUtil.isDynamicText(measured.documentElement);
+        return containers.filter((container) => {
+            var _a;
+            if (container.id === measured.documentElement.id || measured.drawOrder <= container.drawOrder) {
+                return false;
+            }
+            if (!(0, document_container_1.containsPoint)(container.box, anchor)) {
+                return false;
+            }
+            if (isShape && (0, document_container_1.isWiderAndTallerThan)(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

@@ -48,8 +48,9 @@ export declare const HARD_CODED_TEXT: {
     'section.itemOptionCount': string;
     'section.colorCount': string;
 };
-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 getTextFromFrameMemberValues(displayFunction: string, property: any, memberValues: any[]): string;

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

@@ -1,7 +1,6 @@
 "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.isContainerBinding = isContainerBinding;
 const types_1 = require("@contrail/types");
 const util_1 = require("@contrail/util");
 const document_util_1 = require("@contrail/document-util");
@@ -51,14 +50,19 @@ 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);
-}
 class DynamicTextUtil {
+    static isDynamicText(documentElement) {
+        return ((documentElement === null || documentElement === void 0 ? void 0 : documentElement.type) === 'text' &&
+            !!documentElement.propertyBindings &&
+            !!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) {
@@ -150,12 +154,12 @@ 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;
+        let size = (_a = dynamicTextElement.size) !== null && _a !== void 0 ? _a : { width: 0, height: 0 };
+        const fontFamily = (_b = document_util_1.DocumentStyleUtil.getFirstFontFamily(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text)) !== null && _b !== void 0 ? _b : document_util_1.DEFAULT_TEXT_FONT_FAMILY;
+        const fontSize = (_e = (dynamicTextElement.isTextTool
+            ? (_d = (_c = dynamicTextElement.style) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size
+            : document_util_1.DocumentStyleUtil.getFirstFontSize(dynamicTextElement === null || dynamicTextElement === void 0 ? void 0 : dynamicTextElement.text, true))) !== null && _e !== void 0 ? _e : 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);
@@ -169,7 +173,7 @@ class DynamicTextUtil {
             italic,
         };
         if (!dynamicTextElement.isTextTool) {
-            measureTextSettings.width = dynamicTextElement.size.width - padding * 2;
+            measureTextSettings.width = size.width - padding * 2;
         }
         try {
             const dimensions = document_util_1.DocumentTextUtil.measureText(text, measureTextSettings);
@@ -212,13 +216,14 @@ 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);
+            if (!present.length) {
+                return '';
+            }
+            const extreme = displayFunction === DynamicTextDisplayFunction.MIN ? Math.min(...present) : Math.max(...present);
+            text = formatter.formatValueForProperty(extreme, property);
         }
         return text;
     }

package/lib/util/mask/shape-mask-element.d.ts

@@ -1,6 +1,13 @@
-import { CropDefinition, DocumentElement, SizeDefinition } from '../../types';
+import { CropDefinition, DocumentElement, MaskDefinition, SizeDefinition } from '../../types';
 import { MaskRect, MaskShapeKey } from './mask-shape-geometry';
-export declare function hasShapeMask(element: DocumentElement): boolean;
+export type MaskCropDefinition = CropDefinition & Required<Pick<CropDefinition, 'x1Percent' | 'y1Percent' | 'widthPercent' | 'heightPercent'>>;
+export type ShapeMaskedElement = DocumentElement & {
+    maskDefinition: MaskDefinition & {
+        shape: MaskShapeKey;
+    };
+    cropDefinition: MaskCropDefinition;
+};
+export declare function hasShapeMask(element: DocumentElement): element is ShapeMaskedElement;
 export declare function getShapeMaskKey(element: DocumentElement): MaskShapeKey | null;
 export declare function getShapeMaskRotation(element: DocumentElement): number;
 export declare function normalizeMaskRotation(rotation: number): number;

package/lib/util/mask/shape-mask-element.js

@@ -9,10 +9,19 @@ exports.isShapeMaskable = isShapeMaskable;
 exports.getDefaultShapeMaskCrop = getDefaultShapeMaskCrop;
 exports.cropDefinitionToMaskRect = cropDefinitionToMaskRect;
 exports.maskRectToCropDefinition = maskRectToCropDefinition;
+const mask_shape_geometry_1 = require("./mask-shape-geometry");
 const DEFAULT_MASK_FRACTION = 0.72;
 function hasShapeMask(element) {
-    var _a, _b;
-    return (!!getShapeMaskKey(element) && !!((_a = element === null || element === void 0 ? void 0 : element.cropDefinition) === null || _a === void 0 ? void 0 : _a.widthPercent) && !!((_b = element === null || element === void 0 ? void 0 : element.cropDefinition) === null || _b === void 0 ? void 0 : _b.heightPercent));
+    var _a;
+    const shape = (_a = element === null || element === void 0 ? void 0 : element.maskDefinition) === null || _a === void 0 ? void 0 : _a.shape;
+    if (!shape || !mask_shape_geometry_1.MASK_SHAPE_KEYS.includes(shape)) {
+        return false;
+    }
+    const crop = element === null || element === void 0 ? void 0 : element.cropDefinition;
+    return (Number.isFinite(crop === null || crop === void 0 ? void 0 : crop.x1Percent) &&
+        Number.isFinite(crop === null || crop === void 0 ? void 0 : crop.y1Percent) &&
+        crop.widthPercent > 0 &&
+        crop.heightPercent > 0);
 }
 function getShapeMaskKey(element) {
     var _a, _b;

package/package.json

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