@floegence/floe-webapp-core 0.36.37 → 0.36.39

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,20 +1,26 @@
-import { insert as g, createComponent as d, effect as D, setAttribute as S, template as L, Portal as Y, setStyleProperty as M, delegateEvents as A } from "solid-js/web";
-import { createSignal as I, onCleanup as F, createMemo as H, For as P, Show as x } from "solid-js";
-import { Motion as w } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as y, duration as C } from "../../utils/animations.js";
-import { Layers as R, Plus as T } from "../icons/index.js";
-import { startHotInteraction as B } from "../../utils/hotInteraction.js";
-import { startPointerSession as G } from "../ui/pointerSession.js";
-var q = /* @__PURE__ */ L("<button type=button class=workbench-dock__item>"), z = /* @__PURE__ */ L('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), N = /* @__PURE__ */ L("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
-const O = 5, V = '[data-floe-workbench-canvas-frame="true"]';
-function W(t, l) {
-  const a = document.querySelector(V);
-  if (!(a instanceof HTMLElement)) return !1;
-  const c = a.getBoundingClientRect();
-  return t >= c.left && t <= c.right && l >= c.top && l <= c.bottom;
+import { insert as f, createComponent as d, effect as O, setAttribute as P, template as A, Portal as R, setStyleProperty as B, delegateEvents as V } from "solid-js/web";
+import { createSignal as $, onCleanup as G, createMemo as p, For as W, Show as M } from "solid-js";
+import { Motion as S } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as D, duration as L } from "../../utils/animations.js";
+import { Layers as q, Plus as K } from "../icons/index.js";
+import { startHotInteraction as N } from "../../utils/hotInteraction.js";
+import { startPointerSession as U } from "../ui/pointerSession.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as H, createWorkbenchEdgeAutoPanController as z, frameFromElement as j } from "./workbenchEdgeAutoPan.js";
+var J = /* @__PURE__ */ A("<button type=button class=workbench-dock__item>"), Q = /* @__PURE__ */ A('<div class=workbench-dock data-floe-canvas-interactive=true><button type=button class=workbench-dock__item aria-label="Show all widgets"></button><span class=workbench-dock__divider aria-hidden=true>'), Z = /* @__PURE__ */ A("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
+const F = 5, tt = ".workbench-dock";
+function et(t, s) {
+  const l = document.querySelector(H);
+  if (!(l instanceof HTMLElement)) return !1;
+  const c = l.getBoundingClientRect();
+  return t >= c.left && t <= c.right && s >= c.top && s <= c.bottom;
 }
-function j(t) {
-  const l = () => t.hoverOffset === -1 ? {
+function nt(t, s) {
+  if (typeof document.elementFromPoint != "function") return !1;
+  const l = document.elementFromPoint(t, s);
+  return l instanceof Element && l.closest(tt) !== null;
+}
+function ot(t) {
+  const s = () => t.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
     x: 0
@@ -30,20 +36,20 @@ function j(t) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => t.hoverOffset === -1, c = (i) => {
+  }, l = () => t.hoverOffset === -1, c = (i) => {
     i.button === 0 && t.onDragBegin(i, t.type, t.label, t.icon);
   };
   return (() => {
-    var i = q();
-    return i.$$pointerdown = c, i.addEventListener("pointerleave", () => t.onLeave()), i.addEventListener("pointerenter", () => t.onEnter()), g(i, d(w.span, {
+    var i = J();
+    return i.$$pointerdown = c, i.addEventListener("pointerleave", () => t.onLeave()), i.addEventListener("pointerenter", () => t.onEnter()), f(i, d(S.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return l();
+        return s();
       },
       get transition() {
         return {
-          duration: C.fast,
-          easing: y.easeOut
+          duration: L.fast,
+          easing: D.easeOut
         };
       },
       get children() {
@@ -54,26 +60,26 @@ function j(t) {
           });
         })();
       }
-    }), null), g(i, d(w.span, {
+    }), null), f(i, d(S.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: a() ? 1 : 0,
-          y: a() ? -6 : 0
+          opacity: l() ? 1 : 0,
+          y: l() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: C.fast,
-          easing: y.easeOut
+          duration: L.fast,
+          easing: D.easeOut
         };
       },
       get children() {
         return t.label;
       }
-    }), null), D((n) => {
-      var f = !!t.active, k = !!a(), h = !!t.isDragging, _ = `${t.label} — click to solo, drag to canvas to create`, b = t.active;
-      return f !== n.e && i.classList.toggle("is-active", n.e = f), k !== n.t && i.classList.toggle("is-hovered", n.t = k), h !== n.a && i.classList.toggle("is-source-dragging", n.a = h), _ !== n.o && S(i, "aria-label", n.o = _), b !== n.i && S(i, "aria-pressed", n.i = b), n;
+    }), null), O((n) => {
+      var u = !!t.active, v = !!l(), h = !!t.isDragging, _ = `${t.label} — click to solo, drag to canvas to create`, b = t.active;
+      return u !== n.e && i.classList.toggle("is-active", n.e = u), v !== n.t && i.classList.toggle("is-hovered", n.t = v), h !== n.a && i.classList.toggle("is-source-dragging", n.a = h), _ !== n.o && P(i, "aria-label", n.o = _), b !== n.i && P(i, "aria-pressed", n.i = b), n;
     }, {
       e: void 0,
       t: void 0,
@@ -83,179 +89,198 @@ function j(t) {
     }), i;
   })();
 }
-function nt(t) {
-  const [l, a] = I(null), [c, i] = I(null);
-  let n;
-  F(() => {
-    n?.stop({
+function gt(t) {
+  const [s, l] = $(null), [c, i] = $(null);
+  let n, u, v = null;
+  G(() => {
+    u?.stop(), n?.stop({
       reason: "manual_stop",
       commit: !1
     }), n = void 0, c()?.stopInteraction();
   });
-  const f = H(() => t.widgetDefinitions.every((o) => t.filters[o.type])), k = (o) => {
-    const r = l();
-    return r === null ? 0 : r === o ? -1 : r === o + 1 ? -2 : r === o - 1 ? 1 : 0;
-  }, h = (o) => {
-    const r = c();
-    if (!r) return;
-    const e = !r.moved;
-    if (r.stopInteraction(), i(null), n = void 0, e) {
-      t.onSoloFilter(r.type);
+  const h = p(() => t.widgetDefinitions.every((e) => t.filters[e.type])), _ = (e) => {
+    const o = s();
+    return o === null ? 0 : o === e ? -1 : o === e + 1 ? -2 : o === e - 1 ? 1 : 0;
+  }, b = () => {
+    u?.stop(), u = void 0, v = null;
+  }, E = () => {
+    !t.viewport || !t.onViewportCommit || (v = t.viewport, u?.stop(), u = z({
+      readFrame: () => {
+        const e = document.querySelector(H);
+        return e instanceof HTMLElement ? j(e) : null;
+      },
+      readViewport: () => v ?? t.viewport ?? null,
+      commitViewport: (e) => {
+        v = e, t.onViewportCommit?.(e);
+      },
+      onPanStart: () => t.onViewportInteractionStart?.("pan"),
+      shouldPan: () => {
+        const e = c();
+        return !!(e?.moved && e.overCanvas);
+      }
+    }));
+  }, y = (e) => {
+    const o = c();
+    if (!o) return;
+    const r = !o.moved;
+    if (o.stopInteraction(), b(), i(null), n = void 0, r) {
+      t.onSoloFilter(o.type);
       return;
     }
-    o && r.overCanvas && t.onCreateAt?.(r.type, r.clientX, r.clientY);
-  }, _ = (o, r, e, u) => {
-    o.preventDefault(), n?.stop({
+    e && o.overCanvas && t.onCreateAt?.(o.type, o.clientX, o.clientY);
+  }, g = (e, o, r, C) => {
+    e.preventDefault(), n?.stop({
       reason: "manual_stop",
       commit: !1
-    }), i({
-      type: r,
-      label: e,
-      icon: u,
-      pointerId: o.pointerId,
-      startClientX: o.clientX,
-      startClientY: o.clientY,
-      clientX: o.clientX,
-      clientY: o.clientY,
+    }), E(), i({
+      type: o,
+      label: r,
+      icon: C,
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      clientX: e.clientX,
+      clientY: e.clientY,
       moved: !1,
       overCanvas: !1,
-      stopInteraction: B({
+      stopInteraction: N({
         kind: "drag",
         cursor: "grabbing"
       })
     });
-    const v = (s) => {
-      i((m) => {
-        if (!m || m.pointerId !== s.pointerId) return m;
-        const X = s.clientX - m.startClientX, $ = s.clientY - m.startClientY, E = m.moved || Math.abs(X) > O || Math.abs($) > O;
-        return {
-          ...m,
-          clientX: s.clientX,
-          clientY: s.clientY,
-          moved: E,
-          overCanvas: E && W(s.clientX, s.clientY)
+    const m = (a) => {
+      let I = !1;
+      i((k) => {
+        if (!k || k.pointerId !== a.pointerId) return k;
+        const T = a.clientX - k.startClientX, x = a.clientY - k.startClientY, X = k.moved || Math.abs(T) > F || Math.abs(x) > F, Y = X && et(a.clientX, a.clientY) && !nt(a.clientX, a.clientY);
+        return I = Y, {
+          ...k,
+          clientX: a.clientX,
+          clientY: a.clientY,
+          moved: X,
+          overCanvas: Y
         };
-      });
+      }), I && u?.updatePointer(a.clientX, a.clientY);
     };
-    n = G({
-      pointerEvent: o,
-      captureEl: o.currentTarget,
-      onMove: v,
+    n = U({
+      pointerEvent: e,
+      captureEl: e.currentTarget,
+      onMove: m,
       onEnd: ({
-        commit: s
-      }) => h(s)
+        commit: a
+      }) => y(a)
     });
-  }, b = () => c()?.type ?? null;
+  }, w = () => c()?.type ?? null;
   return [(() => {
-    var o = z(), r = o.firstChild;
-    return r.nextSibling, o.addEventListener("pointerleave", () => a(null)), r.$$click = () => t.onShowAll(), r.addEventListener("pointerleave", () => a((e) => e === 0 ? null : e)), r.addEventListener("pointerenter", () => a(0)), g(r, d(w.span, {
+    var e = Q(), o = e.firstChild;
+    return o.nextSibling, e.addEventListener("pointerleave", () => l(null)), o.$$click = () => t.onShowAll(), o.addEventListener("pointerleave", () => l((r) => r === 0 ? null : r)), o.addEventListener("pointerenter", () => l(0)), f(o, d(S.span, {
       class: "workbench-dock__tile",
       get animate() {
         return {
-          scale: l() === 0 ? 1.26 : 1,
-          y: l() === 0 ? -6 : 0,
-          x: l() === 1 ? -5 : 0
+          scale: s() === 0 ? 1.26 : 1,
+          y: s() === 0 ? -6 : 0,
+          x: s() === 1 ? -5 : 0
         };
       },
       get transition() {
         return {
-          duration: C.fast,
-          easing: y.easeOut
+          duration: L.fast,
+          easing: D.easeOut
         };
       },
       get children() {
-        return d(R, {
+        return d(q, {
           class: "workbench-dock__icon"
         });
       }
-    }), null), g(r, d(w.span, {
+    }), null), f(o, d(S.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: l() === 0 ? 1 : 0,
-          y: l() === 0 ? -6 : 0
+          opacity: s() === 0 ? 1 : 0,
+          y: s() === 0 ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: C.fast,
-          easing: y.easeOut
+          duration: L.fast,
+          easing: D.easeOut
         };
       },
       children: "Show all widgets"
-    }), null), g(o, d(P, {
+    }), null), f(e, d(W, {
       get each() {
         return t.widgetDefinitions;
       },
-      children: (e, u) => {
-        const v = () => u() + 1;
-        return d(j, {
+      children: (r, C) => {
+        const m = () => C() + 1;
+        return d(ot, {
           get type() {
-            return e.type;
+            return r.type;
           },
           get label() {
-            return e.label;
+            return r.label;
           },
           get icon() {
-            return e.icon;
+            return r.icon;
           },
           get active() {
-            return t.filters[e.type];
+            return t.filters[r.type];
           },
           get hoverOffset() {
-            return k(v());
+            return _(m());
           },
           get isDragging() {
-            return b() === e.type;
+            return w() === r.type;
           },
-          onEnter: () => a(v()),
-          onLeave: () => a((s) => s === v() ? null : s),
-          onSolo: () => t.onSoloFilter(e.type),
-          onDragBegin: _
+          onEnter: () => l(m()),
+          onLeave: () => l((a) => a === m() ? null : a),
+          onSolo: () => t.onSoloFilter(r.type),
+          onDragBegin: g
         });
       }
-    }), null), D((e) => {
-      var u = !!f(), v = l() === 0, s = f();
-      return u !== e.e && r.classList.toggle("is-active", e.e = u), v !== e.t && r.classList.toggle("is-hovered", e.t = v), s !== e.a && S(r, "aria-pressed", e.a = s), e;
+    }), null), O((r) => {
+      var C = !!h(), m = s() === 0, a = h();
+      return C !== r.e && o.classList.toggle("is-active", r.e = C), m !== r.t && o.classList.toggle("is-hovered", r.t = m), a !== r.a && P(o, "aria-pressed", r.a = a), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), o;
-  })(), d(x, {
+    }), e;
+  })(), d(M, {
     get when() {
       return c()?.moved ?? !1;
     },
     get children() {
-      return d(J, {
+      return d(rt, {
         state: c
       });
     }
   })];
 }
-function J(t) {
-  const l = () => {
+function rt(t) {
+  const s = () => {
     const n = t.state();
     return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => t.state()?.overCanvas ?? !1, c = () => t.state()?.label ?? "", i = () => t.state()?.icon;
-  return d(Y, {
+  }, l = () => t.state()?.overCanvas ?? !1, c = () => t.state()?.label ?? "", i = () => t.state()?.icon;
+  return d(R, {
     get children() {
-      var n = N(), f = n.firstChild, k = f.nextSibling, h = k.firstChild, _ = h.nextSibling, b = _.firstChild, o = b.nextSibling, r = o.firstChild;
-      return g(h, d(x, {
+      var n = Z(), u = n.firstChild, v = u.nextSibling, h = v.firstChild, _ = h.nextSibling, b = _.firstChild, E = b.nextSibling, y = E.firstChild;
+      return f(h, d(M, {
         get when() {
           return i();
         },
-        children: (e) => {
-          const u = e();
-          return d(u, {
+        children: (g) => {
+          const w = g();
+          return d(w, {
             class: "w-4 h-4"
           });
         }
-      })), g(b, c), g(o, d(T, {
+      })), f(b, c), f(E, d(K, {
         class: "w-3 h-3"
-      }), r), g(r, () => a() ? "Drop to create" : "Drag onto canvas"), D((e) => {
-        var u = !!a(), v = l();
-        return u !== e.e && n.classList.toggle("is-over-canvas", e.e = u), v !== e.t && M(n, "transform", e.t = v), e;
+      }), y), f(y, () => l() ? "Drop to create" : "Drag onto canvas"), O((g) => {
+        var w = !!l(), e = s();
+        return w !== g.e && n.classList.toggle("is-over-canvas", g.e = w), e !== g.t && B(n, "transform", g.t = e), g;
       }, {
         e: void 0,
         t: void 0
@@ -263,7 +288,7 @@ function J(t) {
     }
   });
 }
-A(["pointerdown", "click"]);
+V(["pointerdown", "click"]);
 export {
-  nt as WorkbenchFilterBar
+  gt as WorkbenchFilterBar
 };

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,8 +1,8 @@
-import { use as _, spread as B, mergeProps as q, insert as m, createComponent as u, Portal as N, addEventListener as z, template as A, delegateEvents as H } from "solid-js/web";
-import { createSignal as M, createMemo as w, untrack as W, createEffect as v, onCleanup as h, Show as P } from "solid-js";
-import { clientToCanvasWorld as X } from "../ui/canvasGeometry.js";
-import { WorkbenchCanvas as $ } from "./WorkbenchCanvas.js";
-import { WorkbenchContextMenu as V } from "./WorkbenchContextMenu.js";
+import { use as _, spread as B, mergeProps as q, insert as m, createComponent as u, Portal as V, addEventListener as N, template as A, delegateEvents as z } from "solid-js/web";
+import { createSignal as M, createMemo as w, untrack as W, createEffect as v, onCleanup as h, Show as H } from "solid-js";
+import { clientToCanvasWorld as P } from "../ui/canvasGeometry.js";
+import { WorkbenchCanvas as X } from "./WorkbenchCanvas.js";
+import { WorkbenchContextMenu as $ } from "./WorkbenchContextMenu.js";
 import { WorkbenchFilterBar as Y } from "./WorkbenchFilterBar.js";
 import { WorkbenchHud as K } from "./WorkbenchHud.js";
 import { WorkbenchLockButton as U } from "./WorkbenchLockButton.js";
@@ -52,7 +52,7 @@ function he(i) {
       widget: a,
       closeMenu: t.contextMenu.close
     });
-  }), b = w(() => {
+  }), I = w(() => {
     const e = t.contextMenu.state();
     if (!e) return;
     const n = C(), r = n.filter((a) => a.kind === "action").length, o = n.filter((a) => a.kind === "separator").length;
@@ -62,7 +62,7 @@ function he(i) {
       menuWidth: j,
       menuHeight: J(r, o)
     });
-  }), I = (e, n, r) => {
+  }), b = (e, n, r) => {
     const o = s(), a = o.findWidgetRoot(e), c = o.readWidgetId(a);
     if (c) {
       l(o.createWidgetInputOwner(c, n));
@@ -152,9 +152,9 @@ function he(i) {
     const e = d();
     if (!e) return;
     const n = (o) => {
-      I(o.target, "pointer", "background_pointer");
+      b(o.target, "pointer", "background_pointer");
     }, r = (o) => {
-      I(o.target, "focus", "background_focus");
+      b(o.target, "focus", "background_focus");
     };
     e.addEventListener("pointerdown", n, !0), e.addEventListener("focusin", r), h(() => {
       e.removeEventListener("pointerdown", n, !0), e.removeEventListener("focusin", r);
@@ -199,7 +199,7 @@ function he(i) {
     const r = d()?.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!r) return null;
     const o = r.getBoundingClientRect();
-    return X(o, t.viewport(), {
+    return P(o, t.viewport(), {
       clientX: e,
       clientY: n
     });
@@ -220,7 +220,7 @@ function he(i) {
         return t.theme();
       },
       tabIndex: -1
-    }), !1, !0), m(n, u($, {
+    }), !1, !0), m(n, u(X, {
       get widgetDefinitions() {
         return t.widgetDefinitions();
       },
@@ -310,12 +310,19 @@ function he(i) {
       get filters() {
         return t.filters();
       },
+      get viewport() {
+        return t.viewport();
+      },
       get onSoloFilter() {
         return t.filter.solo;
       },
       get onShowAll() {
         return t.filter.showAll;
       },
+      get onViewportCommit() {
+        return t.canvas.commitViewport;
+      },
+      onViewportInteractionStart: () => t.canvas.cancelViewportNavigation(),
       onCreateAt: F
     }), null), m(e, u(K, {
       get scaleLabel() {
@@ -331,22 +338,22 @@ function he(i) {
         return t.theme();
       },
       onSelectTheme: (r) => t.appearance.setTheme(r)
-    }), null), m(e, u(P, {
+    }), null), m(e, u(H, {
       get when() {
         return t.contextMenu.state();
       },
       get children() {
-        return u(N, {
+        return u(V, {
           get children() {
             return [(() => {
               var r = te();
-              return z(r, "contextmenu", t.contextMenu.retarget, !0), r;
-            })(), u(V, {
+              return N(r, "contextmenu", t.contextMenu.retarget, !0), r;
+            })(), u($, {
               get x() {
-                return b()?.left ?? 0;
+                return I()?.left ?? 0;
               },
               get y() {
-                return b()?.top ?? 0;
+                return I()?.top ?? 0;
               },
               get items() {
                 return C();
@@ -358,7 +365,7 @@ function he(i) {
     }), null), e;
   })();
 }
-H(["contextmenu"]);
+z(["contextmenu"]);
 export {
   he as WorkbenchSurface
 };

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

@@ -22,6 +22,7 @@ export interface WorkbenchWidgetProps {
     projectedViewport?: Accessor<WorkbenchViewport>;
     surfaceReady?: boolean;
     interactionAdapter?: WorkbenchInteractionAdapter | ResolvedWorkbenchInteractionAdapter;
+    viewport?: WorkbenchViewport;
     onSelect: (widgetId: string) => void;
     onContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onStartOptimisticFront: (widgetId: string) => void;
@@ -34,6 +35,8 @@ export interface WorkbenchWidgetProps {
         width: number;
         height: number;
     }) => void;
+    onViewportCommit?: (viewport: WorkbenchViewport) => void;
+    onViewportInteractionStart?: (kind: 'pan') => void;
     onRequestOverview: (item: WorkbenchWidgetItem) => void;
     onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;