@inweb/viewer-visualize 25.7.0 → 25.7.2

package/dist/viewer-visualize.js

@@ -369,6 +369,15 @@
 
     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]);
@@ -714,11 +723,11 @@
         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;
         }
     }
 
@@ -1771,7 +1780,7 @@
     }
 
     ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2021, Open Design Alliance (the "Alliance").
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
     // All rights reserved.
     //
     // This software and its documentation and related materials are owned by
@@ -1786,7 +1795,7 @@
     //
     //   This application incorporates Open Design Alliance software pursuant to a
     //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
     //   All rights reserved.
     //
     // By use of this software, its documentation or related materials, you
@@ -1979,7 +1988,7 @@
     }
 
     ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2021, Open Design Alliance (the "Alliance").
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
     // All rights reserved.
     //
     // This software and its documentation and related materials are owned by
@@ -1994,7 +2003,7 @@
     //
     //   This application incorporates Open Design Alliance software pursuant to a
     //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
     //   All rights reserved.
     //
     // By use of this software, its documentation or related materials, you
@@ -2073,7 +2082,7 @@
     }
 
     ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2021, Open Design Alliance (the "Alliance").
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
     // All rights reserved.
     //
     // This software and its documentation and related materials are owned by
@@ -2088,7 +2097,7 @@
     //
     //   This application incorporates Open Design Alliance software pursuant to a
     //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
     //   All rights reserved.
     //
     // By use of this software, its documentation or related materials, you
@@ -2596,7 +2605,7 @@
     }
 
     ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2023, Open Design Alliance (the "Alliance").
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
     // All rights reserved.
     //
     // This software and its documentation and related materials are owned by
@@ -2611,7 +2620,7 @@
     //
     //   This application incorporates Open Design Alliance software pursuant to a
     //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
     //   All rights reserved.
     //
     // By use of this software, its documentation or related materials, you
@@ -2660,7 +2669,7 @@
     };
 
     ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2021, Open Design Alliance (the "Alliance").
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
     // All rights reserved.
     //
     // This software and its documentation and related materials are owned by
@@ -2675,7 +2684,7 @@
     //
     //   This application incorporates Open Design Alliance software pursuant to a
     //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2021 by Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
     //   All rights reserved.
     //
     // By use of this software, its documentation or related materials, you
@@ -3027,53 +3036,6 @@
         }
     }
 
-    ///////////////////////////////////////////////////////////////////////////////
-    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
-    // All rights reserved.
-    //
-    // This software and its documentation and related materials are owned by
-    // the Alliance. The software may only be incorporated into application
-    // programs owned by members of the Alliance, subject to a signed
-    // Membership Agreement and Supplemental Software License Agreement with the
-    // Alliance. The structure and organization of this software are the valuable
-    // trade secrets of the Alliance and its suppliers. The software is also
-    // protected by copyright law and international treaty provisions. Application
-    // programs incorporating this software must include the following statement
-    // with their copyright notices:
-    //
-    //   This application incorporates Open Design Alliance software pursuant to a
-    //   license agreement with Open Design Alliance.
-    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
-    //   All rights reserved.
-    //
-    // By use of this software, its documentation or related materials, you
-    // acknowledge and accept the above terms.
-    ///////////////////////////////////////////////////////////////////////////////
-    /**
-     * Version of the markup support. Old = "Visualize", New = "Konva"
-     */
-    var MarkupType;
-    (function (MarkupType) {
-        MarkupType[MarkupType["Unknown"] = 0] = "Unknown";
-        MarkupType["Konva"] = "Konva";
-        MarkupType["Visualize"] = "Visualize";
-    })(MarkupType || (MarkupType = {}));
-    /**
-     * Defines type of markup object. For old Visualize markup ({@link MarkupType}) only "Line" and
-     * "Text" markup objects are supported.
-     */
-    var MarkupMode;
-    (function (MarkupMode) {
-        MarkupMode["SelectMarkup"] = "SelectMarkup";
-        MarkupMode["Line"] = "Line";
-        MarkupMode["Text"] = "Text";
-        MarkupMode["Rectangle"] = "Rectangle";
-        MarkupMode["Ellipse"] = "Ellipse";
-        MarkupMode["Arrow"] = "Arrow";
-        MarkupMode["Image"] = "Image";
-        MarkupMode["Cloud"] = "Cloud";
-    })(MarkupMode || (MarkupMode = {}));
-
     var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
     function getDefaultExportFromCjs (x) {
@@ -3106,7 +3068,7 @@
     	            : {};
     	exports.Konva = {
     	    _global: exports.glob,
-    	    version: '9.3.6',
+    	    version: '9.3.13',
     	    isBrowser: detectBrowser(),
     	    isUnminified: /param/.test(function (param) { }.toString()),
     	    dblClickWindow: 400,
@@ -3127,6 +3089,7 @@
     	    _mouseDblClickPointerId: null,
     	    _touchDblClickPointerId: null,
     	    _pointerDblClickPointerId: null,
+    	    _fixTextRendering: false,
     	    pixelRatio: (typeof window !== 'undefined' && window.devicePixelRatio) || 1,
     	    dragDistance: 3,
     	    angleDeg: true,
@@ -7258,6 +7221,7 @@
     	            DragAndDrop_1.DD.justDragged = false;
     	            Global_1.Konva['_' + eventType + 'ListenClick'] = true;
     	            if (!shape || !shape.isListening()) {
+    	                this[eventType + 'ClickStartShape'] = undefined;
     	                return;
     	            }
     	            if (Global_1.Konva.capturePointerEventsEnabled) {
@@ -7565,7 +7529,14 @@
     	exports.Stage = Stage;
     	Stage.prototype.nodeType = STAGE;
     	(0, Global_2._registerNode)(Stage);
-    	Factory_1.Factory.addGetterSetter(Stage, 'container'); 
+    	Factory_1.Factory.addGetterSetter(Stage, 'container');
+    	if (Global_1.Konva.isBrowser) {
+    	    document.addEventListener('visibilitychange', () => {
+    	        exports.stages.forEach((stage) => {
+    	            stage.batchDraw();
+    	        });
+    	    });
+    	} 
     } (Stage));
 
     var Layer$1 = {};
@@ -7845,8 +7816,17 @@
     	        };
     	    }
     	    getClientRect(config = {}) {
+    	        let hasCachedParent = false;
+    	        let parent = this.getParent();
+    	        while (parent) {
+    	            if (parent.isCached()) {
+    	                hasCachedParent = true;
+    	                break;
+    	            }
+    	            parent = parent.getParent();
+    	        }
     	        const skipTransform = config.skipTransform;
-    	        const relativeTo = config.relativeTo;
+    	        const relativeTo = config.relativeTo || (hasCachedParent && this.getStage()) || undefined;
     	        const fillRect = this.getSelfRect();
     	        const applyStroke = !config.skipStroke && this.hasStroke();
     	        const strokeWidth = (applyStroke && this.strokeWidth()) || 0;
@@ -9169,7 +9149,7 @@
     const Shape_1$f = Shape;
     const Global_1$g = Global;
     const Validators_1$u = Validators;
-    const Global_2$2 = Global;
+    const Global_2$3 = Global;
     class Arc extends Shape_1$f.Shape {
         _sceneFunc(context) {
             var angle = Global_1$g.Konva.getAngle(this.angle()), clockwise = this.clockwise();
@@ -9216,7 +9196,7 @@
     Arc.prototype._centroid = true;
     Arc.prototype.className = 'Arc';
     Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
-    (0, Global_2$2._registerNode)(Arc);
+    (0, Global_2$3._registerNode)(Arc);
     Factory_1$v.Factory.addGetterSetter(Arc, 'innerRadius', 0, (0, Validators_1$u.getNumberValidator)());
     Factory_1$v.Factory.addGetterSetter(Arc, 'outerRadius', 0, (0, Validators_1$u.getNumberValidator)());
     Factory_1$v.Factory.addGetterSetter(Arc, 'angle', 0, (0, Validators_1$u.getNumberValidator)());
@@ -10366,51 +10346,29 @@
             return null;
         }
         static getPointOnLine(dist, P1x, P1y, P2x, P2y, fromX, fromY) {
-            if (fromX === undefined) {
-                fromX = P1x;
+            fromX = fromX !== null && fromX !== void 0 ? fromX : P1x;
+            fromY = fromY !== null && fromY !== void 0 ? fromY : P1y;
+            const len = this.getLineLength(P1x, P1y, P2x, P2y);
+            if (len < 1e-10) {
+                return { x: P1x, y: P1y };
             }
-            if (fromY === undefined) {
-                fromY = P1y;
-            }
-            var m = (P2y - P1y) / (P2x - P1x + 0.00000001);
-            var run = Math.sqrt((dist * dist) / (1 + m * m));
-            if (P2x < P1x) {
-                run *= -1;
-            }
-            var rise = m * run;
-            var pt;
             if (P2x === P1x) {
-                pt = {
-                    x: fromX,
-                    y: fromY + rise,
-                };
-            }
-            else if ((fromY - P1y) / (fromX - P1x + 0.00000001) === m) {
-                pt = {
-                    x: fromX + run,
-                    y: fromY + rise,
-                };
-            }
-            else {
-                var ix, iy;
-                var len = this.getLineLength(P1x, P1y, P2x, P2y);
-                var u = (fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y);
-                u = u / (len * len);
-                ix = P1x + u * (P2x - P1x);
-                iy = P1y + u * (P2y - P1y);
-                var pRise = this.getLineLength(fromX, fromY, ix, iy);
-                var pRun = Math.sqrt(dist * dist - pRise * pRise);
-                run = Math.sqrt((pRun * pRun) / (1 + m * m));
-                if (P2x < P1x) {
-                    run *= -1;
-                }
-                rise = m * run;
-                pt = {
-                    x: ix + run,
-                    y: iy + rise,
-                };
-            }
-            return pt;
+                return { x: fromX, y: fromY + (P2y > P1y ? dist : -dist) };
+            }
+            const m = (P2y - P1y) / (P2x - P1x);
+            const run = Math.sqrt((dist * dist) / (1 + m * m)) * (P2x < P1x ? -1 : 1);
+            const rise = m * run;
+            if (Math.abs(fromY - P1y - m * (fromX - P1x)) < 1e-10) {
+                return { x: fromX + run, y: fromY + rise };
+            }
+            const u = ((fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y)) / (len * len);
+            const ix = P1x + u * (P2x - P1x);
+            const iy = P1y + u * (P2y - P1y);
+            const pRise = this.getLineLength(fromX, fromY, ix, iy);
+            const pRun = Math.sqrt(dist * dist - pRise * pRise);
+            const adjustedRun = Math.sqrt((pRun * pRun) / (1 + m * m)) * (P2x < P1x ? -1 : 1);
+            const adjustedRise = m * adjustedRun;
+            return { x: ix + adjustedRun, y: iy + adjustedRise };
         }
         static getPointOnCubicBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
             function CB1(t) {
@@ -11597,8 +11555,9 @@
     const Util_1$5 = Util;
     const Factory_1$i = Factory;
     const Shape_1$3 = Shape;
-    const Validators_1$i = Validators;
     const Global_1$3 = Global;
+    const Validators_1$i = Validators;
+    const Global_2$2 = Global;
     function stringToArray(string) {
         return Array.from(string);
     }
@@ -11675,15 +11634,22 @@
             }
             var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), direction = this.direction(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
             direction = direction === INHERIT ? context.direction : direction;
-            var translateY = 0;
             var translateY = lineHeightPx / 2;
+            var baseline = MIDDLE;
+            if (Global_1$3.Konva._fixTextRendering) {
+                var metrics = this.measureSize('M');
+                baseline = 'alphabetic';
+                translateY =
+                    (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2 +
+                        lineHeightPx / 2;
+            }
             var lineTranslateX = 0;
             var lineTranslateY = 0;
             if (direction === RTL) {
                 context.setAttr('direction', direction);
             }
             context.setAttr('font', this._getContextFont());
-            context.setAttr('textBaseline', MIDDLE);
+            context.setAttr('textBaseline', baseline);
             context.setAttr('textAlign', LEFT);
             if (verticalAlign === MIDDLE) {
                 alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2;
@@ -11706,12 +11672,17 @@
                 if (shouldUnderline) {
                     context.save();
                     context.beginPath();
-                    context.moveTo(lineTranslateX, translateY + lineTranslateY + Math.round(fontSize / 2));
+                    let yOffset = Global_1$3.Konva._fixTextRendering
+                        ? Math.round(fontSize / 4)
+                        : Math.round(fontSize / 2);
+                    const x = lineTranslateX;
+                    const y = translateY + lineTranslateY + yOffset;
+                    context.moveTo(x, y);
                     spacesNumber = text.split(' ').length - 1;
                     oneWord = spacesNumber === 0;
                     lineWidth =
                         align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
-                    context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + Math.round(fontSize / 2));
+                    context.lineTo(x + Math.round(lineWidth), y);
                     context.lineWidth = fontSize / 15;
                     const gradient = this._getLinearGradient();
                     context.strokeStyle = gradient || fill;
@@ -11721,14 +11692,15 @@
                 if (shouldLineThrough) {
                     context.save();
                     context.beginPath();
-                    context.moveTo(lineTranslateX, translateY + lineTranslateY);
+                    let yOffset = Global_1$3.Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
+                    context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
                     spacesNumber = text.split(' ').length - 1;
                     oneWord = spacesNumber === 0;
                     lineWidth =
                         align === JUSTIFY && lastLine && !oneWord
                             ? totalWidth - padding * 2
                             : width;
-                    context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY);
+                    context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + yOffset);
                     context.lineWidth = fontSize / 15;
                     const gradient = this._getLinearGradient();
                     context.strokeStyle = gradient || fill;
@@ -11800,12 +11772,25 @@
             return this.textHeight;
         }
         measureSize(text) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             var _context = getDummyContext(), fontSize = this.fontSize(), metrics;
             _context.save();
             _context.font = this._getContextFont();
             metrics = _context.measureText(text);
             _context.restore();
+            const scaleFactor = fontSize / 100;
             return {
+                actualBoundingBoxAscent: (_a = metrics.actualBoundingBoxAscent) !== null && _a !== void 0 ? _a : 71.58203125 * scaleFactor,
+                actualBoundingBoxDescent: (_b = metrics.actualBoundingBoxDescent) !== null && _b !== void 0 ? _b : 0,
+                actualBoundingBoxLeft: (_c = metrics.actualBoundingBoxLeft) !== null && _c !== void 0 ? _c : -7.421875 * scaleFactor,
+                actualBoundingBoxRight: (_d = metrics.actualBoundingBoxRight) !== null && _d !== void 0 ? _d : 75.732421875 * scaleFactor,
+                alphabeticBaseline: (_e = metrics.alphabeticBaseline) !== null && _e !== void 0 ? _e : 0,
+                emHeightAscent: (_f = metrics.emHeightAscent) !== null && _f !== void 0 ? _f : 100 * scaleFactor,
+                emHeightDescent: (_g = metrics.emHeightDescent) !== null && _g !== void 0 ? _g : -20 * scaleFactor,
+                fontBoundingBoxAscent: (_h = metrics.fontBoundingBoxAscent) !== null && _h !== void 0 ? _h : 91 * scaleFactor,
+                fontBoundingBoxDescent: (_j = metrics.fontBoundingBoxDescent) !== null && _j !== void 0 ? _j : 21 * scaleFactor,
+                hangingBaseline: (_k = metrics.hangingBaseline) !== null && _k !== void 0 ? _k : 72.80000305175781 * scaleFactor,
+                ideographicBaseline: (_l = metrics.ideographicBaseline) !== null && _l !== void 0 ? _l : -21 * scaleFactor,
                 width: metrics.width,
                 height: fontSize,
             };
@@ -11966,7 +11951,7 @@
         'lineHeight',
         'letterSpacing',
     ];
-    (0, Global_1$3._registerNode)(Text);
+    (0, Global_2$2._registerNode)(Text);
     Factory_1$i.Factory.overWriteSetter(Text, 'width', (0, Validators_1$i.getNumberOrAutoValidator)());
     Factory_1$i.Factory.overWriteSetter(Text, 'height', (0, Validators_1$i.getNumberOrAutoValidator)());
     Factory_1$i.Factory.addGetterSetter(Text, 'direction', INHERIT);
@@ -12674,6 +12659,9 @@
             });
         }
         _handleMouseDown(e) {
+            if (this._transforming) {
+                return;
+            }
             this._movingAnchorName = e.target.name().split(' ')[0];
             var attrs = this._getNodeRect();
             var width = attrs.width;
@@ -14521,6 +14509,47 @@
     // By use of this software, its documentation or related materials, you
     // acknowledge and accept the above terms.
     ///////////////////////////////////////////////////////////////////////////////
+    /**
+     * Defines type of markup object. For `VisualizeJS` markup only the `Line` and `Text` markup
+     * objects are supported.
+     */
+    var MarkupMode;
+    (function (MarkupMode) {
+        MarkupMode["SelectMarkup"] = "SelectMarkup";
+        MarkupMode["Line"] = "Line";
+        MarkupMode["Text"] = "Text";
+        MarkupMode["Rectangle"] = "Rectangle";
+        MarkupMode["Ellipse"] = "Ellipse";
+        MarkupMode["Arrow"] = "Arrow";
+        MarkupMode["Image"] = "Image";
+        MarkupMode["Cloud"] = "Cloud";
+    })(MarkupMode || (MarkupMode = {}));
+
+    ///////////////////////////////////////////////////////////////////////////////
+    // Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+    // All rights reserved.
+    //
+    // This software and its documentation and related materials are owned by
+    // the Alliance. The software may only be incorporated into application
+    // programs owned by members of the Alliance, subject to a signed
+    // Membership Agreement and Supplemental Software License Agreement with the
+    // Alliance. The structure and organization of this software are the valuable
+    // trade secrets of the Alliance and its suppliers. The software is also
+    // protected by copyright law and international treaty provisions. Application
+    // programs incorporating this software must include the following statement
+    // with their copyright notices:
+    //
+    //   This application incorporates Open Design Alliance software pursuant to a
+    //   license agreement with Open Design Alliance.
+    //   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+    //   All rights reserved.
+    //
+    // By use of this software, its documentation or related materials, you
+    // acknowledge and accept the above terms.
+    ///////////////////////////////////////////////////////////////////////////////
+    /**
+     * Markup color.
+     */
     class MarkupColor {
         /**
          * Color in #000000 format
@@ -15454,9 +15483,14 @@
             },
         ],
     ]);
+    /**
+     * 2D markup core.
+     */
     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;
@@ -15494,15 +15528,17 @@
                 Object.values(MarkupMode).forEach((mode) => this.konvaLayerFind(mode).forEach((x) => x.move({ x: dX, y: dY })));
             };
             this.redirectToViewer = (event) => {
-                this._viewer.emit(event);
+                if (this._viewer)
+                    this._viewer.emit(event);
             };
         }
-        initialize(viewer, canvas, canvasEvents = []) {
+        initialize(canvas, canvasEvents, viewer, worldTransformer) {
             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>');
+                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";
@@ -15512,33 +15548,36 @@
             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();
@@ -15577,9 +15616,6 @@
             this.loadMarkup(viewpoint);
         }
         getViewpoint() {
-            // TODO: at the current 25.2 state we need VisualizeJS here and below. In the future we need to use it as an external interface.
-            if (!this._viewer.visualizeJs)
-                return {};
             const viewpoint = {
                 lines: [],
                 texts: [],
@@ -15600,7 +15636,7 @@
             return viewpoint;
         }
         createObject(type, params) {
-            let object;
+            let object = null;
             let zIndex = this._zIndex;
             // TODO: factory?
             switch (type.toLocaleLowerCase()) {
@@ -15996,9 +16032,7 @@
                     // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
                     // https://stackoverflow.com/a/57641487 - check answer's comments
                     const atPoint = absoluteTransform.point({ 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);
@@ -16015,25 +16049,20 @@
         getMarkupTexts() {
             const texts = [];
             const textSize = 0.02;
-            let textScale = 1.0;
-            const projMtrx = this._viewer.visViewer().activeView.projectionMatrix;
-            const mtrxNumber = projMtrx.get(1, 1);
-            const tol = 1.0e-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(),
@@ -16045,9 +16074,7 @@
             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(),
@@ -16064,9 +16091,7 @@
             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(),
@@ -16084,13 +16109,9 @@
                 // we need getAbsoluteTransform because inside Konva position starts from {0, 0}
                 const absoluteTransform = arrow.getAbsoluteTransform();
                 const atStartPoint = absoluteTransform.point({ 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(),
@@ -16105,9 +16126,7 @@
             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(),
@@ -16123,9 +16142,7 @@
             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(),
@@ -16143,36 +16160,36 @@
             (_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() {
@@ -16287,18 +16304,20 @@
             this._imageInputPos = null;
         }
         addText(specifiedText, position, angle, color, textSize, fontSize, id) {
+            const trNodes = this._konvaTransformer.nodes();
+            if (trNodes.length > 0) {
+                // in case of edit - remove old Konva.Text object
+                trNodes[0].destroy();
+                this._konvaTransformer.nodes([]);
+            }
+            this.removeTextInput();
             if (specifiedText) {
-                const tol = 1.0e-6;
+                const tolerance = 1.0e-6;
                 // in case we have old viewpoint without font_size
-                if (textSize && textSize > tol && (!fontSize || fontSize < tol)) {
+                if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
                     const size = 0.02;
-                    let scale = 1.0;
-                    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: { x: position.x, y: position.y },
@@ -16309,15 +16328,8 @@
                     id,
                 });
                 this._konvaLayer.add(konvaText.ref());
+                return konvaText;
             }
-            const trNodes = this._konvaTransformer.nodes();
-            if (trNodes.length > 0) {
-                // in case of edit - remove old Konva.Text object
-                trNodes[0].destroy();
-                this._konvaTransformer.nodes([]);
-            }
-            this.removeTextInput();
-            return;
         }
         addRectangle(position, width, height, lineWidth, color, id) {
             if (!position)
@@ -16523,21 +16535,43 @@
         }
     }
 
+    const OVERLAY_VIEW_NAME = "$OVERLAY_VIEW_NAME";
     class VisualizeMarkup {
         constructor() {
             this._markupColor = { r: 255, g: 0, b: 0 };
             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)
@@ -16701,41 +16735,37 @@
     }
 
     ///////////////////////////////////////////////////////////////////////////////
+    /**
+     * The markup type: `Visualize` (deprecated) or `Konva`.
+     */
+    exports.MarkupType = void 0;
+    (function (MarkupType) {
+        MarkupType[MarkupType["Unknown"] = 0] = "Unknown";
+        MarkupType["Konva"] = "Konva";
+        MarkupType["Visualize"] = "Visualize";
+    })(exports.MarkupType || (exports.MarkupType = {}));
     class MarkupFactory {
-        /**
-         * Initialize {@link IMarkup} instance
-         *
-         * @param markupType - Specifies version of the markup support. Two variants of markup
-         *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
-         */
-        static createMarkup(markupType) {
+        static createMarkup(markupType = exports.MarkupType.Konva) {
             let markup;
             switch (markupType) {
-                case MarkupType.Konva:
-                    markup = this.createKonva();
+                case exports.MarkupType.Konva:
+                    markup = new KonvaMarkup();
                     break;
-                case MarkupType.Visualize:
-                    markup = this.createVisualize();
+                case exports.MarkupType.Visualize:
+                    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;
     /**
      * The `Client.js` library class that provides methods to integrate with the
-     * [VisualizeJS](https://cloud.opendesign.com/docs/index.html#/visualizejs) library.
+     * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs | VisualizeJS} library.
      */
     class Viewer extends EventEmitter2 {
         /**
@@ -16749,13 +16779,13 @@
          *   _Note: Your own `VisualizeJS` library version must match the version of the `Client.js`
          *   you are using._
          * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If
-         *   the auto-update is disabled, you need to update the `VisualizeJS` viewer and the active
-         *   dragger manually using the `update` event. Default is `true`.
-         * @param params.markupType - Specifies version of the markup support. Two variants of markup
-         *   support are implemented: old "Visualize" and new "Konva". Default is "Konva". {@link MarkupType}
+         *   the auto-update is disabled, you need to register the `update` event handler and update
+         *   the viewer and the active dragger manually. Default is `true`.
+         * @param params.markupType - Specifies type of the markup core: `Visualize` (deprecated) or
+         *   `Konva`. Default is `Konva`.
          */
         constructor(client, params = {}) {
-            var _a, _b;
+            var _a;
             super();
             this._visualizeJsUrl = "";
             this.frameId = 0;
@@ -16766,7 +16796,6 @@
             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);
@@ -16778,32 +16807,37 @@
             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);
         }
         /**
-         * `VisualizeJS` parameters.
+         * Viewer options.
          */
         get options() {
             return this._options;
         }
         /**
-         * `VisualizeJS` library URL. Use {@link Viewer#configure | configure()} to change library URL.
+         * `VisualizeJS` library URL. Use {@link configure | configure()} to change library URL.
          *
          * @readonly
          */
         get visualizeJsUrl() {
             return this._visualizeJsUrl;
         }
+        /**
+         * 2D markup core.
+         *
+         * @readonly
+         */
+        get markup() {
+            return this._markup;
+        }
         /**
          * Change the viewer configuration parameters.
          *
@@ -16815,25 +16849,19 @@
             this._visualizeJsUrl = params.visualizeJsUrl || "https://opencloud.azureedge.net/libs/visualizejs/master/Visualize.js";
             return this;
         }
-        /**
-         * A [Viewer]{@link Viewer} event measuring progress of loading a `VisualizeJS` library.
-         *
-         * @property {string} type - `visualizeprogress`
-         * @property {number} loaded - A 64-bit unsigned integer value indicating the amount of work
-         *   already performed by the underlying process. The ratio of work done can be calculated by
-         *   dividing total by the value of this property.
-         * @property {number} total - A 64-bit unsigned integer representing the total amount of work
-         *   that the underlying process is in the progress of performing.
-         * @event visualizeprogress
-         */
         /**
          * Load `VisualizeJS` module and initialize it with the specified canvas. Call
-         * {@link Viewer#dispose | dispose()} to release allocated resources.
+         * {@link dispose | dispose()} to release allocated resources.
          *
-         * @async
-         * @param canvas - HTML `<canvas>` element for `VisualizeJS`.
+         * Fires:
+         *
+         * - {@link InitializeProgressEvent | initializeprogress}
+         *
+         * @param canvas -
+         *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement}
+         *   for `VisualizeJS`.
          * @param onProgress - A callback function that handles events measuring progress of loading
-         *   of the `VisualizeJS` library. Retrieves {@link event:visualizeprogress | visualizeprogress} event.
+         *   of the `VisualizeJS` library.
          */
         async initialize(canvas, onProgress) {
             this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
@@ -16856,7 +16884,7 @@
             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();
@@ -16893,7 +16921,7 @@
             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;
@@ -17194,14 +17222,13 @@
             return this._activeDragger;
         }
         /**
-         * Set active dragger. `Viewer` must be {@link Viewer#initialize | initialized} before enable
-         * dragger or exception is thrown.
+         * Set active dragger. `Viewer` must be initialized before enable dragger or exception is thrown.
          *
          * Fires:
          *
          * - {@link ChangeActiveDraggerEvent | changeactivedragger}
          *
-         * @param name - Dragger name. Can be one of the {@link Viewer#draggers | draggers} list.
+         * @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.
          */
         setActiveDragger(name) {
@@ -17256,35 +17283,13 @@
          * Remove markup overlay.
          */
         clearOverlay() {
-            this.markup.clearOverlay();
+            this._markup.clearOverlay();
         }
         /**
          * Synchronize markup overlay.
          */
         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();
         }
         /**
          * Returns `true` if current drawing is 3D drawing.
@@ -17300,6 +17305,38 @@
             return extHeight !== 0;
             //return visViewer.activeView.upVector[1] >= 0.95;
         }
+        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.0, y: 1.0, z: 1.0 };
+            const projMatrix = this.visViewer().activeView.projectionMatrix;
+            const tolerance = 1.0e-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;
+        }
         /**
          * Returns a list of original handles for the selected entities.
          */
@@ -17324,7 +17361,6 @@
          * Load model references into the viewer. References are images, fonts, or any other files to
          * correct rendering of the model.
          *
-         * @async
          * @param model - Instance of model with references. If a `File` instance is specified
          *   instead of a model, the file references will be loaded.
          */
@@ -17372,9 +17408,8 @@
         /**
          * Loads a model of a file or assembly into the viewer.
          *
-         * This method requires a [Client]{@link Client | Client} instance to work. For standalone
-         * viewer instance use {@link Viewer#openVsfFile | openVsfFile()} or
-         * {@link Viewer#openVsfxFile | openVsfxFile()}.
+         * This method requires a {@link Client} instance to work. For standalone viewer instance use
+         * {@link openVsfFile | openVsfFile()} or {@link openVsfxFile | openVsfxFile()}.
          *
          * Fires:
          *
@@ -17386,7 +17421,6 @@
          * - {@link GeometryEndEvent | geometryend}
          * - {@link GeometryErrorEvent | geometryerror}
          *
-         * @async
          * @param file - File or Assembly or Model instance to load. If a `File` instance with
          *   multiple models is specified, the default model will be loaded. If there is no default
          *   model, first availiable model will be loaded.
@@ -17499,7 +17533,7 @@
             return this;
         }
         /**
-         * Cancels asynchronous model loading started by {@link Viewer#open | open()}.
+         * Cancels asynchronous model loading started by {@link open | open()}.
          */
         cancel() {
             var _a, _b, _c;
@@ -17535,7 +17569,7 @@
          * @returns Color with `RGB` values.
          */
         getMarkupColor() {
-            return this.markup.getMarkupColor();
+            return this._markup.getMarkupColor();
         }
         /**
          * Set markup color.
@@ -17545,7 +17579,7 @@
          * @param b - `Blue` part of color.
          */
         setMarkupColor(r = 255, g = 0, b = 0) {
-            this.markup.setMarkupColor(r, g, b);
+            this._markup.setMarkupColor(r, g, b);
             const color = { r, g, b };
             this.emitEvent({ type: "changemarkupcolor", data: color });
         }
@@ -17557,7 +17591,7 @@
          * @param b - `Blue` part of color.
          */
         colorizeAllMarkup(r = 255, g = 0, b = 0) {
-            this.markup.colorizeAllMarkup(r, g, b);
+            this._markup.colorizeAllMarkup(r, g, b);
         }
         /**
          * Colorize all selected markup entities with the specified color.
@@ -17567,7 +17601,7 @@
          * @param b - `Blue` part of color.
          */
         colorizeSelectedMarkups(r = 255, g = 0, b = 0) {
-            this.markup.colorizeSelectedMarkups(r, g, b);
+            this._markup.colorizeSelectedMarkups(r, g, b);
         }
         /**
          * Add an empty markup entity to the overlay.
@@ -17589,21 +17623,21 @@
         }
         /**
          * Draw a viewpoint. To get a list of available model viewpoints, use the
-         * {@link Model.getViewpoints()} or {@link File.getViewpoints()}.
+         * `Model.getViewpoints()` or `File.getViewpoints()` or `Assembly.getViewpoints()`.
          *
          * @param viewpoint - Viewpoint data.
          */
         drawViewpoint(viewpoint) {
             this.setOrthogonalCameraSettings(viewpoint.orthogonal_camera);
             this.setClippingPlanes(viewpoint.clipping_planes);
-            this.markup.setViewpoint(viewpoint);
+            this._markup.setViewpoint(viewpoint);
         }
         /**
          * Create a viewpoint. To add a viewpoint to the list of model viewpoints, use the
-         * {@link Model.saveViewpoint()} or {@link File.saveViewpoint()}.
+         * `Model.saveViewpoint()` or `File.saveViewpoint()` or . `Assembly.saveViewpoint()`.
          */
         createViewpoint() {
-            const vp = this.markup.getViewpoint();
+            const vp = this._markup.getViewpoint();
             vp.orthogonal_camera = this.getOrthogonalCameraSettings();
             vp.clipping_planes = this.getClippingPlanes();
             return vp;
@@ -17685,6 +17719,7 @@
 
     exports.CANVAS_EVENTS = CANVAS_EVENTS;
     exports.CanvasEvents = CanvasEvents;
+    exports.Dragger = Dragger;
     exports.OdBaseDragger = OdBaseDragger;
     exports.Options = Options;
     exports.Viewer = Viewer;