@flowgram-vue/core 0.2.0

package/src/core/utils/use-gesture/core/actions.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { GestureKey, EngineClass, Action } from './types';
+import { WheelEngine } from './engines/WheelEngine';
+import { ScrollEngine } from './engines/ScrollEngine';
+import { PinchEngine } from './engines/PinchEngine';
+import { MoveEngine } from './engines/MoveEngine';
+import { HoverEngine } from './engines/HoverEngine';
+import { DragEngine } from './engines/DragEngine';
+import { wheelConfigResolver } from './config/wheelConfigResolver';
+import { scrollConfigResolver } from './config/scrollConfigResolver';
+import { ResolverMap } from './config/resolver';
+import { pinchConfigResolver } from './config/pinchConfigResolver';
+import { moveConfigResolver } from './config/moveConfigResolver';
+import { hoverConfigResolver } from './config/hoverConfigResolver';
+import { dragConfigResolver } from './config/dragConfigResolver';
+
+export const EngineMap = new Map<GestureKey, EngineClass<any>>();
+export const ConfigResolverMap = new Map<GestureKey, ResolverMap>();
+
+export function registerAction(action: Action) {
+  EngineMap.set(action.key, action.engine);
+  ConfigResolverMap.set(action.key, action.resolver);
+}
+
+export const dragAction: Action = {
+  key: 'drag',
+  engine: DragEngine as any,
+  resolver: dragConfigResolver,
+};
+
+export const hoverAction: Action = {
+  key: 'hover',
+  engine: HoverEngine as any,
+  resolver: hoverConfigResolver,
+};
+
+export const moveAction: Action = {
+  key: 'move',
+  engine: MoveEngine as any,
+  resolver: moveConfigResolver,
+};
+
+export const pinchAction: Action = {
+  key: 'pinch',
+  engine: PinchEngine as any,
+  resolver: pinchConfigResolver,
+};
+
+export const scrollAction: Action = {
+  key: 'scroll',
+  engine: ScrollEngine as any,
+  resolver: scrollConfigResolver,
+};
+
+export const wheelAction: Action = {
+  key: 'wheel',
+  engine: WheelEngine as any,
+  resolver: wheelConfigResolver,
+};

package/src/core/utils/use-gesture/core/config/commonConfigResolver.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { InternalGestureOptions } from '../types'
+import { Vector2, State, GenericOptions } from '../types'
+import { V } from '../utils/maths'
+
+export const identity = (v: Vector2) => v
+export const DEFAULT_RUBBERBAND = 0.15
+
+export const commonConfigResolver = {
+  enabled(value = true) {
+    return value
+  },
+  eventOptions(value: AddEventListenerOptions | undefined, _k: string, config: { shared: GenericOptions }) {
+    return { ...config.shared.eventOptions, ...value }
+  },
+  preventDefault(value = false) {
+    return value
+  },
+  triggerAllEvents(value = false) {
+    return value
+  },
+  rubberband(value: number | boolean | Vector2 = 0): Vector2 {
+    switch (value) {
+      case true:
+        return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND]
+      case false:
+        return [0, 0]
+      default:
+        return V.toVector(value)
+    }
+  },
+  from(value: number | Vector2 | ((s: State) => Vector2)) {
+    if (typeof value === 'function') return value
+    // eslint-disable-next-line eqeqeq
+    if (value != null) return V.toVector(value)
+  },
+  transform(this: InternalGestureOptions, value: any, _k: string, config: { shared: GenericOptions }) {
+    const transform = value || config.shared.transform
+    this.hasCustomTransform = !!transform
+
+    if (process.env.NODE_ENV === 'development') {
+      const originalTransform = transform || identity
+      return (v: Vector2) => {
+        const r = originalTransform(v)
+        if (!isFinite(r[0]) || !isFinite(r[1])) {
+          // eslint-disable-next-line no-console
+          console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${r[0]},${[1]}]`)
+        }
+        return r
+      }
+    }
+    return transform || identity
+  },
+  threshold(value: any) {
+    return V.toVector(value, 0)
+  }
+}
+
+if (process.env.NODE_ENV === 'development') {
+  Object.assign(commonConfigResolver, {
+    domTarget(value: any) {
+      if (value !== undefined) {
+        throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`)
+      }
+      return NaN
+    },
+    lockDirection(value: any) {
+      if (value !== undefined) {
+        throw Error(
+          `[@use-gesture]: \`lockDirection\` option has been merged with \`axis\`. Use it as in \`{ axis: 'lock' }\``
+        )
+      }
+      return NaN
+    },
+    initial(value: any) {
+      if (value !== undefined) {
+        throw Error(`[@use-gesture]: \`initial\` option has been renamed to \`from\`.`)
+      }
+      return NaN
+    }
+  })
+}

package/src/core/utils/use-gesture/core/config/coordinatesConfigResolver.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { commonConfigResolver } from './commonConfigResolver'
+import { InternalCoordinatesOptions, CoordinatesConfig, Bounds, DragBounds, State, Vector2 } from '../types'
+
+const DEFAULT_AXIS_THRESHOLD = 0
+
+export const coordinatesConfigResolver = {
+  ...commonConfigResolver,
+  axis(
+    this: InternalCoordinatesOptions,
+    _v: any,
+    _k: string,
+    { axis }: CoordinatesConfig
+  ): InternalCoordinatesOptions['axis'] {
+    this.lockDirection = axis === 'lock'
+    if (!this.lockDirection) return axis as any
+  },
+  axisThreshold(value = DEFAULT_AXIS_THRESHOLD) {
+    return value
+  },
+  bounds(
+    value: DragBounds | ((state: State) => DragBounds) = {}
+  ): (() => EventTarget | null) | HTMLElement | [Vector2, Vector2] {
+    if (typeof value === 'function') {
+      // @ts-ignore
+      return (state: State) => coordinatesConfigResolver.bounds(value(state))
+    }
+
+    if ('current' in value) {
+      return () => value.current
+    }
+
+    if (typeof HTMLElement === 'function' && value instanceof HTMLElement) {
+      return value
+    }
+
+    const { left = -Infinity, right = Infinity, top = -Infinity, bottom = Infinity } = value as Bounds
+
+    return [
+      [left, right],
+      [top, bottom]
+    ]
+  }
+}

package/src/core/utils/use-gesture/core/config/dragConfigResolver.ts

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PointerType } from '../types'
+import { DragConfig, InternalDragOptions, Vector2 } from '../types'
+import { V } from '../utils/maths'
+import { coordinatesConfigResolver } from './coordinatesConfigResolver'
+import { SUPPORT } from './support'
+
+export const DEFAULT_PREVENT_SCROLL_DELAY = 250
+export const DEFAULT_DRAG_DELAY = 180
+export const DEFAULT_SWIPE_VELOCITY = 0.5
+export const DEFAULT_SWIPE_DISTANCE = 50
+export const DEFAULT_SWIPE_DURATION = 250
+export const DEFAULT_KEYBOARD_DISPLACEMENT = 10
+
+const DEFAULT_DRAG_AXIS_THRESHOLD: Record<PointerType, number> = { mouse: 0, touch: 0, pen: 8 }
+
+export const dragConfigResolver = {
+  ...coordinatesConfigResolver,
+  device(
+    this: InternalDragOptions,
+    _v: any,
+    _k: string,
+    { pointer: { touch = false, lock = false, mouse = false } = {} }: DragConfig
+  ) {
+    this.pointerLock = lock && SUPPORT.pointerLock
+    if (SUPPORT.touch && touch) return 'touch'
+    if (this.pointerLock) return 'mouse'
+    if (SUPPORT.pointer && !mouse) return 'pointer'
+    if (SUPPORT.touch) return 'touch'
+    return 'mouse'
+  },
+  preventScrollAxis(this: InternalDragOptions, value: 'x' | 'y' | 'xy', _k: string, { preventScroll }: DragConfig) {
+    this.preventScrollDelay =
+      typeof preventScroll === 'number'
+        ? preventScroll
+        : preventScroll || (preventScroll === undefined && value)
+        ? DEFAULT_PREVENT_SCROLL_DELAY
+        : undefined
+    if (!SUPPORT.touchscreen || preventScroll === false) return undefined
+    return value ? value : preventScroll !== undefined ? 'y' : undefined
+  },
+  pointerCapture(
+    this: InternalDragOptions,
+    _v: any,
+    _k: string,
+    { pointer: { capture = true, buttons = 1, keys = true } = {} }
+  ) {
+    this.pointerButtons = buttons
+    this.keys = keys
+    return !this.pointerLock && this.device === 'pointer' && capture
+  },
+  threshold(
+    this: InternalDragOptions,
+    value: number | Vector2,
+    _k: string,
+    { filterTaps = false, tapsThreshold = 3, axis = undefined }
+  ) {
+    // TODO add warning when value is 0 and filterTaps or axis is set
+    const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0)
+    this.filterTaps = filterTaps
+    this.tapsThreshold = tapsThreshold
+    return threshold
+  },
+  swipe(
+    this: InternalDragOptions,
+    { velocity = DEFAULT_SWIPE_VELOCITY, distance = DEFAULT_SWIPE_DISTANCE, duration = DEFAULT_SWIPE_DURATION } = {}
+  ) {
+    return {
+      velocity: this.transform(V.toVector(velocity)),
+      distance: this.transform(V.toVector(distance)),
+      duration
+    }
+  },
+  delay(value: number | boolean = 0) {
+    switch (value) {
+      case true:
+        return DEFAULT_DRAG_DELAY
+      case false:
+        return 0
+      default:
+        return value
+    }
+  },
+  axisThreshold(value: Record<PointerType, number>) {
+    if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD
+    return { ...DEFAULT_DRAG_AXIS_THRESHOLD, ...value }
+  },
+  keyboardDisplacement(value: number = DEFAULT_KEYBOARD_DISPLACEMENT) {
+    return value
+  }
+}
+
+if (process.env.NODE_ENV === 'development') {
+  Object.assign(dragConfigResolver, {
+    useTouch(value: any) {
+      if (value !== undefined) {
+        throw Error(
+          `[@use-gesture]: \`useTouch\` option has been renamed to \`pointer.touch\`. Use it as in \`{ pointer: { touch: true } }\`.`
+        )
+      }
+      return NaN
+    },
+    experimental_preventWindowScrollY(value: any) {
+      if (value !== undefined) {
+        throw Error(
+          `[@use-gesture]: \`experimental_preventWindowScrollY\` option has been renamed to \`preventScroll\`.`
+        )
+      }
+      return NaN
+    },
+    swipeVelocity(value: any) {
+      if (value !== undefined) {
+        throw Error(
+          `[@use-gesture]: \`swipeVelocity\` option has been renamed to \`swipe.velocity\`. Use it as in \`{ swipe: { velocity: 0.5 } }\`.`
+        )
+      }
+      return NaN
+    },
+    swipeDistance(value: any) {
+      if (value !== undefined) {
+        throw Error(
+          `[@use-gesture]: \`swipeDistance\` option has been renamed to \`swipe.distance\`. Use it as in \`{ swipe: { distance: 50 } }\`.`
+        )
+      }
+      return NaN
+    },
+    swipeDuration(value: any) {
+      if (value !== undefined) {
+        throw Error(
+          `[@use-gesture]: \`swipeDuration\` option has been renamed to \`swipe.duration\`. Use it as in \`{ swipe: { duration: 250 } }\`.`
+        )
+      }
+      return NaN
+    }
+  })
+}

package/src/core/utils/use-gesture/core/config/hoverConfigResolver.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { coordinatesConfigResolver } from './coordinatesConfigResolver'
+
+export const hoverConfigResolver = {
+  ...coordinatesConfigResolver,
+  mouseOnly: (value = true) => value
+}

package/src/core/utils/use-gesture/core/config/moveConfigResolver.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { coordinatesConfigResolver } from './coordinatesConfigResolver'
+
+export const moveConfigResolver = {
+  ...coordinatesConfigResolver,
+  mouseOnly: (value = true) => value
+}

package/src/core/utils/use-gesture/core/config/pinchConfigResolver.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ModifierKey } from '../types'
+import { PinchConfig, GenericOptions, InternalPinchOptions, State, Vector2 } from '../types'
+import { call, assignDefault } from '../utils/fn'
+import { V } from '../utils/maths'
+import { commonConfigResolver } from './commonConfigResolver'
+import { SUPPORT } from './support'
+
+export const pinchConfigResolver = {
+  ...commonConfigResolver,
+  device(
+    this: InternalPinchOptions,
+    _v: any,
+    _k: string,
+    { shared, pointer: { touch = false } = {} }: { shared: GenericOptions } & PinchConfig
+  ) {
+    // Only try to use gesture events when they are supported and domTarget is set
+    // as React doesn't support gesture handlers.
+    const sharedConfig = shared
+    if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture'
+    if (SUPPORT.touch && touch) return 'touch'
+    if (SUPPORT.touchscreen) {
+      if (SUPPORT.pointer) return 'pointer'
+      if (SUPPORT.touch) return 'touch'
+    }
+    // device is undefined and that's ok, we're going to use wheel to zoom.
+  },
+  bounds(_v: any, _k: string, { scaleBounds = {}, angleBounds = {} }: PinchConfig) {
+    const _scaleBounds = (state?: State) => {
+      const D = assignDefault(call(scaleBounds, state), { min: -Infinity, max: Infinity })
+      return [D.min, D.max]
+    }
+
+    const _angleBounds = (state?: State) => {
+      const A = assignDefault(call(angleBounds, state), { min: -Infinity, max: Infinity })
+      return [A.min, A.max]
+    }
+
+    if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()]
+
+    return (state: State) => [_scaleBounds(state), _angleBounds(state)]
+  },
+  threshold(this: InternalPinchOptions, value: number | Vector2, _k: string, config: PinchConfig) {
+    this.lockDirection = config.axis === 'lock'
+    const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0)
+    return threshold
+  },
+  modifierKey(value: ModifierKey | ModifierKey[]) {
+    if (value === undefined) return 'ctrlKey'
+    return value
+  },
+  pinchOnWheel(value = true) {
+    return value
+  }
+}

package/src/core/utils/use-gesture/core/config/resolver.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { sharedConfigResolver } from './sharedConfigResolver'
+import { ConfigResolverMap } from '../actions'
+import { GestureKey, InternalConfig, UserGestureConfig } from '../types'
+
+export type Resolver = (x: any, key: string, obj: any) => any
+export type ResolverMap = { [k: string]: Resolver | ResolverMap | boolean }
+
+export function resolveWith<T extends { [k: string]: any }, V extends { [k: string]: any }>(
+  config: Partial<T> = {},
+  resolvers: ResolverMap
+): V {
+  const result: any = {}
+
+  for (const [key, resolver] of Object.entries(resolvers)) {
+    switch (typeof resolver) {
+      case 'function':
+        if (process.env.NODE_ENV === 'development') {
+          const r = resolver.call(result, config[key], key, config)
+          // prevents deprecated resolvers from applying in dev mode
+          if (!Number.isNaN(r)) result[key] = r
+        } else {
+          result[key] = resolver.call(result, config[key], key, config)
+        }
+        break
+      case 'object':
+        result[key] = resolveWith(config[key], resolver)
+        break
+      case 'boolean':
+        if (resolver) result[key] = config[key]
+        break
+    }
+  }
+
+  return result
+}
+
+export function parse(newConfig: UserGestureConfig, gestureKey?: GestureKey, _config: any = {}): InternalConfig {
+  const { target, eventOptions, window, enabled, transform, ...rest } = newConfig as any
+
+  _config.shared = resolveWith({ target, eventOptions, window, enabled, transform }, sharedConfigResolver)
+
+  if (gestureKey) {
+    const resolver = ConfigResolverMap.get(gestureKey)!
+    _config[gestureKey] = resolveWith({ shared: _config.shared, ...rest }, resolver)
+  } else {
+    for (const key in rest) {
+      const resolver = ConfigResolverMap.get(key as GestureKey)!
+
+      if (resolver) {
+        _config[key] = resolveWith({ shared: _config.shared, ...rest[key] }, resolver)
+      } else if (process.env.NODE_ENV === 'development') {
+        if (!['drag', 'pinch', 'scroll', 'wheel', 'move', 'hover'].includes(key)) {
+          if (key === 'domTarget') {
+            throw Error(`[@use-gesture]: \`domTarget\` option has been renamed to \`target\`.`)
+          }
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[@use-gesture]: Unknown config key \`${key}\` was used. Please read the documentation for further information.`
+          )
+        }
+      }
+    }
+  }
+  return _config
+}

package/src/core/utils/use-gesture/core/config/scrollConfigResolver.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { coordinatesConfigResolver } from './coordinatesConfigResolver'
+
+export const scrollConfigResolver = coordinatesConfigResolver

package/src/core/utils/use-gesture/core/config/sharedConfigResolver.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Target } from '../types'
+import { SUPPORT } from './support'
+
+export const sharedConfigResolver = {
+  target(value: Target) {
+    if (value) {
+      return () => ('current' in value ? value.current : value)
+    }
+    return undefined
+  },
+  enabled(value = true) {
+    return value
+  },
+  window(value = SUPPORT.isBrowser ? window : undefined) {
+    return value
+  },
+  eventOptions({ passive = true, capture = false } = {}) {
+    return { passive, capture }
+  },
+  transform(value: any) {
+    return value
+  }
+}

package/src/core/utils/use-gesture/core/config/support.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+const isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement
+
+function supportsTouchEvents(): boolean {
+  return isBrowser && 'ontouchstart' in window
+}
+
+function isTouchScreen(): boolean {
+  return supportsTouchEvents() || (isBrowser && window.navigator.maxTouchPoints > 1)
+}
+
+function supportsPointerEvents(): boolean {
+  return isBrowser && 'onpointerdown' in window
+}
+
+function supportsPointerLock(): boolean {
+  return isBrowser && 'exitPointerLock' in window.document
+}
+
+function supportsGestureEvents(): boolean {
+  try {
+    // TODO [TS] possibly find GestureEvent definitions?
+    // @ts-ignore: no type definitions for webkit GestureEvents
+    return 'constructor' in GestureEvent
+  } catch (e) {
+    return false
+  }
+}
+
+export const SUPPORT = {
+  isBrowser,
+  gesture: supportsGestureEvents(),
+  /**
+   * It looks from https://github.com/pmndrs/use-gesture/discussions/421 that
+   * some touchscreens using webkits don't have 'ontouchstart' in window. So
+   * we're considering that browsers support TouchEvent if they have
+   * `maxTouchPoints > 1`
+   *
+   * Update 16/09/2023: This generates failure on other Windows systems, so reverting
+   * back to detecting TouchEvent support only.
+   * https://github.com/pmndrs/use-gesture/issues/626
+   */
+  touch: supportsTouchEvents(),
+  // touch: isTouchScreen(),
+  touchscreen: isTouchScreen(),
+  pointer: supportsPointerEvents(),
+  pointerLock: supportsPointerLock()
+}

package/src/core/utils/use-gesture/core/config/wheelConfigResolver.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { coordinatesConfigResolver } from './coordinatesConfigResolver'
+
+export const wheelConfigResolver = coordinatesConfigResolver

package/src/core/utils/use-gesture/core/engines/CoordinatesEngine.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { V } from '../utils/maths';
+import { getPointerType } from '../utils/events';
+import { CoordinatesKey, Vector2 } from '../types';
+import { Engine } from './Engine';
+
+function selectAxis([dx, dy]: Vector2, threshold: number) {
+  const absDx = Math.abs(dx);
+  const absDy = Math.abs(dy);
+
+  if (absDx > absDy && absDx > threshold) {
+    return 'x';
+  }
+  if (absDy > absDx && absDy > threshold) {
+    return 'y';
+  }
+  return undefined;
+}
+
+export abstract class CoordinatesEngine<Key extends CoordinatesKey> extends Engine<Key> {
+  aliasKey = 'xy';
+
+  reset() {
+    super.reset();
+    this.state.axis = undefined;
+  }
+
+  init() {
+    this.state.offset = [0, 0];
+    this.state.lastOffset = [0, 0];
+  }
+
+  computeOffset() {
+    this.state.offset = V.add(this.state.lastOffset, this.state.movement);
+  }
+
+  computeMovement() {
+    this.state.movement = V.sub(this.state.offset, this.state.lastOffset);
+  }
+
+  axisIntent(event?: UIEvent) {
+    const state = this.state;
+    const config = this.config;
+
+    if (!state.axis && event) {
+      const threshold =
+        typeof config.axisThreshold === 'object'
+          ? config.axisThreshold[getPointerType(event)]
+          : config.axisThreshold;
+
+      state.axis = selectAxis(state._movement, threshold);
+    }
+
+    // We block the movement if either:
+    // - config.lockDirection or config.axis was set but axis isn't detected yet
+    // - config.axis was set but is different than detected axis
+    state._blocked =
+      ((config.lockDirection || !!config.axis) && !state.axis) ||
+      (!!config.axis && config.axis !== state.axis);
+  }
+
+  restrictToAxis(v: Vector2) {
+    if (this.config.axis || this.config.lockDirection) {
+      switch (this.state.axis) {
+        case 'x':
+          v[1] = 0;
+          break; // [ x, 0 ]
+        case 'y':
+          v[0] = 0;
+          break; // [ 0, y ]
+      }
+    }
+  }
+}