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

package/dist/vim-web.iife.js

@@ -74583,92 +74583,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       })
     );
   }
-  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 LoadRequest {
-    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] = React2.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] = React2.useState(initialValue);
@@ -74865,6 +74786,45 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     };
   }
+  function useArgFuncRef(fn) {
+    const ref = React2.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;
@@ -74996,6 +74956,31 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     };
   }
+  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]";
@@ -75231,6 +75216,68 @@ Averrage Date/Second ${avgDataRatePS} kb
     serverFileLoadingError,
     serverStreamError
   }, Symbol.toStringTag, { value: "Module" }));
+  class LoadRequest {
+    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");
@@ -75475,7 +75522,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     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");
     React2.useImperativeHandle(ref, () => ({
       getActiveState,
       loading(content2) {
@@ -75549,6 +75595,35 @@ Averrage Date/Second ${avgDataRatePS} kb
       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] = React2.useState({ top: 0, left: 0 });
+    React2.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 = React2.useRef(props.state.get());
     const externalValue = React2.useSyncExternalStore(
@@ -75587,74 +75662,73 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     );
   }
-  function GenericPanel(props) {
-    const [panelPosition, setPanelPosition] = React2.useState({
-      top: 0,
-      left: 0
-    });
-    const panelRef = React2.useRef(null);
-    React2.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 = React2.forwardRef((props, ref) => {
+    const panelRef = React2.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",
       {
@@ -75674,47 +75748,52 @@ Averrage Date/Second ${avgDataRatePS} kb
               "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 = React2.useRef();
+    const [entries, setEntries] = React2.useState(baseEntries);
+    const applyCustomization = () => {
+      setEntries(customization.current ? customization.current(baseEntries) : baseEntries);
+    };
+    const setCustomization = (fn) => {
+      customization.current = fn;
+      applyCustomization();
+    };
+    React2.useEffect(() => {
+      applyCustomization();
+    }, [baseEntries]);
+    React2.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 = React2.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);
@@ -75870,17 +75949,24 @@ Averrage Date/Second ${avgDataRatePS} kb
       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 = React2.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 = React2.useRef(adapter);
     const visibility = useStateRef(() => adapter.computeVisibility());
@@ -76050,6 +76136,8 @@ Averrage Date/Second ${avgDataRatePS} kb
     const settings2 = useSettings(props.viewer, props.settings ?? {});
     const modal = React2.useRef(null);
     const sectionBoxRef = useWebglSectionBox(props.viewer);
+    const isolationPanelRef = React2.useRef(null);
+    const sectionBoxPanelRef = React2.useRef(null);
     const camera2 = useWebglCamera(props.viewer, sectionBoxRef);
     const cursor = React2.useMemo(() => new CursorManager(props.viewer), []);
     const loader = React2.useRef(new ComponentLoader(props.viewer, modal));
@@ -76078,7 +76166,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       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,
@@ -76086,6 +76173,12 @@ Averrage Date/Second ${avgDataRatePS} kb
         isolation: isolationRef,
         camera: camera2,
         settings: settings2,
+        get isolationPanel() {
+          return isolationPanelRef.current;
+        },
+        get sectionBoxPanel() {
+          return sectionBoxPanelRef.current;
+        },
         get sectionBox() {
           return sectionBoxRef;
         },
@@ -76153,8 +76246,8 @@ Averrage Date/Second ${avgDataRatePS} kb
               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,
             {
@@ -76475,7 +76568,7 @@ Averrage Date/Second ${avgDataRatePS} kb
             }
           ),
           /* @__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 }),
@@ -76519,8 +76612,10 @@ Averrage Date/Second ${avgDataRatePS} kb
     __proto__: null,
     ContextMenu: contextMenu,
     ControlBar: index$5,
+    DeferredPromise,
     Errors: index$3,
     Icons: icons,
+    ReactUtils: reactUtils,
     Settings: index$4,
     Ultra: index$1,
     Urls: urls,