@floegence/floe-webapp-core 0.36.38 → 0.36.39

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

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

package/package.json

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