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

package/dist/vim-web.iife.js

@@ -50680,13 +50680,11 @@ void main() {
       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;
     }
@@ -51670,24 +51668,24 @@ void main() {
       __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 i2 = 0; i2 < intersections.length; i2++) {
         const obj = this.getVimObjectFromHit(intersections[i2]);
         if (obj == null ? void 0 : obj.visible) return [intersections[i2], obj];
       }
       return [];
     }
-    GetFirstMarkerHit(intersections) {
+    getFirstMarkerHit(intersections) {
       for (let i2 = 0; i2 < intersections.length; i2++) {
         const data2 = intersections[i2].object.userData.vim;
         if (data2 instanceof GizmoMarkers) {
@@ -51704,7 +51702,7 @@ void main() {
       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;
     }
@@ -51726,28 +51724,27 @@ void main() {
     }
   }
   class Raycaster {
-    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);
@@ -51757,35 +51754,46 @@ void main() {
       return this._renderer.section.active ? hits.filter((i2) => this._renderer.section.box.containsPoint(i2.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();
@@ -51793,37 +51801,6 @@ void main() {
       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();
@@ -52921,7 +52898,7 @@ void main() {
      */
     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) => {
@@ -53898,7 +53875,7 @@ void main() {
       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":
@@ -54023,10 +54000,8 @@ void main() {
       __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
       // -------------------------------------------------------------------------
@@ -54057,78 +54032,50 @@ void main() {
      * 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}.
@@ -54136,19 +54083,19 @@ void main() {
      * 
      * @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());
       }
     }
     /**
@@ -54156,39 +54103,29 @@ void main() {
      * 
      * @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());
     }
     /**
@@ -54197,10 +54134,10 @@ void main() {
      * 
      * @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);
@@ -57081,7 +57018,7 @@ void main() {
     rot.multiplyScalar(180 * speed);
     return rot;
   }
-  function webglInputAdapter(viewer) {
+  function webglInputHandler(viewer) {
     return new CoreInputHandler(
       viewer.viewport.canvas,
       createAdapter$1(viewer),
@@ -57121,7 +57058,7 @@ void main() {
         }
       },
       selectAtPointer: (pos, add) => {
-        const pointer = viewer.raycaster.raycast2(pos);
+        const pointer = viewer.raycaster.raycastFromScreen(pos);
         if (add) {
           viewer.selection.add(pointer.object);
         } else {
@@ -57129,7 +57066,7 @@ void main() {
         }
       },
       frameAtPointer: (pos) => {
-        const pointer = viewer.raycaster.raycast2(pos);
+        const pointer = viewer.raycaster.raycastFromScreen(pos);
         viewer.camera.lerp(0.75).frame(pointer.object);
       },
       zoom: (value) => {
@@ -57208,13 +57145,12 @@ void main() {
         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 Raycaster(
-        this.viewport,
         this._camera,
         scene,
         this.renderer
@@ -57500,7 +57436,6 @@ void main() {
     },
     HitTestResult: RaycastResult,
     IProgressLogs: distExports$2.IProgressLogs,
-    InputAction,
     InsertableMesh,
     Object3D,
     Scene,
@@ -61031,7 +60966,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   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 Renderer {
     /**
@@ -61382,16 +61317,13 @@ Averrage Date/Second ${avgDataRatePS} kb
         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();
@@ -61403,9 +61335,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         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;
@@ -61428,7 +61358,6 @@ Averrage Date/Second ${avgDataRatePS} kb
         viewer.rpc.RPCMouseScrollEvent(value >= 1 ? 1 : -1);
       },
       moveCamera: (value) => {
-        console.log("moveCamera");
       },
       keyDown: (code) => {
         const key = CODE_TO_KEYCODE[code];
@@ -66453,6 +66382,55 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     );
   }
+  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" }),
@@ -67001,6 +66979,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     close,
     collapse,
     frameRect,
+    frameScene,
     frameSelection,
     fullArrowLeft,
     fullsScreen,
@@ -67046,7 +67025,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     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);
@@ -67084,7 +67063,10 @@ Averrage Date/Second ${avgDataRatePS} kb
       pan: true,
       zoom: true,
       zoomWindow: true,
-      zoomToFit: true,
+      // Control bar - camera
+      autoCamera: true,
+      frameScene: true,
+      frameSelection: true,
       // Control bar - tools
       sectioningMode: true,
       measuringMode: true,
@@ -67243,7 +67225,10 @@ Averrage Date/Second ${avgDataRatePS} kb
     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",
@@ -67256,16 +67241,15 @@ Averrage Date/Second ${avgDataRatePS} kb
     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) {
@@ -67498,7 +67482,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           icon: sectionBox
         },
         {
-          id: ids.buttonSectionBoxShrinkToSelection,
+          id: ids.buttonSectionBoxToSelection,
           tip: "Fit Section",
           enabled: () => section.enable.get(),
           isOn: () => hasSelection,
@@ -67507,11 +67491,11 @@ Averrage Date/Second ${avgDataRatePS} kb
           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
         },
         {
@@ -67607,15 +67591,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       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),
@@ -67691,6 +67666,24 @@ Averrage Date/Second ${avgDataRatePS} kb
           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
         }
       ]
     };
@@ -74110,9 +74103,9 @@ Averrage Date/Second ${avgDataRatePS} kb
               (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(
@@ -75312,26 +75305,50 @@ Averrage Date/Second ${avgDataRatePS} kb
       event.current.dispatch(finalValue);
     };
     return {
+      /**
+       * Returns the current state value.
+       */
       get() {
         return ref.current;
       },
       set: set2,
+      /**
+       * Confirms the current state by applying the confirm function and updating the state.
+       */
       confirm() {
         set2(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) {
         React2.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 React2.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) {
         React2.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) {
         React2.useEffect(() => {
           confirm.current = on;
@@ -75348,8 +75365,22 @@ Averrage Date/Second ${avgDataRatePS} kb
       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();
+        };
       }
     };
   }
@@ -75359,30 +75390,83 @@ Averrage Date/Second ${avgDataRatePS} kb
       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 = React2.useRef(func);
+  function useFuncRef(fn) {
+    const ref = React2.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 = React2.useRef(func);
+  function useAsyncFuncRef(fn) {
+    const ref = React2.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;
+        };
       }
     };
   }
@@ -75449,9 +75533,10 @@ Averrage Date/Second ${avgDataRatePS} kb
       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
     };
@@ -75493,7 +75578,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     };
     return useSectionBox(vimAdapter);
   }
-  function useCamera(adapter) {
+  function useCamera(adapter, section) {
     const autoCamera2 = useStateRef(false);
     autoCamera2.useOnChange((v) => {
       if (v) {
@@ -75501,22 +75586,25 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     });
     React2.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,
@@ -75524,17 +75612,18 @@ Averrage Date/Second ${avgDataRatePS} kb
       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);
@@ -75545,10 +75634,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       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();
@@ -76051,39 +76138,18 @@ Averrage Date/Second ${avgDataRatePS} kb
   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();