@contrail/documents 1.3.11 → 1.3.12

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

@@ -1,6 +1,6 @@
 import { ComponentDefinition } from './components/components';
 import { DocumentElement } from './types/document-element';
-import { PositionDefinition } from './types';
+import { LineDefinition, PositionDefinition } from './types';
 export declare class DocumentElementFactory {
     static initNewElement(type: string): DocumentElement;
     static createTextElement(text: string, options?: DocumentElement): DocumentElement;
@@ -16,4 +16,14 @@ export declare class DocumentElementFactory {
         newElements: DocumentElement[];
     };
     static isMask(element: DocumentElement): boolean;
+    static getBoundingClientRect(documentElement: DocumentElement, startElement?: DocumentElement, endElement?: DocumentElement): {
+        x: any;
+        y: any;
+        width: any;
+        height: any;
+    };
+    private static getPosition;
+    private static getSize;
+    private static getComponentSize;
+    static getLineDefinition(documentElement: DocumentElement, startElement?: DocumentElement, endElement?: DocumentElement): LineDefinition;
 }

package/lib/document-element-factory.js

@@ -7,6 +7,7 @@ const components_1 = require("./components/components");
 const document_element_property_binding_handler_1 = require("./document-element-property-binding-handler");
 const document_table_1 = require("@contrail/document-table");
 const document_element_constants_1 = require("./document-element-constants");
+const callout_1 = require("./util/callout/callout");
 class DocumentElementFactory {
     static initNewElement(type) {
         const element = {
@@ -203,5 +204,120 @@ class DocumentElementFactory {
         var _a;
         return ['rectangle', 'circle'].indexOf(element === null || element === void 0 ? void 0 : element.type) !== -1 && ((_a = element === null || element === void 0 ? void 0 : element.elementIds) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
+    static getBoundingClientRect(documentElement, startElement, endElement) {
+        const { x, y } = this.getPosition(documentElement, startElement, endElement);
+        const { width, height } = this.getSize(documentElement, startElement, endElement);
+        return {
+            x,
+            y,
+            width,
+            height,
+        };
+    }
+    static getPosition(documentElement, startElement, endElement) {
+        var _a, _b;
+        if (documentElement.type === 'line' || documentElement.type === 'callout') {
+            const lineDefinition = this.getLineDefinition(documentElement, startElement, endElement);
+            if (!lineDefinition) {
+                return { x: 0, y: 0 };
+            }
+            return {
+                x: Math.min(lineDefinition.x1, lineDefinition.x2),
+                y: Math.min(lineDefinition.y1, lineDefinition.y2),
+            };
+        }
+        return {
+            x: documentElement.position.x -
+                (documentElement.type === 'component' && ((_a = documentElement === null || documentElement === void 0 ? void 0 : documentElement.modelBindings) === null || _a === void 0 ? void 0 : _a.item) ? 8 : 0),
+            y: documentElement.position.y -
+                (documentElement.type === 'component' && ((_b = documentElement === null || documentElement === void 0 ? void 0 : documentElement.modelBindings) === null || _b === void 0 ? void 0 : _b.item) ? 18 : 0),
+        };
+    }
+    static getSize(documentElement, startElement, endElement) {
+        if (documentElement.type === 'line' || documentElement.type === 'callout') {
+            const lineDefinition = this.getLineDefinition(documentElement, startElement, endElement);
+            if (!lineDefinition) {
+                return { width: 0, height: 0 };
+            }
+            return {
+                width: Math.abs(lineDefinition.x1 - lineDefinition.x2),
+                height: Math.abs(lineDefinition.y1 - lineDefinition.y2),
+            };
+        }
+        return documentElement.type === 'component' ? this.getComponentSize(documentElement) : documentElement.size;
+    }
+    static getComponentSize(documentElement) {
+        var _a, _b, _c, _d, _e, _f;
+        let width = 0, height = 0, lastY = null;
+        for (let i = 0; i < ((_a = documentElement === null || documentElement === void 0 ? void 0 : documentElement.elements) === null || _a === void 0 ? void 0 : _a.length); i++) {
+            const element = documentElement.elements[i];
+            if (element.type !== 'text') {
+                width = Math.max(width, (((_b = element === null || element === void 0 ? void 0 : element.position) === null || _b === void 0 ? void 0 : _b.x) || 0) + element.size.width);
+            }
+            const renderedHeight = (_c = element.size) === null || _c === void 0 ? void 0 : _c.height;
+            const y = lastY === null ? ((_d = element === null || element === void 0 ? void 0 : element.position) === null || _d === void 0 ? void 0 : _d.y) || 0 : lastY;
+            height = Math.max(height, y + renderedHeight);
+            if (element.type === 'text' || lastY != null) {
+                lastY = y + renderedHeight;
+            }
+        }
+        return {
+            width: width + (((_e = documentElement === null || documentElement === void 0 ? void 0 : documentElement.modelBindings) === null || _e === void 0 ? void 0 : _e.item) ? 8 + 8 : 0),
+            height: height + (((_f = documentElement === null || documentElement === void 0 ? void 0 : documentElement.modelBindings) === null || _f === void 0 ? void 0 : _f.item) ? 18 + 8 : 0),
+        };
+    }
+    static getLineDefinition(documentElement, startElement, endElement) {
+        var _a, _b;
+        if (documentElement.type === 'line')
+            return documentElement.lineDefinition;
+        if (!documentElement.start || !documentElement.end)
+            return null;
+        if (!((_a = documentElement === null || documentElement === void 0 ? void 0 : documentElement.start) === null || _a === void 0 ? void 0 : _a.position))
+            return null;
+        let x1, y1, x2, y2;
+        if (documentElement.start.id) {
+            const start = startElement;
+            if (!start || !start.size || !start.position)
+                return null;
+            const { width, height } = start.size;
+            const { x, y } = start.position;
+            x1 = x + (documentElement.start.position.x * width) / 100;
+            y1 = y + (documentElement.start.position.y * height) / 100;
+        }
+        else {
+            x1 = documentElement.start.position.x;
+            y1 = documentElement.start.position.y;
+        }
+        if (documentElement.end.id) {
+            const end = endElement;
+            if (!end)
+                return null;
+            const { width, height } = end.size;
+            const { x, y } = end.position;
+            let location = (_b = documentElement.end.location) !== null && _b !== void 0 ? _b : 'auto';
+            if (location === 'auto') {
+                location = callout_1.Callout.getCalloutLocation({
+                    x1,
+                    y1,
+                    x2: x + width * 0.5,
+                    y2: y + height * 0.5,
+                });
+            }
+            const lineEnd = callout_1.Callout.getCalloutLineEndPosition(location, { x, y }, { width, height });
+            x2 = lineEnd.x;
+            y2 = lineEnd.y;
+        }
+        else {
+            x2 = documentElement.end.position.x;
+            y2 = documentElement.end.position.y;
+        }
+        const line = {
+            x1,
+            y1,
+            x2,
+            y2,
+        };
+        return line;
+    }
 }
 exports.DocumentElementFactory = DocumentElementFactory;

package/lib/document-frame.service.d.ts

@@ -0,0 +1,20 @@
+import { DocumentElement, Document, CoordinateBox } from './types';
+export interface DocumentFrame {
+    id: string;
+    box: CoordinateBox;
+    index: number;
+    element: DocumentElement;
+    elements: Array<{
+        element: DocumentElement;
+        index: number;
+    }>;
+}
+export interface DocumentFrameGenerateOptions {
+    includeHidden?: boolean;
+    selectedIds?: string[];
+    relativePosition?: boolean;
+}
+export declare class DocumentFrameService {
+    static generateFrames(document: Document, documentFrameGenerationOptions?: DocumentFrameGenerateOptions): Array<Document>;
+    private static isInBox;
+}

package/lib/document-frame.service.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentFrameService = void 0;
+const document_table_1 = require("@contrail/document-table");
+const document_element_factory_1 = require("./document-element-factory");
+class DocumentFrameService {
+    static generateFrames(document, documentFrameGenerationOptions = {}) {
+        var _a, _b, _c, _d, _e, _f;
+        const options = Object.assign(documentFrameGenerationOptions, {
+            includeHidden: true,
+            selectedIds: [],
+            relativePosition: false,
+        });
+        const includeSelected = ((_a = options.selectedIds) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const frames = new Map();
+        const elementsMap = new Map((_b = document === null || document === void 0 ? void 0 : document.elements) === null || _b === void 0 ? void 0 : _b.map((element) => [element.id, element]));
+        for (let i = 0; i < ((_c = document === null || document === void 0 ? void 0 : document.elements) === null || _c === void 0 ? void 0 : _c.length); i++) {
+            const documentElement = document.elements[i];
+            if (['row', 'column', 'cell'].indexOf(documentElement.type) !== -1)
+                continue;
+            if (documentElement.type === 'frame') {
+                if (!options.includeHidden && (documentElement === null || documentElement === void 0 ? void 0 : documentElement.isHidden))
+                    continue;
+                if (!includeSelected || ((_d = options.selectedIds) === null || _d === void 0 ? void 0 : _d.includes(documentElement.id))) {
+                    frames.set(documentElement.id, {
+                        id: documentElement.id,
+                        index: i,
+                        box: {
+                            x: documentElement.position.x,
+                            y: documentElement.position.y,
+                            width: documentElement.size.width,
+                            height: documentElement.size.height,
+                            left: documentElement.position.x,
+                            right: documentElement.position.x + documentElement.size.width,
+                            top: documentElement.position.y,
+                            bottom: documentElement.position.y + documentElement.size.height,
+                        },
+                        element: documentElement,
+                        elements: [],
+                    });
+                }
+            }
+            else {
+                if ((frames === null || frames === void 0 ? void 0 : frames.size) !== 0) {
+                    const startElement = documentElement.type === 'callout' &&
+                        ((_e = documentElement === null || documentElement === void 0 ? void 0 : documentElement.start) === null || _e === void 0 ? void 0 : _e.id) &&
+                        elementsMap.get(documentElement.start.id);
+                    const endElement = documentElement.type === 'callout' && ((_f = documentElement === null || documentElement === void 0 ? void 0 : documentElement.end) === null || _f === void 0 ? void 0 : _f.id) && elementsMap.get(documentElement.end.id);
+                    const { x, y, width, height } = document_element_factory_1.DocumentElementFactory.getBoundingClientRect(documentElement, startElement, endElement);
+                    const elementBox = {
+                        x,
+                        y,
+                        width,
+                        height,
+                        left: x + width / 2,
+                        right: x + width / 2,
+                        top: y + height / 2,
+                        bottom: y + height / 2,
+                    };
+                    const overlappedFrame = ([...frames.values()].filter((frame) => {
+                        return i > frame.index && this.isInBox(frame.box, elementBox);
+                    }) || []).pop();
+                    if (overlappedFrame) {
+                        const frame = frames.get(overlappedFrame.id);
+                        frames.set(overlappedFrame.id, Object.assign(Object.assign({}, frame), { elements: [
+                                ...frame.elements,
+                                {
+                                    element: documentElement,
+                                    index: i,
+                                },
+                            ] }));
+                        if (documentElement.type === 'table') {
+                            const childElements = document_table_1.TableService.getTableChildElements(documentElement.id, document.elements);
+                            const frame = frames.get(overlappedFrame.id);
+                            frames.set(overlappedFrame.id, Object.assign(Object.assign({}, frame), { elements: [
+                                    ...frame.elements,
+                                    ...childElements.map((e) => ({
+                                        element: e,
+                                        index: i,
+                                    })),
+                                ] }));
+                        }
+                    }
+                }
+            }
+        }
+        if ((frames === null || frames === void 0 ? void 0 : frames.size) === 0) {
+            return [];
+        }
+        const documentFrames = [];
+        frames.forEach((frame) => {
+            var _a, _b, _c;
+            const framePosition = frame.element.position;
+            const position = (options === null || options === void 0 ? void 0 : options.relativePosition) ? { x: 0, y: 0 } : framePosition;
+            if (options.relativePosition) {
+                for (let i = 0; i < ((_a = frame === null || frame === void 0 ? void 0 : frame.elements) === null || _a === void 0 ? void 0 : _a.length); i++) {
+                    const element = frame.elements[i].element;
+                    if (element.type === 'line') {
+                        element.lineDefinition.x1 = element.lineDefinition.x1 - framePosition.x;
+                        element.lineDefinition.y1 = element.lineDefinition.y1 - framePosition.y;
+                        element.lineDefinition.x2 = element.lineDefinition.x2 - framePosition.x;
+                        element.lineDefinition.y2 = element.lineDefinition.y2 - framePosition.y;
+                    }
+                    else {
+                        element.position = {
+                            x: element.position.x - framePosition.x,
+                            y: element.position.y - framePosition.y,
+                        };
+                    }
+                    if (element.type === 'callout' || element.type === 'line') {
+                        if (((_b = element.points) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                            element.points = element.points.map(([x, y]) => [x - framePosition.x, y - framePosition.y]);
+                        }
+                    }
+                }
+            }
+            documentFrames.push({
+                name: frame.element.name,
+                background: [frame.element],
+                elements: (_c = frame.elements) === null || _c === void 0 ? void 0 : _c.map((frameElement) => frameElement.element),
+                size: frame.element.size,
+                position,
+            });
+        });
+        return documentFrames;
+    }
+    static isInBox(box, elementBox) {
+        return !(box.bottom < elementBox.bottom ||
+            box.top > elementBox.top ||
+            box.right < elementBox.right ||
+            box.left > elementBox.left);
+    }
+}
+exports.DocumentFrameService = DocumentFrameService;

package/lib/types/common.d.ts

@@ -88,3 +88,13 @@ export interface CropDefinition {
     widthPercent?: number;
     heightPercent?: number;
 }
+export interface CoordinateBox {
+    x: number;
+    y: number;
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+    width: number;
+    height: number;
+}

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

@@ -18,7 +18,6 @@ export interface DocumentElement extends Document {
     specifiedId?: string;
     documentId?: string;
     type?: string;
-    position?: PositionDefinition;
     rotate?: RotationDefinition;
     scale?: ScaleTransformation;
     text?: string;

package/lib/types/document.d.ts

@@ -9,6 +9,7 @@ export interface Document {
     name?: string;
     elements?: Array<DocumentElement>;
     size?: SizeDefinition;
+    position?: PositionDefinition;
     style?: StyleDefinition;
     model?: any;
     modelBindings?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contrail/documents",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "Documents library for contrail platform",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",