@inweb/viewer-visualize 25.8.2 → 25.8.3

package/dist/viewer-visualize.module.js

@@ -1722,45 +1722,76 @@ class KonvaMarkup {
     }
     colorizeAllMarkup(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).HexColor;
-        this.getObjects().forEach((obj => {
-            const colorable = obj;
-            if (colorable && colorable.setColor) colorable.setColor(hexColor);
+        this.getObjects().filter((obj => {
+            var _a;
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
-        this._konvaLayer.draw();
     }
     colorizeSelectedMarkups(r, g, b) {
         const hexColor = new MarkupColor(r, g, b).HexColor;
-        this.getSelectedObjects().forEach((obj => {
-            const colorable = obj;
-            if (colorable && colorable.setColor) colorable.setColor(hexColor);
+        this.getSelectedObjects().filter((obj => {
+            var _a;
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
     }
     setViewpoint(viewpoint) {
-        const markupColor = viewpoint.custom_fields.markup_color || {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
             r: 255,
             g: 0,
             b: 0
         };
         this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
-        this.loadMarkup(viewpoint);
+        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line => {
+            const linePoints = [];
+            line.points.forEach((point => {
+                const screenPoint = this._worldTransformer.worldToScreen(point);
+                linePoints.push(screenPoint.x);
+                linePoints.push(screenPoint.y);
+            }));
+            this.addLine(linePoints, line.color, line.type, line.width, line.id);
+        }));
+        (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text => {
+            const screenPoint = this._worldTransformer.worldToScreen(text.position);
+            this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
+        }));
+        (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect => {
+            const screenPoint = this._worldTransformer.worldToScreen(rect.position);
+            this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+        }));
+        (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse => {
+            const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
+            this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+        }));
+        (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow => {
+            const startPoint = this._worldTransformer.worldToScreen(arrow.start);
+            const endPoint = this._worldTransformer.worldToScreen(arrow.end);
+            this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
+        }));
+        (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud => {
+            const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
+            this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+        }));
+        (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image => {
+            const screenPoint = this._worldTransformer.worldToScreen(image.position);
+            this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+        }));
     }
     getViewpoint() {
-        const viewpoint = {
-            lines: [],
-            texts: [],
-            arrows: [],
-            clouds: [],
-            ellipses: [],
-            images: [],
-            rectangles: []
+        const viewpoint = {};
+        viewpoint.lines = this.getMarkupLines();
+        viewpoint.texts = this.getMarkupTexts();
+        viewpoint.arrows = this.getMarkupArrows();
+        viewpoint.clouds = this.getMarkupClouds();
+        viewpoint.ellipses = this.getMarkupEllipses();
+        viewpoint.images = this.getMarkupImages();
+        viewpoint.rectangles = this.getMarkupRectangles();
+        viewpoint.custom_fields = {
+            markup_color: this.getMarkupColor()
         };
         viewpoint.snapshot = {
             data: this.combineMarkupWithDrawing()
         };
-        viewpoint.custom_fields = {
-            markup_color: this.getMarkupColor()
-        };
-        this.fillViewpointShapes(viewpoint);
         viewpoint.description = (new Date).toDateString();
         return viewpoint;
     }
@@ -1806,50 +1837,6 @@ class KonvaMarkup {
     clearSelected() {
         this._konvaTransformer.nodes([]);
     }
-    fillViewpointShapes(viewpoint) {
-        const markupLines = this.getMarkupLines();
-        if (markupLines && markupLines.length > 0) {
-            markupLines === null || markupLines === void 0 ? void 0 : markupLines.forEach((line => {
-                viewpoint.lines.push(line);
-            }));
-        }
-        const markupTexts = this.getMarkupTexts();
-        if (markupTexts && markupTexts.length > 0) {
-            markupTexts === null || markupTexts === void 0 ? void 0 : markupTexts.forEach((text => {
-                viewpoint.texts.push(text);
-            }));
-        }
-        const markupRectangles = this.getMarkupRectangles();
-        if (markupRectangles && markupRectangles.length > 0) {
-            markupRectangles === null || markupRectangles === void 0 ? void 0 : markupRectangles.forEach((rectangle => {
-                viewpoint.rectangles.push(rectangle);
-            }));
-        }
-        const markupEllipses = this.getMarkupEllipses();
-        if (markupEllipses && markupEllipses.length > 0) {
-            markupEllipses === null || markupEllipses === void 0 ? void 0 : markupEllipses.forEach((ellipse => {
-                viewpoint.ellipses.push(ellipse);
-            }));
-        }
-        const markupArrows = this.getMarkupArrows();
-        if (markupArrows && markupArrows.length > 0) {
-            markupArrows === null || markupArrows === void 0 ? void 0 : markupArrows.forEach((arrow => {
-                viewpoint.arrows.push(arrow);
-            }));
-        }
-        const markupImages = this.getMarkupImages();
-        if (markupImages && markupImages.length > 0) {
-            markupImages === null || markupImages === void 0 ? void 0 : markupImages.forEach((image => {
-                viewpoint.images.push(image);
-            }));
-        }
-        const markupClouds = this.getMarkupClouds();
-        if (markupClouds && markupClouds.length > 0) {
-            markupClouds === null || markupClouds === void 0 ? void 0 : markupClouds.forEach((cloud => {
-                viewpoint.clouds.push(cloud);
-            }));
-        }
-    }
     addObject(object) {
         this._konvaLayer.add(object.ref());
     }
@@ -2080,11 +2067,11 @@ class KonvaMarkup {
     }
     getMarkupLines() {
         const lines = [];
-        this.konvaLayerFind("Line").forEach((line => {
-            const linePoints = line.points();
+        this.konvaLayerFind("Line").forEach((ref => {
+            const linePoints = ref.points();
             if (!linePoints) return;
             const worldPoints = [];
-            const absoluteTransform = line.getAbsoluteTransform();
+            const absoluteTransform = ref.getAbsoluteTransform();
             for (let i = 0; i < linePoints.length; i += 2) {
                 const atPoint = absoluteTransform.point({
                     x: linePoints[i],
@@ -2093,14 +2080,15 @@ class KonvaMarkup {
                 const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 worldPoints.push(worldPoint);
             }
-            const konvaLine = new KonvaLine(null, line);
-            lines.push({
+            const konvaLine = new KonvaLine(null, ref);
+            const line = {
                 id: konvaLine.id(),
                 points: worldPoints,
                 color: konvaLine.getColor() || "#ff0000",
                 type: konvaLine.getLineType() || this.lineType,
                 width: konvaLine.getLineWidth() || this.lineWidth
-            });
+            };
+            lines.push(line);
         }));
         return lines;
     }
@@ -2108,15 +2096,14 @@ class KonvaMarkup {
         const texts = [];
         const textSize = .02;
         const textScale = this._worldTransformer.getScale();
-        this.konvaLayerFind("Text").forEach((text => {
-            if (!text) return;
+        this.konvaLayerFind("Text").forEach((ref => {
             const position = {
-                x: text.x(),
-                y: text.y()
+                x: ref.x(),
+                y: ref.y()
             };
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaText(null, text);
-            texts.push({
+            const shape = new KonvaText(null, ref);
+            const text = {
                 id: shape.id(),
                 position: worldPoint,
                 text: shape.getText(),
@@ -2124,140 +2111,109 @@ class KonvaMarkup {
                 angle: shape.getRotation(),
                 color: shape.getColor(),
                 font_size: shape.getFontSize()
-            });
+            };
+            texts.push(text);
         }));
         return texts;
     }
     getMarkupRectangles() {
         const rectangles = [];
-        this.konvaLayerFind("Rectangle").forEach((rect => {
-            const position = rect.position();
+        this.konvaLayerFind("Rectangle").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaRectangle(null, rect);
-            rectangles.push({
+            const shape = new KonvaRectangle(null, ref);
+            const rectangle = {
                 id: shape.id(),
                 position: worldPoint,
                 width: shape.getWidth(),
                 height: shape.getHeigth(),
                 line_width: shape.getLineWidth(),
                 color: shape.getColor()
-            });
+            };
+            rectangles.push(rectangle);
         }));
         return rectangles;
     }
     getMarkupEllipses() {
         const ellipses = [];
-        this.konvaLayerFind("Ellipse").forEach((ellipse => {
-            const position = ellipse.position();
+        this.konvaLayerFind("Ellipse").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaEllipse(null, ellipse);
-            ellipses.push({
+            const shape = new KonvaEllipse(null, ref);
+            const ellipse = {
                 id: shape.id(),
                 position: worldPoint,
                 radius: {
-                    x: ellipse.getRadiusX(),
-                    y: ellipse.getRadiusY()
+                    x: ref.getRadiusX(),
+                    y: ref.getRadiusY()
                 },
                 line_width: shape.getLineWidth(),
                 color: shape.getColor()
-            });
+            };
+            ellipses.push(ellipse);
         }));
         return ellipses;
     }
     getMarkupArrows() {
         const arrows = [];
-        this.konvaLayerFind("Arrow").forEach((arrow => {
-            const absoluteTransform = arrow.getAbsoluteTransform();
+        this.konvaLayerFind("Arrow").forEach((ref => {
+            const absoluteTransform = ref.getAbsoluteTransform();
             const atStartPoint = absoluteTransform.point({
-                x: arrow.points()[0],
-                y: arrow.points()[1]
+                x: ref.points()[0],
+                y: ref.points()[1]
             });
             const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
             const atEndPoint = absoluteTransform.point({
-                x: arrow.points()[2],
-                y: arrow.points()[3]
+                x: ref.points()[2],
+                y: ref.points()[3]
             });
             const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
-            const shape = new KonvaArrow(null, arrow);
-            arrows.push({
+            const shape = new KonvaArrow(null, ref);
+            const arrow = {
                 id: shape.id(),
                 start: worldStartPoint,
                 end: worldEndPoint,
                 color: shape.getColor()
-            });
+            };
+            arrows.push(arrow);
         }));
         return arrows;
     }
     getMarkupImages() {
         const images = [];
-        this.konvaLayerFind("Image").forEach((image => {
-            const position = image.position();
+        this.konvaLayerFind("Image").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaImage(null, image);
-            images.push({
+            const shape = new KonvaImage(null, ref);
+            const image = {
                 id: shape.id(),
                 position: worldPoint,
                 src: shape.getSrc(),
                 width: shape.getWidth(),
                 height: shape.getHeight()
-            });
+            };
+            images.push(image);
         }));
         return images;
     }
     getMarkupClouds() {
         const clouds = [];
-        this.konvaLayerFind("Cloud").forEach((cloud => {
-            const position = cloud.position();
+        this.konvaLayerFind("Cloud").forEach((ref => {
+            const position = ref.position();
             const worldPoint = this._worldTransformer.screenToWorld(position);
-            const shape = new KonvaCloud(null, cloud);
-            clouds.push({
+            const shape = new KonvaCloud(null, ref);
+            const cloud = {
                 id: shape.id(),
                 position: worldPoint,
                 width: shape.getWidth(),
                 height: shape.getHeigth(),
                 line_width: shape.getLineWidth(),
                 color: shape.getColor()
-            });
+            };
+            clouds.push(cloud);
         }));
         return clouds;
     }
-    loadMarkup(viewpoint) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = viewpoint.lines) === null || _a === void 0 ? void 0 : _a.forEach((vpLine => {
-            const linePoints = [];
-            vpLine.points.forEach((point => {
-                const screenPoint = this._worldTransformer.worldToScreen(point);
-                linePoints.push(screenPoint.x);
-                linePoints.push(screenPoint.y);
-            }));
-            this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
-        }));
-        (_b = viewpoint.texts) === null || _b === void 0 ? void 0 : _b.forEach((vpText => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpText.position);
-            this.addText(vpText.text, screenPoint, vpText.angle, vpText.color, vpText.text_size, vpText.font_size, vpText.id);
-        }));
-        (_c = viewpoint.rectangles) === null || _c === void 0 ? void 0 : _c.forEach((vpRect => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpRect.position);
-            this.addRectangle(screenPoint, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
-        }));
-        (_d = viewpoint.ellipses) === null || _d === void 0 ? void 0 : _d.forEach((vpEllipse => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpEllipse.position);
-            this.addEllipse(screenPoint, vpEllipse.radius, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
-        }));
-        (_e = viewpoint.arrows) === null || _e === void 0 ? void 0 : _e.forEach((vpArrow => {
-            const startPoint = this._worldTransformer.worldToScreen(vpArrow.start);
-            const endPoint = this._worldTransformer.worldToScreen(vpArrow.end);
-            this.addArrow(startPoint, endPoint, vpArrow.color, vpArrow.id);
-        }));
-        (_f = viewpoint.clouds) === null || _f === void 0 ? void 0 : _f.forEach((vpCloud => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpCloud.position);
-            this.addCloud(screenPoint, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
-        }));
-        (_g = viewpoint.images) === null || _g === void 0 ? void 0 : _g.forEach((vpImage => {
-            const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
-            this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
-        }));
-    }
     combineMarkupWithDrawing() {
         this.clearSelected();
         const tempCanvas = document.createElement("canvas");
@@ -2286,8 +2242,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaLine.ref();
-        this._konvaLayer.add(obj);
+        this._konvaLayer.add(konvaLine.ref());
         return konvaLine;
     }
     createTextInput(pos, inputX, inputY, angle, text) {
@@ -2369,33 +2324,32 @@ class KonvaMarkup {
         this._imageInputPos = null;
     }
     addText(specifiedText, position, angle, color, textSize, fontSize, id) {
+        if (!specifiedText) return;
         const trNodes = this._konvaTransformer.nodes();
         if (trNodes.length > 0) {
             trNodes[0].destroy();
             this._konvaTransformer.nodes([]);
         }
         this.removeTextInput();
-        if (specifiedText) {
-            const tolerance = 1e-6;
-            if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
-                const size = .02;
-                const scale = this._worldTransformer.getScale();
-                fontSize = textSize / (scale.y / size) / 34;
-            }
-            const konvaText = new KonvaText({
-                position: {
-                    x: position.x,
-                    y: position.y
-                },
-                text: specifiedText,
-                rotation: angle,
-                fontSize: fontSize || this.fontSize,
-                color: color || this._markupColor.HexColor,
-                id: id
-            });
-            this._konvaLayer.add(konvaText.ref());
-            return konvaText;
-        }
+        const tolerance = 1e-6;
+        if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+            const size = .02;
+            const scale = this._worldTransformer.getScale();
+            fontSize = textSize / (scale.y / size) / 34;
+        }
+        const konvaText = new KonvaText({
+            position: {
+                x: position.x,
+                y: position.y
+            },
+            text: specifiedText,
+            rotation: angle,
+            fontSize: fontSize || this.fontSize,
+            color: color || this._markupColor.HexColor,
+            id: id
+        });
+        this._konvaLayer.add(konvaText.ref());
+        return konvaText;
     }
     addRectangle(position, width, height, lineWidth, color, id) {
         if (!position) return;
@@ -2407,8 +2361,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaRectangle.ref();
-        this._konvaLayer.add(obj);
+        this._konvaLayer.add(konvaRectangle.ref());
         return konvaRectangle;
     }
     addEllipse(position, radius, lineWidth, color, id) {
@@ -2420,8 +2373,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaEllipse.ref();
-        this._konvaLayer.add(obj);
+        this._konvaLayer.add(konvaEllipse.ref());
         return konvaEllipse;
     }
     addArrow(start, end, color, id) {
@@ -2432,8 +2384,7 @@ class KonvaMarkup {
             color: color || this._markupColor.HexColor,
             id: id
         });
-        const obj = konvaArrow.ref();
-        this._konvaLayer.add(obj);
+        this._konvaLayer.add(konvaArrow.ref());
         return konvaArrow;
     }
     addCloud(position, width, height, lineWidth, color, id) {
@@ -2446,30 +2397,25 @@ class KonvaMarkup {
             lineWidth: lineWidth || this.lineWidth,
             id: id
         });
-        const obj = konvaCloud.ref();
-        this._konvaLayer.add(obj);
+        this._konvaLayer.add(konvaCloud.ref());
         return konvaCloud;
     }
     addImage(position, src, width, height, id) {
-        if (!position) return;
-        let konvaImage;
-        if (src) {
-            konvaImage = new KonvaImage({
-                position: position,
-                src: src,
-                width: width,
-                height: height,
-                id: id
-            });
-            const obj = konvaImage.ref();
-            this._konvaLayer.add(obj);
-            const trNodes = this._konvaTransformer.nodes();
-            if (trNodes.length > 0) {
-                trNodes[0].destroy();
-                this._konvaTransformer.nodes([]);
-            }
+        if (!position || !src) return;
+        const trNodes = this._konvaTransformer.nodes();
+        if (trNodes.length > 0) {
+            trNodes[0].destroy();
+            this._konvaTransformer.nodes([]);
         }
         this.removeImageInput();
+        const konvaImage = new KonvaImage({
+            position: position,
+            src: src,
+            width: width,
+            height: height,
+            id: id
+        });
+        this._konvaLayer.add(konvaImage.ref());
         return konvaImage;
     }
 }