@inweb/viewer-visualize 25.7.0 → 25.7.2

package/dist/viewer-visualize.module.js

@@ -365,6 +365,15 @@ const CanvasEvents = [ "click", "contextmenu", "dblclick", "mousedown", "mousele
 
 const CANVAS_EVENTS = CanvasEvents;
 
+class Dragger {
+    constructor(viewer) {
+        this.name = "";
+    }
+    initialize() {}
+    dispose() {}
+    updatePreview() {}
+}
+
 const composeMatrixFromTransform = (translate, rotate, scale, modelCenter, matrix) => {
     const translateMatrix = matrix.setTranslation([ translate.x, translate.y, translate.z ]);
     const rotateMatrix = matrix.setToRotation(rotate.angle, [ rotate.x, rotate.y, rotate.z ], modelCenter);
@@ -727,11 +736,11 @@ class EventEmitter2 {
     off(type, listener) {
         return this.removeEventListener(type, listener);
     }
-    emit(event, ...args) {
-        if (typeof event === "string") return this.emitEvent({
-            type: event,
+    emit(type, ...args) {
+        if (typeof type === "string") return this.emitEvent({
+            type: type,
             args: args
-        }); else if (typeof event === "object") return this.emitEvent(event); else return false;
+        }); else if (typeof type === "object") return this.emitEvent(type); else return false;
     }
 }
 
@@ -2992,14 +3001,6 @@ class LoaderFactory {
     }
 }
 
-var MarkupType;
-
-(function(MarkupType) {
-    MarkupType[MarkupType["Unknown"] = 0] = "Unknown";
-    MarkupType["Konva"] = "Konva";
-    MarkupType["Visualize"] = "Visualize";
-})(MarkupType || (MarkupType = {}));
-
 var MarkupMode;
 
 (function(MarkupMode) {
@@ -3901,6 +3902,8 @@ const MarkupMode2Konva = new Map([ [ MarkupMode.SelectMarkup, {
 class KonvaMarkup {
     constructor() {
         this._isInitialized = false;
+        this._markupIsActive = false;
+        this._markupColor = new MarkupColor(255, 0, 0);
         this._zIndex = 1;
         this._markupContainerName = "markupContainer";
         this.lineWidth = 4;
@@ -3935,14 +3938,15 @@ class KonvaMarkup {
             })))));
         };
         this.redirectToViewer = event => {
-            this._viewer.emit(event);
+            if (this._viewer) this._viewer.emit(event);
         };
     }
-    initialize(viewer, canvas, canvasEvents = []) {
-        if (!Konva) throw new Error('Konva Markup: Error during Markup Initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
+    initialize(canvas, canvasEvents, viewer, worldTransformer) {
+        if (!Konva) throw new Error('Markup: Error during initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
         this._viewer = viewer;
+        this._worldTransformer = worldTransformer;
         this._canvasOriginal = canvas;
-        this._canvasEvents = canvasEvents;
+        this._canvasEvents = canvasEvents !== null && canvasEvents !== void 0 ? canvasEvents : [];
         this._markupContainer = document.createElement("div");
         this._markupContainer.id = this._markupContainerName;
         this._markupContainer.style.position = "absolute";
@@ -3951,32 +3955,35 @@ class KonvaMarkup {
         this._markupContainer.style.outline = "0px";
         const parentDiv = this._canvasOriginal.parentElement;
         parentDiv.appendChild(this._markupContainer);
-        this._markupColor = new MarkupColor(255, 0, 0);
-        this._markupIsActive = false;
+        this._markupColor.setColor(255, 0, 0);
         this.initializeKonva();
         this.resize();
         this._canvasEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
-        this._viewer.addEventListener("resize", this.resize);
-        this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
-        this._viewer.addEventListener("pan", this.pan);
+        if (this._viewer) {
+            this._viewer.addEventListener("resize", this.resize);
+            this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
+            this._viewer.addEventListener("pan", this.pan);
+        }
         this._isInitialized = true;
     }
     dispose() {
         if (!this._isInitialized) return;
+        if (this._viewer) {
+            this._viewer.removeEventListener("pan", this.pan);
+            this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+            this._viewer.removeEventListener("resize", this.resize);
+        }
         this._canvasEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
-        this._viewer.removeEventListener("pan", this.pan);
-        this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-        this._viewer.removeEventListener("resize", this.resize);
         this.destroyKonva();
         this._markupContainer.remove();
         this._markupContainer = undefined;
         this._canvasOriginal = undefined;
         this._viewer = undefined;
+        this._worldTransformer = undefined;
+        this._markupIsActive = false;
         this._isInitialized = false;
     }
-    getDraggers() {
-        return null;
-    }
+    syncOverlay() {}
     clearOverlay() {
         this.removeTextInput();
         this.removeImageInput();
@@ -4018,7 +4025,6 @@ class KonvaMarkup {
         this.loadMarkup(viewpoint);
     }
     getViewpoint() {
-        if (!this._viewer.visualizeJs) return {};
         const viewpoint = {
             lines: [],
             texts: [],
@@ -4039,7 +4045,7 @@ class KonvaMarkup {
         return viewpoint;
     }
     createObject(type, params) {
-        let object;
+        let object = null;
         let zIndex = this._zIndex;
         switch (type.toLocaleLowerCase()) {
           case "line":
@@ -4443,7 +4449,7 @@ class KonvaMarkup {
                     x: linePoints[i],
                     y: linePoints[i + 1]
                 });
-                const worldPoint = this._viewer.visViewer().screenToWorld(atPoint.x * window.devicePixelRatio, atPoint.y * window.devicePixelRatio);
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
                 worldPoints.push(worldPoint);
             }
             const konvaLine = new KonvaLine(null, line);
@@ -4460,22 +4466,19 @@ class KonvaMarkup {
     getMarkupTexts() {
         const texts = [];
         const textSize = .02;
-        let textScale = 1;
-        const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
-        const mtrxNumber = projMtrx.get(1, 1);
-        const tol = 1e-6;
-        if (mtrxNumber > tol || mtrxNumber < -tol) {
-            textScale = 1 / mtrxNumber;
-        }
+        const textScale = this._worldTransformer.getScale();
         this.konvaLayerFind(MarkupMode.Text).forEach((text => {
             if (!text) return;
-            const position = this._viewer.visViewer().screenToWorld(text.x() * window.devicePixelRatio, text.y() * window.devicePixelRatio);
+            const position = this._worldTransformer.screenToWorld({
+                x: text.x(),
+                y: text.y()
+            });
             const shape = new KonvaText(null, text);
             texts.push({
                 id: shape.id(),
                 position: this.getPoint3dFromArray(position),
                 text: shape.getText(),
-                text_size: textSize * textScale,
+                text_size: textSize * textScale.y,
                 angle: shape.getRotation(),
                 color: shape.getColor(),
                 font_size: shape.getFontSize()
@@ -4487,7 +4490,7 @@ class KonvaMarkup {
         const rectangles = [];
         this.konvaLayerFind(MarkupMode.Rectangle).forEach((rect => {
             const position = rect.position();
-            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaRectangle(null, rect);
             rectangles.push({
                 id: shape.id(),
@@ -4504,7 +4507,7 @@ class KonvaMarkup {
         const ellipses = [];
         this.konvaLayerFind(MarkupMode.Ellipse).forEach((ellipse => {
             const position = ellipse.position();
-            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaEllipse(null, ellipse);
             ellipses.push({
                 id: shape.id(),
@@ -4527,12 +4530,12 @@ class KonvaMarkup {
                 x: arrow.points()[0],
                 y: arrow.points()[1]
             });
-            const worldStartPoint = this._viewer.visViewer().screenToWorld(atStartPoint.x * window.devicePixelRatio, atStartPoint.y * window.devicePixelRatio);
+            const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
             const atEndPoint = absoluteTransform.point({
                 x: arrow.points()[2],
                 y: arrow.points()[3]
             });
-            const worldEndPoint = this._viewer.visViewer().screenToWorld(atEndPoint.x * window.devicePixelRatio, atEndPoint.y * window.devicePixelRatio);
+            const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
             const shape = new KonvaArrow(null, arrow);
             arrows.push({
                 id: shape.id(),
@@ -4547,7 +4550,7 @@ class KonvaMarkup {
         const images = [];
         this.konvaLayerFind(MarkupMode.Image).forEach((image => {
             const position = image.position();
-            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaImage(null, image);
             images.push({
                 id: shape.id(),
@@ -4563,7 +4566,7 @@ class KonvaMarkup {
         const clouds = [];
         this.konvaLayerFind(MarkupMode.Cloud).forEach((cloud => {
             const position = cloud.position();
-            const worldPoint = this._viewer.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+            const worldPoint = this._worldTransformer.screenToWorld(position);
             const shape = new KonvaCloud(null, cloud);
             clouds.push({
                 id: shape.id(),
@@ -4581,57 +4584,36 @@ class KonvaMarkup {
         (_a = viewpoint.lines) === null || _a === void 0 ? void 0 : _a.forEach((vpLine => {
             const linePoints = [];
             vpLine.points.forEach((point => {
-                const screenPoint = worldToScreen([ point.x, point.y, point.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+                const screenPoint = this._worldTransformer.worldToScreen(point);
                 linePoints.push(screenPoint.x);
                 linePoints.push(screenPoint.y);
             }));
             this.addLine(linePoints, vpLine.color, vpLine.type, vpLine.width, vpLine.id);
         }));
         (_b = viewpoint.texts) === null || _b === void 0 ? void 0 : _b.forEach((vpText => {
-            const screenPoint = worldToScreen([ vpText.position.x, vpText.position.y, vpText.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
+            const screenPoint = this._worldTransformer.worldToScreen(vpText.position);
             this.addText(vpText.text, screenPoint, vpText.angle, vpText.color, vpText.text_size, vpText.font_size, vpText.id);
         }));
         (_c = viewpoint.rectangles) === null || _c === void 0 ? void 0 : _c.forEach((vpRect => {
-            const screenPoint = worldToScreen([ vpRect.position.x, vpRect.position.y, vpRect.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            this.addRectangle({
-                x: screenPoint.x,
-                y: screenPoint.y
-            }, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
+            const screenPoint = this._worldTransformer.worldToScreen(vpRect.position);
+            this.addRectangle(screenPoint, vpRect.width, vpRect.height, vpRect.line_width, vpRect.color, vpRect.id);
         }));
         (_d = viewpoint.ellipses) === null || _d === void 0 ? void 0 : _d.forEach((vpEllipse => {
-            const screenPoint = worldToScreen([ vpEllipse.position.x, vpEllipse.position.y, vpEllipse.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            this.addEllipse({
-                x: screenPoint.x,
-                y: screenPoint.y
-            }, {
-                x: vpEllipse.radius.x,
-                y: vpEllipse.radius.y
-            }, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
+            const screenPoint = this._worldTransformer.worldToScreen(vpEllipse.position);
+            this.addEllipse(screenPoint, vpEllipse.radius, vpEllipse.line_width, vpEllipse.color, vpEllipse.id);
         }));
         (_e = viewpoint.arrows) === null || _e === void 0 ? void 0 : _e.forEach((vpArrow => {
-            const startPoint = worldToScreen([ vpArrow.start.x, vpArrow.start.y, vpArrow.start.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            const endPoint = worldToScreen([ vpArrow.end.x, vpArrow.end.y, vpArrow.end.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            this.addArrow({
-                x: startPoint.x,
-                y: startPoint.y
-            }, {
-                x: endPoint.x,
-                y: endPoint.y
-            }, vpArrow.color, vpArrow.id);
+            const startPoint = this._worldTransformer.worldToScreen(vpArrow.start);
+            const endPoint = this._worldTransformer.worldToScreen(vpArrow.end);
+            this.addArrow(startPoint, endPoint, vpArrow.color, vpArrow.id);
         }));
         (_f = viewpoint.clouds) === null || _f === void 0 ? void 0 : _f.forEach((vpCloud => {
-            const screenPoint = worldToScreen([ vpCloud.position.x, vpCloud.position.y, vpCloud.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            this.addCloud({
-                x: screenPoint.x,
-                y: screenPoint.y
-            }, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
+            const screenPoint = this._worldTransformer.worldToScreen(vpCloud.position);
+            this.addCloud(screenPoint, vpCloud.width, vpCloud.height, vpCloud.line_width, vpCloud.color, vpCloud.id);
         }));
         (_g = viewpoint.images) === null || _g === void 0 ? void 0 : _g.forEach((vpImage => {
-            const screenPoint = worldToScreen([ vpImage.position.x, vpImage.position.y, vpImage.position.z ], this._viewer.visualizeJs, this._viewer.visViewer());
-            this.addImage({
-                x: screenPoint.x,
-                y: screenPoint.y
-            }, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
+            const screenPoint = this._worldTransformer.worldToScreen(vpImage.position);
+            this.addImage(screenPoint, vpImage.src, vpImage.width, vpImage.height, vpImage.id);
         }));
     }
     combineMarkupWithDrawing() {
@@ -4748,17 +4730,18 @@ class KonvaMarkup {
         this._imageInputPos = null;
     }
     addText(specifiedText, position, angle, color, textSize, fontSize, id) {
+        const trNodes = this._konvaTransformer.nodes();
+        if (trNodes.length > 0) {
+            trNodes[0].destroy();
+            this._konvaTransformer.nodes([]);
+        }
+        this.removeTextInput();
         if (specifiedText) {
-            const tol = 1e-6;
-            if (textSize && textSize > tol && (!fontSize || fontSize < tol)) {
+            const tolerance = 1e-6;
+            if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
                 const size = .02;
-                let scale = 1;
-                const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
-                const mtrxNumber = projMtrx.get(1, 1);
-                if (mtrxNumber > tol || mtrxNumber < -tol) {
-                    scale = 1 / mtrxNumber;
-                }
-                fontSize = textSize / (scale / size) / 34;
+                const scale = this._worldTransformer.getScale();
+                fontSize = textSize / (scale.y / size) / 34;
             }
             const konvaText = new KonvaText({
                 position: {
@@ -4772,14 +4755,8 @@ class KonvaMarkup {
                 id: id
             });
             this._konvaLayer.add(konvaText.ref());
+            return konvaText;
         }
-        const trNodes = this._konvaTransformer.nodes();
-        if (trNodes.length > 0) {
-            trNodes[0].destroy();
-            this._konvaTransformer.nodes([]);
-        }
-        this.removeTextInput();
-        return;
     }
     addRectangle(position, width, height, lineWidth, color, id) {
         if (!position) return;
@@ -4980,6 +4957,8 @@ class OdaTextDragger extends OdBaseDragger {
     }
 }
 
+const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
+
 class VisualizeMarkup {
     constructor() {
         this._markupColor = {
@@ -4990,12 +4969,35 @@ class VisualizeMarkup {
         this.lineWidth = 4;
         this.fontSize = 34;
     }
-    initialize(viewer, canvas, canvasEvents) {
+    initialize(canvas, canvasEvents, viewer, worldTransformer) {
         this._viewer = viewer;
+        this._viewer.registerDragger("Line", OdaLineDragger);
+        this._viewer.registerDragger("Text", OdaTextDragger);
     }
     dispose() {}
-    getDraggers() {
-        return new Map([ [ MarkupMode.Line, OdaLineDragger ], [ MarkupMode.Text, OdaTextDragger ] ]);
+    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;
     }
     clearOverlay() {
         if (!this._viewer.visualizeJs) return;
@@ -5165,38 +5167,38 @@ class VisualizeMarkup {
     }
 }
 
+var MarkupType;
+
+(function(MarkupType) {
+    MarkupType[MarkupType["Unknown"] = 0] = "Unknown";
+    MarkupType["Konva"] = "Konva";
+    MarkupType["Visualize"] = "Visualize";
+})(MarkupType || (MarkupType = {}));
+
 class MarkupFactory {
-    static createMarkup(markupType) {
+    static createMarkup(markupType = MarkupType.Konva) {
         let markup;
         switch (markupType) {
           case MarkupType.Konva:
-            markup = this.createKonva();
+            markup = new KonvaMarkup;
             break;
 
           case MarkupType.Visualize:
-            markup = this.createVisualize();
+            markup = new VisualizeMarkup;
             break;
 
           default:
-            throw new Error("Error during Markup Initialization. Markup Type is unknown.");
+            throw new Error("Error during Markup initialization. Unknown Markup type.");
         }
         return markup;
     }
-    static createKonva() {
-        return new KonvaMarkup;
-    }
-    static createVisualize() {
-        return new VisualizeMarkup;
-    }
 }
 
-const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
-
 const isExist = value => value !== undefined && value !== null;
 
 class Viewer extends EventEmitter2 {
     constructor(client, params = {}) {
-        var _a, _b;
+        var _a;
         super();
         this._visualizeJsUrl = "";
         this.frameId = 0;
@@ -5207,7 +5209,6 @@ class Viewer extends EventEmitter2 {
         this._zoomWheelDragger = null;
         this._gestureManager = null;
         this._renderTime = 0;
-        this.markup = MarkupFactory.createMarkup((_a = params.markupType) !== null && _a !== void 0 ? _a : MarkupType.Konva);
         this.draggerFactory = new Map;
         this.registerDragger("Pan", OdPanDragger);
         this.registerDragger("Orbit", OdOrbitDragger);
@@ -5219,17 +5220,14 @@ class Viewer extends EventEmitter2 {
         this.registerDragger("CuttingPlaneYAxis", OdCuttingPlaneYAxisDragger);
         this.registerDragger("CuttingPlaneZAxis", OdCuttingPlaneZAxisDragger);
         this.registerDragger("Walk", OdaWalkDragger);
-        const markupDraggers = this.markup.getDraggers();
-        markupDraggers === null || markupDraggers === void 0 ? void 0 : markupDraggers.forEach(((value, key) => {
-            this.registerDragger(key, value);
-        }));
         this.canvasEvents = CANVAS_EVENTS.slice();
         this.canvaseventlistener = event => this.emit(event);
-        this._enableAutoUpdate = (_b = params.enableAutoUpdate) !== null && _b !== void 0 ? _b : true;
+        this._enableAutoUpdate = (_a = params.enableAutoUpdate) !== null && _a !== void 0 ? _a : true;
         this._isNeedRender = false;
         this._isRunAsyncUpdate = false;
         this.render = this.render.bind(this);
         this.resize = this.resize.bind(this);
+        this._markup = MarkupFactory.createMarkup(params.markupType);
     }
     get options() {
         return this._options;
@@ -5237,6 +5235,9 @@ class Viewer extends EventEmitter2 {
     get visualizeJsUrl() {
         return this._visualizeJsUrl;
     }
+    get markup() {
+        return this._markup;
+    }
     configure(params) {
         this._visualizeJsUrl = params.visualizeJsUrl || "https://opencloud.azureedge.net/libs/visualizejs/master/Visualize.js";
         return this;
@@ -5270,7 +5271,7 @@ class Viewer extends EventEmitter2 {
         this.visualizeJs.Viewer.create();
         this.canvas = canvas;
         this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
-        this.markup.initialize(this, canvas, this.canvasEvents);
+        this._markup.initialize(this.canvas, this.canvasEvents, this, this);
         this._resizeObserver = new ResizeObserver(this.resize);
         this._resizeObserver.observe(canvas.parentElement);
         this.resize();
@@ -5303,7 +5304,7 @@ class Viewer extends EventEmitter2 {
         this._zoomWheelDragger = undefined;
         if (this._resizeObserver) this._resizeObserver.disconnect();
         this._resizeObserver = undefined;
-        this.markup.dispose();
+        this._markup.dispose();
         if (this.canvas) {
             this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
             this.canvas = undefined;
@@ -5572,31 +5573,10 @@ class Viewer extends EventEmitter2 {
         this.update();
     }
     clearOverlay() {
-        this.markup.clearOverlay();
+        this._markup.clearOverlay();
     }
     syncOverlay() {
-        if (!this.visualizeJs) return;
-        const visViewer = this.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.update();
-        return overlayView;
+        return this._markup.syncOverlay();
     }
     is3D() {
         if (!this.visualizeJs) return false;
@@ -5607,6 +5587,41 @@ class Viewer extends EventEmitter2 {
         const extHeight = max[2] - min[2];
         return extHeight !== 0;
     }
+    screenToWorld(position) {
+        return this.visViewer().screenToWorld(position.x * window.devicePixelRatio, position.y * window.devicePixelRatio);
+    }
+    worldToScreen(position) {
+        if (!this.visualizeJs) return position;
+        const activeView = this.visViewer().activeView;
+        const worldMatrix = activeView.worldToDeviceMatrix;
+        const worldPoint = this.visLib().Point3d.createFromArray([ position.x, position.y, position.z ]);
+        const devicePoint = worldPoint.transformBy(worldMatrix);
+        const result = {
+            x: devicePoint.x / window.devicePixelRatio,
+            y: devicePoint.y / window.devicePixelRatio
+        };
+        devicePoint.delete();
+        worldPoint.delete();
+        worldMatrix.delete();
+        activeView.delete();
+        return result;
+    }
+    getScale() {
+        const result = {
+            x: 1,
+            y: 1,
+            z: 1
+        };
+        const projMatrix = this.visViewer().activeView.projectionMatrix;
+        const tolerance = 1e-6;
+        const x = projMatrix.get(1, 1);
+        if (x > tolerance || x < -tolerance) result.x = 1 / result.x;
+        const y = projMatrix.get(1, 1);
+        if (y > tolerance || y < -tolerance) result.y = 1 / result.y;
+        const z = projMatrix.get(2, 2);
+        if (z > tolerance || z < -tolerance) result.z = 1 / result.z;
+        return result;
+    }
     getSelected() {
         return this.executeCommand("getSelected");
     }
@@ -5792,10 +5807,10 @@ class Viewer extends EventEmitter2 {
         return this;
     }
     getMarkupColor() {
-        return this.markup.getMarkupColor();
+        return this._markup.getMarkupColor();
     }
     setMarkupColor(r = 255, g = 0, b = 0) {
-        this.markup.setMarkupColor(r, g, b);
+        this._markup.setMarkupColor(r, g, b);
         const color = {
             r: r,
             g: g,
@@ -5807,10 +5822,10 @@ class Viewer extends EventEmitter2 {
         });
     }
     colorizeAllMarkup(r = 255, g = 0, b = 0) {
-        this.markup.colorizeAllMarkup(r, g, b);
+        this._markup.colorizeAllMarkup(r, g, b);
     }
     colorizeSelectedMarkups(r = 255, g = 0, b = 0) {
-        this.markup.colorizeSelectedMarkups(r, g, b);
+        this._markup.colorizeSelectedMarkups(r, g, b);
     }
     addMarkupEntity(entityName) {
         if (!this.visualizeJs) return null;
@@ -5829,10 +5844,10 @@ class Viewer extends EventEmitter2 {
     drawViewpoint(viewpoint) {
         this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
         this.setClippingPlanes(viewpoint.clipping_planes);
-        this.markup.setViewpoint(viewpoint);
+        this._markup.setViewpoint(viewpoint);
     }
     createViewpoint() {
-        const vp = this.markup.getViewpoint();
+        const vp = this._markup.getViewpoint();
         vp.orthogonal_camera = this.getOrthogonalCameraSettings();
         vp.clipping_planes = this.getClippingPlanes();
         return vp;
@@ -5909,5 +5924,5 @@ class Viewer extends EventEmitter2 {
     }
 }
 
-export { CANVAS_EVENTS, CanvasEvents, OdBaseDragger, Options, Viewer, commands, defaultOptions };
+export { CANVAS_EVENTS, CanvasEvents, Dragger, MarkupType, OdBaseDragger, Options, Viewer, commands, defaultOptions };
 //# sourceMappingURL=viewer-visualize.module.js.map