@shopware-ag/dive 1.5.0 → 1.6.0

package/build/dive.js

@@ -1,6 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -17,6 +19,22 @@ 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 });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -38,8 +56,465 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
-// src/dive.ts
-import { Vector4 } from "three";
+// 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
+import { Raycaster, Vector2, Vector3 } from "three";
+var DIVEBaseTool;
+var init_BaseTool = __esm({
+  "src/toolbox/BaseTool.ts"() {
+    "use strict";
+    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 Vector2();
+        this._pointerPrimaryDown = false;
+        this._pointerMiddleDown = false;
+        this._pointerSecondaryDown = false;
+        this._lastPointerDown = new Vector2();
+        this._lastPointerUp = new Vector2();
+        this._raycaster = new Raycaster();
+        this._raycaster.layers.mask = PRODUCT_LAYER_MASK | UI_LAYER_MASK;
+        this._intersects = [];
+        this._hovered = null;
+        this._dragging = false;
+        this._dragStart = new Vector3();
+        this._dragCurrent = new Vector3();
+        this._dragEnd = new Vector3();
+        this._dragDelta = new 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
+import { TransformControls } from "three/examples/jsm/Addons";
+var DIVETransformTool;
+var init_TransformTool = __esm({
+  "src/toolbox/transform/TransformTool.ts"() {
+    "use strict";
+    init_BaseTool();
+    DIVETransformTool = class extends DIVEBaseTool {
+      constructor(scene, controller) {
+        super(scene, controller);
+        this.isTransformTool = true;
+        this.name = "DIVETransformTool";
+        this._gizmo = new 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
+import { PerspectiveCamera } from "three";
+var DIVEPerspectiveCameraDefaultSettings, _DIVEPerspectiveCamera, DIVEPerspectiveCamera;
+var init_PerspectiveCamera = __esm({
+  "src/camera/PerspectiveCamera.ts"() {
+    "use strict";
+    init_VisibilityLayerMask();
+    DIVEPerspectiveCameraDefaultSettings = {
+      fov: 80,
+      near: 0.1,
+      far: 1e3
+    };
+    _DIVEPerspectiveCamera = class _DIVEPerspectiveCamera extends 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/renderer/Renderer.ts
 import { MathUtils, NoToneMapping, PCFSoftShadowMap, WebGLRenderer } from "three";
@@ -71,6 +546,11 @@ var DIVERenderer = class extends 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(() => {
@@ -162,25 +642,17 @@ var DIVERenderer = class extends WebGLRenderer {
 };
 
 // src/scene/Scene.ts
-import { Color as Color7, Scene as Scene2 } from "three";
+import { Color as Color6, Scene as Scene2 } from "three";
 
 // src/scene/root/Root.ts
-import { Object3D as Object3D8 } from "three";
+import { Box3 as Box32, Object3D as Object3D9 } from "three";
 
 // src/scene/root/lightroot/LightRoot.ts
-import { Color as Color5, Object3D as Object3D4 } from "three";
+import { Color as Color4, Object3D as Object3D5 } from "three";
 
 // src/light/AmbientLight.ts
+init_VisibilityLayerMask();
 import { AmbientLight, Object3D } from "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
 var DIVEAmbientLight = class extends Object3D {
   constructor() {
     super();
@@ -201,25 +673,34 @@ var DIVEAmbientLight = class extends Object3D {
 };
 
 // src/light/PointLight.ts
-import { PointLight, SphereGeometry, MeshBasicMaterial, Mesh, FrontSide, Object3D as Object3D2 } from "three";
+import { PointLight, SphereGeometry, MeshBasicMaterial, Mesh, FrontSide, Object3D as Object3D3 } from "three";
 
 // src/com/Communication.ts
-import { MathUtils as MathUtils2 } from "three";
+init_SelectTool();
+import { generateUUID } from "three/src/math/MathUtils";
 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 = MathUtils2.generateUUID();
+    this.id = 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;
@@ -289,6 +770,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;
@@ -399,8 +884,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;
   }
@@ -410,8 +897,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;
   }
@@ -466,6 +955,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);
@@ -486,10 +981,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;
@@ -512,7 +1009,8 @@ _DIVECommunication.__instances = [];
 var DIVECommunication = _DIVECommunication;
 
 // src/light/PointLight.ts
-var DIVEPointLight = class extends Object3D2 {
+init_VisibilityLayerMask();
+var DIVEPointLight = class extends Object3D3 {
   constructor() {
     super();
     this.isMoveable = true;
@@ -558,8 +1056,9 @@ var DIVEPointLight = class extends Object3D2 {
 };
 
 // src/light/SceneLight.ts
-import { DirectionalLight, HemisphereLight, Object3D as Object3D3 } from "three";
-var DIVESceneLight = class extends Object3D3 {
+init_VisibilityLayerMask();
+import { DirectionalLight, HemisphereLight, Object3D as Object3D4 } from "three";
+var DIVESceneLight = class extends Object3D4 {
   constructor() {
     super();
     this.name = "DIVESceneLight";
@@ -597,7 +1096,7 @@ var DIVESceneLight = class extends Object3D3 {
 };
 
 // src/scene/root/lightroot/LightRoot.ts
-var DIVELightRoot = class extends Object3D4 {
+var DIVELightRoot = class extends Object3D5 {
   constructor() {
     super();
     this.name = "LightRoot";
@@ -641,7 +1140,7 @@ var DIVELightRoot = class extends Object3D4 {
     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 Color5(light.color));
+    if (light.color !== void 0 && light.color !== null) sceneObject.SetColor(new Color4(light.color));
     if (light.visible !== void 0 && light.visible !== null) sceneObject.visible = light.visible;
   }
   DeleteLight(light) {
@@ -672,10 +1171,11 @@ var DIVELightRoot = class extends Object3D4 {
 };
 
 // src/scene/root/modelroot/ModelRoot.ts
-import { Object3D as Object3D6 } from "three";
+import { Object3D as Object3D7 } from "three";
 
 // src/model/Model.ts
-import { Box3, Object3D as Object3D5, Raycaster, Vector3 } from "three";
+init_VisibilityLayerMask();
+import { Box3, Object3D as Object3D6, Raycaster as Raycaster2, Vector3 as Vector32 } from "three";
 
 // src/helper/findSceneRecursive/findSceneRecursive.ts
 var findSceneRecursive = (object) => {
@@ -686,7 +1186,7 @@ var findSceneRecursive = (object) => {
 };
 
 // src/model/Model.ts
-var DIVEModel = class extends Object3D5 {
+var DIVEModel = class extends Object3D6 {
   constructor() {
     super();
     this.isSelectable = true;
@@ -709,7 +1209,7 @@ var DIVEModel = class extends Object3D5 {
     this.position.set(position.x, position.y, position.z);
   }
   SetRotation(rotation) {
-    this.rotation.setFromVector3(new Vector3(rotation.x, rotation.y, rotation.z));
+    this.rotation.setFromVector3(new Vector32(rotation.x, rotation.y, rotation.z));
   }
   SetScale(scale) {
     this.scale.set(scale.x, scale.y, scale.z);
@@ -736,9 +1236,9 @@ var DIVEModel = class extends Object3D5 {
       return;
     }
     const bottomY = this.boundingBox.min.y * this.scale.y;
-    const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new Vector3()).multiply(this.scale));
+    const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new Vector32()).multiply(this.scale));
     bbBottomCenter.y = bottomY + this.position.y;
-    const raycaster = new Raycaster(bbBottomCenter, new Vector3(0, -1, 0));
+    const raycaster = new Raycaster2(bbBottomCenter, new Vector32(0, -1, 0));
     raycaster.layers.mask = PRODUCT_LAYER_MASK;
     const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
     if (intersections.length > 0) {
@@ -747,7 +1247,7 @@ var DIVEModel = class extends Object3D5 {
       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 Vector3(0, bottomY, 0));
+      const newPos = this.position.clone().setY(worldPos.y).add(new Vector32(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 });
@@ -800,7 +1300,7 @@ var DIVELoadingManager = class {
 };
 
 // src/scene/root/modelroot/ModelRoot.ts
-var DIVEModelRoot = class extends Object3D6 {
+var DIVEModelRoot = class extends Object3D7 {
   constructor() {
     super();
     this.name = "ModelRoot";
@@ -869,10 +1369,11 @@ var DIVEModelRoot = class extends Object3D6 {
 };
 
 // src/primitive/floor/Floor.ts
-import { Color as Color6, Mesh as Mesh2, MeshStandardMaterial as MeshStandardMaterial2, PlaneGeometry } from "three";
+init_VisibilityLayerMask();
+import { Color as Color5, Mesh as Mesh2, MeshStandardMaterial, PlaneGeometry } from "three";
 var DIVEFloor = class extends Mesh2 {
   constructor() {
-    super(new PlaneGeometry(1e4, 1e4), new MeshStandardMaterial2({ color: new Color6(150 / 255, 150 / 255, 150 / 255) }));
+    super(new PlaneGeometry(1e4, 1e4), new MeshStandardMaterial({ color: new Color5(150 / 255, 150 / 255, 150 / 255) }));
     this.isFloor = true;
     this.name = "Floor";
     this.layers.mask = PRODUCT_LAYER_MASK;
@@ -883,7 +1384,7 @@ var DIVEFloor = class extends Mesh2 {
     this.visible = visible;
   }
   SetColor(color) {
-    this.material.color = new Color6(color);
+    this.material.color = new Color5(color);
   }
 };
 
@@ -892,8 +1393,9 @@ var GRID_CENTER_LINE_COLOR = "#888888";
 var GRID_SIDE_LINE_COLOR = "#dddddd";
 
 // src/grid/Grid.ts
-import { GridHelper, Object3D as Object3D7 } from "three";
-var DIVEGrid = class extends Object3D7 {
+init_VisibilityLayerMask();
+import { GridHelper, Object3D as Object3D8 } from "three";
+var DIVEGrid = class extends Object3D8 {
   constructor() {
     super();
     this.name = "Grid";
@@ -902,10 +1404,13 @@ var DIVEGrid = class extends Object3D7 {
     grid.layers.mask = HELPER_LAYER_MASK;
     this.add(grid);
   }
+  SetVisibility(visible) {
+    this.visible = visible;
+  }
 };
 
 // src/scene/root/Root.ts
-var DIVERoot = class extends Object3D8 {
+var DIVERoot = class extends Object3D9 {
   get Floor() {
     return this.floor;
   }
@@ -924,6 +1429,15 @@ var DIVERoot = class extends Object3D8 {
     this.grid = new DIVEGrid();
     this.add(this.grid);
   }
+  ComputeSceneBB() {
+    const bb = new Box32();
+    this.modelRoot.traverse((object) => {
+      if ("isObject3D" in object) {
+        bb.expandByObject(object);
+      }
+    });
+    return bb;
+  }
   GetSceneObject(object) {
     switch (object.entityType) {
       case "pov": {
@@ -994,11 +1508,15 @@ var DIVEScene = class extends Scene2 {
   }
   constructor() {
     super();
+    this.background = new Color6(16777215);
     this.root = new DIVERoot();
     this.add(this.root);
   }
   SetBackground(color) {
-    this.background = new Color7(color);
+    this.background = new Color6(color);
+  }
+  ComputeSceneBB() {
+    return this.Root.ComputeSceneBB();
   }
   GetSceneObject(object) {
     return this.Root.GetSceneObject(object);
@@ -1017,36 +1535,12 @@ var DIVEScene = class extends Scene2 {
   }
 };
 
-// src/camera/PerspectiveCamera.ts
-import { PerspectiveCamera } from "three";
-var DIVEPerspectiveCameraDefaultSettings = {
-  fov: 80,
-  near: 0.1,
-  far: 1e3
-};
-var _DIVEPerspectiveCamera = class _DIVEPerspectiveCamera extends 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
 import { OrbitControls } from "three/examples/jsm/Addons.js";
-import { MathUtils as MathUtils3 } from "three";
+import { MathUtils as MathUtils2, Vector3 as Vector33 } from "three";
 import { Easing, Tween } from "@tweenjs/tween.js";
 var DIVEOrbitControlsDefaultSettings = {
   enableDamping: true,
@@ -1074,10 +1568,20 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends OrbitControls {
     this.enableDamping = settings.enableDamping;
     this.dampingFactor = settings.dampingFactor;
   }
+  ComputeEncompassingView(bb) {
+    const center = bb.getCenter(new Vector33());
+    const size = bb.getSize(new Vector33());
+    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;
-    this.minDistance = this.maxDistance = MathUtils3.clamp(this.getDistance() - zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
+    this.minDistance = this.maxDistance = MathUtils2.clamp(this.getDistance() - zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
     this.update();
     this.minDistance = minDistance;
     this.maxDistance = maxDistance;
@@ -1085,7 +1589,7 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends OrbitControls {
   ZoomOut(by) {
     const zoomBy = by || _DIVEOrbitControls.DEFAULT_ZOOM_FACTOR;
     const { minDistance, maxDistance } = this;
-    this.minDistance = this.maxDistance = MathUtils3.clamp(this.getDistance() + zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
+    this.minDistance = this.maxDistance = MathUtils2.clamp(this.getDistance() + zoomBy, minDistance + zoomBy, maxDistance - zoomBy);
     this.update();
     this.minDistance = minDistance;
     this.maxDistance = maxDistance;
@@ -1134,394 +1638,40 @@ var _DIVEOrbitControls = class _DIVEOrbitControls extends OrbitControls {
 _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;
+    return this._selectTool;
   }
-};
-
-// src/interface/Selectable.ts
-function isSelectable(object) {
-  return "isSelectable" in object;
-}
-
-// src/toolbox/BaseTool.ts
-import { Raycaster as Raycaster2, Vector2, Vector3 as Vector32 } from "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;
-  }
-  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 Vector2();
-    this._pointerPrimaryDown = false;
-    this._pointerMiddleDown = false;
-    this._pointerSecondaryDown = false;
-    this._lastPointerDown = new Vector2();
-    this._lastPointerUp = new Vector2();
-    this._raycaster = new Raycaster2();
-    this._raycaster.layers.mask = PRODUCT_LAYER_MASK | UI_LAYER_MASK;
-    this._intersects = [];
-    this._hovered = null;
-    this._dragging = false;
-    this._dragStart = new Vector32();
-    this._dragCurrent = new Vector32();
-    this._dragEnd = new Vector32();
-    this._dragDelta = new Vector32();
-    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;
+    this._selectTool = null;
+    this._activeTool = null;
   }
-};
-
-// src/toolbox/transform/TransformTool.ts
-import { TransformControls } from "three/examples/jsm/Addons";
-var DIVETransformTool = class extends DIVEBaseTool {
-  constructor(scene, controller) {
-    super(scene, controller);
-    this.name = "DIVETransformTool";
-    this._gizmo = new 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: {
@@ -1536,30 +1686,39 @@ 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
-import { update as updateTween } from "@tweenjs/tween.js";
-var DIVEAnimationSystem = class {
-  update() {
-    updateTween();
+  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
-import { AxesHelper, Color as Color8, Matrix4, OrthographicCamera } from "three";
+init_VisibilityLayerMask();
+import { AxesHelper, Color as Color7, Matrix4, OrthographicCamera, Vector4 } from "three";
 import SpriteText from "three-spritetext";
 
 // src/constant/AxisHelperColors.ts
@@ -1572,7 +1731,7 @@ var AxesColorBlue = AxesColorBlueLetter;
 
 // src/axiscamera/AxisCamera.ts
 var DIVEAxisCamera = class extends OrthographicCamera {
-  constructor() {
+  constructor(renderer, scene, controls) {
     super(-1, 1, 1, -1, 0.1, 100);
     this.layers.mask = COORDINATE_LAYER_MASK;
     this.axesHelper = new AxesHelper(0.5);
@@ -1580,9 +1739,9 @@ var DIVEAxisCamera = class extends OrthographicCamera {
     this.axesHelper.material.depthTest = false;
     this.axesHelper.position.set(0, 0, -1);
     this.axesHelper.setColors(
-      new Color8(AxesColorRed),
-      new Color8(AxesColorGreen),
-      new Color8(AxesColorBlue)
+      new Color7(AxesColorRed),
+      new Color7(AxesColorGreen),
+      new Color7(AxesColorBlue)
     );
     const x = new SpriteText("X", 0.2, AxesColorRedLetter);
     const y = new SpriteText("Y", 0.2, AxesColorGreenLetter);
@@ -1597,6 +1756,26 @@ var DIVEAxisCamera = class extends 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 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 Matrix4().extractRotation(matrix).invert());
@@ -1716,13 +1895,63 @@ var DIVEMath = {
 };
 
 // src/dive.ts
+import { generateUUID as generateUUID2 } from "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 = generateUUID2();
+    dive.Communication.PerformAction("ADD_OBJECT", {
+      entityType: "light",
+      type: "scene",
+      name: "light",
+      id: lightid,
+      enabled: true,
+      visible: true,
+      intensity: 1,
+      color: 16777215
+    });
+    const modelid = generateUUID2();
+    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;
@@ -1732,6 +1961,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) {
@@ -1751,6 +1981,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) {
@@ -1762,28 +1998,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 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();
     }
@@ -1794,6 +2016,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);