vim-web 0.3.44-dev.70 → 0.3.44-dev.71

package/dist/vim-web.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2;
 import * as React from "react";
-import React__default, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle, useContext, Component, forwardRef, useSyncExternalStore, useLayoutEffect } from "react";
+import React__default, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle, useContext, Component, forwardRef, useLayoutEffect, useSyncExternalStore } from "react";
 import ReactDOM, { flushSync as flushSync$1 } from "react-dom";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -74567,92 +74567,13 @@ async function getFamilyTypeNameMap(document2) {
     })
   );
 }
-class DeferredPromise extends Promise {
-  constructor(executor = () => {
-  }) {
-    var _a3;
-    let resolver;
-    let rejector;
-    super((resolve, reject) => {
-      resolver = resolve;
-      rejector = reject;
-      return executor(resolve, reject);
-    });
-    __publicField(this, "resolve");
-    __publicField(this, "reject");
-    __publicField(this, "initialCallStack");
-    this.resolve = resolver;
-    this.reject = rejector;
-    this.initialCallStack = (_a3 = Error().stack) == null ? void 0 : _a3.split("\n").slice(2).join("\n");
-  }
-  /** @throws error with amended call stack */
-  rejectWithError(error) {
-    var _a3;
-    error.stack = [(_a3 = error.stack) == null ? void 0 : _a3.split("\n")[0], this.initialCallStack].join("\n");
-    this.reject(error);
-  }
-}
-class LoadRequest2 {
-  constructor(callbacks, source, settings2) {
-    __publicField(this, "source");
-    __publicField(this, "_callbacks");
-    __publicField(this, "_request");
-    __publicField(this, "_progress", { loaded: 0, total: 0, all: /* @__PURE__ */ new Map() });
-    __publicField(this, "_progressPromise", new DeferredPromise());
-    __publicField(this, "_isDone", false);
-    __publicField(this, "_completionPromise", new DeferredPromise());
-    this.source = source;
-    this._callbacks = callbacks;
-    this.startRequest(source, settings2);
-  }
-  async startRequest(source, settings2) {
-    this._request = await requestVim(source, settings2);
-    for await (const progress of this._request.getProgress()) {
-      this.onProgress(progress);
-    }
-    const result = await this._request.getResult();
-    if (result.isError()) {
-      this.onError(result.error);
-    } else {
-      this.onSuccess();
-    }
-  }
-  onProgress(progress) {
-    this._callbacks.onProgress(progress);
-    this._progress = progress;
-    this._progressPromise.resolve();
-    this._progressPromise = new DeferredPromise();
-  }
-  onSuccess() {
-    this._callbacks.onDone();
-    this.end();
-  }
-  onError(error) {
-    this._callbacks.onError({
-      url: this.source.url,
-      error
-    });
-    this.end();
-  }
-  end() {
-    this._isDone = true;
-    this._progressPromise.resolve();
-    this._completionPromise.resolve();
-  }
-  async *getProgress() {
-    while (!this._isDone) {
-      await this._progressPromise;
-      yield this._progress;
+function useRefresher() {
+  const [refresh, setRefresh] = useState(false);
+  return {
+    refresh: () => {
+      setRefresh(!refresh);
     }
-  }
-  async getResult() {
-    await this._completionPromise;
-    return this._request.getResult();
-  }
-  abort() {
-    this._request.abort();
-    this.onError("Request aborted");
-  }
+  };
 }
 function useStateRef(initialValue) {
   const [value, setValue] = useState(initialValue);
@@ -74849,6 +74770,45 @@ function useAsyncFuncRef(fn) {
     }
   };
 }
+function useArgFuncRef(fn) {
+  const ref = useRef(fn);
+  return {
+    call(arg) {
+      return ref == null ? void 0 : ref.current(arg);
+    },
+    get() {
+      return ref.current;
+    },
+    set(fn2) {
+      ref.current = fn2;
+    },
+    prepend(fn2) {
+      const oldFn = ref.current;
+      ref.current = (arg) => {
+        fn2(arg);
+        return oldFn(arg);
+      };
+    },
+    append(fn2) {
+      const oldFn = ref.current;
+      ref.current = (arg) => {
+        const result = oldFn(arg);
+        fn2(arg);
+        return result;
+      };
+    }
+  };
+}
+const reactUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  useActionRef,
+  useArgActionRef,
+  useArgFuncRef,
+  useAsyncFuncRef,
+  useFuncRef,
+  useRefresher,
+  useStateRef
+}, Symbol.toStringTag, { value: "Module" }));
 function useViewerState(viewer) {
   const getVim = () => {
     var _a3;
@@ -74980,6 +74940,31 @@ function useBimInfo() {
     }
   };
 }
+class DeferredPromise extends Promise {
+  constructor(executor = () => {
+  }) {
+    var _a3;
+    let resolver;
+    let rejector;
+    super((resolve, reject) => {
+      resolver = resolve;
+      rejector = reject;
+      return executor(resolve, reject);
+    });
+    __publicField(this, "resolve");
+    __publicField(this, "reject");
+    __publicField(this, "initialCallStack");
+    this.resolve = resolver;
+    this.reject = rejector;
+    this.initialCallStack = (_a3 = Error().stack) == null ? void 0 : _a3.split("\n").slice(2).join("\n");
+  }
+  /** @throws error with amended call stack */
+  rejectWithError(error) {
+    var _a3;
+    error.stack = [(_a3 = error.stack) == null ? void 0 : _a3.split("\n")[0], this.initialCallStack].join("\n");
+    this.reject(error);
+  }
+}
 const vcColorPrimary = "vc-text-[#212733]";
 const vcColorSecondary = "vc-text-[#787C83]";
 const vcColorLink = "vc-text-[#0590CC]";
@@ -75215,6 +75200,68 @@ const index$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   serverFileLoadingError,
   serverStreamError
 }, Symbol.toStringTag, { value: "Module" }));
+class LoadRequest2 {
+  constructor(callbacks, source, settings2) {
+    __publicField(this, "source");
+    __publicField(this, "_callbacks");
+    __publicField(this, "_request");
+    __publicField(this, "_progress", { loaded: 0, total: 0, all: /* @__PURE__ */ new Map() });
+    __publicField(this, "_progressPromise", new DeferredPromise());
+    __publicField(this, "_isDone", false);
+    __publicField(this, "_completionPromise", new DeferredPromise());
+    this.source = source;
+    this._callbacks = callbacks;
+    this.startRequest(source, settings2);
+  }
+  async startRequest(source, settings2) {
+    this._request = await requestVim(source, settings2);
+    for await (const progress of this._request.getProgress()) {
+      this.onProgress(progress);
+    }
+    const result = await this._request.getResult();
+    if (result.isError()) {
+      this.onError(result.error);
+    } else {
+      this.onSuccess();
+    }
+  }
+  onProgress(progress) {
+    this._callbacks.onProgress(progress);
+    this._progress = progress;
+    this._progressPromise.resolve();
+    this._progressPromise = new DeferredPromise();
+  }
+  onSuccess() {
+    this._callbacks.onDone();
+    this.end();
+  }
+  onError(error) {
+    this._callbacks.onError({
+      url: this.source.url,
+      error
+    });
+    this.end();
+  }
+  end() {
+    this._isDone = true;
+    this._progressPromise.resolve();
+    this._completionPromise.resolve();
+  }
+  async *getProgress() {
+    while (!this._isDone) {
+      await this._progressPromise;
+      yield this._progress;
+    }
+  }
+  async getResult() {
+    await this._completionPromise;
+    return this._request.getResult();
+  }
+  abort() {
+    this._request.abort();
+    this.onError("Request aborted");
+  }
+}
 class ComponentLoader {
   constructor(viewer, modal) {
     __publicField(this, "_viewer");
@@ -75459,7 +75506,6 @@ const Modal = forwardRef((props, ref) => {
   const getActiveState = () => {
     return (state == null ? void 0 : state[0]) ?? (state == null ? void 0 : state[1]) ?? (state == null ? void 0 : state[2]);
   };
-  console.log("REnder Modal and setup Imperative handle");
   useImperativeHandle(ref, () => ({
     getActiveState,
     loading(content2) {
@@ -75533,6 +75579,35 @@ function modalContent(modal) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingBox, { content: modal });
   }
 }
+function computeFloatingPosition(originRect, panelRect) {
+  let left = originRect.left + originRect.width / 2 - panelRect.width / 2;
+  let top = originRect.top - 10 - panelRect.height;
+  if (top < 10) {
+    top = originRect.bottom + 10;
+  }
+  if (left < 10) {
+    left = 10;
+  } else if (left + panelRect.width > window.innerWidth - 10) {
+    left = window.innerWidth - panelRect.width - 10;
+  }
+  return { top, left };
+}
+function useFloatingPanelPosition(panelRef, anchorElement, enabled) {
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  useLayoutEffect(() => {
+    if (!enabled || !anchorElement || !panelRef.current) return;
+    const updatePosition = () => {
+      const originRect = anchorElement.getBoundingClientRect();
+      const panelRect = panelRef.current.getBoundingClientRect();
+      setPosition(computeFloatingPosition(originRect, panelRect));
+    };
+    updatePosition();
+    const resizeObserver = new ResizeObserver(updatePosition);
+    panelRef.current.parentElement && resizeObserver.observe(panelRef.current.parentElement);
+    return () => resizeObserver.disconnect();
+  }, [anchorElement, enabled]);
+  return position;
+}
 function InputNumber(props) {
   const defaultValue = useRef(props.state.get());
   const externalValue = useSyncExternalStore(
@@ -75571,74 +75646,73 @@ function InputNumber(props) {
     }
   );
 }
-function GenericPanel(props) {
-  const [panelPosition, setPanelPosition] = useState({
-    top: 0,
-    left: 0
-  });
-  const panelRef = useRef(null);
-  useLayoutEffect(() => {
-    const updatePosition = () => {
-      const { top, left } = computePosition(panelRef);
-      setPanelPosition({ top, left });
-    };
-    updatePosition();
-    let resizeObserver = null;
-    if (panelRef.current && panelRef.current.parentElement) {
-      resizeObserver = new ResizeObserver(updatePosition);
-      resizeObserver.observe(panelRef.current.parentElement);
+function GenericEntry(field) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "vim-sectionbox-offsets-entry vc-text-xs vc-flex vc-items-center vc-justify-between vc-my-2",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { className: "vc-w-1/2 vc-inline", children: field.label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { className: "vc-w-1/3 vc-inline", children: /* @__PURE__ */ jsxRuntimeExports.jsx(GenericField, { field }) })
+      ]
+    },
+    field.id
+  );
+}
+function GenericField(props) {
+  switch (props.field.type) {
+    case "number":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { state: props.field.state });
+    case "text":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericTextField, { field: props.field });
+    case "bool":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(GenericBoolField, { field: props.field });
+    default:
+      return null;
+  }
+}
+function GenericTextField(props) {
+  const refresher = useRefresher();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "input",
+    {
+      id: props.field.id,
+      type: "text",
+      value: props.field.state.get(),
+      onChange: (e) => {
+        refresher.refresh();
+        props.field.state.set(e.target.value);
+      },
+      className: "vc-border vc-inline vc-border-gray-300 vc-py-1 vc-w-full vc-px-1",
+      onBlur: () => props.field.state.confirm()
     }
-    return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [props.showPanel.get()]);
-  if (!props.showPanel.get()) return null;
-  const createTextBox = (field) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        id: field.id,
-        type: "number",
-        value: field.state.get(),
-        onChange: (e) => field.state.set(e.target.value),
-        className: "vc-border vc-inline vc-border-gray-300 vc-py-1 vc-w-full vc-px-1",
-        onBlur: () => field.state.confirm()
-      }
-    );
-  };
-  const createCheckbox = (field) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  );
+}
+function GenericBoolField(props) {
+  const refresher = useRefresher();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "input",
     {
-      id: field.id,
+      id: props.field.id,
       type: "checkbox",
-      checked: field.state.get(),
-      onChange: (e) => field.state.set(e.target.checked),
+      checked: props.field.state.get(),
+      onChange: (e) => {
+        refresher.refresh();
+        props.field.state.set(e.target.checked);
+      },
       className: "vc-border vc-inline vc-border-gray-300 vc-py-1 vc-w-full vc-px-1"
     }
   );
-  const renderField = (field) => {
-    let fieldElement = null;
-    if (field.type === "number") {
-      fieldElement = /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { state: field.state });
-    } else if (field.type === "text") {
-      fieldElement = createTextBox(field);
-    } else if (field.type === "bool") {
-      fieldElement = createCheckbox(field);
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "vim-sectionbox-offsets-entry vc-text-xs vc-flex vc-items-center vc-justify-between vc-my-2",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { className: "vc-w-1/2 vc-inline", children: field.label }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { className: "vc-w-1/3 vc-inline", children: fieldElement })
-        ]
-      },
-      field.id
-    );
-  };
+}
+const GenericPanel = forwardRef((props, ref) => {
+  const panelRef = useRef(null);
+  const panelPosition = useFloatingPanelPosition(
+    panelRef,
+    props.anchorElement,
+    props.showPanel.get()
+  );
+  const entries = useCustomizer(props.entries, ref);
+  if (!props.showPanel.get()) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vc-fixed vc-inset-0 vc-flex vc-pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -75658,47 +75732,52 @@ function GenericPanel(props) {
             "button",
             {
               className: "vc-flex vc-border-none vc-bg-transparent vc-text-sm vc-cursor-pointer",
-              onClick: props.onClose ? props.onClose : () => props.showPanel.set(false),
+              onClick: props.onClose ?? (() => props.showPanel.set(false)),
               children: close({ height: 12, width: 12, fill: "currentColor" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("dl", { className: "vc-text-xl vc-text-gray-darker vc-mb-2 vc-mx-2", children: props.fields.map(renderField) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("dl", { className: "vc-text-xl vc-text-gray-darker vc-mb-2 vc-mx-2", children: entries.map(GenericEntry) })
       ]
     }
   ) });
+});
+function useCustomizer(baseEntries, ref) {
+  const customization = useRef();
+  const [entries, setEntries] = useState(baseEntries);
+  const applyCustomization = () => {
+    setEntries(customization.current ? customization.current(baseEntries) : baseEntries);
+  };
+  const setCustomization = (fn) => {
+    customization.current = fn;
+    applyCustomization();
+  };
+  useEffect(() => {
+    applyCustomization();
+  }, [baseEntries]);
+  useImperativeHandle(ref, () => ({
+    customize: setCustomization
+  }));
+  return entries;
 }
-function computePosition(panelRef) {
-  const origin = document.getElementById("vim-control-bar");
-  if (origin && panelRef.current) {
-    const originRect = origin.getBoundingClientRect();
-    const panelRect = panelRef.current.getBoundingClientRect();
-    let left = originRect.left + originRect.width / 2 - panelRect.width / 2;
-    let top = originRect.top - 10 - panelRect.height;
-    if (top < 10) {
-      top = originRect.bottom + 10;
-    }
-    if (left < 10) {
-      left = 10;
-    }
-    if (left + panelRect.width > window.innerWidth - 10) {
-      left = window.innerWidth - panelRect.width - 10;
-    }
-    return { top, left };
-  }
-  return { top: 0, left: 0 };
-}
-function SectionBoxPanel(props) {
-  return GenericPanel({
-    header: "Section Box Offsets",
-    showPanel: props.state.showOffsetPanel,
-    fields: [
-      { type: "number", id: "topOffset", label: "Top Offset", state: props.state.topOffset },
-      { type: "number", id: "sideOffset", label: "Side Offset", state: props.state.sideOffset },
-      { type: "number", id: "bottomOffset", label: "Bottom Offset", state: props.state.bottomOffset }
-    ]
-  });
-}
+const SectionBoxPanel = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GenericPanel,
+      {
+        ref,
+        header: "Section Box Offsets",
+        anchorElement: document.getElementById("vim-control-bar"),
+        showPanel: props.state.showOffsetPanel,
+        entries: [
+          { type: "number", id: "topOffset", label: "Top Offset", state: props.state.topOffset },
+          { type: "number", id: "sideOffset", label: "Side Offset", state: props.state.sideOffset },
+          { type: "number", id: "bottomOffset", label: "Bottom Offset", state: props.state.bottomOffset }
+        ]
+      }
+    );
+  }
+);
 function useSectionBox(adapter) {
   const enable = useStateRef(false);
   const visible2 = useStateRef(false);
@@ -75854,17 +75933,24 @@ function useViewerInput(handler, camera2) {
     handler.keyboard.registerKeyUp("KeyF", "replace", () => camera2.frameSelection.call());
   }, []);
 }
-function IsolationSettingsPanel(props) {
-  return GenericPanel({
-    header: "Render Settings",
-    showPanel: props.state.showPanel,
-    fields: [
-      { type: "bool", id: "showGhost", label: "Show Ghost", state: props.state.showGhost },
-      // { type: 'bool', id: 'showRooms', label: 'Show Rooms', state: props.state.showRooms },
-      { type: "number", id: "ghostOpacity", label: "Ghost Opacity", state: props.state.ghostOpacity }
-    ]
-  });
-}
+const IsolationPanel = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GenericPanel,
+      {
+        ref,
+        header: "Render Settings",
+        anchorElement: document.getElementById("vim-control-bar"),
+        showPanel: props.state.showPanel,
+        entries: [
+          { type: "bool", id: "showGhost", label: "Show Ghost", state: props.state.showGhost },
+          // { type: "bool", id: "showRooms", label: "Show Rooms", state: props.state.showRooms },
+          { type: "number", id: "ghostOpacity", label: "Ghost Opacity", state: props.state.ghostOpacity }
+        ]
+      }
+    );
+  }
+);
 function useSharedIsolation(adapter) {
   const _adapter = useRef(adapter);
   const visibility = useStateRef(() => adapter.computeVisibility());
@@ -76034,6 +76120,8 @@ function Viewer$1(props) {
   const settings2 = useSettings(props.viewer, props.settings ?? {});
   const modal = useRef(null);
   const sectionBoxRef = useWebglSectionBox(props.viewer);
+  const isolationPanelRef = useRef(null);
+  const sectionBoxPanelRef = useRef(null);
   const camera2 = useWebglCamera(props.viewer, sectionBoxRef);
   const cursor = useMemo(() => new CursorManager(props.viewer), []);
   const loader = useRef(new ComponentLoader(props.viewer, modal));
@@ -76062,7 +76150,6 @@ function Viewer$1(props) {
     props.viewer.viewport.canvas.tabIndex = 0;
     applyWebglBindings(props.viewer, camera2, isolationRef, side);
     const subContext = props.viewer.inputs.onContextMenu.subscribe(showContextMenu);
-    console.log("ON MOUNT");
     props.onMount({
       container: props.container,
       core: props.viewer,
@@ -76070,6 +76157,12 @@ function Viewer$1(props) {
       isolation: isolationRef,
       camera: camera2,
       settings: settings2,
+      get isolationPanel() {
+        return isolationPanelRef.current;
+      },
+      get sectionBoxPanel() {
+        return sectionBoxPanelRef.current;
+      },
       get sectionBox() {
         return sectionBoxRef;
       },
@@ -76137,8 +76230,8 @@ function Viewer$1(props) {
             show: isTrue(settings2.value.ui.controlBar)
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBoxRef }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationSettingsPanel, { state: isolationRef }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { ref: sectionBoxPanelRef, state: sectionBoxRef }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel, { ref: isolationPanelRef, state: isolationRef }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           AxesPanelMemo,
           {
@@ -76459,7 +76552,7 @@ function Viewer3(props) {
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBox2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationSettingsPanel, { state: isolation })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel, { state: isolation })
       ] });
     } }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ref: modal, canFollowLinks: true }),
@@ -76503,8 +76596,10 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   __proto__: null,
   ContextMenu: contextMenu,
   ControlBar: index$5,
+  DeferredPromise,
   Errors: index$3,
   Icons: icons,
+  ReactUtils: reactUtils,
   Settings: index$4,
   Ultra: index$1,
   Urls: urls,