@contrail/documents 1.0.120 → 1.0.122

package/lib/components/components.d.ts

@@ -218,9 +218,6 @@ export declare const ITEM_VIEW_TEMPLATE_V3: {
         };
     })[];
 };
-export declare const COLOR_PADDING = 5;
-export declare const COLOR_FONT_SIZE = 8;
-export declare const COLOR_WIDTH = 140;
 export declare const COLOR_VIEW_TEMPLATE: {
     elements: ({
         type: string;

package/lib/components/components.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentRegistry = exports.PATTERN_VIEW = exports.COLOR_VIEW = exports.ITEM_VIEW_V3 = exports.ITEM_VIEW_V2 = exports.ITEM_VIEW = exports.PATTERN_VIEW_TEMPLATE = exports.COLOR_VIEW_TEMPLATE = exports.COLOR_WIDTH = exports.COLOR_FONT_SIZE = exports.COLOR_PADDING = exports.ITEM_VIEW_TEMPLATE_V3 = exports.ITEM_VIEW_TEMPLATE_V2 = exports.ITEM_VIEW_TEMPLATE = void 0;
+exports.ComponentRegistry = exports.PATTERN_VIEW = exports.COLOR_VIEW = exports.ITEM_VIEW_V3 = exports.ITEM_VIEW_V2 = exports.ITEM_VIEW = exports.PATTERN_VIEW_TEMPLATE = exports.COLOR_VIEW_TEMPLATE = exports.ITEM_VIEW_TEMPLATE_V3 = exports.ITEM_VIEW_TEMPLATE_V2 = exports.ITEM_VIEW_TEMPLATE = void 0;
+const document_element_constants_1 = require("../document-element-constants");
 const types_1 = require("../types");
 exports.ITEM_VIEW_TEMPLATE = {
     elements: [
@@ -114,17 +115,14 @@ exports.ITEM_VIEW_TEMPLATE_V3 = {
         },
     ],
 };
-exports.COLOR_PADDING = 5;
-exports.COLOR_FONT_SIZE = 8;
-exports.COLOR_WIDTH = 140;
 exports.COLOR_VIEW_TEMPLATE = {
     elements: [
         {
             type: 'rectangle',
             position: { x: 0, y: 0 },
             size: {
-                width: exports.COLOR_WIDTH + exports.COLOR_PADDING * 2,
-                height: exports.COLOR_WIDTH + exports.COLOR_FONT_SIZE + exports.COLOR_PADDING * 4,
+                width: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_PADDING * 2,
+                height: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_FONT_SIZE + document_element_constants_1.COLOR_PADDING * 4,
             },
             style: {
                 backgroundColor: '#FFFFFF',
@@ -137,8 +135,8 @@ exports.COLOR_VIEW_TEMPLATE = {
         },
         {
             type: 'rectangle',
-            position: { x: exports.COLOR_PADDING, y: exports.COLOR_PADDING },
-            size: { height: exports.COLOR_WIDTH, width: exports.COLOR_WIDTH },
+            position: { x: document_element_constants_1.COLOR_PADDING, y: document_element_constants_1.COLOR_PADDING },
+            size: { height: document_element_constants_1.COLOR_WIDTH, width: document_element_constants_1.COLOR_WIDTH },
             style: {
                 border: {
                     width: 0,
@@ -149,14 +147,14 @@ exports.COLOR_VIEW_TEMPLATE = {
         },
         {
             type: 'text',
-            position: { x: exports.COLOR_PADDING, y: exports.COLOR_WIDTH + exports.COLOR_PADDING * 2 },
+            position: { x: document_element_constants_1.COLOR_PADDING, y: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_PADDING * 2 },
             size: {
-                height: exports.COLOR_FONT_SIZE + exports.COLOR_PADDING,
-                width: exports.COLOR_WIDTH,
+                height: document_element_constants_1.COLOR_FONT_SIZE + document_element_constants_1.COLOR_PADDING,
+                width: document_element_constants_1.COLOR_WIDTH,
             },
             style: {
                 font: {
-                    size: exports.COLOR_FONT_SIZE,
+                    size: document_element_constants_1.COLOR_FONT_SIZE,
                 },
             },
             propertyBindings: { text: 'color.name' },
@@ -169,8 +167,8 @@ exports.PATTERN_VIEW_TEMPLATE = {
             type: 'rectangle',
             position: { x: 0, y: 0 },
             size: {
-                width: exports.COLOR_WIDTH + exports.COLOR_PADDING * 2,
-                height: exports.COLOR_WIDTH + exports.COLOR_FONT_SIZE + exports.COLOR_PADDING * 4,
+                width: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_PADDING * 2,
+                height: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_FONT_SIZE + document_element_constants_1.COLOR_PADDING * 4,
             },
             style: {
                 backgroundColor: '#FFFFFF',
@@ -183,21 +181,21 @@ exports.PATTERN_VIEW_TEMPLATE = {
         },
         {
             type: 'image',
-            position: { x: exports.COLOR_PADDING, y: exports.COLOR_PADDING },
-            size: { height: exports.COLOR_WIDTH, width: exports.COLOR_WIDTH },
+            position: { x: document_element_constants_1.COLOR_PADDING, y: document_element_constants_1.COLOR_PADDING },
+            size: { height: document_element_constants_1.COLOR_WIDTH, width: document_element_constants_1.COLOR_WIDTH },
             style: { background: { size: types_1.BackgroundSizeType.CONTAIN } },
             propertyBindings: { url: 'viewable.mediumViewableDownloadUrl' },
         },
         {
             type: 'text',
-            position: { x: exports.COLOR_PADDING, y: exports.COLOR_WIDTH + exports.COLOR_PADDING * 2 },
+            position: { x: document_element_constants_1.COLOR_PADDING, y: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_PADDING * 2 },
             size: {
-                height: exports.COLOR_FONT_SIZE + exports.COLOR_PADDING,
-                width: exports.COLOR_WIDTH,
+                height: document_element_constants_1.COLOR_FONT_SIZE + document_element_constants_1.COLOR_PADDING,
+                width: document_element_constants_1.COLOR_WIDTH,
             },
             style: {
                 font: {
-                    size: exports.COLOR_FONT_SIZE,
+                    size: document_element_constants_1.COLOR_FONT_SIZE,
                 },
             },
             propertyBindings: { text: 'color.name' },

package/lib/document-element-component-size-handler.d.ts

@@ -1,4 +1,10 @@
+import { SizeDefinition } from './types';
+import { DocumentElement } from './types/document-element';
 export declare class DocumentElementComponentSizeHandler {
-    static updateSizeAndPositionForPropertyElements(propertyElements: any[]): any;
+    static updateSizeAndPositionForPropertyElements(propertyElements: any[], componentElement: DocumentElement, annotatedElements?: any[]): any;
     private static getYMargin;
+    private static calculateAnnotationHeight;
+    static getColorRectangle(element: DocumentElement): DocumentElement;
+    static getColorContainer(element: DocumentElement): DocumentElement;
+    static updateSizeAndPositionForColorElements(elements: any, size?: SizeDefinition): any;
 }

package/lib/document-element-component-size-handler.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentElementComponentSizeHandler = void 0;
+const document_element_constants_1 = require("./document-element-constants");
 class DocumentElementComponentSizeHandler {
-    static updateSizeAndPositionForPropertyElements(propertyElements) {
+    static updateSizeAndPositionForPropertyElements(propertyElements, componentElement, annotatedElements = []) {
         const newElements = [];
         let lastYPosition = 0;
         let width = 200;
@@ -10,10 +11,15 @@ class DocumentElementComponentSizeHandler {
             return element.type === 'image';
         });
         if (imageElements.length > 0) {
-            width = imageElements[0].size.width;
+            if (imageElements[0].size) {
+                width = imageElements[0].size.width;
+            }
+            else {
+                imageElements[0].size = { width: 200, height: 200 };
+            }
         }
-        propertyElements.forEach((element) => {
-            var _a;
+        propertyElements.forEach((element, index) => {
+            var _a, _b;
             if (element.enabled === false) {
                 return;
             }
@@ -31,6 +37,23 @@ class DocumentElementComponentSizeHandler {
                 }
                 element.size.height = element.style.font.size + 6;
             }
+            else if (element.type === 'annotation') {
+                if (!((_b = element.style) === null || _b === void 0 ? void 0 : _b.font)) {
+                    element.style = Object.assign(Object.assign({}, element.style), { font: { size: document_element_constants_1.ANNOTATION_IMG_SIZE } });
+                }
+                if (index === 0) {
+                    element.position = {
+                        x: 0,
+                        y: -15,
+                    };
+                    lastYPosition = element.position.y;
+                }
+                const annotationHeight = this.calculateAnnotationHeight(element, componentElement, width, annotatedElements);
+                lastYPosition = lastYPosition + annotationHeight;
+                if (annotationHeight === 0 && index === 0) {
+                    lastYPosition = lastYPosition + document_element_constants_1.ANNOTATION_IMG_SIZE;
+                }
+            }
             element.size.width = width;
             newElements.push(element);
         });
@@ -51,5 +74,83 @@ class DocumentElementComponentSizeHandler {
         }
         return marginY;
     }
+    static calculateAnnotationHeight(element, componentElement, width, annotatedElements = []) {
+        var _a, _b;
+        const annotationSize = ((_b = (_a = element.style) === null || _a === void 0 ? void 0 : _a.font) === null || _b === void 0 ? void 0 : _b.size) || document_element_constants_1.ANNOTATION_IMG_SIZE;
+        let height = annotationSize + document_element_constants_1.ANNOTATION_PADDING_Y;
+        let xPos = 0;
+        const annotatedElement = annotatedElements.find((elem) => elem.id === componentElement.id);
+        if (!annotatedElement || element.isHidden) {
+            return height;
+        }
+        const annotations = annotatedElement.annotations.filter((annotation) => annotation.category === 'property');
+        if (annotations.length > 0) {
+            let count = 0;
+            annotations === null || annotations === void 0 ? void 0 : annotations.forEach((annotation) => {
+                if ((count + 1) * annotationSize * 1.25 > width) {
+                    count = 0;
+                    xPos = -width * 0.5;
+                    height = height + annotationSize + document_element_constants_1.ANNOTATION_PADDING_Y;
+                }
+                xPos = xPos + annotationSize * 1.25;
+                count++;
+            });
+        }
+        return height;
+    }
+    static getColorRectangle(element) {
+        var _a;
+        return (_a = element.elements) === null || _a === void 0 ? void 0 : _a.find((e) => ['rectangle', 'image'].indexOf(e.type) !== -1 && e.propertyBindings);
+    }
+    static getColorContainer(element) {
+        var _a;
+        return (_a = element.elements) === null || _a === void 0 ? void 0 : _a.find((e) => ['rectangle'].indexOf(e.type) !== -1 && !e.propertyBindings);
+    }
+    static updateSizeAndPositionForColorElements(elements, size) {
+        var _a, _b, _c, _d;
+        const padding = document_element_constants_1.COLOR_PADDING;
+        const container = this.getColorContainer(elements);
+        const colorRect = this.getColorRectangle(elements);
+        if (!container || !colorRect)
+            throw new Error('Invalid color element');
+        const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : (_b = colorRect === null || colorRect === void 0 ? void 0 : colorRect.size) === null || _b === void 0 ? void 0 : _b.width;
+        const height = (_c = size === null || size === void 0 ? void 0 : size.height) !== null && _c !== void 0 ? _c : (_d = colorRect === null || colorRect === void 0 ? void 0 : colorRect.size) === null || _d === void 0 ? void 0 : _d.height;
+        const newElements = [];
+        let lastYPosition = 0;
+        elements.forEach((element) => {
+            var _a;
+            if ((element === null || element === void 0 ? void 0 : element.enabled) === false) {
+                return;
+            }
+            element.position = { x: padding, y: lastYPosition };
+            if (element.type === 'rectangle' || element.type === 'image') {
+                if (!(element === null || element === void 0 ? void 0 : element.propertyBindings)) {
+                    lastYPosition = lastYPosition + padding;
+                    return;
+                }
+                element.size = { width, height };
+                lastYPosition = lastYPosition + height + padding;
+            }
+            else if (element.type === 'text') {
+                if (!((_a = element.style) === null || _a === void 0 ? void 0 : _a.font)) {
+                    element.style = Object.assign(Object.assign({}, element.style), { font: { size: document_element_constants_1.COLOR_FONT_SIZE } });
+                }
+                if (!(element === null || element === void 0 ? void 0 : element.size)) {
+                    element.size = {};
+                }
+                element.size.height = element.style.font.size + padding;
+                element.size.width = width;
+                lastYPosition = lastYPosition + element.size.height;
+            }
+            newElements.push(element);
+        });
+        container.size = {
+            width: width + padding * 2,
+            height: lastYPosition + padding,
+        };
+        container.position = { x: 0, y: 0 };
+        newElements.unshift(container);
+        return newElements;
+    }
 }
 exports.DocumentElementComponentSizeHandler = DocumentElementComponentSizeHandler;

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

@@ -0,0 +1,5 @@
+export declare const ANNOTATION_IMG_SIZE = 15;
+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;

package/lib/document-element-constants.js

@@ -0,0 +1,8 @@
+"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.ANNOTATION_IMG_SIZE = 15;
+exports.ANNOTATION_PADDING_Y = 8;
+exports.COLOR_PADDING = 5;
+exports.COLOR_FONT_SIZE = 8;
+exports.COLOR_WIDTH = 140;

package/lib/document-element-factory.js

@@ -6,6 +6,7 @@ const nanoid_1 = require("nanoid");
 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");
 class DocumentElementFactory {
     static initNewElement(type) {
         const element = {
@@ -55,8 +56,10 @@ class DocumentElementFactory {
     static createColorComponent(model, modelBindings, options) {
         var _a;
         return DocumentElementFactory.createComponent(((_a = model === null || model === void 0 ? void 0 : model.color) === null || _a === void 0 ? void 0 : _a.primaryViewableId) ? 'pattern-view' : 'color-view', model, modelBindings, Object.assign({
-            size: components_1.COLOR_WIDTH + components_1.COLOR_PADDING * 2,
-            height: components_1.COLOR_WIDTH + components_1.COLOR_FONT_SIZE + components_1.COLOR_PADDING * 4,
+            size: {
+                width: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_PADDING * 2,
+                height: document_element_constants_1.COLOR_WIDTH + document_element_constants_1.COLOR_FONT_SIZE + document_element_constants_1.COLOR_PADDING * 4,
+            },
         }, options));
     }
     static createComponent(componentType, model, modelBindings, options) {

package/lib/index.d.ts

@@ -6,3 +6,4 @@ export * from './document-element-component-size-handler';
 export * from './document-action';
 export * from './util/measure-text/measure-text';
 export * from './util/dynamic-text/dynamic-text-util';
+export * from './document-element-constants';

package/lib/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./document-element-component-size-handler"), exports);
 __exportStar(require("./document-action"), exports);
 __exportStar(require("./util/measure-text/measure-text"), exports);
 __exportStar(require("./util/dynamic-text/dynamic-text-util"), exports);
+__exportStar(require("./document-element-constants"), exports);

package/package.json

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