@floegence/floe-webapp-core 0.36.38 → 0.36.40

package/dist/components/workbench/WorkbenchFilterBar.js

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