@inweb/markup 25.8.1 → 25.8.3

package/dist/markup.js

@@ -12518,43 +12518,62 @@
 	    }
 	    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._konvaLayer.draw();
+	        this.getObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor); });
 	    }
 	    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 || { r: 255, g: 0, b: 0 };
+	        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: [],
-	        };
-	        viewpoint.snapshot = {
-	            data: this.combineMarkupWithDrawing(),
-	        };
-	        viewpoint.custom_fields = {
-	            markup_color: this.getMarkupColor(),
-	        };
-	        this.fillViewpointShapes(viewpoint);
+	        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.description = new Date().toDateString();
 	        return viewpoint;
 	    }
@@ -12607,50 +12626,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());
 	    }
@@ -12885,12 +12860,12 @@
 	    }
 	    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) {
 	                // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
 	                // https://stackoverflow.com/a/57641487 - check answer's comments
@@ -12898,14 +12873,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;
 	    }
@@ -12913,13 +12889,11 @@
 	        const texts = [];
 	        const textSize = 0.02;
 	        const textScale = this._worldTransformer.getScale();
-	        this.konvaLayerFind("Text").forEach((text) => {
-	            if (!text)
-	                return;
-	            const position = { x: text.x(), y: text.y() };
+	        this.konvaLayerFind("Text").forEach((ref) => {
+	            const position = { 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(),
@@ -12927,132 +12901,101 @@
 	                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() },
+	                radius: { 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) => {
+	        this.konvaLayerFind("Arrow").forEach((ref) => {
 	            // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
-	            const absoluteTransform = arrow.getAbsoluteTransform();
-	            const atStartPoint = absoluteTransform.point({ x: arrow.points()[0], y: arrow.points()[1] });
+	            const absoluteTransform = ref.getAbsoluteTransform();
+	            const atStartPoint = absoluteTransform.point({ 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] });
+	            const atEndPoint = absoluteTransform.point({ 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");
@@ -13078,8 +13021,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaLine.ref();
-	        this._konvaLayer.add(obj);
+	        this._konvaLayer.add(konvaLine.ref());
 	        return konvaLine;
 	    }
 	    createTextInput(pos, inputX, inputY, angle, text) {
@@ -13163,6 +13105,8 @@
 	        this._imageInputPos = null;
 	    }
 	    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
+	        if (!specifiedText)
+	            return;
 	        const trNodes = this._konvaTransformer.nodes();
 	        if (trNodes.length > 0) {
 	            // in case of edit - remove old Konva.Text object
@@ -13170,25 +13114,23 @@
 	            this._konvaTransformer.nodes([]);
 	        }
 	        this.removeTextInput();
-	        if (specifiedText) {
-	            const tolerance = 1.0e-6;
-	            // in case we have old viewpoint without font_size
-	            if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
-	                const size = 0.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,
-	            });
-	            this._konvaLayer.add(konvaText.ref());
-	            return konvaText;
-	        }
+	        // in case we have old viewpoint without font_size
+	        const tolerance = 1.0e-6;
+	        if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+	            const size = 0.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,
+	        });
+	        this._konvaLayer.add(konvaText.ref());
+	        return konvaText;
 	    }
 	    addRectangle(position, width, height, lineWidth, color, id) {
 	        if (!position)
@@ -13201,8 +13143,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaRectangle.ref();
-	        this._konvaLayer.add(obj);
+	        this._konvaLayer.add(konvaRectangle.ref());
 	        return konvaRectangle;
 	    }
 	    addEllipse(position, radius, lineWidth, color, id) {
@@ -13215,8 +13156,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaEllipse.ref();
-	        this._konvaLayer.add(obj);
+	        this._konvaLayer.add(konvaEllipse.ref());
 	        return konvaEllipse;
 	    }
 	    addArrow(start, end, color, id) {
@@ -13228,8 +13168,7 @@
 	            color: color || this._markupColor.HexColor,
 	            id,
 	        });
-	        const obj = konvaArrow.ref();
-	        this._konvaLayer.add(obj);
+	        this._konvaLayer.add(konvaArrow.ref());
 	        return konvaArrow;
 	    }
 	    addCloud(position, width, height, lineWidth, color, id) {
@@ -13243,32 +13182,27 @@
 	            lineWidth: lineWidth || this.lineWidth,
 	            id,
 	        });
-	        const obj = konvaCloud.ref();
-	        this._konvaLayer.add(obj);
+	        this._konvaLayer.add(konvaCloud.ref());
 	        return konvaCloud;
 	    }
 	    addImage(position, src, width, height, id) {
-	        if (!position)
+	        if (!position || !src)
 	            return;
-	        let konvaImage;
-	        if (src) {
-	            konvaImage = new KonvaImage({
-	                position,
-	                src,
-	                width,
-	                height,
-	                id,
-	            });
-	            const obj = konvaImage.ref();
-	            this._konvaLayer.add(obj);
-	            const trNodes = this._konvaTransformer.nodes();
-	            if (trNodes.length > 0) {
-	                // in case of edit - remove old Image placeholder object
-	                trNodes[0].destroy();
-	                this._konvaTransformer.nodes([]);
-	            }
+	        const trNodes = this._konvaTransformer.nodes();
+	        if (trNodes.length > 0) {
+	            // in case of edit - remove old Image placeholder object
+	            trNodes[0].destroy();
+	            this._konvaTransformer.nodes([]);
 	        }
 	        this.removeImageInput();
+	        const konvaImage = new KonvaImage({
+	            position,
+	            src,
+	            width,
+	            height,
+	            id,
+	        });
+	        this._konvaLayer.add(konvaImage.ref());
 	        return konvaImage;
 	    }
 	}