@inweb/viewer-visualize 25.8.2 → 25.8.3

package/dist/viewer-visualize.js

@@ -13160,45 +13160,76 @@
         }
         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;
         }
@@ -13244,50 +13275,6 @@
         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());
         }
@@ -13518,11 +13505,11 @@
         }
         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],
@@ -13531,14 +13518,15 @@
                     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;
         }
@@ -13546,15 +13534,14 @@
             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(),
@@ -13562,140 +13549,109 @@
                     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");
@@ -13724,8 +13680,7 @@
                 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) {
@@ -13807,33 +13762,32 @@
             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;
@@ -13845,8 +13799,7 @@
                 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) {
@@ -13858,8 +13811,7 @@
                 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) {
@@ -13870,8 +13822,7 @@
                 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) {
@@ -13884,30 +13835,25 @@
                 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;
         }
     }