@inweb/viewer-three 25.12.1 → 26.1.0

package/dist/viewer-three.module.js

@@ -1,14 +1,14 @@
-import { Vector2, Raycaster, MeshBasicMaterial, Box3, Vector3, Sphere, LoadingManager, LoaderUtils, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Controls, Clock, Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, DoubleSide, Plane, Object3D, Matrix4, Vector4, AmbientLight, DirectionalLight, Color, PMREMGenerator, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
-
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-
 import Konva from "konva";
 
+import { Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, Vector3, EventDispatcher, MOUSE, TOUCH, Quaternion, Spherical, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, Color, PMREMGenerator, AmbientLight, DirectionalLight, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 
-class Commands {
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
+class CommandsRegistry {
     constructor() {
         this._commands = new Map;
     }
@@ -52,22 +52,108 @@ class Commands {
     }
 }
 
-const _commands = new Map;
+const _commandsRegistry = new Map;
+
+function commandsRegistry(viewerType = "") {
+    let result = _commandsRegistry.get(viewerType);
+    if (!result) {
+        result = new CommandsRegistry;
+        _commandsRegistry.set(viewerType, result);
+    }
+    return result;
+}
+
+class Dragger {
+    constructor(viewer) {
+        this.name = "";
+    }
+    dispose() {}
+}
+
+class DraggersRegistry {
+    constructor() {
+        this._draggers = new Map;
+    }
+    registerDragger(name, provider) {
+        this._draggers.set(name, provider);
+    }
+    registerDraggerAlias(name, alias) {
+        const provider = this.getDragger(name);
+        if (provider) this.registerDragger(alias, (viewer => provider(viewer)));
+    }
+    getDragger(name) {
+        return this._draggers.get(name);
+    }
+    getDraggers() {
+        const map = new Map;
+        this._draggers.forEach(((value, key) => map.set(key, value)));
+        return map;
+    }
+    createDragger(name, viewer) {
+        const provider = this.getDragger(name);
+        if (!provider) return null;
+        const dragger = provider(viewer);
+        dragger.name = name;
+        return dragger;
+    }
+}
+
+const _draggersRegistry = new Map;
 
-function commands(viewerType = "") {
-    let result = _commands.get(viewerType);
+function draggersRegistry(viewerType = "") {
+    let result = _draggersRegistry.get(viewerType);
     if (!result) {
-        result = new Commands;
-        _commands.set(viewerType, result);
+        result = new DraggersRegistry;
+        _draggersRegistry.set(viewerType, result);
     }
     return result;
 }
 
-commands("").registerCommand("noop", (() => {}));
+class Component {
+    constructor(viewer) {
+        this.name = "";
+    }
+    dispose() {}
+}
+
+class Components {
+    constructor() {
+        this._components = new Map;
+    }
+    registerComponent(name, provider) {
+        this._components.set(name, provider);
+    }
+    registerComponentAlias(name, alias) {
+        const provider = this.getComponent(name);
+        if (provider) this.registerComponent(alias, (viewer => provider(viewer)));
+    }
+    getComponent(name) {
+        return this._components.get(name);
+    }
+    getComponents() {
+        const map = new Map;
+        this._components.forEach(((value, key) => map.set(key, value)));
+        return map;
+    }
+    createComponent(name, viewer) {
+        const provider = this.getComponent(name);
+        if (!provider) return null;
+        const component = provider(viewer);
+        component.name = name;
+        return component;
+    }
+}
 
-commands("VisualizeJS").registerCommand("noop", (() => {}));
+const _components = new Map;
 
-commands("ThreeJS").registerCommand("noop", (() => {}));
+function componentsRegistry(viewerType = "") {
+    let result = _components.get(viewerType);
+    if (!result) {
+        result = new Components;
+        _components.set(viewerType, result);
+    }
+    return result;
+}
 
 function defaultOptions() {
     return {
@@ -381,616 +467,216 @@ const CanvasEvents = [ "click", "contextmenu", "dblclick", "mousedown", "mousele
 
 const CANVAS_EVENTS = CanvasEvents;
 
-class Dragger {
-    constructor(viewer) {
-        this.name = "";
-    }
-    initialize() {}
-    dispose() {}
-    updatePreview() {}
-}
-
-function applyModelTransform(viewer, model) {
-    console.warn("applyModelTransform not implemented");
-}
-
-commands("ThreeJS").registerCommand("applyModelTransform", applyModelTransform);
-
-commands("ThreeJS").registerCommand("clearMarkup", (viewer => viewer.clearOverlay()));
-
-commands("ThreeJS").registerCommandAlias("clearMarkup", "clearOverlay");
-
-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()
-            });
+class WorldTransform {
+    screenToWorld(position) {
+        return {
+            x: position.x,
+            y: position.y,
+            z: 0
         };
-        this.onDoubleClick = event => {
-            if (event.button !== 0) return;
-            this.viewer.executeCommand("zoomToSelected");
+    }
+    worldToScreen(position) {
+        return {
+            x: position.x,
+            y: position.y
         };
-        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();
+    }
+    getScale() {
+        return {
+            x: 1,
+            y: 1,
+            z: 1
         };
-        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);
+}
+
+class MarkupColor {
+    constructor(r, g, b) {
+        this.setColor(r, g, b);
     }
-    getMousePosition(event, target) {
-        return target.set(event.clientX, event.clientY);
+    asHex() {
+        return "#" + this.HEX;
     }
-    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)));
-        this.raycaster.params = this.raycaster.params = {
-            Mesh: {},
-            Line: {
-                threshold: .25
-            },
-            Line2: {
-                threshold: .25
-            },
-            LOD: {},
-            Points: {
-                threshold: .1
-            },
-            Sprite: {}
+    asRGB() {
+        return {
+            r: this.R,
+            g: this.G,
+            b: this.B
         };
-        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);
+    setColor(r, g, b) {
+        this.R = r;
+        this.G = g;
+        this.B = b;
+        this.HEX = this.rgbToHex(r, g, b);
     }
-    clearSelection() {
-        this.viewer.selected.forEach((object => {
-            object.isSelected = false;
-            object.material = object.originalMaterial;
-        }));
-        this.viewer.selected.length = 0;
+    rgbToHex(r, g, b) {
+        const valueToHex = c => {
+            const hex = c.toString(16);
+            return hex === "0" ? "00" : hex;
+        };
+        return valueToHex(r) + valueToHex(g) + valueToHex(b);
     }
 }
 
-function clearSelected(viewer) {
-    const selection = new SelectionComponent(viewer);
-    selection.clearSelection();
-    selection.dispose();
-    viewer.update();
-    viewer.emitEvent({
-        type: "select",
-        data: undefined,
-        handles: []
-    });
-}
-
-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);
-    return viewer.canvas.toDataURL(type, encoderOptions);
-}
-
-commands("ThreeJS").registerCommand("createPreview", createPreview);
-
-function calcObjectDepth(object, depth) {
-    let res = depth;
-    object.children.forEach((x => {
-        const objectDepth = calcObjectDepth(x, depth + 1);
-        if (res < objectDepth) res = objectDepth;
-    }));
-    object.originalPosition = object.position.clone();
-    return res;
-}
+const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
 
-function explodeScene(scene, scale = 0) {
-    scale /= 100;
-    if (!scene.maxDepth) scene.maxDepth = calcObjectDepth(scene, 1);
-    const maxDepth = scene.maxDepth;
-    let explodeDepth = scale * (maxDepth - 1) + 1;
-    if (maxDepth === 1) explodeDepth = 1;
-    function explodeObject(object, depth, parentCenter, parentOffset) {
-        const objectBox = (new Box3).setFromObject(object);
-        const objectCenter = objectBox.getCenter(new Vector3);
-        const objectOffset = parentOffset.clone();
-        if (depth > 0 && depth <= explodeDepth) {
-            const offset = objectCenter.clone().sub(parentCenter).multiplyScalar(scale);
-            objectOffset.add(offset);
-        }
-        object.children.forEach((object => explodeObject(object, depth + 1, objectCenter, objectOffset)));
-        const originalPosition = object.originalPosition;
-        object.position.copy(originalPosition);
-        if (scale > 0) {
-            const direction = objectCenter.sub(parentCenter).normalize();
-            object.position.add(direction.add(objectOffset));
+class KonvaLine {
+    constructor(params, ref = null) {
+        var _a, _b;
+        if (ref) {
+            this._ref = ref;
+            return;
         }
-    }
-    const sceneExtents = (new Box3).setFromObject(scene);
-    const sceneCenter = sceneExtents.getCenter(new Vector3);
-    explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
-}
-
-function explode(viewer, index = 0) {
-    viewer.models.forEach((gltf => explodeScene(gltf.scene, index)));
-    viewer.update();
-    viewer.emitEvent({
-        type: "explode",
-        data: index
-    });
-}
-
-commands("ThreeJS").registerCommand("explode", explode);
-
-commands("ThreeJS").registerCommand("collect", (viewer => explode(viewer, 0)));
-
-const defaultViewPositions = {
-    top: new Vector3(0, 0, 1),
-    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),
-    sw: new Vector3(-.5, -.5, 1).normalize(),
-    se: new Vector3(.5, -.5, 1).normalize(),
-    ne: new Vector3(.5, .5, 1).normalize(),
-    nw: new Vector3(-.5, .5, 1).normalize()
-};
-
-function setDefaultViewPosition(viewer, position) {
-    const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
-    const center = viewer.extents.getCenter(new Vector3);
-    const sphere = viewer.extents.getBoundingSphere(new Sphere);
-    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",
-        data: position
-    });
-    viewer.executeCommand("zoomToExtents");
-}
-
-commands("ThreeJS").registerCommand("setDefaultViewPosition", setDefaultViewPosition);
-
-commands("ThreeJS").registerCommand("top", (viewer => setDefaultViewPosition(viewer, "top")));
-
-commands("ThreeJS").registerCommand("bottom", (viewer => setDefaultViewPosition(viewer, "bottom")));
-
-commands("ThreeJS").registerCommand("left", (viewer => setDefaultViewPosition(viewer, "left")));
-
-commands("ThreeJS").registerCommand("right", (viewer => setDefaultViewPosition(viewer, "right")));
-
-commands("ThreeJS").registerCommand("front", (viewer => setDefaultViewPosition(viewer, "front")));
-
-commands("ThreeJS").registerCommand("back", (viewer => setDefaultViewPosition(viewer, "back")));
-
-commands("ThreeJS").registerCommand("sw", (viewer => setDefaultViewPosition(viewer, "sw")));
-
-commands("ThreeJS").registerCommand("se", (viewer => setDefaultViewPosition(viewer, "se")));
-
-commands("ThreeJS").registerCommand("ne", (viewer => setDefaultViewPosition(viewer, "ne")));
-
-commands("ThreeJS").registerCommand("nw", (viewer => setDefaultViewPosition(viewer, "nw")));
-
-commands("ThreeJS").registerCommandAlias("top", "k3DViewTop");
-
-commands("ThreeJS").registerCommandAlias("bottom", "k3DViewBottom");
-
-commands("ThreeJS").registerCommandAlias("left", "k3DViewLeft");
-
-commands("ThreeJS").registerCommandAlias("right", "k3DViewRight");
-
-commands("ThreeJS").registerCommandAlias("front", "k3DViewFront");
-
-commands("ThreeJS").registerCommandAlias("back", "k3DViewBack");
-
-commands("ThreeJS").registerCommandAlias("se", "k3DViewSE");
-
-commands("ThreeJS").registerCommandAlias("sw", "k3DViewSW");
-
-commands("ThreeJS").registerCommandAlias("ne", "k3DViewNE");
-
-commands("ThreeJS").registerCommandAlias("nw", "k3DViewNW");
-
-function getDefaultViewPositions() {
-    return Object.keys(defaultViewPositions);
-}
-
-commands("ThreeJS").registerCommand("getDefaultViewPositions", getDefaultViewPositions);
-
-function getModels(viewer) {
-    const handles = viewer.models.map((model => model.userData.handle || "")).filter((handle => handle));
-    return handles;
-}
-
-commands("ThreeJS").registerCommand("getModels", getModels);
-
-function getSelected(viewer) {
-    return viewer.selected.map((object => {
-        var _a;
-        return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle;
-    })).filter((handle => handle));
-}
-
-commands("ThreeJS").registerCommand("getSelected", getSelected);
-
-function hideSelected(viewer) {
-    viewer.selected.forEach((object => object.visible = false));
-    const selection = new SelectionComponent(viewer);
-    selection.clearSelection();
-    selection.dispose();
-    viewer.update();
-    viewer.emitEvent({
-        type: "hide"
-    });
-    viewer.emitEvent({
-        type: "select",
-        data: undefined,
-        handles: []
-    });
-}
-
-commands("ThreeJS").registerCommand("hideSelected", hideSelected);
-
-function isolateSelected(viewer) {
-    const selectedSet = new Set(viewer.selected);
-    function isolateObject(object, depth) {
-        let canBeIsolated = true;
-        object.children.forEach((object => {
-            if (selectedSet.has(object)) canBeIsolated = false; else isolateObject(object, depth + 1);
+        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);
         }));
-        if (canBeIsolated && depth > 0) object.visible = false;
-        return canBeIsolated;
+        this._ref.id(this._ref._id.toString());
     }
-    isolateObject(viewer.scene, 0);
-    viewer.update();
-    viewer.emitEvent({
-        type: "isolate"
-    });
-}
-
-commands("ThreeJS").registerCommand("isolateSelected", isolateSelected);
-
-function regenerateAll(viewer) {
-    console.warn("regenerateAll not implemented");
-    viewer.emit({
-        type: "regenerateall"
-    });
-}
-
-commands("ThreeJS").registerCommand("regenerateAll", regenerateAll);
-
-function resetView(viewer) {
-    viewer.executeCommand("setActiveDragger");
-    viewer.executeCommand("clearSlices");
-    viewer.executeCommand("clearOverlay");
-    viewer.executeCommand("setMarkupColor");
-    viewer.executeCommand("clearSelected");
-    viewer.executeCommand("showAll");
-    viewer.executeCommand("explode", 0);
-    viewer.executeCommand("zoomToExtents", true);
-    viewer.executeCommand("k3DViewSW");
-    viewer.emit({
-        type: "resetview"
-    });
-}
-
-commands("ThreeJS").registerCommand("resetView", resetView);
-
-function selectModel(viewer, handle) {
-    console.warn("selectModel not implemented");
-    viewer.emit({
-        type: "select",
-        data: []
-    });
-}
-
-commands("ThreeJS").registerCommand("selectModel", selectModel);
-
-commands("ThreeJS").registerCommand("setActiveDragger", ((viewer, dragger = "") => {
-    viewer.setActiveDragger(dragger);
-}));
+    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;
 
-commands("ThreeJS").registerCommand("setMarkupColor", ((viewer, r = 255, g = 0, b = 0) => {
-    console.warn("setMarkupColor not implemented");
-}));
+          case LineTypeSpecs.get("dash"):
+            type = "dash";
+            break;
 
-function setSelected(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 selection = new SelectionComponent(viewer);
-    selection.clearSelection();
-    objects.forEach((object => selection.select(object)));
-    selection.dispose();
-    viewer.update();
-    viewer.emitEvent({
-        type: "select",
-        data: undefined,
-        handles: handles
-    });
+          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);
+    }
 }
 
-commands("ThreeJS").registerCommand("setSelected", setSelected);
-
-function showAll(viewer) {
-    viewer.scene.traverse((object => object.visible = true));
-    viewer.update();
-    viewer.emitEvent({
-        type: "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) => result.expandByObject(object)), 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) => result.expandByObject(object)), 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 {
+class KonvaText {
     constructor(params, ref = null) {
-        var _a, _b;
+        var _a, _b, _c;
+        this.TEXT_FONT_FAMILY = "Calibri";
         if (ref) {
             this._ref = ref;
             return;
         }
         if (!params) params = {};
-        if (!params.points) params.points = [ {
-            x: 50,
-            y: 50
-        }, {
+        if (!params.position) params.position = {
             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,
+        };
+        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,
-            strokeScaleEnabled: false,
-            dash: LineTypeSpecs.get(params.type) || []
+            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());
     }
@@ -1004,13 +690,13 @@ class KonvaLine {
         this._ref.draggable(value);
     }
     type() {
-        return "Line";
+        return "Text";
     }
     getColor() {
-        return this._ref.stroke();
+        return this._ref.fill();
     }
     setColor(hex) {
-        this._ref.stroke(hex);
+        this._ref.fill(hex);
     }
     getRotation() {
         return this._ref.rotation();
@@ -1028,139 +714,14 @@ class KonvaLine {
         this._ref.destroy();
         this._ref = null;
     }
-    getPoints() {
-        return this._ref.points();
+    getText() {
+        return this._ref.text();
     }
-    setLineWidth(size) {
-        this._ref.strokeWidth(size);
+    setText(text) {
+        this._ref.text(text);
     }
-    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();
+    getPosition() {
+        return this._ref.getPosition();
     }
     setPosition(x, y) {
         this._ref.setPosition({
@@ -2750,6 +2311,50 @@ class KonvaMarkup {
     }
 }
 
+class PlaneHelper extends Line {
+    constructor(plane, size = 1, color = 16776960, offset = new Vector3) {
+        const positions = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0 ];
+        const geometry = new BufferGeometry;
+        geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
+        geometry.computeBoundingSphere();
+        super(geometry, new LineBasicMaterial({
+            color: color,
+            toneMapped: false
+        }));
+        this.type = "PlaneHelper";
+        this.plane = plane;
+        this.size = size;
+        this.offset = offset;
+        const positions2 = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0 ];
+        const geometry2 = new BufferGeometry;
+        geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
+        geometry2.computeBoundingSphere();
+        this.helper = new Mesh(geometry2, new MeshBasicMaterial({
+            color: color,
+            opacity: .2,
+            transparent: true,
+            depthWrite: false,
+            toneMapped: false,
+            side: DoubleSide
+        }));
+        this.add(this.helper);
+    }
+    dispose() {
+        this.geometry.dispose();
+        this.material.dispose();
+        this.children[0].geometry.dispose();
+        this.children[0].material.dispose();
+    }
+    updateMatrixWorld(force) {
+        this.position.set(0, 0, 0);
+        this.lookAt(this.plane.normal);
+        this.position.copy(this.offset);
+        this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
+        this.scale.set(.5 * this.size, .5 * this.size, 1);
+        super.updateMatrixWorld(force);
+    }
+}
+
 const _changeEvent = {
     type: "change"
 };
@@ -3305,214 +2910,642 @@ class OrbitControls extends EventDispatcher {
                 handleMouseMoveDolly(event);
                 break;
 
-              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 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;
+
+              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;
+
+              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;
+
+              case STATE.TOUCH_PAN:
+                if (scope.enablePan === false) return;
+                handleTouchMovePan(event);
+                scope.update();
+                break;
+
+              case STATE.TOUCH_DOLLY_PAN:
+                if (scope.enableZoom === false && scope.enablePan === false) return;
+                handleTouchMoveDollyPan(event);
+                scope.update();
+                break;
+
+              case STATE.TOUCH_DOLLY_ROTATE:
+                if (scope.enableZoom === false && scope.enableRotate === false) return;
+                handleTouchMoveDollyRotate(event);
+                scope.update();
+                break;
+
+              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();
+    }
+}
+
+class OrbitDragger {
+    constructor(viewer) {
+        this.updateControls = () => {
+            this.orbit.maxDistance = this.viewer.camera.far;
+            this.orbit.minDistance = this.viewer.camera.near;
+            this.orbit.target.copy(this.viewer.target);
+            this.orbit.update();
+        };
+        this.controlsStart = () => {
+            this.changed = false;
+        };
+        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 => {
+            if (this.changed) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.orbit = new OrbitControls(viewer.camera, viewer.canvas);
+        this.orbit.mouseButtons = {
+            LEFT: MOUSE.ROTATE,
+            MIDDLE: MOUSE.PAN,
+            RIGHT: MOUSE.PAN
+        };
+        this.orbit.touches = {
+            ONE: TOUCH.ROTATE,
+            TWO: TOUCH.DOLLY_PAN
+        };
+        this.orbit.screenSpacePanning = true;
+        this.orbit.rotateSpeed = .33;
+        this.orbit.addEventListener("start", this.controlsStart);
+        this.orbit.addEventListener("change", this.controlsChange);
+        this.changed = false;
+        this.viewer = viewer;
+        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("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("start", this.controlsStart);
+        this.orbit.removeEventListener("change", this.controlsChange);
+        this.orbit.dispose();
+    }
+}
+
+class CuttingPlaneDragger extends OrbitDragger {
+    constructor(viewer, normal, color) {
+        super(viewer);
+        this.transformChange = () => {
+            this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
+            this.viewer.update();
+        };
+        this.transformDrag = event => {
+            this.orbit.enabled = !event.value;
+        };
+        this.viewerExplode = () => {
+            this.planeHelper.size = this.viewer.extents.getSize(new Vector3).length();
+            this.viewer.update();
+        };
+        this.onDoubleClick = event => {
+            event.stopPropagation();
+            this.plane.negate();
+            this.viewer.update();
+        };
+        const size = viewer.extents.getSize(new Vector3).length();
+        const center = viewer.extents.getCenter(new Vector3);
+        const constant = -center.dot(normal);
+        this.plane = new Plane(normal, constant);
+        if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
+        viewer.renderer.clippingPlanes.push(this.plane);
+        this.planeHelper = new PlaneHelper(this.plane, size, color, center);
+        this.viewer.helpers.add(this.planeHelper);
+        this.planeCenter = new Object3D;
+        this.planeCenter.position.copy(viewer.extents.getCenter(new Vector3));
+        this.viewer.helpers.add(this.planeCenter);
+        this.transform = new TransformControls(viewer.camera, viewer.canvas);
+        this.transform.showX = !!normal.x;
+        this.transform.showY = !!normal.y;
+        this.transform.showZ = !!normal.z;
+        this.transform.attach(this.planeCenter);
+        this.transform.addEventListener("change", this.transformChange);
+        this.transform.addEventListener("dragging-changed", this.transformDrag);
+        this.viewer.helpers.add(this.transform.getHelper());
+        this.viewer.on("explode", this.viewerExplode);
+        this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+        this.viewer.update();
+    }
+    dispose() {
+        this.viewer.off("explode", this.viewerExplode);
+        this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
+        this.transform.removeEventListener("change", this.transformChange);
+        this.transform.removeEventListener("dragging-changed", this.transformDrag);
+        this.transform.getHelper().removeFromParent();
+        this.transform.detach();
+        this.transform.dispose();
+        this.planeHelper.removeFromParent();
+        this.planeHelper.dispose();
+        this.planeCenter.removeFromParent();
+        super.dispose();
+    }
+}
+
+class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
+    constructor(viewer) {
+        super(viewer, new Vector3(1, 0, 0), 16711680);
+    }
+}
+
+class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
+    constructor(viewer) {
+        super(viewer, new Vector3(0, 1, 0), 65280);
+    }
+}
+
+class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
+    constructor(viewer) {
+        super(viewer, new Vector3(0, 0, 1), 255);
+    }
+}
+
+const PRECISION = .01;
+
+class MeasureLineDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.onPointerDown = event => {
+            if (event.button !== 0) return;
+            this.line.startPoint = this.snapper.getSnapPoint(event);
+            this.line.render();
+            this.viewer.canvas.setPointerCapture(event.pointerId);
+            this.orbit.enabled = !this.line.startPoint;
+        };
+        this.onPointerMove = event => {
+            if (this.orbit.enabled && this.orbit.state !== -1) return;
+            this.line.endPoint = this.snapper.getSnapPoint(event);
+            this.line.render();
+            if (this.line.startPoint) this.changed = true;
+        };
+        this.onPointerUp = event => {
+            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
+                this.line = new MeasureLine(this.overlay);
+                this.overlay.addLine(this.line);
+            } else {
+                this.line.startPoint = undefined;
+                this.line.endPoint = undefined;
+                this.line.render();
+            }
+            this.viewer.canvas.releasePointerCapture(event.pointerId);
+            this.orbit.enabled = true;
+        };
+        this.onPointerCancel = event => {
+            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+        };
+        this.onPointerLeave = () => {
+            this.line.endPoint = undefined;
+            this.line.render();
+        };
+        this.renderOverlay = () => {
+            this.overlay.render();
+        };
+        this.updateSnapper = () => {
+            this.snapper.update(this.viewer.scene);
+        };
+        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
+        this.overlay.attach();
+        this.line = new MeasureLine(this.overlay);
+        this.overlay.addLine(this.line);
+        this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
+        this.snapper.update(viewer.scene);
+        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.addEventListener("render", this.renderOverlay);
+        this.viewer.addEventListener("hide", this.updateSnapper);
+        this.viewer.addEventListener("isolate", this.updateSnapper);
+        this.viewer.addEventListener("showall", this.updateSnapper);
+    }
+    dispose() {
+        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
+        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
+        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
+        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+        this.viewer.removeEventListener("render", this.renderOverlay);
+        this.viewer.removeEventListener("hide", this.updateSnapper);
+        this.viewer.removeEventListener("isolate", this.updateSnapper);
+        this.viewer.removeEventListener("showall", this.updateSnapper);
+        this.overlay.detach();
+        this.overlay.dispose();
+        super.dispose();
+    }
+}
+
+class MeasureSnapper {
+    constructor(camera, canvas) {
+        this.objects = [];
+        this.camera = camera;
+        this.canvas = canvas;
+        this.raycaster = new Raycaster;
+    }
+    getSnapPoint(event) {
+        const mouse = new Vector2(event.clientX, event.clientY);
+        const rect = this.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.camera);
+        this.raycaster.params = {
+            Mesh: {},
+            Line: {
+                threshold: .25
+            },
+            Line2: {
+                threshold: .25
+            },
+            LOD: {},
+            Points: {
+                threshold: .1
+            },
+            Sprite: {}
+        };
+        const intersects = this.raycaster.intersectObjects(this.objects, false);
+        if (intersects.length === 0) return undefined;
+        return intersects[0].point;
+    }
+    update(scene) {
+        this.objects = [];
+        scene.traverseVisible((child => this.objects.push(child)));
+    }
+}
+
+class MeasureOverlay {
+    constructor(camera, canvas) {
+        this.lines = [];
+        this.camera = camera;
+        this.canvas = canvas;
+        this.projector = new MeasureProjector(camera, canvas);
+    }
+    attach() {
+        this.container = document.createElement("div");
+        this.container.id = "measure-container";
+        this.container.style.background = "rgba(0,0,0,0)";
+        this.container.style.position = "absolute";
+        this.container.style.top = "0px";
+        this.container.style.left = "0px";
+        this.container.style.width = "100%";
+        this.container.style.height = "100%";
+        this.container.style.outline = "none";
+        this.container.style.pointerEvents = "none";
+        this.container.style.overflow = "hidden";
+        this.canvas.parentElement.appendChild(this.container);
+    }
+    dispose() {
+        this.clear();
+    }
+    detach() {
+        this.container.remove();
+        this.container = undefined;
+    }
+    clear() {
+        this.lines.forEach((line => line.dispose()));
+        this.lines = [];
+    }
+    render() {
+        this.projector.updateProjectionMatrix();
+        this.lines.forEach((line => line.render()));
+    }
+    update() {
+        this.lines.forEach((line => line.update()));
+    }
+    addLine(line) {
+        this.lines.push(line);
+    }
+    removeLine(line) {
+        this.lines = this.lines.filter((x => x !== line));
+    }
+}
+
+const _middlePoint = new Vector3;
+
+class MeasureLine {
+    constructor(overlay) {
+        this.id = Date.now();
+        this.unit = "";
+        this.scale = 1;
+        this.size = 10;
+        this.lineWidth = 2;
+        this.style = {
+            border: "2px solid #FFFFFF",
+            background: "#009bff",
+            boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+            color: "white",
+            font: "1rem system-ui"
+        };
+        this.overlay = overlay;
+        this.elementStartPoint = overlay.container.appendChild(document.createElement("div"));
+        this.elementEndPoint = overlay.container.appendChild(document.createElement("div"));
+        this.elementLine = overlay.container.appendChild(document.createElement("div"));
+        this.elementLabel = overlay.container.appendChild(document.createElement("div"));
+        this.update();
+    }
+    dispose() {
+        this.elementStartPoint.remove();
+        this.elementEndPoint.remove();
+        this.elementLine.remove();
+        this.elementLabel.remove();
+    }
+    render() {
+        const projector = this.overlay.projector;
+        if (this.startPoint) {
+            const {point: point, visible: visible} = projector.projectPoint(this.startPoint);
+            this.elementStartPoint.style.display = visible ? "block" : "none";
+            this.elementStartPoint.style.left = `${point.x}px`;
+            this.elementStartPoint.style.top = `${point.y}px`;
+        } else {
+            this.elementStartPoint.style.display = "none";
+        }
+        if (this.endPoint) {
+            const {point: point, visible: visible} = projector.projectPoint(this.endPoint);
+            this.elementEndPoint.style.display = visible ? "block" : "none";
+            this.elementEndPoint.style.left = `${point.x}px`;
+            this.elementEndPoint.style.top = `${point.y}px`;
+        } else {
+            this.elementEndPoint.style.display = "none";
+        }
+        if (this.startPoint && this.endPoint) {
+            const {point1: point1, point2: point2, visible: visible} = projector.projectLine(this.startPoint, this.endPoint);
+            point2.sub(point1);
+            const angle = point2.angle();
+            const width = point2.length();
+            this.elementLine.style.display = visible ? "block" : "none";
+            this.elementLine.style.left = `${point1.x}px`;
+            this.elementLine.style.top = `${point1.y}px`;
+            this.elementLine.style.width = `${width}px`;
+            this.elementLine.style.transform = `translate(0px, ${-this.lineWidth / 2}px) rotate(${angle}rad)`;
+        } else {
+            this.elementLine.style.display = "none";
+        }
+        if (this.startPoint && this.endPoint) {
+            _middlePoint.lerpVectors(this.startPoint, this.endPoint, .5);
+            const {point: point, visible: visible} = projector.projectPoint(_middlePoint);
+            const distance = this.getDistance();
+            this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
+            this.elementLabel.style.left = `${point.x}px`;
+            this.elementLabel.style.top = `${point.y}px`;
+            this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
+        } else {
+            this.elementLabel.style.display = "none";
+        }
+    }
+    update() {
+        this.elementStartPoint.id = `markup-dot-start-${this.id}`;
+        this.elementStartPoint.style.position = "absolute";
+        this.elementStartPoint.style.zIndex = "2";
+        this.elementStartPoint.style.width = `${this.size}px`;
+        this.elementStartPoint.style.height = `${this.size}px`;
+        this.elementStartPoint.style.border = this.style.border;
+        this.elementStartPoint.style.borderRadius = `${this.size}px`;
+        this.elementStartPoint.style.background = this.style.background;
+        this.elementStartPoint.style.boxShadow = this.style.boxShadow;
+        this.elementStartPoint.style.transform = "translate(-50%, -50%)";
+        this.elementEndPoint.id = `markup-dot-end-${this.id}`;
+        this.elementEndPoint.style.position = "absolute";
+        this.elementEndPoint.style.zIndex = "2";
+        this.elementEndPoint.style.width = `${this.size}px`;
+        this.elementEndPoint.style.height = `${this.size}px`;
+        this.elementEndPoint.style.border = this.style.border;
+        this.elementEndPoint.style.borderRadius = `${this.size}px`;
+        this.elementEndPoint.style.background = this.style.background;
+        this.elementEndPoint.style.boxShadow = this.style.boxShadow;
+        this.elementEndPoint.style.transform = "translate(-50%, -50%)";
+        this.elementLine.id = `markup-line-${this.id}`;
+        this.elementLine.style.position = "absolute";
+        this.elementLine.style.zIndex = "1";
+        this.elementLine.style.height = `${this.lineWidth}px`;
+        this.elementLine.style.background = this.style.background;
+        this.elementLine.style.boxShadow = this.style.boxShadow;
+        this.elementLine.style.transformOrigin = `0px ${this.lineWidth / 2}px`;
+        this.elementLabel.id = `markup-label-${this.id}`;
+        this.elementLabel.style.position = "absolute";
+        this.elementLabel.style.zIndex = "3";
+        this.elementLabel.style.padding = "2px";
+        this.elementLabel.style.paddingInline = "5px";
+        this.elementLabel.style.borderRadius = "5px";
+        this.elementLabel.style.background = this.style.background;
+        this.elementLabel.style.boxShadow = this.style.boxShadow;
+        this.elementLabel.style.color = this.style.color;
+        this.elementLabel.style.font = this.style.font;
+        this.elementLabel.style.transform = "translate(-50%, -50%)";
+    }
+    getDistance() {
+        return this.startPoint.distanceTo(this.endPoint) / this.scale;
+    }
+}
+
+let _widthHalf;
 
-                  case TOUCH.PAN:
-                    if (scope.enablePan === false) return;
-                    handleTouchStartPan();
-                    scope.state = STATE.TOUCH_PAN;
-                    break;
+let _heightHalf;
 
-                  default:
-                    scope.state = STATE.NONE;
-                }
-                break;
+const _viewMatrix = new Matrix4;
 
-              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;
+const _viewProjectionMatrix = new Matrix4;
 
-                  case TOUCH.DOLLY_ROTATE:
-                    if (scope.enableZoom === false && scope.enableRotate === false) return;
-                    handleTouchStartDollyRotate();
-                    scope.state = STATE.TOUCH_DOLLY_ROTATE;
-                    break;
+const _vector = new Vector3;
 
-                  default:
-                    scope.state = STATE.NONE;
-                }
-                break;
+const _vector1 = new Vector4;
 
-              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;
+const _vector2 = new Vector4;
 
-              case STATE.TOUCH_PAN:
-                if (scope.enablePan === false) return;
-                handleTouchMovePan(event);
-                scope.update();
-                break;
+const point = new Vector2;
 
-              case STATE.TOUCH_DOLLY_PAN:
-                if (scope.enableZoom === false && scope.enablePan === false) return;
-                handleTouchMoveDollyPan(event);
-                scope.update();
-                break;
+const point1 = new Vector2;
 
-              case STATE.TOUCH_DOLLY_ROTATE:
-                if (scope.enableZoom === false && scope.enableRotate === false) return;
-                handleTouchMoveDollyRotate(event);
-                scope.update();
-                break;
+const point2 = new Vector2;
 
-              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();
+class MeasureProjector {
+    constructor(camera, canvas) {
+        this.camera = camera;
+        this.canvas = canvas;
     }
-}
-
-class OrbitDragger {
-    constructor(viewer) {
-        this.updateControls = () => {
-            this.orbit.maxDistance = this.viewer.camera.far;
-            this.orbit.minDistance = this.viewer.camera.near;
-            this.orbit.target.copy(this.viewer.target);
-            this.orbit.update();
-        };
-        this.controlsStart = () => {
-            this.changed = false;
-        };
-        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 => {
-            if (this.changed) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.orbit = new OrbitControls(viewer.camera, viewer.canvas);
-        this.orbit.mouseButtons = {
-            LEFT: MOUSE.ROTATE,
-            MIDDLE: MOUSE.PAN,
-            RIGHT: MOUSE.PAN
-        };
-        this.orbit.touches = {
-            ONE: TOUCH.ROTATE,
-            TWO: TOUCH.DOLLY_PAN
+    updateProjectionMatrix() {
+        const rect = this.canvas.getBoundingClientRect();
+        _widthHalf = rect.width / 2;
+        _heightHalf = rect.height / 2;
+        _viewMatrix.copy(this.camera.matrixWorldInverse);
+        _viewProjectionMatrix.multiplyMatrices(this.camera.projectionMatrix, _viewMatrix);
+    }
+    projectPoint(p) {
+        _vector.copy(p).applyMatrix4(_viewProjectionMatrix);
+        const visible = _vector.z >= -1 && _vector.z <= 1;
+        point.x = (_vector.x + 1) * _widthHalf;
+        point.y = (-_vector.y + 1) * _heightHalf;
+        return {
+            point: point,
+            visible: visible
         };
-        this.orbit.screenSpacePanning = true;
-        this.orbit.rotateSpeed = .33;
-        this.orbit.addEventListener("start", this.controlsStart);
-        this.orbit.addEventListener("change", this.controlsChange);
-        this.changed = false;
-        this.viewer = viewer;
-        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("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();
+    projectLine(p1, p2) {
+        let visible;
+        _vector1.copy(p1).applyMatrix4(_viewProjectionMatrix);
+        _vector2.copy(p2).applyMatrix4(_viewProjectionMatrix);
+        const bc1near = _vector1.z + _vector1.w;
+        const bc2near = _vector2.z + _vector2.w;
+        const bc1far = -_vector1.z + _vector1.w;
+        const bc2far = -_vector2.z + _vector2.w;
+        if (bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0) visible = true; else if (bc1near < 0 && bc2near < 0 || bc1far < 0 && bc2far < 0) visible = false; else {
+            let alpha1 = 0;
+            let alpha2 = 1;
+            if (bc1near < 0) alpha1 = Math.max(alpha1, bc1near / (bc1near - bc2near)); else if (bc2near < 0) alpha2 = Math.min(alpha2, bc1near / (bc1near - bc2near));
+            if (bc1far < 0) alpha1 = Math.max(alpha1, bc1far / (bc1far - bc2far)); else if (bc2far < 0) alpha2 = Math.min(alpha2, bc1far / (bc1far - bc2far));
+            visible = alpha2 >= alpha1;
+            if (visible) {
+                _vector1.lerp(_vector2, alpha1);
+                _vector2.lerp(_vector1, 1 - alpha2);
+            }
+        }
+        _vector1.multiplyScalar(1 / _vector1.w);
+        _vector2.multiplyScalar(1 / _vector2.w);
+        point1.x = (_vector1.x + 1) * _widthHalf;
+        point1.y = (-_vector1.y + 1) * _heightHalf;
+        point2.x = (_vector2.x + 1) * _widthHalf;
+        point2.y = (-_vector2.y + 1) * _heightHalf;
+        return {
+            point1: point1,
+            point2: point2,
+            visible: visible
+        };
     }
 }
 
@@ -3527,17 +3560,6 @@ class PanDragger extends OrbitDragger {
     }
 }
 
-class ZoomDragger extends OrbitDragger {
-    constructor(viewer) {
-        super(viewer);
-        this.orbit.mouseButtons = {
-            LEFT: MOUSE.DOLLY,
-            MIDDLE: MOUSE.PAN,
-            RIGHT: MOUSE.PAN
-        };
-    }
-}
-
 class WalkControls extends Controls {
     constructor(camera, canvas) {
         super(camera, canvas);
@@ -3720,474 +3742,539 @@ class WalkDragger {
     }
 }
 
-class PlaneHelper extends Line {
-    constructor(plane, size = 1, color = 16776960, offset = new Vector3) {
-        const positions = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0 ];
-        const geometry = new BufferGeometry;
-        geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
-        geometry.computeBoundingSphere();
-        super(geometry, new LineBasicMaterial({
-            color: color,
-            toneMapped: false
-        }));
-        this.type = "PlaneHelper";
-        this.plane = plane;
-        this.size = size;
-        this.offset = offset;
-        const positions2 = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0 ];
-        const geometry2 = new BufferGeometry;
-        geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
-        geometry2.computeBoundingSphere();
-        this.helper = new Mesh(geometry2, new MeshBasicMaterial({
-            color: color,
-            opacity: .2,
-            transparent: true,
-            depthWrite: false,
-            toneMapped: false,
-            side: DoubleSide
+class ZoomDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.orbit.mouseButtons = {
+            LEFT: MOUSE.DOLLY,
+            MIDDLE: MOUSE.PAN,
+            RIGHT: MOUSE.PAN
+        };
+    }
+}
+
+const draggers = draggersRegistry("threejs");
+
+draggers.registerDragger("Pan", (viewer => new PanDragger(viewer)));
+
+draggers.registerDragger("Orbit", (viewer => new OrbitDragger(viewer)));
+
+draggers.registerDragger("Zoom", (viewer => new ZoomDragger(viewer)));
+
+draggers.registerDragger("MeasureLine", (viewer => new MeasureLineDragger(viewer)));
+
+draggers.registerDragger("CuttingPlaneXAxis", (viewer => new CuttingPlaneXAxisDragger(viewer)));
+
+draggers.registerDragger("CuttingPlaneYAxis", (viewer => new CuttingPlaneYAxisDragger(viewer)));
+
+draggers.registerDragger("CuttingPlaneZAxis", (viewer => new CuttingPlaneZAxisDragger(viewer)));
+
+draggers.registerDragger("Walk", (viewer => new WalkDragger(viewer)));
+
+function applyModelTransform(viewer, model) {
+    console.warn("applyModelTransform not implemented");
+}
+
+function clearMarkup(viewer) {
+    viewer.clearOverlay();
+}
+
+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)));
+        this.raycaster.params = this.raycaster.params = {
+            Mesh: {},
+            Line: {
+                threshold: .25
+            },
+            Line2: {
+                threshold: .25
+            },
+            LOD: {},
+            Points: {
+                threshold: .1
+            },
+            Sprite: {}
+        };
+        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: []
+    });
+}
+
+function clearSlices(viewer) {
+    viewer.clearSlices();
+}
+
+function createPreview(viewer, type = "image/jpeg", encoderOptions = .25) {
+    viewer.update(true);
+    return viewer.canvas.toDataURL(type, encoderOptions);
+}
+
+function calcObjectDepth(object, depth) {
+    let res = depth;
+    object.children.forEach((x => {
+        const objectDepth = calcObjectDepth(x, depth + 1);
+        if (res < objectDepth) res = objectDepth;
+    }));
+    object.originalPosition = object.position.clone();
+    return res;
+}
+
+function explodeScene(scene, scale = 0) {
+    scale /= 100;
+    if (!scene.maxDepth) scene.maxDepth = calcObjectDepth(scene, 1);
+    const maxDepth = scene.maxDepth;
+    let explodeDepth = scale * (maxDepth - 1) + 1;
+    if (maxDepth === 1) explodeDepth = 1;
+    function explodeObject(object, depth, parentCenter, parentOffset) {
+        const objectBox = (new Box3).setFromObject(object);
+        const objectCenter = objectBox.getCenter(new Vector3);
+        const objectOffset = parentOffset.clone();
+        if (depth > 0 && depth <= explodeDepth) {
+            const offset = objectCenter.clone().sub(parentCenter).multiplyScalar(scale);
+            objectOffset.add(offset);
+        }
+        object.children.forEach((object => explodeObject(object, depth + 1, objectCenter, objectOffset)));
+        const originalPosition = object.originalPosition;
+        object.position.copy(originalPosition);
+        if (scale > 0) {
+            const direction = objectCenter.sub(parentCenter).normalize();
+            object.position.add(direction.add(objectOffset));
+        }
+    }
+    const sceneExtents = (new Box3).setFromObject(scene);
+    const sceneCenter = sceneExtents.getCenter(new Vector3);
+    explodeObject(scene, 0, sceneCenter, new Vector3(0, 0, 0));
+}
+
+function explode(viewer, index = 0) {
+    viewer.models.forEach((gltf => explodeScene(gltf.scene, index)));
+    viewer.update();
+    viewer.emitEvent({
+        type: "explode",
+        data: index
+    });
+}
+
+function collect(viewer) {
+    explode(viewer, 0);
+}
+
+const defaultViewPositions = {
+    top: new Vector3(0, 0, 1),
+    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),
+    sw: new Vector3(-.5, -.5, 1).normalize(),
+    se: new Vector3(.5, -.5, 1).normalize(),
+    ne: new Vector3(.5, .5, 1).normalize(),
+    nw: new Vector3(-.5, .5, 1).normalize()
+};
+
+function setDefaultViewPosition(viewer, position) {
+    const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
+    const center = viewer.extents.getCenter(new Vector3);
+    const sphere = viewer.extents.getBoundingSphere(new Sphere);
+    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",
+        data: position
+    });
+    viewer.executeCommand("zoomToExtents");
+}
+
+function getDefaultViewPositions() {
+    return Object.keys(defaultViewPositions);
+}
+
+function getModels(viewer) {
+    return viewer.models.map((model => {
+        var _a;
+        return ((_a = model.userData) === null || _a === void 0 ? void 0 : _a.handle) || "";
+    })).filter((handle => handle));
+}
+
+function getSelected(viewer) {
+    return viewer.selected.map((object => {
+        var _a;
+        return (_a = object.userData) === null || _a === void 0 ? void 0 : _a.handle;
+    })).filter((handle => handle));
+}
+
+function hideSelected(viewer) {
+    viewer.selected.forEach((object => object.visible = false));
+    const selection = new SelectionComponent(viewer);
+    selection.clearSelection();
+    selection.dispose();
+    viewer.update();
+    viewer.emitEvent({
+        type: "hide"
+    });
+    viewer.emitEvent({
+        type: "select",
+        data: undefined,
+        handles: []
+    });
+}
+
+function isolateSelected(viewer) {
+    const selectedSet = new Set(viewer.selected);
+    function isolateObject(object, depth) {
+        let canBeIsolated = true;
+        object.children.forEach((object => {
+            if (selectedSet.has(object)) canBeIsolated = false; else isolateObject(object, depth + 1);
         }));
-        this.add(this.helper);
-    }
-    dispose() {
-        this.geometry.dispose();
-        this.material.dispose();
-        this.children[0].geometry.dispose();
-        this.children[0].material.dispose();
-    }
-    updateMatrixWorld(force) {
-        this.position.set(0, 0, 0);
-        this.lookAt(this.plane.normal);
-        this.position.copy(this.offset);
-        this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
-        this.scale.set(.5 * this.size, .5 * this.size, 1);
-        super.updateMatrixWorld(force);
+        if (canBeIsolated && depth > 0) object.visible = false;
+        return canBeIsolated;
     }
+    isolateObject(viewer.scene, 0);
+    viewer.update();
+    viewer.emitEvent({
+        type: "isolate"
+    });
 }
 
-class CuttingPlaneDragger extends OrbitDragger {
-    constructor(viewer, normal, color) {
-        super(viewer);
-        this.transformChange = () => {
-            this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
-            this.viewer.update();
-        };
-        this.transformDrag = event => {
-            this.orbit.enabled = !event.value;
-        };
-        this.viewerExplode = () => {
-            this.planeHelper.size = this.viewer.extents.getSize(new Vector3).length();
-            this.viewer.update();
-        };
-        this.onDoubleClick = event => {
-            event.stopPropagation();
-            this.plane.negate();
-            this.viewer.update();
-        };
-        const size = viewer.extents.getSize(new Vector3).length();
-        const center = viewer.extents.getCenter(new Vector3);
-        const constant = -center.dot(normal);
-        this.plane = new Plane(normal, constant);
-        if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
-        viewer.renderer.clippingPlanes.push(this.plane);
-        this.planeHelper = new PlaneHelper(this.plane, size, color, center);
-        this.viewer.helpers.add(this.planeHelper);
-        this.planeCenter = new Object3D;
-        this.planeCenter.position.copy(viewer.extents.getCenter(new Vector3));
-        this.viewer.helpers.add(this.planeCenter);
-        this.transform = new TransformControls(viewer.camera, viewer.canvas);
-        this.transform.showX = !!normal.x;
-        this.transform.showY = !!normal.y;
-        this.transform.showZ = !!normal.z;
-        this.transform.attach(this.planeCenter);
-        this.transform.addEventListener("change", this.transformChange);
-        this.transform.addEventListener("dragging-changed", this.transformDrag);
-        this.viewer.helpers.add(this.transform.getHelper());
-        this.viewer.on("explode", this.viewerExplode);
-        this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
-        this.viewer.update();
-    }
-    dispose() {
-        this.viewer.off("explode", this.viewerExplode);
-        this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
-        this.transform.removeEventListener("change", this.transformChange);
-        this.transform.removeEventListener("dragging-changed", this.transformDrag);
-        this.transform.getHelper().removeFromParent();
-        this.transform.detach();
-        this.transform.dispose();
-        this.planeHelper.removeFromParent();
-        this.planeHelper.dispose();
-        this.planeCenter.removeFromParent();
-        super.dispose();
-    }
+function regenerateAll(viewer) {
+    viewer.emit({
+        type: "regenerateall"
+    });
 }
 
-class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
-    constructor(viewer) {
-        super(viewer, new Vector3(1, 0, 0), 16711680);
-    }
+function resetView(viewer) {
+    viewer.executeCommand("setActiveDragger");
+    viewer.executeCommand("clearSlices");
+    viewer.executeCommand("clearOverlay");
+    viewer.executeCommand("setMarkupColor");
+    viewer.executeCommand("clearSelected");
+    viewer.executeCommand("showAll");
+    viewer.executeCommand("explode", 0);
+    viewer.executeCommand("zoomToExtents", true);
+    viewer.executeCommand("k3DViewSW");
+    viewer.emit({
+        type: "resetview"
+    });
 }
 
-class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
-    constructor(viewer) {
-        super(viewer, new Vector3(0, 1, 0), 65280);
-    }
+function selectModel(viewer, handle) {
+    console.warn("selectModel not implemented");
+    viewer.emit({
+        type: "select",
+        data: []
+    });
 }
 
-class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
-    constructor(viewer) {
-        super(viewer, new Vector3(0, 0, 1), 255);
-    }
+function setActiveDragger(viewer, dragger = "") {
+    viewer.setActiveDragger(dragger);
 }
 
-const PRECISION = .01;
+function setMarkupColor(viewer, r = 255, g = 0, b = 0) {
+    viewer.markup.setMarkupColor(r, g, b);
+}
 
-class MeasureLineDragger extends OrbitDragger {
-    constructor(viewer) {
-        super(viewer);
-        this.onPointerDown = event => {
-            if (event.button !== 0) return;
-            this.line.startPoint = this.snapper.getSnapPoint(event);
-            this.line.render();
-            this.viewer.canvas.setPointerCapture(event.pointerId);
-            this.orbit.enabled = !this.line.startPoint;
-        };
-        this.onPointerMove = event => {
-            if (this.orbit.enabled && this.orbit.state !== -1) return;
-            this.line.endPoint = this.snapper.getSnapPoint(event);
-            this.line.render();
-            if (this.line.startPoint) this.changed = true;
-        };
-        this.onPointerUp = event => {
-            if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
-                this.line = new MeasureLine(this.overlay);
-                this.overlay.addLine(this.line);
-            } else {
-                this.line.startPoint = undefined;
-                this.line.endPoint = undefined;
-                this.line.render();
-            }
-            this.viewer.canvas.releasePointerCapture(event.pointerId);
-            this.orbit.enabled = true;
-        };
-        this.onPointerCancel = event => {
-            this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
-        };
-        this.onPointerLeave = () => {
-            this.line.endPoint = undefined;
-            this.line.render();
-        };
-        this.renderOverlay = () => {
-            this.overlay.render();
-        };
-        this.updateSnapper = () => {
-            this.snapper.update(this.viewer.scene);
-        };
-        this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
-        this.overlay.attach();
-        this.line = new MeasureLine(this.overlay);
-        this.overlay.addLine(this.line);
-        this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
-        this.snapper.update(viewer.scene);
-        this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
-        this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
-        this.viewer.canvas.addEventListener("pointerup", this.onPointerUp);
-        this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel);
-        this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
-        this.viewer.addEventListener("render", this.renderOverlay);
-        this.viewer.addEventListener("hide", this.updateSnapper);
-        this.viewer.addEventListener("isolate", this.updateSnapper);
-        this.viewer.addEventListener("showall", this.updateSnapper);
-    }
-    dispose() {
-        this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown);
-        this.viewer.canvas.removeEventListener("pointermove", this.onPointerMove);
-        this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp);
-        this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel);
-        this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
-        this.viewer.removeEventListener("render", this.renderOverlay);
-        this.viewer.removeEventListener("hide", this.updateSnapper);
-        this.viewer.removeEventListener("isolate", this.updateSnapper);
-        this.viewer.removeEventListener("showall", this.updateSnapper);
-        this.overlay.detach();
-        this.overlay.dispose();
-        super.dispose();
-    }
+function setSelected(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 selection = new SelectionComponent(viewer);
+    selection.clearSelection();
+    objects.forEach((object => selection.select(object)));
+    selection.dispose();
+    viewer.update();
+    viewer.emitEvent({
+        type: "select",
+        data: undefined,
+        handles: handles
+    });
+}
+
+function showAll(viewer) {
+    viewer.scene.traverse((object => object.visible = true));
+    viewer.update();
+    viewer.emitEvent({
+        type: "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"
+    });
 }
 
-class MeasureSnapper {
-    constructor(camera, canvas) {
-        this.objects = [];
-        this.camera = camera;
-        this.canvas = canvas;
-        this.raycaster = new Raycaster;
-    }
-    getSnapPoint(event) {
-        const mouse = new Vector2(event.clientX, event.clientY);
-        const rect = this.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.camera);
-        this.raycaster.params = {
-            Mesh: {},
-            Line: {
-                threshold: .25
-            },
-            Line2: {
-                threshold: .25
-            },
-            LOD: {},
-            Points: {
-                threshold: .1
-            },
-            Sprite: {}
-        };
-        const intersects = this.raycaster.intersectObjects(this.objects, false);
-        if (intersects.length === 0) return undefined;
-        return intersects[0].point;
-    }
-    update(scene) {
-        this.objects = [];
-        scene.traverseVisible((child => this.objects.push(child)));
-    }
+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) => result.expandByObject(object)), 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"
+    });
 }
 
-class MeasureOverlay {
-    constructor(camera, canvas) {
-        this.lines = [];
-        this.camera = camera;
-        this.canvas = canvas;
-        this.projector = new MeasureProjector(camera, canvas);
-    }
-    attach() {
-        this.container = document.createElement("div");
-        this.container.id = "measure-container";
-        this.container.style.background = "rgba(0,0,0,0)";
-        this.container.style.position = "absolute";
-        this.container.style.top = "0px";
-        this.container.style.left = "0px";
-        this.container.style.width = "100%";
-        this.container.style.height = "100%";
-        this.container.style.outline = "none";
-        this.container.style.pointerEvents = "none";
-        this.container.style.overflow = "hidden";
-        this.canvas.parentElement.appendChild(this.container);
-    }
-    dispose() {
-        this.clear();
-    }
-    detach() {
-        this.container.remove();
-        this.container = undefined;
-    }
-    clear() {
-        this.lines.forEach((line => line.dispose()));
-        this.lines = [];
-    }
-    render() {
-        this.projector.updateProjectionMatrix();
-        this.lines.forEach((line => line.render()));
-    }
-    update() {
-        this.lines.forEach((line => line.update()));
-    }
-    addLine(line) {
-        this.lines.push(line);
-    }
-    removeLine(line) {
-        this.lines = this.lines.filter((x => x !== line));
-    }
+function zoomToSelected(viewer) {
+    const extents = viewer.selected.reduce(((result, object) => result.expandByObject(object)), 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"
+    });
 }
 
-const _middlePoint = new Vector3;
+const commands = commandsRegistry("threejs");
 
-class MeasureLine {
-    constructor(overlay) {
-        this.id = Date.now();
-        this.unit = "";
-        this.scale = 1;
-        this.size = 10;
-        this.lineWidth = 2;
-        this.style = {
-            border: "2px solid #FFFFFF",
-            background: "#009bff",
-            boxShadow: "0 0 10px rgba(0,0,0,0.5)",
-            color: "white",
-            font: "1rem system-ui"
-        };
-        this.overlay = overlay;
-        this.elementStartPoint = overlay.container.appendChild(document.createElement("div"));
-        this.elementEndPoint = overlay.container.appendChild(document.createElement("div"));
-        this.elementLine = overlay.container.appendChild(document.createElement("div"));
-        this.elementLabel = overlay.container.appendChild(document.createElement("div"));
-        this.update();
-    }
-    dispose() {
-        this.elementStartPoint.remove();
-        this.elementEndPoint.remove();
-        this.elementLine.remove();
-        this.elementLabel.remove();
-    }
-    render() {
-        const projector = this.overlay.projector;
-        if (this.startPoint) {
-            const {point: point, visible: visible} = projector.projectPoint(this.startPoint);
-            this.elementStartPoint.style.display = visible ? "block" : "none";
-            this.elementStartPoint.style.left = `${point.x}px`;
-            this.elementStartPoint.style.top = `${point.y}px`;
-        } else {
-            this.elementStartPoint.style.display = "none";
-        }
-        if (this.endPoint) {
-            const {point: point, visible: visible} = projector.projectPoint(this.endPoint);
-            this.elementEndPoint.style.display = visible ? "block" : "none";
-            this.elementEndPoint.style.left = `${point.x}px`;
-            this.elementEndPoint.style.top = `${point.y}px`;
-        } else {
-            this.elementEndPoint.style.display = "none";
-        }
-        if (this.startPoint && this.endPoint) {
-            const {point1: point1, point2: point2, visible: visible} = projector.projectLine(this.startPoint, this.endPoint);
-            point2.sub(point1);
-            const angle = point2.angle();
-            const width = point2.length();
-            this.elementLine.style.display = visible ? "block" : "none";
-            this.elementLine.style.left = `${point1.x}px`;
-            this.elementLine.style.top = `${point1.y}px`;
-            this.elementLine.style.width = `${width}px`;
-            this.elementLine.style.transform = `translate(0px, ${-this.lineWidth / 2}px) rotate(${angle}rad)`;
-        } else {
-            this.elementLine.style.display = "none";
-        }
-        if (this.startPoint && this.endPoint) {
-            _middlePoint.lerpVectors(this.startPoint, this.endPoint, .5);
-            const {point: point, visible: visible} = projector.projectPoint(_middlePoint);
-            const distance = this.getDistance();
-            this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
-            this.elementLabel.style.left = `${point.x}px`;
-            this.elementLabel.style.top = `${point.y}px`;
-            this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
-        } else {
-            this.elementLabel.style.display = "none";
-        }
-    }
-    update() {
-        this.elementStartPoint.id = `markup-dot-start-${this.id}`;
-        this.elementStartPoint.style.position = "absolute";
-        this.elementStartPoint.style.zIndex = "2";
-        this.elementStartPoint.style.width = `${this.size}px`;
-        this.elementStartPoint.style.height = `${this.size}px`;
-        this.elementStartPoint.style.border = this.style.border;
-        this.elementStartPoint.style.borderRadius = `${this.size}px`;
-        this.elementStartPoint.style.background = this.style.background;
-        this.elementStartPoint.style.boxShadow = this.style.boxShadow;
-        this.elementStartPoint.style.transform = "translate(-50%, -50%)";
-        this.elementEndPoint.id = `markup-dot-end-${this.id}`;
-        this.elementEndPoint.style.position = "absolute";
-        this.elementEndPoint.style.zIndex = "2";
-        this.elementEndPoint.style.width = `${this.size}px`;
-        this.elementEndPoint.style.height = `${this.size}px`;
-        this.elementEndPoint.style.border = this.style.border;
-        this.elementEndPoint.style.borderRadius = `${this.size}px`;
-        this.elementEndPoint.style.background = this.style.background;
-        this.elementEndPoint.style.boxShadow = this.style.boxShadow;
-        this.elementEndPoint.style.transform = "translate(-50%, -50%)";
-        this.elementLine.id = `markup-line-${this.id}`;
-        this.elementLine.style.position = "absolute";
-        this.elementLine.style.zIndex = "1";
-        this.elementLine.style.height = `${this.lineWidth}px`;
-        this.elementLine.style.background = this.style.background;
-        this.elementLine.style.boxShadow = this.style.boxShadow;
-        this.elementLine.style.transformOrigin = `0px ${this.lineWidth / 2}px`;
-        this.elementLabel.id = `markup-label-${this.id}`;
-        this.elementLabel.style.position = "absolute";
-        this.elementLabel.style.zIndex = "3";
-        this.elementLabel.style.padding = "2px";
-        this.elementLabel.style.paddingInline = "5px";
-        this.elementLabel.style.borderRadius = "5px";
-        this.elementLabel.style.background = this.style.background;
-        this.elementLabel.style.boxShadow = this.style.boxShadow;
-        this.elementLabel.style.color = this.style.color;
-        this.elementLabel.style.font = this.style.font;
-        this.elementLabel.style.transform = "translate(-50%, -50%)";
-    }
-    getDistance() {
-        return this.startPoint.distanceTo(this.endPoint) / this.scale;
-    }
-}
+commands.registerCommand("applyModelTransform", applyModelTransform);
+
+commands.registerCommand("clearMarkup", clearMarkup);
+
+commands.registerCommand("clearSelected", clearSelected);
+
+commands.registerCommand("clearSlices", clearSlices);
+
+commands.registerCommand("createPreview", createPreview);
+
+commands.registerCommand("explode", explode);
+
+commands.registerCommand("collect", collect);
+
+commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
+
+commands.registerCommand("getModels", getModels);
+
+commands.registerCommand("getSelected", getSelected);
+
+commands.registerCommand("hideSelected", hideSelected);
+
+commands.registerCommand("isolateSelected", isolateSelected);
+
+commands.registerCommand("regenerateAll", regenerateAll);
+
+commands.registerCommand("resetView", resetView);
+
+commands.registerCommand("selectModel", selectModel);
 
-let _widthHalf;
+commands.registerCommand("setActiveDragger", setActiveDragger);
 
-let _heightHalf;
+commands.registerCommand("setDefaultViewPosition", setDefaultViewPosition);
 
-const _viewMatrix = new Matrix4;
+commands.registerCommand("setMarkupColor", setMarkupColor);
 
-const _viewProjectionMatrix = new Matrix4;
+commands.registerCommand("setSelected", setSelected);
 
-const _vector = new Vector3;
+commands.registerCommand("showAll", showAll);
 
-const _vector1 = new Vector4;
+commands.registerCommand("zoomToExtents", zoomToExtents);
 
-const _vector2 = new Vector4;
+commands.registerCommand("zoomToObjects", zoomToObjects);
 
-const point = new Vector2;
+commands.registerCommand("zoomToSelected", zoomToSelected);
 
-const point1 = new Vector2;
+commands.registerCommand("top", (viewer => setDefaultViewPosition(viewer, "top")));
 
-const point2 = new Vector2;
+commands.registerCommand("bottom", (viewer => setDefaultViewPosition(viewer, "bottom")));
 
-class MeasureProjector {
-    constructor(camera, canvas) {
-        this.camera = camera;
-        this.canvas = canvas;
+commands.registerCommand("left", (viewer => setDefaultViewPosition(viewer, "left")));
+
+commands.registerCommand("right", (viewer => setDefaultViewPosition(viewer, "right")));
+
+commands.registerCommand("front", (viewer => setDefaultViewPosition(viewer, "front")));
+
+commands.registerCommand("back", (viewer => setDefaultViewPosition(viewer, "back")));
+
+commands.registerCommand("sw", (viewer => setDefaultViewPosition(viewer, "sw")));
+
+commands.registerCommand("se", (viewer => setDefaultViewPosition(viewer, "se")));
+
+commands.registerCommand("ne", (viewer => setDefaultViewPosition(viewer, "ne")));
+
+commands.registerCommand("nw", (viewer => setDefaultViewPosition(viewer, "nw")));
+
+commands.registerCommandAlias("clearMarkup", "clearOverlay");
+
+commands.registerCommandAlias("clearSelected", "unselect");
+
+commands.registerCommandAlias("zoomToExtents", "zoomExtents");
+
+commands.registerCommandAlias("top", "k3DViewTop");
+
+commands.registerCommandAlias("bottom", "k3DViewBottom");
+
+commands.registerCommandAlias("left", "k3DViewLeft");
+
+commands.registerCommandAlias("right", "k3DViewRight");
+
+commands.registerCommandAlias("front", "k3DViewFront");
+
+commands.registerCommandAlias("back", "k3DViewBack");
+
+commands.registerCommandAlias("se", "k3DViewSE");
+
+commands.registerCommandAlias("sw", "k3DViewSW");
+
+commands.registerCommandAlias("ne", "k3DViewNE");
+
+commands.registerCommandAlias("nw", "k3DViewNW");
+
+class BackgroundComponent {
+    constructor(viewer) {
+        this.syncOptions = () => {
+            this.backgroundColor.setHex(16777215);
+        };
+        this.viewer = viewer;
+        this.backgroundColor = new Color(16777215);
+        const environment = new RoomEnvironment;
+        const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
+        this.viewer.renderer.setClearColor(this.backgroundColor);
+        this.viewer.scene.background = this.backgroundColor;
+        this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
+        this.viewer.addEventListener("optionschange", this.syncOptions);
+        environment.dispose();
     }
-    updateProjectionMatrix() {
-        const rect = this.canvas.getBoundingClientRect();
-        _widthHalf = rect.width / 2;
-        _heightHalf = rect.height / 2;
-        _viewMatrix.copy(this.camera.matrixWorldInverse);
-        _viewProjectionMatrix.multiplyMatrices(this.camera.projectionMatrix, _viewMatrix);
+    dispose() {
+        this.viewer.removeEventListener("optionschange", this.syncOptions);
+        this.viewer.scene.environment = undefined;
+        this.viewer.scene.background = undefined;
     }
-    projectPoint(p) {
-        _vector.copy(p).applyMatrix4(_viewProjectionMatrix);
-        const visible = _vector.z >= -1 && _vector.z <= 1;
-        point.x = (_vector.x + 1) * _widthHalf;
-        point.y = (-_vector.y + 1) * _heightHalf;
-        return {
-            point: point,
-            visible: visible
+}
+
+class DefaultPositionComponent {
+    constructor(viewer) {
+        this.geometryEnd = event => {
+            const box = this.viewer.extents;
+            const size = box.getSize(new Vector3).length();
+            this.viewer.camera.near = size / 100;
+            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;
+        this.viewer.addEventListener("geometryend", this.geometryEnd);
     }
-    projectLine(p1, p2) {
-        let visible;
-        _vector1.copy(p1).applyMatrix4(_viewProjectionMatrix);
-        _vector2.copy(p2).applyMatrix4(_viewProjectionMatrix);
-        const bc1near = _vector1.z + _vector1.w;
-        const bc2near = _vector2.z + _vector2.w;
-        const bc1far = -_vector1.z + _vector1.w;
-        const bc2far = -_vector2.z + _vector2.w;
-        if (bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0) visible = true; else if (bc1near < 0 && bc2near < 0 || bc1far < 0 && bc2far < 0) visible = false; else {
-            let alpha1 = 0;
-            let alpha2 = 1;
-            if (bc1near < 0) alpha1 = Math.max(alpha1, bc1near / (bc1near - bc2near)); else if (bc2near < 0) alpha2 = Math.min(alpha2, bc1near / (bc1near - bc2near));
-            if (bc1far < 0) alpha1 = Math.max(alpha1, bc1far / (bc1far - bc2far)); else if (bc2far < 0) alpha2 = Math.min(alpha2, bc1far / (bc1far - bc2far));
-            visible = alpha2 >= alpha1;
-            if (visible) {
-                _vector1.lerp(_vector2, alpha1);
-                _vector2.lerp(_vector1, 1 - alpha2);
-            }
-        }
-        _vector1.multiplyScalar(1 / _vector1.w);
-        _vector2.multiplyScalar(1 / _vector2.w);
-        point1.x = (_vector1.x + 1) * _widthHalf;
-        point1.y = (-_vector1.y + 1) * _heightHalf;
-        point2.x = (_vector2.x + 1) * _widthHalf;
-        point2.y = (-_vector2.y + 1) * _heightHalf;
-        return {
-            point1: point1,
-            point2: point2,
-            visible: visible
-        };
+    dispose() {
+        this.viewer.removeEventListener("geometryend", this.geometryEnd);
     }
 }
 
@@ -4227,45 +4314,17 @@ class LightComponent {
     }
 }
 
-class BackgroundComponent {
-    constructor(viewer) {
-        this.syncOptions = () => {
-            this.backgroundColor.setHex(16777215);
-        };
-        this.viewer = viewer;
-        this.backgroundColor = new Color(16777215);
-        const environment = new RoomEnvironment;
-        const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
-        this.viewer.renderer.setClearColor(this.backgroundColor);
-        this.viewer.scene.background = this.backgroundColor;
-        this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
-        this.viewer.addEventListener("optionschange", this.syncOptions);
-        environment.dispose();
-    }
-    dispose() {
-        this.viewer.removeEventListener("optionschange", this.syncOptions);
-        this.viewer.scene.environment = undefined;
-        this.viewer.scene.background = undefined;
-    }
-}
-
-class DefaultPositionComponent {
+class RenderLoopComponent {
     constructor(viewer) {
-        this.geometryEnd = event => {
-            const box = this.viewer.extents;
-            const size = box.getSize(new Vector3).length();
-            this.viewer.camera.near = size / 100;
-            this.viewer.camera.far = size * 100;
-            this.viewer.camera.updateMatrixWorld();
-            this.viewer.camera.updateProjectionMatrix();
-            this.viewer.executeCommand("setDefaultViewPosition", "sw");
-            this.viewer.executeCommand("zoomToExtents");
+        this.animate = (time = 0) => {
+            this.requestId = requestAnimationFrame(this.animate);
+            this.viewer.render(time);
         };
         this.viewer = viewer;
-        this.viewer.addEventListener("geometryend", this.geometryEnd);
+        this.animate();
     }
     dispose() {
-        this.viewer.removeEventListener("geometryend", this.geometryEnd);
+        cancelAnimationFrame(this.requestId);
     }
 }
 
@@ -4293,20 +4352,6 @@ class ResizeCanvasComponent {
     }
 }
 
-class RenderLoopComponent {
-    constructor(viewer) {
-        this.animate = (time = 0) => {
-            this.requestId = requestAnimationFrame(this.animate);
-            this.viewer.render(time);
-        };
-        this.viewer = viewer;
-        this.animate();
-    }
-    dispose() {
-        cancelAnimationFrame(this.requestId);
-    }
-}
-
 class WCSHelper extends Object3D {
     constructor(camera) {
         super();
@@ -4405,6 +4450,94 @@ class WCSHelperComponent {
     }
 }
 
+const components = componentsRegistry("threejs");
+
+components.registerComponent("ExtentsComponent", (viewer => new ExtentsComponent(viewer)));
+
+components.registerComponent("LightComponent", (viewer => new LightComponent(viewer)));
+
+components.registerComponent("BackgroundComponent", (viewer => new BackgroundComponent(viewer)));
+
+components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanvasComponent(viewer)));
+
+components.registerComponent("RenderLoopComponent", (viewer => new RenderLoopComponent(viewer)));
+
+components.registerComponent("DefaultPositionComponent", (viewer => new DefaultPositionComponent(viewer)));
+
+components.registerComponent("SelectionComponent", (viewer => new SelectionComponent(viewer)));
+
+components.registerComponent("WCSHelperComponent", (viewer => new WCSHelperComponent(viewer)));
+
+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 Viewer extends EventEmitter2 {
     constructor(client) {
         super();
@@ -4412,22 +4545,12 @@ class Viewer extends EventEmitter2 {
         this.client = client;
         this.canvasEvents = CANVAS_EVENTS;
         this.canvaseventlistener = event => this.emit(event);
+        this.models = [];
+        this.selected = [];
         this.extents = new Box3;
         this.target = new Vector3;
-        this.draggerFactory = {
-            Pan: PanDragger,
-            Zoom: ZoomDragger,
-            Orbit: OrbitDragger,
-            Walk: WalkDragger,
-            CuttingPlaneXAxis: CuttingPlaneXAxisDragger,
-            CuttingPlaneYAxis: CuttingPlaneYAxisDragger,
-            CuttingPlaneZAxis: CuttingPlaneZAxisDragger,
-            MeasureLine: MeasureLineDragger
-        };
         this._activeDragger = null;
-        this.models = [];
-        this.components = [];
-        this.selected = [];
+        this._components = [];
         this.renderTime = 0;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
@@ -4437,7 +4560,10 @@ class Viewer extends EventEmitter2 {
         return this._options;
     }
     get draggers() {
-        return Object.keys(this.draggerFactory);
+        return [ ...draggers.getDraggers().keys() ];
+    }
+    get components() {
+        return [ ...components.getComponents().keys() ];
     }
     get markup() {
         return this._markup;
@@ -4462,14 +4588,9 @@ class Viewer extends EventEmitter2 {
         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));
-        this.components.push(new DefaultPositionComponent(this));
-        this.components.push(new ResizeCanvasComponent(this));
-        this.components.push(new RenderLoopComponent(this));
-        this.components.push(new SelectionComponent(this));
-        this.components.push(new WCSHelperComponent(this));
+        for (let name of components.getComponents().keys()) {
+            this._components.push(components.createComponent(name, this));
+        }
         this.syncOptions();
         this.syncOverlay();
         this.renderTime = performance.now();
@@ -4495,8 +4616,8 @@ class Viewer extends EventEmitter2 {
         this.emitEvent({
             type: "dispose"
         });
-        this.components.forEach((component => component.dispose()));
-        this.components = [];
+        this._components.forEach((component => component.dispose()));
+        this._components = [];
         this.setActiveDragger();
         this.removeAllListeners();
         this.clear();
@@ -4516,6 +4637,7 @@ class Viewer extends EventEmitter2 {
         return !!this.renderer;
     }
     render(time) {
+        var _a, _b;
         if (!this.renderNeeded) return;
         if (!this.renderer) return;
         this.renderNeeded = false;
@@ -4527,6 +4649,7 @@ class Viewer extends EventEmitter2 {
         this.renderer.autoClear = false;
         this.renderer.render(this.helpers, this.camera);
         this.renderer.clippingPlanes = clippingPlanes;
+        (_b = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
         const deltaTime = (time - this.renderTime) / 1e3;
         this.renderTime = time;
         this.emitEvent({
@@ -4704,21 +4827,25 @@ class Viewer extends EventEmitter2 {
         return this._activeDragger;
     }
     setActiveDragger(name = "") {
+        var _a, _b;
         if (!this._activeDragger || this._activeDragger.name !== name) {
+            const oldDragger = this._activeDragger;
+            let newDragger = null;
             if (this._activeDragger) {
                 this._activeDragger.dispose();
                 this._activeDragger = null;
             }
             if (this.isInitialized()) {
-                const Constructor = this.draggerFactory[name];
-                if (Constructor) {
-                    this._activeDragger = new Constructor(this);
-                    this._activeDragger.name = name;
+                newDragger = draggers.createDragger(name, this);
+                if (newDragger) {
+                    this._activeDragger = newDragger;
+                    (_b = (_a = this._activeDragger).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
             }
             const canvas = this.canvas;
             if (canvas) {
-                canvas.className = canvas.className.split(" ").filter((x => !x.startsWith("oda-cursor-"))).filter((x => x)).concat(`oda-cursor-${name.toLowerCase()}`).join(" ");
+                if (oldDragger) canvas.classList.remove(`oda-cursor-${oldDragger.name.toLowerCase()}`);
+                if (newDragger) canvas.classList.add(`oda-cursor-${newDragger.name.toLowerCase()}`);
             }
             this.emitEvent({
                 type: "changeactivedragger",
@@ -4778,10 +4905,10 @@ class Viewer extends EventEmitter2 {
         };
     }
     executeCommand(id, ...args) {
-        return commands("ThreeJS").executeCommand(id, this, ...args);
+        return commands.executeCommand(id, this, ...args);
     }
-    getComponent(type) {
-        return this.components.find((component => component instanceof type));
+    getComponent(name) {
+        return this._components.find((component => component.name === name));
     }
     drawViewpoint(viewpoint) {
         var _a, _b, _c;
@@ -4870,5 +4997,5 @@ class Viewer extends EventEmitter2 {
     }
 }
 
-export { CANVAS_EVENTS, CanvasEvents, Dragger, Options, Viewer, commands, defaultOptions };
+export { CANVAS_EVENTS, CanvasEvents, Component, Dragger, KonvaMarkup as Markup, Options, Viewer, commands, commandsRegistry, components, componentsRegistry, defaultOptions, draggers, draggersRegistry };
 //# sourceMappingURL=viewer-three.module.js.map