@floegence/floe-webapp-core 0.36.8 → 0.36.9

package/dist/components/deck/deckGridMetrics.d.ts

@@ -0,0 +1,26 @@
+export declare const DECK_GRID_COLS = 24;
+export declare const DECK_DEFAULT_ROWS = 24;
+export declare const DECK_GAP = 4;
+export declare const DECK_MIN_ROW_HEIGHT = 20;
+export declare const DECK_PADDING = 4;
+export interface DeckGridConfig {
+    cols: number;
+    rowHeight: number;
+    gap: number;
+    defaultRows: number;
+}
+export interface DeckGridMeasurements extends DeckGridConfig {
+    cellWidth: number;
+    cellHeight: number;
+}
+export declare const DECK_GRID_CONFIG: {
+    readonly cols: 24;
+    readonly defaultRows: 24;
+    readonly gap: 4;
+    readonly rowHeight: 20;
+};
+export declare function getGridConfigFromElement(gridEl: HTMLElement): DeckGridConfig;
+export declare function measureDeckGrid(gridEl: HTMLElement, options?: {
+    paddingLeft?: number;
+    paddingRight?: number;
+}): DeckGridMeasurements | null;

package/dist/components/deck/deckGridMetrics.js

@@ -0,0 +1,32 @@
+const c = 24, r = 24, g = 4, C = 20, d = 4, E = {
+  cols: 24,
+  defaultRows: 24,
+  gap: 4,
+  rowHeight: 20
+};
+function D(t) {
+  return {
+    cols: parseInt(t.dataset.gridCols || String(24), 10),
+    rowHeight: parseFloat(t.dataset.rowHeight || String(20)),
+    gap: parseInt(t.dataset.gap || String(4), 10),
+    defaultRows: parseInt(t.dataset.defaultRows || String(24), 10)
+  };
+}
+function G(t, o) {
+  const n = D(t), s = o?.paddingLeft ?? 0, a = o?.paddingRight ?? 0, i = t.clientWidth - s - a, _ = n.gap * (n.cols - 1), e = (i - _) / n.cols;
+  return !Number.isFinite(e) || e <= 0 ? null : {
+    ...n,
+    cellWidth: e,
+    cellHeight: n.rowHeight + n.gap
+  };
+}
+export {
+  r as DECK_DEFAULT_ROWS,
+  g as DECK_GAP,
+  c as DECK_GRID_COLS,
+  E as DECK_GRID_CONFIG,
+  C as DECK_MIN_ROW_HEIGHT,
+  d as DECK_PADDING,
+  D as getGridConfigFromElement,
+  G as measureDeckGrid
+};

package/dist/components/deck/deckPointerSession.d.ts

@@ -0,0 +1,52 @@
+import { type HotInteractionKind } from '../../utils/hotInteraction';
+export interface DeckPointerSessionSnapshot {
+    pointerId: number;
+    kind: HotInteractionKind;
+    widgetId: string;
+    gridEl: HTMLElement;
+    gridRect: DOMRect;
+    gridPaddingLeft: number;
+    gridPaddingRight: number;
+    startClientX: number;
+    startClientY: number;
+    startScrollTop: number;
+    lastClientX: number;
+    lastClientY: number;
+    lastAppliedClientX: number;
+    lastAppliedClientY: number;
+    lastAppliedScrollTop: number;
+    rafId: number | null;
+    stopHotInteraction: (() => void) | null;
+}
+export interface DeckPointerSessionFrame {
+    snapshot: DeckPointerSessionSnapshot;
+    deltaX: number;
+    deltaY: number;
+    cols: number;
+    rowHeight: number;
+    gap: number;
+    cellWidth: number;
+    cellHeight: number;
+}
+export interface StartDeckPointerSessionOptions {
+    kind: HotInteractionKind;
+    widgetId: string;
+    gridEl: HTMLElement;
+    captureEl?: HTMLElement | null;
+    pointerEvent: PointerEvent;
+    cursor: string;
+    onMove: (frame: DeckPointerSessionFrame) => void;
+    onEnd: (options: {
+        commit: boolean;
+        snapshot: DeckPointerSessionSnapshot;
+    }) => void;
+}
+export interface DeckPointerSessionController {
+    snapshot: () => DeckPointerSessionSnapshot;
+    updatePointer: (event: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>) => void;
+    stop: (options?: {
+        commit?: boolean;
+        event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>;
+    }) => void;
+}
+export declare function startDeckPointerSession(options: StartDeckPointerSessionOptions): DeckPointerSessionController;

package/dist/components/deck/deckPointerSession.js

@@ -0,0 +1,113 @@
+import { startHotInteraction as X } from "../../utils/hotInteraction.js";
+import { measureDeckGrid as h } from "./deckGridMetrics.js";
+function C(e) {
+  const d = e.lastClientY - e.gridRect.top, t = e.gridRect.bottom - e.lastClientY;
+  let n = 0;
+  if (d < 48 ? n = -Math.ceil((48 - d) / 48 * 24) : t < 48 && (n = Math.ceil((48 - t) / 48 * 24)), n === 0) return !1;
+  const a = e.gridEl.scrollTop, o = Math.max(0, Math.min(a + n, e.gridEl.scrollHeight - e.gridEl.clientHeight));
+  return o === a ? !1 : (e.gridEl.scrollTop = o, !0);
+}
+function v(e) {
+  const i = e.gridEl.scrollTop;
+  if (e.lastClientX === e.lastAppliedClientX && e.lastClientY === e.lastAppliedClientY && i === e.lastAppliedScrollTop)
+    return null;
+  e.lastAppliedClientX = e.lastClientX, e.lastAppliedClientY = e.lastClientY, e.lastAppliedScrollTop = i;
+  const l = h(e.gridEl, {
+    paddingLeft: e.gridPaddingLeft,
+    paddingRight: e.gridPaddingRight
+  });
+  return l ? {
+    snapshot: e,
+    deltaX: e.lastClientX - e.startClientX,
+    deltaY: e.lastClientY - e.startClientY + (i - e.startScrollTop),
+    cols: l.cols,
+    rowHeight: l.rowHeight,
+    gap: l.gap,
+    cellWidth: l.cellWidth,
+    cellHeight: l.cellHeight
+  } : null;
+}
+function L(e) {
+  const i = e.gridEl.ownerDocument, l = i.defaultView ?? window, d = l.getComputedStyle(e.gridEl), t = {
+    pointerId: e.pointerEvent.pointerId,
+    kind: e.kind,
+    widgetId: e.widgetId,
+    gridEl: e.gridEl,
+    gridRect: e.gridEl.getBoundingClientRect(),
+    gridPaddingLeft: parseFloat(d.paddingLeft) || 0,
+    gridPaddingRight: parseFloat(d.paddingRight) || 0,
+    startClientX: e.pointerEvent.clientX,
+    startClientY: e.pointerEvent.clientY,
+    startScrollTop: e.gridEl.scrollTop,
+    lastClientX: e.pointerEvent.clientX,
+    lastClientY: e.pointerEvent.clientY,
+    lastAppliedClientX: e.pointerEvent.clientX,
+    lastAppliedClientY: e.pointerEvent.clientY,
+    lastAppliedScrollTop: e.gridEl.scrollTop,
+    rafId: null,
+    stopHotInteraction: X({
+      kind: e.kind,
+      cursor: e.cursor,
+      lockUserSelect: !0
+    })
+  };
+  let n = !0;
+  const a = () => {
+    if (t.rafId = null, !n) return;
+    const r = C(t), c = v(t);
+    c && e.onMove(c), n && r && o();
+  }, o = () => {
+    if (!(!n || t.rafId !== null)) {
+      if (typeof l.requestAnimationFrame != "function") {
+        a();
+        return;
+      }
+      t.rafId = l.requestAnimationFrame(a);
+    }
+  }, I = () => {
+    if (!(!e.captureEl || typeof e.captureEl.releasePointerCapture != "function"))
+      try {
+        e.captureEl.releasePointerCapture(t.pointerId);
+      } catch {
+      }
+  }, Y = () => {
+    i.removeEventListener("pointermove", g, !0), i.removeEventListener("pointerup", p, !0), i.removeEventListener("pointercancel", m, !0), e.captureEl?.removeEventListener("lostpointercapture", s);
+  }, u = (r) => {
+    if (!n) return;
+    const c = r?.event;
+    if (!(c && c.pointerId !== t.pointerId)) {
+      if (c && (t.lastClientX = c.clientX, t.lastClientY = c.clientY), n = !1, t.rafId !== null && typeof l.cancelAnimationFrame == "function" && (l.cancelAnimationFrame(t.rafId), t.rafId = null), r?.commit !== !1) {
+        C(t);
+        const E = v(t);
+        E && e.onMove(E);
+      }
+      Y(), I(), t.stopHotInteraction?.(), t.stopHotInteraction = null, e.onEnd({
+        commit: r?.commit !== !1,
+        snapshot: t
+      });
+    }
+  }, f = (r) => {
+    !n || r.pointerId !== t.pointerId || (t.lastClientX = r.clientX, t.lastClientY = r.clientY, o());
+  }, g = (r) => {
+    f(r);
+  }, p = (r) => {
+    u({ event: r });
+  }, m = (r) => {
+    u({ event: r, commit: !1 });
+  }, s = () => {
+    u();
+  };
+  if (i.addEventListener("pointermove", g, !0), i.addEventListener("pointerup", p, !0), i.addEventListener("pointercancel", m, !0), e.captureEl?.addEventListener("lostpointercapture", s), e.captureEl && typeof e.captureEl.setPointerCapture == "function")
+    try {
+      e.captureEl.setPointerCapture(t.pointerId);
+    } catch {
+    }
+  return {
+    snapshot: () => t,
+    updatePointer: f,
+    stop: u
+  };
+}
+export {
+  L as startDeckPointerSession
+};

package/dist/context/DeckContext.d.ts

@@ -30,11 +30,6 @@ export interface DragState {
     widgetId: string;
     originalPosition: GridPosition;
     currentPosition: GridPosition;
-    /** Pixel offset for smooth visual following */
-    pixelOffset: {
-        x: number;
-        y: number;
-    };
     startX: number;
     startY: number;
 }
@@ -74,10 +69,7 @@ export interface DeckContextValue {
     getWidgetState: (widgetId: string) => Record<string, unknown>;
     dragState: Accessor<DragState | null>;
     startDrag: (widgetId: string, startX: number, startY: number) => void;
-    updateDrag: (currentPosition: GridPosition, pixelOffset: {
-        x: number;
-        y: number;
-    }) => void;
+    updateDrag: (currentPosition: GridPosition) => void;
     endDrag: (commit: boolean) => void;
     resizeState: Accessor<ResizeState | null>;
     startResize: (widgetId: string, edge: ResizeState['edge'], startX: number, startY: number) => void;