@floegence/floe-webapp-core 0.36.3 → 0.36.5

package/dist/components/workbench/useWorkbenchModel.js

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

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

@@ -10,6 +10,11 @@ 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 interface WorkbenchRenderLayerMap {
+    byWidgetId: ReadonlyMap<string, number>;
+    topRenderLayer: number;
+}
+export declare function createWorkbenchRenderLayerMap(widgets: readonly WorkbenchWidgetItem[]): WorkbenchRenderLayerMap;
 export declare function createContextMenuPosition(options: {
     clientX: number;
     clientY: number;