@floegence/floe-webapp-core 0.36.38 → 0.36.40

package/dist/components/workbench/workbenchEdgeAutoPan.d.ts

@@ -0,0 +1,56 @@
+import type { WorkbenchViewport } from './types';
+export declare const WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR = "[data-floe-workbench-canvas-frame=\"true\"]";
+export interface WorkbenchEdgeAutoPanFrame {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface WorkbenchEdgeAutoPanVelocityOptions {
+    frame: WorkbenchEdgeAutoPanFrame;
+    clientX: number;
+    clientY: number;
+    thresholdPx?: number;
+    /**
+     * Deprecated: edge auto-pan intentionally keeps moving after the pointer leaves
+     * the frame during an active drag.
+     */
+    outsideTolerancePx?: number;
+    maxSpeedPxPerSecond?: number;
+}
+export interface WorkbenchEdgeAutoPanVelocity {
+    viewportVelocityX: number;
+    viewportVelocityY: number;
+}
+export interface WorkbenchEdgeAutoPanStep {
+    viewportDeltaX: number;
+    viewportDeltaY: number;
+    worldDeltaX: number;
+    worldDeltaY: number;
+    viewport: WorkbenchViewport;
+}
+export interface WorkbenchEdgeAutoPanControllerOptions {
+    readFrame: () => WorkbenchEdgeAutoPanFrame | null;
+    readViewport: () => WorkbenchViewport | null;
+    commitViewport: (viewport: WorkbenchViewport) => void;
+    onPan?: (step: WorkbenchEdgeAutoPanStep) => void;
+    onPanStart?: () => void;
+    shouldPan?: () => boolean;
+    thresholdPx?: number;
+    /**
+     * Deprecated: edge auto-pan intentionally keeps moving after the pointer leaves
+     * the frame during an active drag.
+     */
+    outsideTolerancePx?: number;
+    activationDelayMs?: number;
+    maxSpeedPxPerSecond?: number;
+}
+export interface WorkbenchEdgeAutoPanController {
+    updatePointer: (clientX: number, clientY: number) => void;
+    stop: () => void;
+}
+export declare function resolveWorkbenchEdgeAutoPanVelocity(options: WorkbenchEdgeAutoPanVelocityOptions): WorkbenchEdgeAutoPanVelocity;
+export declare function frameFromElement(element: HTMLElement | null | undefined): WorkbenchEdgeAutoPanFrame | null;
+export declare function createWorkbenchEdgeAutoPanController(options: WorkbenchEdgeAutoPanControllerOptions): WorkbenchEdgeAutoPanController;

package/dist/components/workbench/workbenchEdgeAutoPan.js

@@ -0,0 +1,127 @@
+const x = '[data-floe-workbench-canvas-frame="true"]';
+function u(e, t) {
+  return Number.isFinite(e) && Number(e) > 0 ? Number(e) : t;
+}
+function w(e) {
+  const t = Math.max(0, Math.min(1, e));
+  return t * t * (3 - 2 * t);
+}
+function h(e, t) {
+  if (e >= t) return 0;
+  if (e >= 0) {
+    const i = (t - e) / t * 0.78;
+    return w(i);
+  }
+  const r = Math.max(96, t), n = Math.min(1, Math.abs(e) / r);
+  return w(0.78 + n * 0.22);
+}
+function p(e) {
+  const t = u(e.thresholdPx, 72), r = u(
+    e.maxSpeedPxPerSecond,
+    680
+  ), n = e.frame;
+  if (!Number.isFinite(n.width) || n.width <= 0 || !Number.isFinite(n.height) || n.height <= 0)
+    return { viewportVelocityX: 0, viewportVelocityY: 0 };
+  const i = r / 1e3, l = h(e.clientX - n.left, t), s = h(n.right - e.clientX, t), A = h(e.clientY - n.top, t), D = h(n.bottom - e.clientY, t);
+  return {
+    viewportVelocityX: (l - s) * i,
+    viewportVelocityY: (A - D) * i
+  };
+}
+function y(e) {
+  const t = e?.getBoundingClientRect();
+  return t ? {
+    left: t.left,
+    top: t.top,
+    right: t.right,
+    bottom: t.bottom,
+    width: t.width,
+    height: t.height
+  } : null;
+}
+function X(e) {
+  return typeof window > "u" || typeof window.requestAnimationFrame != "function" ? null : window.requestAnimationFrame(e);
+}
+function L(e) {
+  e === null || typeof window > "u" || typeof window.cancelAnimationFrame != "function" || window.cancelAnimationFrame(e);
+}
+function b(e) {
+  let t = null, r = null, n = null, i = null, l = !1, s = !1;
+  const A = () => u(e.thresholdPx, 72), D = () => Math.max(0, u(
+    e.activationDelayMs,
+    45
+  )), F = () => u(
+    e.maxSpeedPxPerSecond,
+    680
+  ), E = () => {
+    i = null, n = null;
+  }, c = () => {
+    l || r !== null || !t || (r = X(T));
+  }, T = (o) => {
+    if (r = null, l || !t) return;
+    if (e.shouldPan && !e.shouldPan()) {
+      E();
+      return;
+    }
+    const _ = e.readFrame(), a = e.readViewport();
+    if (!_ || !a) {
+      E();
+      return;
+    }
+    const m = p({
+      frame: _,
+      clientX: t.clientX,
+      clientY: t.clientY,
+      thresholdPx: A(),
+      maxSpeedPxPerSecond: F()
+    });
+    if (m.viewportVelocityX === 0 && m.viewportVelocityY === 0) {
+      E();
+      return;
+    }
+    if (i === null) {
+      i = o, n = o, c();
+      return;
+    }
+    if (o - i < D()) {
+      n = o, c();
+      return;
+    }
+    const P = Math.max(0, Math.min(48, o - (n ?? o)));
+    if (n = o, P <= 0) {
+      c();
+      return;
+    }
+    const d = m.viewportVelocityX * P, f = m.viewportVelocityY * P;
+    if (Math.abs(d) < 0.01 && Math.abs(f) < 0.01) {
+      c();
+      return;
+    }
+    const S = Math.max(Math.abs(Number(a.scale)), 1e-3), M = {
+      ...a,
+      x: a.x + d,
+      y: a.y + f
+    };
+    s || (s = !0, e.onPanStart?.()), e.commitViewport(M), e.onPan?.({
+      viewportDeltaX: d,
+      viewportDeltaY: f,
+      worldDeltaX: -d / S,
+      worldDeltaY: -f / S,
+      viewport: M
+    }), c();
+  };
+  return {
+    updatePointer: (o, _) => {
+      t = { clientX: o, clientY: _ }, c();
+    },
+    stop: () => {
+      l = !0, L(r), r = null, t = null, E();
+    }
+  };
+}
+export {
+  x as WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR,
+  b as createWorkbenchEdgeAutoPanController,
+  y as frameFromElement,
+  p as resolveWorkbenchEdgeAutoPanVelocity
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.38",
+  "version": "0.36.40",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",