@inweb/viewer-visualize 25.8.10 → 25.8.12

package/dist/viewer-visualize.js

@@ -12298,7 +12298,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "line";
+            return "Line";
         }
         getColor() {
             return this._ref.stroke();
@@ -12418,7 +12418,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "text";
+            return "Text";
         }
         getColor() {
             return this._ref.fill();
@@ -12543,7 +12543,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "rectangle";
+            return "Rectangle";
         }
         getColor() {
             return this._ref.stroke();
@@ -12671,7 +12671,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "ellipse";
+            return "Ellipse";
         }
         getColor() {
             return this._ref.stroke();
@@ -12732,7 +12732,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "arrow";
+            return "Arrow";
         }
         getColor() {
             return this._ref.stroke();
@@ -12885,7 +12885,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "image";
+            return "Image";
         }
         getRotation() {
             return this._ref.rotation();
@@ -13036,7 +13036,7 @@
             this._ref.draggable(value);
         }
         type() {
-            return "cloud";
+            return "Cloud";
         }
         getColor() {
             return this._ref.stroke();
@@ -13096,8 +13096,7 @@
         },
         Line: {
             name: "Line",
-            initializer: (ref, params = null) => new KonvaLine(params, ref),
-            zIndex: 1
+            initializer: (ref, params = null) => new KonvaLine(params, ref)
         },
         Text: {
             name: "Text",
@@ -13105,28 +13104,23 @@
         },
         Rectangle: {
             name: "Rect",
-            initializer: (ref, params = null) => new KonvaRectangle(params, ref),
-            zIndex: 1
+            initializer: (ref, params = null) => new KonvaRectangle(params, ref)
         },
         Ellipse: {
             name: "Ellipse",
-            initializer: (ref, params = null) => new KonvaEllipse(params, ref),
-            zIndex: 1
+            initializer: (ref, params = null) => new KonvaEllipse(params, ref)
         },
         Arrow: {
             name: "Arrow",
-            initializer: (ref, params = null) => new KonvaArrow(params, ref),
-            zIndex: 1
+            initializer: (ref, params = null) => new KonvaArrow(params, ref)
         },
         Image: {
             name: "Image",
-            initializer: (ref, params = null) => new KonvaImage(params, ref),
-            zIndex: 0
+            initializer: (ref, params = null) => new KonvaImage(params, ref)
         },
         Cloud: {
             name: "Cloud",
-            initializer: (ref, params = null) => new KonvaCloud(params, ref),
-            zIndex: 1
+            initializer: (ref, params = null) => new KonvaCloud(params, ref)
         }
     };
 
@@ -13135,7 +13129,6 @@
             this._pointerEvents = [];
             this._markupIsActive = false;
             this._markupColor = new MarkupColor(255, 0, 0);
-            this._zIndex = 1;
             this.lineWidth = 4;
             this.lineType = "solid";
             this.fontSize = 34;
@@ -13235,6 +13228,9 @@
         }
         setViewpoint(viewpoint) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
+            this.clearSelected();
+            this.removeTextInput();
+            this.removeImageInput();
             const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
                 r: 255,
                 g: 0,
@@ -13297,6 +13293,8 @@
         enableEditMode(mode) {
             if (!mode || !MarkupMode2Konva[mode]) {
                 this.clearSelected();
+                this.removeTextInput();
+                this.removeImageInput();
                 this._markupIsActive = false;
             } else {
                 this._markupMode = mode;
@@ -13305,13 +13303,10 @@
             return this;
         }
         createObject(type, params) {
-            var _a;
             const konvaShape = MarkupMode2Konva[type];
             if (!konvaShape || !konvaShape.initializer) throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
             const object = konvaShape.initializer(null, params);
             this.addObject(object);
-            object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
-            this._zIndex++;
             return object;
         }
         getObjects() {
@@ -13339,13 +13334,13 @@
             if (this._konvaTransformer) this._konvaTransformer.nodes([]);
         }
         addObject(object) {
-            if (this._konvaLayer) this._konvaLayer.add(object.ref());
+            if (object.type() === "Image") this._groupImages.add(object.ref()); else if (object.type() === "Text") this._groupTexts.add(object.ref()); else this._groupGeometry.add(object.ref());
         }
         konvaLayerFind(type) {
             if (!this._konvaLayer) return [];
             const konvaShape = MarkupMode2Konva[type];
             if (!konvaShape || !konvaShape.initializer) return [];
-            return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer));
+            return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer || ref.parent === this._groupImages || ref.parent === this._groupGeometry || ref.parent === this._groupTexts));
         }
         initializeKonva() {
             const stage = new Konva.Stage({
@@ -13358,6 +13353,12 @@
                 pixelRation: window.devicePixelRatio
             });
             stage.add(layer);
+            this._groupImages = new Konva.Group;
+            layer.add(this._groupImages);
+            this._groupGeometry = new Konva.Group;
+            layer.add(this._groupGeometry);
+            this._groupTexts = new Konva.Group;
+            layer.add(this._groupTexts);
             this._konvaLayer = layer;
             const transformer = new Konva.Transformer({
                 shouldOverdrawWholeArea: false,
@@ -13523,7 +13524,7 @@
                         this.removeImageInput();
                     }
                 }
-                if (transformer.nodes().filter((x => x.className === "Cloud")).length > 0 || e.target.className === "Cloud") {
+                if (transformer.nodes().filter((x => x.className === "Cloud" || x.className === "Image")).length > 0 || e.target.className === "Cloud" || e.target.className === "Image") {
                     transformer.rotateEnabled(false);
                 } else {
                     transformer.rotateEnabled(true);
@@ -13556,8 +13557,13 @@
         }
         destroyKonva() {
             var _a;
+            this.removeTextInput();
+            this.removeImageInput();
             this.clearOverlay();
             (_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
+            this._groupImages = undefined;
+            this._groupGeometry = undefined;
+            this._groupTexts = undefined;
             this._konvaLayer = undefined;
             this._konvaTransformer = undefined;
             this._konvaStage = undefined;
@@ -13754,6 +13760,9 @@
                 this._textInputRef.style.display = "block";
                 this._textInputRef.style.top = inputY + "px";
                 this._textInputRef.style.left = inputX + "px";
+                this._textInputRef.style.fontSize = `${this.fontSize}px`;
+                this._textInputRef.style.color = `${this._markupColor.HexColor}`;
+                this._textInputRef.style.fontFamily = "Calibri";
                 this._textInputRef.onkeydown = event => {
                     if (event.key === "Enter" && !event.shiftKey) {
                         event.preventDefault();
@@ -16388,7 +16397,6 @@
         }
     }
 
-    const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
     class VisualizeMarkup {
         constructor() {
             this._markupColor = { r: 255, g: 0, b: 0 };
@@ -16401,31 +16409,7 @@
             this._viewer.registerDragger("Text", OdaTextDragger);
         }
         dispose() { }
-        syncOverlay() {
-            if (!this._viewer.visualizeJs)
-                return;
-            const visViewer = this._viewer.visViewer();
-            const activeView = visViewer.activeView;
-            let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
-            if (!overlayView) {
-                const overlayModel = visViewer.getMarkupModel();
-                const pDevice = visViewer.getActiveDevice();
-                overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
-                overlayView.addModel(overlayModel);
-                activeView.addSibling(overlayView);
-                pDevice.addView(overlayView);
-            }
-            overlayView.viewPosition = activeView.viewPosition;
-            overlayView.viewTarget = activeView.viewTarget;
-            overlayView.upVector = activeView.upVector;
-            overlayView.viewFieldWidth = activeView.viewFieldWidth;
-            overlayView.viewFieldHeight = activeView.viewFieldHeight;
-            const viewPort = overlayView.getViewport();
-            overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
-            overlayView.vportRect = activeView.vportRect;
-            this._viewer.update();
-            return overlayView;
-        }
+        syncOverlay() { }
         clearOverlay() {
             if (!this._viewer.visualizeJs)
                 return;
@@ -16433,7 +16417,6 @@
             const model = visViewer.getMarkupModel();
             model.clearEntities();
             model.delete();
-            this._viewer.update();
         }
         getMarkupColor() {
             return this._markupColor;
@@ -16571,23 +16554,19 @@
             return viewpoint;
         }
         enableEditMode(mode) {
-            throw new Error("Not implemented yet");
+            return this;
         }
         createObject(type, params) {
-            throw new Error("Not implemented yet");
+            return undefined;
         }
         getObjects() {
-            throw new Error("Not implemented yet");
+            return [];
         }
         getSelectedObjects() {
-            throw new Error("Not implemented yet");
-        }
-        selectObjects(objects) {
-            throw new Error("Not implemented yet");
-        }
-        clearSelected() {
-            throw new Error("Not implemented yet");
+            return [];
         }
+        selectObjects(objects) { }
+        clearSelected() { }
     }
 
     ///////////////////////////////////////////////////////////////////////////////
@@ -16618,6 +16597,7 @@
     }
 
     ///////////////////////////////////////////////////////////////////////////////
+    const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
     const isExist = (value) => value !== undefined && value !== null;
     /**
      * The `Client.js` library class that provides methods to integrate with the
@@ -17143,16 +17123,41 @@
             this.update();
         }
         /**
-         * Remove markup overlay.
+         * Clear overlay view.
          */
         clearOverlay() {
+            if (!this.visualizeJs)
+                return;
             this._markup.clearOverlay();
+            this.update();
         }
         /**
-         * Synchronize markup overlay.
+         * Create overlay view.
          */
         syncOverlay() {
-            return this._markup.syncOverlay();
+            if (!this.visualizeJs)
+                return;
+            const visViewer = this.visViewer();
+            const activeView = visViewer.activeView;
+            let overlayView = visViewer.getViewByName(OVERLAY_VIEW_NAME);
+            if (!overlayView) {
+                const markupModel = visViewer.getMarkupModel();
+                const pDevice = visViewer.getActiveDevice();
+                overlayView = pDevice.createView(OVERLAY_VIEW_NAME, false);
+                overlayView.addModel(markupModel);
+                activeView.addSibling(overlayView);
+                pDevice.addView(overlayView);
+            }
+            overlayView.viewPosition = activeView.viewPosition;
+            overlayView.viewTarget = activeView.viewTarget;
+            overlayView.upVector = activeView.upVector;
+            overlayView.viewFieldWidth = activeView.viewFieldWidth;
+            overlayView.viewFieldHeight = activeView.viewFieldHeight;
+            const viewPort = overlayView.getViewport();
+            overlayView.setViewport(viewPort.lowerLeft, viewPort.upperRight);
+            overlayView.vportRect = activeView.vportRect;
+            this._markup.syncOverlay();
+            this.update();
         }
         /**
          * Returns `true` if current drawing is 3D drawing.