@inweb/viewer-visualize 25.4.6 → 25.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "25.4.6",
+  "version": "25.4.10",
   "description": "3D CAD and BIM data Viewer powered by Visualize",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -29,9 +29,9 @@
     "ts-docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~25.4.6",
-    "@inweb/eventemitter2": "~25.4.6",
-    "@inweb/viewer-core": "~25.4.6"
+    "@inweb/client": "~25.4.10",
+    "@inweb/eventemitter2": "~25.4.10",
+    "@inweb/viewer-core": "~25.4.10"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

package/src/Viewer/Markup/Api/Impl/Konva/KonvaArrow.ts

@@ -56,6 +56,12 @@ export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
       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());
   }
 
@@ -81,6 +87,7 @@ export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
 
   setColor(hex: string) {
     this._ref.stroke(hex);
+    this._ref.fill(hex);
   }
 
   getRotation(): number {

package/src/Viewer/Markup/Api/Impl/Konva/KonvaCloud.ts

@@ -95,23 +95,25 @@ export class KonvaCloud implements IMarkupCloud, IMarkupColorable {
     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 });

package/src/Viewer/Markup/Api/Impl/Konva/KonvaEllipse.ts

@@ -36,6 +36,25 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
       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());
   }
 
@@ -52,7 +71,7 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
   }
 
   setRadiusX(r: number) {
-    this._ref.radius({ x: r, y: this._ref.radiusY() });
+    this._ref.radiusX(r);
   }
 
   getRadiusY(): number {
@@ -60,7 +79,7 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
   }
 
   setRadiusY(r: number) {
-    this._ref.radius({ x: this._ref.radiusX(), y: r });
+    this._ref.radiusY(r);
   }
 
   getLineWidth(): number {

package/src/Viewer/Markup/Api/Impl/Konva/KonvaImage.ts

@@ -40,6 +40,25 @@ export class KonvaImage implements IMarkupImage {
 
     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());
   }
 
@@ -85,15 +104,6 @@ export class KonvaImage implements IMarkupImage {
     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(): number {
     return this._ref.rotation();
   }

package/src/Viewer/Markup/Api/Impl/Konva/KonvaLine.ts

@@ -38,6 +38,12 @@ export class KonvaLine implements IMarkupLine, IMarkupColorable {
       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());
   }
 

package/src/Viewer/Markup/Api/Impl/Konva/KonvaRectangle.ts

@@ -37,6 +37,25 @@ export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
       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());
   }
 

package/src/Viewer/Markup/Api/Impl/Konva/KonvaText.ts

@@ -36,6 +36,27 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
       rotation: params.rotation ?? 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());
   }
 

package/src/Viewer/Markup/Impl/Konva/KonvaMarkup.ts

@@ -656,29 +656,33 @@ export class KonvaMarkup implements IMarkup {
         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") {
@@ -1073,7 +1077,7 @@ export class KonvaMarkup implements IMarkup {
       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);
         }