@floegence/floe-webapp-core 0.36.12 → 0.36.15

package/dist/components/ui/menuUtils.js

@@ -1,60 +1,90 @@
-const d = 8, r = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
-function M(e, t, n) {
-  const o = window.innerWidth, f = window.innerHeight;
-  let i;
-  switch (n) {
+const u = 8, M = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+function a() {
+  return typeof window > "u" ? {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  } : {
+    left: 0,
+    top: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+function h(e) {
+  return e ?? a();
+}
+function E(e, t, f) {
+  const i = h(f);
+  let o = e.x, n = e.y;
+  return o + t.width > i.right - 8 && (o = i.right - t.width - 8), n + t.height > i.bottom - 8 && (n = i.bottom - t.height - 8), {
+    x: Math.max(i.left + 8, o),
+    y: Math.max(i.top + 8, n)
+  };
+}
+function A(e, t, f, i) {
+  const o = h(i);
+  let n;
+  switch (f) {
     case "center":
-      i = e.left + e.width / 2 - t.width / 2;
+      n = e.left + e.width / 2 - t.width / 2;
       break;
     case "end":
-      i = e.right - t.width;
+      n = e.right - t.width;
       break;
     default:
-      i = e.left;
+      n = e.left;
   }
-  let l = e.bottom + 4;
-  if (i + t.width > o - 8 && (i = o - t.width - 8), i = Math.max(8, i), l + t.height > f - 8) {
-    const I = e.top - 8, h = f - e.bottom - 8;
-    I > h && I >= t.height ? l = e.top - t.height - 4 : l = f - t.height - 8;
+  let r = e.bottom + 4;
+  if (n + t.width > o.right - 8 && (n = o.right - t.width - 8), n = Math.max(o.left + 8, n), r + t.height > o.bottom - 8) {
+    const I = e.top - o.top - 8, d = o.bottom - e.bottom - 8;
+    I > d && I >= t.height ? r = e.top - t.height - 4 : r = o.bottom - t.height - 8;
   }
-  return l = Math.max(8, l), { x: i, y: l };
-}
-function u(e, t) {
-  const n = window.innerWidth, o = window.innerHeight;
-  let f = e.right, i = e.top;
-  if (f + t.width > n - 8) {
-    const l = e.left - t.width;
-    l >= 8 ? f = l : f = n - t.width - 8;
+  return r = Math.max(o.top + 8, r), { x: n, y: r };
+}
+function P(e, t, f) {
+  const i = h(f);
+  let o = e.right, n = e.top;
+  if (o + t.width > i.right - 8) {
+    const r = e.left - t.width;
+    r >= i.left + 8 ? o = r : o = i.right - t.width - 8;
   }
-  return i + t.height > o - 8 && (i = o - t.height - 8), f = Math.max(8, f), i = Math.max(8, i), { x: f, y: i };
+  return n + t.height > i.bottom - 8 && (n = i.bottom - t.height - 8), o = Math.max(i.left + 8, o), n = Math.max(i.top + 8, n), { x: o, y: n };
 }
-function a(e, t, n) {
-  return e <= 0 ? null : t < 0 ? n > 0 ? 0 : e - 1 : (t + n + e) % e;
+function s(e, t, f) {
+  return e <= 0 ? null : t < 0 ? f > 0 ? 0 : e - 1 : (t + f + e) % e;
 }
-function s(e) {
-  return !e || typeof HTMLElement > "u" ? [] : Array.from(e.querySelectorAll(r)).filter(
+function l(e) {
+  return !e || typeof HTMLElement > "u" ? [] : Array.from(e.querySelectorAll(M)).filter(
     (t) => t instanceof HTMLElement
   );
 }
-function w(e, t = "first") {
-  const n = s(e);
-  if (!n.length) return !1;
-  let o = n[0];
-  return t === "last" ? o = n[n.length - 1] : t === "selected" && (o = n.find((f) => f.getAttribute("data-floe-selected") === "true") ?? n[0]), o.focus(), !0;
+function T(e, t = "first") {
+  const f = l(e);
+  if (!f.length) return !1;
+  let i = f[0];
+  return t === "last" ? i = f[f.length - 1] : t === "selected" && (i = f.find((o) => o.getAttribute("data-floe-selected") === "true") ?? f[0]), i.focus(), !0;
 }
-function E(e, t, n) {
-  const o = s(e);
-  if (!o.length) return !1;
-  const f = t ? o.indexOf(t) : -1, i = a(o.length, f, n);
-  return i === null ? !1 : (o[i]?.focus(), !0);
+function w(e, t, f) {
+  const i = l(e);
+  if (!i.length) return !1;
+  const o = t ? i.indexOf(t) : -1, n = s(i.length, o, f);
+  return n === null ? !1 : (i[n]?.focus(), !0);
 }
 export {
-  r as MENU_ITEM_SELECTOR,
-  d as VIEWPORT_MARGIN,
-  M as calculateMenuPosition,
-  u as calculateSubmenuPosition,
-  w as focusMenuItem,
-  s as getMenuItems,
-  a as getWrappedMenuItemIndex,
-  E as moveMenuFocus
+  M as MENU_ITEM_SELECTOR,
+  u as VIEWPORT_MARGIN,
+  A as calculateMenuPosition,
+  P as calculateSubmenuPosition,
+  E as clampMenuPosition,
+  T as focusMenuItem,
+  l as getMenuItems,
+  s as getWrappedMenuItemIndex,
+  w as moveMenuFocus,
+  a as resolveViewportMenuBoundaryRect
 };

package/dist/components/ui/surfacePortalScope.d.ts

@@ -0,0 +1 @@
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';

package/dist/components/ui/surfacePortalTypes.d.ts

@@ -0,0 +1,8 @@
+export type SurfacePortalRect = Readonly<{
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}>;

package/dist/components/workbench/WorkbenchCanvas.d.ts

@@ -14,6 +14,7 @@ export interface WorkbenchCanvasProps {
     filters: Record<WorkbenchWidgetType, boolean>;
     setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;
     onViewportCommit: (viewport: WorkbenchViewport) => void;
+    onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
     onSelectWidget: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,11 +1,11 @@
-import { use as v, insert as m, createComponent as i, effect as W, template as f } from "solid-js/web";
+import { use as v, insert as m, createComponent as i, effect as W, template as w } from "solid-js/web";
 import { createMemo as o, Show as h, For as F } from "solid-js";
 import { WorkbenchCanvasField as y } from "./WorkbenchCanvasField.js";
-import { WorkbenchWidget as R } from "./WorkbenchWidget.js";
-import { createWorkbenchRenderLayerMap as I, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
+import { WorkbenchWidget as I } from "./WorkbenchWidget.js";
+import { createWorkbenchRenderLayerMap as R, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
 import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
 import { InfiniteCanvas as S } from "../ui/InfiniteCanvas.js";
-var M = /* @__PURE__ */ f("<div class=workbench-canvas>"), k = /* @__PURE__ */ f("<div class=workbench-canvas__projected-layer>");
+var M = /* @__PURE__ */ w("<div class=workbench-canvas>"), k = /* @__PURE__ */ w("<div class=workbench-canvas__projected-layer>");
 function b(e) {
   const n = o((g) => {
     const d = e.widgetById().get(e.widgetId);
@@ -13,7 +13,7 @@ function b(e) {
     if (g) return g;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
   }), a = o(() => c(n().type, e.widgetDefinitions));
-  return i(R, {
+  return i(I, {
     get definition() {
       return a();
     },
@@ -91,13 +91,13 @@ function b(e) {
   });
 }
 function q(e) {
-  const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => I(e.widgets)), g = o(() => e.widgets.filter((t) => {
+  const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => R(e.widgets)), g = o(() => e.widgets.filter((t) => {
     const r = c(t.type, e.widgetDefinitions);
     return l(r) === "canvas_scaled";
   })), d = o(() => e.widgets.filter((t) => {
     const r = c(t.type, e.widgetDefinitions);
     return l(r) === "projected_surface";
-  }).map((t) => t.id)), w = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
+  }).map((t) => t.id)), f = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
   return (() => {
     var t = M(), r = e.setCanvasFrameRef;
     return typeof r == "function" ? v(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
@@ -109,6 +109,9 @@ function q(e) {
       get onViewportChange() {
         return e.onViewportCommit;
       },
+      get onViewportInteractionStart() {
+        return e.onViewportInteractionStart;
+      },
       get onCanvasContextMenu() {
         return e.onCanvasContextMenu;
       },
@@ -179,7 +182,7 @@ function q(e) {
               },
               projectedViewport: s,
               get surfaceReady() {
-                return w();
+                return f();
               }
             })
           })), u;

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,53 +1,54 @@
-import { insert as c, createComponent as a, Portal as h, addEventListener as p, effect as k, className as W, template as g, delegateEvents as b } from "solid-js/web";
-import { createEffect as s, onCleanup as u, Show as C } from "solid-js";
-import { isTypingElement as y } from "../../utils/dom.js";
-import { WorkbenchCanvas as A } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as D } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as x } from "./WorkbenchFilterBar.js";
-import { WorkbenchHud as S } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as M } from "./WorkbenchLockButton.js";
-import { installWorkbenchContextMenuDismissListeners as F } from "./workbenchContextMenuDismiss.js";
-import { useWorkbenchModel as L } from "./useWorkbenchModel.js";
-var R = /* @__PURE__ */ g("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), E = /* @__PURE__ */ g("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const _ = "F1";
-function P(i) {
-  const e = L({
-    state: () => i.state(),
-    setState: (t) => i.setState(t),
-    widgetDefinitions: () => i.widgetDefinitions,
+import { insert as c, createComponent as a, Portal as f, addEventListener as w, effect as v, className as h, template as d, delegateEvents as p } from "solid-js/web";
+import { createEffect as s, onCleanup as l, Show as k } from "solid-js";
+import { isTypingElement as W } from "../../utils/dom.js";
+import { clientToCanvasWorld as C } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as b } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as A } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as y } from "./WorkbenchFilterBar.js";
+import { WorkbenchHud as D } from "./WorkbenchHud.js";
+import { WorkbenchLockButton as S } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as x } from "./workbenchContextMenuDismiss.js";
+import { useWorkbenchModel as M } from "./useWorkbenchModel.js";
+var F = /* @__PURE__ */ d("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), L = /* @__PURE__ */ d("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const R = "F1";
+function U(o) {
+  const e = M({
+    state: () => o.state(),
+    setState: (t) => o.setState(t),
+    widgetDefinitions: () => o.widgetDefinitions,
     onClose: () => {
     }
   });
   s(() => {
-    i.onApiReady?.({
+    o.onApiReady?.({
       ensureWidget: (t, r) => e.widgetActions.ensureWidget(t, r) ?? null,
       clearSelection: () => e.selection.clear(),
       focusWidget: (t, r) => e.navigation.focusWidget(t, r),
       fitWidget: (t) => e.navigation.fitWidget(t),
       overviewWidget: (t) => e.navigation.overviewWidget(t),
       findWidgetByType: (t) => e.queries.findWidgetByType(t)
-    }), u(() => {
-      i.onApiReady?.(null);
+    }), l(() => {
+      o.onApiReady?.(null);
     });
   });
-  const d = () => i.lockShortcut === void 0 ? _ : i.lockShortcut;
+  const u = () => o.lockShortcut === void 0 ? R : o.lockShortcut;
   s(() => {
     if (typeof window > "u" || !e.contextMenu.state()) return;
-    const t = F({
+    const t = x({
       ownerWindow: window,
       onDismiss: e.contextMenu.close
     });
-    u(() => t());
+    l(() => t());
   }), s(() => {
-    if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const t = d(), r = (n) => {
+    if (o.enableKeyboard === !1 || typeof document > "u") return;
+    const t = u(), r = (n) => {
       if (n.defaultPrevented || n.isComposing) return;
       if (t !== null && n.key === t) {
         n.preventDefault(), e.lock.toggle();
         return;
       }
-      const o = n.target;
-      if (!(o instanceof Element && y(o)))
+      const i = n.target;
+      if (!(i instanceof Element && W(i)))
         switch (n.key) {
           case "ArrowUp":
             n.preventDefault(), e.navigation.handleArrowNavigation("up");
@@ -67,26 +68,23 @@ function P(i) {
             break;
         }
     };
-    document.addEventListener("keydown", r, !0), u(() => document.removeEventListener("keydown", r, !0));
+    document.addEventListener("keydown", r, !0), l(() => document.removeEventListener("keydown", r, !0));
   });
-  const m = (t, r) => {
+  const g = (t, r) => {
     const n = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!n) return null;
-    const o = n.getBoundingClientRect();
-    if (t < o.left || t > o.right || r < o.top || r > o.bottom)
-      return null;
-    const w = t - o.left, v = r - o.top, l = e.viewport();
-    return {
-      worldX: (w - l.x) / l.scale,
-      worldY: (v - l.y) / l.scale
-    };
-  }, f = (t, r, n) => {
-    const o = m(r, n);
-    o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
+    const i = n.getBoundingClientRect();
+    return C(i, e.viewport(), {
+      clientX: t,
+      clientY: r
+    });
+  }, m = (t, r, n) => {
+    const i = g(r, n);
+    i && e.widgetActions.addWidgetAtCursor(t, i.worldX, i.worldY);
   };
   return (() => {
-    var t = E(), r = t.firstChild;
-    return c(r, a(A, {
+    var t = L(), r = t.firstChild;
+    return c(r, a(b, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -117,6 +115,9 @@ function P(i) {
       get onViewportCommit() {
         return e.canvas.commitViewport;
       },
+      get onViewportInteractionStart() {
+        return e.canvas.cancelViewportNavigation;
+      },
       get onCanvasContextMenu() {
         return e.canvas.openCanvasContextMenu;
       },
@@ -141,7 +142,7 @@ function P(i) {
       get onRequestDelete() {
         return e.widgetActions.deleteWidget;
       }
-    })), c(t, a(M, {
+    })), c(t, a(S, {
       get locked() {
         return e.locked();
       },
@@ -149,9 +150,9 @@ function P(i) {
         return e.lock.toggle;
       },
       get shortcutLabel() {
-        return d() ?? void 0;
+        return u() ?? void 0;
       }
-    }), null), c(t, a(x, {
+    }), null), c(t, a(y, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -167,8 +168,8 @@ function P(i) {
       get onShowAll() {
         return e.filter.showAll;
       },
-      onCreateAt: f
-    }), null), c(t, a(S, {
+      onCreateAt: m
+    }), null), c(t, a(D, {
       get scaleLabel() {
         return e.scaleLabel();
       },
@@ -178,17 +179,17 @@ function P(i) {
       get onZoomIn() {
         return e.hud.zoomIn;
       }
-    }), null), c(t, a(C, {
+    }), null), c(t, a(k, {
       get when() {
         return e.contextMenu.state();
       },
       get children() {
-        return a(h, {
+        return a(f, {
           get children() {
             return [(() => {
-              var n = R();
-              return p(n, "contextmenu", e.contextMenu.retarget, !0), n;
-            })(), a(D, {
+              var n = F();
+              return w(n, "contextmenu", e.contextMenu.retarget, !0), n;
+            })(), a(A, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
               },
@@ -202,10 +203,10 @@ function P(i) {
           }
         });
       }
-    }), null), k(() => W(t, `workbench-surface${i.class ? ` ${i.class}` : ""}`)), t;
+    }), null), v(() => h(t, `workbench-surface${o.class ? ` ${o.class}` : ""}`)), t;
   })();
 }
-b(["contextmenu"]);
+p(["contextmenu"]);
 export {
-  P as WorkbenchSurface
+  U as WorkbenchSurface
 };

package/dist/components/workbench/useWorkbenchModel.d.ts

@@ -48,6 +48,7 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
             height: number;
         }) => void;
         commitViewport: (next: WorkbenchViewport) => void;
+        cancelViewportNavigation: () => void;
     };
     hud: {
         zoomIn: () => void;