vim-web 0.3.44-dev.16 → 0.3.44-dev.18

package/dist/vim-web.iife.js

@@ -45835,7 +45835,7 @@ void main() {
     }
   }
   class ElementMapping {
-    constructor(instances, instanceToElement, elementIds2, instanceMeshes) {
+    constructor(instances, instanceToElement, elementIds, instanceMeshes) {
       __publicField(this, "_instanceToElement");
       __publicField(this, "_instanceMeshes");
       __publicField(this, "_elementToInstances");
@@ -45848,17 +45848,17 @@ void main() {
       this._elementToInstances = ElementMapping.invertMap(
         this._instanceToElement
       );
-      this._elementIds = elementIds2;
-      this._elementIdToElements = ElementMapping.invertArray(elementIds2);
+      this._elementIds = elementIds;
+      this._elementIdToElements = ElementMapping.invertArray(elementIds);
       this._instanceMeshes = instanceMeshes;
     }
     static async fromG3d(g3d2, bim) {
       const instanceToElement = await bim.node.getAllElementIndex();
-      const elementIds2 = await bim.element.getAllId();
+      const elementIds = await bim.element.getAllId();
       return new ElementMapping(
         Array.from(g3d2.instanceNodes),
         instanceToElement,
-        elementIds2,
+        elementIds,
         g3d2.instanceMeshes
       );
     }
@@ -60812,8 +60812,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (nodes === "all") {
         this._rpc.RPCClearMaterialOverrides(this._handle);
       } else {
-        const ids = new Array(nodes.length).fill(MaterialHandles.Invalid);
-        this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids);
+        const ids2 = new Array(nodes.length).fill(MaterialHandles.Invalid);
+        this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids2);
       }
     }
     updateMap(nodes, state) {
@@ -66817,6 +66817,25 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     );
   }
+  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" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 242.35934,69.720521 V 192.19034 c 0,9.46501 -7.97359,15.37204 -14.35248,10.67406 l -39.68884,-29.41993 v 8.38267 c 0,25.1595 -15.90243,45.64407 -35.51391,45.64407 H 48.520099 C 28.90861,227.51727 13.006195,206.98664 13.006195,181.80411 V 80.187338 c 0,-25.159506 15.902415,-45.644066 35.513904,-45.644066 H 152.55325 c 19.57566,0 35.51392,20.4385 35.51392,45.644066 v 8.382665 L 227.756,59.150074 c 6.33409,-4.801607 14.60334,1.162981 14.60334,10.570447 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: "white",
+          d: "m 134.24221,179.28573 -6.38,-16.771 H 73.539201 l -6.38,17.135 c -2.492,6.684 -4.618,11.211 -6.38,13.581 -1.763,2.309 -4.649,3.464 -8.659,3.464 -3.403,0 -6.411,-1.246 -9.024,-3.737 -2.613,-2.492 -3.919,-5.317 -3.919,-8.477 0,-1.823 0.304,-3.706 0.911,-5.651 0.608,-1.944 1.611,-4.648 3.008,-8.112 l 34.18,-86.771005 c 0.972,-2.491 2.127,-5.469 3.463,-8.932 1.398,-3.525 2.856,-6.441 4.375,-8.75 1.58,-2.309 3.616,-4.163 6.107,-5.56 2.552005,-1.458 5.682005,-2.188 9.388009,-2.188 3.768,0 6.897,0.73 9.388,2.188 2.552,1.397 4.588,3.22 6.107,5.469 1.58,2.248 2.886,4.678 3.919,7.291 1.094,2.552 2.461,5.986 4.102,10.3 l 34.909,86.224005 c 2.734,6.562 4.101,11.332 4.101,14.31 0,3.099 -1.306,5.955 -3.919,8.568 -2.552,2.552 -5.651,3.828 -9.297,3.828 -2.126,0 -3.949,-0.395 -5.468,-1.185 -1.52,-0.729 -2.796,-1.732 -3.829,-3.008 -1.033,-1.337 -2.157,-3.342 -3.372,-6.016 -1.155,-2.734 -2.157,-5.134 -3.008,-7.2 z m -53.594009,-37.097 h 39.922009 l -20.143,-55.143005 z"
+        }
+      )
+    ] });
+  }
   function orbit({ 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" }),
@@ -67340,6 +67359,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     arrowLeft,
+    autoCamera,
     camera,
     checkmark,
     close,
@@ -67486,7 +67506,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       );
     };
     const onHomeBtn = () => {
-      props.camera.reset();
+      props.camera.reset.call();
     };
     const btnStyle2 = "vim-axes-button vc-flex vc-items-center vc-justify-center vc-text-gray-medium vc-transition-all hover:vc-text-primary-royal";
     const btnIsolation = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -67577,15 +67597,17 @@ Averrage Date/Second ${avgDataRatePS} kb
     if (section.enable !== void 0 && !section.enable()) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `vim-control-bar-section ${section.style ?? sectionDefaultStyle}`, children: section.buttons.map((b) => createButton(b)) }, section.id);
   }
-  const elementIds = {
+  const ids = {
     // Sections
     sectionCamera: "controlBar.sectionCamera",
+    sectionInputs: "controlBar.sectionInputs",
     sectionActions: "controlBar.sectionActions",
     sectionTools: "controlBar.sectionTools",
     sectionSettings: "controlBar.sectionSettings",
     sectionMeasure: "controlBar.sectionMeasure",
     sectionSectionBox: "controlBar.sectionSectionBox",
     // Camera buttons
+    buttonCameraAuto: "controlBar.camera.auto",
     buttonCameraOrbit: "controlBar.camera.orbit",
     buttonCameraLook: "controlBarcamera.look",
     buttonCameraPan: "controlBar.camera.pan",
@@ -67607,7 +67629,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     buttonSectionBoxVisible: "controlBar.sectionBox.visible",
     buttonSectionBoxShrinkToSelection: "controlBar.sectionBox.shrinkToSelection",
     buttonSectionBoxAuto: "controlBar.sectionBox.auto",
-    buttonSectionBoxClip: "controlBar.sectionBox.clip",
+    buttonSectionBoxReset: "controlBar.sectionBox.reset",
     buttonSectionBoxSettings: "controlBar.sectionBox.settings"
   };
   function ControlBar(props) {
@@ -67639,7 +67661,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     buttonExpandStyle,
     createButton,
     createSection: createSection$1,
-    elementIds,
+    ids,
     sectionBlueStyle,
     sectionDefaultStyle,
     sectionNoPadStyle
@@ -67827,12 +67849,12 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function controlBarSectionBox(section, hasSelection) {
     return {
-      id: elementIds.sectionSectionBox,
+      id: ids.sectionSectionBox,
       style: section.enable.get() ? sectionNoPadStyle : sectionDefaultStyle,
       //enable: () => section.getEnable(),
       buttons: [
         {
-          id: elementIds.buttonSectionBoxEnable,
+          id: ids.buttonSectionBoxEnable,
           tip: "Enable Section Box",
           isOn: () => section.enable.get(),
           style: (on) => buttonExpandStyle(on),
@@ -67840,7 +67862,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           icon: sectionBox
         },
         {
-          id: elementIds.buttonSectionBoxShrinkToSelection,
+          id: ids.buttonSectionBoxShrinkToSelection,
           tip: "Fit Section",
           enabled: () => section.enable.get(),
           isOn: () => hasSelection,
@@ -67849,7 +67871,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           icon: sectionBoxShrink
         },
         {
-          id: elementIds.buttonSectionBoxClip,
+          id: ids.buttonSectionBoxReset,
           tip: "Reset Section",
           enabled: () => section.enable.get(),
           style: (on) => buttonDefaultStyle(on),
@@ -67857,7 +67879,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           icon: sectionBoxReset
         },
         {
-          id: elementIds.buttonSectionBoxVisible,
+          id: ids.buttonSectionBoxVisible,
           tip: "Show Section Box",
           enabled: () => section.enable.get(),
           isOn: () => section.visible.get(),
@@ -67866,7 +67888,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           icon: visible
         },
         {
-          id: elementIds.buttonSectionBoxAuto,
+          id: ids.buttonSectionBoxAuto,
           tip: "Auto Section",
           enabled: () => section.enable.get(),
           isOn: () => section.auto.get(),
@@ -67875,7 +67897,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           icon: sectionBoxAuto
         },
         {
-          id: elementIds.buttonSectionBoxSettings,
+          id: ids.buttonSectionBoxSettings,
           tip: "Section Settings",
           enabled: () => section.enable.get(),
           isOn: () => section.showOffsetPanel.get(),
@@ -67889,12 +67911,12 @@ Averrage Date/Second ${avgDataRatePS} kb
   function controlBarPointer(viewer, camera2, settings2, section) {
     const pointer = getPointerState(viewer);
     return {
-      id: elementIds.sectionCamera,
+      id: ids.sectionInputs,
       enable: () => anyUiCursorButton(settings2),
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonCameraOrbit,
+          id: ids.buttonCameraOrbit,
           enabled: () => isTrue(settings2.ui.orbit),
           tip: "Orbit",
           action: () => pointer.onButton("orbit"),
@@ -67903,7 +67925,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraLook,
+          id: ids.buttonCameraLook,
           enabled: () => isTrue(settings2.ui.lookAround),
           tip: "Look Around",
           action: () => pointer.onButton("look"),
@@ -67912,7 +67934,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraPan,
+          id: ids.buttonCameraPan,
           enabled: () => isTrue(settings2.ui.pan),
           tip: "Pan",
           action: () => pointer.onButton("pan"),
@@ -67921,7 +67943,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraZoom,
+          id: ids.buttonCameraZoom,
           enabled: () => isTrue(settings2.ui.zoom),
           tip: "Zoom",
           action: () => pointer.onButton("zoom"),
@@ -67930,7 +67952,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraZoomWindow,
+          id: ids.buttonCameraZoomWindow,
           enabled: () => isTrue(settings2.ui.zoomWindow),
           tip: "Zoom Window",
           action: () => {
@@ -67945,21 +67967,21 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function controlBarActions(camera2, settings2, isolation, measure$1) {
     return {
-      id: elementIds.sectionActions,
+      id: ids.sectionActions,
       enable: () => true,
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonZoomToFit,
+          id: ids.buttonZoomToFit,
           enabled: () => isTrue(settings2.ui.zoomToFit),
           tip: "Zoom to Fit",
-          action: () => camera2.frameContext(),
+          action: () => camera2.frameSelection.call(),
           icon: frameSelection,
           isOn: () => false,
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonToggleIsolation,
+          id: ids.buttonToggleIsolation,
           enabled: () => isTrue(settings2.ui.toggleIsolation),
           tip: "Toggle Isolation",
           action: () => isolation.toggle("controlBar"),
@@ -67967,7 +67989,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonMeasure,
+          id: ids.buttonMeasure,
           enabled: () => isTrue(settings2.ui.measuringMode),
           isOn: () => measure$1.active,
           tip: "Measuring Mode",
@@ -67981,12 +68003,12 @@ Averrage Date/Second ${avgDataRatePS} kb
   function controlBarSettings(modal, side, settings$1) {
     const fullScreen = getFullScreenState();
     return {
-      id: elementIds.sectionSettings,
+      id: ids.sectionSettings,
       enable: () => anyUiSettingButton(settings$1),
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonProjectInspector,
+          id: ids.buttonProjectInspector,
           enabled: () => isTrue(settings$1.ui.projectInspector) && (isTrue(settings$1.ui.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
           tip: "Project Inspector",
           action: () => side.toggleContent("bim"),
@@ -67994,7 +68016,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonSettings,
+          id: ids.buttonSettings,
           enabled: () => isTrue(settings$1.ui.settings),
           tip: "Settings",
           action: () => side.toggleContent("settings"),
@@ -68002,7 +68024,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonHelp,
+          id: ids.buttonHelp,
           enabled: () => isTrue(settings$1.ui.help),
           tip: "Help",
           action: () => modal.help(true),
@@ -68010,7 +68032,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonMaximize,
+          id: ids.buttonMaximize,
           enabled: () => isTrue(settings$1.ui.maximise) && settings$1.capacity.canGoFullScreen,
           tip: fullScreen.get() ? "Minimize" : "Fullscreen",
           action: () => fullScreen.toggle(),
@@ -68020,15 +68042,34 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
+  function controlBarCamera(camera2) {
+    return {
+      id: ids.sectionCamera,
+      enable: () => true,
+      style: sectionDefaultStyle,
+      buttons: [
+        {
+          id: ids.buttonCameraAuto,
+          tip: "Auto Camera",
+          isOn: () => camera2.autoCamera.get(),
+          action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
+          icon: autoCamera,
+          style: buttonDefaultStyle
+        }
+      ]
+    };
+  }
   function useControlBar(viewer, camera2, modal, side, isolation, cursor, settings2, section, customization) {
     const measure2 = getMeasureState(viewer, cursor);
     const pointerSection = controlBarPointer(viewer, camera2, settings2);
     const actionSection = controlBarActions(camera2, settings2, isolation, measure2);
     const sectionBoxSection = controlBarSectionBox(section, viewer.selection.count > 0);
     const settingsSection = controlBarSettings(modal, side, settings2);
+    const cameraSection = controlBarCamera(camera2);
     let controlBarSections = [
       pointerSection,
       actionSection,
+      cameraSection,
       sectionBoxSection,
       // Optional section
       settingsSection
@@ -72054,11 +72095,11 @@ Averrage Date/Second ${avgDataRatePS} kb
       e.stopPropagation();
     };
     const onCameraResetBtn = (e) => {
-      camera2.reset();
+      camera2.reset.call();
       e.stopPropagation();
     };
     const onCameraFrameBtn = (e) => {
-      camera2.frameContext();
+      camera2.frameSelection.call();
       e.stopPropagation();
     };
     const onSelectionIsolateBtn = (e) => {
@@ -72390,7 +72431,7 @@ Averrage Date/Second ${avgDataRatePS} kb
               createInteractiveElementProps: (item, treeId, actions, renderFlags) => ({
                 onKeyUp: (e) => {
                   if (e.key === "f") {
-                    props.camera.frameContext();
+                    props.camera.frameSelection.call();
                   }
                   if (e.key === "Escape") {
                     props.viewer.selection.clear();
@@ -72433,7 +72474,7 @@ Averrage Date/Second ${avgDataRatePS} kb
             },
             onPrimaryAction: (item, _) => {
               if (doubleClick.isDoubleClick(item.index)) {
-                props.camera.frameSelection();
+                props.camera.frameSelection.call();
               }
             },
             onFocusItem: (item) => {
@@ -74724,7 +74765,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           return true;
         }
         case KEYS.KEY_F: {
-          this._camera.frameContext();
+          this._camera.frameSelection.call();
           return true;
         }
         case KEYS.KEY_I: {
@@ -74918,7 +74959,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (!this._settings.isolation.enable) return;
       this._isolation = objects ?? [];
       this._apply(source);
-      this._camera.frameVisibleObjects();
+      this._camera.frameVisibleObjects.call();
     }
     /**
      * Toggles isolation by using the current selection.
@@ -74933,7 +74974,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (!this._settings.isolation.enable) return;
       this._isolation = [...this._viewer.selection.objects].filter((o) => o.type === "Object3D");
       this._apply(source);
-      this._camera.frameVisibleObjects();
+      this._camera.frameVisibleObjects.call();
       this._viewer.selection.clear();
     }
     /**
@@ -75033,74 +75074,139 @@ Averrage Date/Second ${avgDataRatePS} kb
       return objects;
     }
   }
-  class ComponentCamera {
-    constructor(viewer) {
-      __publicField(this, "_viewer");
-      this._viewer = viewer;
-    }
-    /**
-     * Resets the camera to its initial position.
-     */
-    reset() {
-      this._viewer.camera.lerp(1).reset();
-    }
-    /**
-     * Frames selected elements if there is an active selection; otherwise, frames all visible objects.
-     * @param duration Optional duration of the camera movement animation (default: 1).
-     */
-    frameContext(duration = 1) {
-      if (this._viewer.selection.count > 0) {
-        this.frameSelection(duration);
-      } else {
-        this.frameVisibleObjects(void 0, duration);
+  function useStateRef(initialValue) {
+    const [value, setValue] = React2.useState(initialValue);
+    const ref = React2.useRef(initialValue);
+    const event = React2.useRef(new distExports.SimpleEventDispatcher());
+    const validate = React2.useRef((value2) => value2);
+    const confirm = React2.useRef((value2) => value2);
+    const set2 = (value2) => {
+      const finalValue = validate.current(value2) ?? value2;
+      if (finalValue === void 0) return;
+      if (finalValue === ref.current) return;
+      ref.current = finalValue;
+      setValue(finalValue);
+      event.current.dispatch(finalValue);
+    };
+    return {
+      get() {
+        return ref.current;
+      },
+      set: set2,
+      confirm() {
+        set2(confirm.current(ref.current));
+      },
+      useOnChange(on) {
+        React2.useEffect(() => {
+          return event.current.subscribe(on);
+        }, []);
+      },
+      useMemo(on, deps) {
+        return React2.useMemo(() => on(value), [...deps || [], value]);
+      },
+      useValidate(on) {
+        React2.useEffect(() => {
+          validate.current = on;
+        }, []);
+      },
+      useConfirm(on) {
+        React2.useEffect(() => {
+          confirm.current = on;
+        }, []);
       }
-    }
-    /**
-     * Frames selected elements if there is an active selection; otherwise, does nothing.
-     * @param duration Optional duration of the camera movement animation (default: 1).
-     */
-    frameSelection(duration = 1) {
-      if (this._viewer.selection.count === 0) return;
-      const box = this._viewer.selection.getBoundingBox();
-      if (box && this._viewer.gizmos.sectionBox.box.intersectsBox(box)) {
-        const movement = duration === 0 ? this._viewer.camera.snap() : this._viewer.camera.lerp(duration);
-        movement.frame(box);
+    };
+  }
+  function useActionRef(action) {
+    const ref = React2.useRef(action);
+    return {
+      call() {
+        ref == null ? void 0 : ref.current();
+      },
+      set(func) {
+        ref.current = func;
       }
-    }
-    /**
-    * Frames all visible objects in the scene.
-    * @param source Optional VIM to specify the source of objects to frame.
-    * @param duration Duration of the camera movement animation (default: 1).
-    */
-    frameVisibleObjects(source, duration = 1) {
-      const movement = duration === 0 ? this._viewer.camera.snap() : this._viewer.camera.lerp(duration);
-      const box = this.getVisibleBoundingBox(source);
-      movement.frame(box);
-    }
-    /**
-     * Returns the bounding box of all visible objects.
-     * @param source Optional VIM to specify the source of visible objects.
-     * @returns The bounding box of all visible objects.
-     */
-    getVisibleBoundingBox(source) {
-      let box;
-      const vimBoxUnion = (vim) => {
-        for (const obj of vim.getObjects()) {
-          if (!obj.visible) continue;
-          const b = obj.getBoundingBox();
-          if (!b) continue;
-          box = box ? box.union(b) : b == null ? void 0 : b.clone();
-        }
-      };
-      if (source) {
-        vimBoxUnion(source);
-      } else {
-        for (const vim of this._viewer.vims) {
-          vimBoxUnion(vim);
+    };
+  }
+  function useArgActionRef(action) {
+    const ref = React2.useRef(action);
+    return {
+      call(arg) {
+        ref == null ? void 0 : ref.current(arg);
+      },
+      set(func) {
+        ref.current = func;
+      }
+    };
+  }
+  function useFuncRef(func) {
+    const ref = React2.useRef(func);
+    return {
+      call() {
+        return ref == null ? void 0 : ref.current();
+      },
+      set(func2) {
+        ref.current = func2;
+      }
+    };
+  }
+  function useCamera(viewer) {
+    const autoCamera2 = useStateRef(false);
+    autoCamera2.useOnChange((v) => {
+      if (v) {
+        frameSelection2.call();
+      }
+    });
+    React2.useEffect(() => {
+      viewer.selection.onValueChanged.sub(() => {
+        if (autoCamera2.get()) {
+          frameSelection2.call();
         }
+      });
+    }, []);
+    const reset = useActionRef(() => viewer.camera.lerp(1).reset());
+    const frameSelection2 = useActionRef(() => {
+      if (viewer.selection.count === 0) {
+        frameVisibleObjects.call();
+        return;
+      }
+      const box = viewer.selection.getBoundingBox();
+      if (!box) {
+        return;
+      }
+      box.intersect(viewer.gizmos.sectionBox.box);
+      if (box.isEmpty()) {
+        return;
+      }
+      viewer.camera.lerp(1).frame(box);
+    });
+    const frameVisibleObjects = useActionRef(() => {
+      const movement = viewer.camera.lerp(1);
+      const box = getVisibleBoundingBox(viewer);
+      movement.frame(box);
+    });
+    return {
+      autoCamera: autoCamera2,
+      reset,
+      frameSelection: frameSelection2,
+      frameVisibleObjects
+    };
+  }
+  function getVisibleBoundingBox(viewer, source) {
+    let box;
+    const vimBoxUnion = (vim) => {
+      for (const obj of vim.getObjects()) {
+        if (!obj.visible) continue;
+        const b = obj.getBoundingBox();
+        if (!b) continue;
+        box = box ? box.union(b) : b == null ? void 0 : b.clone();
+      }
+    };
+    {
+      for (const vim of viewer.vims) {
+        vimBoxUnion(vim);
       }
-      return box;
     }
+    return box;
   }
   function createContainer(element) {
     let root = element;
@@ -75813,70 +75919,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     r.max.z += b2.max.z;
     return r;
   }
-  function useStateRef(initialValue) {
-    const [value, setValue] = React2.useState(initialValue);
-    const ref = React2.useRef(initialValue);
-    const event = React2.useRef(new distExports.SimpleEventDispatcher());
-    const validate = React2.useRef((value2) => value2);
-    const confirm = React2.useRef((value2) => value2);
-    const set2 = (value2) => {
-      const finalValue = validate.current(value2) ?? value2;
-      if (finalValue === void 0) return;
-      if (finalValue === ref.current) return;
-      ref.current = finalValue;
-      setValue(finalValue);
-      event.current.dispatch(finalValue);
-    };
-    return {
-      get() {
-        return ref.current;
-      },
-      set: set2,
-      confirm() {
-        set2(confirm.current(ref.current));
-      },
-      useOnChange(on) {
-        React2.useEffect(() => {
-          return event.current.subscribe(on);
-        }, []);
-      },
-      useMemo(on, deps) {
-        return React2.useMemo(() => on(value), [...deps || [], value]);
-      },
-      useValidate(on) {
-        React2.useEffect(() => {
-          validate.current = on;
-        }, []);
-      },
-      useConfirm(on) {
-        React2.useEffect(() => {
-          confirm.current = on;
-        }, []);
-      }
-    };
-  }
-  function useArgActionRef(action) {
-    const ref = React2.useRef(action);
-    return {
-      call(arg) {
-        ref == null ? void 0 : ref.current(arg);
-      },
-      set(func) {
-        ref.current = func;
-      }
-    };
-  }
-  function useFuncRef(func) {
-    const ref = React2.useRef(func);
-    return {
-      call() {
-        return ref == null ? void 0 : ref.current();
-      },
-      set(func2) {
-        ref.current = func2;
-      }
-    };
-  }
   function useSectionBox(adapter) {
     const enable = useStateRef(false);
     const visible2 = useStateRef(false);
@@ -76009,7 +76051,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     var _a2;
     const settings2 = useSettings(props.viewer, props.settings ?? {});
     const modal = useModal(settings2.value.capacity.canFollowUrl);
-    const camera2 = React2.useMemo(() => new ComponentCamera(props.viewer), []);
+    const camera2 = useCamera(props.viewer);
     const cursor = React2.useMemo(() => new CursorManager(props.viewer), []);
     const loader = React2.useRef(new ComponentLoader(props.viewer, modal));
     const [isolation] = React2.useState(() => new Isolation(props.viewer, camera2, settings2.value));
@@ -76510,15 +76552,26 @@ Averrage Date/Second ${avgDataRatePS} kb
   function UltraComponent(props) {
     const modal = useModal(true);
     const sectionBox2 = useUltraSectionBox(props.viewer);
-    const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, (_2) => _2);
     const side = useSideState(true, 400);
     const [_, setSelectState] = React2.useState(0);
+    const [controlBarCustom, setControlBarCustom] = React2.useState(() => (c) => c);
+    const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, (_2) => _2);
     React2.useEffect(() => {
       props.viewer.onStateChanged.subscribe((state) => updateModal(modal, state));
       props.viewer.selection.onValueChanged.subscribe(() => {
         setSelectState((i2) => (i2 + 1) % 2);
       });
-      props.onMount(createComponentRef(props.viewer, modal, sectionBox2));
+      props.onMount({
+        viewer: props.viewer,
+        modal,
+        sectionBox: sectionBox2,
+        dispose: () => {
+        },
+        controlBar: {
+          customize: (v) => setControlBarCustom(() => v)
+        },
+        load: patchLoad(props.viewer, modal)
+      });
     }, []);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
@@ -76528,18 +76581,28 @@ Averrage Date/Second ${avgDataRatePS} kb
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
-              content: controlBar2,
+              content: controlBarCustom(controlBar2),
               show: true
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBox2 })
         ] });
       } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ReactTooltip,
+        {
+          multiline: true,
+          arrowColor: "transparent",
+          type: "light",
+          className: "!vc-max-w-xs !vc-border !vc-border-solid !vc-border-gray-medium !vc-bg-white !vc-text-xs !vc-text-gray-darkest !vc-opacity-100 !vc-shadow-[2px_6px_15px_rgba(0,0,0,0.3)] !vc-transition-opacity",
+          delayShow: 200
+        }
+      )
     ] });
   }
-  function createComponentRef(viewer, modal, sectionBox2) {
-    function load(source) {
+  function patchLoad(viewer, modal) {
+    return function load(source) {
       const request2 = viewer.loadVim(source);
       void updateProgress(request2, modal);
       void request2.getResult().then(
@@ -76554,18 +76617,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         }
       );
       return request2;
-    }
-    return {
-      viewer,
-      modal,
-      sectionBox: sectionBox2,
-      dispose: () => {
-      },
-      load
     };
   }
   const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
+    ControlBar: controlBar,
     UltraComponent,
     createUltraComponent
   }, Symbol.toStringTag, { value: "Module" }));