@floegence/floe-webapp-core 0.35.38 → 0.35.39

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

@@ -0,0 +1,29 @@
+import { type JSX } from 'solid-js';
+export interface InfiniteCanvasPoint {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface InfiniteCanvasContextMenuEvent {
+    clientX: number;
+    clientY: number;
+    localX: number;
+    localY: number;
+    worldX: number;
+    worldY: number;
+}
+export interface InfiniteCanvasProps {
+    children: JSX.Element;
+    viewport: InfiniteCanvasPoint;
+    onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
+    onCanvasContextMenu?: (event: InfiniteCanvasContextMenuEvent) => void;
+    ariaLabel?: string;
+    class?: string;
+    contentClass?: string;
+    interactiveSelector?: string;
+    panSurfaceSelector?: string;
+    minScale?: number;
+    maxScale?: number;
+    wheelZoomSpeed?: number;
+}
+export declare function InfiniteCanvas(props: InfiniteCanvasProps): JSX.Element;

package/dist/components/ui/InfiniteCanvas.js

@@ -0,0 +1,153 @@
+import { insert as q, effect as G, className as I, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
+import { createSignal as T, untrack as D, createEffect as L, onCleanup as y } from "solid-js";
+import { cn as Y } from "../../utils/cn.js";
+import { isTypingElement as _ } from "../../utils/dom.js";
+import { startHotInteraction as b } from "../../utils/hotInteraction.js";
+var ne = /* @__PURE__ */ Q('<div><div style="transform-origin:0 0">');
+const re = 1, ie = 0.45, oe = 2.2, ae = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', A = 3;
+function le(n, a, d) {
+  return Math.max(a, Math.min(d, n));
+}
+function M(n) {
+  return {
+    x: Number.isFinite(n.x) ? n.x : 0,
+    y: Number.isFinite(n.y) ? n.y : 0,
+    scale: Number.isFinite(n.scale) && n.scale > 0 ? n.scale : re
+  };
+}
+function se(n, a) {
+  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (a?.clientHeight ?? window.innerHeight) : n.deltaY;
+}
+function we(n) {
+  const [a, d] = T(D(() => M(n.viewport))), [p, S] = T(null);
+  let o, f, m = !1, l;
+  const X = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', F = () => n.panSurfaceSelector ?? ce, $ = () => n.minScale ?? ie, k = () => n.maxScale ?? oe, V = () => n.wheelZoomSpeed ?? ae, R = () => {
+    const e = p();
+    return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
+  }, C = () => {
+    f !== void 0 && (window.clearTimeout(f), f = void 0);
+  }, v = () => {
+    m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
+  }, N = () => {
+    if (typeof window > "u") {
+      m = !1;
+      return;
+    }
+    l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
+      l = void 0, m = !1;
+    }, 0);
+  }, h = (e) => {
+    D(() => n.onViewportChange?.(e));
+  }, U = (e) => {
+    if (typeof window > "u") {
+      h(e);
+      return;
+    }
+    C(), f = window.setTimeout(() => {
+      f = void 0, h(e);
+    }, 90);
+  }, E = (e) => e instanceof Element ? e.closest(X()) ? !0 : _(e) : !1, x = (e) => e instanceof Element ? e.closest(F()) !== null : !1, g = (e) => {
+    const t = p();
+    if (!t || e !== void 0 && t.pointerId !== e) return;
+    t.stopInteraction?.();
+    const r = a();
+    S(null), o && o.hasPointerCapture(t.pointerId) && o.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, N()), h(r);
+  };
+  L(() => {
+    p() || d(M(n.viewport));
+  }), L(() => {
+    const e = o;
+    if (!e) return;
+    const t = (r) => {
+      !m || !x(r.target) || (v(), r.preventDefault(), r.stopPropagation());
+    };
+    e.addEventListener("click", t, !0), y(() => {
+      e.removeEventListener("click", t, !0);
+    });
+  }), y(() => {
+    C(), g(), v();
+  });
+  const H = (e) => {
+    if (e.button !== 0 || _(e.target)) return;
+    const t = x(e.target);
+    E(e.target) && !t || (C(), v(), t || (e.preventDefault(), o?.setPointerCapture(e.pointerId)), S({
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startViewport: a(),
+      moved: !1,
+      startedFromPanSurface: t,
+      stopInteraction: t ? void 0 : b({
+        kind: "drag",
+        cursor: "grabbing"
+      })
+    }));
+  }, O = (e) => {
+    const t = p();
+    if (!t || t.pointerId !== e.pointerId) return;
+    const r = e.clientX - t.startClientX, i = e.clientY - t.startClientY;
+    if (!(t.moved || Math.abs(r) > A || Math.abs(i) > A)) return;
+    t.moved || (e.preventDefault(), o?.hasPointerCapture(e.pointerId) || o?.setPointerCapture(e.pointerId));
+    const u = {
+      ...t.startViewport,
+      x: t.startViewport.x + r,
+      y: t.startViewport.y + i
+    };
+    t.moved || S({
+      ...t,
+      moved: !0,
+      stopInteraction: t.stopInteraction ?? b({
+        kind: "drag",
+        cursor: "grabbing"
+      })
+    }), d(u);
+  }, W = (e) => {
+    g(e.pointerId);
+  }, Z = (e) => {
+    g(e.pointerId);
+  }, B = (e) => {
+    const t = o?.getBoundingClientRect();
+    if (!t) return;
+    e.preventDefault();
+    const r = a(), i = e.clientX - t.left, c = e.clientY - t.top, u = se(e, o), s = le(r.scale * Math.exp(-u * V()), $(), k());
+    if (Math.abs(s - r.scale) < 1e-4) return;
+    const w = (i - r.x) / r.scale, j = (c - r.y) / r.scale, P = {
+      x: i - w * s,
+      y: c - j * s,
+      scale: s
+    };
+    d(P), U(P);
+  }, z = (e) => {
+    if (E(e.target)) return;
+    const t = o?.getBoundingClientRect();
+    if (!t) return;
+    e.preventDefault();
+    const r = e.clientX - t.left, i = e.clientY - t.top, c = a();
+    n.onCanvasContextMenu?.({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      localX: r,
+      localY: i,
+      worldX: (r - c.x) / c.scale,
+      worldY: (i - c.y) / c.scale
+    });
+  };
+  return (() => {
+    var e = ne(), t = e.firstChild;
+    e.$$contextmenu = z, e.addEventListener("wheel", B), e.addEventListener("pointercancel", Z), e.$$pointerup = W, e.$$pointermove = O, e.$$pointerdown = H;
+    var r = o;
+    return typeof r == "function" ? ee(r, e) : o = e, q(t, () => n.children), G((i) => {
+      var c = Y("floe-infinite-canvas", R() && "is-panning", n.class), u = n.ariaLabel ?? "Infinite canvas", s = Y("floe-infinite-canvas__viewport", n.contentClass), w = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
+      return c !== i.e && I(e, i.e = c), u !== i.t && J(e, "aria-label", i.t = u), s !== i.a && I(t, i.a = s), w !== i.o && K(t, "transform", i.o = w), i;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), e;
+  })();
+}
+te(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
+export {
+  we as InfiniteCanvas
+};

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

@@ -6,6 +6,7 @@ export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
+export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Interactive3DCard, AnimatedBorderCard, NeonCard, MorphCard, type CardProps, type CardVariant, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type Interactive3DCardProps, type AnimatedBorderCardProps, type NeonCardProps, type MorphCardProps, } from './Card';
 export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type TabsFeatures, type TabsSlotClassNames, type TabsIndicatorMode, type TabsIndicatorColorToken, } from './Tabs';
 export { DirectoryPicker, type DirectoryPickerProps } from './DirectoryPicker';