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

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];
@@ -67511,7 +67440,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           tip: "Reset Section",
           enabled: () => section.enable.get(),
           style: (on) => buttonDefaultStyle(on),
-          action: () => section.sectionReset.call(),
+          action: () => section.sectionScene.call(),
           icon: sectionBoxReset
         },
         {
@@ -75312,26 +75241,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 +75301,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 +75326,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 +75469,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 +75514,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 +75522,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 box = await getSceneBox.call();
-      frame(adapter, box);
+      frame(adapter, section, box);
     });
     return {
       getSelectionBox,
@@ -75527,14 +75551,15 @@ Averrage Date/Second ${avgDataRatePS} kb
       frameScene
     };
   }
-  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 +75570,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();
@@ -76080,10 +76103,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       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();