@interactjs / core/Interaction / Interaction

Class: Interaction<T>

core/Interaction.Interaction

Type parameters

Table of contents

Properties

• _reflowPromise
• _reflowResolve
• autoScroll
• autoStartHoldTimer
• coords
• doMove
• dropState
• element
• gesture
• holdIntervalHandle
• inertia
• interactable
• modification
• offset
• offsetBy
• pointerIsDown
• pointerType
• pointerWasMoved
• prepared
• prevTap
• rect
• resizeAxes
• resizeStartAspectRatio
• tapTime

Methods

• currentAction
• destroy
• end
• interacting
• move
• pointerDown
• pointerMove
• start
• stop
• styleCursor

Properties

_reflowPromise

• _reflowPromise: Promise<void>

Defined in

reflow/plugin.ts:42

_reflowResolve

• _reflowResolve: (…args: unknown[]) => void

Type declaration

▸ (...args): void

Parameters

Returns

void

Defined in

reflow/plugin.ts:43

autoScroll

• Optional autoScroll: Object

Type declaration

Defined in

auto-scroll/plugin.ts:19

autoStartHoldTimer

• Optional autoStartHoldTimer: any

Defined in

auto-start/hold.ts:18

coords

• coords: CoordsSet

Defined in

core/Interaction.ts:175

doMove

• doMove: (this: void) => any

Type declaration

▸ (this): any

Parameters

Returns

any

Defined in

core/Interaction.ts:171

dropState

• Optional dropState: DropState

Defined in

actions/drop/plugin.ts:128

element

• element: Element = null

the target element of the interactable

Defined in

core/Interaction.ts:113

gesture

• Optional gesture: Object

Type declaration

Defined in

actions/gesture/plugin.ts:12

holdIntervalHandle

• Optional holdIntervalHandle: any

Defined in

pointer-events/holdRepeat.ts:12

inertia

• Optional inertia: InertiaState

Defined in

inertia/plugin.ts:27

interactable

• interactable: Interactable = null

current interactable being interacted with

Defined in

core/Interaction.ts:110

modification

• Optional modification: Modification

Defined in

modifiers/base.ts:10

offset

• offset: Object

Type declaration

Defined in

offset/plugin.ts:10

offsetBy

• Optional offsetBy: (this: Interaction<keyof ActionMap>, __namedParameters: Point) => void

Type declaration

▸ (this, «destructured»): void

Parameters

Returns

void

Defined in

offset/plugin.ts:9

pointerIsDown

• pointerIsDown: boolean = false

Defined in

core/Interaction.ts:158

pointerType

• pointerType: string

Defined in

core/Interaction.ts:135

pointerWasMoved

• pointerWasMoved: boolean = false

Defined in

core/Interaction.ts:159

prepared

• prepared: ActionProps<T>

Defined in

core/Interaction.ts:129

prevTap

• Optional prevTap: PointerEvent<string>

Defined in

pointer-events/base.ts:34

rect

• rect: Required<Rect> = null

Defined in

core/Interaction.ts:114

resizeAxes

• resizeAxes: "x" | "y" | "xy"

Defined in

actions/resize/plugin.ts:77

resizeStartAspectRatio

• resizeStartAspectRatio: number

Defined in

actions/resize/plugin.ts:80

tapTime

• Optional tapTime: number

Defined in

pointer-events/base.ts:35

Methods

currentAction

▸ currentAction(): T

Returns

T

Defined in

core/Interaction.ts:459

destroy

▸ destroy(): void

Returns

void

Defined in

core/Interaction.ts:575

end

▸ end(event?): void

interact(target)
  .draggable(true)
  .on('move', function (event) {
    if (event.pageX > 1000) {
      // end the current action
      event.interaction.end()
      // stop all further listeners from being called
      event.stopImmediatePropagation()
    }
  })

Parameters

Returns

void

Defined in

core/Interaction.ts:439

interacting

▸ interacting(): boolean

Returns

boolean

Defined in

core/Interaction.ts:463

move

▸ move(signalArg?): void

interact(target)
  .draggable(true)
  .on('dragmove', function (event) {
    if (someCondition) {
      // change the snap settings
      event.interactable.draggable({ snap: { targets: [] }})
      // fire another move event with re-calculated snap
      event.interaction.move()
    }
  })

Force a move of the current action at the same coordinates. Useful if snap/restrict has been changed and you want a movement with the new settings.

Parameters

Returns

void

Defined in

core/Interaction.ts:364

pointerDown

▸ pointerDown(pointer, event, eventTarget): void

Parameters

Returns

void

Defined in

core/Interaction.ts:215

pointerMove

▸ pointerMove(pointer, event, eventTarget): void

Parameters

Returns

void

Defined in

core/Interaction.ts:290

start

▸ start<A>(action, interactable, element): boolean

interact(target)
  .draggable({
    // disable the default drag start by down->move
    manualStart: true
  })
  // start dragging after the user holds the pointer down
  .on('hold', function (event) {
    var interaction = event.interaction

    if (!interaction.interacting()) {
      interaction.start({ name: 'drag' },
                        event.interactable,
                        event.currentTarget)
    }
})

Start an action with the given Interactable and Element as tartgets. The action must be enabled for the target Interactable and an appropriate number of pointers must be held down - 1 for drag/resize, 2 for gesture.

Use it with interactable.<action>able({ manualStart: false }) to always start actions manually

Type parameters

Parameters

Returns

boolean

Whether the interaction was successfully started

Defined in

core/Interaction.ts:261

stop

▸ stop(): void

Returns

void

Defined in

core/Interaction.ts:467

styleCursor

▸ styleCursor(newValue): Interaction<T>

Parameters

Returns

Interaction<T>

Defined in

actions/resize/plugin.ts:78

▸ styleCursor(): boolean

Returns

boolean

Defined in

actions/resize/plugin.ts:79