@floegence/floe-webapp-core 0.36.10 → 0.36.12

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,230 +1,252 @@
-import { createSignal as _, createMemo as d, onCleanup as mt } from "solid-js";
-import { ArrowUp as Wt, Copy as xt, Trash as St } from "../icons/index.js";
-import { getTopZIndex as Ct, createContextMenuPosition as pt, createWorkbenchId as kt, findNearestWidget as Ft, clampScale as Xt, WORKBENCH_CANVAS_ZOOM_STEP as Z, WORKBENCH_CONTEXT_MENU_WIDTH_PX as bt, estimateContextMenuHeight as Mt } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetDefinitions as Yt, getWidgetEntry as $, createWorkbenchFilterState as yt } from "./widgets/widgetRegistry.js";
-function Nt(s) {
-  const [m, W] = _(null), [j, A] = _(null), [D, K] = _({ width: 0, height: 0 });
-  let r = null, x = null;
-  const a = s.state, h = d(() => a().widgets), u = d(() => a().viewport), L = d(() => a().locked), T = d(() => a().filters), k = d(() => a().selectedWidgetId), F = d(() => Ct(h())), U = d(() => `${Math.round(u().scale * 100)}%`), G = () => typeof s.widgetDefinitions == "function" ? s.widgetDefinitions() : s.widgetDefinitions, f = d(
-    () => Yt(G())
-  ), X = (t, e) => {
-    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, c = D();
-    return c.width === n && c.height === i ? c : (K(o), o);
-  }, N = () => {
-    x?.disconnect(), x = null;
-  }, w = () => r ? X(r.clientWidth, r.clientHeight) : X(0, 0), J = (t) => {
+import { createSignal as V, createMemo as d, onCleanup as xt } from "solid-js";
+import { ArrowUp as St, Copy as Ct, Trash as pt } from "../icons/index.js";
+import { getTopZIndex as kt, createContextMenuPosition as Ft, createWorkbenchId as bt, createWorkbenchViewportCenteredOnWidget as L, findNearestWidget as It, clampScale as Mt, WORKBENCH_CANVAS_ZOOM_STEP as $, WORKBENCH_MIN_SCALE as Xt, createWorkbenchViewportFitForWidget as yt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Yt, estimateContextMenuHeight as vt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as Ot, getWidgetEntry as j, createWorkbenchFilterState as zt } from "./widgets/widgetRegistry.js";
+function qt(c) {
+  const [W, x] = V(null), [U, D] = V(null), [H, G] = V({ width: 0, height: 0 });
+  let r = null, S = null;
+  const l = c.state, w = d(() => l().widgets), u = d(() => l().viewport), J = d(() => l().locked), N = d(() => l().filters), F = d(() => l().selectedWidgetId), b = d(() => kt(w())), Q = d(() => `${Math.round(u().scale * 100)}%`), tt = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, m = d(
+    () => Ot(tt())
+  ), I = (t, e) => {
+    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, s = H();
+    return s.width === n && s.height === i ? s : (G(o), o);
+  }, R = () => {
+    S?.disconnect(), S = null;
+  }, a = () => r ? I(r.clientWidth, r.clientHeight) : I(0, 0), et = (t) => {
     if (r === (t ?? null)) {
-      w();
+      a();
       return;
     }
-    N(), r = t ?? null, w(), !(!r || typeof ResizeObserver > "u") && (x = new ResizeObserver((e) => {
+    R(), r = t ?? null, a(), !(!r || typeof ResizeObserver > "u") && (S = new ResizeObserver((e) => {
       const n = e[0];
-      X(
+      I(
         n?.contentRect.width ?? r?.clientWidth ?? 0,
         n?.contentRect.height ?? r?.clientHeight ?? 0
       );
-    }), x.observe(r));
+    }), S.observe(r));
   };
-  mt(() => {
-    N(), r = null;
+  xt(() => {
+    R(), r = null;
   });
-  const Q = (t) => {
-    W({
+  const nt = (t) => {
+    x({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: t.worldX,
       worldY: t.worldY
     });
-  }, tt = (t, e) => {
-    S(e.id), W({
+  }, it = (t, e) => {
+    f(e.id), x({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: e.x,
       worldY: e.y,
       widgetId: e.id
     });
-  }, g = () => W(null), et = (t) => a().widgets.find((e) => e.id === t) ?? null, b = (t) => a().widgets.find((e) => e.type === t) ?? null, R = d(() => {
-    const t = m();
+  }, h = () => x(null), ot = (t) => l().widgets.find((e) => e.id === t) ?? null, M = (t) => l().widgets.find((e) => e.type === t) ?? null, T = d(() => {
+    const t = W();
     if (!t) return [];
     if (t.widgetId) {
-      const e = h().find((i) => i.id === t.widgetId), n = [];
+      const e = w().find((i) => i.id === t.widgetId), n = [];
       return e && (n.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: Wt,
+        icon: St,
         onSelect: () => {
-          S(e.id), g();
+          f(e.id), h();
         }
       }), n.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: xt,
+        icon: Ct,
         onSelect: () => {
-          V(e.type, e.x + 32, e.y + 32), g();
+          E(e.type, e.x + 32, e.y + 32), h();
         }
       })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: St,
+        icon: pt,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && y(t.widgetId), g();
+          t.widgetId && Y(t.widgetId), h();
         }
       }), n;
     }
-    return f().map((e) => ({
+    return m().map((e) => ({
       id: `add-${e.type}`,
       kind: "action",
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: () => {
-        Y(e.type, t.worldX, t.worldY), g();
+        y(e.type, t.worldX, t.worldY), h();
       }
     }));
-  }), nt = d(() => {
-    const t = m();
+  }), ct = d(() => {
+    const t = W();
     if (!t) return;
-    const e = R(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return pt({
+    const e = T(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return Ft({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: bt,
-      menuHeight: Mt(n, i)
+      menuWidth: Yt,
+      menuHeight: vt(n, i)
     });
-  }), M = (t, e, n) => {
-    const i = $(t, f()), o = i.singleton ? b(t) : null;
+  }), X = (t, e, n) => {
+    const i = j(t, m()), o = i.singleton ? M(t) : null;
     if (o)
-      return C(o, { centerViewport: !0 });
-    const c = i.defaultSize, l = {
-      id: kt(),
+      return p(o, { centerViewport: !0 });
+    const s = i.defaultSize, g = {
+      id: bt(),
       type: t,
       title: i.defaultTitle,
       x: e,
       y: n,
-      width: c.width,
-      height: c.height,
-      z_index: F() + 1,
+      width: s.width,
+      height: s.height,
+      z_index: b() + 1,
       created_at_unix_ms: Date.now()
     };
-    return s.setState((p) => ({
-      ...p,
-      widgets: [...p.widgets, l],
-      selectedWidgetId: l.id
-    })), l;
-  }, Y = (t, e, n) => {
-    const i = $(t, f()).defaultSize;
-    return M(t, e - i.width / 2, n - i.height / 2);
-  }, V = (t, e, n) => M(t, e, n), y = (t) => {
-    s.setState((e) => ({
+    return c.setState((k) => ({
+      ...k,
+      widgets: [...k.widgets, g],
+      selectedWidgetId: g.id
+    })), g;
+  }, y = (t, e, n) => {
+    const i = j(t, m()).defaultSize;
+    return X(t, e - i.width / 2, n - i.height / 2);
+  }, E = (t, e, n) => X(t, e, n), Y = (t) => {
+    c.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
       selectedWidgetId: e.selectedWidgetId === t ? null : e.selectedWidgetId
     }));
-  }, it = (t) => {
-    A(t);
-  }, S = (t) => {
-    A(t);
-    const e = F(), n = h().find((i) => i.id === t);
-    n && n.z_index < e && s.setState((i) => ({
+  }, st = (t) => {
+    D(t);
+  }, f = (t) => {
+    D(t);
+    const e = b(), n = w().find((i) => i.id === t);
+    n && n.z_index < e && c.setState((i) => ({
       ...i,
       widgets: i.widgets.map(
         (o) => o.id === t ? { ...o, z_index: e + 1 } : o
       )
     }));
-  }, ot = (t, e) => {
-    s.setState((n) => ({
+  }, rt = (t, e) => {
+    c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
       )
     }));
-  }, st = (t, e) => {
-    s.setState((n) => ({
+  }, dt = (t, e) => {
+    c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
       )
     }));
-  }, I = (t) => {
-    s.setState((e) => ({ ...e, viewport: t }));
-  }, H = (t) => {
-    const e = u(), n = w(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, c = Xt(
-      t === "in" ? e.scale * Z : e.scale / Z
-    ), l = {
-      x: n.width / 2 - i * c,
-      y: n.height / 2 - o * c,
-      scale: c
+  }, v = (t) => {
+    c.setState((e) => ({ ...e, viewport: t }));
+  }, B = (t) => {
+    const e = u(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Mt(
+      t === "in" ? e.scale * $ : e.scale / $
+    ), g = {
+      x: n.width / 2 - i * s,
+      y: n.height / 2 - o * s,
+      scale: s
     };
-    I(l);
-  }, ct = () => {
-    s.setState((t) => ({ ...t, locked: !t.locked }));
-  }, rt = (t) => {
-    s.setState((e) => ({
+    v(g);
+  }, lt = () => {
+    c.setState((t) => ({ ...t, locked: !t.locked }));
+  }, at = (t) => {
+    c.setState((e) => ({
       ...e,
       filters: { ...e.filters, [t]: !e.filters[t] }
     }));
-  }, dt = (t) => {
-    s.setState((e) => {
+  }, gt = (t) => {
+    c.setState((e) => {
       const n = { ...e.filters };
       for (const i of Object.keys(n))
         n[i] = i === t;
       return { ...e, filters: n };
     });
-  }, lt = () => {
-    const t = yt(f());
-    s.setState((e) => ({
+  }, ut = () => {
+    const t = zt(m());
+    c.setState((e) => ({
       ...e,
       filters: t
     }));
-  }, E = (t) => {
-    s.setState((e) => ({ ...e, selectedWidgetId: t }));
-  }, at = () => {
-    const t = w(), e = u();
+  }, C = (t) => {
+    c.setState((e) => ({ ...e, selectedWidgetId: t }));
+  }, q = () => {
+    c.setState(
+      (t) => t.selectedWidgetId === null ? t : { ...t, selectedWidgetId: null }
+    );
+  }, ht = () => {
+    const t = a(), e = u();
     return {
       worldX: t.width > 0 ? (t.width / 2 - e.x) / e.scale : 240,
       worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
     };
   };
-  let q = 0;
-  const ut = (t, e, n) => {
-    const i = u(), o = i.x, c = i.y, l = i.scale, p = performance.now(), gt = 360, ht = ++q, ft = (v) => 1 - Math.pow(1 - v, 3), B = (v) => {
-      if (ht !== q) return;
-      const wt = v - p, P = Math.min(Math.max(wt / gt, 0), 1), O = ft(P);
-      I({
-        x: o + (t - o) * O,
-        y: c + (e - c) * O,
-        scale: l + (n - l) * O
-      }), P < 1 && requestAnimationFrame(B);
+  let P = 0;
+  const O = (t) => {
+    const e = u(), n = e.x, i = e.y, o = e.scale, s = performance.now(), g = 360, k = ++P, mt = (_) => 1 - Math.pow(1 - _, 3), Z = (_) => {
+      if (k !== P) return;
+      const Wt = _ - s, K = Math.min(Math.max(Wt / g, 0), 1), A = mt(K);
+      v({
+        x: n + (t.x - n) * A,
+        y: i + (t.y - i) * A,
+        scale: o + (t.scale - o) * A
+      }), K < 1 && requestAnimationFrame(Z);
     };
-    requestAnimationFrame(B);
+    requestAnimationFrame(Z);
   }, z = (t) => {
-    const e = w();
-    if (e.width === 0 || e.height === 0) return;
-    const n = u(), i = e.width / 2 - (t.x + t.width / 2) * n.scale, o = e.height / 2 - (t.y + t.height / 2) * n.scale;
-    ut(i, o, n.scale);
-  }, C = (t, e = {}) => (E(t.id), S(t.id), e.centerViewport !== !1 && z(t), t);
+    const e = a();
+    e.width === 0 || e.height === 0 || O(L({
+      widget: t,
+      scale: u().scale,
+      frameWidth: e.width,
+      frameHeight: e.height
+    }));
+  }, ft = (t) => {
+    const e = a();
+    e.width === 0 || e.height === 0 || O(yt({
+      widget: t,
+      frameWidth: e.width,
+      frameHeight: e.height
+    }));
+  }, wt = (t) => {
+    const e = a();
+    e.width === 0 || e.height === 0 || O(L({
+      widget: t,
+      scale: Xt,
+      frameWidth: e.width,
+      frameHeight: e.height
+    }));
+  }, p = (t, e = {}) => (C(t.id), f(t.id), e.centerViewport !== !1 && z(t), t);
   return {
-    widgets: h,
+    widgets: w,
     viewport: u,
-    canvasFrameSize: D,
-    locked: L,
-    filters: T,
-    selectedWidgetId: k,
-    topZIndex: F,
-    scaleLabel: U,
-    optimisticFrontWidgetId: j,
-    widgetDefinitions: f,
-    setCanvasFrameRef: J,
+    canvasFrameSize: H,
+    locked: J,
+    filters: N,
+    selectedWidgetId: F,
+    topZIndex: b,
+    scaleLabel: Q,
+    optimisticFrontWidgetId: U,
+    widgetDefinitions: m,
+    setCanvasFrameRef: et,
     contextMenu: {
-      state: m,
-      items: R,
-      position: nt,
-      close: g,
+      state: W,
+      items: T,
+      position: ct,
+      close: h,
       retarget: (t) => {
-        t.preventDefault(), t.stopPropagation(), W({
+        t.preventDefault(), t.stopPropagation(), x({
           clientX: t.clientX,
           clientY: t.clientY,
           worldX: 0,
@@ -233,54 +255,60 @@ function Nt(s) {
       }
     },
     canvas: {
-      openCanvasContextMenu: Q,
-      openWidgetContextMenu: tt,
-      selectWidget: E,
-      startOptimisticFront: it,
-      commitFront: S,
-      commitMove: ot,
-      commitResize: st,
-      commitViewport: I
+      openCanvasContextMenu: nt,
+      openWidgetContextMenu: it,
+      selectWidget: C,
+      clearSelection: q,
+      startOptimisticFront: st,
+      commitFront: f,
+      commitMove: rt,
+      commitResize: dt,
+      commitViewport: v
     },
     hud: {
-      zoomIn: () => H("in"),
-      zoomOut: () => H("out")
+      zoomIn: () => B("in"),
+      zoomOut: () => B("out")
     },
     lock: {
-      toggle: ct
+      toggle: lt
     },
     filter: {
-      toggle: rt,
-      solo: dt,
-      showAll: lt
+      toggle: at,
+      solo: gt,
+      showAll: ut
     },
     navigation: {
       handleArrowNavigation: (t) => {
-        const e = Ft(
-          h(),
-          k(),
+        const e = It(
+          w(),
+          F(),
           t,
-          T()
+          N()
         );
-        e && C(e);
+        e && p(e);
       },
       centerOnWidget: z,
-      focusWidget: C
+      focusWidget: p,
+      fitWidget: (t) => (C(t.id), f(t.id), ft(t), t),
+      overviewWidget: (t) => (C(t.id), f(t.id), wt(t), t)
+    },
+    selection: {
+      clear: q
     },
     widgetActions: {
       deleteSelected: () => {
-        const t = k();
-        t && y(t);
+        const t = F();
+        t && Y(t);
       },
-      deleteWidget: y,
-      addWidget: M,
-      addWidgetAtCursor: Y,
-      addWidgetCentered: V,
+      deleteWidget: Y,
+      addWidget: X,
+      addWidgetAtCursor: y,
+      addWidgetCentered: E,
       ensureWidget: (t, e) => {
-        const n = b(t);
+        const n = M(t);
         if (n)
-          return C(n, { centerViewport: e?.centerViewport ?? !0 });
-        const i = at(), o = Y(
+          return p(n, { centerViewport: e?.centerViewport ?? !0 });
+        const i = ht(), o = y(
           t,
           e?.worldX ?? i.worldX,
           e?.worldY ?? i.worldY
@@ -289,18 +317,18 @@ function Nt(s) {
       }
     },
     queries: {
-      findWidgetByType: b,
-      findWidgetById: et
+      findWidgetByType: M,
+      findWidgetById: ot
     },
     handleCloseRequest: () => {
-      if (m()) {
-        g();
+      if (W()) {
+        h();
         return;
       }
-      s.onClose();
+      c.onClose();
     }
   };
 }
 export {
-  Nt as useWorkbenchModel
+  qt as useWorkbenchModel
 };

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

@@ -0,0 +1,5 @@
+export declare const WORKBENCH_CONTEXT_MENU_ATTR = "data-floe-workbench-context-menu";
+export declare function installWorkbenchContextMenuDismissListeners(options: {
+    ownerWindow: Window;
+    onDismiss: () => void;
+}): () => void;

package/dist/components/workbench/workbenchContextMenuDismiss.js

@@ -0,0 +1,29 @@
+const i = "data-floe-workbench-context-menu";
+function s(e) {
+  return !e || typeof e != "object" ? !1 : e.dataset?.floeWorkbenchContextMenu === "true";
+}
+function d(e) {
+  if (typeof e.composedPath == "function") {
+    for (const t of e.composedPath())
+      if (s(t))
+        return !0;
+  }
+  const n = e.target;
+  return typeof Element < "u" && n instanceof Element ? n.closest(`[${i}="true"]`) !== null : !1;
+}
+function c(e) {
+  const n = (o) => {
+    d(o) || e.onDismiss();
+  }, t = (o) => {
+    o.key === "Escape" && e.onDismiss();
+  }, r = () => {
+    e.onDismiss();
+  };
+  return e.ownerWindow.addEventListener("pointerdown", n, !0), e.ownerWindow.addEventListener("keydown", t, !0), e.ownerWindow.addEventListener("resize", r), e.ownerWindow.addEventListener("scroll", r, !0), () => {
+    e.ownerWindow.removeEventListener("pointerdown", n, !0), e.ownerWindow.removeEventListener("keydown", t, !0), e.ownerWindow.removeEventListener("resize", r), e.ownerWindow.removeEventListener("scroll", r, !0);
+  };
+}
+export {
+  i as WORKBENCH_CONTEXT_MENU_ATTR,
+  c as installWorkbenchContextMenuDismissListeners
+};

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

@@ -23,6 +23,23 @@ export declare function sanitizeWorkbenchState(input: unknown, options?: Sanitiz
 export declare function createDefaultWorkbenchState(widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): WorkbenchState;
 export declare const WORKBENCH_CANVAS_ZOOM_STEP = 1.18;
 export declare const WORKBENCH_CONTEXT_MENU_WIDTH_PX = 200;
+export declare const WORKBENCH_MIN_SCALE = 0.45;
+export declare const WORKBENCH_MAX_SCALE = 2.2;
+export declare const WORKBENCH_VIEWPORT_FIT_PADDING_PX = 48;
+export declare function createWorkbenchViewportCenteredOnWidget(options: {
+    widget: WorkbenchWidgetItem;
+    scale: number;
+    frameWidth: number;
+    frameHeight: number;
+}): WorkbenchViewport;
+export declare function createWorkbenchViewportFitForWidget(options: {
+    widget: WorkbenchWidgetItem;
+    frameWidth: number;
+    frameHeight: number;
+    minScale?: number;
+    maxScale?: number;
+    paddingPx?: number;
+}): WorkbenchViewport;
 export interface WorkbenchRenderLayerMap {
     byWidgetId: ReadonlyMap<string, number>;
     topRenderLayer: number;