@floegence/floe-webapp-core 0.36.12 → 0.36.15

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,23 +1,23 @@
-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 });
+import { createSignal as N, createMemo as d, onCleanup as St } from "solid-js";
+import { ArrowUp as Ct, Copy as pt, Trash as kt } from "../icons/index.js";
+import { getTopZIndex as Ft, createContextMenuPosition as bt, createWorkbenchId as It, createWorkbenchViewportCenteredOnWidget as L, findNearestWidget as Mt, clampScale as Xt, WORKBENCH_CANVAS_ZOOM_STEP as $, WORKBENCH_MIN_SCALE as vt, createWorkbenchViewportFitForWidget as yt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Yt, estimateContextMenuHeight as Ot } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as zt, getWidgetEntry as j, createWorkbenchFilterState as _t } from "./widgets/widgetRegistry.js";
+function Pt(c) {
+  const [W, x] = N(null), [U, D] = N(null), [H, G] = N({ 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())
+  const l = c.state, w = d(() => l().widgets), u = d(() => l().viewport), J = d(() => l().locked), R = d(() => l().filters), F = d(() => l().selectedWidgetId), b = d(() => Ft(w())), Q = d(() => `${Math.round(u().scale * 100)}%`), tt = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, m = d(
+    () => zt(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 = () => {
+  }, T = () => {
     S?.disconnect(), S = null;
   }, a = () => r ? I(r.clientWidth, r.clientHeight) : I(0, 0), et = (t) => {
     if (r === (t ?? null)) {
       a();
       return;
     }
-    R(), r = t ?? null, a(), !(!r || typeof ResizeObserver > "u") && (S = new ResizeObserver((e) => {
+    T(), r = t ?? null, a(), !(!r || typeof ResizeObserver > "u") && (S = new ResizeObserver((e) => {
       const n = e[0];
       I(
         n?.contentRect.width ?? r?.clientWidth ?? 0,
@@ -25,8 +25,8 @@ function qt(c) {
       );
     }), S.observe(r));
   };
-  xt(() => {
-    R(), r = null;
+  St(() => {
+    T(), r = null;
   });
   const nt = (t) => {
     x({
@@ -43,7 +43,7 @@ function qt(c) {
       worldY: e.y,
       widgetId: e.id
     });
-  }, 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(() => {
+  }, h = () => x(null), ot = (t) => l().widgets.find((e) => e.id === t) ?? null, M = (t) => l().widgets.find((e) => e.type === t) ?? null, E = d(() => {
     const t = W();
     if (!t) return [];
     if (t.widgetId) {
@@ -52,7 +52,7 @@ function qt(c) {
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: St,
+        icon: Ct,
         onSelect: () => {
           f(e.id), h();
         }
@@ -60,18 +60,18 @@ function qt(c) {
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: Ct,
+        icon: pt,
         onSelect: () => {
-          E(e.type, e.x + 32, e.y + 32), h();
+          B(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: pt,
+        icon: kt,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && Y(t.widgetId), h();
+          t.widgetId && y(t.widgetId), h();
         }
       }), n;
     }
@@ -81,25 +81,25 @@ function qt(c) {
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: () => {
-        y(e.type, t.worldX, t.worldY), h();
+        v(e.type, t.worldX, t.worldY), h();
       }
     }));
   }), ct = d(() => {
     const t = W();
     if (!t) return;
-    const e = T(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return Ft({
+    const e = E(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return bt({
       clientX: t.clientX,
       clientY: t.clientY,
       menuWidth: Yt,
-      menuHeight: vt(n, i)
+      menuHeight: Ot(n, i)
     });
   }), X = (t, e, n) => {
     const i = j(t, m()), o = i.singleton ? M(t) : null;
     if (o)
       return p(o, { centerViewport: !0 });
     const s = i.defaultSize, g = {
-      id: bt(),
+      id: It(),
       type: t,
       title: i.defaultTitle,
       x: e,
@@ -114,10 +114,10 @@ function qt(c) {
       widgets: [...k.widgets, g],
       selectedWidgetId: g.id
     })), g;
-  }, y = (t, e, n) => {
+  }, v = (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) => {
+  }, B = (t, e, n) => X(t, e, n), y = (t) => {
     c.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
@@ -148,17 +148,17 @@ function qt(c) {
         (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
       )
     }));
-  }, v = (t) => {
+  }, Y = (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(
+  }, q = (t) => {
+    const e = u(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Xt(
       t === "in" ? e.scale * $ : e.scale / $
     ), g = {
       x: n.width / 2 - i * s,
       y: n.height / 2 - o * s,
       scale: s
     };
-    v(g);
+    Y(g);
   }, lt = () => {
     c.setState((t) => ({ ...t, locked: !t.locked }));
   }, at = (t) => {
@@ -174,14 +174,14 @@ function qt(c) {
       return { ...e, filters: n };
     });
   }, ut = () => {
-    const t = zt(m());
+    const t = _t(m());
     c.setState((e) => ({
       ...e,
       filters: t
     }));
   }, C = (t) => {
     c.setState((e) => ({ ...e, selectedWidgetId: t }));
-  }, q = () => {
+  }, P = () => {
     c.setState(
       (t) => t.selectedWidgetId === null ? t : { ...t, selectedWidgetId: null }
     );
@@ -192,48 +192,50 @@ function qt(c) {
       worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
     };
   };
-  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({
+  let O = 0;
+  const ft = () => {
+    O += 1;
+  }, z = (t) => {
+    const e = u(), n = e.x, i = e.y, o = e.scale, s = performance.now(), g = 360, k = ++O, Wt = (V) => 1 - Math.pow(1 - V, 3), Z = (V) => {
+      if (k !== O) return;
+      const xt = V - s, K = Math.min(Math.max(xt / g, 0), 1), A = Wt(K);
+      Y({
         x: n + (t.x - n) * A,
         y: i + (t.y - i) * A,
         scale: o + (t.scale - o) * A
       }), K < 1 && requestAnimationFrame(Z);
     };
     requestAnimationFrame(Z);
-  }, z = (t) => {
+  }, _ = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || O(L({
+    e.width === 0 || e.height === 0 || z(L({
       widget: t,
       scale: u().scale,
       frameWidth: e.width,
       frameHeight: e.height
     }));
-  }, ft = (t) => {
+  }, wt = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || O(yt({
+    e.width === 0 || e.height === 0 || z(yt({
       widget: t,
       frameWidth: e.width,
       frameHeight: e.height
     }));
-  }, wt = (t) => {
+  }, mt = (t) => {
     const e = a();
-    e.width === 0 || e.height === 0 || O(L({
+    e.width === 0 || e.height === 0 || z(L({
       widget: t,
-      scale: Xt,
+      scale: vt,
       frameWidth: e.width,
       frameHeight: e.height
     }));
-  }, p = (t, e = {}) => (C(t.id), f(t.id), e.centerViewport !== !1 && z(t), t);
+  }, p = (t, e = {}) => (C(t.id), f(t.id), e.centerViewport !== !1 && _(t), t);
   return {
     widgets: w,
     viewport: u,
     canvasFrameSize: H,
     locked: J,
-    filters: N,
+    filters: R,
     selectedWidgetId: F,
     topZIndex: b,
     scaleLabel: Q,
@@ -242,7 +244,7 @@ function qt(c) {
     setCanvasFrameRef: et,
     contextMenu: {
       state: W,
-      items: T,
+      items: E,
       position: ct,
       close: h,
       retarget: (t) => {
@@ -258,16 +260,17 @@ function qt(c) {
       openCanvasContextMenu: nt,
       openWidgetContextMenu: it,
       selectWidget: C,
-      clearSelection: q,
+      clearSelection: P,
       startOptimisticFront: st,
       commitFront: f,
       commitMove: rt,
       commitResize: dt,
-      commitViewport: v
+      commitViewport: Y,
+      cancelViewportNavigation: ft
     },
     hud: {
-      zoomIn: () => B("in"),
-      zoomOut: () => B("out")
+      zoomIn: () => q("in"),
+      zoomOut: () => q("out")
     },
     lock: {
       toggle: lt
@@ -279,41 +282,41 @@ function qt(c) {
     },
     navigation: {
       handleArrowNavigation: (t) => {
-        const e = It(
+        const e = Mt(
           w(),
           F(),
           t,
-          N()
+          R()
         );
         e && p(e);
       },
-      centerOnWidget: z,
+      centerOnWidget: _,
       focusWidget: p,
-      fitWidget: (t) => (C(t.id), f(t.id), ft(t), t),
-      overviewWidget: (t) => (C(t.id), f(t.id), wt(t), t)
+      fitWidget: (t) => (C(t.id), f(t.id), wt(t), t),
+      overviewWidget: (t) => (C(t.id), f(t.id), mt(t), t)
     },
     selection: {
-      clear: q
+      clear: P
     },
     widgetActions: {
       deleteSelected: () => {
         const t = F();
-        t && Y(t);
+        t && y(t);
       },
-      deleteWidget: Y,
+      deleteWidget: y,
       addWidget: X,
-      addWidgetAtCursor: y,
-      addWidgetCentered: E,
+      addWidgetAtCursor: v,
+      addWidgetCentered: B,
       ensureWidget: (t, e) => {
         const n = M(t);
         if (n)
           return p(n, { centerViewport: e?.centerViewport ?? !0 });
-        const i = ht(), o = y(
+        const i = ht(), o = v(
           t,
           e?.worldX ?? i.worldX,
           e?.worldY ?? i.worldY
         );
-        return (e?.centerViewport ?? !0) && o && z(o), o;
+        return (e?.centerViewport ?? !0) && o && _(o), o;
       }
     },
     queries: {
@@ -330,5 +333,5 @@ function qt(c) {
   };
 }
 export {
-  qt as useWorkbenchModel
+  Pt as useWorkbenchModel
 };