@inweb/viewer-visualize 25.4.6 → 25.4.10

package/dist/viewer-visualize.module.js

@@ -3060,6 +3060,10 @@ class KonvaLine {
             strokeScaleEnabled: false,
             dash: LineTypeSpecs.get(params.type) || []
         });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+        }));
         this._ref.id(this._ref._id.toString());
     }
     ref() {
@@ -3156,6 +3160,23 @@ class KonvaText {
             draggable: true,
             rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
         });
+        this._ref.width(this._ref.getTextWidth());
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+            const newWidth = this._ref.width() * attrs.scaleX;
+            const newHeight = this._ref.height() * attrs.scaleY;
+            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.id(this._ref._id.toString());
     }
     ref() {
@@ -3236,6 +3257,22 @@ class KonvaRectangle {
             draggable: true,
             strokeScaleEnabled: false
         });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+            const newWidth = this._ref.width() * attrs.scaleX;
+            const newHeight = this._ref.height() * attrs.scaleY;
+            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
+                this.setWidth(newWidth);
+            }
+            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
+                this.setHeight(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
         this._ref.id(this._ref._id.toString());
     }
     getPosition() {
@@ -3322,6 +3359,22 @@ class KonvaEllipse {
             draggable: true,
             strokeScaleEnabled: false
         });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+            const newRadiusX = this._ref.radiusX() * attrs.scaleX;
+            const newRadiusY = this._ref.radiusY() * attrs.scaleY;
+            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
+                this.setRadiusX(newRadiusX);
+            }
+            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
+                this.setRadiusY(newRadiusY);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
         this._ref.id(this._ref._id.toString());
     }
     getPosition() {
@@ -3337,19 +3390,13 @@ class KonvaEllipse {
         return this._ref.radiusX();
     }
     setRadiusX(r) {
-        this._ref.radius({
-            x: r,
-            y: this._ref.radiusY()
-        });
+        this._ref.radiusX(r);
     }
     getRadiusY() {
         return this._ref.radiusY();
     }
     setRadiusY(r) {
-        this._ref.radius({
-            x: this._ref.radiusX(),
-            y: r
-        });
+        this._ref.radiusY(r);
     }
     getLineWidth() {
         return this._ref.strokeWidth();
@@ -3412,6 +3459,10 @@ class KonvaArrow {
             draggable: true,
             strokeScaleEnabled: false
         });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+        }));
         this._ref.id(this._ref._id.toString());
     }
     ref() {
@@ -3431,6 +3482,7 @@ class KonvaArrow {
     }
     setColor(hex) {
         this._ref.stroke(hex);
+        this._ref.fill(hex);
     }
     getRotation() {
         return this._ref.rotation();
@@ -3514,6 +3566,22 @@ class KonvaImage {
             this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
         };
         this._canvasImage.src = params.src;
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+            const newWidth = this._ref.width() * attrs.scaleX;
+            const newHeight = this._ref.height() * attrs.scaleY;
+            if (Math.abs(attrs.scaleX - 1) > 1e-5) {
+                this.setWidth(newWidth);
+            }
+            if (Math.abs(attrs.scaleY - 1) > 1e-5) {
+                this.setHeight(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
         this._ref.id(this._ref._id.toString());
     }
     getSrc() {
@@ -3657,10 +3725,11 @@ class KonvaCloud {
         this._ref.className = "Cloud";
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
-            const minWidth = 100;
-            const minHeight = 100;
+            if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
             const newWidth = this._ref.width() * attrs.scaleX;
             const newHeight = this._ref.height() * attrs.scaleY;
+            const minWidth = 100;
+            const minHeight = 100;
             if (newWidth < minWidth || newHeight < minHeight) {
                 this._ref.scale({
                     x: 1,
@@ -3669,10 +3738,10 @@ class KonvaCloud {
                 return;
             }
             if (Math.abs(attrs.scaleX - 1) > 1e-5) {
-                this._ref.width(newWidth);
+                this.setWidth(newWidth);
             }
             if (Math.abs(attrs.scaleY - 1) > 1e-5) {
-                this._ref.height(newHeight);
+                this.setHeight(newHeight);
             }
             this._ref.scale({
                 x: 1,
@@ -4236,23 +4305,27 @@ class KonvaMarkup {
                 transformer.nodes([]);
                 return;
             }
-            if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
-                if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
-                    x: e.target.attrs.x,
-                    y: e.target.attrs.y
-                }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
-                return;
-            } else {
-                this.removeTextInput();
+            if (this._markupMode === MarkupMode.Text) {
+                if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
+                        x: e.target.attrs.x,
+                        y: e.target.attrs.y
+                    }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
+                    return;
+                } else {
+                    this.removeTextInput();
+                }
             }
-            if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
-                if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
-                    x: e.target.attrs.x,
-                    y: e.target.attrs.y
-                });
-                return;
-            } else {
-                this.removeImageInput();
+            if (this._markupMode === MarkupMode.Image) {
+                if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
+                        x: e.target.attrs.x,
+                        y: e.target.attrs.y
+                    });
+                    return;
+                } else {
+                    this.removeImageInput();
+                }
             }
             if (transformer.nodes().filter((x => x.className === "Cloud")).length > 0 || e.target.className === "Cloud") {
                 transformer.rotateEnabled(false);
@@ -4545,7 +4618,7 @@ class KonvaMarkup {
             this._textInputRef.style.top = inputY + "px";
             this._textInputRef.style.left = inputX + "px";
             this._textInputRef.onkeydown = event => {
-                if (event.key === "Enter") {
+                if (event.key === "Enter" && !event.shiftKey) {
                     event.preventDefault();
                     this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
                 }