@inweb/viewer-visualize 25.4.6 → 25.4.10

package/dist/viewer-visualize.js

@@ -14588,6 +14588,11 @@
                 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() {
@@ -14684,6 +14689,21 @@
                 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) > 10e-6) {
+                    this._ref.width(newWidth);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this._ref.height(newHeight);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         ref() {
@@ -14762,6 +14782,20 @@
                 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) > 10e-6) {
+                    this.setWidth(newWidth);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setHeight(newHeight);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         getPosition() {
@@ -14846,6 +14880,20 @@
                 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) > 10e-6) {
+                    this.setRadiusX(newRadiusX);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setRadiusY(newRadiusY);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         getPosition() {
@@ -14858,13 +14906,13 @@
             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();
@@ -14929,6 +14977,11 @@
                 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() {
@@ -14948,6 +15001,7 @@
         }
         setColor(hex) {
             this._ref.stroke(hex);
+            this._ref.fill(hex);
         }
         getRotation() {
             return this._ref.rotation();
@@ -15026,6 +15080,20 @@
                 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) > 10e-6) {
+                    this.setWidth(newWidth);
+                }
+                if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+                    this.setHeight(newHeight);
+                }
+                this._ref.scale({ x: 1, y: 1 });
+            });
             this._ref.id(this._ref._id.toString());
         }
         getSrc() {
@@ -15060,13 +15128,6 @@
         type() {
             return "image";
         }
-        // we can break Liskov Substitution Principle, need to use separate IColorable
-        // getColor(): string {
-        //   return this._ref.fill();
-        // }
-        // setColor(hex: string) {
-        //   this._ref.fill(hex);
-        // }
         getRotation() {
             return this._ref.rotation();
         }
@@ -15162,19 +15223,21 @@
             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, y: 1 });
                     return;
                 }
                 if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-                    this._ref.width(newWidth);
+                    this.setWidth(newWidth);
                 }
                 if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-                    this._ref.height(newHeight);
+                    this.setHeight(newHeight);
                 }
                 this._ref.scale({ x: 1, y: 1 });
             });
@@ -15760,25 +15823,29 @@
                     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 (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;
+                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();
+                    }
                 }
-                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);
@@ -16068,7 +16135,7 @@
                 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);
                     }