@inweb/viewer-visualize 25.6.0 → 25.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-visualize",
-  "version": "25.6.0",
+  "version": "25.6.2",
   "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.6.0",
-    "@inweb/eventemitter2": "~25.6.0",
-    "@inweb/viewer-core": "~25.6.0"
+    "@inweb/client": "~25.6.2",
+    "@inweb/eventemitter2": "~25.6.2",
+    "@inweb/viewer-core": "~25.6.2"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

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

@@ -59,7 +59,7 @@ export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
-      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
     });
 
     this._ref.id(this._ref._id.toString());

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

@@ -95,25 +95,28 @@ export class KonvaCloud implements IMarkupCloud, IMarkupColorable {
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
-      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
 
-      const newWidth = this._ref.width() * attrs.scaleX;
-      const newHeight = this._ref.height() * attrs.scaleY;
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newWidth = this._ref.width();
+      if (scaleByX) newWidth *= attrs.scaleX;
+      let newHeight = this._ref.height();
+      if (scaleByY) newHeight *= attrs.scaleY;
 
       const minWidth = 100;
       const minHeight = 100;
 
-      if (newWidth < minWidth || newHeight < minHeight) {
-        this._ref.scale({ x: 1, y: 1 });
-        return;
-      }
+      if (newWidth < minWidth) newWidth = minWidth;
+      if (newHeight < minHeight) newHeight = minHeight;
 
-      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-        this.setWidth(newWidth);
+      if (scaleByX) {
+        this._ref.width(newWidth);
       }
 
-      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-        this.setHeight(newHeight);
+      if (scaleByY) {
+        this._ref.height(newHeight);
       }
 
       this._ref.scale({ x: 1, y: 1 });

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

@@ -39,25 +39,30 @@ export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
-      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
 
-      const newRadiusX = this._ref.radiusX() * attrs.scaleX;
-      const newRadiusY = this._ref.radiusY() * attrs.scaleY;
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newRadiusX = this._ref.radiusX();
+      if (scaleByX) newRadiusX *= attrs.scaleX;
+      let newRadiusY = this._ref.radiusY();
+      if (scaleByY) newRadiusY *= attrs.scaleY;
 
       const minRadiusX = 25;
       const minRadiusY = 25;
 
-      if (newRadiusX < minRadiusX || newRadiusY < minRadiusY) {
-        this._ref.scale({ x: 1, y: 1 });
-        return;
-      }
-
-      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-        this.setRadiusX(newRadiusX);
-      }
-
-      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-        this.setRadiusY(newRadiusY);
+      if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
+      if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
+
+      if (e.evt.ctrlKey || e.evt.shiftKey) {
+        if (scaleByX) {
+          this._ref.radius({ x: newRadiusX, y: newRadiusX });
+        } else {
+          this._ref.radius({ x: newRadiusY, y: newRadiusY });
+        }
+      } else {
+        this._ref.radius({ x: newRadiusX, y: newRadiusY });
       }
 
       this._ref.scale({ x: 1, y: 1 });

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

@@ -43,17 +43,31 @@ export class KonvaImage implements IMarkupImage {
     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);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newWidth = this._ref.width();
+      if (scaleByX) newWidth *= attrs.scaleX;
+      let newHeight = this._ref.height();
+      if (scaleByY) newHeight *= attrs.scaleY;
+
+      if (e.evt.ctrlKey || e.evt.shiftKey) {
+        if (scaleByX) {
+          this._ref.width(newWidth);
+          this._ref.height(newWidth * this._ratio);
+        } else {
+          this._ref.width(newHeight / this._ratio);
+          this._ref.height(newHeight);
+        }
+      } else {
+        if (scaleByX) {
+          this._ref.width(newWidth);
+        }
+        if (scaleByY) {
+          this._ref.height(newHeight);
+        }
       }
 
       this._ref.scale({ x: 1, y: 1 });

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

@@ -41,7 +41,7 @@ export class KonvaLine implements IMarkupLine, IMarkupColorable {
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
-      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
     });
 
     this._ref.id(this._ref._id.toString());

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

@@ -40,25 +40,28 @@ export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
-      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
 
-      let newWidth = this._ref.width() * attrs.scaleX;
-      let newHeight = this._ref.height() * attrs.scaleY;
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newWidth = this._ref.width();
+      if (scaleByX) newWidth *= attrs.scaleX;
+      let newHeight = this._ref.height();
+      if (scaleByY) newHeight *= attrs.scaleY;
 
       const minWidth = 50;
       const minHeight = 50;
 
-      if (newWidth < minWidth || newHeight < minHeight) {
-        this._ref.scale({ x: 1, y: 1 });
-        return;
-      }
+      if (newWidth < minWidth) newWidth = minWidth;
+      if (newHeight < minHeight) newHeight = minHeight;
 
-      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
-        this.setWidth(newWidth);
+      if (scaleByX) {
+        this._ref.width(newWidth);
       }
 
-      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
-        this.setHeight(newHeight);
+      if (scaleByY) {
+        this._ref.height(newHeight);
       }
 
       this._ref.scale({ x: 1, y: 1 });

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

@@ -41,23 +41,26 @@ export class KonvaText implements IMarkupText, IMarkupColorable {
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 
-      if (attrs.rotation !== this.getRotation()) this.setRotation(attrs.rotation);
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
 
-      const newWidth = this._ref.width() * attrs.scaleX;
-      const newHeight = this._ref.height() * attrs.scaleY;
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newWidth = this._ref.width();
+      if (scaleByX) newWidth *= attrs.scaleX;
+      let newHeight = this._ref.height();
+      if (scaleByY) newHeight *= attrs.scaleY;
 
       const minWidth = 50;
 
-      if (newWidth < minWidth || newHeight < Math.round(this.getFontSize())) {
-        this._ref.scale({ x: 1, y: 1 });
-        return;
-      }
+      if (newWidth < minWidth) newWidth = minWidth;
+      if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
 
-      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
+      if (scaleByX) {
         this._ref.width(newWidth);
       }
 
-      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+      if (scaleByY) {
         this._ref.height(newHeight);
       }
 

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

@@ -527,6 +527,7 @@ export class KonvaMarkup implements IMarkup {
     const transformer = new Konva.Transformer({
       shouldOverdrawWholeArea: false,
       keepRatio: false,
+      flipEnabled: false,
     });
 
     this._konvaTransformer = transformer;