@inweb/client 25.2.2 → 25.2.5

package/dist/client.module.js

@@ -2069,7 +2069,7 @@ class Client extends EventEmitter2 {
         return this._httpClient.get("/version").then((response => response.json())).then((data => ({
             ...data,
             server: data.version,
-            client: "25.2.2"
+            client: "25.2.5"
         })));
     }
     registerUser(email, password, userName) {
@@ -4617,6 +4617,7 @@ var MarkupMode;
     MarkupMode["Ellipse"] = "Ellipse";
     MarkupMode["Arrow"] = "Arrow";
     MarkupMode["Image"] = "Image";
+    MarkupMode["Cloud"] = "Cloud";
 })(MarkupMode || (MarkupMode = {}));
 
 class MarkupColor {
@@ -4648,12 +4649,22 @@ class MarkupColor {
     }
 }
 
+var LineType;
+
+(function(LineType) {
+    LineType[LineType["Unknown"] = 0] = "Unknown";
+    LineType["Solid"] = "solid";
+    LineType["Dot"] = "dot";
+    LineType["Dash"] = "dash";
+})(LineType || (LineType = {}));
+
+const LineTypeSpecs = new Map([ [ LineType.Solid, [] ], [ LineType.Dot, [ 30, 30, .001, 30 ] ], [ LineType.Dash, [ 30, 30 ] ] ]);
+
 class KonvaLine {
     constructor(params, ref = null) {
         var _a, _b;
         if (ref) {
             this._ref = ref;
-            this._ref.id(this._ref._id.toString());
             return;
         }
         if (!params.points) return;
@@ -4667,7 +4678,8 @@ class KonvaLine {
             lineJoin: "round",
             points: konvaPoints,
             draggable: true,
-            strokeScaleEnabled: false
+            strokeScaleEnabled: false,
+            dash: LineTypeSpecs.get(params.type) || []
         });
         this._ref.id(this._ref._id.toString());
     }
@@ -4706,7 +4718,7 @@ class KonvaLine {
         this._ref = null;
     }
     getPoints() {
-        return this._ref.attrs.points;
+        return this._ref.points();
     }
     setLineWidth(size) {
         this._ref.strokeWidth(size);
@@ -4714,6 +4726,27 @@ class KonvaLine {
     getLineWidth() {
         return this._ref.strokeWidth();
     }
+    getLineType() {
+        const typeSpecs = this._ref.dash() || [];
+        let type = "solid";
+        switch (typeSpecs) {
+          case LineTypeSpecs.get(LineType.Dot):
+            type = "dot";
+            break;
+
+          case LineTypeSpecs.get(LineType.Dash):
+            type = "dash";
+            break;
+        }
+        return type;
+    }
+    setLineType(type) {
+        const lineType = LineType[type];
+        if (lineType) {
+            const specs = LineTypeSpecs.get(lineType);
+            if (specs) this._ref.dash(specs);
+        }
+    }
     addPoints(points) {
         let newPoints = this._ref.points();
         points.forEach((point => {
@@ -4729,7 +4762,6 @@ class KonvaText {
         this.TEXT_FONT_FAMILY = "Calibri";
         if (ref) {
             this._ref = ref;
-            this._ref.id(this._ref._id.toString());
             return;
         }
         if (!params || !params.text) return;
@@ -4808,18 +4840,17 @@ class KonvaRectangle {
         var _a, _b;
         if (ref) {
             this._ref = ref;
-            this._ref.id(this._ref._id.toString());
             return;
         }
-        if (!params.pos) return;
+        if (!params.position) return;
         this._ref = new Konva.Rect({
             stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
             strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
-            x: params.pos.x,
-            y: params.pos.y,
+            x: params.position.x,
+            y: params.position.y,
             width: params.width,
             height: params.height,
             draggable: true,
@@ -4895,18 +4926,17 @@ class KonvaEllipse {
         var _a, _b;
         if (ref) {
             this._ref = ref;
-            this._ref.id(this._ref._id.toString());
             return;
         }
-        if (!params.pos) return;
+        if (!params.position) return;
         this._ref = new Konva.Ellipse({
             stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
             strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
-            x: params.pos.x,
-            y: params.pos.y,
+            x: params.position.x,
+            y: params.position.y,
             radiusX: params.radius.x,
             radiusY: params.radius.y,
             draggable: true,
@@ -4985,23 +5015,20 @@ class KonvaEllipse {
 
 class KonvaArrow {
     constructor(params, ref = null) {
-        var _a, _b, _c;
+        var _a, _b;
         if (ref) {
             this._ref = ref;
-            this._ref.id(this._ref._id.toString());
             return;
         }
-        if (!params.points) return;
+        if (!params.start || !params.end) return;
         this._ref = new Konva.Arrow({
             stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
             fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
-            strokeWidth: (_c = params.lineWidth) !== null && _c !== void 0 ? _c : 4,
+            strokeWidth: 4,
             globalCompositeOperation: "source-over",
             lineCap: "round",
             lineJoin: "round",
-            points: params.points,
-            pointerWidth: params.pointerWidth,
-            pointerLength: params.pointerLength,
+            points: [ params.start.x, params.start.y, params.end.x, params.end.y ],
             draggable: true,
             strokeScaleEnabled: false
         });
@@ -5042,28 +5069,41 @@ class KonvaArrow {
         this._ref = null;
     }
     getPoints() {
-        return this._ref.attrs.points;
+        const points = this._ref.points();
+        return [ {
+            x: points[0],
+            y: points[1]
+        }, {
+            x: points[2],
+            y: points[3]
+        } ];
     }
     setPoints(points) {
-        this._ref.points(points);
-    }
-    getPointerWidth() {
-        return this._ref.pointerWidth();
-    }
-    setPointerWidth(w) {
-        this._ref.pointerWidth(w);
+        if (points.length === 2) {
+            this._ref.points([ points[0].x, points[0].y, points[1].x, points[1].y ]);
+        }
     }
-    getPointerLength() {
-        return this._ref.pointerLength();
+    getStartPoint() {
+        const points = this._ref.points();
+        return {
+            x: points[0],
+            y: points[1]
+        };
     }
-    setPointerLength(l) {
-        this._ref.pointerLength(l);
+    setStartPoint(x, y) {
+        const points = this._ref.points();
+        this._ref.points([ x, y, points[2], points[3] ]);
     }
-    getLineWidth() {
-        return this._ref.strokeWidth();
+    getEndPoint() {
+        const points = this._ref.points();
+        return {
+            x: points[2],
+            y: points[3]
+        };
     }
-    setLineWidth(size) {
-        this._ref.strokeWidth(size);
+    setEndPoint(x, y) {
+        const points = this._ref.points();
+        this._ref.points([ points[0], points[1], x, y ]);
     }
 }
 
@@ -5074,7 +5114,6 @@ class KonvaImage {
             if (ref.height() === 0 || ref.width() === 0) return;
             this._ref = ref;
             this._canvasImage = ref.image();
-            this._ref.id(this._ref._id.toString());
             this._ratio = this._ref.height() / this._ref.width();
             return;
         }
@@ -5154,6 +5193,181 @@ class KonvaImage {
     }
 }
 
+class KonvaCloud {
+    constructor(params, ref = null) {
+        var _a, _b, _c, _d;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params.position || !params.width || !params.height) return;
+        const arcRadius = 16;
+        this._ref = new Konva.Shape({
+            x: params.position.x,
+            y: params.position.y,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
+            stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
+            strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 5,
+            draggable: true,
+            strokeScaleEnabled: false,
+            globalCompositeOperation: "source-over",
+            sceneFunc: (context, shape) => {
+                function calculateMidpoint(position, width, height) {
+                    const midX = position.x + width / 2;
+                    const midY = position.y + height / 2;
+                    return {
+                        x: midX,
+                        y: midY
+                    };
+                }
+                const points = [ {
+                    x: 0,
+                    y: 0
+                }, {
+                    x: 0 + this._ref.width(),
+                    y: 0
+                }, {
+                    x: 0 + this._ref.width(),
+                    y: 0 + this._ref.height()
+                }, {
+                    x: 0,
+                    y: 0 + this._ref.height()
+                }, {
+                    x: 0,
+                    y: 0
+                } ];
+                const midPoint = calculateMidpoint({
+                    x: 0,
+                    y: 0
+                }, this._ref.width(), this._ref.height());
+                const baseArcLength = 30;
+                context.beginPath();
+                for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
+                    let approxArcLength = baseArcLength;
+                    const dx = points[iPoint + 1].x - points[iPoint].x;
+                    const dy = points[iPoint + 1].y - points[iPoint].y;
+                    const length = Math.sqrt(dx * dx + dy * dy);
+                    const arcCount = Math.floor(length / approxArcLength);
+                    const lengthMod = length % approxArcLength;
+                    approxArcLength = baseArcLength + arcCount / lengthMod;
+                    let pX = points[iPoint].x + dx / arcCount / 2;
+                    let pY = points[iPoint].y + dy / arcCount / 2;
+                    const pEndX = points[iPoint + 1].x;
+                    const pEndY = points[iPoint + 1].y;
+                    const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
+                    const startAngle = endAngle + Math.PI;
+                    const counterClockwise = pX > midPoint.x && pY > midPoint.y;
+                    for (let iArc = 0; iArc < arcCount; iArc++) {
+                        if (counterClockwise) {
+                            context.arc(pX, pY, arcRadius, endAngle, startAngle);
+                        } else {
+                            context.arc(pX, pY, arcRadius, startAngle, endAngle);
+                        }
+                        pX += dx / arcCount;
+                        pY += dy / arcCount;
+                    }
+                }
+                context.closePath();
+                context.fillStrokeShape(shape);
+            }
+        });
+        this._ref.className = "Cloud";
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            const minWidth = 100;
+            const minHeight = 100;
+            const newWidth = this._ref.width() * attrs.scaleX;
+            const newHeight = this._ref.height() * attrs.scaleY;
+            if (newWidth < minWidth || newHeight < minHeight) {
+                this._ref.scale({
+                    x: 1,
+                    y: 1
+                });
+                return;
+            }
+            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
+                this._ref.width(newWidth);
+            }
+            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.getSelfRect = () => ({
+            x: 0 - arcRadius,
+            y: 0 - arcRadius,
+            width: this._ref.width() + 2 * arcRadius,
+            height: this._ref.height() + 2 * arcRadius
+        });
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "cloud";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    setPosition(x, y) {
+        this._ref.position({
+            x: x,
+            y: y
+        });
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+    }
+    getHeigth() {
+        return this._ref.height();
+    }
+    setHeight(h) {
+        this._ref.height(h);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+}
+
 const MarkupMode2Konva = new Map([ [ MarkupMode.Line, {
     name: "Line",
     initializer: ref => new KonvaLine(null, ref)
@@ -5172,6 +5386,9 @@ const MarkupMode2Konva = new Map([ [ MarkupMode.Line, {
 } ], [ MarkupMode.Image, {
     name: "Image",
     initializer: ref => new KonvaImage(null, ref)
+} ], [ MarkupMode.Cloud, {
+    name: "Cloud",
+    initializer: ref => new KonvaCloud(null, ref)
 } ] ]);
 
 class KonvaMarkup {
@@ -5306,14 +5523,6 @@ class KonvaMarkup {
         this._viewer.update();
     }
     createViewpoint() {
-        function getLogicalPoint3dFromArray(array) {
-            return {
-                x: array[0],
-                y: array[1],
-                z: array[2]
-            };
-        }
-        if (!this._isInitialized) return {};
         if (!this._viewer.visualizeJs) return {};
         const visLib = this._viewer.visLib();
         const visViewer = visLib.getViewer();
@@ -5321,20 +5530,25 @@ class KonvaMarkup {
         const viewpoint = {
             lines: [],
             texts: [],
+            arrows: [],
+            clouds: [],
+            ellipses: [],
+            images: [],
+            rectangles: [],
             clipping_planes: []
         };
         viewpoint.orthogonal_camera = {
-            view_point: getLogicalPoint3dFromArray(activeView.viewPosition),
-            direction: getLogicalPoint3dFromArray(activeView.viewTarget),
-            up_vector: getLogicalPoint3dFromArray(activeView.upVector),
+            view_point: this.getPoint3dFromArray(activeView.viewPosition),
+            direction: this.getPoint3dFromArray(activeView.viewTarget),
+            up_vector: this.getPoint3dFromArray(activeView.upVector),
             field_width: activeView.viewFieldWidth,
             field_height: activeView.viewFieldHeight
         };
         for (let i = 0; i < activeView.numCuttingPlanes(); i++) {
             const cuttingPlane = activeView.getCuttingPlane(i);
             const plane = {
-                location: getLogicalPoint3dFromArray(cuttingPlane.getOrigin()),
-                direction: getLogicalPoint3dFromArray(cuttingPlane.normal())
+                location: this.getPoint3dFromArray(cuttingPlane.getOrigin()),
+                direction: this.getPoint3dFromArray(cuttingPlane.normal())
             };
             viewpoint.clipping_planes.push(plane);
         }
@@ -5344,34 +5558,7 @@ class KonvaMarkup {
         viewpoint.custom_fields = {
             markup_color: this.getMarkupColor()
         };
-        const markupLines = this.getMarkupLines();
-        if (markupLines && markupLines.length > 0) {
-            markupLines === null || markupLines === void 0 ? void 0 : markupLines.forEach((markupLine => {
-                const line = {
-                    points: [],
-                    color: markupLine.color || "ff0000",
-                    width: markupLine.width || 3
-                };
-                for (const point of markupLine.points) {
-                    line.points.push(getLogicalPoint3dFromArray(point));
-                }
-                viewpoint.lines.push(line);
-            }));
-        }
-        const markupTexts = this.getMarkupTexts();
-        if (markupTexts && markupTexts.length > 0) {
-            markupTexts === null || markupTexts === void 0 ? void 0 : markupTexts.forEach((markupText => {
-                var _a;
-                const text = {
-                    position: getLogicalPoint3dFromArray(markupText.position),
-                    text: markupText.text,
-                    angle: (_a = markupText.rotation) !== null && _a !== void 0 ? _a : 0,
-                    text_size: markupText.size,
-                    color: markupText.color
-                };
-                viewpoint.texts.push(text);
-            }));
-        }
+        this.fillViewpointShapes(viewpoint);
         viewpoint.description = (new Date).toDateString();
         return viewpoint;
     }
@@ -5407,6 +5594,11 @@ class KonvaMarkup {
             zIndex = 0;
             break;
 
+          case "cloud":
+            object = new KonvaCloud(params);
+            zIndex = 1;
+            break;
+
           default:
             throw new Error("Markup CreateObject - unsupported type has been detected.");
         }
@@ -5435,6 +5627,9 @@ class KonvaMarkup {
         this.konvaLayerFind(MarkupMode.Image).forEach((image => {
             objects.push(new KonvaImage(null, image));
         }));
+        this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
+            objects.push(new KonvaCloud(null, cloud));
+        }));
         return objects;
     }
     getSelectedObjects() {
@@ -5465,6 +5660,10 @@ class KonvaMarkup {
               case "Image":
                 objects.push(new KonvaImage(null, obj));
                 break;
+
+              case "Cloud":
+                objects.push(new KonvaCloud(null, obj));
+                break;
             }
         }));
         return objects;
@@ -5476,6 +5675,57 @@ class KonvaMarkup {
     clearSelected() {
         this._konvaTransformer.nodes([]);
     }
+    getPoint3dFromArray(array) {
+        return {
+            x: array[0],
+            y: array[1],
+            z: array[2]
+        };
+    }
+    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());
     }
@@ -5529,7 +5779,18 @@ class KonvaMarkup {
                     y: 50
                 });
             } else if (this._markupMode === MarkupMode.Arrow) {
-                this.addArrow([ pos.x, pos.y, pos.x + 50, pos.y + 50 ], 5, 5);
+                this.addArrow({
+                    x: pos.x,
+                    y: pos.y
+                }, {
+                    x: pos.x + 50,
+                    y: pos.y + 50
+                });
+            } else if (this._markupMode === MarkupMode.Cloud) {
+                this.addCloud({
+                    x: pos.x,
+                    y: pos.y
+                }, 200, 400);
             }
         }));
         stage.on("mouseup touchend", (e => {
@@ -5566,6 +5827,11 @@ class KonvaMarkup {
             } else {
                 this.removeTextInput();
             }
+            if (transformer.nodes().filter((x => x.className === "Cloud")).length > 0 || e.target.className === "Cloud") {
+                transformer.rotateEnabled(false);
+            } else {
+                transformer.rotateEnabled(true);
+            }
             const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
             const isSelected = transformer.nodes().indexOf(e.target) >= 0;
             if (!metaPressed && !isSelected) {
@@ -5606,7 +5872,7 @@ class KonvaMarkup {
     getMarkupLines() {
         const lines = [];
         this.konvaLayerFind(MarkupMode.Line).forEach((line => {
-            const linePoints = line.attrs.points;
+            const linePoints = line.points();
             if (!linePoints) return;
             const worldPoints = [];
             const absoluteTransform = line.getAbsoluteTransform();
@@ -5620,9 +5886,11 @@ class KonvaMarkup {
             }
             const konvaLine = new KonvaLine(null, line);
             lines.push({
-                points: worldPoints,
-                color: konvaLine.getColor(),
-                width: konvaLine.getLineWidth()
+                id: konvaLine.id(),
+                points: worldPoints.map((p => this.getPoint3dFromArray(p))),
+                color: konvaLine.getColor() || "ff0000",
+                type: konvaLine.getLineType() || "solid",
+                width: konvaLine.getLineWidth() || 3
             });
         }));
         return lines;
@@ -5634,36 +5902,174 @@ class KonvaMarkup {
         const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
         const mtrxNumber = projMtrx.get(1, 1);
         const tol = 1e-6;
-        if (!(mtrxNumber < tol && mtrxNumber > -tol)) {
+        if (mtrxNumber > tol || mtrxNumber < -tol) {
             textScale = 1 / mtrxNumber;
         }
         this.konvaLayerFind(MarkupMode.Text).forEach((text => {
             if (!text) return;
+            const position = this._viewer.visViewer().screenToWorld(text.x() * window.devicePixelRatio, text.y() * window.devicePixelRatio);
+            const shape = new KonvaText(null, text);
             texts.push({
-                position: this._viewer.visViewer().screenToWorld(text.attrs.x * window.devicePixelRatio, text.attrs.y * window.devicePixelRatio),
-                text: text.attrs.text,
-                rotation: text.attrs.rotation && Math.abs(text.attrs.rotation) > tol ? text.attrs.rotation : 0,
-                size: textSize * textScale,
-                color: text.attrs.fill
+                id: shape.id(),
+                position: this.getPoint3dFromArray(position),
+                text: shape.getText(),
+                text_size: textSize * textScale,
+                angle: shape.getRotation(),
+                color: shape.getColor(),
+                font_size: shape.getFontSize()
             });
         }));
         return texts;
     }
+    getMarkupRectangles() {
+        const rectangles = [];
+        this.konvaLayerFind(MarkupMode.Rectangle).forEach((rect => {
+            const position = rect.position();
+            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const shape = new KonvaRectangle(null, rect);
+            rectangles.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                width: shape.getWidth(),
+                height: shape.getHeigth(),
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            });
+        }));
+        return rectangles;
+    }
+    getMarkupEllipses() {
+        const ellipses = [];
+        this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse => {
+            const position = ellipse.position();
+            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const shape = new KonvaEllipse(null, ellipse);
+            ellipses.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                radius: {
+                    x: ellipse.getRadiusX(),
+                    y: ellipse.getRadiusY()
+                },
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            });
+        }));
+        return ellipses;
+    }
+    getMarkupArrows() {
+        const arrows = [];
+        this.konvaLayerFind(MarkupMode.Arrow).forEach((arrow => {
+            const absoluteTransform = arrow.getAbsoluteTransform();
+            const atStartPoint = absoluteTransform.point({
+                x: arrow.points()[0],
+                y: arrow.points()[1]
+            });
+            const worldStartPoint = this._viewer.visViewer().screenToWorld(atStartPoint.x * window.devicePixelRatio, atStartPoint.y * window.devicePixelRatio);
+            const atEndPoint = absoluteTransform.point({
+                x: arrow.points()[2],
+                y: arrow.points()[3]
+            });
+            const worldEndPoint = this._viewer.visViewer().screenToWorld(atEndPoint.x * window.devicePixelRatio, atEndPoint.y * window.devicePixelRatio);
+            const shape = new KonvaArrow(null, arrow);
+            arrows.push({
+                id: shape.id(),
+                start: this.getPoint3dFromArray(worldStartPoint),
+                end: this.getPoint3dFromArray(worldEndPoint),
+                color: shape.getColor()
+            });
+        }));
+        return arrows;
+    }
+    getMarkupImages() {
+        const images = [];
+        this.konvaLayerFind(MarkupMode.Image).forEach((image => {
+            const position = image.position();
+            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const shape = new KonvaImage(null, image);
+            images.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                src: shape.getSrc(),
+                width: shape.getWidth(),
+                height: shape.getHeight()
+            });
+        }));
+        return images;
+    }
+    getMarkupClouds() {
+        const clouds = [];
+        this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
+            const position = cloud.position();
+            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const shape = new KonvaCloud(null, cloud);
+            clouds.push({
+                id: shape.id(),
+                position: this.getPoint3dFromArray(worldPoint),
+                width: shape.getWidth(),
+                height: shape.getHeigth(),
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            });
+        }));
+        return clouds;
+    }
     loadMarkup(viewpoint) {
-        const vpLines = viewpoint.lines;
-        vpLines === null || vpLines === void 0 ? void 0 : vpLines.forEach((vpLine => {
+        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 = worldToScreen([ point.x, point.y, point.z ], this._viewer.visualizeJs, this._viewer.visViewer());
                 linePoints.push(screenPoint.x);
                 linePoints.push(screenPoint.y);
             }));
-            this.addLine(linePoints, vpLine.color, vpLine.width);
+            this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
         }));
-        const vpTexts = viewpoint.texts;
-        vpTexts === null || vpTexts === void 0 ? void 0 : vpTexts.forEach((vpText => {
+        (_b = viewpoint.texts) === null || _b === void 0 ? void 0 : _b.forEach((vpText => {
             const screenPoint = worldToScreen([ vpText.position.x, vpText.position.y, vpText.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            this.addText(vpText.text, screenPoint, vpText.angle, vpText.color);
+            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 = worldToScreen([ vpRect.position.x, vpRect.position.y, vpRect.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            this.addRectangle({
+                x: screenPoint.x,
+                y: screenPoint.y
+            }, 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 = worldToScreen([ vpEllipse.position.x, vpEllipse.position.y, vpEllipse.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            this.addEllipse({
+                x: screenPoint.x,
+                y: screenPoint.y
+            }, {
+                x: vpEllipse.radius.x,
+                y: vpEllipse.radius.y
+            }, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
+        }));
+        (_e = viewpoint.arrows) === null || _e === void 0 ? void 0 : _e.forEach((vpArrow => {
+            const startPoint = worldToScreen([ vpArrow.start.x, vpArrow.start.y, vpArrow.start.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            const endPoint = worldToScreen([ vpArrow.end.x, vpArrow.end.y, vpArrow.end.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            this.addArrow({
+                x: startPoint.x,
+                y: startPoint.y
+            }, {
+                x: endPoint.x,
+                y: endPoint.y
+            }, vpArrow.color, vpArrow.id);
+        }));
+        (_f = viewpoint.clouds) === null || _f === void 0 ? void 0 : _f.forEach((vpCloud => {
+            const screenPoint = worldToScreen([ vpCloud.position.x, vpCloud.position.y, vpCloud.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            this.addCloud({
+                x: screenPoint.x,
+                y: screenPoint.y
+            }, 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 = worldToScreen([ vpImage.position.x, vpImage.position.y, vpImage.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            this.addImage({
+                x: screenPoint.x,
+                y: screenPoint.y
+            }, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
         }));
     }
     combineMarkupWithDrawing() {
@@ -5681,7 +6087,7 @@ class KonvaMarkup {
         }), 0, 0);
         return tempCanvas.toDataURL("image/jpeg", .25);
     }
-    addLine(linePoints, color, width) {
+    addLine(linePoints, color, type, width, id) {
         if (!linePoints || linePoints.length === 0) return;
         const points = [];
         for (let i = 0; i < linePoints.length; i += 2) {
@@ -5693,7 +6099,9 @@ class KonvaMarkup {
         const konvaLine = new KonvaLine({
             points: points,
             color: color || this._markupColor.HexColor,
-            width: width || this.lineWidth
+            type: type || LineType.Solid,
+            width: width || this.lineWidth,
+            id: id
         });
         const obj = konvaLine.ref();
         this._konvaLayer.add(obj);
@@ -5735,20 +6143,31 @@ class KonvaMarkup {
         this._textInputPos = null;
         this._textInputAngle = 0;
     }
-    addText(specifiedText, pos, angle, color) {
+    addText(specifiedText, position, angle, color, textSize, fontSize, id) {
         if (specifiedText) {
-            const konvaText = new Konva.Text({
-                x: pos.x,
-                y: pos.y,
+            const tol = 1e-6;
+            if (textSize && textSize > tol && (!fontSize || fontSize < tol)) {
+                const size = .02;
+                let scale = 1;
+                const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
+                const mtrxNumber = projMtrx.get(1, 1);
+                if (mtrxNumber > tol || mtrxNumber < -tol) {
+                    scale = 1 / mtrxNumber;
+                }
+                fontSize = textSize / (scale / size) / 34;
+            }
+            const konvaText = new KonvaText({
+                position: {
+                    x: position.x,
+                    y: position.y
+                },
                 text: specifiedText,
-                fontSize: 34,
-                fontFamily: this.TEXT_FONT_FAMILY,
-                fill: color || this._markupColor.HexColor,
-                align: "left",
-                draggable: true,
-                rotation: angle
+                fontSize: fontSize,
+                color: color || this._markupColor.HexColor,
+                rotation: angle,
+                id: id
             });
-            this._konvaLayer.add(konvaText);
+            this._konvaLayer.add(konvaText.ref());
         }
         const trNodes = this._konvaTransformer.nodes();
         if (trNodes.length > 0) {
@@ -5758,59 +6177,71 @@ class KonvaMarkup {
         this.removeTextInput();
         return;
     }
-    addRectangle(pos, width, height) {
-        if (!pos) return;
-        const konvaRectangle = new Konva.Rect({
-            stroke: this._markupColor.HexColor,
-            strokeWidth: this.lineWidth,
-            globalCompositeOperation: "source-over",
-            lineCap: "round",
-            lineJoin: "round",
-            x: pos.x,
-            y: pos.y,
+    addRectangle(position, width, height, lineWidth, color, id) {
+        if (!position) return;
+        const konvaRectangle = new KonvaRectangle({
+            position: position,
+            color: color || this._markupColor.HexColor,
+            lineWidth: lineWidth || this.lineWidth,
             width: width,
             height: height,
-            draggable: true,
-            strokeScaleEnabled: false
+            id: id
         });
-        this._konvaLayer.add(konvaRectangle);
-        return konvaRectangle;
-    }
-    addEllipse(pos, radius) {
-        if (!pos) return;
-        const konvaEllipse = new Konva.Ellipse({
-            stroke: this._markupColor.HexColor,
-            strokeWidth: this.lineWidth,
-            globalCompositeOperation: "source-over",
-            lineCap: "round",
-            lineJoin: "round",
-            x: pos.x,
-            y: pos.y,
-            radiusX: radius.x,
-            radiusY: radius.y,
-            draggable: true,
-            strokeScaleEnabled: false
+        const obj = konvaRectangle.ref();
+        this._konvaLayer.add(obj);
+        return obj;
+    }
+    addEllipse(position, radius, lineWidth, color, id) {
+        if (!position) return;
+        const konvaEllipse = new KonvaEllipse({
+            position: position,
+            radius: radius,
+            lineWidth: lineWidth,
+            color: color || this._markupColor.HexColor,
+            id: id
         });
-        this._konvaLayer.add(konvaEllipse);
-        return konvaEllipse;
-    }
-    addArrow(points, pointerWidth, pointerLength) {
-        if (!points) return;
-        const konvaArrow = new Konva.Arrow({
-            stroke: this._markupColor.HexColor,
-            fill: this._markupColor.HexColor,
-            strokeWidth: this.lineWidth,
-            globalCompositeOperation: "source-over",
-            lineCap: "round",
-            lineJoin: "round",
-            points: points,
-            pointerWidth: pointerWidth,
-            pointerLength: pointerLength,
-            draggable: true,
-            strokeScaleEnabled: false
+        const obj = konvaEllipse.ref();
+        this._konvaLayer.add(obj);
+        return obj;
+    }
+    addArrow(start, end, color, id) {
+        if (!start || !end) return;
+        const konvaArrow = new KonvaArrow({
+            start: start,
+            end: end,
+            color: color || this._markupColor.HexColor,
+            id: id
         });
-        this._konvaLayer.add(konvaArrow);
-        return konvaArrow;
+        const obj = konvaArrow.ref();
+        this._konvaLayer.add(obj);
+        return obj;
+    }
+    addCloud(position, width, height, lineWidth, color, id) {
+        if (!position || !width || !height) return;
+        const konvaCloud = new KonvaCloud({
+            position: position,
+            width: width,
+            height: height,
+            color: color || this._markupColor.HexColor,
+            lineWidth: lineWidth || this.lineWidth,
+            id: id
+        });
+        const obj = konvaCloud.ref();
+        this._konvaLayer.add(obj);
+        return obj;
+    }
+    addImage(position, src, width, height, id) {
+        if (!position || !width || !height) return;
+        const konvaImage = new KonvaImage({
+            position: position,
+            src: src,
+            width: width,
+            height: height,
+            id: id
+        });
+        const obj = konvaImage.ref();
+        this._konvaLayer.add(obj);
+        return obj;
     }
 }
 
@@ -7145,7 +7576,7 @@ function zoomToSelected(viewer) {
 
 commands("VisualizeJS").registerCommand("zoomToSelected", zoomToSelected);
 
-const version = "25.2.2";
+const version = "25.2.5";
 
 export { Assembly, CANVAS_EVENTS, ClashTest, Client, EventEmitter2, File$1 as File, Job, Member, Model, OdBaseDragger, Options, Permission, Project, Role, User, Viewer, Viewer as VisualizejsViewer, commands, version };
 //# sourceMappingURL=client.module.js.map