@shopware-ag/dive 1.5.0 → 1.6.0

package/build/dive.cjs

@@ -22,6 +22,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -64,6 +67,466 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// src/constant/VisibilityLayerMask.ts
+var DEFAULT_LAYER_MASK, COORDINATE_LAYER_MASK, UI_LAYER_MASK, HELPER_LAYER_MASK, PRODUCT_LAYER_MASK;
+var init_VisibilityLayerMask = __esm({
+  "src/constant/VisibilityLayerMask.ts"() {
+    "use strict";
+    DEFAULT_LAYER_MASK = 1;
+    COORDINATE_LAYER_MASK = 2;
+    UI_LAYER_MASK = 4;
+    HELPER_LAYER_MASK = 8;
+    PRODUCT_LAYER_MASK = 16;
+  }
+});
+
+// src/interface/Draggable.ts
+var isDraggable, findDraggableInterface;
+var init_Draggable = __esm({
+  "src/interface/Draggable.ts"() {
+    "use strict";
+    isDraggable = (object) => {
+      return "isDraggable" in object;
+    };
+    findDraggableInterface = (child) => {
+      if (child === void 0) return void 0;
+      if (child.parent === null) {
+        return void 0;
+      }
+      if (isDraggable(child)) {
+        return child;
+      }
+      return findDraggableInterface(child.parent);
+    };
+  }
+});
+
+// src/interface/Hoverable.ts
+var isHoverable, findHoverableInterface;
+var init_Hoverable = __esm({
+  "src/interface/Hoverable.ts"() {
+    "use strict";
+    isHoverable = (object) => {
+      return "isHoverable" in object;
+    };
+    findHoverableInterface = (child) => {
+      if (child === void 0) return void 0;
+      if (child.parent === null) {
+        return void 0;
+      }
+      if (isHoverable(child)) {
+        return child;
+      }
+      return findHoverableInterface(child.parent);
+    };
+  }
+});
+
+// src/toolbox/BaseTool.ts
+var import_three3, DIVEBaseTool;
+var init_BaseTool = __esm({
+  "src/toolbox/BaseTool.ts"() {
+    "use strict";
+    import_three3 = require("three");
+    init_VisibilityLayerMask();
+    init_Draggable();
+    init_Hoverable();
+    DIVEBaseTool = class {
+      constructor(scene, controller) {
+        this.POINTER_DRAG_THRESHOLD = 1e-3;
+        this.name = "BaseTool";
+        this._canvas = controller.domElement;
+        this._scene = scene;
+        this._controller = controller;
+        this._pointer = new import_three3.Vector2();
+        this._pointerPrimaryDown = false;
+        this._pointerMiddleDown = false;
+        this._pointerSecondaryDown = false;
+        this._lastPointerDown = new import_three3.Vector2();
+        this._lastPointerUp = new import_three3.Vector2();
+        this._raycaster = new import_three3.Raycaster();
+        this._raycaster.layers.mask = PRODUCT_LAYER_MASK | UI_LAYER_MASK;
+        this._intersects = [];
+        this._hovered = null;
+        this._dragging = false;
+        this._dragStart = new import_three3.Vector3();
+        this._dragCurrent = new import_three3.Vector3();
+        this._dragEnd = new import_three3.Vector3();
+        this._dragDelta = new import_three3.Vector3();
+        this._draggable = null;
+        this._dragRaycastOnObjects = null;
+      }
+      get _pointerAnyDown() {
+        return this._pointerPrimaryDown || this._pointerMiddleDown || this._pointerSecondaryDown;
+      }
+      Activate() {
+      }
+      Deactivate() {
+      }
+      onPointerDown(e) {
+        var _a;
+        switch (e.button) {
+          case 0:
+            this._pointerPrimaryDown = true;
+            break;
+          case 1:
+            this._pointerMiddleDown = true;
+            break;
+          case 2:
+            this._pointerSecondaryDown = true;
+            break;
+        }
+        this._lastPointerDown.copy(this._pointer);
+        this._draggable = findDraggableInterface((_a = this._intersects[0]) == null ? void 0 : _a.object) || null;
+      }
+      onDragStart(e) {
+        if (!this._draggable) return;
+        if (this._dragRaycastOnObjects !== null) {
+          this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+        }
+        if (this._intersects.length === 0) return;
+        this._dragStart.copy(this._intersects[0].point.clone());
+        this._dragCurrent.copy(this._intersects[0].point.clone());
+        this._dragEnd.copy(this._dragStart.clone());
+        this._dragDelta.set(0, 0, 0);
+        if (this._draggable && this._draggable.onDragStart) {
+          this._draggable.onDragStart({
+            dragStart: this._dragStart,
+            dragCurrent: this._dragCurrent,
+            dragEnd: this._dragEnd,
+            dragDelta: this._dragDelta
+          });
+          this._dragging = true;
+          this._controller.enabled = false;
+        }
+      }
+      onPointerMove(e) {
+        var _a;
+        this._pointer.x = e.offsetX / this._canvas.clientWidth * 2 - 1;
+        this._pointer.y = -(e.offsetY / this._canvas.clientHeight) * 2 + 1;
+        this._raycaster.setFromCamera(this._pointer, this._controller.object);
+        this._intersects = this.raycast(this._scene.children);
+        const hoverable = findHoverableInterface((_a = this._intersects[0]) == null ? void 0 : _a.object);
+        if (this._intersects[0] && hoverable) {
+          if (!this._hovered) {
+            if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
+            this._hovered = hoverable;
+            return;
+          }
+          if (this._hovered.uuid !== hoverable.uuid) {
+            if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
+            if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
+            this._hovered = hoverable;
+            return;
+          }
+          if (hoverable.onPointerOver) hoverable.onPointerOver(this._intersects[0]);
+          this._hovered = hoverable;
+        } else {
+          if (this._hovered) {
+            if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
+          }
+          this._hovered = null;
+        }
+        if (this._pointerAnyDown) {
+          if (!this._dragging) {
+            this.onDragStart(e);
+          }
+          this.onDrag(e);
+        }
+      }
+      onDrag(e) {
+        if (this._dragRaycastOnObjects !== null) {
+          this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
+        }
+        const intersect = this._intersects[0];
+        if (!intersect) return;
+        this._dragCurrent.copy(intersect.point.clone());
+        this._dragEnd.copy(intersect.point.clone());
+        this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
+        if (this._draggable && this._draggable.onDrag) {
+          this._draggable.onDrag({
+            dragStart: this._dragStart,
+            dragCurrent: this._dragCurrent,
+            dragEnd: this._dragEnd,
+            dragDelta: this._dragDelta
+          });
+        }
+      }
+      onPointerUp(e) {
+        if (this.pointerWasDragged() || this._dragging) {
+          if (this._draggable) {
+            this.onDragEnd(e);
+          }
+        } else {
+          this.onClick(e);
+        }
+        switch (e.button) {
+          case 0:
+            this._pointerPrimaryDown = false;
+            break;
+          case 1:
+            this._pointerMiddleDown = false;
+            break;
+          case 2:
+            this._pointerSecondaryDown = false;
+            break;
+        }
+        this._lastPointerUp.copy(this._pointer);
+      }
+      onClick(e) {
+      }
+      onDragEnd(e) {
+        const intersect = this._intersects[0];
+        if (intersect) {
+          this._dragEnd.copy(intersect.point.clone());
+          this._dragCurrent.copy(intersect.point.clone());
+          this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
+        }
+        if (this._draggable && this._draggable.onDragEnd) {
+          this._draggable.onDragEnd({
+            dragStart: this._dragStart,
+            dragCurrent: this._dragCurrent,
+            dragEnd: this._dragEnd,
+            dragDelta: this._dragDelta
+          });
+        }
+        this._draggable = null;
+        this._dragging = false;
+        this._dragStart.set(0, 0, 0);
+        this._dragCurrent.set(0, 0, 0);
+        this._dragEnd.set(0, 0, 0);
+        this._dragDelta.set(0, 0, 0);
+        this._controller.enabled = true;
+      }
+      onWheel(e) {
+      }
+      raycast(objects) {
+        if (objects !== void 0) return this._raycaster.intersectObjects(objects, true).filter((i) => i.object.visible);
+        return this._raycaster.intersectObjects(this._scene.children, true).filter((i) => i.object.visible);
+      }
+      pointerWasDragged() {
+        return this._lastPointerDown.distanceTo(this._pointer) > this.POINTER_DRAG_THRESHOLD;
+      }
+    };
+  }
+});
+
+// src/toolbox/transform/TransformTool.ts
+var import_Addons, DIVETransformTool;
+var init_TransformTool = __esm({
+  "src/toolbox/transform/TransformTool.ts"() {
+    "use strict";
+    init_BaseTool();
+    import_Addons = require("three/examples/jsm/Addons");
+    DIVETransformTool = class extends DIVEBaseTool {
+      constructor(scene, controller) {
+        super(scene, controller);
+        this.isTransformTool = true;
+        this.name = "DIVETransformTool";
+        this._gizmo = new import_Addons.TransformControls(this._controller.object, this._controller.domElement);
+        this._gizmo.mode = "translate";
+        this._gizmo.addEventListener("mouseDown", () => {
+          controller.enabled = false;
+        });
+        this._gizmo.addEventListener("mouseUp", () => {
+          controller.enabled = true;
+        });
+        this._gizmo.addEventListener("objectChange", () => {
+          if (!this._gizmo.object) return;
+          if (!("isMoveable" in this._gizmo.object)) return;
+          if (!("onMove" in this._gizmo.object)) return;
+          this._gizmo.object.onMove();
+        });
+        scene.add(this._gizmo);
+      }
+      Activate() {
+      }
+      SetGizmoMode(mode) {
+        this._gizmo.mode = mode;
+      }
+      SetGizmoVisibility(active) {
+        const contains = this._scene.children.includes(this._gizmo);
+        if (active && !contains) {
+          this._scene.add(this._gizmo);
+        } else if (!active && contains) {
+          this._scene.remove(this._gizmo);
+        }
+      }
+      // public onPointerDown(e: PointerEvent): void {
+      //     super.onPointerDown(e);
+      //     // if (this._hovered) {
+      //     //     this._dragRaycastOnObjects = this._gizmo.gizmoPlane.children;
+      //     // }
+      // }
+      // protected raycast(): Intersection[] {
+      //     return super.raycast(this._gizmo.gizmoNode.children);
+      // }
+    };
+  }
+});
+
+// src/interface/Selectable.ts
+function isSelectable(object) {
+  return "isSelectable" in object;
+}
+function findSelectableInterface(child) {
+  if (child === void 0) return void 0;
+  if (child.parent === null) {
+    return void 0;
+  }
+  if (isSelectable(child)) {
+    return child;
+  }
+  return findSelectableInterface(child.parent);
+}
+var init_Selectable = __esm({
+  "src/interface/Selectable.ts"() {
+    "use strict";
+  }
+});
+
+// src/toolbox/select/SelectTool.ts
+var SelectTool_exports = {};
+__export(SelectTool_exports, {
+  DIVESelectTool: () => DIVESelectTool,
+  isSelectTool: () => isSelectTool
+});
+var isSelectTool, DIVESelectTool;
+var init_SelectTool = __esm({
+  "src/toolbox/select/SelectTool.ts"() {
+    "use strict";
+    init_TransformTool();
+    init_Selectable();
+    isSelectTool = (tool) => {
+      return tool.isSelectTool !== void 0;
+    };
+    DIVESelectTool = class extends DIVETransformTool {
+      constructor(scene, controller) {
+        super(scene, controller);
+        this.isSelectTool = true;
+        this.name = "SelectTool";
+      }
+      Activate() {
+      }
+      Select(selectable) {
+        if (selectable.onSelect) selectable.onSelect();
+        this.AttachGizmo(selectable);
+      }
+      Deselect(selectable) {
+        if (selectable.onDeselect) selectable.onDeselect();
+        this.DetachGizmo();
+      }
+      AttachGizmo(selectable) {
+        if ("isMoveable" in selectable) {
+          const movable = selectable;
+          this._gizmo.attach(movable);
+          this.SetGizmoVisibility(movable.visible);
+        }
+      }
+      DetachGizmo() {
+        this._gizmo.detach();
+      }
+      onClick(e) {
+        super.onClick(e);
+        const first = this._raycaster.intersectObjects(this._scene.Root.children, true).filter((intersect) => intersect.object.visible)[0];
+        const selectable = findSelectableInterface(first == null ? void 0 : first.object);
+        if (!first || !selectable) {
+          if (this._gizmo.object) {
+            this.Deselect(this._gizmo.object);
+          }
+          return;
+        }
+        if (this._gizmo.object) {
+          if (this._gizmo.object.uuid === selectable.uuid) return;
+          this.Deselect(this._gizmo.object);
+        }
+        this.Select(selectable);
+      }
+    };
+  }
+});
+
+// src/camera/PerspectiveCamera.ts
+var import_three4, DIVEPerspectiveCameraDefaultSettings, _DIVEPerspectiveCamera, DIVEPerspectiveCamera;
+var init_PerspectiveCamera = __esm({
+  "src/camera/PerspectiveCamera.ts"() {
+    "use strict";
+    import_three4 = require("three");
+    init_VisibilityLayerMask();
+    DIVEPerspectiveCameraDefaultSettings = {
+      fov: 80,
+      near: 0.1,
+      far: 1e3
+    };
+    _DIVEPerspectiveCamera = class _DIVEPerspectiveCamera extends import_three4.PerspectiveCamera {
+      constructor(settings = DIVEPerspectiveCameraDefaultSettings) {
+        super(settings.fov, 1, settings.near, settings.far);
+        this.onSetCameraLayer = () => {
+        };
+        this.layers.mask = _DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+      }
+      OnResize(width, height) {
+        this.aspect = width / height;
+        this.updateProjectionMatrix();
+      }
+      SetCameraLayer(layer) {
+        this.layers.mask = layer === "LIVE" ? _DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK : _DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+        this.onSetCameraLayer(this.layers.mask);
+      }
+    };
+    _DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK = DEFAULT_LAYER_MASK | UI_LAYER_MASK | HELPER_LAYER_MASK | PRODUCT_LAYER_MASK;
+    _DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK = PRODUCT_LAYER_MASK;
+    DIVEPerspectiveCamera = _DIVEPerspectiveCamera;
+  }
+});
+
+// src/mediacreator/MediaCreator.ts
+var MediaCreator_exports = {};
+__export(MediaCreator_exports, {
+  DIVEMediaCreator: () => DIVEMediaCreator
+});
+var DIVEMediaCreator;
+var init_MediaCreator = __esm({
+  "src/mediacreator/MediaCreator.ts"() {
+    "use strict";
+    init_PerspectiveCamera();
+    DIVEMediaCreator = class {
+      constructor(renderer, scene, controller) {
+        this.renderer = renderer;
+        this.scene = scene;
+        this.controller = controller;
+      }
+      GenerateMedia(position, target, width, height) {
+        const resetPosition = this.controller.object.position.clone();
+        const resetRotation = this.controller.object.quaternion.clone();
+        this.renderer.OnResize(width, height);
+        this.controller.object.OnResize(width, height);
+        this.controller.object.position.copy(position);
+        this.controller.target.copy(target);
+        this.controller.update();
+        const dataUri = this.DrawCanvas().toDataURL();
+        this.controller.object.position.copy(resetPosition);
+        this.controller.object.quaternion.copy(resetRotation);
+        return dataUri;
+      }
+      DrawCanvas(canvasElement) {
+        const restore = this.renderer.domElement;
+        if (canvasElement) {
+          this.renderer.domElement = canvasElement;
+        }
+        this.controller.object.layers.mask = DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK;
+        this.renderer.render(this.scene, this.controller.object);
+        this.controller.object.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+        const returnCanvas = this.renderer.domElement;
+        if (canvasElement) {
+          this.renderer.domElement = restore;
+        }
+        return returnCanvas;
+      }
+    };
+  }
+});
+
 // src/dive.ts
 var dive_exports = {};
 __export(dive_exports, {
@@ -74,7 +537,6 @@ __export(dive_exports, {
   default: () => DIVE
 });
 module.exports = __toCommonJS(dive_exports);
-var import_three17 = require("three");
 
 // src/renderer/Renderer.ts
 var import_three = require("three");
@@ -106,6 +568,11 @@ var DIVERenderer = class extends import_three.WebGLRenderer {
     this.toneMapping = rendererSettings.toneMapping;
     this.debug.checkShaderErrors = false;
   }
+  // Stops renderings and disposes the renderer.
+  Dispose() {
+    this.StopRenderer();
+    this.dispose();
+  }
   // Starts the renderer with the given scene and camera.
   StartRenderer(scene, cam) {
     this.setAnimationLoop(() => {
@@ -197,25 +664,17 @@ var DIVERenderer = class extends import_three.WebGLRenderer {
 };
 
 // src/scene/Scene.ts
-var import_three12 = require("three");
+var import_three13 = require("three");
 
 // src/scene/root/Root.ts
-var import_three11 = require("three");
+var import_three12 = require("three");
 
 // src/scene/root/lightroot/LightRoot.ts
-var import_three6 = require("three");
+var import_three7 = require("three");
 
 // src/light/AmbientLight.ts
 var import_three2 = require("three");
-
-// src/constant/VisibilityLayerMask.ts
-var DEFAULT_LAYER_MASK = 1;
-var COORDINATE_LAYER_MASK = 2;
-var UI_LAYER_MASK = 4;
-var HELPER_LAYER_MASK = 8;
-var PRODUCT_LAYER_MASK = 16;
-
-// src/light/AmbientLight.ts
+init_VisibilityLayerMask();
 var DIVEAmbientLight = class extends import_three2.Object3D {
   constructor() {
     super();
@@ -236,25 +695,34 @@ var DIVEAmbientLight = class extends import_three2.Object3D {
 };
 
 // src/light/PointLight.ts
-var import_three4 = require("three");
+var import_three5 = require("three");
 
 // src/com/Communication.ts
-var import_three3 = require("three");
+var import_MathUtils = require("three/src/math/MathUtils");
+init_SelectTool();
 var _DIVECommunication = class _DIVECommunication {
-  constructor(scene, controls, toolbox, mediaGenerator) {
+  constructor(renderer, scene, controls, toolbox) {
     this.registered = /* @__PURE__ */ new Map();
     // private listeners: { [key: string]: EventListener[] } = {};
     this.listeners = /* @__PURE__ */ new Map();
-    this.id = import_three3.MathUtils.generateUUID();
+    this.id = (0, import_MathUtils.generateUUID)();
+    this.renderer = renderer;
     this.scene = scene;
     this.controller = controls;
     this.toolbox = toolbox;
-    this.mediaGenerator = mediaGenerator;
+    this._mediaGenerator = null;
     _DIVECommunication.__instances.push(this);
   }
   static get(id) {
     return this.__instances.find((instance) => Array.from(instance.registered.values()).find((object) => object.id === id));
   }
+  get mediaGenerator() {
+    if (!this._mediaGenerator) {
+      const DIVEMediaCreator2 = (init_MediaCreator(), __toCommonJS(MediaCreator_exports)).default;
+      this._mediaGenerator = new DIVEMediaCreator2(this.renderer, this.scene, this.controller);
+    }
+    return this._mediaGenerator;
+  }
   DestroyInstance() {
     const existingIndex = _DIVECommunication.__instances.findIndex((entry) => entry.id === this.id);
     if (existingIndex === -1) return false;
@@ -324,6 +792,10 @@ var _DIVECommunication = class _DIVECommunication {
         returnValue = this.resetCamera(payload);
         break;
       }
+      case "COMPUTE_ENCOMPASSING_VIEW": {
+        returnValue = this.computeEncompassingView(payload);
+        break;
+      }
       case "SET_CAMERA_LAYER": {
         returnValue = this.setCameraLayer(payload);
         break;
@@ -434,8 +906,10 @@ var _DIVECommunication = class _DIVECommunication {
     const sceneObject = this.scene.GetSceneObject(object);
     if (!sceneObject) return false;
     if (!("isSelectable" in sceneObject)) return false;
-    this.toolbox.UseTool("select");
-    this.toolbox.GetActiveTool().AttachGizmo(sceneObject);
+    const activeTool = this.toolbox.GetActiveTool();
+    if (activeTool && isSelectTool(activeTool)) {
+      activeTool.AttachGizmo(sceneObject);
+    }
     Object.assign(payload, object);
     return true;
   }
@@ -445,8 +919,10 @@ var _DIVECommunication = class _DIVECommunication {
     const sceneObject = this.scene.GetSceneObject(object);
     if (!sceneObject) return false;
     if (!("isSelectable" in sceneObject)) return false;
-    this.toolbox.UseTool("select");
-    this.toolbox.GetActiveTool().DetachGizmo();
+    const activeTool = this.toolbox.GetActiveTool();
+    if (activeTool && isSelectTool(activeTool)) {
+      activeTool.DetachGizmo();
+    }
     Object.assign(payload, object);
     return true;
   }
@@ -501,6 +977,12 @@ var _DIVECommunication = class _DIVECommunication {
     this.controller.RevertLast(payload.duration);
     return true;
   }
+  computeEncompassingView(payload) {
+    const sceneBB = this.scene.ComputeSceneBB();
+    const transform = this.controller.ComputeEncompassingView(sceneBB);
+    Object.assign(payload, transform);
+    return transform;
+  }
   zoomCamera(payload) {
     if (payload.direction === "IN") this.controller.ZoomIn(payload.by);
     if (payload.direction === "OUT") this.controller.ZoomOut(payload.by);
@@ -521,10 +1003,12 @@ var _DIVECommunication = class _DIVECommunication {
   updateScene(payload) {
     if (payload.name !== void 0) this.scene.name = payload.name;
     if (payload.backgroundColor !== void 0) this.scene.SetBackground(payload.backgroundColor);
+    if (payload.gridEnabled !== void 0) this.scene.Root.Grid.SetVisibility(payload.gridEnabled);
     if (payload.floorEnabled !== void 0) this.scene.Root.Floor.SetVisibility(payload.floorEnabled);
     if (payload.floorColor !== void 0) this.scene.Root.Floor.SetColor(payload.floorColor);
     payload.name = this.scene.name;
     payload.backgroundColor = "#" + this.scene.background.getHexString();
+    payload.gridEnabled = this.scene.Root.Grid.visible;
     payload.floorEnabled = this.scene.Root.Floor.visible;
     payload.floorColor = "#" + this.scene.Root.Floor.material.color.getHexString();
     return true;
@@ -547,23 +1031,24 @@ _DIVECommunication.__instances = [];
 var DIVECommunication = _DIVECommunication;
 
 // src/light/PointLight.ts
-var DIVEPointLight = class extends import_three4.Object3D {
+init_VisibilityLayerMask();
+var DIVEPointLight = class extends import_three5.Object3D {
   constructor() {
     super();
     this.isMoveable = true;
     this.isSelectable = true;
     this.gizmo = null;
     this.name = "DIVEPointLight";
-    this.light = new import_three4.PointLight(16777215, 1);
+    this.light = new import_three5.PointLight(16777215, 1);
     this.light.layers.mask = PRODUCT_LAYER_MASK;
     this.light.castShadow = true;
     this.light.shadow.mapSize.width = 512;
     this.light.shadow.mapSize.height = 512;
     this.add(this.light);
     const geoSize = 0.1;
-    const geometry = new import_three4.SphereGeometry(geoSize, geoSize * 320, geoSize * 320);
-    const material = new import_three4.MeshBasicMaterial({ color: this.light.color, transparent: true, opacity: 0.8, side: import_three4.FrontSide });
-    this.mesh = new import_three4.Mesh(geometry, material);
+    const geometry = new import_three5.SphereGeometry(geoSize, geoSize * 320, geoSize * 320);
+    const material = new import_three5.MeshBasicMaterial({ color: this.light.color, transparent: true, opacity: 0.8, side: import_three5.FrontSide });
+    this.mesh = new import_three5.Mesh(geometry, material);
     this.mesh.layers.mask = UI_LAYER_MASK;
     this.add(this.mesh);
   }
@@ -593,16 +1078,17 @@ var DIVEPointLight = class extends import_three4.Object3D {
 };
 
 // src/light/SceneLight.ts
-var import_three5 = require("three");
-var DIVESceneLight = class extends import_three5.Object3D {
+init_VisibilityLayerMask();
+var import_three6 = require("three");
+var DIVESceneLight = class extends import_three6.Object3D {
   constructor() {
     super();
     this.name = "DIVESceneLight";
-    this._hemiLight = new import_three5.HemisphereLight(16777215, 16777215, 2);
+    this._hemiLight = new import_three6.HemisphereLight(16777215, 16777215, 2);
     this._hemiLight.layers.mask = PRODUCT_LAYER_MASK;
     this._hemiLight.position.set(0, 50, 0);
     this.add(this._hemiLight);
-    this._dirLight = new import_three5.DirectionalLight(16777215, 3);
+    this._dirLight = new import_three6.DirectionalLight(16777215, 3);
     this._dirLight.layers.mask = PRODUCT_LAYER_MASK;
     this._dirLight.position.set(1, 1.75, 1);
     this._dirLight.position.multiplyScalar(30);
@@ -632,7 +1118,7 @@ var DIVESceneLight = class extends import_three5.Object3D {
 };
 
 // src/scene/root/lightroot/LightRoot.ts
-var DIVELightRoot = class extends import_three6.Object3D {
+var DIVELightRoot = class extends import_three7.Object3D {
   constructor() {
     super();
     this.name = "LightRoot";
@@ -676,7 +1162,7 @@ var DIVELightRoot = class extends import_three6.Object3D {
     if (light.position !== void 0 && light.position !== null) sceneObject.position.set(light.position.x, light.position.y, light.position.z);
     if (light.intensity !== void 0 && light.intensity !== null) sceneObject.SetIntensity(light.intensity);
     if (light.enabled !== void 0 && light.enabled !== null) sceneObject.SetEnabled(light.enabled);
-    if (light.color !== void 0 && light.color !== null) sceneObject.SetColor(new import_three6.Color(light.color));
+    if (light.color !== void 0 && light.color !== null) sceneObject.SetColor(new import_three7.Color(light.color));
     if (light.visible !== void 0 && light.visible !== null) sceneObject.visible = light.visible;
   }
   DeleteLight(light) {
@@ -707,10 +1193,11 @@ var DIVELightRoot = class extends import_three6.Object3D {
 };
 
 // src/scene/root/modelroot/ModelRoot.ts
-var import_three8 = require("three");
+var import_three9 = require("three");
 
 // src/model/Model.ts
-var import_three7 = require("three");
+var import_three8 = require("three");
+init_VisibilityLayerMask();
 
 // src/helper/findSceneRecursive/findSceneRecursive.ts
 var findSceneRecursive = (object) => {
@@ -721,14 +1208,14 @@ var findSceneRecursive = (object) => {
 };
 
 // src/model/Model.ts
-var DIVEModel = class extends import_three7.Object3D {
+var DIVEModel = class extends import_three8.Object3D {
   constructor() {
     super();
     this.isSelectable = true;
     this.isMoveable = true;
     this.gizmo = null;
     this.layers.mask = PRODUCT_LAYER_MASK;
-    this.boundingBox = new import_three7.Box3();
+    this.boundingBox = new import_three8.Box3();
   }
   SetModel(gltf) {
     this.clear();
@@ -744,7 +1231,7 @@ var DIVEModel = class extends import_three7.Object3D {
     this.position.set(position.x, position.y, position.z);
   }
   SetRotation(rotation) {
-    this.rotation.setFromVector3(new import_three7.Vector3(rotation.x, rotation.y, rotation.z));
+    this.rotation.setFromVector3(new import_three8.Vector3(rotation.x, rotation.y, rotation.z));
   }
   SetScale(scale) {
     this.scale.set(scale.x, scale.y, scale.z);
@@ -771,9 +1258,9 @@ var DIVEModel = class extends import_three7.Object3D {
       return;
     }
     const bottomY = this.boundingBox.min.y * this.scale.y;
-    const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new import_three7.Vector3()).multiply(this.scale));
+    const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new import_three8.Vector3()).multiply(this.scale));
     bbBottomCenter.y = bottomY + this.position.y;
-    const raycaster = new import_three7.Raycaster(bbBottomCenter, new import_three7.Vector3(0, -1, 0));
+    const raycaster = new import_three8.Raycaster(bbBottomCenter, new import_three8.Vector3(0, -1, 0));
     raycaster.layers.mask = PRODUCT_LAYER_MASK;
     const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
     if (intersections.length > 0) {
@@ -782,7 +1269,7 @@ var DIVEModel = class extends import_three7.Object3D {
       const meshBB = mesh.geometry.boundingBox;
       const worldPos = mesh.localToWorld(meshBB.max.clone());
       const oldPos = this.position.clone();
-      const newPos = this.position.clone().setY(worldPos.y).add(new import_three7.Vector3(0, bottomY, 0));
+      const newPos = this.position.clone().setY(worldPos.y).add(new import_three8.Vector3(0, bottomY, 0));
       this.position.copy(newPos);
       if (this.position.y === oldPos.y) return;
       (_a = DIVECommunication.get(this.userData.id)) == null ? void 0 : _a.PerformAction("UPDATE_OBJECT", { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
@@ -803,13 +1290,13 @@ var DIVEModel = class extends import_three7.Object3D {
 };
 
 // src/loadingmanager/LoadingManager.ts
-var import_Addons = require("three/examples/jsm/Addons.js");
+var import_Addons2 = require("three/examples/jsm/Addons.js");
 var DIVELoadingManager = class {
   // ... maybe extend with other loaders later
   constructor() {
     this.progress = /* @__PURE__ */ new Map();
-    this.gltfloader = new import_Addons.GLTFLoader();
-    this.dracoloader = new import_Addons.DRACOLoader();
+    this.gltfloader = new import_Addons2.GLTFLoader();
+    this.dracoloader = new import_Addons2.DRACOLoader();
     this.dracoloader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
     this.gltfloader.setDRACOLoader(this.dracoloader);
   }
@@ -835,7 +1322,7 @@ var DIVELoadingManager = class {
 };
 
 // src/scene/root/modelroot/ModelRoot.ts
-var DIVEModelRoot = class extends import_three8.Object3D {
+var DIVEModelRoot = class extends import_three9.Object3D {
   constructor() {
     super();
     this.name = "ModelRoot";
@@ -904,10 +1391,11 @@ var DIVEModelRoot = class extends import_three8.Object3D {
 };
 
 // src/primitive/floor/Floor.ts
-var import_three9 = require("three");
-var DIVEFloor = class extends import_three9.Mesh {
+var import_three10 = require("three");
+init_VisibilityLayerMask();
+var DIVEFloor = class extends import_three10.Mesh {
   constructor() {
-    super(new import_three9.PlaneGeometry(1e4, 1e4), new import_three9.MeshStandardMaterial({ color: new import_three9.Color(150 / 255, 150 / 255, 150 / 255) }));
+    super(new import_three10.PlaneGeometry(1e4, 1e4), new import_three10.MeshStandardMaterial({ color: new import_three10.Color(150 / 255, 150 / 255, 150 / 255) }));
     this.isFloor = true;
     this.name = "Floor";
     this.layers.mask = PRODUCT_LAYER_MASK;
@@ -918,7 +1406,7 @@ var DIVEFloor = class extends import_three9.Mesh {
     this.visible = visible;
   }
   SetColor(color) {
-    this.material.color = new import_three9.Color(color);
+    this.material.color = new import_three10.Color(color);
   }
 };
 
@@ -927,20 +1415,24 @@ var GRID_CENTER_LINE_COLOR = "#888888";
 var GRID_SIDE_LINE_COLOR = "#dddddd";
 
 // src/grid/Grid.ts
-var import_three10 = require("three");
-var DIVEGrid = class extends import_three10.Object3D {
+init_VisibilityLayerMask();
+var import_three11 = require("three");
+var DIVEGrid = class extends import_three11.Object3D {
   constructor() {
     super();
     this.name = "Grid";
-    const grid = new import_three10.GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
+    const grid = new import_three11.GridHelper(100, 100, GRID_CENTER_LINE_COLOR, GRID_SIDE_LINE_COLOR);
     grid.material.depthTest = false;
     grid.layers.mask = HELPER_LAYER_MASK;
     this.add(grid);
   }
+  SetVisibility(visible) {
+    this.visible = visible;
+  }
 };
 
 // src/scene/root/Root.ts
-var DIVERoot = class extends import_three11.Object3D {
+var DIVERoot = class extends import_three12.Object3D {
   get Floor() {
     return this.floor;
   }
@@ -959,6 +1451,15 @@ var DIVERoot = class extends import_three11.Object3D {
     this.grid = new DIVEGrid();
     this.add(this.grid);
   }
+  ComputeSceneBB() {
+    const bb = new import_three12.Box3();
+    this.modelRoot.traverse((object) => {
+      if ("isObject3D" in object) {
+        bb.expandByObject(object);
+      }
+    });
+    return bb;
+  }
   GetSceneObject(object) {
     switch (object.entityType) {
       case "pov": {
@@ -1023,17 +1524,21 @@ var DIVERoot = class extends import_three11.Object3D {
 };
 
 // src/scene/Scene.ts
-var DIVEScene = class extends import_three12.Scene {
+var DIVEScene = class extends import_three13.Scene {
   get Root() {
     return this.root;
   }
   constructor() {
     super();
+    this.background = new import_three13.Color(16777215);
     this.root = new DIVERoot();
     this.add(this.root);
   }
   SetBackground(color) {
-    this.background = new import_three12.Color(color);
+    this.background = new import_three13.Color(color);
+  }
+  ComputeSceneBB() {
+    return this.Root.ComputeSceneBB();
   }
   GetSceneObject(object) {
     return this.Root.GetSceneObject(object);
@@ -1052,42 +1557,18 @@ var DIVEScene = class extends import_three12.Scene {
   }
 };
 
-// src/camera/PerspectiveCamera.ts
-var import_three13 = require("three");
-var DIVEPerspectiveCameraDefaultSettings = {
-  fov: 80,
-  near: 0.1,
-  far: 1e3
-};
-var _DIVEPerspectiveCamera = class _DIVEPerspectiveCamera extends import_three13.PerspectiveCamera {
-  constructor(settings = DIVEPerspectiveCameraDefaultSettings) {
-    super(settings.fov, 1, settings.near, settings.far);
-    this.onSetCameraLayer = () => {
-    };
-    this.layers.mask = _DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
-  }
-  OnResize(width, height) {
-    this.aspect = width / height;
-    this.updateProjectionMatrix();
-  }
-  SetCameraLayer(layer) {
-    this.layers.mask = layer === "LIVE" ? _DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK : _DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
-    this.onSetCameraLayer(this.layers.mask);
-  }
-};
-_DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK = DEFAULT_LAYER_MASK | UI_LAYER_MASK | HELPER_LAYER_MASK | PRODUCT_LAYER_MASK;
-_DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK = PRODUCT_LAYER_MASK;
-var DIVEPerspectiveCamera = _DIVEPerspectiveCamera;
+// src/dive.ts
+init_PerspectiveCamera();
 
 // src/controls/OrbitControls.ts
-var import_Addons2 = require("three/examples/jsm/Addons.js");
+var import_Addons3 = require("three/examples/jsm/Addons.js");
 var import_three14 = require("three");
 var import_tween = require("@tweenjs/tween.js");
 var DIVEOrbitControlsDefaultSettings = {
   enableDamping: true,
   dampingFactor: 0.04
 };
-var _DIVEOrbitControls = class _DIVEOrbitControls extends import_Addons2.OrbitControls {
+var _DIVEOrbitControls = class _DIVEOrbitControls extends import_Addons3.OrbitControls {
   constructor(camera, renderer, settings = DIVEOrbitControlsDefaultSettings) {
     super(camera, renderer.domElement);
     this.last = null;
@@ -1109,6 +1590,16 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends import_Addons2.OrbitCo
     this.enableDamping = settings.enableDamping;
     this.dampingFactor = settings.dampingFactor;
   }
+  ComputeEncompassingView(bb) {
+    const center = bb.getCenter(new import_three14.Vector3());
+    const size = bb.getSize(new import_three14.Vector3());
+    const distance = Math.max(size.x, size.y, size.z) * 1.25;
+    const direction = this.object.position.clone().normalize();
+    return {
+      position: direction.multiplyScalar(distance),
+      target: center
+    };
+  }
   ZoomIn(by) {
     const zoomBy = by || _DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
     const { minDistance, maxDistance } = this;
@@ -1169,394 +1660,40 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends import_Addons2.OrbitCo
 _DIVEOrbitControls.DEFAULT_ZOOM_FACTOR = 1;
 var DIVEOrbitControls = _DIVEOrbitControls;
 
-// src/mediacreator/MediaCreator.ts
-var DIVEMediaCreator = class {
-  constructor(renderer, scene, controller) {
-    this.renderer = renderer;
-    this.scene = scene;
-    this.controller = controller;
-  }
-  GenerateMedia(position, target, width, height) {
-    const resetPosition = this.controller.object.position.clone();
-    const resetRotation = this.controller.object.quaternion.clone();
-    this.renderer.OnResize(width, height);
-    this.controller.object.OnResize(width, height);
-    this.controller.object.position.copy(position);
-    this.controller.target.copy(target);
-    this.controller.update();
-    const dataUri = this.DrawCanvas().toDataURL();
-    this.controller.object.position.copy(resetPosition);
-    this.controller.object.quaternion.copy(resetRotation);
-    return dataUri;
-  }
-  DrawCanvas(canvasElement) {
-    const restore = this.renderer.domElement;
-    if (canvasElement) {
-      this.renderer.domElement = canvasElement;
-    }
-    this.controller.object.layers.mask = DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK;
-    this.renderer.render(this.scene, this.controller.object);
-    this.controller.object.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
-    const returnCanvas = this.renderer.domElement;
-    if (canvasElement) {
-      this.renderer.domElement = restore;
+// src/toolbox/Toolbox.ts
+var DIVEToolbox = class {
+  get selectTool() {
+    if (!this._selectTool) {
+      const DIVESelectTool2 = (init_SelectTool(), __toCommonJS(SelectTool_exports)).DIVESelectTool;
+      this._selectTool = new DIVESelectTool2(this._scene, this._controller);
     }
-    return returnCanvas;
-  }
-};
-
-// src/interface/Selectable.ts
-function isSelectable(object) {
-  return "isSelectable" in object;
-}
-
-// src/toolbox/BaseTool.ts
-var import_three15 = require("three");
-
-// src/interface/Draggable.ts
-var isDraggable = (object) => {
-  return "isDraggable" in object;
-};
-var findDraggableInterface = (child) => {
-  if (child === void 0) return void 0;
-  if (child.parent === null) {
-    return void 0;
+    return this._selectTool;
   }
-  if (isDraggable(child)) {
-    return child;
-  }
-  return findDraggableInterface(child.parent);
-};
-
-// src/interface/Hoverable.ts
-var isHoverable = (object) => {
-  return "isHoverable" in object;
-};
-var findHoverableInterface = (child) => {
-  if (child === void 0) return void 0;
-  if (child.parent === null) {
-    return void 0;
-  }
-  if (isHoverable(child)) {
-    return child;
-  }
-  return findHoverableInterface(child.parent);
-};
-
-// src/toolbox/BaseTool.ts
-var DIVEBaseTool = class {
   constructor(scene, controller) {
-    this.POINTER_DRAG_THRESHOLD = 1e-3;
-    this.name = "BaseTool";
-    this._canvas = controller.domElement;
     this._scene = scene;
     this._controller = controller;
-    this._pointer = new import_three15.Vector2();
-    this._pointerPrimaryDown = false;
-    this._pointerMiddleDown = false;
-    this._pointerSecondaryDown = false;
-    this._lastPointerDown = new import_three15.Vector2();
-    this._lastPointerUp = new import_three15.Vector2();
-    this._raycaster = new import_three15.Raycaster();
-    this._raycaster.layers.mask = PRODUCT_LAYER_MASK | UI_LAYER_MASK;
-    this._intersects = [];
-    this._hovered = null;
-    this._dragging = false;
-    this._dragStart = new import_three15.Vector3();
-    this._dragCurrent = new import_three15.Vector3();
-    this._dragEnd = new import_three15.Vector3();
-    this._dragDelta = new import_three15.Vector3();
-    this._draggable = null;
-    this._dragRaycastOnObjects = null;
-  }
-  get _pointerAnyDown() {
-    return this._pointerPrimaryDown || this._pointerMiddleDown || this._pointerSecondaryDown;
-  }
-  Activate() {
-  }
-  Deactivate() {
-  }
-  onPointerDown(e) {
-    var _a;
-    switch (e.button) {
-      case 0:
-        this._pointerPrimaryDown = true;
-        break;
-      case 1:
-        this._pointerMiddleDown = true;
-        break;
-      case 2:
-        this._pointerSecondaryDown = true;
-        break;
-    }
-    this._lastPointerDown.copy(this._pointer);
-    this._draggable = findDraggableInterface((_a = this._intersects[0]) == null ? void 0 : _a.object) || null;
-  }
-  onDragStart(e) {
-    if (!this._draggable) return;
-    if (this._dragRaycastOnObjects !== null) {
-      this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
-    }
-    if (this._intersects.length === 0) return;
-    this._dragStart.copy(this._intersects[0].point.clone());
-    this._dragCurrent.copy(this._intersects[0].point.clone());
-    this._dragEnd.copy(this._dragStart.clone());
-    this._dragDelta.set(0, 0, 0);
-    if (this._draggable && this._draggable.onDragStart) {
-      this._draggable.onDragStart({
-        dragStart: this._dragStart,
-        dragCurrent: this._dragCurrent,
-        dragEnd: this._dragEnd,
-        dragDelta: this._dragDelta
-      });
-      this._dragging = true;
-      this._controller.enabled = false;
-    }
-  }
-  onPointerMove(e) {
-    var _a;
-    this._pointer.x = e.offsetX / this._canvas.clientWidth * 2 - 1;
-    this._pointer.y = -(e.offsetY / this._canvas.clientHeight) * 2 + 1;
-    this._raycaster.setFromCamera(this._pointer, this._controller.object);
-    this._intersects = this.raycast(this._scene.children);
-    const hoverable = findHoverableInterface((_a = this._intersects[0]) == null ? void 0 : _a.object);
-    if (this._intersects[0] && hoverable) {
-      if (!this._hovered) {
-        if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
-        this._hovered = hoverable;
-        return;
-      }
-      if (this._hovered.uuid !== hoverable.uuid) {
-        if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
-        if (hoverable.onPointerEnter) hoverable.onPointerEnter(this._intersects[0]);
-        this._hovered = hoverable;
-        return;
-      }
-      if (hoverable.onPointerOver) hoverable.onPointerOver(this._intersects[0]);
-      this._hovered = hoverable;
-    } else {
-      if (this._hovered) {
-        if (this._hovered.onPointerLeave) this._hovered.onPointerLeave();
-      }
-      this._hovered = null;
-    }
-    if (this._pointerAnyDown) {
-      if (!this._dragging) {
-        this.onDragStart(e);
-      }
-      this.onDrag(e);
-    }
-  }
-  onDrag(e) {
-    if (this._dragRaycastOnObjects !== null) {
-      this._intersects = this._raycaster.intersectObjects(this._dragRaycastOnObjects, true);
-    }
-    const intersect = this._intersects[0];
-    if (!intersect) return;
-    this._dragCurrent.copy(intersect.point.clone());
-    this._dragEnd.copy(intersect.point.clone());
-    this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
-    if (this._draggable && this._draggable.onDrag) {
-      this._draggable.onDrag({
-        dragStart: this._dragStart,
-        dragCurrent: this._dragCurrent,
-        dragEnd: this._dragEnd,
-        dragDelta: this._dragDelta
-      });
-    }
-  }
-  onPointerUp(e) {
-    if (this.pointerWasDragged() || this._dragging) {
-      if (this._draggable) {
-        this.onDragEnd(e);
-      }
-    } else {
-      this.onClick(e);
-    }
-    switch (e.button) {
-      case 0:
-        this._pointerPrimaryDown = false;
-        break;
-      case 1:
-        this._pointerMiddleDown = false;
-        break;
-      case 2:
-        this._pointerSecondaryDown = false;
-        break;
-    }
-    this._lastPointerUp.copy(this._pointer);
-  }
-  onClick(e) {
+    this._selectTool = null;
+    this._activeTool = null;
   }
-  onDragEnd(e) {
-    const intersect = this._intersects[0];
-    if (intersect) {
-      this._dragEnd.copy(intersect.point.clone());
-      this._dragCurrent.copy(intersect.point.clone());
-      this._dragDelta.subVectors(this._dragCurrent.clone(), this._dragStart.clone());
-    }
-    if (this._draggable && this._draggable.onDragEnd) {
-      this._draggable.onDragEnd({
-        dragStart: this._dragStart,
-        dragCurrent: this._dragCurrent,
-        dragEnd: this._dragEnd,
-        dragDelta: this._dragDelta
-      });
-    }
-    this._draggable = null;
-    this._dragging = false;
-    this._dragStart.set(0, 0, 0);
-    this._dragCurrent.set(0, 0, 0);
-    this._dragEnd.set(0, 0, 0);
-    this._dragDelta.set(0, 0, 0);
-    this._controller.enabled = true;
-  }
-  onWheel(e) {
-  }
-  raycast(objects) {
-    if (objects !== void 0) return this._raycaster.intersectObjects(objects, true).filter((i) => i.object.visible);
-    return this._raycaster.intersectObjects(this._scene.children, true).filter((i) => i.object.visible);
-  }
-  pointerWasDragged() {
-    return this._lastPointerDown.distanceTo(this._pointer) > this.POINTER_DRAG_THRESHOLD;
-  }
-};
-
-// src/toolbox/transform/TransformTool.ts
-var import_Addons3 = require("three/examples/jsm/Addons");
-var DIVETransformTool = class extends DIVEBaseTool {
-  constructor(scene, controller) {
-    super(scene, controller);
-    this.name = "DIVETransformTool";
-    this._gizmo = new import_Addons3.TransformControls(this._controller.object, this._controller.domElement);
-    this._gizmo.mode = "translate";
-    this._gizmo.addEventListener("mouseDown", () => {
-      controller.enabled = false;
-    });
-    this._gizmo.addEventListener("mouseUp", () => {
-      controller.enabled = true;
-    });
-    this._gizmo.addEventListener("objectChange", () => {
-      if (!this._gizmo.object) return;
-      if (!("isMoveable" in this._gizmo.object)) return;
-      if (!("onMove" in this._gizmo.object)) return;
-      this._gizmo.object.onMove();
-    });
-    scene.add(this._gizmo);
-  }
-  Activate() {
-  }
-  SetGizmoMode(mode) {
-    this._gizmo.mode = mode;
-  }
-  SetGizmoVisibility(active) {
-    const contains = this._scene.children.includes(this._gizmo);
-    if (active && !contains) {
-      this._scene.add(this._gizmo);
-    } else if (!active && contains) {
-      this._scene.remove(this._gizmo);
-    }
-  }
-  // public onPointerDown(e: PointerEvent): void {
-  //     super.onPointerDown(e);
-  //     // if (this._hovered) {
-  //     //     this._dragRaycastOnObjects = this._gizmo.gizmoPlane.children;
-  //     // }
-  // }
-  // protected raycast(): Intersection[] {
-  //     return super.raycast(this._gizmo.gizmoNode.children);
-  // }
-};
-
-// src/toolbox/select/SelectTool.ts
-var DIVESelectTool = class extends DIVETransformTool {
-  constructor(scene, controller) {
-    super(scene, controller);
-    this.name = "SelectTool";
-  }
-  Activate() {
-  }
-  Select(selectable) {
-    if (selectable.onSelect) selectable.onSelect();
-    this.AttachGizmo(selectable);
-  }
-  Deselect(selectable) {
-    if (selectable.onDeselect) selectable.onDeselect();
-    this.DetachGizmo();
-  }
-  DetachGizmo() {
-    this._gizmo.detach();
-  }
-  AttachGizmo(selectable) {
-    if ("isMoveable" in selectable) {
-      const movable = selectable;
-      this._gizmo.attach(movable);
-      this.SetGizmoVisibility(movable.visible);
-    }
-  }
-  onClick(e) {
-    super.onClick(e);
-    const first = this._raycaster.intersectObjects(this._scene.Root.children, true).filter((intersect) => intersect.object.visible)[0];
-    const selectable = this.findSelectableInterface(first == null ? void 0 : first.object);
-    if (!first || !selectable) {
-      if (this._gizmo.object) {
-        this.Deselect(this._gizmo.object);
-      }
-      return;
-    }
-    if (this._gizmo.object) {
-      if (this._gizmo.object.uuid === selectable.uuid) return;
-      this.Deselect(this._gizmo.object);
-    }
-    this.Select(selectable);
-  }
-  findSelectableInterface(child) {
-    if (child === void 0) return void 0;
-    if (child.parent === null) {
-      return void 0;
-    }
-    if (isSelectable(child)) {
-      return child;
-    }
-    return this.findSelectableInterface(child.parent);
-  }
-};
-
-// src/toolbox/Toolbox.ts
-var DIVEToolbox = class {
-  constructor(scene, controller) {
-    this.removeListenersCallback = () => {
-    };
-    this.selectTool = new DIVESelectTool(scene, controller);
-    const pointerMove = this.onPointerMove.bind(this);
-    const pointerDown = this.onPointerDown.bind(this);
-    const pointerUp = this.onPointerUp.bind(this);
-    const wheel = this.onWheel.bind(this);
-    controller.domElement.addEventListener("pointermove", pointerMove);
-    controller.domElement.addEventListener("pointerdown", pointerDown);
-    controller.domElement.addEventListener("pointerup", pointerUp);
-    controller.domElement.addEventListener("wheel", wheel);
-    this.removeListenersCallback = () => {
-      controller.domElement.removeEventListener("pointermove", pointerMove);
-      controller.domElement.removeEventListener("pointerdown", pointerDown);
-      controller.domElement.removeEventListener("pointerup", pointerUp);
-      controller.domElement.removeEventListener("wheel", wheel);
-    };
-    this.activeTool = this.selectTool;
-    this.activeTool.Activate();
-  }
-  dispose() {
-    this.removeListenersCallback();
+  Dispose() {
+    this.removeEventListeners();
   }
   GetActiveTool() {
-    return this.activeTool;
+    return this._activeTool;
   }
   UseTool(tool) {
-    this.activeTool.Deactivate();
+    var _a;
+    (_a = this._activeTool) == null ? void 0 : _a.Deactivate();
     switch (tool) {
       case "select": {
+        this.addEventListeners();
         this.selectTool.Activate();
-        this.activeTool = this.selectTool;
+        this._activeTool = this.selectTool;
+        break;
+      }
+      case "none": {
+        this.removeEventListeners();
+        this._activeTool = null;
         break;
       }
       default: {
@@ -1571,31 +1708,40 @@ var DIVEToolbox = class {
     this.selectTool.SetGizmoVisibility(active);
   }
   onPointerMove(e) {
-    this.activeTool.onPointerMove(e);
+    var _a;
+    (_a = this._activeTool) == null ? void 0 : _a.onPointerMove(e);
   }
   onPointerDown(e) {
-    this.activeTool.onPointerDown(e);
+    var _a;
+    (_a = this._activeTool) == null ? void 0 : _a.onPointerDown(e);
   }
   onPointerUp(e) {
-    this.activeTool.onPointerUp(e);
+    var _a;
+    (_a = this._activeTool) == null ? void 0 : _a.onPointerUp(e);
   }
   onWheel(e) {
-    this.activeTool.onWheel(e);
+    var _a;
+    (_a = this._activeTool) == null ? void 0 : _a.onWheel(e);
   }
-};
-DIVEToolbox.DefaultTool = "select";
-
-// src/animation/AnimationSystem.ts
-var import_tween2 = require("@tweenjs/tween.js");
-var DIVEAnimationSystem = class {
-  update() {
-    (0, import_tween2.update)();
+  addEventListeners() {
+    this._controller.domElement.addEventListener("pointermove", (e) => this.onPointerMove(e));
+    this._controller.domElement.addEventListener("pointerdown", (e) => this.onPointerDown(e));
+    this._controller.domElement.addEventListener("pointerup", (e) => this.onPointerUp(e));
+    this._controller.domElement.addEventListener("wheel", (e) => this.onWheel(e));
+  }
+  removeEventListeners() {
+    this._controller.domElement.removeEventListener("pointermove", (e) => this.onPointerMove(e));
+    this._controller.domElement.removeEventListener("pointerdown", (e) => this.onPointerDown(e));
+    this._controller.domElement.removeEventListener("pointerup", (e) => this.onPointerUp(e));
+    this._controller.domElement.removeEventListener("wheel", (e) => this.onWheel(e));
   }
 };
+DIVEToolbox.DefaultTool = "select";
 
 // src/axiscamera/AxisCamera.ts
-var import_three16 = require("three");
+var import_three15 = require("three");
 var import_three_spritetext = __toESM(require("three-spritetext"), 1);
+init_VisibilityLayerMask();
 
 // src/constant/AxisHelperColors.ts
 var AxesColorRedLetter = "#c20017";
@@ -1606,18 +1752,18 @@ var AxesColorGreen = AxesColorGreenLetter;
 var AxesColorBlue = AxesColorBlueLetter;
 
 // src/axiscamera/AxisCamera.ts
-var DIVEAxisCamera = class extends import_three16.OrthographicCamera {
-  constructor() {
+var DIVEAxisCamera = class extends import_three15.OrthographicCamera {
+  constructor(renderer, scene, controls) {
     super(-1, 1, 1, -1, 0.1, 100);
     this.layers.mask = COORDINATE_LAYER_MASK;
-    this.axesHelper = new import_three16.AxesHelper(0.5);
+    this.axesHelper = new import_three15.AxesHelper(0.5);
     this.axesHelper.layers.mask = COORDINATE_LAYER_MASK;
     this.axesHelper.material.depthTest = false;
     this.axesHelper.position.set(0, 0, -1);
     this.axesHelper.setColors(
-      new import_three16.Color(AxesColorRed),
-      new import_three16.Color(AxesColorGreen),
-      new import_three16.Color(AxesColorBlue)
+      new import_three15.Color(AxesColorRed),
+      new import_three15.Color(AxesColorGreen),
+      new import_three15.Color(AxesColorBlue)
     );
     const x = new import_three_spritetext.default("X", 0.2, AxesColorRedLetter);
     const y = new import_three_spritetext.default("Y", 0.2, AxesColorGreenLetter);
@@ -1632,9 +1778,29 @@ var DIVEAxisCamera = class extends import_three16.OrthographicCamera {
     this.axesHelper.add(y);
     this.axesHelper.add(z);
     this.add(this.axesHelper);
+    this._renderer = renderer;
+    this._scene = scene;
+    this._scene.add(this);
+    const restoreViewport = new import_three15.Vector4();
+    this._renderCallbackId = renderer.AddPostRenderCallback(() => {
+      const restoreBackground = scene.background;
+      scene.background = null;
+      renderer.getViewport(restoreViewport);
+      renderer.setViewport(0, 0, 150, 150);
+      renderer.autoClear = false;
+      this.SetFromCameraMatrix(controls.object.matrix);
+      renderer.render(scene, this);
+      renderer.setViewport(restoreViewport);
+      renderer.autoClear = true;
+      scene.background = restoreBackground;
+    });
+  }
+  Dispose() {
+    this._renderer.RemovePostRenderCallback(this._renderCallbackId);
+    this._scene.remove(this);
   }
   SetFromCameraMatrix(matrix) {
-    this.axesHelper.rotation.setFromRotationMatrix(new import_three16.Matrix4().extractRotation(matrix).invert());
+    this.axesHelper.rotation.setFromRotationMatrix(new import_three15.Matrix4().extractRotation(matrix).invert());
   }
 };
 
@@ -1751,13 +1917,63 @@ var DIVEMath = {
 };
 
 // src/dive.ts
+var import_MathUtils2 = require("three/src/math/MathUtils");
 var DIVEDefaultSettings = {
   autoResize: true,
+  displayAxes: false,
   renderer: DIVERendererDefaultSettings,
   perspectiveCamera: DIVEPerspectiveCameraDefaultSettings,
   orbitControls: DIVEOrbitControlsDefaultSettings
 };
-var DIVE = class {
+var DIVE = class _DIVE {
+  // static members
+  static QuickView(uri) {
+    const dive = new _DIVE();
+    dive.Communication.PerformAction("SET_CAMERA_TRANSFORM", {
+      position: { x: 0, y: 2, z: 2 },
+      target: { x: 0, y: 0.5, z: 0 }
+    });
+    const lightid = (0, import_MathUtils2.generateUUID)();
+    dive.Communication.PerformAction("ADD_OBJECT", {
+      entityType: "light",
+      type: "scene",
+      name: "light",
+      id: lightid,
+      enabled: true,
+      visible: true,
+      intensity: 1,
+      color: 16777215
+    });
+    const modelid = (0, import_MathUtils2.generateUUID)();
+    dive.Communication.Subscribe("MODEL_LOADED", (data) => {
+      if (data.id !== modelid) return;
+      dive.Communication.PerformAction("PLACE_ON_FLOOR", {
+        id: modelid
+      });
+      const transform = dive.Communication.PerformAction("COMPUTE_ENCOMPASSING_VIEW", {});
+      dive.Communication.PerformAction("SET_CAMERA_TRANSFORM", {
+        position: transform.position,
+        target: transform.target
+      });
+    });
+    dive.Communication.PerformAction("ADD_OBJECT", {
+      entityType: "model",
+      name: "object",
+      id: modelid,
+      position: { x: 0, y: 0, z: 0 },
+      rotation: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1, z: 1 },
+      uri,
+      visible: true,
+      loaded: false
+    });
+    dive.Communication.PerformAction("UPDATE_SCENE", {
+      backgroundColor: 16777215,
+      gridEnabled: false,
+      floorColor: 16777215
+    });
+    return dive;
+  }
   // getters
   get Communication() {
     return this.communication;
@@ -1767,6 +1983,7 @@ var DIVE = class {
   }
   // setters
   set Settings(settings) {
+    var _a;
     const settingsDelta = getObjectDelta(this._settings, settings);
     if (settingsDelta.renderer) this.renderer = new DIVERenderer(this._settings.renderer);
     if (settingsDelta.perspectiveCamera) {
@@ -1786,6 +2003,12 @@ var DIVE = class {
         this.removeResizeObserver();
       }
     }
+    if (settingsDelta.displayAxes) {
+      this.axisCamera = new DIVEAxisCamera(this.renderer, this.scene, this.orbitControls);
+    } else {
+      (_a = this.axisCamera) == null ? void 0 : _a.Dispose();
+      this.axisCamera = null;
+    }
     Object.assign(this._settings, settings);
   }
   constructor(settings) {
@@ -1797,28 +2020,14 @@ var DIVE = class {
     this.scene = new DIVEScene();
     this.perspectiveCamera = new DIVEPerspectiveCamera(this._settings.perspectiveCamera);
     this.orbitControls = new DIVEOrbitControls(this.perspectiveCamera, this.renderer, this._settings.orbitControls);
-    this.mediaCreator = new DIVEMediaCreator(this.renderer, this.scene, this.orbitControls);
     this.toolbox = new DIVEToolbox(this.scene, this.orbitControls);
-    this.communication = new DIVECommunication(this.scene, this.orbitControls, this.toolbox, this.mediaCreator);
-    this.animationSystem = new DIVEAnimationSystem();
-    this.renderer.AddPreRenderCallback(() => {
-      this.animationSystem.update();
-    });
-    this.axisCamera = new DIVEAxisCamera();
-    this.scene.add(this.axisCamera);
-    const restoreViewport = new import_three17.Vector4();
-    this.renderer.AddPostRenderCallback(() => {
-      const restoreBackground = this.scene.background;
-      this.scene.background = null;
-      this.renderer.getViewport(restoreViewport);
-      this.renderer.setViewport(0, 0, 150, 150);
-      this.renderer.autoClear = false;
-      this.axisCamera.SetFromCameraMatrix(this.perspectiveCamera.matrix);
-      this.renderer.render(this.scene, this.axisCamera);
-      this.renderer.setViewport(restoreViewport);
-      this.renderer.autoClear = true;
-      this.scene.background = restoreBackground;
-    });
+    this.communication = new DIVECommunication(this.renderer, this.scene, this.orbitControls, this.toolbox);
+    this.animationSystem = null;
+    if (this._settings.displayAxes) {
+      this.axisCamera = new DIVEAxisCamera(this.renderer, this.scene, this.orbitControls);
+    } else {
+      this.axisCamera = null;
+    }
     if (this._settings.autoResize) {
       this.addResizeObserver();
     }
@@ -1829,6 +2038,14 @@ var DIVE = class {
       }
     };
   }
+  Dispose() {
+    var _a;
+    this.removeResizeObserver();
+    this.renderer.Dispose();
+    (_a = this.axisCamera) == null ? void 0 : _a.Dispose();
+    this.toolbox.Dispose();
+    this.communication.DestroyInstance();
+  }
   // methods
   OnResize(width, height) {
     this.renderer.OnResize(width, height);