@floegence/floe-webapp-core 0.86.20 → 0.86.21

package/dist/components/graph/GraphCanvas.js

@@ -1,111 +1,111 @@
-import { insert as w, createComponent as x, setAttribute as l, effect as L, className as K, template as I, memo as ae, setStyleProperty as T, use as ie, delegateEvents as oe } from "solid-js/web";
-import { createUniqueId as le, createSignal as O, createMemo as y, onMount as ce, For as j, Show as D, onCleanup as de } from "solid-js";
-import { InfiniteCanvas as ue } from "../ui/InfiniteCanvas.js";
-import { resolveSurfaceInteractionTargetRole as se } from "../ui/localInteractionSurface.js";
-import { graphRelatedEdges as U, graphEdgeLabelPosition as he, graphSectionPath as ge } from "./geometry.js";
-import { GraphMinimap as fe } from "./GraphMinimap.js";
-var ve = /* @__PURE__ */ I("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), me = /* @__PURE__ */ I("<div role=region tabindex=0>"), be = /* @__PURE__ */ I('<svg class=floe-graph__edges width=1 height=1><defs><marker viewBox="0 0 8 8"refX=7 refY=4 markerWidth=7 markerHeight=7 orient=auto-start-reverse><path d="M1 1 L7 4 L1 7"fill=none stroke=context-stroke stroke-width=1.2>'), xe = /* @__PURE__ */ I("<svg><g><path class=floe-graph__edge></path><path class=floe-graph__edge-target tabindex=0 role=button data-floe-canvas-pan-surface=true></svg>", !1, !0, !1), ye = /* @__PURE__ */ I("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
-function Ee(i) {
-  const H = `graph-arrow-${le()}`;
-  let g;
-  const [J, Q] = O(null), [V, Z] = O({
+import { insert as S, createComponent as w, setAttribute as c, effect as z, setStyleProperty as L, className as U, template as B, memo as it, use as ot, delegateEvents as lt } from "solid-js/web";
+import { createUniqueId as dt, createSignal as J, createMemo as x, onMount as ct, For as Y, Show as _, onCleanup as ut } from "solid-js";
+import { InfiniteCanvas as st } from "../ui/InfiniteCanvas.js";
+import { resolveSurfaceInteractionTargetRole as ht } from "../ui/localInteractionSurface.js";
+import { graphRelatedEdges as Q, graphEdgeLabelPosition as gt, graphSectionPath as vt } from "./geometry.js";
+import { GraphMinimap as ft } from "./GraphMinimap.js";
+var mt = /* @__PURE__ */ B("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), bt = /* @__PURE__ */ B("<div role=region tabindex=0>"), xt = /* @__PURE__ */ B('<svg class=floe-graph__edges><defs><marker viewBox="0 0 8 8"refX=7 refY=4 markerWidth=7 markerHeight=7 orient=auto-start-reverse><path d="M1 1 L7 4 L1 7"fill=none stroke=context-stroke stroke-width=1.2>'), yt = /* @__PURE__ */ B("<svg><g><path class=floe-graph__edge></path><path class=floe-graph__edge-target tabindex=0 role=button data-floe-canvas-pan-surface=true></svg>", !1, !0, !1), kt = /* @__PURE__ */ B("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
+function Lt(i) {
+  const N = `graph-arrow-${dt()}`;
+  let v;
+  const [Z, p] = J(null), [V, tt] = J({
     width: 0,
     height: 0
-  }), X = () => i.highlight === void 0 ? J() : i.highlight, p = y(() => new Map(i.layout.nodes.map((e) => [e.id, e]))), ee = y(() => {
-    const e = X();
-    return e?.kind === "node" ? U(i.layout, e.id) : new Set(e ? [e.id] : []);
-  }), Y = y(() => {
-    const e = X();
-    if (e?.kind !== "node") return null;
-    const t = p().get(e.id), n = t?.kind === "group" ? t.id : t?.parentId;
-    return n ? U(i.layout, n) : null;
-  }), A = (e) => i.selected?.kind === e.kind && i.selected.id === e.id, B = (e) => {
+  }), F = () => i.highlight === void 0 ? Z() : i.highlight, et = x(() => new Map(i.layout.nodes.map((t) => [t.id, t]))), nt = x(() => {
+    const t = F();
+    return t?.kind === "node" ? Q(i.layout, t.id) : new Set(t ? [t.id] : []);
+  }), W = x(() => {
+    const t = F();
+    if (t?.kind !== "node") return null;
+    const e = et().get(t.id), r = e?.kind === "group" ? e.id : e?.parentId;
+    return r ? Q(i.layout, r) : null;
+  }), j = (t) => i.selected?.kind === t.kind && i.selected.id === t.id, D = (t) => {
     const {
-      width: t,
-      height: n
+      width: e,
+      height: r
     } = V();
-    if (!t || !n) return;
-    const r = -e.x / e.scale - 240, a = -e.y / e.scale - 240, m = r + t / e.scale + 480, c = a + n / e.scale + 480;
+    if (!e || !r) return;
+    const n = -t.x / t.scale - 240, a = -t.y / t.scale - 240, y = n + e / t.scale + 480, s = a + r / t.scale + 480;
     return {
-      left: r,
+      left: n,
       top: a,
-      right: m,
-      bottom: c
+      right: y,
+      bottom: s
     };
-  }, te = (e) => {
-    const t = B(e);
-    if (!t) return i.layout.nodes;
+  }, rt = (t) => {
+    const e = D(t);
+    if (!e) return i.layout.nodes;
     const {
-      left: n,
-      top: r,
+      left: r,
+      top: n,
       right: a,
-      bottom: m
-    } = t;
-    return i.layout.nodes.filter((c) => c.id === i.selected?.id || c.x + c.width >= n && c.x <= a && c.y + c.height >= r && c.y <= m);
-  }, N = y(() => i.layout.edges.map((e) => ({
-    edge: e,
-    path: e.sections.map(ge).join(" "),
-    label: he(e.sections),
-    segments: e.sections.flatMap((t) => t.slice(1).map((n, r) => ({
-      left: Math.min(n.x, t[r].x),
-      right: Math.max(n.x, t[r].x),
-      top: Math.min(n.y, t[r].y),
-      bottom: Math.max(n.y, t[r].y)
+      bottom: y
+    } = e;
+    return i.layout.nodes.filter((s) => s.id === i.selected?.id || s.x + s.width >= r && s.x <= a && s.y + s.height >= n && s.y <= y);
+  }, q = x(() => i.layout.edges.map((t) => ({
+    edge: t,
+    path: t.sections.map(vt).join(" "),
+    label: gt(t.sections),
+    segments: t.sections.flatMap((e) => e.slice(1).map((r, n) => ({
+      left: Math.min(r.x, e[n].x),
+      right: Math.max(r.x, e[n].x),
+      top: Math.min(r.y, e[n].y),
+      bottom: Math.max(r.y, e[n].y)
     })))
-  }))), ne = (e) => {
-    const t = B(e);
-    return t ? N().filter(({
-      edge: n,
-      segments: r
-    }) => n.id === i.selected?.id || r.some((a) => a.left <= t.right && a.right >= t.left && a.top <= t.bottom && a.bottom >= t.top)) : N();
-  }, f = (e) => {
-    Q(e), i.onHover?.(e);
-  }, k = (e, t, n) => {
-    const r = t.getBoundingClientRect();
+  }))), at = (t) => {
+    const e = D(t);
+    return e ? q().filter(({
+      edge: r,
+      segments: n
+    }) => r.id === i.selected?.id || n.some((a) => a.left <= e.right && a.right >= e.left && a.top <= e.bottom && a.bottom >= e.top)) : q();
+  }, f = (t) => {
+    p(t), i.onHover?.(t);
+  }, $ = (t, e, r) => {
+    const n = e.getBoundingClientRect();
     return {
-      object: e,
-      owner: t,
-      position: n && (n.clientX !== 0 || n.clientY !== 0) ? {
-        x: n.clientX,
-        y: n.clientY
+      object: t,
+      owner: e,
+      position: r && (r.clientX !== 0 || r.clientY !== 0) ? {
+        x: r.clientX,
+        y: r.clientY
       } : {
-        x: r.left + r.width / 2,
-        y: r.top + Math.min(32, r.height / 2)
+        x: n.left + n.width / 2,
+        y: n.top + Math.min(32, n.height / 2)
       }
     };
-  }, z = (e, t) => {
-    i.onContextMenu && (t.preventDefault(), t.stopPropagation(), i.onContextMenu(k(e, t.currentTarget, t)));
-  }, G = (e, t) => {
-    t.target === t.currentTarget && (t.key === "ContextMenu" || t.shiftKey && t.key === "F10" ? (t.preventDefault(), t.stopPropagation(), i.onContextMenu?.(k(e, t.currentTarget))) : t.key === "Enter" ? (t.preventDefault(), t.stopPropagation(), i.onActivate?.(k(e, t.currentTarget))) : t.key === "Escape" && (f(null), i.onActivate?.(k(null, g))));
+  }, H = (t, e) => {
+    i.onContextMenu && (e.preventDefault(), e.stopPropagation(), i.onContextMenu($(t, e.currentTarget, e)));
+  }, X = (t, e) => {
+    e.target === e.currentTarget && (e.key === "ContextMenu" || e.shiftKey && e.key === "F10" ? (e.preventDefault(), e.stopPropagation(), i.onContextMenu?.($(t, e.currentTarget))) : e.key === "Enter" ? (e.preventDefault(), e.stopPropagation(), i.onActivate?.($(t, e.currentTarget))) : e.key === "Escape" && (f(null), i.onActivate?.($(null, v))));
   };
-  ce(() => {
-    if (!g) return;
-    const e = () => Z({
-      width: g.clientWidth,
-      height: g.clientHeight
+  ct(() => {
+    if (!v) return;
+    const t = () => tt({
+      width: v.clientWidth,
+      height: v.clientHeight
     });
-    e();
-    const t = new ResizeObserver(e);
-    t.observe(g), de(() => t.disconnect());
+    t();
+    const e = new ResizeObserver(t);
+    e.observe(v), ut(() => e.disconnect());
   });
-  const F = (e) => {
-    const t = {
+  const K = (t) => {
+    const e = {
       kind: "node",
-      id: e.id
-    }, n = {
-      selected: () => A(t),
-      openMenu: (r) => z(t, r)
+      id: t.id
+    }, r = {
+      selected: () => j(e),
+      openMenu: (n) => H(e, n)
     };
     return (() => {
-      var r = ve();
-      return r.$$keydown = (a) => G(t, a), r.$$contextmenu = (a) => z(t, a), r.$$click = (a) => {
-        a.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (a.stopPropagation(), i.onActivate?.(k(t, a.currentTarget, a)));
-      }, r.$$focusout = () => f(null), r.$$focusin = () => f(t), r.addEventListener("pointerleave", () => f(null)), r.addEventListener("pointerenter", () => f(t)), w(r, (() => {
-        var a = ae(() => !!(e.kind === "group" && i.renderGroup));
-        return () => a() ? i.renderGroup(e, n) : i.renderNode(e, n);
-      })()), L((a) => {
-        var m = e.kind === "group" ? "floe-graph__group" : "floe-graph__node", c = e.id, d = A(t), _ = `${e.x}px`, P = `${e.y}px`, $ = `${e.width}px`, u = `${e.height}px`, v = e.label;
-        return m !== a.e && K(r, a.e = m), c !== a.t && l(r, "data-graph-object", a.t = c), d !== a.a && l(r, "data-selected", a.a = d), _ !== a.o && T(r, "left", a.o = _), P !== a.i && T(r, "top", a.i = P), $ !== a.n && T(r, "width", a.n = $), u !== a.s && T(r, "height", a.s = u), v !== a.h && l(r, "aria-label", a.h = v), a;
+      var n = mt();
+      return n.$$keydown = (a) => X(e, a), n.$$contextmenu = (a) => H(e, a), n.$$click = (a) => {
+        a.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (a.stopPropagation(), i.onActivate?.($(e, a.currentTarget, a)));
+      }, n.$$focusout = () => f(null), n.$$focusin = () => f(e), n.addEventListener("pointerleave", () => f(null)), n.addEventListener("pointerenter", () => f(e)), S(n, (() => {
+        var a = it(() => !!(t.kind === "group" && i.renderGroup));
+        return () => a() ? i.renderGroup(t, r) : i.renderNode(t, r);
+      })()), z((a) => {
+        var y = t.kind === "group" ? "floe-graph__group" : "floe-graph__node", s = t.id, G = j(e), d = `${t.x}px`, C = `${t.y}px`, M = `${t.width}px`, l = `${t.height}px`, u = t.label;
+        return y !== a.e && U(n, a.e = y), s !== a.t && c(n, "data-graph-object", a.t = s), G !== a.a && c(n, "data-selected", a.a = G), d !== a.o && L(n, "left", a.o = d), C !== a.i && L(n, "top", a.i = C), M !== a.n && L(n, "width", a.n = M), l !== a.s && L(n, "height", a.s = l), u !== a.h && c(n, "aria-label", a.h = u), a;
       }, {
         e: void 0,
         t: void 0,
@@ -115,14 +115,14 @@ function Ee(i) {
         n: void 0,
         s: void 0,
         h: void 0
-      }), r;
+      }), n;
     })();
   };
   return (() => {
-    var e = me();
-    e.$$keydown = (n) => G(null, n);
-    var t = g;
-    return typeof t == "function" ? ie(t, e) : g = e, w(e, x(ue, {
+    var t = bt();
+    t.$$keydown = (r) => X(null, r);
+    var e = v;
+    return typeof e == "function" ? ot(e, t) : v = t, S(t, w(st, {
       get viewport() {
         return i.viewport;
       },
@@ -135,64 +135,79 @@ function Ee(i) {
         return i.onViewportChange;
       },
       onViewportInteractionStart: () => i.onInteractionStart?.(),
-      resolveTargetRole: (n) => (n.target instanceof Element ? n.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : se(n),
-      onCanvasPointerDown: (n) => {
-        !(n.target instanceof Element) || n.target.closest("[data-graph-object]") || i.onActivate?.(k(null, g, n));
+      resolveTargetRole: (r) => (r.target instanceof Element ? r.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : ht(r),
+      onCanvasPointerDown: (r) => {
+        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.($(null, v, r));
       },
-      onCanvasContextMenu: (n) => i.onContextMenu?.({
+      onCanvasContextMenu: (r) => i.onContextMenu?.({
         object: null,
-        owner: g,
+        owner: v,
         position: {
-          x: n.clientX,
-          y: n.clientY
+          x: r.clientX,
+          y: r.clientY
         }
       }),
-      children: (n) => {
-        const r = y(() => te(n())), a = y(() => r().filter((d) => d.kind === "group")), m = y(() => r().filter((d) => d.kind !== "group")), c = y(() => ne(n()));
-        return [x(j, {
+      children: (r) => {
+        const n = x(() => {
+          const d = D(r());
+          if (d) return d;
+          const {
+            x: C,
+            y: M,
+            width: l,
+            height: u
+          } = i.layout.bounds;
+          return {
+            left: C - 240,
+            top: M - 240,
+            right: C + l + 240,
+            bottom: M + u + 240
+          };
+        }), a = x(() => rt(r())), y = x(() => a().filter((d) => d.kind === "group")), s = x(() => a().filter((d) => d.kind !== "group")), G = x(() => at(r()));
+        return [w(Y, {
           get each() {
-            return a();
+            return y();
           },
-          children: F
+          children: K
         }), (() => {
-          var d = be(), _ = d.firstChild, P = _.firstChild;
-          return l(P, "id", H), w(d, x(j, {
+          var d = xt(), C = d.firstChild, M = C.firstChild;
+          return c(M, "id", N), S(d, w(Y, {
             get each() {
-              return c();
+              return G();
             },
-            children: ($) => {
+            children: (l) => {
               const {
                 edge: u
-              } = $, v = {
+              } = l, m = {
                 kind: "edge",
                 id: u.id
-              }, W = () => $.path, re = () => $.label;
-              return x(D, {
+              }, I = () => l.path, R = () => l.label;
+              return w(_, {
                 get when() {
-                  return !Y() || Y().has(u.id);
+                  return !W() || W().has(u.id);
                 },
                 get children() {
-                  var C = xe(), R = C.firstChild, s = R.nextSibling;
-                  return l(R, "marker-end", `url(#${H})`), w(C, x(D, {
+                  var b = yt(), E = b.firstChild, h = E.nextSibling;
+                  return c(E, "marker-end", `url(#${N})`), S(b, w(_, {
                     get when() {
-                      return re();
+                      return R();
                     },
                     children: (o) => (() => {
-                      var b = ye();
-                      return w(b, () => u.label), L((h) => {
-                        var M = /^\d+$/.test(u.label), S = o().x, E = o().y - 6;
-                        return M !== h.e && l(b, "data-count", h.e = M), S !== h.t && l(b, "x", h.t = S), E !== h.a && l(b, "y", h.a = E), h;
+                      var k = kt();
+                      return S(k, () => u.label), z((g) => {
+                        var P = /^\d+$/.test(u.label), T = o().x, A = o().y - 6;
+                        return P !== g.e && c(k, "data-count", g.e = P), T !== g.t && c(k, "x", g.t = T), A !== g.a && c(k, "y", g.a = A), g;
                       }, {
                         e: void 0,
                         t: void 0,
                         a: void 0
-                      }), b;
+                      }), k;
                     })()
-                  }), s), s.$$keydown = (o) => G(v, o), s.$$contextmenu = (o) => z(v, o), s.$$click = (o) => {
-                    o.stopPropagation(), i.onActivate?.(k(v, o.currentTarget, o));
-                  }, s.addEventListener("blur", () => f(null)), s.addEventListener("focus", () => f(v)), s.addEventListener("pointerleave", () => f(null)), s.addEventListener("pointerenter", () => f(v)), L((o) => {
-                    var b = u.id, h = ee().has(u.id), M = A(v), S = W(), E = W(), q = u.label;
-                    return b !== o.e && l(C, "data-graph-object", o.e = b), h !== o.t && l(C, "data-emphasized", o.t = h), M !== o.a && l(C, "data-selected", o.a = M), S !== o.o && l(R, "d", o.o = S), E !== o.i && l(s, "d", o.i = E), q !== o.n && l(s, "aria-label", o.n = q), o;
+                  }), h), h.$$keydown = (o) => X(m, o), h.$$contextmenu = (o) => H(m, o), h.$$click = (o) => {
+                    o.stopPropagation(), i.onActivate?.($(m, o.currentTarget, o));
+                  }, h.addEventListener("blur", () => f(null)), h.addEventListener("focus", () => f(m)), h.addEventListener("pointerleave", () => f(null)), h.addEventListener("pointerenter", () => f(m)), z((o) => {
+                    var k = u.id, g = nt().has(u.id), P = j(m), T = I(), A = I(), O = u.label;
+                    return k !== o.e && c(b, "data-graph-object", o.e = k), g !== o.t && c(b, "data-emphasized", o.t = g), P !== o.a && c(b, "data-selected", o.a = P), T !== o.o && c(E, "d", o.o = T), A !== o.i && c(h, "d", o.i = A), O !== o.n && c(h, "aria-label", o.n = O), o;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -200,23 +215,33 @@ function Ee(i) {
                     o: void 0,
                     i: void 0,
                     n: void 0
-                  }), C;
+                  }), b;
                 }
               });
             }
-          }), null), L(() => l(d, "aria-label", i.ariaLabel)), d;
-        })(), x(j, {
+          }), null), z((l) => {
+            var u = n().right - n().left, m = n().bottom - n().top, I = `${n().left} ${n().top} ${n().right - n().left} ${n().bottom - n().top}`, R = `${n().left}px`, b = `${n().top}px`, E = i.ariaLabel;
+            return u !== l.e && c(d, "width", l.e = u), m !== l.t && c(d, "height", l.t = m), I !== l.a && c(d, "viewBox", l.a = I), R !== l.o && L(d, "left", l.o = R), b !== l.i && L(d, "top", l.i = b), E !== l.n && c(d, "aria-label", l.n = E), l;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0
+          }), d;
+        })(), w(Y, {
           get each() {
-            return m();
+            return s();
           },
-          children: F
+          children: K
         })];
       }
-    }), null), w(e, x(D, {
+    }), null), S(t, w(_, {
       get when() {
         return i.minimap;
       },
-      children: (n) => x(fe, {
+      children: (r) => w(ft, {
         get layout() {
           return i.layout;
         },
@@ -233,22 +258,22 @@ function Ee(i) {
           return i.onInteractionStart;
         },
         get ariaLabel() {
-          return n().ariaLabel;
+          return r().ariaLabel;
         },
         get nodeStyle() {
-          return n().nodeStyle;
+          return r().nodeStyle;
         }
       })
-    }), null), w(e, () => i.overlay, null), L((n) => {
-      var r = `floe-graph ${i.class ?? ""}`, a = i.ariaLabel;
-      return r !== n.e && K(e, n.e = r), a !== n.t && l(e, "aria-label", n.t = a), n;
+    }), null), S(t, () => i.overlay, null), z((r) => {
+      var n = `floe-graph ${i.class ?? ""}`, a = i.ariaLabel;
+      return n !== r.e && U(t, r.e = n), a !== r.t && c(t, "aria-label", r.t = a), r;
     }, {
       e: void 0,
       t: void 0
-    }), e;
+    }), t;
   })();
 }
-oe(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+lt(["focusin", "focusout", "click", "contextmenu", "keydown"]);
 export {
-  Ee as GraphCanvas
+  Lt as GraphCanvas
 };

package/dist/graph.css

@@ -37,8 +37,9 @@
 }
 .floe-graph__edges {
   position: absolute;
-  inset: 0;
-  overflow: visible;
+  /* A visible route may have endpoints far outside the viewport. Clip painting,
+   * not geometry, so its full world bounds do not expand the composited layer. */
+  overflow: hidden;
   z-index: 1;
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.20",
+  "version": "0.86.21",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",