, ,, , ,, , , , image/svg+xml , image/svg+xml , interact.js , image/svg+xml , ,, , ,

@interactjs / core/Interaction / Interaction

Class: Interaction<T>

core/Interaction.Interaction

Type parameters

NameType
Textends ActionName | null = ActionName

Table of contents

Properties

Methods

Properties

_reflowPromise

_reflowPromise: Promise<void>

Defined in

reflow/plugin.ts:42


_reflowResolve

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

Type declaration

▸ (...args): void

Parameters
NameType
...argsunknown[]
Returns

void

Defined in

reflow/plugin.ts:43


autoScroll

Optional autoScroll: Object

Type declaration

NameType
defaultsAutoScrollOptions
inumber
interactionInteraction<keyof ActionMap>
isScrollingboolean
marginnumber
now() => number
prevTimenumber
speednumber
xnumber
ynumber
check(interactable: Interactable, actionName: keyof ActionMap) => boolean
onInteractionMove<T>(__namedParameters: { interaction: Interaction<T> ; pointer: PointerType }) => void
scroll() => void
start(interaction: Interaction<keyof ActionMap>) => void
stop() => void

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
NameType
thisvoid
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

NameType
anglenumber
distancenumber
scalenumber
startAnglenumber
startDistancenumber

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

NameType
pendingPoint
totalPoint

Defined in

offset/plugin.ts:10


offsetBy

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

Type declaration

▸ (this, «destructured»): void

Parameters
NameType
thisInteraction<keyof ActionMap>
«destructured»Point
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

NameType
event?PointerEventType

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

NameType
signalArg?any

Returns

void

Defined in

core/Interaction.ts:364


pointerDown

pointerDown(pointer, event, eventTarget): void

Parameters

NameType
pointerPointerType
eventPointerEventType
eventTargetNode

Returns

void

Defined in

core/Interaction.ts:215


pointerMove

pointerMove(pointer, event, eventTarget): void

Parameters

NameType
pointerPointerType
eventPointerEventType
eventTargetNode

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

NameType
Aextends keyof ActionMap

Parameters

NameTypeDescription
actionActionProps<A>The action to be performed - drag, resize, etc.
interactableInteractable-
elementElementThe DOM Element to target

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

NameType
newValueboolean

Returns

Interaction<T>

Defined in

actions/resize/plugin.ts:78

styleCursor(): boolean

Returns

boolean

Defined in

actions/resize/plugin.ts:79