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

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];
@@ -67495,7 +67424,7 @@ function controlBarSectionBox(section, hasSelection) {
         tip: "Reset Section",
         enabled: () => section.enable.get(),
         style: (on) => buttonDefaultStyle(on),
-        action: () => section.sectionReset.call(),
+        action: () => section.sectionScene.call(),
         icon: sectionBoxReset
       },
       {
@@ -75296,26 +75225,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 +75285,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 +75310,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;
+      };
     }
   };
 }
@@ -75379,6 +75399,8 @@ function useSectionBox(adapter) {
   const sideOffset = useStateRef("1");
   const bottomOffset = useStateRef("1");
   const boxRef = useRef(adapter.getBox());
+  const getSelectionBox = useAsyncFuncRef(adapter.getSelectionBox);
+  const getSceneBox = useAsyncFuncRef(adapter.getSceneBox);
   useEffect(() => {
     adapter.setVisible(false);
     adapter.setClip(false);
@@ -75393,7 +75415,7 @@ function useSectionBox(adapter) {
     if (v && auto.get()) {
       sectionSelection.call();
     } else {
-      sectionReset.call();
+      sectionScene.call();
     }
   });
   visible2.useValidate((v) => enable.get() && v);
@@ -75415,15 +75437,11 @@ function useSectionBox(adapter) {
     adapter.setBox(newBox);
   });
   const sectionSelection = useFuncRef(async () => {
-    try {
-      const box = await adapter.getSelectionBox() ?? await adapter.getRendererBox();
-      sectionBox2.call(box);
-    } catch (e) {
-      console.error(e);
-    }
+    const box = await getSelectionBox.call() ?? await getSceneBox.call();
+    sectionBox2.call(box);
   });
-  const sectionReset = useFuncRef(async () => {
-    const box = await adapter.getRendererBox();
+  const sectionScene = useFuncRef(async () => {
+    const box = await getSceneBox.call();
     sectionBox2.call(box);
   });
   return {
@@ -75435,9 +75453,12 @@ function useSectionBox(adapter) {
     sideOffset,
     bottomOffset,
     sectionSelection,
-    sectionReset,
+    sectionScene,
     sectionBox: sectionBox2,
-    getBox: () => adapter.getBox()
+    getBox: () => adapter.getBox(),
+    // TODO - Remove these from here, it should be overriden at the component level.
+    getSceneBox,
+    getSelectionBox
   };
 }
 const sanitize = (value, strict) => {
@@ -75472,12 +75493,12 @@ function useWebglSectionBox(viewer) {
     getBox: () => viewer.gizmos.sectionBox.getBox(),
     setBox: (box) => viewer.gizmos.sectionBox.setBox(box),
     getSelectionBox: () => Promise.resolve(viewer.selection.getBoundingBox()),
-    getRendererBox: () => Promise.resolve(viewer.renderer.getBoundingBox()),
+    getSceneBox: () => Promise.resolve(viewer.renderer.getBoundingBox()),
     onSelectionChanged: viewer.selection.onValueChanged
   };
   return useSectionBox(vimAdapter);
 }
-function useCamera(adapter) {
+function useCamera(adapter, section) {
   const autoCamera2 = useStateRef(false);
   autoCamera2.useOnChange((v) => {
     if (v) {
@@ -75485,22 +75506,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 box = await getSceneBox.call();
-    frame(adapter, box);
+    frame(adapter, section, box);
   });
   return {
     getSelectionBox,
@@ -75511,14 +75535,15 @@ function useCamera(adapter) {
     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);
@@ -75529,10 +75554,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();
@@ -76026,9 +76049,9 @@ function useUltraSectionBox(viewer) {
     },
     getBox: () => viewer.sectionBox.getBox(),
     setBox: (box) => viewer.sectionBox.fitBox(box),
+    onSelectionChanged: viewer.selection.onValueChanged,
     getSelectionBox: () => viewer.selection.getBoundingBox(),
-    getRendererBox: () => viewer.renderer.getBoundingBox(),
-    onSelectionChanged: viewer.selection.onValueChanged
+    getSceneBox: () => viewer.renderer.getBoundingBox()
   };
   return useSectionBox(ultraAdapter);
 }
@@ -76064,10 +76087,8 @@ function useUltraCamera(viewer, section) {
     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();