@inweb/viewer-visualize 25.9.0 → 25.9.2

package/dist/viewer-visualize.js

@@ -12701,6 +12701,29 @@
     var libExports = lib$1.exports;
     var Konva = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
+    class WorldTransform {
+        screenToWorld(position) {
+            return {
+                x: position.x,
+                y: position.y,
+                z: 0
+            };
+        }
+        worldToScreen(position) {
+            return {
+                x: position.x,
+                y: position.y
+            };
+        }
+        getScale() {
+            return {
+                x: 1,
+                y: 1,
+                z: 1
+            };
+        }
+    }
+
     class MarkupColor {
         constructor(r, g, b) {
             this.setColor(r, g, b);
@@ -12730,29 +12753,6 @@
         }
     }
 
-    class WorldTransform {
-        screenToWorld(position) {
-            return {
-                x: position.x,
-                y: position.y,
-                z: 0
-            };
-        }
-        worldToScreen(position) {
-            return {
-                x: position.x,
-                y: position.y
-            };
-        }
-        getScale() {
-            return {
-                x: 1,
-                y: 1,
-                z: 1
-            };
-        }
-    }
-
     const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
 
     class KonvaLine {
@@ -13705,16 +13705,45 @@
                 this._konvaStage.height(height);
             };
             this.pan = event => {
-                const dX = event.dX / window.devicePixelRatio;
-                const dY = event.dY / window.devicePixelRatio;
-                this.getObjects().forEach((obj => obj.ref().move({
-                    x: dX,
-                    y: dY
-                })));
+                const pointer = this._konvaStage.getPointerPosition();
+                const pointTo = {
+                    x: (pointer.x - this._konvaStage.x()) / this._konvaStage.scaleX(),
+                    y: (pointer.y - this._konvaStage.y()) / this._konvaStage.scaleX()
+                };
+                const newPos = {
+                    x: pointer.x - pointTo.x * this._konvaStage.scale().x + event.dX,
+                    y: pointer.y - pointTo.y * this._konvaStage.scale().x + event.dY
+                };
+                this._konvaStage.position(newPos);
+            };
+            this.zoomAt = event => {
+                const oldScale = this._konvaStage.scaleX();
+                const pointer = this._konvaStage.getPointerPosition();
+                const mousePointTo = {
+                    x: (pointer.x - this._konvaStage.x()) / oldScale,
+                    y: (pointer.y - this._konvaStage.y()) / oldScale
+                };
+                let direction = event.data > 0 ? 1 : -1;
+                const newScale = direction > 0 ? oldScale * event.data : oldScale / event.data;
+                this._konvaStage.scale({
+                    x: newScale,
+                    y: newScale
+                });
+                const newPos = {
+                    x: pointer.x - mousePointTo.x * newScale,
+                    y: pointer.y - mousePointTo.y * newScale
+                };
+                this._konvaStage.position(newPos);
             };
             this.redirectToViewer = event => {
                 if (this._viewer) this._viewer.emit(event);
             };
+            this.getRelativePointPosition = (point, node) => {
+                const transform = node.getAbsoluteTransform().copy();
+                transform.invert();
+                return transform.point(point);
+            };
+            this.getRelativePointerPosition = node => this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
         }
         initialize(container, containerEvents, viewer, worldTransformer) {
             if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
@@ -13738,11 +13767,13 @@
                 this._containerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
                 this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
                 this._viewer.addEventListener("pan", this.pan);
+                this._viewer.addEventListener("zoomat", this.zoomAt);
             }
         }
         dispose() {
             var _a, _b;
             if (this._viewer) {
+                this._viewer.removeEventListener("zoomat", this.zoomAt);
                 this._viewer.removeEventListener("pan", this.pan);
                 this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
                 this._containerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
@@ -13789,6 +13820,14 @@
             this.clearSelected();
             this.removeTextInput();
             this.removeImageInput();
+            this._konvaStage.scale({
+                x: 1,
+                y: 1
+            });
+            this._konvaStage.position({
+                x: 0,
+                y: 0
+            });
             const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
                 r: 255,
                 g: 0,
@@ -13935,7 +13974,7 @@
                     transformer.nodes([]);
                     return;
                 }
-                const pos = stage.getPointerPosition();
+                const pos = this.getRelativePointerPosition(stage);
                 mouseDownPos = pos;
                 isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some((m => m === this._markupMode));
                 if (this._markupMode === "Line") {
@@ -13945,7 +13984,7 @@
             stage.on("mouseup touchend", (e => {
                 if (!this._markupIsActive) return;
                 if (isPaint) {
-                    const pos = stage.getPointerPosition();
+                    const pos = this.getRelativePointerPosition(stage);
                     const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
                     const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
                     const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
@@ -13989,7 +14028,7 @@
                 if (!isPaint) {
                     return;
                 }
-                const pos = stage.getPointerPosition();
+                const pos = this.getRelativePointerPosition(stage);
                 const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
                 const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
                 const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
@@ -14045,7 +14084,7 @@
                 if (e.target === stage) {
                     if (this._markupMode === "Text") {
                         if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else if (transformer.nodes().length === 0) {
-                            const pos = stage.getPointerPosition();
+                            const pos = this.getRelativePointerPosition(stage);
                             this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
                         }
                     } else if (this._markupMode === "Image") {
@@ -14053,7 +14092,7 @@
                             x: this._imageInputPos.x,
                             y: this._imageInputPos.y
                         }, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
-                            const pos = stage.getPointerPosition();
+                            const pos = this.getRelativePointerPosition(stage);
                             this.createImageInput(pos);
                         }
                     }
@@ -14158,11 +14197,13 @@
             this.konvaLayerFind("Text").forEach((ref => {
                 const textSize = .02;
                 const textScale = this._worldTransformer.getScale();
-                const position = {
-                    x: ref.x(),
-                    y: ref.y()
-                };
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const position = ref.position();
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 const shape = new KonvaText(null, ref);
                 const text = {
                     id: shape.id(),
@@ -14171,7 +14212,7 @@
                     text_size: textSize * textScale.y,
                     angle: shape.getRotation(),
                     color: shape.getColor(),
-                    font_size: shape.getFontSize()
+                    font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0]
                 };
                 texts.push(text);
             }));
@@ -14181,13 +14222,19 @@
             const rectangles = [];
             this.konvaLayerFind("Rectangle").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaRectangle(null, ref);
                 const rectangle = {
                     id: shape.id(),
                     position: worldPoint,
-                    width: shape.getWidth(),
-                    height: shape.getHeigth(),
+                    width: shape.getWidth() * scale,
+                    height: shape.getHeigth() * scale,
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
                 };
@@ -14199,14 +14246,20 @@
             const ellipses = [];
             this.konvaLayerFind("Ellipse").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaEllipse(null, ref);
                 const ellipse = {
                     id: shape.id(),
                     position: worldPoint,
                     radius: {
-                        x: ref.getRadiusX(),
-                        y: ref.getRadiusY()
+                        x: ref.getRadiusX() * scale,
+                        y: ref.getRadiusY() * scale
                     },
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
@@ -14244,14 +14297,20 @@
             const images = [];
             this.konvaLayerFind("Image").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaImage(null, ref);
                 const image = {
                     id: shape.id(),
                     position: worldPoint,
                     src: shape.getSrc(),
-                    width: shape.getWidth(),
-                    height: shape.getHeight()
+                    width: shape.getWidth() * scale,
+                    height: shape.getHeight() * scale
                 };
                 images.push(image);
             }));
@@ -14261,13 +14320,19 @@
             const clouds = [];
             this.konvaLayerFind("Cloud").forEach((ref => {
                 const position = ref.position();
-                const worldPoint = this._worldTransformer.screenToWorld(position);
+                const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+                const atPoint = stageAbsoluteTransform.point({
+                    x: position.x,
+                    y: position.y
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                const scale = stageAbsoluteTransform.getMatrix()[0];
                 const shape = new KonvaCloud(null, ref);
                 const cloud = {
                     id: shape.id(),
                     position: worldPoint,
-                    width: shape.getWidth(),
-                    height: shape.getHeigth(),
+                    width: shape.getWidth() * scale,
+                    height: shape.getHeigth() * scale,
                     line_width: shape.getLineWidth(),
                     color: shape.getColor()
                 };
@@ -15978,7 +16043,7 @@
             this.beginInteractivity();
         }
         drag(x, y, dltX, dltY) {
-            if (this.press && Math.abs(dltY) <= 10e-6) {
+            if (this.press && Math.abs(dltY) >= 10e-6) {
                 const ZOOM_SPEED = 0.025;
                 const zoomFactor = dltY > 0 ? 1 + ZOOM_SPEED : 1 - ZOOM_SPEED;
                 this._zoomAction.action(this.pressX, this.pressY, zoomFactor);
@@ -17488,7 +17553,7 @@
             return this;
         }
         /**
-         * Loads the `VisualizeJS` module and initialize it with the specified canvas. Call
+         * Loads the `VisualizeJS` module and initializes it with the specified canvas. Call
          * {@link dispose | dispose()} to release allocated resources.
          *
          * Fires:
@@ -17543,8 +17608,8 @@
             return this;
         }
         /**
-         * Releases all resources allocated by this viewer instance. Call this method before release
-         * the `Viewer` instance.
+         * Unloads an open file, clears the canvas and markups, and releases resources allocated by
+         * this viewer instance. Call this method before release the `Viewer` instance.
          */
         dispose() {
             this.cancel();
@@ -17842,7 +17907,9 @@
             return this;
         }
         /**
-         * List of names of registered draggers. By default, the following draggers are registered:
+         * List of names of registered draggers.
+         *
+         * The following draggers are registered by default:
          *
          * - `Line`
          * - `Text`
@@ -17857,14 +17924,16 @@
          * - `CuttingPlaneZAxis`
          * - `Walk`
          *
-         * @readonly
+         * To register your own command use the {@link registerDragger | registerDragger()}.
          */
         get draggers() {
             return [...this.draggerFactory.keys()];
         }
         /**
-         * Registers a dragger for the viewer. Dragger is an object that received mouse/keyboard
-         * events and does something to the viewer.
+         * Registers a dragger for the viewer.
+         *
+         * Dragger is an object that received mouse/keyboard events and does something to the viewer.
+         * For a quick tutorial on how to create your own dragger, see {@link Dragger}.
          *
          * @param name - Dragger name.
          * @param dragger - Dragger class.
@@ -17873,7 +17942,7 @@
             this.draggerFactory.set(name, dragger);
         }
         /**
-         * Returns active dragger instance or `null` if there is no active dragger.
+         * Returns the active dragger instance, or `null` if there is no active dragger.
          */
         activeDragger() {
             return this._activeDragger;
@@ -17886,7 +17955,8 @@
          * - {@link ChangeActiveDraggerEvent | changeactivedragger}
          *
          * @param name - Dragger name. Can be one of the {@link draggers} list.
-         * @returns Returns active dragger instance or `null` if there is no dragger with the given name.
+         * @returns Returns the new active dragger instance or `null` if there is no dragger with the
+         *   given name.
          */
         setActiveDragger(name) {
             var _a;
@@ -17976,7 +18046,7 @@
             this.update();
         }
         /**
-         * Returns `true` if current model is 3D model.
+         * Returns `true` if current opened model is 3D model.
          */
         is3D() {
             if (!this.visualizeJs)
@@ -18212,7 +18282,7 @@
             return this;
         }
         /**
-         * Cancels asynchronous model loading started by {@link open | open()}.
+         * Cancels asynchronous file loading started by {@link open | open()}.
          */
         cancel() {
             var _a, _b, _c;
@@ -18226,7 +18296,7 @@
             return this;
         }
         /**
-         * Unloads the model and clears the viewer and markups.
+         * Unloads an open file and clears the canvas and markups.
          */
         clear() {
             if (!this.visualizeJs)
@@ -18381,11 +18451,42 @@
             }
         }
         /**
-         * Executes the command denoted by the given command identifier.
+         * Executes the command denoted by the given command. If the command is not found, tries to
+         * set active dragger with the specified name.
+         *
+         * The following commands are registered by default:
+         *
+         * - `applyModelTransform`
+         * - `autoTransformAllModelsToCentralPoint`
+         * - `clearMarkup`
+         * - `clearSlices`
+         * - `createPreview`
+         * - `explode`
+         * - `getDefaultViewPositions`
+         * - `getModels`
+         * - `getSelected`
+         * - `hideSelected`
+         * - `isolateSelected`
+         * - `regenerateAll`
+         * - `resetView`
+         * - `selectModel`
+         * - `setActiveDragger`
+         * - `setDefaultViewPosition`
+         * - `setMarkupColor`
+         * - `setSelected`
+         * - `showAll`
+         * - `unselect`
+         * - `zoomToExtents`
+         * - `zoomToObjects`
+         * - `zoomToSelected`
+         *
+         * To register your own command use the {@link ICommands.registerCommand | registerCommand()}
+         * method of the {@link commands} manager.
          *
-         * @param id - Identifier of the command to execute.
-         * @param args - Parameters passed to the command function.
-         * @returns A returned value of the given command. Returns `undefined` when the command doesn't exists.
+         * @param id - Command ID or dragger name.
+         * @param args - Parameters passed to the command handler function.
+         * @returns Returns the result of the command handler function or new active dragger
+         *   instance. Returns `undefined` if neither the command nor the dragger exists.
          */
         executeCommand(id, ...args) {
             return commands("VisualizeJS").executeCommand(id, this, ...args);