@inweb/viewer-three 25.10.1 → 25.11.1

package/dist/viewer-three.module.js

@@ -1,8 +1,8 @@
-import { Box3, Vector3, Sphere, Vector2, Raycaster, MeshBasicMaterial, LoadingManager, LoaderUtils, MOUSE, TOUCH, EventDispatcher, Clock, Quaternion, Object3D, Euler, Matrix4, LineBasicMaterial, CylinderGeometry, BoxGeometry, BufferGeometry, Float32BufferAttribute, Mesh, OctahedronGeometry, Line, SphereGeometry, TorusGeometry, PlaneGeometry, DoubleSide, Plane, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Vector4, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Clock, Object3D, Euler, Matrix4, LineBasicMaterial, CylinderGeometry, BoxGeometry, BufferGeometry, Float32BufferAttribute, Mesh, OctahedronGeometry, Line, SphereGeometry, TorusGeometry, PlaneGeometry, DoubleSide, Plane, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Vector4, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import Konva from "konva";
 
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 
@@ -105,7 +105,8 @@ function defaultOptions() {
         reverseZoomWheel: false,
         enableZoomWheel: true,
         enableGestures: true,
-        geometryType: "vsfx"
+        geometryType: "vsfx",
+        rulerUnit: "Default"
     };
 }
 
@@ -365,6 +366,13 @@ class Options {
         this._data.geometryType = value;
         this.change();
     }
+    get rulerUnit() {
+        return this._data.rulerUnit;
+    }
+    set rulerUnit(value) {
+        this._data.rulerUnit = value;
+        this.change();
+    }
 }
 
 const CanvasEvents = [ "click", "contextmenu", "dblclick", "mousedown", "mouseleave", "mousemove", "mouseup", "pointercancel", "pointerdown", "pointerleave", "pointermove", "pointerup", "touchcancel", "touchend", "touchmove", "touchstart", "wheel" ];
@@ -386,16 +394,106 @@ function applyModelTransform(viewer, model) {
 
 commands("ThreeJS").registerCommand("applyModelTransform", applyModelTransform);
 
-commands("ThreeJS").registerCommand("clearMarkup", (viewer => console.warn("clearMarkup not implemented")));
+commands("ThreeJS").registerCommand("clearMarkup", (viewer => viewer.clearOverlay()));
 
 commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");
 
-function clearSlices(viewer) {
-    viewer.renderer.clippingPlanes = [];
+class SelectionComponent {
+    constructor(viewer) {
+        this.onPointerDown = event => {
+            if (!event.isPrimary || event.button !== 0) return;
+            this.getMousePosition(event, this.downPosition);
+        };
+        this.onPointerUp = event => {
+            if (!event.isPrimary) return;
+            const upPosition = this.getMousePosition(event, new Vector2);
+            if (this.downPosition.distanceTo(upPosition) !== 0) return;
+            const intersects = this.getPointerIntersects(upPosition);
+            this.clearSelection();
+            if (intersects.length > 0) this.select(intersects[0].object);
+            this.viewer.update();
+            this.viewer.emitEvent({
+                type: "select",
+                data: undefined,
+                handles: this.viewer.getSelected()
+            });
+        };
+        this.onDoubleClick = event => {
+            if (event.button !== 0) return;
+            this.viewer.executeCommand("zoomToSelected");
+        };
+        this.optionsChange = () => {
+            const {facesColor: facesColor, facesTransparancy: facesTransparancy} = this.viewer.options;
+            this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+            this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+            this.viewer.update();
+        };
+        this.viewer = viewer;
+        this.raycaster = new Raycaster;
+        this.downPosition = new Vector2;
+        const {facesColor: facesColor, facesTransparancy: facesTransparancy} = this.viewer.options;
+        this.facesMaterial = new MeshBasicMaterial;
+        this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
+        this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
+        this.facesMaterial.transparent = true;
+        this.viewer.addEventListener("pointerdown", this.onPointerDown);
+        this.viewer.addEventListener("pointerup", this.onPointerUp);
+        this.viewer.addEventListener("dblclick", this.onDoubleClick);
+        this.viewer.addEventListener("optionschange", this.optionsChange);
+    }
+    dispose() {
+        this.facesMaterial.dispose();
+        this.viewer.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewer.removeEventListener("pointerup", this.onPointerUp);
+        this.viewer.removeEventListener("dblclick", this.onDoubleClick);
+        this.viewer.removeEventListener("optionschange", this.optionsChange);
+    }
+    getMousePosition(event, target) {
+        return target.set(event.clientX, event.clientY);
+    }
+    getPointerIntersects(mouse) {
+        const rect = this.viewer.canvas.getBoundingClientRect();
+        const x = (mouse.x - rect.left) / rect.width * 2 - 1;
+        const y = -(mouse.y - rect.top) / rect.height * 2 + 1;
+        const coords = new Vector2(x, y);
+        this.raycaster.setFromCamera(coords, this.viewer.camera);
+        const objects = [];
+        this.viewer.scene.traverseVisible((child => objects.push(child)));
+        return this.raycaster.intersectObjects(objects, false);
+    }
+    select(object) {
+        if (object.isSelected) return;
+        object.isSelected = true;
+        object.originalMaterial = object.material;
+        object.material = this.facesMaterial;
+        this.viewer.selected.push(object);
+    }
+    clearSelection() {
+        this.viewer.selected.forEach((object => {
+            object.isSelected = false;
+            object.material = object.originalMaterial;
+        }));
+        this.viewer.selected.length = 0;
+    }
+}
+
+function clearSelected(viewer) {
+    const selection = new SelectionComponent(viewer);
+    selection.clearSelection();
+    selection.dispose();
     viewer.update();
+    viewer.emitEvent({
+        type: "select",
+        data: undefined,
+        handles: []
+    });
 }
 
-commands("ThreeJS").registerCommand("clearSlices", clearSlices);
+commands("ThreeJS").registerCommand("clearSelected", clearSelected);
+
+commands("ThreeJS").registerCommandAlias("clearSelected", "unselect");
+
+commands("ThreeJS").registerCommand("clearSlices", (viewer => viewer.clearSlices()));
 
 function createPreview(viewer, type = "image/jpeg", encoderOptions = .25) {
     viewer.update(true);
@@ -444,7 +542,7 @@ function explodeScene(scene, scale = 0) {
 function explode(viewer, index = 0) {
     viewer.models.forEach((gltf => explodeScene(gltf.scene, index)));
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "explode",
         data: index
     });
@@ -459,8 +557,8 @@ const defaultViewPositions = {
     bottom: new Vector3(0, 0, -1),
     left: new Vector3(-1, 0, 0),
     right: new Vector3(1, 0, 0),
-    front: new Vector3(0, 1, 0),
-    back: new Vector3(0, -1, 0),
+    front: new Vector3(0, -1, 0),
+    back: new Vector3(0, 1, 0),
     sw: new Vector3(-.5, -.5, 1).normalize(),
     se: new Vector3(.5, -.5, 1).normalize(),
     ne: new Vector3(.5, .5, 1).normalize(),
@@ -469,15 +567,15 @@ const defaultViewPositions = {
 
 function setDefaultViewPosition(viewer, position) {
     const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
-    const camera = viewer.camera;
     const center = viewer.extents.getCenter(new Vector3);
     const sphere = viewer.extents.getBoundingSphere(new Sphere);
-    const offset = (new Vector3).copy(direction).multiplyScalar(sphere.radius);
-    camera.position.copy(center);
-    camera.position.add(offset);
-    camera.rotation.set(0, 0, 0);
+    const offet = direction.clone().multiplyScalar(sphere.radius);
+    const camera = viewer.camera;
+    camera.position.copy(center).add(offet);
     camera.lookAt(center);
     camera.updateProjectionMatrix();
+    camera.updateMatrixWorld();
+    viewer.target.copy(center);
     viewer.update();
     viewer.emit({
         type: "viewposition",
@@ -550,95 +648,16 @@ function getSelected(viewer) {
 
 commands("ThreeJS").registerCommand("getSelected", getSelected);
 
-class SelectionComponent {
-    constructor(viewer) {
-        this.onPointerDown = event => {
-            if (!event.isPrimary || event.button !== 0) return;
-            this.getMousePosition(event, this.downPosition);
-        };
-        this.onPointerUp = event => {
-            if (!event.isPrimary) return;
-            const upPosition = this.getMousePosition(event, new Vector2);
-            if (this.downPosition.distanceTo(upPosition) !== 0) return;
-            const intersects = this.getPointerIntersects(upPosition);
-            this.clearSelection();
-            if (intersects.length > 0) this.select(intersects[0].object);
-            this.viewer.update();
-            this.viewer.emitEvent({
-                type: "select",
-                data: undefined,
-                handles: this.viewer.getSelected()
-            });
-        };
-        this.onDoubleClick = event => {
-            if (event.button !== 0) return;
-            this.viewer.executeCommand("zoomToSelected");
-        };
-        this.optionsChange = () => {
-            const {facesColor: facesColor, facesTransparancy: facesTransparancy} = this.viewer.options;
-            this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-            this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-            this.viewer.update();
-        };
-        this.viewer = viewer;
-        this.raycaster = new Raycaster;
-        this.downPosition = new Vector2;
-        const {facesColor: facesColor, facesTransparancy: facesTransparancy} = this.viewer.options;
-        this.facesMaterial = new MeshBasicMaterial;
-        this.facesMaterial.color.setRGB(facesColor.r / 255, facesColor.g / 255, facesColor.b / 255);
-        this.facesMaterial.opacity = (255 - facesTransparancy) / 255;
-        this.facesMaterial.transparent = true;
-        this.viewer.addEventListener("pointerdown", this.onPointerDown);
-        this.viewer.addEventListener("pointerup", this.onPointerUp);
-        this.viewer.addEventListener("dblclick", this.onDoubleClick);
-        this.viewer.addEventListener("optionschange", this.optionsChange);
-    }
-    dispose() {
-        this.facesMaterial.dispose();
-        this.viewer.removeEventListener("pointerdown", this.onPointerDown);
-        this.viewer.removeEventListener("pointerup", this.onPointerUp);
-        this.viewer.removeEventListener("dblclick", this.onDoubleClick);
-        this.viewer.removeEventListener("optionschange", this.optionsChange);
-    }
-    getMousePosition(event, position) {
-        const rect = this.viewer.canvas.getBoundingClientRect();
-        position.setX((event.clientX - rect.left) / rect.width);
-        position.setY((event.clientY - rect.top) / rect.height);
-        return position;
-    }
-    getPointerIntersects(position) {
-        const mouse = new Vector2(position.x * 2 - 1, -(position.y * 2) + 1);
-        this.raycaster.setFromCamera(mouse, this.viewer.camera);
-        const objects = [];
-        this.viewer.scene.traverseVisible((child => objects.push(child)));
-        return this.raycaster.intersectObjects(objects, false);
-    }
-    select(object) {
-        if (object.isSelected) return;
-        object.isSelected = true;
-        object.originalMaterial = object.material;
-        object.material = this.facesMaterial;
-        this.viewer.selected.push(object);
-    }
-    clearSelection() {
-        this.viewer.selected.forEach((object => {
-            object.isSelected = false;
-            object.material = object.originalMaterial;
-        }));
-        this.viewer.selected.length = 0;
-    }
-}
-
 function hideSelected(viewer) {
     viewer.selected.forEach((object => object.visible = false));
     const selection = new SelectionComponent(viewer);
     selection.clearSelection();
     selection.dispose();
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "hide"
     });
-    viewer.emit({
+    viewer.emitEvent({
         type: "select",
         data: undefined,
         handles: []
@@ -659,7 +678,7 @@ function isolateSelected(viewer) {
     }
     isolateObject(viewer.scene, 0);
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "isolate"
     });
 }
@@ -676,11 +695,11 @@ function regenerateAll(viewer) {
 commands("ThreeJS").registerCommand("regenerateAll", regenerateAll);
 
 function resetView(viewer) {
-    viewer.executeCommand("setActiveDragger", "");
+    viewer.executeCommand("setActiveDragger");
     viewer.executeCommand("clearSlices");
     viewer.executeCommand("clearOverlay");
     viewer.executeCommand("setMarkupColor");
-    viewer.executeCommand("unselect");
+    viewer.executeCommand("clearSelected");
     viewer.executeCommand("showAll");
     viewer.executeCommand("explode", 0);
     viewer.executeCommand("zoomToExtents", true);
@@ -722,7 +741,7 @@ function setSelected(viewer, handles = []) {
     objects.forEach((object => selection.select(object)));
     selection.dispose();
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "select",
         data: undefined,
         handles: handles
@@ -734,160 +753,2679 @@ commands("ThreeJS").registerCommand("setSelected", setSelected);
 function showAll(viewer) {
     viewer.scene.traverse((object => object.visible = true));
     viewer.update();
-    viewer.emit({
+    viewer.emitEvent({
         type: "showall"
     });
 }
 
-commands("ThreeJS").registerCommand("showAll", showAll);
+commands("ThreeJS").registerCommand("showAll", showAll);
+
+function zoomToExtents(viewer) {
+    if (viewer.extents.isEmpty()) return;
+    const center = viewer.extents.getCenter(new Vector3);
+    const distance = viewer.extents.getBoundingSphere(new Sphere).radius;
+    const delta = new Vector3(0, 0, 1);
+    delta.applyQuaternion(viewer.camera.quaternion);
+    delta.multiplyScalar(distance * 3);
+    viewer.camera.position.copy(center).add(delta);
+    viewer.target.copy(center);
+    viewer.update();
+    viewer.emitEvent({
+        type: "zoom"
+    });
+}
+
+commands("ThreeJS").registerCommand("zoomToExtents", zoomToExtents);
+
+commands("ThreeJS").registerCommandAlias("zoomToExtents", "zoomExtents");
+
+function zoomToObjects(viewer, handles = []) {
+    const handleSet = new Set(handles);
+    const objects = [];
+    viewer.scene.traverseVisible((child => {
+        var _a;
+        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
+    }));
+    const extents = objects.reduce(((result, object) => {
+        const objectExtents = (new Box3).setFromObject(object);
+        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
+    }), new Box3);
+    const center = extents.getCenter(new Vector3);
+    const distance = extents.getBoundingSphere(new Sphere).radius;
+    const delta = new Vector3(0, 0, 1);
+    delta.applyQuaternion(viewer.camera.quaternion);
+    delta.multiplyScalar(distance * 3);
+    viewer.camera.position.copy(center).add(delta);
+    viewer.target.copy(center);
+    viewer.update();
+    viewer.emitEvent({
+        type: "zoom"
+    });
+}
+
+commands("ThreeJS").registerCommand("zoomToObjects", zoomToObjects);
+
+function zoomToSelected(viewer) {
+    const extents = viewer.selected.reduce(((result, object) => {
+        const objectExtents = (new Box3).setFromObject(object);
+        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
+    }), new Box3);
+    if (extents.isEmpty()) extents.copy(viewer.extents);
+    const center = extents.getCenter(new Vector3);
+    const distance = extents.getBoundingSphere(new Sphere).radius;
+    const delta = new Vector3(0, 0, 1);
+    delta.applyQuaternion(viewer.camera.quaternion);
+    delta.multiplyScalar(distance * 3);
+    viewer.camera.position.copy(center).add(delta);
+    viewer.target.copy(center);
+    viewer.update();
+    viewer.emitEvent({
+        type: "zoom"
+    });
+}
+
+commands("ThreeJS").registerCommand("zoomToSelected", zoomToSelected);
+
+class GLTFLoadingManager extends LoadingManager {
+    constructor(file, externalData = new Map, params = {}) {
+        super();
+        this.path = "";
+        this.resourcePath = "";
+        this.fileURL = "";
+        this.dataURLs = new Map;
+        this.path = params.path || "";
+        if (typeof file === "string") {
+            this.fileURL = file;
+            this.resourcePath = LoaderUtils.extractUrlBase(file);
+        } else {
+            externalData.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
+            externalData.set(this.fileURL, file);
+        }
+        externalData.forEach(((value, key) => {
+            let dataURL;
+            if (typeof value === "string") dataURL = value; else dataURL = URL.createObjectURL(new Blob([ value ]));
+            this.dataURLs.set(key, dataURL);
+        }));
+        this.setURLModifier((url => {
+            const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
+            const dataURL = this.dataURLs.get(key);
+            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+        }));
+    }
+    dispose() {
+        this.dataURLs.forEach(URL.revokeObjectURL);
+    }
+}
+
+class EventEmitter2 {
+    constructor() {
+        this._listeners = {};
+    }
+    addEventListener(type, listener) {
+        if (this._listeners[type] === undefined) this._listeners[type] = [];
+        this._listeners[type].push(listener);
+        return this;
+    }
+    removeEventListener(type, listener) {
+        if (this._listeners[type] === undefined) return this;
+        const listeners = this._listeners[type].filter((x => x !== listener));
+        if (listeners.length !== 0) this._listeners[type] = listeners; else delete this._listeners[type];
+        return this;
+    }
+    removeAllListeners(type) {
+        if (type) delete this._listeners[type]; else this._listeners = {};
+        return this;
+    }
+    emitEvent(event) {
+        if (this._listeners[event.type] === undefined) return false;
+        const invoke = this._listeners[event.type].slice();
+        invoke.forEach((listener => listener.call(this, event)));
+        return true;
+    }
+    on(type, listener) {
+        return this.addEventListener(type, listener);
+    }
+    off(type, listener) {
+        return this.removeEventListener(type, listener);
+    }
+    emit(type, ...args) {
+        if (typeof type === "string") return this.emitEvent({
+            type: type,
+            args: args
+        }); else if (typeof type === "object") return this.emitEvent(type); else return false;
+    }
+}
+
+class WorldTransform {
+    screenToWorld(position) {
+        return {
+            x: position.x,
+            y: position.y,
+            z: 0
+        };
+    }
+    worldToScreen(position) {
+        return {
+            x: position.x,
+            y: position.y
+        };
+    }
+    getScale() {
+        return {
+            x: 1,
+            y: 1,
+            z: 1
+        };
+    }
+}
+
+class MarkupColor {
+    constructor(r, g, b) {
+        this.setColor(r, g, b);
+    }
+    asHex() {
+        return "#" + this.HEX;
+    }
+    asRGB() {
+        return {
+            r: this.R,
+            g: this.G,
+            b: this.B
+        };
+    }
+    setColor(r, g, b) {
+        this.R = r;
+        this.G = g;
+        this.B = b;
+        this.HEX = this.rgbToHex(r, g, b);
+    }
+    rgbToHex(r, g, b) {
+        const valueToHex = c => {
+            const hex = c.toString(16);
+            return hex === "0" ? "00" : hex;
+        };
+        return valueToHex(r) + valueToHex(g) + valueToHex(b);
+    }
+}
+
+const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
+
+class KonvaLine {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params) params = {};
+        if (!params.points) params.points = [ {
+            x: 50,
+            y: 50
+        }, {
+            x: 100,
+            y: 100
+        } ];
+        const konvaPoints = [];
+        params.points.forEach((point => konvaPoints.push(point.x, point.y)));
+        this._ref = new Konva.Line({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            points: konvaPoints,
+            draggable: true,
+            strokeScaleEnabled: false,
+            dash: LineTypeSpecs.get(params.type) || []
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Line";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPoints() {
+        return this._ref.points();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    getLineType() {
+        const typeSpecs = this._ref.dash() || [];
+        let type;
+        switch (typeSpecs) {
+          case LineTypeSpecs.get("dot"):
+            type = "dot";
+            break;
+
+          case LineTypeSpecs.get("dash"):
+            type = "dash";
+            break;
+
+          default:
+            type = "solid";
+            break;
+        }
+        return type;
+    }
+    setLineType(type) {
+        const specs = LineTypeSpecs.get(type);
+        if (specs) this._ref.dash(specs);
+    }
+    addPoints(points) {
+        let newPoints = this._ref.points();
+        points.forEach((point => {
+            newPoints = newPoints.concat([ point.x, point.y ]);
+        }));
+        this._ref.points(newPoints);
+    }
+}
+
+class KonvaText {
+    constructor(params, ref = null) {
+        var _a, _b, _c;
+        this.TEXT_FONT_FAMILY = "Calibri";
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
+        if (!params.text) params.text = "default";
+        this._ref = new Konva.Text({
+            x: params.position.x,
+            y: params.position.y,
+            text: params.text,
+            fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
+            fontFamily: this.TEXT_FONT_FAMILY,
+            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+            align: "left",
+            draggable: true,
+            rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
+        });
+        this._ref.width(this._ref.getTextWidth());
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 50;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
+            if (scaleByX) {
+                this._ref.width(newWidth);
+            }
+            if (scaleByY) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Text";
+    }
+    getColor() {
+        return this._ref.fill();
+    }
+    setColor(hex) {
+        this._ref.fill(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getText() {
+        return this._ref.text();
+    }
+    setText(text) {
+        this._ref.text(text);
+    }
+    getPosition() {
+        return this._ref.getPosition();
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+    getFontSize() {
+        return this._ref.fontSize();
+    }
+    setFontSize(size) {
+        this._ref.fontSize(size);
+    }
+}
+
+class KonvaRectangle {
+    constructor(params, ref = null) {
+        var _a, _b, _c, _d;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
+        this._ref = new Konva.Rect({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            x: params.position.x,
+            y: params.position.y,
+            width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
+            height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 50;
+            const minHeight = 50;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < minHeight) newHeight = minHeight;
+            if (scaleByX) {
+                this._ref.width(newWidth);
+            }
+            if (scaleByY) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    getHeigth() {
+        return this._ref.height();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+    }
+    setHeight(h) {
+        this._ref.height(h);
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Rectangle";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+}
+
+class KonvaEllipse {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
+        if (!params.radius) params.radius = {
+            x: 25,
+            y: 25
+        };
+        this._ref = new Konva.Ellipse({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            x: params.position.x,
+            y: params.position.y,
+            radiusX: params.radius.x,
+            radiusY: params.radius.y,
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newRadiusX = this._ref.radiusX();
+            if (scaleByX) newRadiusX *= attrs.scaleX;
+            let newRadiusY = this._ref.radiusY();
+            if (scaleByY) newRadiusY *= attrs.scaleY;
+            const minRadiusX = 25;
+            const minRadiusY = 25;
+            if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
+            if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
+            if (e.evt.ctrlKey || e.evt.shiftKey) {
+                if (scaleByX) {
+                    this._ref.radius({
+                        x: newRadiusX,
+                        y: newRadiusX
+                    });
+                } else {
+                    this._ref.radius({
+                        x: newRadiusY,
+                        y: newRadiusY
+                    });
+                }
+            } else {
+                this._ref.radius({
+                    x: newRadiusX,
+                    y: newRadiusY
+                });
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+    getRadiusX() {
+        return this._ref.radiusX();
+    }
+    setRadiusX(r) {
+        this._ref.radiusX(r);
+    }
+    getRadiusY() {
+        return this._ref.radiusY();
+    }
+    setRadiusY(r) {
+        this._ref.radiusY(r);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Ellipse";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+}
+
+class KonvaArrow {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params) params = {};
+        if (!params.start) params.start = {
+            x: 50,
+            y: 50
+        };
+        if (!params.end) params.end = {
+            x: 100,
+            y: 100
+        };
+        this._ref = new Konva.Arrow({
+            stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
+            fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
+            strokeWidth: 4,
+            globalCompositeOperation: "source-over",
+            lineCap: "round",
+            lineJoin: "round",
+            points: [ params.start.x, params.start.y, params.end.x, params.end.y ],
+            draggable: true,
+            strokeScaleEnabled: false
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Arrow";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+        this._ref.fill(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPoints() {
+        const points = this._ref.points();
+        return [ {
+            x: points[0],
+            y: points[1]
+        }, {
+            x: points[2],
+            y: points[3]
+        } ];
+    }
+    setPoints(points) {
+        if (points.length === 2) {
+            this._ref.points([ points[0].x, points[0].y, points[1].x, points[1].y ]);
+        }
+    }
+    getStartPoint() {
+        const points = this._ref.points();
+        return {
+            x: points[0],
+            y: points[1]
+        };
+    }
+    setStartPoint(x, y) {
+        const points = this._ref.points();
+        this._ref.points([ x, y, points[2], points[3] ]);
+    }
+    getEndPoint() {
+        const points = this._ref.points();
+        return {
+            x: points[2],
+            y: points[3]
+        };
+    }
+    setEndPoint(x, y) {
+        const points = this._ref.points();
+        this._ref.points([ points[0], points[1], x, y ]);
+    }
+}
+
+class KonvaImage {
+    constructor(params, ref = null) {
+        var _a, _b;
+        this._ratio = 1;
+        this.EPSILON = 1e-5;
+        this.BASE64_HEADER_START = "data:image/";
+        this.BASE64_NOT_FOUND = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
+        if (ref) {
+            if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
+            if (ref.height() <= this.EPSILON) ref.height(32);
+            if (ref.width() <= this.EPSILON) ref.width(32);
+            this._ref = ref;
+            this._canvasImage = ref.image();
+            this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
+            return;
+        }
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 50,
+            y: 50
+        };
+        if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
+        this._canvasImage = new Image;
+        this._canvasImage.onload = () => {
+            this._ref.image(this._canvasImage);
+            if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
+            if (this._ref.width() <= this.EPSILON) this._ref.width(this._canvasImage.width);
+            this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
+            if ((params.width <= this.EPSILON || params.height <= this.EPSILON) && (params.maxWidth >= this.EPSILON || params.maxWidth >= this.EPSILON)) {
+                const heightOutOfCanvas = params.maxHeight - this._canvasImage.height;
+                const widthOutOfCanvas = params.maxWidth - this._canvasImage.width;
+                if (heightOutOfCanvas <= this.EPSILON || widthOutOfCanvas <= this.EPSILON) {
+                    if (widthOutOfCanvas <= this.EPSILON && widthOutOfCanvas < heightOutOfCanvas / this._ratio) {
+                        this._ref.height(params.maxWidth * this._ratio);
+                        this._ref.width(params.maxWidth);
+                    } else {
+                        this._ref.width(params.maxHeight / this._ratio);
+                        this._ref.height(params.maxHeight);
+                    }
+                }
+            }
+        };
+        this._canvasImage.onerror = () => {
+            this._canvasImage.onerror = function() {};
+            this._canvasImage.src = this.BASE64_NOT_FOUND;
+        };
+        this._canvasImage.src = params.src;
+        this._ref = new Konva.Image({
+            x: params.position.x,
+            y: params.position.y,
+            image: this._canvasImage,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
+            draggable: true
+        });
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            if (e.evt.ctrlKey || e.evt.shiftKey) {
+                if (scaleByX) {
+                    this._ref.width(newWidth);
+                    this._ref.height(newWidth * this._ratio);
+                } else {
+                    this._ref.width(newHeight / this._ratio);
+                    this._ref.height(newHeight);
+                }
+            } else {
+                if (scaleByX) {
+                    this._ref.width(newWidth);
+                }
+                if (scaleByY) {
+                    this._ref.height(newHeight);
+                }
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.id(this._ref._id.toString());
+    }
+    getSrc() {
+        return this._canvasImage.src;
+    }
+    setSrc(src) {
+        this._canvasImage.src = src;
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+        this._ref.height(w * this._ratio);
+    }
+    getHeight() {
+        return this._ref.height();
+    }
+    setHeight(h) {
+        this._ref.height(h);
+        this._ref.width(h / this._ratio);
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Image";
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPosition() {
+        return this._ref.getPosition();
+    }
+    setPosition(x, y) {
+        this._ref.setPosition({
+            x: x,
+            y: y
+        });
+    }
+}
+
+class KonvaCloud {
+    constructor(params, ref = null) {
+        var _a, _b, _c, _d;
+        if (ref) {
+            this._ref = ref;
+            return;
+        }
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
+        const arcRadius = 16;
+        this._ref = new Konva.Shape({
+            x: params.position.x,
+            y: params.position.y,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
+            stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
+            strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
+            draggable: true,
+            strokeScaleEnabled: false,
+            globalCompositeOperation: "source-over",
+            sceneFunc: (context, shape) => {
+                function calculateMidpoint(position, width, height) {
+                    const midX = position.x + width / 2;
+                    const midY = position.y + height / 2;
+                    return {
+                        x: midX,
+                        y: midY
+                    };
+                }
+                const points = [ {
+                    x: 0,
+                    y: 0
+                }, {
+                    x: 0 + this._ref.width(),
+                    y: 0
+                }, {
+                    x: 0 + this._ref.width(),
+                    y: 0 + this._ref.height()
+                }, {
+                    x: 0,
+                    y: 0 + this._ref.height()
+                }, {
+                    x: 0,
+                    y: 0
+                } ];
+                const midPoint = calculateMidpoint({
+                    x: 0,
+                    y: 0
+                }, this._ref.width(), this._ref.height());
+                const baseArcLength = 30;
+                context.beginPath();
+                for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
+                    let approxArcLength = baseArcLength;
+                    const dx = points[iPoint + 1].x - points[iPoint].x;
+                    const dy = points[iPoint + 1].y - points[iPoint].y;
+                    const length = Math.sqrt(dx * dx + dy * dy);
+                    const arcCount = Math.floor(length / approxArcLength);
+                    const lengthMod = length % approxArcLength;
+                    approxArcLength = baseArcLength + arcCount / lengthMod;
+                    let pX = points[iPoint].x + dx / arcCount / 2;
+                    let pY = points[iPoint].y + dy / arcCount / 2;
+                    const pEndX = points[iPoint + 1].x;
+                    const pEndY = points[iPoint + 1].y;
+                    const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
+                    const startAngle = endAngle + Math.PI;
+                    const counterClockwise = pX > midPoint.x && pY > midPoint.y;
+                    for (let iArc = 0; iArc < arcCount; iArc++) {
+                        if (counterClockwise) {
+                            context.arc(pX, pY, arcRadius, endAngle, startAngle);
+                        } else {
+                            context.arc(pX, pY, arcRadius, startAngle, endAngle);
+                        }
+                        pX += dx / arcCount;
+                        pY += dy / arcCount;
+                    }
+                }
+                context.closePath();
+                context.fillStrokeShape(shape);
+            }
+        });
+        this._ref.className = "Cloud";
+        this._ref.on("transform", (e => {
+            const attrs = e.target.attrs;
+            if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+            const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
+            const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
+            let newWidth = this._ref.width();
+            if (scaleByX) newWidth *= attrs.scaleX;
+            let newHeight = this._ref.height();
+            if (scaleByY) newHeight *= attrs.scaleY;
+            const minWidth = 100;
+            const minHeight = 100;
+            if (newWidth < minWidth) newWidth = minWidth;
+            if (newHeight < minHeight) newHeight = minHeight;
+            if (scaleByX) {
+                this._ref.width(newWidth);
+            }
+            if (scaleByY) {
+                this._ref.height(newHeight);
+            }
+            this._ref.scale({
+                x: 1,
+                y: 1
+            });
+        }));
+        this._ref.getSelfRect = () => ({
+            x: 0 - arcRadius,
+            y: 0 - arcRadius,
+            width: this._ref.width() + 2 * arcRadius,
+            height: this._ref.height() + 2 * arcRadius
+        });
+        this._ref.id(this._ref._id.toString());
+    }
+    ref() {
+        return this._ref;
+    }
+    id() {
+        return this._ref.id();
+    }
+    enableMouseEditing(value) {
+        this._ref.draggable(value);
+    }
+    type() {
+        return "Cloud";
+    }
+    getColor() {
+        return this._ref.stroke();
+    }
+    setColor(hex) {
+        this._ref.stroke(hex);
+    }
+    getRotation() {
+        return this._ref.rotation();
+    }
+    setRotation(degrees) {
+        this._ref.rotation(degrees);
+    }
+    getZIndex() {
+        return this._ref.zIndex();
+    }
+    setZIndex(zIndex) {
+        this._ref.zIndex(zIndex);
+    }
+    delete() {
+        this._ref.destroy();
+        this._ref = null;
+    }
+    getPosition() {
+        return this._ref.position();
+    }
+    setPosition(x, y) {
+        this._ref.position({
+            x: x,
+            y: y
+        });
+    }
+    getWidth() {
+        return this._ref.width();
+    }
+    setWidth(w) {
+        this._ref.width(w);
+    }
+    getHeigth() {
+        return this._ref.height();
+    }
+    setHeight(h) {
+        this._ref.height(h);
+    }
+    getLineWidth() {
+        return this._ref.strokeWidth();
+    }
+    setLineWidth(size) {
+        this._ref.strokeWidth(size);
+    }
+}
+
+const MarkupMode2Konva = {
+    SelectMarkup: {
+        name: "SelectMarkup",
+        initializer: null
+    },
+    Line: {
+        name: "Line",
+        initializer: (ref, params = null) => new KonvaLine(params, ref)
+    },
+    Text: {
+        name: "Text",
+        initializer: (ref, params = null) => new KonvaText(params, ref)
+    },
+    Rectangle: {
+        name: "Rect",
+        initializer: (ref, params = null) => new KonvaRectangle(params, ref)
+    },
+    Ellipse: {
+        name: "Ellipse",
+        initializer: (ref, params = null) => new KonvaEllipse(params, ref)
+    },
+    Arrow: {
+        name: "Arrow",
+        initializer: (ref, params = null) => new KonvaArrow(params, ref)
+    },
+    Image: {
+        name: "Image",
+        initializer: (ref, params = null) => new KonvaImage(params, ref)
+    },
+    Cloud: {
+        name: "Cloud",
+        initializer: (ref, params = null) => new KonvaCloud(params, ref)
+    }
+};
+
+class KonvaMarkup {
+    constructor() {
+        this._containerEvents = [];
+        this._markupIsActive = false;
+        this._markupColor = new MarkupColor(255, 0, 0);
+        this.lineWidth = 4;
+        this.lineType = "solid";
+        this.fontSize = 34;
+        this.changeActiveDragger = event => {
+            const draggerName = event.data;
+            this._markupContainer.className = this._container.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
+            this.removeTextInput();
+            this.removeImageInput();
+            this.enableEditMode(draggerName);
+        };
+        this.resizeContainer = entries => {
+            const {width: width, height: height} = entries[0].contentRect;
+            if (!width || !height) return;
+            if (!this._konvaStage) return;
+            this._konvaStage.width(width);
+            this._konvaStage.height(height);
+        };
+        this.pan = event => {
+            const newPos = {
+                x: this._konvaStage.x() + event.dX,
+                y: this._konvaStage.y() + event.dY
+            };
+            this._konvaStage.position(newPos);
+        };
+        this.zoomAt = event => {
+            const newScale = this._konvaStage.scaleX() * event.data;
+            this._konvaStage.scale({
+                x: newScale,
+                y: newScale
+            });
+            const newPos = {
+                x: event.x - (event.x - this._konvaStage.x()) * event.data,
+                y: event.y - (event.y - this._konvaStage.y()) * event.data
+            };
+            this._konvaStage.position(newPos);
+        };
+        this.redirectToViewer = event => {
+            if (this._viewer) this._viewer.emit(event);
+        };
+        this.getRelativePointPosition = (point, node) => {
+            const transform = node.getAbsoluteTransform().copy();
+            transform.invert();
+            return transform.point(point);
+        };
+        this.getRelativePointerPosition = node => this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
+    }
+    initialize(container, containerEvents, viewer, worldTransformer) {
+        if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
+        this._viewer = viewer;
+        this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
+        this._container = container;
+        this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
+        this._markupContainer = document.createElement("div");
+        this._markupContainer.id = "markup-container";
+        this._markupContainer.style.position = "absolute";
+        this._markupContainer.style.top = "0px";
+        this._markupContainer.style.left = "0px";
+        this._markupContainer.style.outline = "0px";
+        this._markupContainer.style.pointerEvents = "none";
+        const parentDiv = this._container.parentElement;
+        parentDiv.appendChild(this._markupContainer);
+        this._resizeObserver = new ResizeObserver(this.resizeContainer);
+        this._resizeObserver.observe(parentDiv);
+        this._markupColor.setColor(255, 0, 0);
+        this.initializeKonva();
+        if (this._viewer) {
+            this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
+            this._viewer.addEventListener("pan", this.pan);
+            this._viewer.addEventListener("zoomat", this.zoomAt);
+        }
+    }
+    dispose() {
+        var _a, _b;
+        if (this._viewer) {
+            this._viewer.removeEventListener("zoomat", this.zoomAt);
+            this._viewer.removeEventListener("pan", this.pan);
+            this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
+        }
+        this.destroyKonva();
+        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._resizeObserver = undefined;
+        (_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
+        this._markupContainer = undefined;
+        this._container = undefined;
+        this._viewer = undefined;
+        this._worldTransformer = undefined;
+        this._markupIsActive = false;
+    }
+    syncOverlay() {}
+    clearOverlay() {
+        this.removeTextInput();
+        this.removeImageInput();
+        this.clearSelected();
+        this.getObjects().forEach((obj => obj.delete()));
+    }
+    getMarkupColor() {
+        return this._markupColor.asRGB();
+    }
+    setMarkupColor(r, g, b) {
+        this._markupColor.setColor(r, g, b);
+        this._viewer.emit({
+            type: "changemarkupcolor",
+            data: {
+                r: r,
+                g: g,
+                b: b
+            }
+        });
+    }
+    colorizeAllMarkup(r, g, b) {
+        const hexColor = new MarkupColor(r, g, b).asHex();
+        this.getObjects().filter((obj => {
+            var _a;
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
+        }));
+    }
+    colorizeSelectedMarkups(r, g, b) {
+        const hexColor = new MarkupColor(r, g, b).asHex();
+        this.getSelectedObjects().filter((obj => {
+            var _a;
+            return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
+        }));
+    }
+    setViewpoint(viewpoint) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.clearSelected();
+        this.removeTextInput();
+        this.removeImageInput();
+        this._konvaStage.scale({
+            x: 1,
+            y: 1
+        });
+        this._konvaStage.position({
+            x: 0,
+            y: 0
+        });
+        const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
+            r: 255,
+            g: 0,
+            b: 0
+        };
+        this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
+        (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line => {
+            const linePoints = [];
+            line.points.forEach((point => {
+                const screenPoint = this._worldTransformer.worldToScreen(point);
+                linePoints.push(screenPoint.x);
+                linePoints.push(screenPoint.y);
+            }));
+            this.addLine(linePoints, line.color, line.type, line.width, line.id);
+        }));
+        (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text => {
+            const screenPoint = this._worldTransformer.worldToScreen(text.position);
+            this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
+        }));
+        (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect => {
+            const screenPoint = this._worldTransformer.worldToScreen(rect.position);
+            this.addRectangle(screenPoint, rect.width, rect.height, rect.line_width, rect.color, rect.id);
+        }));
+        (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse => {
+            const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
+            this.addEllipse(screenPoint, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
+        }));
+        (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow => {
+            const startPoint = this._worldTransformer.worldToScreen(arrow.start);
+            const endPoint = this._worldTransformer.worldToScreen(arrow.end);
+            this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
+        }));
+        (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud => {
+            const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
+            this.addCloud(screenPoint, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
+        }));
+        (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image => {
+            const screenPoint = this._worldTransformer.worldToScreen(image.position);
+            this.addImage(screenPoint, image.src, image.width, image.height, image.id);
+        }));
+    }
+    getViewpoint(viewpoint) {
+        if (!viewpoint) viewpoint = {};
+        viewpoint.lines = this.getMarkupLines();
+        viewpoint.texts = this.getMarkupTexts();
+        viewpoint.arrows = this.getMarkupArrows();
+        viewpoint.clouds = this.getMarkupClouds();
+        viewpoint.ellipses = this.getMarkupEllipses();
+        viewpoint.images = this.getMarkupImages();
+        viewpoint.rectangles = this.getMarkupRectangles();
+        viewpoint.custom_fields = {
+            markup_color: this.getMarkupColor()
+        };
+        viewpoint.snapshot = {
+            data: this.combineMarkupWithDrawing()
+        };
+        return viewpoint;
+    }
+    enableEditMode(mode) {
+        if (!mode || !MarkupMode2Konva[mode]) {
+            this.clearSelected();
+            this.removeTextInput();
+            this.removeImageInput();
+            this._markupContainer.style.pointerEvents = "none";
+            this._markupIsActive = false;
+        } else {
+            this._markupMode = mode;
+            this._markupContainer.style.pointerEvents = "all";
+            this._markupIsActive = true;
+        }
+        return this;
+    }
+    createObject(type, params) {
+        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);
+        return object;
+    }
+    getObjects() {
+        const objects = [];
+        Object.keys(MarkupMode2Konva).forEach((type => {
+            const konvaShape = MarkupMode2Konva[type];
+            this.konvaLayerFind(type).forEach((ref => objects.push(konvaShape.initializer(ref))));
+        }));
+        return objects;
+    }
+    getSelectedObjects() {
+        if (!this._konvaTransformer) return [];
+        return this._konvaTransformer.nodes().map((ref => {
+            const name = ref.className;
+            const konvaShape = Object.values(MarkupMode2Konva).find((shape => shape.name === name));
+            return konvaShape ? konvaShape.initializer(ref) : null;
+        })).filter((x => x));
+    }
+    selectObjects(objects) {
+        if (!this._konvaTransformer) return;
+        const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x => x.ref())));
+        this._konvaTransformer.nodes(selectedObjs);
+    }
+    clearSelected() {
+        if (this._konvaTransformer) this._konvaTransformer.nodes([]);
+    }
+    addObject(object) {
+        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 || ref.parent === this._groupImages || ref.parent === this._groupGeometry || ref.parent === this._groupTexts));
+    }
+    initializeKonva() {
+        const stage = new Konva.Stage({
+            container: this._markupContainer,
+            width: this._container.clientWidth,
+            height: this._container.clientHeight
+        });
+        this._konvaStage = stage;
+        const layer = new Konva.Layer({
+            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,
+            keepRatio: false,
+            flipEnabled: false
+        });
+        layer.add(transformer);
+        this._konvaTransformer = transformer;
+        let isPaint = false;
+        let lastLine;
+        let mouseDownPos;
+        let lastObj;
+        stage.on("mousedown touchstart", (e => {
+            if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image") return;
+            if (e.target === stage && transformer.nodes().length > 0) {
+                transformer.nodes([]);
+                return;
+            }
+            const pos = this.getRelativePointerPosition(stage);
+            mouseDownPos = pos;
+            isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some((m => m === this._markupMode));
+            if (this._markupMode === "Line") {
+                lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
+            }
+        }));
+        stage.on("mouseup touchend", (e => {
+            if (!this._markupIsActive) return;
+            if (isPaint) {
+                const pos = this.getRelativePointerPosition(stage);
+                const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+                const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+                const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+                const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+                const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+                if (defParams) {
+                    if (this._markupMode === "Rectangle") {
+                        this.addRectangle({
+                            x: startX,
+                            y: startY
+                        }, dX, dY);
+                    } else if (this._markupMode === "Ellipse") {
+                        this.addEllipse({
+                            x: startX,
+                            y: startY
+                        }, {
+                            x: dX / 2,
+                            y: dY / 2
+                        });
+                    } else if (this._markupMode === "Arrow") {
+                        this.addArrow({
+                            x: mouseDownPos.x,
+                            y: mouseDownPos.y
+                        }, {
+                            x: defParams ? mouseDownPos.x + 200 : pos.x,
+                            y: defParams ? startY : pos.y
+                        });
+                    } else if (this._markupMode === "Cloud") {
+                        this.addCloud({
+                            x: startX,
+                            y: startY
+                        }, Math.max(100, dX), Math.max(100, dY));
+                    }
+                }
+            }
+            lastObj = undefined;
+            isPaint = false;
+        }));
+        stage.on("mousemove touchmove", (e => {
+            if (!this._markupIsActive) return;
+            if (!isPaint) {
+                return;
+            }
+            const pos = this.getRelativePointerPosition(stage);
+            const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
+            const startX = defParams ? mouseDownPos.x : Math.min(mouseDownPos.x, pos.x);
+            const startY = defParams ? mouseDownPos.y : Math.min(mouseDownPos.y, pos.y);
+            const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
+            const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
+            if (this._markupMode === "Line") {
+                lastLine.addPoints([ {
+                    x: pos.x,
+                    y: pos.y
+                } ]);
+            } else if (this._markupMode === "Arrow") {
+                if (lastObj) lastObj.setEndPoint(pos.x, pos.y); else lastObj = this.addArrow({
+                    x: mouseDownPos.x,
+                    y: mouseDownPos.y
+                }, {
+                    x: pos.x,
+                    y: pos.y
+                });
+            } else if (this._markupMode === "Rectangle") {
+                if (lastObj) {
+                    lastObj.setPosition(startX, startY);
+                    lastObj.setWidth(dX);
+                    lastObj.setHeight(dY);
+                } else lastObj = this.addRectangle({
+                    x: startX,
+                    y: startY
+                }, dX, dY);
+            } else if (this._markupMode === "Ellipse") {
+                if (lastObj) {
+                    lastObj.setPosition(startX, startY);
+                    lastObj.setRadiusX(dX);
+                    lastObj.setRadiusY(dY);
+                } else lastObj = this.addEllipse({
+                    x: startX,
+                    y: startY
+                }, {
+                    x: dX,
+                    y: dY
+                });
+            } else if (this._markupMode === "Cloud") {
+                if (lastObj) {
+                    lastObj.setPosition(startX, startY);
+                    lastObj.setWidth(Math.max(100, dX));
+                    lastObj.setHeight(Math.max(100, dY));
+                } else lastObj = this.addCloud({
+                    x: startX,
+                    y: startY
+                }, dX, dY);
+            }
+        }));
+        stage.on("click tap", (e => {
+            if (!this._markupIsActive) return;
+            if (e.target === stage) {
+                if (this._markupMode === "Text") {
+                    if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else if (transformer.nodes().length === 0) {
+                        const pos = this.getRelativePointerPosition(stage);
+                        this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
+                    }
+                } else if (this._markupMode === "Image") {
+                    if (this._imageInputRef && this._imageInputRef.value) this.addImage({
+                        x: this._imageInputPos.x,
+                        y: this._imageInputPos.y
+                    }, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
+                        const pos = this.getRelativePointerPosition(stage);
+                        this.createImageInput(pos);
+                    }
+                }
+                transformer.nodes([]);
+                return;
+            }
+            if (this._markupMode === "Text" || this._markupMode === "SelectMarkup") {
+                if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
+                        x: e.target.attrs.x,
+                        y: e.target.attrs.y
+                    }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
+                    return;
+                } else {
+                    this.removeTextInput();
+                }
+            }
+            if (this._markupMode === "Image" || this._markupMode === "SelectMarkup") {
+                if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
+                    if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0); else this.createImageInput({
+                        x: e.target.attrs.x,
+                        y: e.target.attrs.y
+                    });
+                    return;
+                } else {
+                    this.removeImageInput();
+                }
+            }
+            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);
+            }
+            const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+            const isSelected = transformer.nodes().indexOf(e.target) >= 0;
+            if (!metaPressed && !isSelected) {
+                transformer.nodes([ e.target ]);
+            } else if (metaPressed && isSelected) {
+                const nodes = transformer.nodes().slice();
+                nodes.splice(nodes.indexOf(e.target), 1);
+                transformer.nodes(nodes);
+            } else if (metaPressed && !isSelected) {
+                const nodes = transformer.nodes().concat([ e.target ]);
+                transformer.nodes(nodes);
+            }
+        }));
+        const container = stage.container();
+        container.tabIndex = 1;
+        container.focus();
+        container.addEventListener("keydown", (e => {
+            if (!this._markupIsActive) return;
+            if (e.code === "Delete") {
+                this.getSelectedObjects().forEach((obj => obj.delete()));
+                this.clearSelected();
+                return;
+            }
+            e.preventDefault();
+        }));
+    }
+    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;
+    }
+    getMarkupLines() {
+        const lines = [];
+        this.konvaLayerFind("Line").forEach((ref => {
+            const linePoints = ref.points();
+            if (!linePoints) return;
+            const worldPoints = [];
+            const absoluteTransform = ref.getAbsoluteTransform();
+            for (let i = 0; i < linePoints.length; i += 2) {
+                const atPoint = absoluteTransform.point({
+                    x: linePoints[i],
+                    y: linePoints[i + 1]
+                });
+                const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+                worldPoints.push(worldPoint);
+            }
+            const konvaLine = new KonvaLine(null, ref);
+            const line = {
+                id: konvaLine.id(),
+                points: worldPoints,
+                color: konvaLine.getColor() || "#ff0000",
+                type: konvaLine.getLineType() || this.lineType,
+                width: konvaLine.getLineWidth() || this.lineWidth
+            };
+            lines.push(line);
+        }));
+        return lines;
+    }
+    getMarkupTexts() {
+        const texts = [];
+        this.konvaLayerFind("Text").forEach((ref => {
+            const textSize = .02;
+            const textScale = this._worldTransformer.getScale();
+            const position = ref.position();
+            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+            const atPoint = stageAbsoluteTransform.point({
+                x: position.x,
+                y: position.y
+            });
+            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+            const shape = new KonvaText(null, ref);
+            const text = {
+                id: shape.id(),
+                position: worldPoint,
+                text: shape.getText(),
+                text_size: textSize * textScale.y,
+                angle: shape.getRotation(),
+                color: shape.getColor(),
+                font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0]
+            };
+            texts.push(text);
+        }));
+        return texts;
+    }
+    getMarkupRectangles() {
+        const rectangles = [];
+        this.konvaLayerFind("Rectangle").forEach((ref => {
+            const position = ref.position();
+            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+            const atPoint = stageAbsoluteTransform.point({
+                x: position.x,
+                y: position.y
+            });
+            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+            const scale = stageAbsoluteTransform.getMatrix()[0];
+            const shape = new KonvaRectangle(null, ref);
+            const rectangle = {
+                id: shape.id(),
+                position: worldPoint,
+                width: shape.getWidth() * scale,
+                height: shape.getHeigth() * scale,
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            };
+            rectangles.push(rectangle);
+        }));
+        return rectangles;
+    }
+    getMarkupEllipses() {
+        const ellipses = [];
+        this.konvaLayerFind("Ellipse").forEach((ref => {
+            const position = ref.position();
+            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+            const atPoint = stageAbsoluteTransform.point({
+                x: position.x,
+                y: position.y
+            });
+            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+            const scale = stageAbsoluteTransform.getMatrix()[0];
+            const shape = new KonvaEllipse(null, ref);
+            const ellipse = {
+                id: shape.id(),
+                position: worldPoint,
+                radius: {
+                    x: ref.getRadiusX() * scale,
+                    y: ref.getRadiusY() * scale
+                },
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            };
+            ellipses.push(ellipse);
+        }));
+        return ellipses;
+    }
+    getMarkupArrows() {
+        const arrows = [];
+        this.konvaLayerFind("Arrow").forEach((ref => {
+            const absoluteTransform = ref.getAbsoluteTransform();
+            const atStartPoint = absoluteTransform.point({
+                x: ref.points()[0],
+                y: ref.points()[1]
+            });
+            const worldStartPoint = this._worldTransformer.screenToWorld(atStartPoint);
+            const atEndPoint = absoluteTransform.point({
+                x: ref.points()[2],
+                y: ref.points()[3]
+            });
+            const worldEndPoint = this._worldTransformer.screenToWorld(atEndPoint);
+            const shape = new KonvaArrow(null, ref);
+            const arrow = {
+                id: shape.id(),
+                start: worldStartPoint,
+                end: worldEndPoint,
+                color: shape.getColor()
+            };
+            arrows.push(arrow);
+        }));
+        return arrows;
+    }
+    getMarkupImages() {
+        const images = [];
+        this.konvaLayerFind("Image").forEach((ref => {
+            const position = ref.position();
+            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+            const atPoint = stageAbsoluteTransform.point({
+                x: position.x,
+                y: position.y
+            });
+            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+            const scale = stageAbsoluteTransform.getMatrix()[0];
+            const shape = new KonvaImage(null, ref);
+            const image = {
+                id: shape.id(),
+                position: worldPoint,
+                src: shape.getSrc(),
+                width: shape.getWidth() * scale,
+                height: shape.getHeight() * scale
+            };
+            images.push(image);
+        }));
+        return images;
+    }
+    getMarkupClouds() {
+        const clouds = [];
+        this.konvaLayerFind("Cloud").forEach((ref => {
+            const position = ref.position();
+            const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
+            const atPoint = stageAbsoluteTransform.point({
+                x: position.x,
+                y: position.y
+            });
+            const worldPoint = this._worldTransformer.screenToWorld(atPoint);
+            const scale = stageAbsoluteTransform.getMatrix()[0];
+            const shape = new KonvaCloud(null, ref);
+            const cloud = {
+                id: shape.id(),
+                position: worldPoint,
+                width: shape.getWidth() * scale,
+                height: shape.getHeigth() * scale,
+                line_width: shape.getLineWidth(),
+                color: shape.getColor()
+            };
+            clouds.push(cloud);
+        }));
+        return clouds;
+    }
+    combineMarkupWithDrawing() {
+        this.clearSelected();
+        const tempCanvas = document.createElement("canvas");
+        if (this._konvaStage) {
+            tempCanvas.width = this._konvaStage.width();
+            tempCanvas.height = this._konvaStage.height();
+            const ctx = tempCanvas.getContext("2d");
+            if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
+            ctx.drawImage(this._konvaStage.toCanvas({
+                pixelRatio: window.devicePixelRatio
+            }), 0, 0);
+        }
+        return tempCanvas.toDataURL("image/jpeg", .25);
+    }
+    addLine(linePoints, color, type, width, id) {
+        if (!linePoints || linePoints.length === 0) return;
+        const points = [];
+        for (let i = 0; i < linePoints.length; i += 2) {
+            points.push({
+                x: linePoints[i],
+                y: linePoints[i + 1]
+            });
+        }
+        const konvaLine = new KonvaLine({
+            points: points,
+            type: type || this.lineType,
+            width: width || this.lineWidth,
+            color: color || this._markupColor.asHex(),
+            id: id
+        });
+        this.addObject(konvaLine);
+        return konvaLine;
+    }
+    createTextInput(pos, inputX, inputY, angle, text) {
+        if (!this._textInputRef) {
+            this._textInputPos = pos;
+            this._textInputAngle = angle;
+            this._textInputRef = document.createElement("textarea");
+            this._textInputRef.style.zIndex = "9999";
+            this._textInputRef.style.position = "absolute";
+            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.asHex()}`;
+            this._textInputRef.style.fontFamily = "Calibri";
+            this._textInputRef.onkeydown = event => {
+                if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
+                }
+                if (event.key === "Escape") {
+                    event.preventDefault();
+                    this.removeTextInput();
+                }
+            };
+            if (text) this._textInputRef.value = text;
+            document.body.appendChild(this._textInputRef);
+            setTimeout((() => {
+                this._textInputRef.focus();
+            }), 50);
+        } else {
+            this.removeTextInput();
+        }
+    }
+    removeTextInput() {
+        var _a;
+        (_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+        this._textInputRef = null;
+        this._textInputPos = null;
+        this._textInputAngle = 0;
+    }
+    createImageInput(pos) {
+        if (!this._imageInputRef) {
+            const convertBase64 = file => new Promise(((resolve, reject) => {
+                const fileReader = new FileReader;
+                fileReader.readAsDataURL(file);
+                fileReader.onload = () => {
+                    resolve(fileReader.result);
+                };
+                fileReader.onerror = error => {
+                    reject(error);
+                };
+            }));
+            this._imageInputPos = pos;
+            this._imageInputRef = document.createElement("input");
+            this._imageInputRef.style.display = "none";
+            this._imageInputRef.type = "file";
+            this._imageInputRef.accept = "image/png, image/jpeg";
+            this._imageInputRef.onchange = async event => {
+                const file = event.target.files[0];
+                const base64 = await convertBase64(file);
+                this.addImage({
+                    x: this._imageInputPos.x,
+                    y: this._imageInputPos.y
+                }, base64.toString(), 0, 0);
+            };
+            this._imageInputRef.oncancel = event => {
+                this.removeImageInput();
+            };
+            document.body.appendChild(this._imageInputRef);
+            setTimeout((() => {
+                this._imageInputRef.click();
+            }), 50);
+        } else {
+            this.removeImageInput();
+        }
+    }
+    removeImageInput() {
+        var _a;
+        (_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
+        this._imageInputRef = null;
+        this._imageInputPos = null;
+    }
+    addText(text, position, angle, color, textSize, fontSize, id) {
+        var _a;
+        if (!text) return;
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
+        this.removeTextInput();
+        const tolerance = 1e-6;
+        if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
+            const size = .02;
+            const scale = this._worldTransformer.getScale();
+            fontSize = textSize / (scale.y / size) / 34;
+        }
+        const konvaText = new KonvaText({
+            position: {
+                x: position.x,
+                y: position.y
+            },
+            text: text,
+            rotation: angle,
+            fontSize: fontSize || this.fontSize,
+            color: color || this._markupColor.asHex(),
+            id: id
+        });
+        this.addObject(konvaText);
+        return konvaText;
+    }
+    addRectangle(position, width, height, lineWidth, color, id) {
+        if (!position) return;
+        const konvaRectangle = new KonvaRectangle({
+            position: position,
+            width: width,
+            height: height,
+            lineWidth: lineWidth || this.lineWidth,
+            color: color || this._markupColor.asHex(),
+            id: id
+        });
+        this.addObject(konvaRectangle);
+        return konvaRectangle;
+    }
+    addEllipse(position, radius, lineWidth, color, id) {
+        if (!position) return;
+        const konvaEllipse = new KonvaEllipse({
+            position: position,
+            radius: radius,
+            lineWidth: lineWidth,
+            color: color || this._markupColor.asHex(),
+            id: id
+        });
+        this.addObject(konvaEllipse);
+        return konvaEllipse;
+    }
+    addArrow(start, end, color, id) {
+        if (!start || !end) return;
+        const konvaArrow = new KonvaArrow({
+            start: start,
+            end: end,
+            color: color || this._markupColor.asHex(),
+            id: id
+        });
+        this.addObject(konvaArrow);
+        return konvaArrow;
+    }
+    addCloud(position, width, height, lineWidth, color, id) {
+        if (!position || !width || !height) return;
+        const konvaCloud = new KonvaCloud({
+            position: position,
+            width: width,
+            height: height,
+            color: color || this._markupColor.asHex(),
+            lineWidth: lineWidth || this.lineWidth,
+            id: id
+        });
+        this.addObject(konvaCloud);
+        return konvaCloud;
+    }
+    addImage(position, src, width, height, id) {
+        var _a;
+        if (!position || !src) return;
+        (_a = this.getSelectedObjects().at(0)) === null || _a === void 0 ? void 0 : _a.delete();
+        this.clearSelected();
+        this.removeImageInput();
+        const konvaImage = new KonvaImage({
+            position: position,
+            src: src,
+            width: width,
+            height: height,
+            maxWidth: this._konvaStage.width() - position.x,
+            maxHeight: this._konvaStage.height() - position.y,
+            id: id
+        });
+        this.addObject(konvaImage);
+        return konvaImage;
+    }
+}
+
+const _changeEvent$2 = {
+    type: "change"
+};
+
+const _startEvent = {
+    type: "start"
+};
+
+const _endEvent = {
+    type: "end"
+};
+
+const STATE = {
+    NONE: -1,
+    ROTATE: 0,
+    DOLLY: 1,
+    PAN: 2,
+    TOUCH_ROTATE: 3,
+    TOUCH_PAN: 4,
+    TOUCH_DOLLY_PAN: 5,
+    TOUCH_DOLLY_ROTATE: 6
+};
+
+class OrbitControls extends EventDispatcher {
+    constructor(object, domElement) {
+        super();
+        this.object = object;
+        this.domElement = domElement;
+        this.domElement.style.touchAction = "none";
+        this.enabled = true;
+        this.target = new Vector3;
+        this.minDistance = 0;
+        this.maxDistance = Infinity;
+        this.minZoom = 0;
+        this.maxZoom = Infinity;
+        this.minPolarAngle = 0;
+        this.maxPolarAngle = Math.PI;
+        this.minAzimuthAngle = -Infinity;
+        this.maxAzimuthAngle = Infinity;
+        this.enableDamping = false;
+        this.dampingFactor = .05;
+        this.enableZoom = true;
+        this.zoomSpeed = 1;
+        this.enableRotate = true;
+        this.rotateSpeed = 1;
+        this.enablePan = true;
+        this.panSpeed = 1;
+        this.screenSpacePanning = true;
+        this.keyPanSpeed = 7;
+        this.autoRotate = false;
+        this.autoRotateSpeed = 2;
+        this.keys = {
+            LEFT: "ArrowLeft",
+            UP: "ArrowUp",
+            RIGHT: "ArrowRight",
+            BOTTOM: "ArrowDown"
+        };
+        this.mouseButtons = {
+            LEFT: MOUSE.ROTATE,
+            MIDDLE: MOUSE.DOLLY,
+            RIGHT: MOUSE.PAN
+        };
+        this.touches = {
+            ONE: TOUCH.ROTATE,
+            TWO: TOUCH.DOLLY_PAN
+        };
+        this.target0 = this.target.clone();
+        this.position0 = this.object.position.clone();
+        this.zoom0 = this.object.zoom;
+        this._domElementKeyEvents = null;
+        this.getPolarAngle = function() {
+            return spherical.phi;
+        };
+        this.getAzimuthalAngle = function() {
+            return spherical.theta;
+        };
+        this.getDistance = function() {
+            return this.object.position.distanceTo(this.target);
+        };
+        this.listenToKeyEvents = function(domElement) {
+            domElement.addEventListener("keydown", onKeyDown);
+            this._domElementKeyEvents = domElement;
+        };
+        this.stopListenToKeyEvents = function() {
+            this._domElementKeyEvents.removeEventListener("keydown", onKeyDown);
+            this._domElementKeyEvents = null;
+        };
+        this.saveState = function() {
+            scope.target0.copy(scope.target);
+            scope.position0.copy(scope.object.position);
+            scope.zoom0 = scope.object.zoom;
+        };
+        this.reset = function() {
+            scope.target.copy(scope.target0);
+            scope.object.position.copy(scope.position0);
+            scope.object.zoom = scope.zoom0;
+            scope.object.updateProjectionMatrix();
+            scope.dispatchEvent(_changeEvent$2);
+            scope.update();
+            scope.state = STATE.NONE;
+        };
+        this.update = function() {
+            const offset = new Vector3;
+            const quat = (new Quaternion).setFromUnitVectors(object.up, new Vector3(0, 1, 0));
+            const quatInverse = quat.clone().invert();
+            const lastPosition = new Vector3;
+            const lastQuaternion = new Quaternion;
+            const lastTargetPosition = new Vector3;
+            const twoPI = 2 * Math.PI;
+            return function update() {
+                const position = scope.object.position;
+                offset.copy(position).sub(scope.target);
+                offset.applyQuaternion(quat);
+                spherical.setFromVector3(offset);
+                if (scope.autoRotate && scope.state === STATE.NONE) {
+                    rotateLeft(getAutoRotationAngle());
+                }
+                if (scope.enableDamping) {
+                    spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+                    spherical.phi += sphericalDelta.phi * scope.dampingFactor;
+                } else {
+                    spherical.theta += sphericalDelta.theta;
+                    spherical.phi += sphericalDelta.phi;
+                }
+                let min = scope.minAzimuthAngle;
+                let max = scope.maxAzimuthAngle;
+                if (isFinite(min) && isFinite(max)) {
+                    if (min < -Math.PI) min += twoPI; else if (min > Math.PI) min -= twoPI;
+                    if (max < -Math.PI) max += twoPI; else if (max > Math.PI) max -= twoPI;
+                    if (min <= max) {
+                        spherical.theta = Math.max(min, Math.min(max, spherical.theta));
+                    } else {
+                        spherical.theta = spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta);
+                    }
+                }
+                spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
+                spherical.makeSafe();
+                spherical.radius *= scope.scale;
+                spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
+                if (scope.enableDamping === true) {
+                    scope.target.addScaledVector(scope.panOffset, scope.dampingFactor);
+                } else {
+                    scope.target.add(scope.panOffset);
+                }
+                offset.setFromSpherical(spherical);
+                offset.applyQuaternion(quatInverse);
+                position.copy(scope.target).add(offset);
+                scope.object.lookAt(scope.target);
+                if (scope.enableDamping === true) {
+                    sphericalDelta.theta *= 1 - scope.dampingFactor;
+                    sphericalDelta.phi *= 1 - scope.dampingFactor;
+                    scope.panOffset.multiplyScalar(1 - scope.dampingFactor);
+                } else {
+                    sphericalDelta.set(0, 0, 0);
+                    scope.panOffset.set(0, 0, 0);
+                }
+                scope.scale = 1;
+                if (scope.zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS || lastTargetPosition.distanceToSquared(scope.target) > 0) {
+                    scope.dispatchEvent(_changeEvent$2);
+                    lastPosition.copy(scope.object.position);
+                    lastQuaternion.copy(scope.object.quaternion);
+                    lastTargetPosition.copy(scope.target);
+                    scope.zoomChanged = false;
+                    return true;
+                }
+                return false;
+            };
+        }();
+        this.dispose = function() {
+            scope.domElement.removeEventListener("contextmenu", onContextMenu);
+            scope.domElement.removeEventListener("pointerdown", onPointerDown);
+            scope.domElement.removeEventListener("pointercancel", onPointerUp);
+            scope.domElement.removeEventListener("wheel", onMouseWheel);
+            scope.domElement.removeEventListener("pointermove", onPointerMove);
+            scope.domElement.removeEventListener("pointerup", onPointerUp);
+            if (scope._domElementKeyEvents !== null) {
+                scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown);
+                scope._domElementKeyEvents = null;
+            }
+        };
+        const scope = this;
+        scope.state = STATE.NONE;
+        const EPS = 1e-6;
+        const spherical = new Spherical;
+        const sphericalDelta = new Spherical;
+        scope.scale = 1;
+        scope.panOffset = new Vector3;
+        scope.zoomChanged = false;
+        scope.rotateStart = new Vector2;
+        scope.rotateEnd = new Vector2;
+        scope.rotateDelta = new Vector2;
+        scope.panStart = new Vector2;
+        scope.panEnd = new Vector2;
+        scope.panDelta = new Vector2;
+        scope.dollyStart = new Vector2;
+        scope.dollyEnd = new Vector2;
+        scope.dollyDelta = new Vector2;
+        scope.dollyScale = 0;
+        scope.pointers = [];
+        scope.pointerPositions = {};
+        function getAutoRotationAngle() {
+            return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+        }
+        function getZoomScale() {
+            return Math.pow(.95, scope.zoomSpeed);
+        }
+        function rotateLeft(angle) {
+            sphericalDelta.theta -= angle;
+        }
+        function rotateUp(angle) {
+            sphericalDelta.phi -= angle;
+        }
+        const panLeft = function() {
+            const v = new Vector3;
+            return function panLeft(distance, objectMatrix) {
+                v.setFromMatrixColumn(objectMatrix, 0);
+                v.multiplyScalar(-distance);
+                scope.panOffset.add(v);
+            };
+        }();
+        const panUp = function() {
+            const v = new Vector3;
+            return function panUp(distance, objectMatrix) {
+                if (scope.screenSpacePanning === true) {
+                    v.setFromMatrixColumn(objectMatrix, 1);
+                } else {
+                    v.setFromMatrixColumn(objectMatrix, 0);
+                    v.crossVectors(scope.object.up, v);
+                }
+                v.multiplyScalar(distance);
+                scope.panOffset.add(v);
+            };
+        }();
+        const pan = function() {
+            const offset = new Vector3;
+            return function pan(deltaX, deltaY) {
+                const element = scope.domElement;
+                if (scope.object.isPerspectiveCamera) {
+                    const position = scope.object.position;
+                    offset.copy(position).sub(scope.target);
+                    let targetDistance = offset.length();
+                    targetDistance *= Math.tan(scope.object.fov / 2 * Math.PI / 180);
+                    panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix);
+                    panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix);
+                } else if (scope.object.isOrthographicCamera) {
+                    panLeft(deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix);
+                    panUp(deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix);
+                } else {
+                    console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.");
+                    scope.enablePan = false;
+                }
+            };
+        }();
+        function dollyOut(dollyScale) {
+            if (scope.object.isPerspectiveCamera) {
+                scope.scale /= dollyScale;
+            } else if (scope.object.isOrthographicCamera) {
+                scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));
+                scope.object.updateProjectionMatrix();
+                scope.zoomChanged = true;
+            } else {
+                console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
+                scope.enableZoom = false;
+            }
+        }
+        function dollyIn(dollyScale) {
+            if (scope.object.isPerspectiveCamera) {
+                scope.scale *= dollyScale;
+            } else if (scope.object.isOrthographicCamera) {
+                scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
+                scope.object.updateProjectionMatrix();
+                scope.zoomChanged = true;
+            } else {
+                console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
+                scope.enableZoom = false;
+            }
+        }
+        function handleMouseDownRotate(event) {
+            scope.rotateStart.set(event.clientX, event.clientY);
+        }
+        function handleMouseDownDolly(event) {
+            scope.dollyStart.set(event.clientX, event.clientY);
+        }
+        function handleMouseDownPan(event) {
+            scope.panStart.set(event.clientX, event.clientY);
+        }
+        function handleMouseMoveRotate(event) {
+            scope.rotateEnd.set(event.clientX, event.clientY);
+            scope.rotateDelta.subVectors(scope.rotateEnd, scope.rotateStart).multiplyScalar(scope.rotateSpeed);
+            const element = scope.domElement;
+            rotateLeft(2 * Math.PI * scope.rotateDelta.x / element.clientHeight);
+            rotateUp(2 * Math.PI * scope.rotateDelta.y / element.clientHeight);
+            scope.rotateStart.copy(scope.rotateEnd);
+            scope.update();
+        }
+        function handleMouseMoveDolly(event) {
+            scope.dollyEnd.set(event.clientX, event.clientY);
+            scope.dollyDelta.subVectors(scope.dollyEnd, scope.dollyStart);
+            if (scope.dollyDelta.y < 0) {
+                scope.dollyScale = 1 / getZoomScale();
+                dollyOut(getZoomScale());
+            } else if (scope.dollyDelta.y > 0) {
+                scope.dollyScale = getZoomScale();
+                dollyIn(getZoomScale());
+            }
+            scope.dollyStart.copy(scope.dollyEnd);
+            scope.update();
+        }
+        function handleMouseMovePan(event) {
+            scope.panEnd.set(event.clientX, event.clientY);
+            scope.panDelta.subVectors(scope.panEnd, scope.panStart).multiplyScalar(scope.panSpeed);
+            pan(scope.panDelta.x, scope.panDelta.y);
+            scope.panStart.copy(scope.panEnd);
+            scope.update();
+        }
+        function handleMouseWheel(event) {
+            scope.dollyEnd.set(scope.domElement.clientWidth / 2, scope.domElement.clientHeight / 2);
+            scope.dollyDelta.set(event.deltaX, event.deltaY);
+            if (event.deltaY < 0) {
+                scope.dollyScale = 1 / getZoomScale();
+                dollyIn(getZoomScale());
+            } else if (event.deltaY > 0) {
+                scope.dollyScale = getZoomScale();
+                dollyOut(getZoomScale());
+            }
+            scope.dollyStart.copy(scope.dollyEnd);
+            scope.update();
+            if (event.deltaY !== 0) {
+                scope.state = STATE.DOLLY;
+                scope.dispatchEvent(_changeEvent$2);
+                scope.state = STATE.NONE;
+            }
+        }
+        function handleKeyDown(event) {
+            let needsUpdate = false;
+            switch (event.code) {
+              case scope.keys.UP:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    rotateUp(2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight);
+                } else {
+                    pan(0, scope.keyPanSpeed);
+                }
+                needsUpdate = true;
+                break;
+
+              case scope.keys.BOTTOM:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    rotateUp(-2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight);
+                } else {
+                    pan(0, -scope.keyPanSpeed);
+                }
+                needsUpdate = true;
+                break;
+
+              case scope.keys.LEFT:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    rotateLeft(2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight);
+                } else {
+                    pan(scope.keyPanSpeed, 0);
+                }
+                needsUpdate = true;
+                break;
+
+              case scope.keys.RIGHT:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    rotateLeft(-2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight);
+                } else {
+                    pan(-scope.keyPanSpeed, 0);
+                }
+                needsUpdate = true;
+                break;
+            }
+            if (needsUpdate) {
+                event.preventDefault();
+                scope.update();
+            }
+        }
+        function handleTouchStartRotate() {
+            if (scope.pointers.length === 1) {
+                scope.rotateStart.set(scope.pointers[0].pageX, scope.pointers[0].pageY);
+            } else {
+                const x = .5 * (scope.pointers[0].pageX + scope.pointers[1].pageX);
+                const y = .5 * (scope.pointers[0].pageY + scope.pointers[1].pageY);
+                scope.rotateStart.set(x, y);
+            }
+        }
+        function handleTouchStartPan() {
+            if (scope.pointers.length === 1) {
+                scope.panStart.set(scope.pointers[0].pageX, scope.pointers[0].pageY);
+            } else {
+                const x = .5 * (scope.pointers[0].pageX + scope.pointers[1].pageX);
+                const y = .5 * (scope.pointers[0].pageY + scope.pointers[1].pageY);
+                scope.panStart.set(x, y);
+            }
+        }
+        function handleTouchStartDolly() {
+            const dx = scope.pointers[0].pageX - scope.pointers[1].pageX;
+            const dy = scope.pointers[0].pageY - scope.pointers[1].pageY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            scope.dollyStart.set(0, distance);
+        }
+        function handleTouchStartDollyPan() {
+            if (scope.enableZoom) handleTouchStartDolly();
+            if (scope.enablePan) handleTouchStartPan();
+        }
+        function handleTouchStartDollyRotate() {
+            if (scope.enableZoom) handleTouchStartDolly();
+            if (scope.enableRotate) handleTouchStartRotate();
+        }
+        function handleTouchMoveRotate(event) {
+            if (scope.pointers.length == 1) {
+                scope.rotateEnd.set(event.pageX, event.pageY);
+            } else {
+                const position = getSecondPointerPosition(event);
+                const x = .5 * (event.pageX + position.x);
+                const y = .5 * (event.pageY + position.y);
+                scope.rotateEnd.set(x, y);
+            }
+            scope.rotateDelta.subVectors(scope.rotateEnd, scope.rotateStart).multiplyScalar(scope.rotateSpeed);
+            const element = scope.domElement;
+            rotateLeft(2 * Math.PI * scope.rotateDelta.x / element.clientHeight);
+            rotateUp(2 * Math.PI * scope.rotateDelta.y / element.clientHeight);
+            scope.rotateStart.copy(scope.rotateEnd);
+        }
+        function handleTouchMovePan(event) {
+            if (scope.pointers.length === 1) {
+                scope.panEnd.set(event.pageX, event.pageY);
+            } else {
+                const position = getSecondPointerPosition(event);
+                const x = .5 * (event.pageX + position.x);
+                const y = .5 * (event.pageY + position.y);
+                scope.panEnd.set(x, y);
+            }
+            scope.panDelta.subVectors(scope.panEnd, scope.panStart).multiplyScalar(scope.panSpeed);
+            pan(scope.panDelta.x, scope.panDelta.y);
+            scope.panStart.copy(scope.panEnd);
+        }
+        function handleTouchMoveDolly(event) {
+            const position = getSecondPointerPosition(event);
+            const dx = event.pageX - position.x;
+            const dy = event.pageY - position.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            scope.dollyEnd.set(0, distance);
+            scope.dollyDelta.set(0, Math.pow(scope.dollyEnd.y / scope.dollyStart.y, scope.zoomSpeed));
+            dollyOut(scope.dollyDelta.y);
+            scope.dollyStart.copy(scope.dollyEnd);
+        }
+        function handleTouchMoveDollyPan(event) {
+            if (scope.enableZoom) handleTouchMoveDolly(event);
+            if (scope.enablePan) handleTouchMovePan(event);
+        }
+        function handleTouchMoveDollyRotate(event) {
+            if (scope.enableZoom) handleTouchMoveDolly(event);
+            if (scope.enableRotate) handleTouchMoveRotate(event);
+        }
+        function onPointerDown(event) {
+            if (scope.enabled === false) return;
+            if (scope.pointers.length === 0) {
+                scope.domElement.setPointerCapture(event.pointerId);
+                scope.domElement.addEventListener("pointermove", onPointerMove);
+                scope.domElement.addEventListener("pointerup", onPointerUp);
+            }
+            addPointer(event);
+            if (event.pointerType === "touch") {
+                onTouchStart(event);
+            } else {
+                onMouseDown(event);
+            }
+        }
+        function onPointerMove(event) {
+            if (scope.enabled === false) return;
+            if (event.pointerType === "touch") {
+                onTouchMove(event);
+            } else {
+                onMouseMove(event);
+            }
+        }
+        function onPointerUp(event) {
+            removePointer(event);
+            if (scope.pointers.length === 0) {
+                scope.domElement.releasePointerCapture(event.pointerId);
+                scope.domElement.removeEventListener("pointermove", onPointerMove);
+                scope.domElement.removeEventListener("pointerup", onPointerUp);
+            }
+            scope.dispatchEvent(_endEvent);
+            scope.state = STATE.NONE;
+        }
+        function onMouseDown(event) {
+            let mouseAction;
+            switch (event.button) {
+              case 0:
+                mouseAction = scope.mouseButtons.LEFT;
+                break;
+
+              case 1:
+                mouseAction = scope.mouseButtons.MIDDLE;
+                break;
+
+              case 2:
+                mouseAction = scope.mouseButtons.RIGHT;
+                break;
+
+              default:
+                mouseAction = -1;
+            }
+            switch (mouseAction) {
+              case MOUSE.DOLLY:
+                if (scope.enableZoom === false) return;
+                handleMouseDownDolly(event);
+                scope.state = STATE.DOLLY;
+                break;
 
-function unselect(viewer) {
-    const selection = new SelectionComponent(viewer);
-    selection.clearSelection();
-    selection.dispose();
-    viewer.update();
-    viewer.emit({
-        type: "select",
-        data: undefined,
-        handles: []
-    });
-}
+              case MOUSE.ROTATE:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    if (scope.enablePan === false) return;
+                    handleMouseDownPan(event);
+                    scope.state = STATE.PAN;
+                } else {
+                    if (scope.enableRotate === false) return;
+                    handleMouseDownRotate(event);
+                    scope.state = STATE.ROTATE;
+                }
+                break;
 
-commands("ThreeJS").registerCommand("unselect", unselect);
+              case MOUSE.PAN:
+                if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                    if (scope.enableRotate === false) return;
+                    handleMouseDownRotate(event);
+                    scope.state = STATE.ROTATE;
+                } else {
+                    if (scope.enablePan === false) return;
+                    handleMouseDownPan(event);
+                    scope.state = STATE.PAN;
+                }
+                break;
 
-function zoomToExtents(viewer) {
-    if (viewer.extents.isEmpty()) return;
-    const center = viewer.extents.getCenter(new Vector3);
-    const distance = viewer.extents.getBoundingSphere(new Sphere).radius;
-    const delta = new Vector3(0, 0, 1);
-    delta.applyQuaternion(viewer.camera.quaternion);
-    delta.multiplyScalar(distance * 3);
-    viewer.camera.position.copy(center).add(delta);
-    viewer.target.copy(center);
-    viewer.update();
-    viewer.emitEvent({
-        type: "zoom"
-    });
-}
+              default:
+                scope.state = STATE.NONE;
+            }
+            if (scope.state !== STATE.NONE) {
+                scope.dispatchEvent(_startEvent);
+            }
+        }
+        function onMouseMove(event) {
+            switch (scope.state) {
+              case STATE.ROTATE:
+                if (scope.enableRotate === false) return;
+                handleMouseMoveRotate(event);
+                break;
 
-commands("ThreeJS").registerCommand("zoomToExtents", zoomToExtents);
+              case STATE.DOLLY:
+                if (scope.enableZoom === false) return;
+                handleMouseMoveDolly(event);
+                break;
 
-commands("ThreeJS").registerCommandAlias("zoomToExtents", "zoomExtents");
+              case STATE.PAN:
+                if (scope.enablePan === false) return;
+                handleMouseMovePan(event);
+                break;
+            }
+        }
+        function onMouseWheel(event) {
+            if (scope.enabled === false || scope.enableZoom === false || scope.state !== STATE.NONE) return;
+            event.preventDefault();
+            scope.dispatchEvent(_startEvent);
+            handleMouseWheel(event);
+            scope.dispatchEvent(_endEvent);
+        }
+        function onKeyDown(event) {
+            if (scope.enabled === false || scope.enablePan === false) return;
+            handleKeyDown(event);
+        }
+        function onTouchStart(event) {
+            trackPointer(event);
+            switch (scope.pointers.length) {
+              case 1:
+                switch (scope.touches.ONE) {
+                  case TOUCH.ROTATE:
+                    if (scope.enableRotate === false) return;
+                    handleTouchStartRotate();
+                    scope.state = STATE.TOUCH_ROTATE;
+                    break;
+
+                  case TOUCH.PAN:
+                    if (scope.enablePan === false) return;
+                    handleTouchStartPan();
+                    scope.state = STATE.TOUCH_PAN;
+                    break;
+
+                  default:
+                    scope.state = STATE.NONE;
+                }
+                break;
 
-function zoomToObjects(viewer, handles = []) {
-    const handleSet = new Set(handles);
-    const objects = [];
-    viewer.scene.traverseVisible((child => {
-        var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
-    }));
-    const extents = objects.reduce(((result, object) => {
-        const objectExtents = (new Box3).setFromObject(object);
-        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
-    }), new Box3);
-    const center = extents.getCenter(new Vector3);
-    const distance = extents.getBoundingSphere(new Sphere).radius;
-    const delta = new Vector3(0, 0, 1);
-    delta.applyQuaternion(viewer.camera.quaternion);
-    delta.multiplyScalar(distance * 3);
-    viewer.camera.position.copy(center).add(delta);
-    viewer.target.copy(center);
-    viewer.update();
-    viewer.emitEvent({
-        type: "zoom"
-    });
-}
+              case 2:
+                switch (scope.touches.TWO) {
+                  case TOUCH.DOLLY_PAN:
+                    if (scope.enableZoom === false && scope.enablePan === false) return;
+                    handleTouchStartDollyPan();
+                    scope.state = STATE.TOUCH_DOLLY_PAN;
+                    break;
+
+                  case TOUCH.DOLLY_ROTATE:
+                    if (scope.enableZoom === false && scope.enableRotate === false) return;
+                    handleTouchStartDollyRotate();
+                    scope.state = STATE.TOUCH_DOLLY_ROTATE;
+                    break;
+
+                  default:
+                    scope.state = STATE.NONE;
+                }
+                break;
 
-commands("ThreeJS").registerCommand("zoomToObjects", zoomToObjects);
+              default:
+                scope.state = STATE.NONE;
+            }
+            if (scope.state !== STATE.NONE) {
+                scope.dispatchEvent(_startEvent);
+            }
+        }
+        function onTouchMove(event) {
+            trackPointer(event);
+            switch (scope.state) {
+              case STATE.TOUCH_ROTATE:
+                if (scope.enableRotate === false) return;
+                handleTouchMoveRotate(event);
+                scope.update();
+                break;
 
-function zoomToSelected(viewer) {
-    const extents = viewer.selected.reduce(((result, object) => {
-        const objectExtents = (new Box3).setFromObject(object);
-        return result.isEmpty() ? result.copy(objectExtents) : result.union(objectExtents);
-    }), new Box3);
-    if (extents.isEmpty()) extents.copy(viewer.extents);
-    const center = extents.getCenter(new Vector3);
-    const distance = extents.getBoundingSphere(new Sphere).radius;
-    const delta = new Vector3(0, 0, 1);
-    delta.applyQuaternion(viewer.camera.quaternion);
-    delta.multiplyScalar(distance * 3);
-    viewer.camera.position.copy(center).add(delta);
-    viewer.target.copy(center);
-    viewer.update();
-    viewer.emitEvent({
-        type: "zoom"
-    });
-}
+              case STATE.TOUCH_PAN:
+                if (scope.enablePan === false) return;
+                handleTouchMovePan(event);
+                scope.update();
+                break;
 
-commands("ThreeJS").registerCommand("zoomToSelected", zoomToSelected);
+              case STATE.TOUCH_DOLLY_PAN:
+                if (scope.enableZoom === false && scope.enablePan === false) return;
+                handleTouchMoveDollyPan(event);
+                scope.update();
+                break;
 
-class GLTFLoadingManager extends LoadingManager {
-    constructor(file, externalData = new Map, params = {}) {
-        super();
-        this.path = "";
-        this.resourcePath = "";
-        this.fileURL = "";
-        this.dataURLs = new Map;
-        this.path = params.path || "";
-        if (typeof file === "string") {
-            this.fileURL = file;
-            this.resourcePath = LoaderUtils.extractUrlBase(file);
-        } else {
-            externalData.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
-            externalData.set(this.fileURL, file);
-        }
-        externalData.forEach(((value, key) => {
-            let dataURL;
-            if (typeof value === "string") dataURL = value; else dataURL = URL.createObjectURL(new Blob([ value ]));
-            this.dataURLs.set(key, dataURL);
-        }));
-        this.setURLModifier((url => {
-            const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
-            const dataURL = this.dataURLs.get(key);
-            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
-        }));
-    }
-    dispose() {
-        this.dataURLs.forEach(URL.revokeObjectURL);
-    }
-}
+              case STATE.TOUCH_DOLLY_ROTATE:
+                if (scope.enableZoom === false && scope.enableRotate === false) return;
+                handleTouchMoveDollyRotate(event);
+                scope.update();
+                break;
 
-class EventEmitter2 {
-    constructor() {
-        this._listeners = {};
-    }
-    addEventListener(type, listener) {
-        if (this._listeners[type] === undefined) this._listeners[type] = [];
-        this._listeners[type].push(listener);
-        return this;
-    }
-    removeEventListener(type, listener) {
-        if (this._listeners[type] === undefined) return this;
-        const listeners = this._listeners[type].filter((x => x !== listener));
-        if (listeners.length !== 0) this._listeners[type] = listeners; else delete this._listeners[type];
-        return this;
-    }
-    removeAllListeners(type) {
-        if (type) delete this._listeners[type]; else this._listeners = {};
-        return this;
-    }
-    emitEvent(event) {
-        if (this._listeners[event.type] === undefined) return false;
-        const invoke = this._listeners[event.type].slice();
-        invoke.forEach((listener => listener.call(this, event)));
-        return true;
-    }
-    on(type, listener) {
-        return this.addEventListener(type, listener);
-    }
-    off(type, listener) {
-        return this.removeEventListener(type, listener);
-    }
-    emit(type, ...args) {
-        if (typeof type === "string") return this.emitEvent({
-            type: type,
-            args: args
-        }); else if (typeof type === "object") return this.emitEvent(type); else return false;
+              default:
+                scope.state = STATE.NONE;
+            }
+        }
+        function onContextMenu(event) {
+            if (scope.enabled === false) return;
+            event.preventDefault();
+        }
+        function addPointer(event) {
+            scope.pointers.push(event);
+        }
+        function removePointer(event) {
+            delete scope.pointerPositions[event.pointerId];
+            for (let i = 0; i < scope.pointers.length; i++) {
+                if (scope.pointers[i].pointerId == event.pointerId) {
+                    scope.pointers.splice(i, 1);
+                    return;
+                }
+            }
+        }
+        function trackPointer(event) {
+            let position = scope.pointerPositions[event.pointerId];
+            if (position === undefined) {
+                position = new Vector2;
+                scope.pointerPositions[event.pointerId] = position;
+            }
+            position.set(event.pageX, event.pageY);
+        }
+        function getSecondPointerPosition(event) {
+            const pointer = event.pointerId === scope.pointers[0].pointerId ? scope.pointers[1] : scope.pointers[0];
+            return scope.pointerPositions[pointer.pointerId];
+        }
+        scope.domElement.addEventListener("contextmenu", onContextMenu);
+        scope.domElement.addEventListener("pointerdown", onPointerDown);
+        scope.domElement.addEventListener("pointercancel", onPointerUp);
+        scope.domElement.addEventListener("wheel", onMouseWheel, {
+            passive: false
+        });
+        this.update();
     }
 }
 
@@ -905,6 +3443,27 @@ class OrbitDragger {
         this.controlsChange = () => {
             this.viewer.target.copy(this.orbit.target);
             this.viewer.update();
+            switch (this.orbit.state) {
+              case STATE.PAN:
+              case STATE.TOUCH_PAN:
+                this.viewer.emitEvent({
+                    type: "pan",
+                    x: this.orbit.panEnd.x,
+                    y: this.orbit.panEnd.y,
+                    dX: this.orbit.panDelta.x,
+                    dY: this.orbit.panDelta.y
+                });
+                break;
+
+              case STATE.DOLLY:
+                this.viewer.emitEvent({
+                    type: "zoomat",
+                    data: this.orbit.dollyScale,
+                    x: this.orbit.dollyEnd.x,
+                    y: this.orbit.dollyEnd.y
+                });
+                break;
+            }
             this.changed = true;
         };
         this.stopContextMenu = event => {
@@ -932,14 +3491,16 @@ class OrbitDragger {
         this.viewer.on("geometryend", this.updateControls);
         this.viewer.on("viewposition", this.updateControls);
         this.viewer.on("zoom", this.updateControls);
+        this.viewer.on("drawviewpoint", this.updateControls);
         this.viewer.on("contextmenu", this.stopContextMenu);
         this.updateControls();
     }
     dispose() {
-        this.viewer.off("contextmenu", this.stopContextMenu);
-        this.viewer.off("zoom", this.updateControls);
-        this.viewer.off("viewposition", this.updateControls);
         this.viewer.off("geometryend", this.updateControls);
+        this.viewer.off("viewposition", this.updateControls);
+        this.viewer.off("zoom", this.updateControls);
+        this.viewer.off("drawviewpoint", this.updateControls);
+        this.viewer.off("contextmenu", this.stopContextMenu);
         this.orbit.removeEventListener("change", this.controlsChange);
         this.orbit.dispose();
     }
@@ -2240,6 +4801,7 @@ class DefaultPositionComponent {
             this.viewer.camera.far = size * 100;
             this.viewer.camera.updateMatrixWorld();
             this.viewer.camera.updateProjectionMatrix();
+            this.viewer.executeCommand("setDefaultViewPosition", "sw");
             this.viewer.executeCommand("zoomToExtents");
         };
         this.viewer = viewer;
@@ -2409,6 +4971,7 @@ class Viewer extends EventEmitter2 {
         this.renderTime = 0;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
+        this._markup = new KonvaMarkup;
     }
     get options() {
         return this._options;
@@ -2416,6 +4979,9 @@ class Viewer extends EventEmitter2 {
     get draggers() {
         return Object.keys(this.draggerFactory);
     }
+    get markup() {
+        return this._markup;
+    }
     initialize(canvas, onProgress) {
         this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
         this.scene = new Scene;
@@ -2435,6 +5001,7 @@ class Viewer extends EventEmitter2 {
         this.renderer.toneMapping = LinearToneMapping;
         this.canvas = canvas;
         this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
+        this._markup.initialize(this.canvas, this.canvasEvents, this, this);
         this.components.push(new ExtentsComponent(this));
         this.components.push(new LightComponent(this));
         this.components.push(new BackgroundComponent(this));
@@ -2444,6 +5011,7 @@ class Viewer extends EventEmitter2 {
         this.components.push(new SelectionComponent(this));
         this.components.push(new WCSHelperComponent(this));
         this.syncOptions();
+        this.syncOverlay();
         this.renderTime = performance.now();
         this.render(this.renderTime);
         if (typeof onProgress === "function") onProgress(new ProgressEvent("progress", {
@@ -2469,9 +5037,10 @@ class Viewer extends EventEmitter2 {
         });
         this.components.forEach((component => component.dispose()));
         this.components = [];
-        this.setActiveDragger("");
+        this.setActiveDragger();
         this.removeAllListeners();
         this.clear();
+        this._markup.dispose();
         if (this.canvas) {
             this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
             this.canvas = undefined;
@@ -2489,12 +5058,15 @@ class Viewer extends EventEmitter2 {
     render(time) {
         if (!this.renderNeeded) return;
         if (!this.renderer) return;
-        const clippingPlanes = this.renderer.clippingPlanes;
+        this.renderNeeded = false;
         this.renderer.setViewport(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
+        this.renderer.autoClear = true;
         this.renderer.render(this.scene, this.camera);
+        const clippingPlanes = this.renderer.clippingPlanes;
         this.renderer.clippingPlanes = [];
         this.renderer.autoClear = false;
         this.renderer.render(this.helpers, this.camera);
+        this.renderer.clippingPlanes = clippingPlanes;
         const deltaTime = (time - this.renderTime) / 1e3;
         this.renderTime = time;
         this.emitEvent({
@@ -2502,9 +5074,6 @@ class Viewer extends EventEmitter2 {
             time: time,
             deltaTime: deltaTime
         });
-        this.renderer.autoClear = true;
-        this.renderer.clippingPlanes = clippingPlanes;
-        this.renderNeeded = false;
     }
     update(force = false) {
         this.renderNeeded = true;
@@ -2581,8 +5150,9 @@ class Viewer extends EventEmitter2 {
             if (!gltf.scene) throw new Error("No glTF scene found");
             this.models.push(gltf);
             this.scene.add(gltf.scene);
+            this.syncOptions();
+            this.syncOverlay();
             this.update();
-            this.resetActiveDragger();
             this.emitEvent({
                 type: "databasechunk"
             });
@@ -2614,20 +5184,61 @@ class Viewer extends EventEmitter2 {
             if (object.material) disposeMaterial(object.material);
         }
         this.setActiveDragger();
-        this.selected = [];
-        this.renderer.clippingPlanes = [];
+        this.clearSlices();
+        this.clearOverlay();
         this.helpers.traverse(disposeObject);
         this.helpers.clear();
         this.models.forEach((gltf => gltf.scene.traverse(disposeObject)));
         this.models.forEach((gltf => gltf.scene.removeFromParent()));
         this.models = [];
         this.scene.clear();
+        this.syncOptions();
+        this.syncOverlay();
+        this.update(true);
         this.emitEvent({
             type: "clear"
         });
-        this.update(true);
         return this;
     }
+    syncOverlay() {
+        if (!this.renderer) return;
+        this._markup.syncOverlay();
+        this.update();
+    }
+    clearOverlay() {
+        if (!this.renderer) return;
+        this._markup.clearOverlay();
+        this.update();
+    }
+    clearSlices() {
+        if (!this.renderer) return;
+        this.renderer.clippingPlanes = [];
+        this.update();
+    }
+    getSelected() {
+        return this.executeCommand("getSelected");
+    }
+    setSelected(handles) {
+        this.executeCommand("setSelected", handles);
+    }
+    clearSelected() {
+        this.executeCommand("clearSelected");
+    }
+    hideSelected() {
+        this.executeCommand("hideSelected");
+    }
+    isolateSelected() {
+        this.executeCommand("isolateSelected");
+    }
+    showAll() {
+        this.executeCommand("showAll");
+    }
+    explode(index = 0) {
+        this.executeCommand("explode", index);
+    }
+    collect() {
+        this.executeCommand("collect");
+    }
     activeDragger() {
         return this._activeDragger;
     }
@@ -2652,6 +5263,7 @@ class Viewer extends EventEmitter2 {
                 type: "changeactivedragger",
                 data: name
             });
+            this.update();
         }
         return this._activeDragger;
     }
@@ -2665,11 +5277,44 @@ class Viewer extends EventEmitter2 {
     is3D() {
         return true;
     }
-    getSelected() {
-        return this.executeCommand("getSelected");
+    screenToWorld(position) {
+        if (!this.renderer) return {
+            x: position.x,
+            y: position.y,
+            z: 0
+        };
+        const rect = this.canvas.getBoundingClientRect();
+        const x = position.x / (rect.width / 2) - 1;
+        const y = -position.y / (rect.height / 2) + 1;
+        const point = new Vector3(x, y, -1);
+        point.unproject(this.camera);
+        return {
+            x: point.x,
+            y: point.y,
+            z: point.z
+        };
     }
-    setSelected(handles) {
-        this.executeCommand("setSelected", handles);
+    worldToScreen(position) {
+        if (!this.renderer) return {
+            x: position.x,
+            y: position.y
+        };
+        const point = new Vector3(position.x, position.y, position.z);
+        point.project(this.camera);
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (point.x + 1) * (rect.width / 2);
+        const y = (-point.y + 1) * (rect.height / 2);
+        return {
+            x: x,
+            y: y
+        };
+    }
+    getScale() {
+        return {
+            x: 1,
+            y: 1,
+            z: 1
+        };
     }
     executeCommand(id, ...args) {
         return commands("ThreeJS").executeCommand(id, this, ...args);
@@ -2677,14 +5322,89 @@ class Viewer extends EventEmitter2 {
     getComponent(type) {
         return this.components.find((component => component instanceof type));
     }
-    drawViewpoint(viewpoint) {}
+    drawViewpoint(viewpoint) {
+        var _a, _b, _c;
+        if (!this.renderer) return;
+        const getVector3FromPoint3d = ({x: x, y: y, z: z}) => new Vector3(x, y, z);
+        const setPerspectiveCamera = camera => {
+            if (camera) {
+                this.camera.up.copy(getVector3FromPoint3d(camera.up_vector));
+                this.camera.fov = camera.field_of_view;
+                this.camera.position.copy(getVector3FromPoint3d(camera.view_point));
+                this.camera.lookAt(getVector3FromPoint3d(camera.direction).add(this.camera.position));
+                this.camera.updateMatrixWorld();
+                this.camera.updateProjectionMatrix();
+            }
+        };
+        const setClippingPlanes = clipping_planes => {
+            clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach((clipping_plane => {
+                const plane = new Plane;
+                plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
+                this.renderer.clippingPlanes.push(plane);
+            }));
+        };
+        const setSelection = selection => {
+            this.setSelected(selection === null || selection === void 0 ? void 0 : selection.map((component => component.handle)));
+        };
+        const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
+        this.setActiveDragger();
+        this.clearSlices();
+        this.clearOverlay();
+        this.clearSelected();
+        this.showAll();
+        this.explode();
+        setPerspectiveCamera(viewpoint.perspective_camera);
+        setClippingPlanes(viewpoint.clipping_planes);
+        setSelection(viewpoint.selection);
+        this._markup.setViewpoint(viewpoint);
+        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
+        this.setActiveDragger(draggerName);
+        this.emitEvent({
+            type: "drawviewpoint",
+            data: viewpoint
+        });
+        this.update();
+    }
     createViewpoint() {
-        var _a;
-        const viewpoint = {};
-        viewpoint.snapshot = {
-            data: (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.toDataURL("image/jpeg", .25)
+        if (!this.renderer) return {};
+        const getPoint3dFromVector3 = ({x: x, y: y, z: z}) => ({
+            x: x,
+            y: y,
+            z: z
+        });
+        const getPerspectiveCamera = () => ({
+            view_point: getPoint3dFromVector3(this.camera.position),
+            direction: getPoint3dFromVector3(this.camera.getWorldDirection(new Vector3)),
+            up_vector: getPoint3dFromVector3(this.camera.up),
+            field_of_view: this.camera.fov
+        });
+        const getClippingPlanes = () => {
+            const clipping_planes = [];
+            this.renderer.clippingPlanes.forEach((plane => {
+                const clipping_plane = {
+                    location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3)),
+                    direction: getPoint3dFromVector3(plane.normal)
+                };
+                clipping_planes.push(clipping_plane);
+            }));
+            return clipping_planes;
+        };
+        const getSelection = () => this.getSelected().map((handle => ({
+            handle: handle
+        })));
+        const viewpoint = {
+            custom_fields: {}
         };
+        viewpoint.perspective_camera = getPerspectiveCamera();
+        viewpoint.clipping_planes = getClippingPlanes();
+        viewpoint.selection = getSelection();
         viewpoint.description = (new Date).toDateString();
+        this._markup.getViewpoint(viewpoint);
+        viewpoint.custom_fields.camera_target = getPoint3dFromVector3(this.target);
+        this.emitEvent({
+            type: "createviewpoint",
+            data: viewpoint
+        });
         return viewpoint;
     }
 }