@inweb/viewer-visualize 25.4.6 → 25.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "25.4.6",
+  "version": "25.4.7",
   "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.7",
+    "@inweb/eventemitter2": "~25.4.7",
+    "@inweb/viewer-core": "~25.4.7"
   },
   "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,25 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
       rotation: params.rotation ?? 0,
     });
 
+    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.setFontSize(Math.round((this.getFontSize() * newWidth) / this._ref.width()));
+      }
+
+      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+        this.setFontSize(Math.round((this.getFontSize() * newHeight) / this._ref.height()));
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
     this._ref.id(this._ref._id.toString());
   }