vim-web 0.3.44-dev.44 → 0.3.44-dev.46

package/dist/vim-web.js

@@ -50664,13 +50664,11 @@ class CameraLerp extends CameraMovement {
     return this._clock.running;
   }
   init(duration) {
-    console.log("init lerp");
     this.cancel();
     this._duration = Math.max(duration, 0.01);
     this._clock.start();
   }
   cancel() {
-    console.log("cancel");
     this._clock.stop();
     this.onProgress = void 0;
   }
@@ -51654,24 +51652,24 @@ class RaycastResult {
     __publicField(this, "intersections");
     __publicField(this, "firstHit");
     this.intersections = intersections;
-    const [markerHit, marker] = this.GetFirstMarkerHit(intersections);
+    const [markerHit, marker] = this.getFirstMarkerHit(intersections);
     if (marker) {
       this.object = marker;
       this.firstHit = markerHit;
       return;
     }
-    const [objectHit, obj] = this.GetFirstVimHit(intersections);
+    const [objectHit, obj] = this.getFirstVimHit(intersections);
     this.firstHit = objectHit;
     this.object = obj;
   }
-  GetFirstVimHit(intersections) {
+  getFirstVimHit(intersections) {
     for (let i = 0; i < intersections.length; i++) {
       const obj = this.getVimObjectFromHit(intersections[i]);
       if (obj == null ? void 0 : obj.visible) return [intersections[i], obj];
     }
     return [];
   }
-  GetFirstMarkerHit(intersections) {
+  getFirstMarkerHit(intersections) {
     for (let i = 0; i < intersections.length; i++) {
       const data2 = intersections[i].object.userData.vim;
       if (data2 instanceof GizmoMarkers) {
@@ -51688,7 +51686,7 @@ class RaycastResult {
     const sub = mesh.merged ? mesh.getSubmeshFromFace(hit.faceIndex) : mesh.getSubMesh(hit.instanceId);
     return sub.object;
   }
-  // Convenience functions and mnemonics
+  // Convenience getters for hit information
   get isHit() {
     return !!this.firstHit;
   }
@@ -51710,28 +51708,27 @@ class RaycastResult {
   }
 }
 class Raycaster2 {
-  constructor(viewport, camera2, scene, renderer) {
-    __publicField(this, "_viewport");
+  constructor(camera2, scene, renderer) {
     __publicField(this, "_camera");
     __publicField(this, "_scene");
     __publicField(this, "_renderer");
     __publicField(this, "_raycaster", new Raycaster$1());
-    this._viewport = viewport;
     this._camera = camera2;
     this._scene = scene;
     this._renderer = renderer;
   }
   /**
-   * Performs a raycast by projecting a ray from the camera position to a screen position.
-   * @param {THREE.Vector2} position - The screen position for raycasting.
+   * Performs a raycast from the camera using normalized screen coordinates.
+   * Coordinates must be within [0, 1] for both x and y.
+   * If the coordinates are out of bounds, an error is logged and an empty result is returned.
+   *
+   * @param {THREE.Vector2} position - The normalized screen position for raycasting.
    */
-  raycast2(position) {
-    if (position.x < 0 || position.y < 0) {
+  raycastFromScreen(position) {
+    if (position.x < 0 || position.y < 0 || position.x > 1 || position.y > 1) {
       console.error("Invalid position for raycasting");
       return new RaycastResult([]);
     }
-    position.x *= position.x < 1 ? this._viewport.getSize().x : 1;
-    position.y *= position.y < 1 ? this._viewport.getSize().y : 1;
     this._raycaster = this.fromPoint2(position, this._raycaster);
     let hits = this._raycaster.intersectObjects(this._scene.scene.children);
     hits = this.filterHits(hits);
@@ -51741,35 +51738,46 @@ class Raycaster2 {
     return this._renderer.section.active ? hits.filter((i) => this._renderer.section.box.containsPoint(i.point)) : hits;
   }
   /**
-   * Performs a raycast by projecting a ray from the camera position to a world position.
-   * @param {THREE.Vector3} position - The world position for raycasting.
+   * Performs a raycast from the camera towards a specified world position.
+   *
+   * @param {THREE.Vector3} position - The target world position for raycasting.
    */
-  raycast3(position) {
+  raycastFromWorld(position) {
     this._raycaster = this.fromPoint3(position, this._raycaster);
     let hits = this._raycaster.intersectObjects(this._scene.scene.children);
     hits = this.filterHits(hits);
     return new RaycastResult(hits);
   }
   /**
-   * Performs a raycast by projecting a ray from the camera center.
+   * Performs a raycast starting from the camera's current target position.
    */
   raycastForward() {
-    return this.raycast3(this._camera.target);
+    return this.raycastFromWorld(this._camera.target);
   }
   /**
-   * Returns a THREE.Raycaster projecting a ray from camera position to screen position
+   * Creates and returns a THREE.Raycaster that casts a ray from the camera's position
+   * through the provided normalized screen coordinate (x and y in the range [0, 1]).
+   *
+   * @param {THREE.Vector2} position - The normalized screen position for raycasting.
+   * @param {THREE.Raycaster} target - Optional existing raycaster instance to update.
+   * @returns {THREE.Raycaster} A configured raycaster for performing raycasting.
    */
   fromPoint2(position, target = new Raycaster$1()) {
-    const size = this._viewport.getSize();
-    const x = position.x / size.x * 2 - 1;
-    const y = -(position.y / size.y) * 2 + 1;
-    target.setFromCamera(new Vector2(x, y), this._camera.three);
+    const pos = new Vector2(
+      position.x * 2 - 1,
+      -position.y * 2 + 1
+    );
+    target.setFromCamera(pos, this._camera.three);
     return target;
   }
   /**
-   * Returns a THREE.Raycaster projecting a ray from the camera position to a screen position.
-   * @param {THREE.Vector2} position - The screen position for raycasting.
-   * @returns {THREE.Raycaster} A raycaster object for performing raycasting.
+   * Creates and returns a THREE.Raycaster that casts a ray from the camera's position
+   * towards the specified world position.
+   * The ray's direction is computed as the normalized vector from the camera position to the target position.
+   *
+   * @param {THREE.Vector3} position - The world position for raycasting.
+   * @param {THREE.Raycaster} target - Optional existing raycaster instance to update.
+   * @returns {THREE.Raycaster} A configured raycaster for performing raycasting.
    */
   fromPoint3(position, target = new Raycaster$1()) {
     const direction = position.clone().sub(this._camera.position).normalize();
@@ -51777,37 +51785,6 @@ class Raycaster2 {
     return target;
   }
 }
-class InputAction {
-  constructor(type, modifier, position, raycaster) {
-    __publicField(this, "position");
-    __publicField(this, "modifier");
-    __publicField(this, "type");
-    __publicField(this, "_raycaster");
-    __publicField(this, "_raycast");
-    this.type = type;
-    this.modifier = modifier;
-    this.position = position;
-    this._raycaster = raycaster;
-  }
-  /**
-   * A THREE.Raycaster object for custom raycasting.
-   */
-  get raycaster() {
-    return this._raycaster.fromPoint2(this.position);
-  }
-  /**
-   * Performs raycasting for VIM objects at the current point. This operation can be computationally expensive.
-   */
-  get raycast() {
-    return this._raycast ?? (this._raycast = this._raycaster.raycast2(this.position));
-  }
-  /**
-   * Returns the object at the current point. This operation can cause a computationally expensive raycast evaluation.
-   */
-  get object() {
-    return this.raycast.object;
-  }
-}
 class CSS2DObject extends Object3D$1 {
   constructor(element = document.createElement("div")) {
     super();
@@ -52905,7 +52882,7 @@ class GizmoRectangle {
    */
   getClosestHit() {
     if (!this.points) return;
-    const hits = this.points.map((p) => this.viewer.raycaster.raycast3(p)).filter((h) => h.isHit);
+    const hits = this.points.map((p) => this.viewer.raycaster.raycastFromWorld(p)).filter((h) => h.isHit);
     let position;
     let dist2;
     hits.forEach((h) => {
@@ -53882,7 +53859,7 @@ class Measure {
     this._stage = "ready";
     this._previousOnClick = this._viewer.inputs.mouse.onClick;
     this._viewer.inputs.mouse.onClick = (pos, ctrl) => {
-      const hit = this._viewer.raycaster.raycast2(pos);
+      const hit = this._viewer.raycaster.raycastFromScreen(pos);
       if (!hit.isHit) return;
       switch (this._stage) {
         case "ready":
@@ -54007,10 +53984,8 @@ class BoxInputs {
     __publicField(this, "_raycaster", new Raycaster$1());
     /** The box state before the current drag. */
     __publicField(this, "_lastBox", new Box3());
-    /** A collection of unregister callbacks for event listeners. */
-    __publicField(this, "_unregisters", []);
-    /** The ID of the pointer that is captured, if any. */
-    __publicField(this, "_capturedPointerId");
+    /** A callback to restore the original input listeners after unregistering. */
+    __publicField(this, "_restoreOriginalInputs");
     // -------------------------------------------------------------------------
     // Callbacks
     // -------------------------------------------------------------------------
@@ -54041,78 +54016,50 @@ class BoxInputs {
    * If already registered, it does nothing.
    */
   register() {
-    if (this._unregisters.length > 0) return;
-    const canvas = this._viewer.viewport.canvas;
-    this.reg(canvas, "pointerdown", (e) => this.onMouseDown(e));
-    this.reg(canvas, "pointermove", (e) => this.onMouseMove(e));
-    this.reg(canvas, "pointerup", (e) => this.onMouseUp(e));
-    this.reg(canvas, "pointerleave", (e) => this.onPointerLeave(e));
+    if (this._restoreOriginalInputs) return;
+    const mouse = this._viewer.inputs.mouse;
+    const up = mouse.onButtonUp;
+    const down = mouse.onButtonDown;
+    const move = mouse.onMouseMove;
+    const drag = mouse.onDrag;
+    this._restoreOriginalInputs = () => {
+      mouse.onButtonUp = up;
+      mouse.onButtonDown = down;
+      mouse.onMouseMove = move;
+      mouse.onDrag = drag;
+    };
+    mouse.onButtonUp = (pos, btn) => {
+      up(pos, btn);
+      this.onMouseUp(pos);
+    };
+    mouse.onButtonDown = (pos, btn) => {
+      down(pos, btn);
+      this.onMouseDown(pos);
+    };
+    mouse.onMouseMove = (pos) => {
+      move(pos);
+      this.onMouseMove(pos);
+    };
+    mouse.onDrag = (pos, btn) => {
+      if (this._handle) return;
+      drag(pos, btn);
+    };
   }
   /**
    * Unregisters any previously set pointer event listeners, releasing pointer capture
    * and resetting drag state.
    */
   unregister() {
-    var _a2;
+    var _a2, _b2;
     this._mouseDown = false;
     (_a2 = this._handle) == null ? void 0 : _a2.highlight(false);
     this._handle = void 0;
-    this.releasePointer();
-    this._viewer.inputs.registerAll();
-    this._unregisters.forEach((unreg) => unreg());
-    this._unregisters.length = 0;
-  }
-  /**
-   * Indicates if a pointer is currently captured for dragging.
-   */
-  get pointerCaptured() {
-    return this._capturedPointerId !== void 0;
+    (_b2 = this._restoreOriginalInputs) == null ? void 0 : _b2.call(this);
+    this._restoreOriginalInputs = void 0;
   }
   // -------------------------------------------------------------------------
   // Private Methods
   // -------------------------------------------------------------------------
-  /**
-   * A helper method to attach an event listener and store its unregister callback.
-   * 
-   * @param handler - The DOM element or Window to attach the listener to.
-   * @param type - The pointer event type, e.g. 'pointerdown'.
-   * @param listener - The event handler function.
-   */
-  reg(handler, type, listener2) {
-    handler.addEventListener(type, listener2);
-    this._unregisters.push(() => handler.removeEventListener(type, listener2));
-  }
-  /**
-   * Called when the pointer leaves the canvas. If not dragging,
-   * invokes {@link onFaceEnter} to indicate no active handle is hovered.
-   * 
-   * @param event - The pointerleave event.
-   */
-  onPointerLeave(event) {
-    var _a2, _b2;
-    if (!this.pointerCaptured) {
-      (_b2 = this.onFaceEnter) == null ? void 0 : _b2.call(this, ((_a2 = this._handle) == null ? void 0 : _a2.forward) ?? new Vector3());
-    }
-  }
-  /**
-   * Sets pointer capture on the canvas for a specific pointer (ID).
-   * 
-   * @param pointerId - The pointer ID to capture.
-   */
-  capturePointer(pointerId) {
-    this.releasePointer();
-    this._viewer.viewport.canvas.setPointerCapture(pointerId);
-    this._capturedPointerId = pointerId;
-  }
-  /**
-   * Releases any captured pointer on the canvas, if present.
-   */
-  releasePointer() {
-    if (this.pointerCaptured) {
-      this._viewer.viewport.canvas.releasePointerCapture(this._capturedPointerId);
-      this._capturedPointerId = void 0;
-    }
-  }
   /**
    * Handles pointer movement events.
    * - If dragging, calls {@link onDrag}.
@@ -54120,19 +54067,19 @@ class BoxInputs {
    * 
    * @param event - The pointermove event.
    */
-  onMouseMove(event) {
-    var _a2, _b2, _c, _d;
+  onMouseMove(position) {
+    var _a2, _b2, _c, _d, _e;
     if (this._mouseDown) {
-      this.onDrag(event);
+      this.onDrag(position);
       return;
     }
-    const hits = this.raycast(new Vector2(event.offsetX, event.offsetY));
-    const handle = (_b2 = (_a2 = hits == null ? void 0 : hits[0]) == null ? void 0 : _a2.object) == null ? void 0 : _b2.userData.handle;
+    const hits = this.raycast(position);
+    const handle = (_c = (_b2 = (_a2 = hits == null ? void 0 : hits[0]) == null ? void 0 : _a2.object) == null ? void 0 : _b2.userData) == null ? void 0 : _c.handle;
     if (handle !== this._handle) {
-      (_c = this._handle) == null ? void 0 : _c.highlight(false);
+      (_d = this._handle) == null ? void 0 : _d.highlight(false);
       handle == null ? void 0 : handle.highlight(true);
       this._handle = handle;
-      (_d = this.onFaceEnter) == null ? void 0 : _d.call(this, (handle == null ? void 0 : handle.forward) ?? new Vector3());
+      (_e = this.onFaceEnter) == null ? void 0 : _e.call(this, (handle == null ? void 0 : handle.forward) ?? new Vector3());
     }
   }
   /**
@@ -54140,39 +54087,29 @@ class BoxInputs {
    * 
    * @param event - The pointerup event.
    */
-  onMouseUp(event) {
-    var _a2, _b2;
-    this.releasePointer();
-    if (this._mouseDown) {
-      this._mouseDown = false;
-      this._viewer.inputs.registerAll();
-      if (event.pointerType === "mouse") {
-        this.onMouseMove(event);
-      } else {
-        this._handle = void 0;
-        (_a2 = this.onFaceEnter) == null ? void 0 : _a2.call(this, new Vector3());
-      }
-      (_b2 = this.onBoxConfirm) == null ? void 0 : _b2.call(this, this._sharedBox);
-    }
+  onMouseUp(position) {
+    var _a2;
+    if (!this._mouseDown) return;
+    this._mouseDown = false;
+    this.onMouseMove(position);
+    (_a2 = this.onBoxConfirm) == null ? void 0 : _a2.call(this, this._sharedBox);
   }
   /**
    * Handles pointer down events. Begins drag if a handle is hit, capturing the pointer.
    * 
    * @param event - The pointerdown event.
    */
-  onMouseDown(event) {
+  onMouseDown(position) {
     var _a2, _b2, _c, _d;
-    const hits = this.raycast(new Vector2(event.offsetX, event.offsetY));
+    const hits = this.raycast(position);
     const handle = (_c = (_b2 = (_a2 = hits == null ? void 0 : hits[0]) == null ? void 0 : _a2.object) == null ? void 0 : _b2.userData) == null ? void 0 : _c.handle;
     if (!handle) return;
     this._handle = handle;
-    this.capturePointer(event.pointerId);
     this._lastBox.copy(this._sharedBox);
     this._dragOrigin.copy(handle.position);
     const dist2 = handle.position.clone().dot(this._viewer.camera.forward);
     this._dragPlane.set(this._viewer.camera.forward, -dist2);
     this._mouseDown = true;
-    this._viewer.inputs.unregisterAll();
     (_d = this.onFaceEnter) == null ? void 0 : _d.call(this, this._handle.forward.clone());
   }
   /**
@@ -54181,10 +54118,10 @@ class BoxInputs {
    * 
    * @param event - The pointermove event while dragging.
    */
-  onDrag(event) {
+  onDrag(position) {
     var _a2;
     if (!this._handle) return;
-    const point = this.raycastPlane(new Vector2(event.offsetX, event.offsetY)) ?? this._dragOrigin.clone();
+    const point = this.raycastPlane(position) ?? this._dragOrigin.clone();
     const delta = point.sub(this._dragOrigin);
     const amount = delta.dot(this._handle.forward);
     const box = this.stretch(this._handle.axis, this._handle.sign, amount);
@@ -57065,7 +57002,7 @@ function toRotation(delta, speed) {
   rot.multiplyScalar(180 * speed);
   return rot;
 }
-function webglInputAdapter(viewer) {
+function webglInputHandler(viewer) {
   return new CoreInputHandler(
     viewer.viewport.canvas,
     createAdapter$1(viewer),
@@ -57105,7 +57042,7 @@ function createAdapter$1(viewer) {
       }
     },
     selectAtPointer: (pos, add) => {
-      const pointer = viewer.raycaster.raycast2(pos);
+      const pointer = viewer.raycaster.raycastFromScreen(pos);
       if (add) {
         viewer.selection.add(pointer.object);
       } else {
@@ -57113,7 +57050,7 @@ function createAdapter$1(viewer) {
       }
     },
     frameAtPointer: (pos) => {
-      const pointer = viewer.raycaster.raycast2(pos);
+      const pointer = viewer.raycaster.raycastFromScreen(pos);
       viewer.camera.lerp(0.75).frame(pointer.object);
     },
     zoom: (value) => {
@@ -57192,13 +57129,12 @@ class Viewer {
       this._camera,
       this.settings
     );
-    this.inputs = webglInputAdapter(this);
+    this.inputs = webglInputHandler(this);
     this.gizmos = new Gizmos(this, this._camera);
     this.materials.applySettings(this.settings);
     this.environment = new Environment(this.camera, this.renderer, this.materials, this.settings);
     this.selection = new Selection(this.materials);
     this.raycaster = new Raycaster2(
-      this.viewport,
       this._camera,
       scene,
       this.renderer
@@ -57484,7 +57420,6 @@ const index$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   },
   HitTestResult: RaycastResult,
   IProgressLogs: distExports$2.IProgressLogs,
-  InputAction,
   InsertableMesh,
   Object3D: Object3D2,
   Scene: Scene2,
@@ -61015,7 +60950,7 @@ class VimCollection {
 const defaultRenderSettings = {
   ...defaultSceneSettings,
   lockIblRotation: true,
-  ghostColor: new RGBA(1, 1, 1, 1 / 255)
+  ghostColor: new RGBA(14 / 255, 14 / 255, 14 / 255, 1 / 255)
 };
 class Renderer2 {
   /**
@@ -61366,16 +61301,13 @@ function createAdapter(viewer) {
       viewer.rpc.RPCSetMoveSpeed(10);
     },
     orbitCamera: (value) => {
-      console.log("orbitCamera");
     },
     rotateCamera: (value) => {
-      console.log("rotateCamera");
     },
     panCamera: (value) => {
-      console.log("panCamera");
     },
     toggleOrthographic: () => {
-      console.log("toggleOrthographic");
+      console.log("toggleOrthographic. Not supported yet");
     },
     resetCamera: () => {
       viewer.camera.restoreSavedPosition();
@@ -61387,9 +61319,7 @@ function createAdapter(viewer) {
       frameContext(viewer);
     },
     selectAtPointer: async (pos, add) => {
-      console.log("selectAtPointer", pos, add);
       const hit = await viewer.selection.hitTest(pos);
-      console.log("hit", hit);
       if (!hit) {
         viewer.selection.clear();
         return;
@@ -61412,7 +61342,6 @@ function createAdapter(viewer) {
       viewer.rpc.RPCMouseScrollEvent(value >= 1 ? 1 : -1);
     },
     moveCamera: (value) => {
-      console.log("moveCamera");
     },
     keyDown: (code) => {
       const key = CODE_TO_KEYCODE[code];
@@ -66437,6 +66366,55 @@ function hidden({ height, width, fill: fill2, className = "" }) {
     }
   );
 }
+function frameScene({ height, width, fill: fill2, className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      className,
+      height,
+      width,
+      viewBox: "0 0 256 256",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fill: fill2,
+            d: "M236,12H20C9,12,0,21,0,32V224c0,11,9,20,20,20H236c11,0,20-9,20-20V32c0-11-9-20-20-20Zm-4,200c0,4.418-3.582,8-8,8H32c-4.418,0-8-3.582-8-8V44c0-4.418,3.582-8,8-8H224c4.418,0,8,3.582,8,8V212Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fill: fill2,
+            d: "M210,204h-42c-6.627,0-12-5.373-12-12h0c0-6.627,5.373-12,12-12h24s0-24,0-24c0-6.627,5.373-12,12-12h0\r\n           c6.627,0,12,5.373,12,12v42c0,3.314-2.686,6-6,6Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fill: fill2,
+            d: "M40,198v-42c0-6.627,5.373-12,12-12h0c6.627,0,12,5.373,12,12v24s24,0,24,0\r\n           c6.627,0,12,5.373,12,12h0c0,6.627-5.373,12-12,12H46c-3.314,0-6-2.686-6-6Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fill: fill2,
+            d: "M46,52h42c6.627,0,12,5.373,12,12h0c0,6.627-5.373,12-12,12h-24s0,24,0,24\r\n           c0,6.627-5.373,12-12,12h0c-6.627,0-12-5.373-12-12V58c0-3.314,2.686-6,6-6Z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fill: fill2,
+            d: "M216,58v42c0,6.627-5.373,12-12,12h0c-6.627,0-12-5.373-12-12v-24s-24,0-24,0\r\n           c-6.627,0-12-5.373-12-12h0c0-6.627,5.373-12,12-12h42c3.314,0,6,2.686,6,6Z"
+          }
+        )
+      ]
+    }
+  );
+}
 function autoCamera({ height, width, fill: fill2 = "", className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
@@ -66985,6 +66963,7 @@ const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   close,
   collapse,
   frameRect,
+  frameScene,
   frameSelection,
   fullArrowLeft,
   fullsScreen,
@@ -67030,7 +67009,7 @@ function anyUiAxesButton(settings2) {
   return settings2.ui.orthographic || settings2.ui.resetCamera || settings2.ui.enableGhost;
 }
 function anyUiCursorButton(settings2) {
-  return isTrue(settings2.ui.orbit) || isTrue(settings2.ui.lookAround) || isTrue(settings2.ui.pan) || isTrue(settings2.ui.zoom) || isTrue(settings2.ui.zoomWindow) || isTrue(settings2.ui.zoomToFit);
+  return isTrue(settings2.ui.orbit) || isTrue(settings2.ui.lookAround) || isTrue(settings2.ui.pan) || isTrue(settings2.ui.zoom) || isTrue(settings2.ui.zoomWindow);
 }
 function anyUiSettingButton(settings2) {
   return isTrue(settings2.ui.projectInspector) || isTrue(settings2.ui.settings) || isTrue(settings2.ui.help) || isTrue(settings2.ui.maximise);
@@ -67068,7 +67047,10 @@ const defaultSettings = {
     pan: true,
     zoom: true,
     zoomWindow: true,
-    zoomToFit: true,
+    // Control bar - camera
+    autoCamera: true,
+    frameScene: true,
+    frameSelection: true,
     // Control bar - tools
     sectioningMode: true,
     measuringMode: true,
@@ -67227,7 +67209,10 @@ const ids = {
   sectionMeasure: "controlBar.sectionMeasure",
   sectionSectionBox: "controlBar.sectionSectionBox",
   // Camera buttons
+  buttonCameraFrameSelection: "controlBar.camera.frameSelection",
+  buttonCameraFrameScene: "controlBar.camera.frameScene",
   buttonCameraAuto: "controlBar.camera.auto",
+  // Camera Control buttons
   buttonCameraOrbit: "controlBar.camera.orbit",
   buttonCameraLook: "controlBarcamera.look",
   buttonCameraPan: "controlBar.camera.pan",
@@ -67240,16 +67225,15 @@ const ids = {
   buttonMaximize: "controlBar.maximize",
   // Action Buttons
   buttonToggleIsolation: "controlBar.action.toggleIsolation",
-  buttonZoomToFit: "controlBar.action.zoomToFit",
   // Tools buttons
   buttonSectionBox: "controlBar.sectionBox",
   buttonMeasure: "controlBar.measure",
   // Section box buttons
   buttonSectionBoxEnable: "controlBar.sectionBox.enable",
   buttonSectionBoxVisible: "controlBar.sectionBox.visible",
-  buttonSectionBoxShrinkToSelection: "controlBar.sectionBox.shrinkToSelection",
+  buttonSectionBoxToSelection: "controlBar.sectionBox.sectionSelection",
+  buttonSectionBoxToScene: "controlBar.sectionBox.sectionScene",
   buttonSectionBoxAuto: "controlBar.sectionBox.auto",
-  buttonSectionBoxReset: "controlBar.sectionBox.reset",
   buttonSectionBoxSettings: "controlBar.sectionBox.settings"
 };
 function ControlBar(props) {
@@ -67482,7 +67466,7 @@ function controlBarSectionBox(section, hasSelection) {
         icon: sectionBox
       },
       {
-        id: ids.buttonSectionBoxShrinkToSelection,
+        id: ids.buttonSectionBoxToSelection,
         tip: "Fit Section",
         enabled: () => section.enable.get(),
         isOn: () => hasSelection,
@@ -67491,11 +67475,11 @@ function controlBarSectionBox(section, hasSelection) {
         icon: sectionBoxShrink
       },
       {
-        id: ids.buttonSectionBoxReset,
+        id: ids.buttonSectionBoxToScene,
         tip: "Reset Section",
         enabled: () => section.enable.get(),
         style: (on) => buttonDefaultStyle(on),
-        action: () => section.sectionReset.call(),
+        action: () => section.sectionScene.call(),
         icon: sectionBoxReset
       },
       {
@@ -67591,15 +67575,6 @@ function controlBarActions(camera2, settings2, isolation, measure$1) {
     enable: () => true,
     style: sectionDefaultStyle,
     buttons: [
-      {
-        id: ids.buttonZoomToFit,
-        enabled: () => isTrue(settings2.ui.zoomToFit),
-        tip: "Frame Camera",
-        action: () => camera2.frameSelection.call(),
-        icon: frameSelection,
-        isOn: () => false,
-        style: buttonDefaultStyle
-      },
       {
         id: ids.buttonToggleIsolation,
         enabled: () => isTrue(settings2.ui.toggleIsolation),
@@ -67675,6 +67650,24 @@ function controlBarCamera(camera2) {
         action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
         icon: autoCamera,
         style: buttonDefaultStyle
+      },
+      {
+        id: ids.buttonCameraFrameSelection,
+        // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+        tip: "Frame Selection",
+        action: () => camera2.frameSelection.call(),
+        icon: frameSelection,
+        isOn: () => false,
+        style: buttonDefaultStyle
+      },
+      {
+        id: ids.buttonCameraFrameScene,
+        // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+        tip: "Frame All",
+        action: () => camera2.frameScene.call(),
+        icon: frameScene,
+        isOn: () => false,
+        style: buttonDefaultStyle
       }
     ]
   };
@@ -74094,9 +74087,9 @@ function MenuSettings(props) {
             (settings2, value) => settings2.ui.zoomWindow = value
           ),
           settingsToggle(
-            "Show Zoom To Fit Button",
-            (settings2) => settings2.ui.zoomToFit,
-            (settings2, value) => settings2.ui.zoomToFit = value
+            "Show Zoom Frame Selection Button",
+            (settings2) => settings2.ui.frameSelection,
+            (settings2, value) => settings2.ui.frameSelection = value
           ),
           settingsSubtitle("Control Bar - Tools"),
           settingsToggle(
@@ -75296,26 +75289,50 @@ function useStateRef(initialValue) {
     event.current.dispatch(finalValue);
   };
   return {
+    /**
+     * Returns the current state value.
+     */
     get() {
       return ref.current;
     },
     set: set3,
+    /**
+     * Confirms the current state by applying the confirm function and updating the state.
+     */
     confirm() {
       set3(confirm.current(ref.current));
     },
+    /**
+     * Registers a callback to be invoked when the state changes.
+     * @param on - The callback function that receives the new state value.
+     */
     useOnChange(on) {
       useEffect(() => {
         return event.current.subscribe(on);
       }, []);
     },
+    /**
+     * Memoizes a value based on the current state and additional dependencies.
+     * @param on - A function that computes a value based on the current state.
+     * @param deps - Optional additional dependencies.
+     * @returns The memoized value.
+     */
     useMemo(on, deps) {
       return useMemo(() => on(value), [...deps || [], value]);
     },
+    /**
+     * Sets a validation function to process any new state value before updating.
+     * @param on - A function that validates (and optionally transforms) the new state value.
+     */
     useValidate(on) {
       useEffect(() => {
         validate.current = on;
       }, []);
     },
+    /**
+     * Sets a confirmation function to process the state value during confirmation.
+     * @param on - A function that confirms (and optionally transforms) the current state value.
+     */
     useConfirm(on) {
       useEffect(() => {
         confirm.current = on;
@@ -75332,8 +75349,22 @@ function useActionRef(action) {
     get() {
       return ref.current;
     },
-    set(func) {
-      ref.current = func;
+    set(fn) {
+      ref.current = fn;
+    },
+    prepend(fn) {
+      const oldFn = ref.current;
+      ref.current = () => {
+        fn();
+        oldFn();
+      };
+    },
+    append(fn) {
+      const oldFn = ref.current;
+      ref.current = () => {
+        oldFn();
+        fn();
+      };
     }
   };
 }
@@ -75343,30 +75374,83 @@ function useArgActionRef(action) {
     call(arg) {
       ref == null ? void 0 : ref.current(arg);
     },
-    set(func) {
-      ref.current = func;
+    get() {
+      return ref.current;
+    },
+    set(fn) {
+      ref.current = fn;
+    },
+    prepend(fn) {
+      const oldFn = ref.current;
+      ref.current = (arg) => {
+        fn(arg);
+        oldFn(arg);
+      };
+    },
+    append(fn) {
+      const oldFn = ref.current;
+      ref.current = (arg) => {
+        oldFn(arg);
+        fn(arg);
+      };
     }
   };
 }
-function useFuncRef(func) {
-  const ref = useRef(func);
+function useFuncRef(fn) {
+  const ref = useRef(fn);
   return {
     call() {
       return ref == null ? void 0 : ref.current();
     },
-    set(func2) {
-      ref.current = func2;
+    get() {
+      return ref.current;
+    },
+    set(fn2) {
+      ref.current = fn2;
+    },
+    prepend(fn2) {
+      const oldFn = ref.current;
+      ref.current = () => {
+        fn2();
+        return oldFn();
+      };
+    },
+    append(fn2) {
+      const oldFn = ref.current;
+      ref.current = () => {
+        const result = oldFn();
+        fn2();
+        return result;
+      };
     }
   };
 }
-function useAsyncFuncRef(func) {
-  const ref = useRef(func);
+function useAsyncFuncRef(fn) {
+  const ref = useRef(fn);
   return {
     async call() {
       return ref == null ? void 0 : ref.current();
     },
-    set(func2) {
-      ref.current = func2;
+    get() {
+      return ref.current;
+    },
+    set(fn2) {
+      ref.current = fn2;
+    },
+    prepend(fn2) {
+      const oldFn = ref.current;
+      ref.current = async () => {
+        await fn2();
+        return await oldFn();
+      };
+    },
+    append(fn2) {
+      const oldFn = ref.current;
+      ref.current = async () => {
+        const result = await oldFn();
+        await fn2();
+        return result;
+      };
     }
   };
 }
@@ -75433,9 +75517,10 @@ function useSectionBox(adapter) {
     sideOffset,
     bottomOffset,
     sectionSelection,
-    sectionReset: sectionScene,
+    sectionScene,
     sectionBox: sectionBox2,
     getBox: () => adapter.getBox(),
+    // TODO - Remove these from here, it should be overriden at the component level.
     getSceneBox,
     getSelectionBox
   };
@@ -75477,7 +75562,7 @@ function useWebglSectionBox(viewer) {
   };
   return useSectionBox(vimAdapter);
 }
-function useCamera(adapter) {
+function useCamera(adapter, section) {
   const autoCamera2 = useStateRef(false);
   autoCamera2.useOnChange((v) => {
     if (v) {
@@ -75485,22 +75570,25 @@ function useCamera(adapter) {
     }
   });
   useEffect(() => {
-    adapter.onSelectionChanged.sub(() => {
+    const refresh = () => {
       if (autoCamera2.get()) {
         frameSelection2.call();
       }
-    });
+    };
+    section.sectionSelection.append(refresh);
+    section.sectionScene.append(refresh);
+    adapter.onSelectionChanged.sub(refresh);
   }, []);
   const reset = useActionRef(() => adapter.resetCamera(1));
   const getSelectionBox = useAsyncFuncRef(adapter.getSelectionBox);
   const getSceneBox = useAsyncFuncRef(adapter.getSceneBox);
   const frameSelection2 = useAsyncFuncRef(async () => {
     const box = await getSelectionBox.call() ?? await getSceneBox.call();
-    frame(adapter, box);
+    frame(adapter, section, box);
   });
-  const frameScene = useAsyncFuncRef(async () => {
+  const frameScene2 = useAsyncFuncRef(async () => {
     const box = await getSceneBox.call();
-    frame(adapter, box);
+    frame(adapter, section, box);
   });
   return {
     getSelectionBox,
@@ -75508,17 +75596,18 @@ function useCamera(adapter) {
     autoCamera: autoCamera2,
     reset,
     frameSelection: frameSelection2,
-    frameScene
+    frameScene: frameScene2
   };
 }
-function frame(adapter, box) {
-  if (adapter.isSectionBoxEnabled()) {
-    const section = adapter.getSectionBox();
+function frame(adapter, section, box) {
+  if (!box) return;
+  if (section.enable.get()) {
+    const sectionBox2 = section.getBox();
     if (section) {
-      box.intersect(section);
+      box.intersect(sectionBox2);
     }
     if (box.isEmpty()) {
-      box.copy(section);
+      box.copy(sectionBox2);
     }
   }
   adapter.frameCamera(box, 1);
@@ -75529,10 +75618,8 @@ function useWebglCamera(viewer, section) {
     frameCamera: (box, duration) => viewer.camera.lerp(duration).frame(box),
     resetCamera: (duration) => viewer.camera.lerp(duration).reset(),
     getSelectionBox: () => Promise.resolve(viewer.selection.getBoundingBox()),
-    getSectionBox: () => viewer.renderer.section.box,
-    getSceneBox: () => Promise.resolve(viewer.renderer.getBoundingBox()),
-    isSectionBoxEnabled: () => section.enable.get()
-  });
+    getSceneBox: () => Promise.resolve(viewer.renderer.getBoundingBox())
+  }, section);
 }
 function createWebglComponent(container, componentSettings = {}, viewerSettings = {}) {
   const promise2 = new DeferredPromise();
@@ -76035,39 +76122,18 @@ function useUltraSectionBox(viewer) {
 function useUltraControlBar(viewer, section, camera2, customization) {
   const sectionSectionBox = controlBarSectionBox(section, viewer.selection.count > 0);
   const sectionCamera = controlBarCamera(camera2);
-  const frame2 = frameSection(camera2);
-  let bar = [sectionCamera, frame2, sectionSectionBox];
+  let bar = [sectionCamera, sectionSectionBox];
   bar = (customization == null ? void 0 : customization(bar)) ?? bar;
   return bar;
 }
-function frameSection(camera2) {
-  return {
-    id: ids.sectionActions,
-    enable: () => true,
-    style: sectionDefaultStyle,
-    buttons: [
-      {
-        id: ids.buttonZoomToFit,
-        enabled: () => true,
-        tip: "Frame Camera",
-        action: () => camera2.frameSelection.call(),
-        icon: frameSelection,
-        isOn: () => false,
-        style: buttonDefaultStyle
-      }
-    ]
-  };
-}
 function useUltraCamera(viewer, section) {
   return useCamera({
     onSelectionChanged: viewer.selection.onValueChanged,
     frameCamera: (box, duration) => void viewer.camera.frameBox(box, duration),
     resetCamera: (duration) => viewer.camera.restoreSavedPosition(duration),
     getSelectionBox: () => viewer.selection.getBoundingBox(),
-    getSceneBox: () => viewer.renderer.getBoundingBox(),
-    getSectionBox: () => viewer.sectionBox.getBox(),
-    isSectionBoxEnabled: () => section.enable.get()
-  });
+    getSceneBox: () => viewer.renderer.getBoundingBox()
+  }, section);
 }
 function createUltraComponent(container) {
   const promise2 = new DeferredPromise();