@floegence/floe-webapp-core 0.36.16 → 0.36.17

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,28 +1,35 @@
-import { spread as O, mergeProps as tt, insert as c, createComponent as w, memo as et, template as G, use as it, delegateEvents as nt } from "solid-js/web";
-import { createSignal as F, onCleanup as ot, untrack as M, createMemo as m } from "solid-js";
-import { startHotInteraction as N } from "../../utils/hotInteraction.js";
-import { X as j, Minus as B, Maximize as V, GripVertical as at } from "../icons/index.js";
-import { CANVAS_WHEEL_INTERACTIVE_ATTR as rt, WORKBENCH_WIDGET_SHELL_ATTR as dt, resolveWorkbenchWidgetEventOwnership as lt } from "../ui/localInteractionSurface.js";
-import { createWorkbenchWidgetSurfaceMetrics as ct } from "./workbenchHelpers.js";
-var st = /* @__PURE__ */ G('<article class=workbench-widget data-floe-dialog-surface-host=true><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), wt = /* @__PURE__ */ G('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
-const gt = 220, ht = 160, ut = '[data-floe-canvas-interactive="true"]', bt = '[data-floe-canvas-pan-surface="true"]';
-function kt(t) {
-  const [v, y] = F(null), [$, C] = F(null);
-  let u, b, _;
-  ot(() => {
-    u?.abort(), u = void 0, b?.abort(), b = void 0, M(v)?.stopInteraction(), M($)?.stopInteraction();
+import { spread as H, mergeProps as et, insert as l, createComponent as c, memo as it, template as B, use as nt, delegateEvents as ot } from "solid-js/web";
+import { createSignal as L, onCleanup as at, untrack as S, createMemo as _ } from "solid-js";
+import { startHotInteraction as O } from "../../utils/hotInteraction.js";
+import { X as F, Minus as N, Maximize as A, GripVertical as rt } from "../icons/index.js";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as dt, WORKBENCH_WIDGET_SHELL_ATTR as lt, resolveWorkbenchWidgetEventOwnership as ct } from "../ui/localInteractionSurface.js";
+import { startPointerSession as j } from "../ui/pointerSession.js";
+import { createWorkbenchWidgetSurfaceMetrics as st } from "./workbenchHelpers.js";
+var wt = /* @__PURE__ */ B('<article class=workbench-widget data-floe-dialog-surface-host=true><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), gt = /* @__PURE__ */ B('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
+const ht = 220, ut = 160, _t = '[data-floe-canvas-interactive="true"]', ft = '[data-floe-canvas-pan-surface="true"]';
+function xt(t) {
+  const [f, I] = L(null), [b, x] = L(null);
+  let g, h, u;
+  at(() => {
+    g?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), g = void 0, h?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), h = void 0, S(f)?.stopInteraction(), S(b)?.stopInteraction();
   });
-  const E = () => v() !== null, R = () => $() !== null, z = (e) => lt({
+  const C = () => f() !== null, W = () => b() !== null, E = (e) => ct({
     target: e,
-    widgetRoot: _ ?? null,
-    interactiveSelector: ut,
-    panSurfaceSelector: bt
-  }), Z = (e) => {
-    e.button === 0 && (t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), z(e.target) === "widget_shell" && _?.focus({
+    widgetRoot: u ?? null,
+    interactiveSelector: _t,
+    panSurfaceSelector: ft
+  }), V = (e) => {
+    e.button === 0 && (t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), E(e.target) === "widget_shell" && u?.focus({
       preventScroll: !0
     }));
-  }, I = m(() => {
-    const e = v();
+  }, m = _(() => {
+    const e = f();
     return e ? {
       x: e.worldX,
       y: e.worldY
@@ -30,8 +37,8 @@ function kt(t) {
       x: t.x,
       y: t.y
     };
-  }), k = m(() => {
-    const e = $();
+  }), v = _(() => {
+    const e = b();
     return e ? {
       width: e.width,
       height: e.height
@@ -39,34 +46,34 @@ function kt(t) {
       width: t.width,
       height: t.height
     };
-  }), p = m(() => {
+  }), R = _(() => {
     if (!(t.layoutMode !== "projected_surface" || !t.projectedViewport))
-      return ct({
+      return st({
         widgetId: t.widgetId,
-        worldX: I().x,
-        worldY: I().y,
-        worldWidth: k().width,
-        worldHeight: k().height,
+        worldX: m().x,
+        worldY: m().y,
+        worldWidth: v().width,
+        worldHeight: v().height,
         viewport: t.projectedViewport,
         ready: t.surfaceReady ?? !0
       });
-  }), q = m(() => {
+  }), G = _(() => {
     const e = t.itemSnapshot().z_index, i = Number.isFinite(e) ? Math.max(1, Math.min(99, Math.round(e))) : 1;
     return String(i).padStart(2, "0");
-  }), D = (e) => {
+  }), z = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestOverview(t.itemSnapshot());
   }, T = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
-  }, X = (e) => {
+  }, D = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestDelete(t.widgetId);
-  }, K = m(() => {
+  }, Z = _(() => {
     const e = {
-      width: `${k().width}px`,
-      height: `${k().height}px`,
-      "z-index": E() || R() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
+      width: `${v().width}px`,
+      height: `${v().height}px`,
+      "z-index": C() || W() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
     };
     if (t.layoutMode === "projected_surface") {
-      const i = p()?.rect;
+      const i = R()?.rect;
       return {
         ...e,
         left: `${i?.screenX ?? 0}px`,
@@ -76,10 +83,10 @@ function kt(t) {
     }
     return {
       ...e,
-      transform: `translate(${I().x}px, ${I().y}px)`
+      transform: `translate(${m().x}px, ${m().y}px)`
     };
-  }), L = (e) => {
-    const i = M(v);
+  }), q = (e) => {
+    const i = S(f);
     if (!i) return;
     const d = {
       x: i.worldX,
@@ -87,18 +94,21 @@ function kt(t) {
     }, r = {
       x: i.startWorldX,
       y: i.startWorldY
-    }, s = e && (Math.abs(d.x - r.x) > 1 || Math.abs(d.y - r.y) > 1);
-    t.onCommitFront(t.widgetId), s && t.onCommitMove(t.widgetId, d), i.stopInteraction(), y(null), u?.abort(), u = void 0;
-  }, Y = (e) => {
+    }, a = e && (Math.abs(d.x - r.x) > 1 || Math.abs(d.y - r.y) > 1);
+    t.onCommitFront(t.widgetId), a && t.onCommitMove(t.widgetId, d), i.stopInteraction(), I(null), g = void 0;
+  }, X = (e) => {
     if (e.button !== 0 || t.locked) return;
-    e.preventDefault(), e.stopPropagation(), u?.abort(), t.onSelect(t.widgetId), _?.focus({
+    e.preventDefault(), e.stopPropagation(), g?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), t.onSelect(t.widgetId), u?.focus({
       preventScroll: !0
     }), t.onStartOptimisticFront(t.widgetId);
-    const i = N({
+    const i = O({
       kind: "drag",
       cursor: "grabbing"
     }), d = Math.max(t.viewportScale, 1e-3);
-    y({
+    I({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
@@ -111,46 +121,44 @@ function kt(t) {
       stopInteraction: i
     });
     const r = (a) => {
-      y((n) => {
+      I((n) => {
         if (!n || n.pointerId !== a.pointerId) return n;
-        const f = n.startWorldX + (a.clientX - n.startClientX) / n.scale, h = n.startWorldY + (a.clientY - n.startClientY) / n.scale;
+        const w = n.startWorldX + (a.clientX - n.startClientX) / n.scale, s = n.startWorldY + (a.clientY - n.startClientY) / n.scale;
         return {
           ...n,
-          worldX: f,
-          worldY: h,
-          moved: n.moved || Math.abs(f - n.startWorldX) > 2 || Math.abs(h - n.startWorldY) > 2
+          worldX: w,
+          worldY: s,
+          moved: n.moved || Math.abs(w - n.startWorldX) > 2 || Math.abs(s - n.startWorldY) > 2
         };
       });
-    }, s = (a) => {
-      a.pointerId === e.pointerId && L(!0);
-    }, g = (a) => {
-      a.pointerId === e.pointerId && L(!1);
-    }, l = new AbortController();
-    u = l, window.addEventListener("pointermove", r, {
-      signal: l.signal
-    }), window.addEventListener("pointerup", s, {
-      once: !0,
-      signal: l.signal
-    }), window.addEventListener("pointercancel", g, {
-      once: !0,
-      signal: l.signal
+    };
+    g = j({
+      pointerEvent: e,
+      captureEl: e.currentTarget,
+      onMove: r,
+      onEnd: ({
+        commit: a
+      }) => q(a)
     });
-  }, P = (e) => {
-    const i = M($);
+  }, K = (e) => {
+    const i = S(b);
     if (!i) return;
     const d = {
       width: i.width,
       height: i.height
     }, r = Math.abs(i.width - i.startWidth) > 1 || Math.abs(i.height - i.startHeight) > 1;
-    e && r && t.onCommitResize(t.widgetId, d), i.stopInteraction(), C(null), b?.abort(), b = void 0;
+    e && r && t.onCommitResize(t.widgetId, d), i.stopInteraction(), x(null), h = void 0;
   }, U = (e) => {
     if (e.button !== 0 || t.locked) return;
-    e.preventDefault(), e.stopPropagation(), b?.abort(), t.onStartOptimisticFront(t.widgetId);
-    const i = N({
+    e.preventDefault(), e.stopPropagation(), h?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), t.onStartOptimisticFront(t.widgetId);
+    const i = O({
       kind: "drag",
       cursor: "nwse-resize"
     }), d = Math.max(t.viewportScale, 1e-3);
-    C({
+    x({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
@@ -162,38 +170,33 @@ function kt(t) {
       stopInteraction: i
     });
     const r = (a) => {
-      C((n) => {
+      x((n) => {
         if (!n || n.pointerId !== a.pointerId) return n;
-        const f = Math.max(gt, n.startWidth + (a.clientX - n.startClientX) / n.scale), h = Math.max(ht, n.startHeight + (a.clientY - n.startClientY) / n.scale);
+        const w = Math.max(ht, n.startWidth + (a.clientX - n.startClientX) / n.scale), s = Math.max(ut, n.startHeight + (a.clientY - n.startClientY) / n.scale);
         return {
           ...n,
-          width: f,
-          height: h
+          width: w,
+          height: s
         };
       });
-    }, s = (a) => {
-      a.pointerId === e.pointerId && P(!0);
-    }, g = (a) => {
-      a.pointerId === e.pointerId && P(!1);
-    }, l = new AbortController();
-    b = l, window.addEventListener("pointermove", r, {
-      signal: l.signal
-    }), window.addEventListener("pointerup", s, {
-      once: !0,
-      signal: l.signal
-    }), window.addEventListener("pointercancel", g, {
-      once: !0,
-      signal: l.signal
+    };
+    h = j({
+      pointerEvent: e,
+      captureEl: e.currentTarget,
+      onMove: r,
+      onEnd: ({
+        commit: a
+      }) => K(a)
     });
   };
   return (() => {
-    var e = st(), i = e.firstChild, d = i.firstChild, r = d.firstChild, s = r.nextSibling, g = s.nextSibling, l = d.nextSibling, a = l.nextSibling, n = a.nextSibling, f = n.firstChild, h = f.nextSibling, J = n.nextSibling, S = J.firstChild, x = S.nextSibling, W = x.nextSibling, Q = i.nextSibling, H = _;
-    return typeof H == "function" ? it(H, e) : _ = e, O(e, tt({
+    var e = wt(), i = e.firstChild, d = i.firstChild, r = d.firstChild, a = r.nextSibling, n = a.nextSibling, w = d.nextSibling, s = w.nextSibling, M = s.nextSibling, J = M.firstChild, p = J.nextSibling, Q = M.nextSibling, $ = Q.firstChild, k = $.nextSibling, y = k.nextSibling, tt = i.nextSibling, P = u;
+    return typeof P == "function" ? nt(P, e) : u = e, H(e, et({
       get classList() {
         return {
           "is-selected": t.selected,
-          "is-dragging": E(),
-          "is-resizing": R(),
+          "is-dragging": C(),
+          "is-resizing": W(),
           "is-filtered-out": t.filtered,
           "is-projected-surface": t.layoutMode === "projected_surface",
           "is-locked": t.locked
@@ -209,49 +212,49 @@ function kt(t) {
         return t.layoutMode ?? "canvas_scaled";
       }
     }, () => ({
-      [rt]: t.selected ? "true" : void 0
+      [dt]: t.selected ? "true" : void 0
     }), {
       tabIndex: 0,
-      onPointerDown: Z,
+      onPointerDown: V,
       onFocus: () => {
         t.onSelect(t.widgetId);
       },
       onContextMenu: (o) => {
-        z(o.target) === "widget_shell" && (o.preventDefault(), o.stopPropagation(), t.onContextMenu(o, t.itemSnapshot()));
+        E(o.target) === "widget_shell" && (o.preventDefault(), o.stopPropagation(), t.onContextMenu(o, t.itemSnapshot()));
       },
       get style() {
-        return K();
+        return Z();
       }
-    }), !1, !0), i.$$pointerdown = Y, O(i, {
-      [dt]: "true"
-    }, !1, !0), r.$$click = X, r.$$pointerdown = (o) => o.stopPropagation(), c(r, w(j, {
+    }), !1, !0), i.$$pointerdown = X, H(i, {
+      [lt]: "true"
+    }, !1, !0), r.$$click = D, r.$$pointerdown = (o) => o.stopPropagation(), l(r, c(F, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), s.$$click = D, s.$$pointerdown = (o) => o.stopPropagation(), c(s, w(B, {
+    })), a.$$click = z, a.$$pointerdown = (o) => o.stopPropagation(), l(a, c(N, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), g.$$click = T, g.$$pointerdown = (o) => o.stopPropagation(), c(g, w(V, {
+    })), n.$$click = T, n.$$pointerdown = (o) => o.stopPropagation(), l(n, c(A, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), c(l, q), a.$$pointerdown = Y, c(a, w(at, {
+    })), l(w, G), s.$$pointerdown = X, l(s, c(rt, {
       class: "w-3.5 h-3.5"
-    })), c(n, () => {
+    })), l(M, () => {
       const o = t.definition.icon;
-      return w(o, {
+      return c(o, {
         class: "w-3.5 h-3.5"
       });
-    }, h), c(h, () => t.widgetTitle), S.$$click = D, S.$$pointerdown = (o) => o.stopPropagation(), c(S, w(B, {
+    }, p), l(p, () => t.widgetTitle), $.$$click = z, $.$$pointerdown = (o) => o.stopPropagation(), l($, c(N, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), x.$$click = T, x.$$pointerdown = (o) => o.stopPropagation(), c(x, w(V, {
+    })), k.$$click = T, k.$$pointerdown = (o) => o.stopPropagation(), l(k, c(A, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), W.$$click = X, W.$$pointerdown = (o) => o.stopPropagation(), c(W, w(j, {
+    })), y.$$click = D, y.$$pointerdown = (o) => o.stopPropagation(), l(y, c(F, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), c(Q, () => {
+    })), l(tt, () => {
       const o = t.definition.body;
-      return w(o, {
+      return c(o, {
         get widgetId() {
           return t.widgetId;
         },
@@ -262,19 +265,19 @@ function kt(t) {
           return t.widgetType;
         },
         get surfaceMetrics() {
-          return p();
+          return R();
         }
       });
-    }), c(e, (() => {
-      var o = et(() => !!t.locked);
+    }), l(e, (() => {
+      var o = it(() => !!t.locked);
       return () => o() ? null : (() => {
-        var A = wt();
-        return A.$$pointerdown = U, A;
+        var Y = gt();
+        return Y.$$pointerdown = U, Y;
       })();
     })(), null), e;
   })();
 }
-nt(["pointerdown", "click"]);
+ot(["pointerdown", "click"]);
 export {
-  kt as WorkbenchWidget
+  xt as WorkbenchWidget
 };