Interaction

Type class

Interaction manages all aspects of user interaction - mouse move, click, hover, drag events, touch gestures.

InteractionObject elements that want to use certain events, must attach event listeners to Interaction instance.

Interaction itself will not modify InteractionObject elements, it will be up to those elements to handle interaction information received via event triggers.

IInteractionEvents for a list of available events

Sources

Interaction can be used (imported) via one of the following packages.

// Interaction is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Import from: "core.ts"
 * Use like: am4core.Interaction
 * --------------------------------------------------------
 */
import * as am4core from "@amcharts/amcharts4/core";

// Interaction is available in all of the following modules.
// You only need to import one of them.

/**
 * --------------------------------------------------------
 * Include via: <script src="core.js"></script>
 * Access items like: am4.Interaction
 * --------------------------------------------------------
 */

Inheritance

Interaction extends BaseObjectEvents.

Interaction is not extended by any other symbol.

Properties

body
#

Type InteractionObject

A reference to an Interaction object for document's body.

Users can use it to add global, non-chart related events, that will be applicable to the whole document.

clonedFrom
#

Type $type.Optional < this >

Inherited from BaseObject

Reference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed.

config
#

Type object

Inherited from BaseObject

Use this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc.

Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations.

downObjects
#

Type List < InteractionObject >

Default new List<InteractionObject>()

List of objects that currently has a pressed pointer.

events
#

Type EventDispatcher < AMEvent < this, IInteractionEvents > >

Inherited from BaseObjectEvents

An EventDispatcher instance

focusedObject
#

Type $type.Optional < InteractionObject >

An object that currently has focus. Usually set automatically via InteractionObject isFocus method.

id
#

Type $type.Optional < string >

Inherited from BaseObject

Sets the user-defined id of the element.

inertiaOptions
#

Type Dictionary < "move" | "resize", IInertiaOptions >

Default new Dictionary<InertiaTypes,
IInertiaOptions>()

Inertia options that need to be applied to after element drag, if it's inert = true.

This is just a default, which can and probably will be overridden by actual elements.

overObjects
#

Type List < InteractionObject >

Default new List<InteractionObject>()

List of objects that current have a pointer hovered over them.

passiveSupported
#

Type boolean

Indicates if passive mode options is supported by this browser.

pointers
#

Type Dictionary < string, IPointer >

Default new Dictionary<string,
IPointer>()

Holds all known pointers.

trackedObjects
#

Type List < InteractionObject >

Default new List<InteractionObject>()

List of objects that need mouse position to be reported to them.

transformedObjects
#

Type List < InteractionObject >

Default new List<InteractionObject>()

List of objects that are currently being dragged.

uid
#

Type string

Inherited from BaseObject

Returns object's internal unique ID.

There are 5 inherited items currently hidden from this list.

Methods

areTransformed(

except?: InteractionObject | InteractionObject[]

)

#

Returns boolean

Checks whether there are currently any objects being transformed (dragged or resized).

If except is set, that object will be ignored.

@since 4.9.3

clone(

cloneId?: string

)

#

Returns this

Inherited from BaseObject

Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them.

constructor()

#

Returns Interaction

Constructor. Sets up universal document-wide move events to handle stuff outside particular chart container.

copyFrom(

source: this

)

#

Returns void

Inherited from BaseObjectEvents

Copies all parameters from another Sprite.

dispatch(

eventType: Key,
data?: any

)

#

Returns void

Inherited from BaseObjectEvents

Dispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element).

It also checks if there are any handlers registered for this sepecific event.

dispatchImmediately(

eventType: Key,
data?: any

)

#

Returns void

Inherited from BaseObjectEvents

Works like dispatch, except event is triggered immediately, without waiting for the next frame cycle.

dispose()

#

Returns void

Disposes this object and cleans up after itself.

dragStart(

io: InteractionObject,
pointer?: IPointer

)

#

Returns void

Manually triggers drag start on the element. Could be useful in cases where tracking or dragging one element can also influence dragging another element.

Passing in pointer reference is advisable. If not passed in it will try to determine which pointer to attach to. However, it's better to specify it explicitly.

dragStop(

io: InteractionObject,
pointer?: IPointer,
cancelled?: boolean

)

#

Returns void

Manually ends drag on the element.

getCurrentThemes()

#

Returns ITheme[]

Inherited from BaseObject

Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide.

getDragPointer(

io?: InteractionObject

)

#

Returns $type.Optional < IPointer >

This method uses a fuzzy logic to find the pointer to be used for dragging.

Beware that this is not a rock-solid solution. If there are a few objects being dragged at the same time, you may get unexepected results.

getInteraction(

element: HTMLElement | SVGSVGElement

)

#

Returns InteractionObject

Returns an InteractionObject representation of a DOM element.

You can use this on any HTML or SVG element, to add interactive features to it.

getShift(

pointer: IPointer

)

#

Returns IPoint

Returns total a shift in pointers coordinates between its original position and now.

getTrailPoint(

pointer: IPointer,
timestamp: number

)

#

Returns $type.Optional < IBreadcrumb >

Returns a point from Pointer's move history at a certain timetamp.

isDisposed()

#

Returns boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

moved(

pointer: IPointer,
tolerance: number,
minTime: number

)

#

Returns boolean

Checks if pointer has moved since it was created.

restoreAllStyles(

io: InteractionObject

)

#

Returns void

Restore temporarily reset styles on an element.

restoreStyle(

io: InteractionObject,
property: string

)

#

Returns void

Restores specific style on an element.

setTemporaryStyle(

io: InteractionObject,
property: string,
value: string

)

#

Returns void

Sets a style property on an element. Stores original value to be restored later with restoreStyle.

restoreStyle

swiped(

io: InteractionObject,
pointer: IPointer

)

#

Returns boolean

Returns true if a successfull swipe action was performed on an element.

swiping(

io: InteractionObject,
pointer: IPointer

)

#

Returns boolean

Check if swiping is currently being performed on an object.

There are 6 inherited items currently hidden from this list.

Events

#down

Param { event: MouseEvent | TouchEvent,
  pointer: IPointer,
  touch: boolean,
  type: "down",
  target: this }

#focus

Param { event: FocusEvent,
  type: "focus",
  target: this }

#track

Param { event: MouseEvent | TouchEvent,
  pointer: IPointer,
  touch: boolean,
  type: "track",
  target: this }

#up

Param { event: MouseEvent | TouchEvent,
  pointer: IPointer,
  touch: boolean,
  type: "up",
  target: this }

Adapters

Interaction does not have any adapters.