Class Swipe

Manages swipe interactions:

Tracks movement and detects direction
Emits events on start, move, and end
Supports exponential inertia
Optional bounds with rubber-band overflow and bounce-back

Notes:

Does not transform elements, only computes coordinates.

Documentation

Hierarchy (View Summary)

Module<TC, TS, TM>
- Swipe

Constructors

constructor

new Swipe(
    props?: ISwipeStaticProps & ISwipeMutableProps & Partial<
        {
            onAbort: (data: undefined, ctx: Swipe) => void;
            onDestroy: (data: undefined, ctx: Swipe) => void;
            onEnd: (data: ISwipeCoords, ctx: Swipe) => void;
            onInertia: (data: undefined, ctx: Swipe) => void;
            onInertiaCancel: (data: undefined, ctx: Swipe) => void;
            onInertiaEnd: (data: undefined, ctx: Swipe) => void;
            onInertiaFail: (data: undefined, ctx: Swipe) => void;
            onInertiaStart: (data: undefined, ctx: Swipe) => void;
            onMousemove: (data: MouseEvent, ctx: Swipe) => void;
            onMove: (data: ISwipeCoords, ctx: Swipe) => void;
            onPointerdown: (
                data: { event: PointerEvent; pointer: IPointersItem },
                ctx: Swipe,
            ) => void;
            onPointermove: (
                data: { event: PointerEvent; pointer: IPointersItem },
                ctx: Swipe,
            ) => void;
            onPointerup: (data: { pointer: IPointersItem }, ctx: Swipe) => void;
            onPreventEdgeSwipe: (data: undefined, ctx: Swipe) => void;
            onProps: (data: Partial, ctx: Swipe) => void;
            onStart: (data: ISwipeCoords, ctx: Swipe) => void;
            onToBottom: (data: undefined, ctx: Swipe) => void;
            onToLeft: (data: undefined, ctx: Swipe) => void;
            onToRight: (data: undefined, ctx: Swipe) => void;
            onToTop: (data: undefined, ctx: Swipe) => void;
            onTouchmove: (data: TouchEvent, ctx: Swipe) => void;
            onTouchstart: (data: TouchEvent, ctx: Swipe) => void;
        },
    >,
    onCallbacks?: Partial<
        {
            onAbort: (data: undefined, ctx: Swipe) => void;
            onDestroy: (data: undefined, ctx: Swipe) => void;
            onEnd: (data: ISwipeCoords, ctx: Swipe) => void;
            onInertia: (data: undefined, ctx: Swipe) => void;
            onInertiaCancel: (data: undefined, ctx: Swipe) => void;
            onInertiaEnd: (data: undefined, ctx: Swipe) => void;
            onInertiaFail: (data: undefined, ctx: Swipe) => void;
            onInertiaStart: (data: undefined, ctx: Swipe) => void;
            onMousemove: (data: MouseEvent, ctx: Swipe) => void;
            onMove: (data: ISwipeCoords, ctx: Swipe) => void;
            onPointerdown: (
                data: { event: PointerEvent; pointer: IPointersItem },
                ctx: Swipe,
            ) => void;
            onPointermove: (
                data: { event: PointerEvent; pointer: IPointersItem },
                ctx: Swipe,
            ) => void;
            onPointerup: (data: { pointer: IPointersItem }, ctx: Swipe) => void;
            onPreventEdgeSwipe: (data: undefined, ctx: Swipe) => void;
            onProps: (data: Partial, ctx: Swipe) => void;
            onStart: (data: ISwipeCoords, ctx: Swipe) => void;
            onToBottom: (data: undefined, ctx: Swipe) => void;
            onToLeft: (data: undefined, ctx: Swipe) => void;
            onToRight: (data: undefined, ctx: Swipe) => void;
            onToTop: (data: undefined, ctx: Swipe) => void;
            onTouchmove: (data: TouchEvent, ctx: Swipe) => void;
            onTouchstart: (data: TouchEvent, ctx: Swipe) => void;
        },
    >,
): Swipe
Parameters
- Optionalprops: ISwipeStaticProps & ISwipeMutableProps & Partial<
      {
          onAbort: (data: undefined, ctx: Swipe) => void;
          onDestroy: (data: undefined, ctx: Swipe) => void;
          onEnd: (data: ISwipeCoords, ctx: Swipe) => void;
          onInertia: (data: undefined, ctx: Swipe) => void;
          onInertiaCancel: (data: undefined, ctx: Swipe) => void;
          onInertiaEnd: (data: undefined, ctx: Swipe) => void;
          onInertiaFail: (data: undefined, ctx: Swipe) => void;
          onInertiaStart: (data: undefined, ctx: Swipe) => void;
          onMousemove: (data: MouseEvent, ctx: Swipe) => void;
          onMove: (data: ISwipeCoords, ctx: Swipe) => void;
          onPointerdown: (
              data: { event: PointerEvent; pointer: IPointersItem },
              ctx: Swipe,
          ) => void;
          onPointermove: (
              data: { event: PointerEvent; pointer: IPointersItem },
              ctx: Swipe,
          ) => void;
          onPointerup: (data: { pointer: IPointersItem }, ctx: Swipe) => void;
          onPreventEdgeSwipe: (data: undefined, ctx: Swipe) => void;
          onProps: (data: Partial, ctx: Swipe) => void;
          onStart: (data: ISwipeCoords, ctx: Swipe) => void;
          onToBottom: (data: undefined, ctx: Swipe) => void;
          onToLeft: (data: undefined, ctx: Swipe) => void;
          onToRight: (data: undefined, ctx: Swipe) => void;
          onToTop: (data: undefined, ctx: Swipe) => void;
          onTouchmove: (data: TouchEvent, ctx: Swipe) => void;
          onTouchstart: (data: TouchEvent, ctx: Swipe) => void;
      },
  >
- OptionalonCallbacks: Partial<
      {
          onAbort: (data: undefined, ctx: Swipe) => void;
          onDestroy: (data: undefined, ctx: Swipe) => void;
          onEnd: (data: ISwipeCoords, ctx: Swipe) => void;
          onInertia: (data: undefined, ctx: Swipe) => void;
          onInertiaCancel: (data: undefined, ctx: Swipe) => void;
          onInertiaEnd: (data: undefined, ctx: Swipe) => void;
          onInertiaFail: (data: undefined, ctx: Swipe) => void;
          onInertiaStart: (data: undefined, ctx: Swipe) => void;
          onMousemove: (data: MouseEvent, ctx: Swipe) => void;
          onMove: (data: ISwipeCoords, ctx: Swipe) => void;
          onPointerdown: (
              data: { event: PointerEvent; pointer: IPointersItem },
              ctx: Swipe,
          ) => void;
          onPointermove: (
              data: { event: PointerEvent; pointer: IPointersItem },
              ctx: Swipe,
          ) => void;
          onPointerup: (data: { pointer: IPointersItem }, ctx: Swipe) => void;
          onPreventEdgeSwipe: (data: undefined, ctx: Swipe) => void;
          onProps: (data: Partial, ctx: Swipe) => void;
          onStart: (data: ISwipeCoords, ctx: Swipe) => void;
          onToBottom: (data: undefined, ctx: Swipe) => void;
          onToLeft: (data: undefined, ctx: Swipe) => void;
          onToRight: (data: undefined, ctx: Swipe) => void;
          onToTop: (data: undefined, ctx: Swipe) => void;
          onTouchmove: (data: TouchEvent, ctx: Swipe) => void;
          onTouchstart: (data: TouchEvent, ctx: Swipe) => void;
      },
  >
Returns Swipe
Overrides Module.constructor
- Defined in src/components/Swipe/index.ts:83

Accessors

accum

get accum(): ISwipeVec3
Absolute path length since swipe start.

Returns ISwipeVec3
- Defined in src/components/Swipe/index.ts:569

callbacks

get callbacks(): Callbacks<CallbacksMap, this>
Retrieves the module's callbacks instance.

Returns Callbacks<CallbacksMap, this>
Inherited from Module.callbacks
- Defined in src/base/Module/index.ts:76

container

get container(): HTMLElement | SVGElement
Coordinate reference element.

Returns HTMLElement | SVGElement
- Defined in src/components/Swipe/index.ts:133

coords

get coords(): ISwipeCoords
Full coordinate snapshot (pointer space + movement).

Returns ISwipeCoords
- Defined in src/components/Swipe/index.ts:128

current

get current(): ISwipeState
Current pointer position.

Returns ISwipeState
- Defined in src/components/Swipe/index.ts:554

diff

get diff(): ISwipeState
Offset from swipe start to current pointer position.

Returns ISwipeState
- Defined in src/components/Swipe/index.ts:559

hasBounce

get hasBounce(): boolean
Whether overflow bounce-back timeline is running.

Returns boolean
- Defined in src/components/Swipe/index.ts:143

hasInertia

get hasInertia(): boolean
Whether release inertia is running.

Returns boolean
- Defined in src/components/Swipe/index.ts:138

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from Module.isDestroyed
- Defined in src/base/Module/index.ts:66

isSwiping

get isSwiping(): boolean
Whether a swipe gesture is in progress.

Returns boolean
- Defined in src/components/Swipe/index.ts:148

movement

get movement(): ISwipeVec3
Total displacement in movement space (use for element transforms).

Returns ISwipeVec3
- Defined in src/components/Swipe/index.ts:574

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from Module.name
- Defined in src/base/Module/index.ts:56

prefix

get prefix(): string
Optional prefix for classnames used by the module

Returns string
Inherited from Module.prefix
- Defined in src/base/Module/index.ts:51

get prev(): ISwipeState
Previous pointer position.

Returns ISwipeState
- Defined in src/components/Swipe/index.ts:549

props

get props(): TRequiredProps<MutableProps & StaticProps>
Current properties. Do not mutate these directly, use updateProps instead.

Returns TRequiredProps<MutableProps & StaticProps>
Inherited from Module.props
- Defined in src/base/Module/index.ts:46

scale

get scale(): number
Current scale modifier.

Returns number
- Defined in src/components/Swipe/index.ts:579

start

get start(): ISwipeState
Pointer position at swipe start.

Returns ISwipeState
- Defined in src/components/Swipe/index.ts:544

step

get step(): ISwipeState
Offset from previous to current pointer position.

Returns ISwipeState
- Defined in src/components/Swipe/index.ts:564

Methods

`Protected`_addTempClassName

_addTempClassName(element: Element, className: string): void
Adds a class name on an element, and keeps track of it for removal when the module is destroyed.
Parameters
- element: Element
  The target DOM element.
- className: string
  The class name to toggle.
Returns void
Inherited from Module._addTempClassName
- Defined in src/base/Module/index.ts:209

`Protected`_cn

_cn(...classNames: string[]): string
Helper function to generate classnames with the module's prefix.
Parameters
- ...classNames: string[]
  The class names to generate.
Returns string
A string of class names with the module's prefix applied.
Inherited from Module._cn
- Defined in src/base/Module/index.ts:199

`Protected`_destroy

_destroy(): void
Destroys the component

Returns void
Overrides Module._destroy
- Defined in src/components/Swipe/index.ts:609

_getMutable

_getMutable(): {
    __mutableProp: true;
    axis: "x"
    | "y";
    bounceDuration: number;
    bounds: (coords: ISwipeCoords) => null | ISwipeAxes;
    canBounce: () => boolean;
    directionThreshold: number;
    edgeSwipeThreshold: number;
    enabled: boolean;
    grabCursor: boolean;
    inertia: boolean;
    inertiaBounceEase: number;
    inertiaDecay: number;
    inertiaDistanceModifier: (distance: ISwipeVec3) => null | ISwipeVec3;
    inertiaDistanceThreshold: number;
    inertiaDuration: (distance: number) => number;
    inertiaEasing: false | number[] | TEasingFunction;
    inertiaRatio: number;
    inertiaThreshold: number;
    maxVelocity: { angle: number; x: number; y: number };
    minTime: number;
    overflow: () => number;
    preventEdgeSwipe: boolean;
    preventTouchMove: boolean;
    ratio: number;
    recalculateBoundsOnInertia: boolean;
    relative: boolean;
    requireCtrlKey: boolean;
    snap: () => null | ISwipeAxes;
    snapRadius: number;
    threshold: number;
    velocityModifier: false | (velocity: ISwipeState) => ISwipeState;
    willAbort: (props: ISwipeCanMoveArg) => boolean;
}
Returns default mutable properties.

Returns {
    __mutableProp: true;
    axis: "x" | "y";
    bounceDuration: number;
    bounds: (coords: ISwipeCoords) => null | ISwipeAxes;
    canBounce: () => boolean;
    directionThreshold: number;
    edgeSwipeThreshold: number;
    enabled: boolean;
    grabCursor: boolean;
    inertia: boolean;
    inertiaBounceEase: number;
    inertiaDecay: number;
    inertiaDistanceModifier: (distance: ISwipeVec3) => null | ISwipeVec3;
    inertiaDistanceThreshold: number;
    inertiaDuration: (distance: number) => number;
    inertiaEasing: false | number[] | TEasingFunction;
    inertiaRatio: number;
    inertiaThreshold: number;
    maxVelocity: { angle: number; x: number; y: number };
    minTime: number;
    overflow: () => number;
    preventEdgeSwipe: boolean;
    preventTouchMove: boolean;
    ratio: number;
    recalculateBoundsOnInertia: boolean;
    relative: boolean;
    requireCtrlKey: boolean;
    snap: () => null | ISwipeAxes;
    snapRadius: number;
    threshold: number;
    velocityModifier: false | (velocity: ISwipeState) => ISwipeState;
    willAbort: (props: ISwipeCanMoveArg) => boolean;
}
- __mutableProp: true
- axis: "x" | "y"
  Primary swiping axis.
  Default
  null
- bounceDuration: number
  Duration of the bounce-back timeline when movement exceeds bounds and inertia does not run.
  Default
  250
- bounds: (coords: ISwipeCoords) => null | ISwipeAxes
  Movement limits per axis. Unset axis is unbounded.
  Default
  null
- canBounce: () => boolean
  Determines whether the swipe is allowed to bounce back.
  Default
  () => true
- directionThreshold: number
  Minimum swipe distance (px) for directional callbacks.
  Default
  50
- edgeSwipeThreshold: number
  Edge swipe threshold (px) from the left/right edge.
  Default
  20
- enabled: boolean
  Enables or disables swipe events.
  Default
  true
- grabCursor: boolean
  Shows "grab" and "grabbing" cursors during interaction.
  Default
  false
- inertia: boolean
  Enables release inertia (RAF-based decay).
  Default
  false
- inertiaBounceEase: number
  Easing factor for pulling inertia back inside bounds (per frame, FPS-independent).
  Default
  0.3
- inertiaDecay: number
  Inertia velocity decay per frame (higher = stops sooner).
  Default
  0.05
- inertiaDistanceModifier: (distance: ISwipeVec3) => null | ISwipeVec3
  Inertia distance modifier. Called when inertia distance is predicted but not yet started.
  Default
  null
- inertiaDistanceThreshold: number
  Deprecated
  Timelined inertia is not supported anymore.
- inertiaDuration: (distance: number) => number
  Deprecated
  Timelined inertia is not supported anymore.
- inertiaEasing: false | number[] | TEasingFunction
  Deprecated
  Timelined inertia is not supported anymore.
- inertiaRatio: number
  Multiplier applied to release velocity.
  Default
  1
- inertiaThreshold: number
  Minimum release speed to start inertia (px/s for x/y, deg/s for angle).
  Default
  1
- maxVelocity: { angle: number; x: number; y: number }
  Max release velocity per axis (coord/ms for x/y, deg/ms for angle). Falsy axis value disables inertia on that axis.
  Default
  { x: 7, y: 7, angle: 3 }
- minTime: number
  Minimum duration (ms) to trigger swipe move.
  Default
  0
- overflow: () => number
  Rubber-band distance past bounds (px for x/y, degrees for angle).
  Default
  () => 50
- preventEdgeSwipe: boolean
  Prevents edge swiping (iOS swipe-back gesture).
  Default
  true
- preventTouchMove: boolean
  Prevents touchmove event.
  Default
  true
- ratio: number
  Swipe movement scale.
  Default
  1
- recalculateBoundsOnInertia: boolean
  Enable bounds recalculation when inertia is active
  Default
  true
- relative: boolean
  Calculates coordinates relative to the container.
  Default
  false
- requireCtrlKey: boolean
  Requires Ctrl key for swipe (mouse only).
  Default
  false
- snap: () => null | ISwipeAxes
  Snap targets per axis in movement space.
  Default
  null
- snapRadius: number
  Max distance to a snap target (same units as the axis). Falsy = no radius limit.
  Default
  null
- threshold: number
  Minimum swipe distance (px) to trigger swipe start.
  Default
  5
- velocityModifier: false | (velocity: ISwipeState) => ISwipeState
  Deprecated
  Timelined inertia is not supported anymore.
- willAbort: (props: ISwipeCanMoveArg) => boolean
  Returns true to abort before the swipe starts (after threshold / axis checks).
  
  Default
  () => false
Overrides Module._getMutable
- Defined in src/components/Swipe/index.ts:52

_getStatic

_getStatic(): {
    __staticProp: true;
    buttons: number[]
    | (type: TPointersType) => number[];
    container: HTMLElement | SVGElement;
    disableUserSelect: boolean;
    pointers: number | (type: TPointersType) => number;
    thumb: HTMLElement | SVGElement;
}
Returns default static properties.

Returns {
    __staticProp: true;
    buttons: number[] | (type: TPointersType) => number[];
    container: HTMLElement | SVGElement;
    disableUserSelect: boolean;
    pointers: number | (type: TPointersType) => number;
    thumb: HTMLElement | SVGElement;
}
- __staticProp: true
- buttons: number[] | (type: TPointersType) => number[]
  Determines which mouse buttons trigger events.
  - 0: Main button pressed, usually the left button or the un-initialized state
  - 1: Auxiliary button pressed, usually the wheel button or the middle button (if present)
  - 2: Secondary button pressed, usually the right button
  - 3: Fourth button, typically the Browser Back button
  - 4: Fifth button, typically the Browser Forward button
  See MouseEvent.button.
  Default
  [0]
- container: HTMLElement | SVGElement
  Event listener container.
- disableUserSelect: boolean
  Disable user selection on drag.
  Default
  true
- pointers: number | (type: TPointersType) => number
  Required pointer count to activate swiping.
  Default
  1
- thumb: HTMLElement | SVGElement
  An element that triggers the swipe start. Calculations remain relative to the container regardless of this element.
Overrides Module._getStatic
- Defined in src/components/Swipe/index.ts:45

`Protected`_handleProps

_handleProps(props: Partial<ISwipeMutableProps>): void
Handles property updates
Parameters
- props: Partial<ISwipeMutableProps>
Returns void
Overrides Module._handleProps
- Defined in src/components/Swipe/index.ts:153

calculateBounds

calculateBounds(): undefined | ISwipeAxes
Calculate swipe bounds

Returns undefined | ISwipeAxes
- Defined in src/components/Swipe/index.ts:539

cancelBounce

cancelBounce(): void
Cancel bounce

Returns void
- Defined in src/components/Swipe/index.ts:533

cancelInertia

cancelInertia(): void
Cancel inertia

Returns void
- Defined in src/components/Swipe/index.ts:528

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Module.destroy
- Defined in src/base/Module/index.ts:223

on

on<T extends keyof ISwipeCallbacksMap>(
    target: T,
    listener: TCallbacksAction<ISwipeCallbacksMap[T], Swipe>,
    settings?: ICallbacksSettings,
): () => void
Adds a custom callback to the module.
Type Parameters
- T extends keyof ISwipeCallbacksMap
Parameters
- target: T
  The event type to listen for (e.g., 'props', 'destroy').
- listener: TCallbacksAction<ISwipeCallbacksMap[T], Swipe>
  The function to execute when the event is triggered.
- settings: ICallbacksSettings = {}
  Additional settings for the callback.
Returns () => void
Inherited from Module.on
- Defined in src/base/Module/index.ts:185

onDestroy

onDestroy(action: () => void): void
Adds a callback on the module's destruction.
Parameters
- action: () => void
  The function to execute during destruction.
Returns void
Inherited from Module.onDestroy
- Defined in src/base/Module/index.ts:167

releaseBounce

releaseBounce(targetDuration?: number): void
Apply bounce overflow animation
Parameters
- OptionaltargetDuration: number
Returns void
- Defined in src/components/Swipe/index.ts:488

setMovement

setMovement(value: Partial<ISwipeVec3>): void
Sets programmatic displacement in movement space. Reapplies rubber, snap, emits move, and cancels overflow bounce.
Parameters
- value: Partial<ISwipeVec3>
Returns void
- Defined in src/components/Swipe/index.ts:600

setScale

setScale(value: number, origin: MouseEvent | ISwipeVec2 | TouchEvent): void
Sets programmatic scale in movement space. Optionally zooms toward an origin point and emits move.
Parameters
- value: number
- origin: MouseEvent | ISwipeVec2 | TouchEvent
Returns void
- Defined in src/components/Swipe/index.ts:587

updateProps

updateProps(props: Partial<ISwipeMutableProps>): void
Change module's mutable properties
Parameters
- props: Partial<ISwipeMutableProps>
Returns void
Inherited from Module.updateProps
- Defined in src/base/Module/index.ts:137

Class Swipe

Hierarchy (View Summary)

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns Swipe

Accessors

accum

Returns ISwipeVec3

callbacks

Returns Callbacks<CallbacksMap, this>

container

Returns HTMLElement | SVGElement

coords

Returns ISwipeCoords

current

Returns ISwipeState

diff

Returns ISwipeState

hasBounce

Returns boolean

hasInertia

Returns boolean

isDestroyed

Returns boolean

isSwiping

Returns boolean

movement

Returns ISwipeVec3

name

Returns string

prefix

Returns string

prev

Returns ISwipeState

props

Returns TRequiredProps<MutableProps & StaticProps>

scale

Returns number

start

Returns ISwipeState

step

Returns ISwipeState

Methods

Protected_addTempClassName

Parameters

Returns void

Protected_cn

Parameters

Returns string

Protected_destroy

Returns void

_getMutable

__mutableProp: true

axis: "x" | "y"

Default

bounceDuration: number

Default

bounds: (coords: ISwipeCoords) => null | ISwipeAxes

Default

canBounce: () => boolean

Default

directionThreshold: number

Default

edgeSwipeThreshold: number

Default

enabled: boolean

Default

grabCursor: boolean

Default

inertia: boolean

Default

inertiaBounceEase: number

Default

inertiaDecay: number

Default

`Protected`_addTempClassName

`Protected`_cn

`Protected`_destroy

Returns {
__staticProp: true;
buttons: number[] | (type: TPointersType) => number[];
container: HTMLElement | SVGElement;
disableUserSelect: boolean;
pointers: number | (type: TPointersType) => number;
thumb: HTMLElement | SVGElement;
}

`Protected`_handleProps