@floegence/floe-webapp-core 0.36.16 → 0.36.17

package/dist/components/ui/InfiniteCanvas.js

@@ -1,14 +1,15 @@
-import { spread as B, mergeProps as j, insert as T, effect as q, className as G, setStyleProperty as J, template as K, use as Q } from "solid-js/web";
-import { createSignal as _, untrack as I, createEffect as L, onCleanup as A } from "solid-js";
+import { spread as z, mergeProps as B, insert as _, effect as j, className as q, setStyleProperty as G, template as J, use as K } from "solid-js/web";
+import { createSignal as T, untrack as L, createEffect as A, onCleanup as I } from "solid-js";
 import { cn as D } from "../../utils/cn.js";
 import { startHotInteraction as x } from "../../utils/hotInteraction.js";
-import { resolveSurfaceInteractionTargetRole as ee, resolveSurfaceWheelRouting as te, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as ne } from "./localInteractionSurface.js";
+import { resolveSurfaceInteractionTargetRole as Q, resolveSurfaceWheelRouting as ee, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as te } from "./localInteractionSurface.js";
+import { startPointerSession as ne } from "./pointerSession.js";
 import { clientToCanvasLocal as Y, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
 import { SURFACE_PORTAL_LAYER_ATTR as ae } from "./dialogSurfaceScope.js";
-var ie = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
-const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, de = '[data-floe-canvas-pan-surface="true"]', R = 3;
-function fe(t, a, u) {
-  return Math.max(a, Math.min(u, t));
+var ie = /* @__PURE__ */ J('<div><div style="transform-origin:0 0">');
+const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, fe = '[data-floe-canvas-pan-surface="true"]', R = 3;
+function de(t, a, f) {
+  return Math.max(a, Math.min(f, t));
 }
 function b(t) {
   return {
@@ -20,67 +21,73 @@ function b(t) {
 function me(t, a) {
   return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (a?.clientHeight ?? window.innerHeight) : t.deltaY;
 }
-function ge(t) {
-  const [a, u] = _(I(() => b(t.viewport))), [m, S] = _(null);
-  let i, d, f = !1, l;
-  const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? de, F = () => t.wheelInteractiveSelector ?? ne, V = () => t.minScale ?? le, y = () => t.maxScale ?? se, k = () => t.wheelZoomSpeed ?? ue, U = () => {
-    const e = m();
+function Pe(t) {
+  const [a, f] = T(L(() => b(t.viewport))), [S, w] = T(null);
+  let i, s, d, m = !1, l;
+  const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? fe, F = () => t.wheelInteractiveSelector ?? te, V = () => t.minScale ?? le, y = () => t.maxScale ?? se, k = () => t.wheelZoomSpeed ?? ue, N = () => {
+    const e = S();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, w = () => {
+  }, v = () => {
     d !== void 0 && (window.clearTimeout(d), d = void 0);
   }, C = () => {
-    f = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, N = () => {
+    m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
+  }, U = () => {
     if (typeof window > "u") {
-      f = !1;
+      m = !1;
       return;
     }
     l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
-      l = void 0, f = !1;
+      l = void 0, m = !1;
     }, 0);
-  }, v = (e) => {
-    I(() => t.onViewportChange?.(e));
+  }, g = (e) => {
+    L(() => t.onViewportChange?.(e));
   }, Z = (e) => {
     if (typeof window > "u") {
-      v(e);
+      g(e);
       return;
     }
-    w(), d = window.setTimeout(() => {
-      d = void 0, v(e);
+    v(), d = window.setTimeout(() => {
+      d = void 0, g(e);
     }, 90);
-  }, h = (e) => ee({
+  }, p = (e) => Q({
     target: e,
     interactiveSelector: M(),
     panSurfaceSelector: X()
-  }), p = (e) => {
-    const n = m();
-    if (!n || e !== void 0 && n.pointerId !== e) return;
-    n.stopInteraction?.();
-    const r = a();
-    S(null), i && i.hasPointerCapture(n.pointerId) && i.releasePointerCapture(n.pointerId), n.startedFromPanSurface && n.moved && (f = !0, N()), v(r);
+  }), H = () => {
+    const e = S();
+    if (!e) return;
+    e.stopInteraction?.();
+    const n = a();
+    w(null), s = void 0, e.startedFromPanSurface && e.moved && (m = !0, U()), g(n);
   };
-  L(() => {
-    m() || u(b(t.viewport));
-  }), L(() => {
+  A(() => {
+    S() || f(b(t.viewport));
+  }), A(() => {
     const e = i;
     if (!e) return;
     const n = (r) => {
-      !f || h(r.target) !== "pan_surface" || (C(), r.preventDefault(), r.stopPropagation());
+      !m || p(r.target) !== "pan_surface" || (C(), r.preventDefault(), r.stopPropagation());
     };
-    e.addEventListener("click", n, !0), e.addEventListener("wheel", P, {
+    e.addEventListener("click", n, !0), e.addEventListener("wheel", h, {
       passive: !1
-    }), A(() => {
-      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", P);
+    }), I(() => {
+      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", h);
     });
-  }), A(() => {
-    w(), p(), C();
+  }), I(() => {
+    v(), s?.stop({
+      reason: "manual_stop",
+      commit: !0
+    }), s = void 0, C();
   });
-  const H = (e) => {
+  const W = (e) => {
     if (e.button !== 0) return;
-    const n = h(e.target);
+    const n = p(e.target);
     if (n === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
     const r = n === "pan_surface";
-    n !== "local_surface" && (w(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault(), i?.setPointerCapture(e.pointerId)), S({
+    n !== "local_surface" && (v(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault()), s?.stop({
+      reason: "manual_stop",
+      commit: !0
+    }), w({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
@@ -91,33 +98,37 @@ function ge(t) {
         kind: "drag",
         cursor: "grabbing"
       })
+    }), s = ne({
+      pointerEvent: e,
+      captureEl: i ?? null,
+      capturePointer: !r,
+      onMove: O,
+      onEnd: () => {
+        H();
+      }
     }));
-  }, W = (e) => {
-    const n = m();
+  }, O = (e) => {
+    const n = S();
     if (!n || n.pointerId !== e.pointerId) return;
     const r = e.clientX - n.startClientX, o = e.clientY - n.startClientY;
     if (!(n.moved || Math.abs(r) > R || Math.abs(o) > R)) return;
-    n.moved || (e.preventDefault(), i?.hasPointerCapture(e.pointerId) || i?.setPointerCapture(e.pointerId));
-    const s = {
+    n.moved || (e.preventDefault(), (!i || typeof i.hasPointerCapture != "function" || !i.hasPointerCapture(e.pointerId)) && s?.capturePointer());
+    const u = {
       ...n.startViewport,
       x: n.startViewport.x + r,
       y: n.startViewport.y + o
     };
-    n.moved || S({
+    n.moved || w({
       ...n,
       moved: !0,
       stopInteraction: n.stopInteraction ?? x({
         kind: "drag",
         cursor: "grabbing"
       })
-    }), u(s);
-  }, O = (e) => {
-    p(e.pointerId);
-  }, $ = (e) => {
-    p(e.pointerId);
-  }, P = (e) => {
+    }), f(u);
+  }, h = (e) => {
     const n = i?.getBoundingClientRect();
-    if (!n || te({
+    if (!n || ee({
       target: e.target,
       disablePanZoom: !!t.disablePanZoom,
       wheelInteractiveSelector: F()
@@ -126,16 +137,16 @@ function ge(t) {
     const o = a(), c = Y(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), s = me(e, i), g = fe(o.scale * Math.exp(-s * k()), V(), y());
-    if (Math.abs(g - o.scale) < 1e-4) return;
-    const E = oe({
+    }), u = me(e, i), E = de(o.scale * Math.exp(-u * k()), V(), y());
+    if (Math.abs(E - o.scale) < 1e-4) return;
+    const P = oe({
       viewport: o,
       localPoint: c,
-      nextScale: g
+      nextScale: E
     });
-    u(E), Z(E);
-  }, z = (e) => {
-    if (h(e.target) !== "canvas") return;
+    f(P), Z(P);
+  }, $ = (e) => {
+    if (p(e.target) !== "canvas") return;
     const n = i?.getBoundingClientRect();
     if (!n) return;
     e.preventDefault();
@@ -154,24 +165,21 @@ function ge(t) {
   };
   return (() => {
     var e = ie(), n = e.firstChild, r = i;
-    return typeof r == "function" ? Q(r, e) : i = e, B(e, j({
+    return typeof r == "function" ? K(r, e) : i = e, z(e, B({
       get class() {
-        return D("floe-infinite-canvas", U() && "is-panning", t.disablePanZoom && "is-locked", t.class);
+        return D("floe-infinite-canvas", N() && "is-panning", t.disablePanZoom && "is-locked", t.class);
       }
     }, {
       [ae]: "true"
     }, {
-      onPointerDown: H,
-      onPointerMove: W,
-      onPointerUp: O,
-      onPointerCancel: $,
-      onContextMenu: z,
+      onPointerDown: W,
+      onContextMenu: $,
       get "aria-label"() {
         return t.ariaLabel ?? "Infinite canvas";
       }
-    }), !1, !0), T(n, () => t.children), T(e, () => t.overlay?.(a()), null), q((o) => {
-      var c = D("floe-infinite-canvas__viewport", t.contentClass), s = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
-      return c !== o.e && G(n, o.e = c), s !== o.t && J(n, "transform", o.t = s), o;
+    }), !1, !0), _(n, () => t.children), _(e, () => t.overlay?.(a()), null), j((o) => {
+      var c = D("floe-infinite-canvas__viewport", t.contentClass), u = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
+      return c !== o.e && q(n, o.e = c), u !== o.t && G(n, "transform", o.t = u), o;
     }, {
       e: void 0,
       t: void 0
@@ -179,5 +187,5 @@ function ge(t) {
   })();
 }
 export {
-  ge as InfiniteCanvas
+  Pe as InfiniteCanvas
 };

package/dist/components/ui/index.d.ts

@@ -7,6 +7,7 @@ export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectPro
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
+export { startPointerSession, type PointerSessionController, type PointerSessionEndEvent, type PointerSessionEndReason, type PointerSessionSnapshot, type StartPointerSessionOptions, } from './pointerSession';
 export { clientToCanvasLocal, clientToCanvasWorld, createViewportFromZoomAnchor, isPointInsideCanvasRect, localToCanvasWorld, type CanvasClientPoint, type CanvasLocalPoint, type CanvasViewportLike, type CanvasViewportRectLike, type CanvasWorldPoint, } from './canvasGeometry';
 export { CANVAS_WHEEL_INTERACTIVE_ATTR, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR, LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveSurfaceWheelRouting, resolveWorkbenchWidgetEventOwnership, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, } from './localInteractionSurface';
 export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, isSurfacePortalMode, projectSurfacePortalPosition, projectSurfacePortalRect, resolveSurfacePortalBoundaryRect, resolveSurfacePortalHost, resolveSurfacePortalMount, resolveSurfacePortalMountRect, __resetSurfacePortalScopeForTests, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type SurfacePortalRect, } from './surfacePortalScope';

package/dist/components/ui/pointerSession.d.ts

@@ -0,0 +1,35 @@
+export type PointerSessionEndReason = 'pointer_up' | 'pointer_cancel' | 'buttons_released' | 'lost_pointer_capture' | 'window_blur' | 'document_hidden' | 'manual_stop';
+export interface PointerSessionSnapshot {
+    pointerId: number;
+    latestClientX: number;
+    latestClientY: number;
+    latestButtons: number;
+    active: boolean;
+    captureActive: boolean;
+}
+export interface PointerSessionEndEvent {
+    reason: PointerSessionEndReason;
+    commit: boolean;
+    snapshot: PointerSessionSnapshot;
+    event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY' | 'buttons'>;
+}
+export interface StartPointerSessionOptions {
+    pointerEvent: PointerEvent;
+    captureEl?: HTMLElement | null;
+    ownerDocument?: Document;
+    buttonMask?: number;
+    capturePointer?: boolean;
+    onMove?: (event: PointerEvent, snapshot: PointerSessionSnapshot) => void;
+    onEnd: (event: PointerSessionEndEvent) => void;
+}
+export interface PointerSessionController {
+    snapshot: () => PointerSessionSnapshot;
+    updatePointer: (event: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY' | 'buttons'>) => void;
+    capturePointer: () => void;
+    stop: (options?: {
+        reason?: PointerSessionEndReason;
+        commit?: boolean;
+        event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY' | 'buttons'>;
+    }) => void;
+}
+export declare function startPointerSession(options: StartPointerSessionOptions): PointerSessionController;

package/dist/components/ui/pointerSession.js

@@ -0,0 +1,85 @@
+function C(e) {
+  if (e.ownerDocument) return e.ownerDocument;
+  if (e.captureEl?.ownerDocument) return e.captureEl.ownerDocument;
+  const n = e.pointerEvent.target;
+  return n && typeof n == "object" && "ownerDocument" in n && n.ownerDocument instanceof Document ? n.ownerDocument : document;
+}
+function c(e, n) {
+  return typeof e.buttons == "number" ? e.buttons : n;
+}
+function L(e, n) {
+  return !e || e.pointerId === n;
+}
+function b(e) {
+  const n = C(e), l = n.defaultView ?? window, a = e.buttonMask ?? 1, h = c(e.pointerEvent, a), t = {
+    pointerId: e.pointerEvent.pointerId,
+    latestClientX: e.pointerEvent.clientX,
+    latestClientY: e.pointerEvent.clientY,
+    latestButtons: h,
+    active: !0,
+    captureActive: !1
+  }, o = (r) => {
+    !t.active || r.pointerId !== t.pointerId || (t.latestClientX = r.clientX, t.latestClientY = r.clientY, t.latestButtons = c(r, t.latestButtons));
+  }, s = () => {
+    if (t.active && !(!e.captureEl || typeof e.captureEl.setPointerCapture != "function"))
+      try {
+        e.captureEl.setPointerCapture(t.pointerId), t.captureActive = !0;
+      } catch {
+      }
+  }, w = () => {
+    if (!e.captureEl || typeof e.captureEl.releasePointerCapture != "function") {
+      t.captureActive = !1;
+      return;
+    }
+    try {
+      (typeof e.captureEl.hasPointerCapture != "function" || e.captureEl.hasPointerCapture(t.pointerId)) && e.captureEl.releasePointerCapture(t.pointerId);
+    } catch {
+    } finally {
+      t.captureActive = !1;
+    }
+  }, P = () => {
+    n.removeEventListener("pointermove", p, !0), n.removeEventListener("pointerup", d, !0), n.removeEventListener("pointercancel", f, !0), n.removeEventListener("visibilitychange", E), l.removeEventListener("blur", v), e.captureEl?.removeEventListener("lostpointercapture", m);
+  }, i = (r = {}) => {
+    if (!t.active) return;
+    const u = r.event;
+    L(u, t.pointerId) && (u && o(u), t.active = !1, P(), w(), e.onEnd({
+      reason: r.reason ?? "manual_stop",
+      commit: r.commit ?? !1,
+      snapshot: t,
+      ...u ? { event: u } : {}
+    }));
+  };
+  function p(r) {
+    if (!(!t.active || r.pointerId !== t.pointerId)) {
+      if (o(r), a > 0 && (c(r, t.latestButtons) & a) !== a) {
+        i({ reason: "buttons_released", commit: !0, event: r });
+        return;
+      }
+      e.onMove?.(r, t);
+    }
+  }
+  function d(r) {
+    i({ reason: "pointer_up", commit: !0, event: r });
+  }
+  function f(r) {
+    i({ reason: "pointer_cancel", commit: !1, event: r });
+  }
+  function m() {
+    i({ reason: "lost_pointer_capture", commit: !0 });
+  }
+  function v() {
+    i({ reason: "window_blur", commit: !0 });
+  }
+  function E() {
+    n.hidden && i({ reason: "document_hidden", commit: !0 });
+  }
+  return n.addEventListener("pointermove", p, !0), n.addEventListener("pointerup", d, !0), n.addEventListener("pointercancel", f, !0), n.addEventListener("visibilitychange", E), l.addEventListener("blur", v), e.captureEl?.addEventListener("lostpointercapture", m), e.capturePointer !== !1 && s(), {
+    snapshot: () => t,
+    updatePointer: o,
+    capturePointer: s,
+    stop: i
+  };
+}
+export {
+  b as startPointerSession
+};