vim-web 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/vim-web.d.ts

@@ -2310,10 +2310,6 @@ interface StateRef<T> {
      * @param value - The new state value.
      */
     set(value: T): void;
-    /**
-     * Confirms the current state (potentially applying a confirmation transformation).
-     */
-    confirm(): void;
     onChange: ISimpleEvent<T>;
 }
 /**
@@ -2599,7 +2595,7 @@ type PartialUltraSettings = RecursivePartial<UltraSettings>;
 /**
  * React UI feature toggles for the Ultra viewer, passed to `React.Ultra.createViewer(container, settings)`.
  * Controls which UI panels and toolbar buttons are shown.
- * Access at runtime via `viewer.settings.update(s => { s.ui.panelControlBar = false })`.
+ * Access at runtime via `viewer.ui.controlBar.set(false)`.
  *
  * @example
  * const viewer = await React.Ultra.createViewer(div, {
@@ -2656,7 +2652,7 @@ type PartialWebglSettings = RecursivePartial<WebglSettings>;
 /**
  * React UI feature toggles, passed to `React.Webgl.createViewer(container, settings)`.
  * Controls which UI panels and toolbar buttons are shown.
- * Access at runtime via `viewer.settings.update(s => { s.ui.panelBimTree = false })`.
+ * Access at runtime via `viewer.ui.bimTree.set(false)`.
  * Not to be confused with {@link ViewerSettings} (renderer config) or {@link VimSettings} (per-model transform).
  *
  * @example
@@ -3062,6 +3058,78 @@ type GenericPanelApi = {
     customize(fn: (entries: GenericEntryType[]) => GenericEntryType[]): void;
 };
 
+/**
+ * Reactive UI visibility API for the WebGL viewer.
+ * Each member is a `StateRef<boolean>` that can be read, written, and subscribed to.
+ *
+ * @example
+ * viewer.ui.bimTree.set(false)              // Hide BIM tree
+ * viewer.ui.controlBar.get()                // Read current state
+ * viewer.ui.axes.onChange.subscribe(…)       // Subscribe to changes
+ */
+type WebglUiApi = {
+    logo: StateRef<boolean>;
+    controlBar: StateRef<boolean>;
+    bimTree: StateRef<boolean>;
+    bimInfo: StateRef<boolean>;
+    axes: StateRef<boolean>;
+    performance: StateRef<boolean>;
+    axesOrthographic: StateRef<boolean>;
+    axesHome: StateRef<boolean>;
+    cursorOrbit: StateRef<boolean>;
+    cursorLookAround: StateRef<boolean>;
+    cursorPan: StateRef<boolean>;
+    cursorZoom: StateRef<boolean>;
+    cameraAuto: StateRef<boolean>;
+    cameraFrameScene: StateRef<boolean>;
+    cameraFrameSelection: StateRef<boolean>;
+    sectioningEnable: StateRef<boolean>;
+    sectioningFitToSelection: StateRef<boolean>;
+    sectioningReset: StateRef<boolean>;
+    sectioningShow: StateRef<boolean>;
+    sectioningAuto: StateRef<boolean>;
+    sectioningSettings: StateRef<boolean>;
+    measureEnable: StateRef<boolean>;
+    visibilityClearSelection: StateRef<boolean>;
+    visibilityShowAll: StateRef<boolean>;
+    visibilityToggle: StateRef<boolean>;
+    visibilityIsolate: StateRef<boolean>;
+    visibilityAutoIsolate: StateRef<boolean>;
+    visibilitySettings: StateRef<boolean>;
+    miscProjectInspector: StateRef<boolean>;
+    miscSettings: StateRef<boolean>;
+    miscHelp: StateRef<boolean>;
+    miscMaximise: StateRef<boolean>;
+};
+/**
+ * Reactive UI visibility API for the Ultra viewer.
+ */
+type UltraUiApi = {
+    logo: StateRef<boolean>;
+    controlBar: StateRef<boolean>;
+    cursorOrbit: StateRef<boolean>;
+    cursorLookAround: StateRef<boolean>;
+    cursorPan: StateRef<boolean>;
+    cursorZoom: StateRef<boolean>;
+    cameraAuto: StateRef<boolean>;
+    cameraFrameScene: StateRef<boolean>;
+    cameraFrameSelection: StateRef<boolean>;
+    sectioningEnable: StateRef<boolean>;
+    sectioningFitToSelection: StateRef<boolean>;
+    sectioningReset: StateRef<boolean>;
+    sectioningShow: StateRef<boolean>;
+    sectioningAuto: StateRef<boolean>;
+    sectioningSettings: StateRef<boolean>;
+    visibilityClearSelection: StateRef<boolean>;
+    visibilityShowAll: StateRef<boolean>;
+    visibilityToggle: StateRef<boolean>;
+    visibilityIsolate: StateRef<boolean>;
+    visibilityAutoIsolate: StateRef<boolean>;
+    visibilitySettings: StateRef<boolean>;
+    miscSettings: StateRef<boolean>;
+    miscHelp: StateRef<boolean>;
+};
+
 /**
  * @module public-api
  */
@@ -3151,6 +3219,16 @@ type WebglViewerApi = {
      * API to interact with the section box panel.
      */
     sectionBoxPanel: GenericPanelApi;
+    /**
+     * Reactive UI visibility controls. Each key from the settings `ui` block
+     * is a `StateRef<boolean>` that can be read, written, and subscribed to.
+     *
+     * @example
+     * viewer.ui.bimTree.set(false)             // Hide BIM tree
+     * viewer.ui.controlBar.get()               // Read current state
+     * viewer.ui.axes.onChange.subscribe(…)      // Subscribe to changes
+     */
+    ui: WebglUiApi;
     /**
      * Cleans up and releases resources used by the viewer.
      */
@@ -3243,6 +3321,15 @@ type UltraViewerApi = {
      * API to interact with the section box panel.
      */
     sectionBoxPanel: GenericPanelApi;
+    /**
+     * Reactive UI visibility controls. Each key from the settings `ui` block
+     * is a `StateRef<boolean>` that can be read, written, and subscribed to.
+     *
+     * @example
+     * viewer.ui.logo.set(false)                // Hide logo
+     * viewer.ui.controlBar.get()               // Read current state
+     */
+    ui: UltraUiApi;
     /**
      * Disposes of the viewer and its resources.
      */
@@ -3418,7 +3505,7 @@ type ViewerApi = WebglViewerApi | UltraViewerApi;
 
 declare namespace React {
   export { React_ContextMenu as ContextMenu, React_ControlBar as ControlBar, React_Errors as Errors, React_Icons as Icons, IsolationPanel, SectionBoxPanel, React_Settings as Settings, React_Ultra as Ultra, React_Webgl as Webgl, createContainer, createState };
-  export type { AugmentedElement, BimInfoPanelApi, Container, Data, DataCustomization, DataRender, Entry, FramingApi, FuncRef, GenericBoolEntry, GenericEntryType, GenericNumberEntry, GenericPanelApi, GenericTextEntry, Group, IsolationApi, LoadingBoxProps, MessageBoxProps, ModalApi, ModalProps, ProgressMode, Section, SectionBoxApi, StateRef, ViewerApi, VisibilityStatus };
+  export type { AugmentedElement, BimInfoPanelApi, Container, Data, DataCustomization, DataRender, Entry, FramingApi, FuncRef, GenericBoolEntry, GenericEntryType, GenericNumberEntry, GenericPanelApi, GenericTextEntry, Group, IsolationApi, LoadingBoxProps, MessageBoxProps, ModalApi, ModalProps, ProgressMode, Section, SectionBoxApi, StateRef, UltraUiApi, ViewerApi, VisibilityStatus, WebglUiApi };
 }
 
 export { Core as Core, React as React };

package/dist/vim-web.iife.js

@@ -74069,8 +74069,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       this._value = value;
       this._onChange.dispatch(value);
     }
-    confirm() {
-    }
     get onChange() {
       return this._onChange.asEvent();
     }
@@ -74108,7 +74106,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     const event = React2.useRef(new distExports.SimpleEventDispatcher());
     const validate = React2.useRef((next, current) => next);
-    const confirm = React2.useRef((value) => value);
     const set2 = (value) => {
       const finalValue = validate.current(value, ref.current);
       if (finalValue === ref.current) return;
@@ -74126,12 +74123,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       },
       set: set2,
       onChange: event.current.asEvent(),
-      /**
-       * 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.
        * Accepts a sync function, a cleanup function, or a function returning a Promise<void> (which will be ignored).
@@ -74175,15 +74166,6 @@ Averrage Date/Second ${avgDataRatePS} kb
         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;
-        }, []);
       }
     };
   }
@@ -80035,8 +80017,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         onChange: (e) => {
           refresher.refresh();
           props.state.set(e.target.value);
-        },
-        onBlur: () => props.state.confirm()
+        }
       }
     );
   }
@@ -87180,7 +87161,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       },
       isolation: {
         autoIsolate: false,
-        showGhost: false,
+        showGhost: true,
         transparency: true,
         showRooms: false
       },
@@ -87376,19 +87357,12 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     ];
   }
-  function makeInitialUiState(ui) {
-    return Object.fromEntries(
-      Object.entries(ui).map(([k, v]) => [k, isTrue(v)])
-    );
-  }
-  function tog(id2, label, key, src, uiState, setUiKey) {
+  function tog(id2, label, key, src, refs) {
     if (src[key] === "AlwaysTrue" || src[key] === "AlwaysFalse") return [];
-    const state = createState(uiState[key]);
-    state.onChange.subscribe((v) => setUiKey(key, v));
-    return [{ type: "bool", id: id2, label, state }];
+    return [{ type: "bool", id: id2, label, state: refs[key] }];
   }
-  function getWebglSettingsContent(viewer, isolation, uiState, setUiKey, srcUi) {
-    const t = (id2, label, key) => tog(id2, label, key, srcUi, uiState, setUiKey);
+  function getWebglSettingsContent(viewer, isolation, refs, srcUi) {
+    const t = (id2, label, key) => tog(id2, label, key, srcUi, refs);
     const scrollSpeedState = createState(viewer.inputs.scrollSpeed);
     scrollSpeedState.onChange.subscribe((v) => {
       viewer.inputs.scrollSpeed = v;
@@ -87449,6 +87423,110 @@ Averrage Date/Second ${avgDataRatePS} kb
       ...t(SettingsPanelKeys.ControlBarMiscShowMaximiseButtonToggle, "Maximise", "miscMaximise")
     ];
   }
+  function useWebglUiState(initialSettings) {
+    const { refs, values } = useUiRefs(initialSettings);
+    const ui = React2.useMemo(() => ({
+      // Panels
+      logo: refs.panelLogo,
+      controlBar: refs.panelControlBar,
+      bimTree: refs.panelBimTree,
+      bimInfo: refs.panelBimInfo,
+      axes: refs.panelAxes,
+      performance: refs.panelPerformance,
+      // Axes panel
+      axesOrthographic: refs.axesOrthographic,
+      axesHome: refs.axesHome,
+      // Cursors
+      cursorOrbit: refs.cursorOrbit,
+      cursorLookAround: refs.cursorLookAround,
+      cursorPan: refs.cursorPan,
+      cursorZoom: refs.cursorZoom,
+      // Camera
+      cameraAuto: refs.cameraAuto,
+      cameraFrameScene: refs.cameraFrameScene,
+      cameraFrameSelection: refs.cameraFrameSelection,
+      // Section box
+      sectioningEnable: refs.sectioningEnable,
+      sectioningFitToSelection: refs.sectioningFitToSelection,
+      sectioningReset: refs.sectioningReset,
+      sectioningShow: refs.sectioningShow,
+      sectioningAuto: refs.sectioningAuto,
+      sectioningSettings: refs.sectioningSettings,
+      // Measure
+      measureEnable: refs.measureEnable,
+      // Visibility
+      visibilityClearSelection: refs.visibilityClearSelection,
+      visibilityShowAll: refs.visibilityShowAll,
+      visibilityToggle: refs.visibilityToggle,
+      visibilityIsolate: refs.visibilityIsolate,
+      visibilityAutoIsolate: refs.visibilityAutoIsolate,
+      visibilitySettings: refs.visibilitySettings,
+      // Misc
+      miscProjectInspector: refs.miscProjectInspector,
+      miscSettings: refs.miscSettings,
+      miscHelp: refs.miscHelp,
+      miscMaximise: refs.miscMaximise
+    }), []);
+    return { ui, refs, uiValues: values };
+  }
+  function useUltraUiState(initialSettings) {
+    const { refs, values } = useUiRefs(initialSettings);
+    const ui = React2.useMemo(() => ({
+      // Panels
+      logo: refs.panelLogo,
+      controlBar: refs.panelControlBar,
+      // Cursors
+      cursorOrbit: refs.cursorOrbit,
+      cursorLookAround: refs.cursorLookAround,
+      cursorPan: refs.cursorPan,
+      cursorZoom: refs.cursorZoom,
+      // Camera
+      cameraAuto: refs.cameraAuto,
+      cameraFrameScene: refs.cameraFrameScene,
+      cameraFrameSelection: refs.cameraFrameSelection,
+      // Section box
+      sectioningEnable: refs.sectioningEnable,
+      sectioningFitToSelection: refs.sectioningFitToSelection,
+      sectioningReset: refs.sectioningReset,
+      sectioningShow: refs.sectioningShow,
+      sectioningAuto: refs.sectioningAuto,
+      sectioningSettings: refs.sectioningSettings,
+      // Visibility
+      visibilityClearSelection: refs.visibilityClearSelection,
+      visibilityShowAll: refs.visibilityShowAll,
+      visibilityToggle: refs.visibilityToggle,
+      visibilityIsolate: refs.visibilityIsolate,
+      visibilityAutoIsolate: refs.visibilityAutoIsolate,
+      visibilitySettings: refs.visibilitySettings,
+      // Misc
+      miscSettings: refs.miscSettings,
+      miscHelp: refs.miscHelp
+    }), []);
+    return { ui, refs, uiValues: values };
+  }
+  function useUiRefs(initialSettings) {
+    const [values, setValues] = React2.useState(
+      () => Object.fromEntries(
+        Object.entries(initialSettings).map(([k, v]) => [k, isTrue(v)])
+      )
+    );
+    const refs = React2.useMemo(() => {
+      const result = {};
+      for (const [key, initial] of Object.entries(initialSettings)) {
+        result[key] = createState(isTrue(initial));
+      }
+      return result;
+    }, []);
+    React2.useEffect(() => {
+      const unsubs = Object.keys(refs).map(
+        (key) => refs[key].onChange.subscribe((v) => {
+          setValues((prev) => ({ ...prev, [key]: v }));
+        })
+      );
+      return () => unsubs.forEach((u) => u());
+    }, []);
+    return { refs, values };
+  }
   function createWebglViewer(container, settings2 = {}, coreSettings = {}) {
     const cmpContainer = container instanceof HTMLElement ? createContainer(container) : container ?? createContainer();
     const viewer = createCoreWebglViewer(coreSettings);
@@ -87480,8 +87558,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   const WebglViewerComponent = React2.forwardRef((props, ref) => {
     const settings2 = createSettings(props.settings ?? {}, getDefaultSettings());
     const modal = React2.useRef(null);
-    const [uiState, setUiState] = React2.useState(() => makeInitialUiState(settings2.ui));
-    const setUiKey = (key, value) => setUiState((prev) => ({ ...prev, [key]: value }));
+    const { ui: uiApi, refs: uiRefs, uiValues: uiState } = useWebglUiState(settings2.ui);
     const effectiveSettings = { ...settings2, ui: { ...settings2.ui, ...uiState } };
     React2.useEffect(() => {
       if (!settings2.capacity.canReadLocalStorage) disableLocalStorage();
@@ -87534,6 +87611,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         return modal.current;
       },
       bimInfo: bimInfoRef,
+      ui: uiApi,
       dispose: () => {
       }
     }), []);
@@ -87563,7 +87641,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         SettingsPanel,
         {
           visible: side.getContent() === "settings",
-          content: getWebglSettingsContent(props.viewer, isolationRef, uiState, setUiKey, settings2.ui)
+          content: getWebglSettingsContent(props.viewer, isolationRef, uiRefs, settings2.ui)
         }
       )
     ] });
@@ -87970,6 +88048,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const UltraViewerComponent = React2.forwardRef((props, ref) => {
     const settings2 = createSettings(props.settings ?? {}, getDefaultUltraSettings());
+    const { ui: uiApi, uiValues: uiState } = useUltraUiState(settings2.ui);
     const sectionBoxRef = useUltraSectionBox(props.core, settings2.sectionBox);
     const framing = useUltraFraming(props.core, sectionBoxRef, settings2.camera.autoCamera);
     const isolationPanelHandle = React2.useRef(null);
@@ -88009,6 +88088,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       },
       dispose: () => {
       },
+      ui: uiApi,
       controlBar: controlBarApi,
       load: patchLoad(props.core, modalHandle),
       unload: (vim) => props.core.unload(vim)
@@ -88040,13 +88120,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          whenTrue(settings2.ui.panelLogo, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
+          uiState.panelLogo && /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { canvas: props.core.viewport.canvas }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
               content: controlBar,
-              show: isTrue(settings2.ui.panelControlBar)
+              show: uiState.panelControlBar
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel$1, { ref: sectionBoxPanelHandle, state: sectionBoxRef }),