@flowgram-vue/core 0.2.0

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

@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export type Vector2 = [number, number];
+export type WebKitGestureEvent = PointerEvent & { scale: number; rotation: number };
+export type Target = EventTarget | { current: EventTarget | null };
+export type PointerType = 'mouse' | 'touch' | 'pen';
+
+// replaces NonUndefined from 4.7 and inferior versions
+export type NonUndefined<T> = T extends undefined ? never : T;
+export type EventHandler<E extends Event = Event> = (event: E) => void;
+
+// rip off from React types
+export interface DOMHandlers {
+  // Clipboard Events
+  onCopy?: EventHandler<ClipboardEvent>;
+  onCopyCapture?: EventHandler<ClipboardEvent>;
+  onCut?: EventHandler<ClipboardEvent>;
+  onCutCapture?: EventHandler<ClipboardEvent>;
+  onPaste?: EventHandler<ClipboardEvent>;
+  onPasteCapture?: EventHandler<ClipboardEvent>;
+
+  // Composition Events
+  onCompositionEnd?: EventHandler<CompositionEvent>;
+  onCompositionEndCapture?: EventHandler<CompositionEvent>;
+  onCompositionStart?: EventHandler<CompositionEvent>;
+  onCompositionStartCapture?: EventHandler<CompositionEvent>;
+  onCompositionUpdate?: EventHandler<CompositionEvent>;
+  onCompositionUpdateCapture?: EventHandler<CompositionEvent>;
+
+  // Focus Events
+  onFocus?: EventHandler<FocusEvent>;
+  onFocusCapture?: EventHandler<FocusEvent>;
+  onBlur?: EventHandler<FocusEvent>;
+  onBlurCapture?: EventHandler<FocusEvent>;
+
+  // Form Events
+  onChange?: EventHandler<FormDataEvent>;
+  onChangeCapture?: EventHandler<FormDataEvent>;
+  onBeforeInput?: EventHandler<FormDataEvent>;
+  onBeforeInputCapture?: EventHandler<FormDataEvent>;
+  onInput?: EventHandler<FormDataEvent>;
+  onInputCapture?: EventHandler<FormDataEvent>;
+  onReset?: EventHandler<FormDataEvent>;
+  onResetCapture?: EventHandler<FormDataEvent>;
+  onSubmit?: EventHandler<FormDataEvent>;
+  onSubmitCapture?: EventHandler<FormDataEvent>;
+  onInvalid?: EventHandler<FormDataEvent>;
+  onInvalidCapture?: EventHandler<FormDataEvent>;
+
+  // Image Events
+  onLoad?: EventHandler;
+  onLoadCapture?: EventHandler;
+  onError?: EventHandler; // also a Media Event
+  onErrorCapture?: EventHandler; // also a Media Event
+
+  // Keyboard Events
+  onKeyDown?: EventHandler<KeyboardEvent>;
+  onKeyDownCapture?: EventHandler<KeyboardEvent>;
+  onKeyUp?: EventHandler<KeyboardEvent>;
+  onKeyUpCapture?: EventHandler<KeyboardEvent>;
+
+  // Media Events
+  onAbort?: EventHandler;
+  onAbortCapture?: EventHandler;
+  onCanPlay?: EventHandler;
+  onCanPlayCapture?: EventHandler;
+  onCanPlayThrough?: EventHandler;
+  onCanPlayThroughCapture?: EventHandler;
+  onDurationChange?: EventHandler;
+  onDurationChangeCapture?: EventHandler;
+  onEmptied?: EventHandler;
+  onEmptiedCapture?: EventHandler;
+  onEncrypted?: EventHandler;
+  onEncryptedCapture?: EventHandler;
+  onEnded?: EventHandler;
+  onEndedCapture?: EventHandler;
+  onLoadedData?: EventHandler;
+  onLoadedDataCapture?: EventHandler;
+  onLoadedMetadata?: EventHandler;
+  onLoadedMetadataCapture?: EventHandler;
+  onLoadStart?: EventHandler;
+  onLoadStartCapture?: EventHandler;
+  onPause?: EventHandler;
+  onPauseCapture?: EventHandler;
+  onPlay?: EventHandler;
+  onPlayCapture?: EventHandler;
+  onPlaying?: EventHandler;
+  onPlayingCapture?: EventHandler;
+  onProgress?: EventHandler;
+  onProgressCapture?: EventHandler;
+  onRateChange?: EventHandler;
+  onRateChangeCapture?: EventHandler;
+  onSeeked?: EventHandler;
+  onSeekedCapture?: EventHandler;
+  onSeeking?: EventHandler;
+  onSeekingCapture?: EventHandler;
+  onStalled?: EventHandler;
+  onStalledCapture?: EventHandler;
+  onSuspend?: EventHandler;
+  onSuspendCapture?: EventHandler;
+  onTimeUpdate?: EventHandler;
+  onTimeUpdateCapture?: EventHandler;
+  onVolumeChange?: EventHandler;
+  onVolumeChangeCapture?: EventHandler;
+  onWaiting?: EventHandler;
+  onWaitingCapture?: EventHandler;
+
+  // MouseEvents
+  onAuxClick?: EventHandler<MouseEvent>;
+  onAuxClickCapture?: EventHandler<MouseEvent>;
+  onClick?: EventHandler<MouseEvent>;
+  onClickCapture?: EventHandler<MouseEvent>;
+  onContextMenu?: EventHandler<MouseEvent>;
+  onContextMenuCapture?: EventHandler<MouseEvent>;
+  onDoubleClick?: EventHandler<MouseEvent>;
+  onDoubleClickCapture?: EventHandler<MouseEvent>;
+  onDrag?: EventHandler<DragEvent>;
+  onDragCapture?: EventHandler<DragEvent>;
+  onDragEnd?: EventHandler<DragEvent>;
+  onDragEndCapture?: EventHandler<DragEvent>;
+  onDragEnter?: EventHandler<DragEvent>;
+  onDragEnterCapture?: EventHandler<DragEvent>;
+  onDragExit?: EventHandler<DragEvent>;
+  onDragExitCapture?: EventHandler<DragEvent>;
+  onDragLeave?: EventHandler<DragEvent>;
+  onDragLeaveCapture?: EventHandler<DragEvent>;
+  onDragOver?: EventHandler<DragEvent>;
+  onDragOverCapture?: EventHandler<DragEvent>;
+  onDragStart?: EventHandler<DragEvent>;
+  onDragStartCapture?: EventHandler<DragEvent>;
+  onDrop?: EventHandler<DragEvent>;
+  onDropCapture?: EventHandler<DragEvent>;
+  onMouseDown?: EventHandler<MouseEvent>;
+  onMouseDownCapture?: EventHandler<MouseEvent>;
+  onMouseEnter?: EventHandler<MouseEvent>;
+  onMouseLeave?: EventHandler<MouseEvent>;
+  onMouseMove?: EventHandler<MouseEvent>;
+  onMouseMoveCapture?: EventHandler<MouseEvent>;
+  onMouseOut?: EventHandler<MouseEvent>;
+  onMouseOutCapture?: EventHandler<MouseEvent>;
+  onMouseOver?: EventHandler<MouseEvent>;
+  onMouseOverCapture?: EventHandler<MouseEvent>;
+  onMouseUp?: EventHandler<MouseEvent>;
+  onMouseUpCapture?: EventHandler<MouseEvent>;
+
+  // Selection Events
+  onSelect?: EventHandler;
+  onSelectCapture?: EventHandler;
+
+  // Touch Events
+  onTouchCancel?: EventHandler<TouchEvent>;
+  onTouchCancelCapture?: EventHandler<TouchEvent>;
+  onTouchEnd?: EventHandler<TouchEvent>;
+  onTouchEndCapture?: EventHandler<TouchEvent>;
+  onTouchMove?: EventHandler<TouchEvent>;
+  onTouchMoveCapture?: EventHandler<TouchEvent>;
+  onTouchStart?: EventHandler<TouchEvent>;
+  onTouchStartCapture?: EventHandler<TouchEvent>;
+
+  // Pointer Events
+  onPointerDown?: EventHandler<PointerEvent>;
+  onPointerDownCapture?: EventHandler<PointerEvent>;
+  onPointerMove?: EventHandler<PointerEvent>;
+  onPointerMoveCapture?: EventHandler<PointerEvent>;
+  onPointerUp?: EventHandler<PointerEvent>;
+  onPointerUpCapture?: EventHandler<PointerEvent>;
+  onPointerCancel?: EventHandler<PointerEvent>;
+  onPointerCancelCapture?: EventHandler<PointerEvent>;
+  onPointerEnter?: EventHandler<PointerEvent>;
+  onPointerEnterCapture?: EventHandler<PointerEvent>;
+  onPointerLeave?: EventHandler<PointerEvent>;
+  onPointerLeaveCapture?: EventHandler<PointerEvent>;
+  onPointerOver?: EventHandler<PointerEvent>;
+  onPointerOverCapture?: EventHandler<PointerEvent>;
+  onPointerOut?: EventHandler<PointerEvent>;
+  onPointerOutCapture?: EventHandler<PointerEvent>;
+  onGotPointerCapture?: EventHandler<PointerEvent>;
+  onGotPointerCaptureCapture?: EventHandler<PointerEvent>;
+  onLostPointerCapture?: EventHandler<PointerEvent>;
+  onLostPointerCaptureCapture?: EventHandler<PointerEvent>;
+
+  // UI Events
+  onScroll?: EventHandler<UIEvent>;
+  onScrollCapture?: EventHandler<UIEvent>;
+
+  // Wheel Events
+  onWheel?: EventHandler<WheelEvent>;
+  onWheelCapture?: EventHandler<WheelEvent>;
+
+  // Animation Events
+  onAnimationStart?: EventHandler<AnimationEvent>;
+  onAnimationStartCapture?: EventHandler<AnimationEvent>;
+  onAnimationEnd?: EventHandler<AnimationEvent>;
+  onAnimationEndCapture?: EventHandler<AnimationEvent>;
+  onAnimationIteration?: EventHandler<AnimationEvent>;
+  onAnimationIterationCapture?: EventHandler<AnimationEvent>;
+
+  // Transition Events
+  onTransitionEnd?: EventHandler<TransitionEvent>;
+  onTransitionEndCapture?: EventHandler<TransitionEvent>;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// type exports for core
+
+export * from './types/index';

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

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PointerType } from '../types';
+import { Vector2 } from '../types';
+
+const EVENT_TYPE_MAP: any = {
+  pointer: { start: 'down', change: 'move', end: 'up' },
+  mouse: { start: 'down', change: 'move', end: 'up' },
+  touch: { start: 'start', change: 'move', end: 'end' },
+  gesture: { start: 'start', change: 'change', end: 'end' },
+};
+
+function capitalize(string: string) {
+  if (!string) return '';
+  return string[0].toUpperCase() + string.slice(1);
+}
+
+const actionsWithoutCaptureSupported = ['enter', 'leave'];
+
+function hasCapture(capture = false, actionKey: string) {
+  return capture && !actionsWithoutCaptureSupported.includes(actionKey);
+}
+
+export function toHandlerProp(device: string, action = '', capture: boolean = false) {
+  const deviceProps = EVENT_TYPE_MAP[device];
+  const actionKey = deviceProps ? deviceProps[action] || action : action;
+  return (
+    'on' +
+    capitalize(device) +
+    capitalize(actionKey) +
+    (hasCapture(capture, actionKey) ? 'Capture' : '')
+  );
+}
+
+const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture'];
+
+export function parseProp(prop: string) {
+  let eventKey = prop.substring(2).toLowerCase();
+  const passive = !!~eventKey.indexOf('passive');
+  if (passive) eventKey = eventKey.replace('passive', '');
+
+  const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture';
+  // capture = true
+  const capture = !!~eventKey.indexOf(captureKey);
+  // pointermovecapture => pointermove
+  if (capture) eventKey = eventKey.replace('capture', '');
+  return { device: eventKey, capture, passive };
+}
+
+export function toDomEventType(device: string, action = '') {
+  const deviceProps = EVENT_TYPE_MAP[device];
+  const actionKey = deviceProps ? deviceProps[action] || action : action;
+  return device + actionKey;
+}
+
+export function isTouch(event: UIEvent) {
+  return 'touches' in event;
+}
+
+export function getPointerType(event: UIEvent): PointerType {
+  if (isTouch(event)) return 'touch';
+  if ('pointerType' in event) return (event as PointerEvent).pointerType as PointerType;
+  return 'mouse';
+}
+
+function getCurrentTargetTouchList(event: TouchEvent) {
+  return Array.from(event.touches).filter(
+    e =>
+      e.target === event.currentTarget ||
+      (event.currentTarget as Node)?.contains?.(e.target as Node),
+  );
+}
+
+function getTouchList(event: TouchEvent) {
+  return event.type === 'touchend' || event.type === 'touchcancel'
+    ? event.changedTouches
+    : event.targetTouches;
+}
+
+function getValueEvent<EventType extends TouchEvent | PointerEvent>(
+  event: EventType,
+): EventType extends TouchEvent ? Touch : PointerEvent {
+  return (isTouch(event) ? getTouchList(event as TouchEvent)[0] : event) as any;
+}
+
+export function distanceAngle(P1: Touch | PointerEvent, P2: Touch | PointerEvent) {
+  // add a try catch
+  // attempt to fix https://github.com/pmndrs/use-gesture/issues/551
+  try {
+    const dx = P2.clientX - P1.clientX;
+    const dy = P2.clientY - P1.clientY;
+    const cx = (P2.clientX + P1.clientX) / 2;
+    const cy = (P2.clientY + P1.clientY) / 2;
+
+    const distance = Math.hypot(dx, dy);
+    const angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
+    const origin = [cx, cy] as Vector2;
+    return { angle, distance, origin };
+  } catch {}
+  return null;
+}
+
+export function touchIds(event: TouchEvent) {
+  return getCurrentTargetTouchList(event).map(touch => touch.identifier);
+}
+
+export function touchDistanceAngle(event: TouchEvent, ids: number[]) {
+  const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier));
+  return distanceAngle(P1, P2);
+}
+
+export function pointerId(event: PointerEvent | TouchEvent) {
+  const valueEvent = getValueEvent(event);
+  return isTouch(event) ? (valueEvent as Touch).identifier : (valueEvent as PointerEvent).pointerId;
+}
+
+export function pointerValues(event: PointerEvent | TouchEvent): Vector2 {
+  // if ('spaceX' in event) return [event.spaceX, event.spaceY]
+  const valueEvent = getValueEvent(event);
+  return [valueEvent.clientX, valueEvent.clientY];
+}
+
+// wheel delta defaults from https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+const LINE_HEIGHT = 40;
+const PAGE_HEIGHT = 800;
+
+export function wheelValues(event: WheelEvent): Vector2 {
+  let { deltaX, deltaY, deltaMode } = event;
+  // normalize wheel values, especially for Firefox
+  if (deltaMode === 1) {
+    deltaX *= LINE_HEIGHT;
+    deltaY *= LINE_HEIGHT;
+  } else if (deltaMode === 2) {
+    deltaX *= PAGE_HEIGHT;
+    deltaY *= PAGE_HEIGHT;
+  }
+  return [deltaX, deltaY];
+}
+
+export function scrollValues(event: UIEvent): Vector2 {
+  // If the currentTarget is the window then we return the scrollX/Y position.
+  // If not (ie the currentTarget is a DOM element), then we return scrollLeft/Top
+  const { scrollX, scrollY, scrollLeft, scrollTop } = event.currentTarget as Element & Window;
+  return [scrollX ?? scrollLeft ?? 0, scrollY ?? scrollTop ?? 0];
+}
+
+export function getEventDetails(event: any) {
+  const payload: any = {};
+  if ('buttons' in event) payload.buttons = event.buttons;
+  if ('shiftKey' in event) {
+    const { shiftKey, altKey, metaKey, ctrlKey } = event;
+    Object.assign(payload, { shiftKey, altKey, metaKey, ctrlKey });
+  }
+  return payload;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export function call<T>(v: T | ((...args: any[]) => T), ...args: any[]): T {
+  if (typeof v === 'function') {
+    // @ts-ignore
+    return v(...args);
+  } else {
+    return v;
+  }
+}
+
+export function noop() {}
+
+export function chain(...fns: Function[]): Function {
+  if (fns.length === 0) return noop;
+  if (fns.length === 1) return fns[0];
+
+  return function (this: any) {
+    let result;
+    for (const fn of fns) {
+      result = fn.apply(this, arguments) || result;
+    }
+    return result;
+  };
+}
+
+export function assignDefault<T extends Object>(value: Partial<T> | undefined, fallback: T): T {
+  return Object.assign({}, fallback, value || {});
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Vector2 } from '../types';
+
+export function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(v, max));
+}
+
+export const V = {
+  toVector<T>(v: T | [T, T] | undefined, fallback?: T | [T, T]): [T, T] {
+    if (v === undefined) v = fallback as T | [T, T];
+    return Array.isArray(v) ? v : [v, v];
+  },
+  add(v1: Vector2, v2: Vector2): Vector2 {
+    return [v1[0] + v2[0], v1[1] + v2[1]];
+  },
+  sub(v1: Vector2, v2: Vector2): Vector2 {
+    return [v1[0] - v2[0], v1[1] - v2[1]];
+  },
+  addTo(v1: Vector2, v2: Vector2) {
+    v1[0] += v2[0];
+    v1[1] += v2[1];
+  },
+  subTo(v1: Vector2, v2: Vector2) {
+    v1[0] -= v2[0];
+    v1[1] -= v2[1];
+  },
+};
+
+// Based on @aholachek ;)
+// https://twitter.com/chpwn/status/285540192096497664
+// iOS constant = 0.55
+
+// https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5
+
+function rubberband(distance: number, dimension: number, constant: number) {
+  if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5);
+  return (distance * dimension * constant) / (dimension + constant * distance);
+}
+
+export function rubberbandIfOutOfBounds(
+  position: number,
+  min: number,
+  max: number,
+  constant = 0.15,
+) {
+  if (constant === 0) return clamp(position, min, max);
+  if (position < min) return -rubberband(min - position, max - min, constant) + min;
+  if (position > max) return +rubberband(position - max, max - min, constant) + max;
+  return position;
+}
+
+export function computeRubberband(
+  bounds: [Vector2, Vector2],
+  [Vx, Vy]: Vector2,
+  [Rx, Ry]: Vector2,
+): Vector2 {
+  const [[X0, X1], [Y0, Y1]] = bounds;
+  return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)];
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { CommonGestureState } from '../types';
+
+// _movement rolls back to when it passed the bounds.
+/**
+ * @note code is currently used in WheelEngine and PinchEngine.
+ */
+export function clampStateInternalMovementToBounds(state: CommonGestureState) {
+  const [ox, oy] = state.overflow;
+  const [dx, dy] = state._delta;
+  const [dirx, diry] = state._direction;
+
+  if ((ox < 0 && dx > 0 && dirx < 0) || (ox > 0 && dx < 0 && dirx > 0)) {
+    state._movement[0] = state._movementBound[0] as number;
+  }
+
+  if ((oy < 0 && dy > 0 && diry < 0) || (oy > 0 && dy < 0 && diry > 0)) {
+    state._movement[1] = state._movementBound[1] as number;
+  }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// additional core exports
+
+export { rubberbandIfOutOfBounds } from './utils/maths';

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

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './vanilla';

package/src/core/utils/use-gesture/vanilla/DragGesture.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { EventTypes, Handler, UserDragConfig } from '../core/types';
+import { registerAction, dragAction } from '../core/actions';
+import { Recognizer } from './Recognizer';
+
+interface DragGestureConstructor {
+  new <EventType = EventTypes['drag']>(
+    target: EventTarget,
+    handler: Handler<'drag', EventType>,
+    config?: UserDragConfig,
+  ): DragGesture;
+}
+
+export interface DragGesture extends Recognizer<'drag'> {}
+
+export const DragGesture: DragGestureConstructor = function <EventType = EventTypes['drag']>(
+  target: EventTarget,
+  handler: Handler<'drag', EventType>,
+  config?: UserDragConfig,
+) {
+  registerAction(dragAction);
+  return new Recognizer(target, { drag: handler }, config || {}, 'drag');
+} as any;

package/src/core/utils/use-gesture/vanilla/Gesture.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  AnyHandlerEventTypes,
+  EventTypes,
+  GestureHandlers,
+  UserGestureConfig,
+} from '../core/types';
+import {
+  dragAction,
+  pinchAction,
+  scrollAction,
+  wheelAction,
+  moveAction,
+  hoverAction,
+} from '../core/actions';
+import { Recognizer } from './Recognizer';
+import { createGesture } from './createGesture';
+
+interface GestureConstructor {
+  new <HandlerTypes extends AnyHandlerEventTypes = EventTypes>(
+    target: EventTarget,
+    handlers: GestureHandlers<HandlerTypes>,
+    config?: UserGestureConfig,
+  ): Gesture;
+}
+
+export interface Gesture extends Recognizer {}
+
+export const Gesture: GestureConstructor = function <
+  HandlerTypes extends AnyHandlerEventTypes = EventTypes,
+>(target: EventTarget, handlers: GestureHandlers<HandlerTypes>, config?: UserGestureConfig) {
+  const gestureFunction = createGesture([
+    dragAction,
+    pinchAction,
+    scrollAction,
+    wheelAction,
+    moveAction,
+    hoverAction,
+  ]);
+  return gestureFunction(target, handlers, config || ({} as UserGestureConfig));
+} as any;

package/src/core/utils/use-gesture/vanilla/HoverGesture.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { EventTypes, UserHoverConfig, Handler } from '../core/types';
+import { registerAction, hoverAction } from '../core/actions';
+import { Recognizer } from './Recognizer';
+
+interface HoverGestureConstructor {
+  new <EventType = EventTypes['hover']>(
+    target: EventTarget,
+    handler: Handler<'hover', EventType>,
+    config?: UserHoverConfig,
+  ): HoverGesture;
+}
+
+export interface HoverGesture extends Recognizer<'hover'> {}
+
+export const HoverGesture: HoverGestureConstructor = function <EventType = EventTypes['hover']>(
+  target: EventTarget,
+  handler: Handler<'hover', EventType>,
+  config?: UserHoverConfig,
+) {
+  registerAction(hoverAction);
+  return new Recognizer(target, { hover: handler }, config || {}, 'hover');
+} as any;

package/src/core/utils/use-gesture/vanilla/MoveGesture.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { UserMoveConfig, Handler, EventTypes } from '../core/types';
+import { registerAction, moveAction } from '../core/actions';
+import { Recognizer } from './Recognizer';
+
+interface MoveGestureConstructor {
+  new <EventType = EventTypes['move']>(
+    target: EventTarget,
+    handler: Handler<'move', EventType>,
+    config?: UserMoveConfig,
+  ): MoveGesture;
+}
+
+export interface MoveGesture extends Recognizer<'move'> {}
+
+export const MoveGesture: MoveGestureConstructor = function <EventType = EventTypes['move']>(
+  target: EventTarget,
+  handler: Handler<'move', EventType>,
+  config?: UserMoveConfig,
+) {
+  registerAction(moveAction);
+  return new Recognizer(target, { move: handler }, config || {}, 'move');
+} as any;

package/src/core/utils/use-gesture/vanilla/PinchGesture.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { UserPinchConfig, Handler, EventTypes } from '../core/types';
+import { registerAction, pinchAction } from '../core/actions';
+import { Recognizer } from './Recognizer';
+
+interface PinchGestureConstructor {
+  new <EventType = EventTypes['pinch']>(
+    target: EventTarget,
+    handler: Handler<'pinch', EventType>,
+    config?: UserPinchConfig,
+  ): PinchGesture;
+}
+
+export interface PinchGesture extends Recognizer<'pinch'> {}
+
+export const PinchGesture: PinchGestureConstructor = function <EventType = EventTypes['pinch']>(
+  target: EventTarget,
+  handler: Handler<'pinch', EventType>,
+  config?: UserPinchConfig,
+) {
+  registerAction(pinchAction);
+  return new Recognizer(target, { pinch: handler }, config || {}, 'pinch');
+} as any;