InteractionObject

Type class

Interaction object represents an object that is subject for any kind of interaction with it with any input devices: mouse, touch or keyboard.

Any DOM element can be wrapped into an Internaction object which in turn enables attaching various interaction events to it, such as: hit, drag, swipe, etc.

To create an InteractionObject out of a Sprite, use:

interaction.getInteractionFromSprite(sprite: Sprite) To create an InteractionObject out of a a regular element:

interaction.getInteraction(element: HTMLElement)

Sources

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

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

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

// InteractionObject 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: am4core.InteractionObject
 * --------------------------------------------------------
 */

Inheritance

InteractionObject extends BaseObjectEvents.

InteractionObject is not extended by any other symbol.

Properties

clickable
#

Type boolean

Is element clickable? Clickable elements will generate "hit" events when clicked or tapped.

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.

contextMenuDisabled
#

Type boolean

Should element prevent context menu to be displayed, e.g. when right-clicked?

@default false

cursorOptions
#

Type ICursorOptions

Cursor options.

downPointers
#

Type List < IPointer >

A list of pointers currently pressing down on this element.

@see Pointer

draggable
#

Type boolean

Indicates if element can be dragged. (moved)

element
#

Type HTMLElement | SVGSVGElement

A DOM element associated with this element.

events
#

Type InteractionObjectEventDispatcher < AMEvent < this, IInteractionObjectEvents > >

Default new InteractionObjectEventDispatcher(this)

An EventDispatcher instance which holds events for this object

focusable
#

Type $type.Optional < boolean >

Indicates if element can gain focus.

hitOptions
#

Type IHitOptions

Hit options.

hoverOptions
#

Type IHoverOptions

Hover options.

hoverable
#

Type boolean

Indicates if element should generate hover events.

id
#

Type $type.Optional < string >

Inherited from BaseObject

Sets the user-defined id of the element.

inert
#

Type boolean

Indicates if element is inert, i.e. if it should carry movement momentum after it is dragged and released.

inertiaOptions
#

Type Dictionary < InertiaTypes, IInertiaOptions >

Inertia options.

isDown
#

Type boolean

Indicates if this element has currently any pointers pressing on it.

isFocused
#

Type boolean

Indicates if this element is currently focused.

isHover
#

Type boolean

Indicates if this element is currently hovered.

isHoverByTouch
#

Type boolean

Indicates if this element is currently hovered.

keyboardOptions
#

Type IKeyboardOptions

Keyboard options.

overPointers
#

Type List < IPointer >

A list of pointers currently over the element.

@see Pointer

resizable
#

Type boolean

Indicates if element can be resized.

sprite
#

Type Sprite

A related Sprite if any.

swipeOptions
#

Type ISwipeOptions

Swipe options.

swipeable
#

Type boolean

Indicates whether element should react to swipe gesture.

tabindex
#

Type number

Element's tab index.

trackable
#

Type boolean

Indicates if pointer movement over element should be tracked.

uid
#

Type string

Inherited from BaseObject

Returns object's internal unique ID.

wheelable
#

Type boolean

Indicates whether track moouse wheel rotation over element.

There are 4 inherited items currently hidden from this list.

Methods

constructor(

element: HTMLElement | SVGSVGElement

)

#

Returns InteractionObject

Constructor

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.

copyFrom(

source: this

)

#

Returns void

Copies all properties and related assets from another object of the same type.

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 object.

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.

isDisposed()

#

Returns boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

There are 5 inherited items currently hidden from this list.

Events

#blur

Param { type: "blur",
  target: this }

Invoked when focusable object loses focus, e.g. by clicking outside it or pressing TAB button to focus on the next focusable object.

#doublehit

Param PointerTypeEvent & PointEvent & MouseTouchEvent & { type: "doublehit",
  target: this }

Invoked when object is clicked or touched twice in rapid succession.

Check IHitOptions for settings about double hit.

#down

Param PointerTypeEvent & PointerEvent & MouseTouchEvent & { type: "down",
  target: this }

Invoked when the mouse button is pressed or touch starts.

#drag

Param PointerTypeEvent & ShiftEvent & PointEvent & { type: "drag",
  target: this }

Invoked when draggable object is being dragged. (using mouse, touch or keyboard)

#dragstart

Param PointerTypeEvent & { type: "dragstart",
  target: this }

Invoked when draggable object dragging starts. This event is not invoked immediatelly after down, but only if there's a movement of the pointer.

#dragstop

Param PointerTypeEvent & { type: "dragstop",
  target: this }

Invoked when draggable object is released. This event will not fire if position of the object did not change.

#focus

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

Invoked when focusable object gains focus, e.g. by using TAB button.

#hit

Param PointerTypeEvent & PointEvent & MouseTouchEvent & { type: "hit",
  target: this }

Invoked when object is clicked or touched.

#hold

Param PointerTypeEvent & PointerEvent & MouseTouchEvent & { type: "hold",
  target: this }

Invoked when mouse or touch pointer is held down over object for some time.

#input

Param { type: "input",
  target: this }

Invoked whenever information changes in the textual input elements, like <input>, <textarea>, etc.

#keydown

Param { type: "keydown",
  target: this }

Invoked when the key is pressed on the keyboard.

#keypress

Param { type: "keypress",
  target: this }

Invoked when the key generates a "press", e.g. pressing and holding a letter key will generate repeated "keypress" events.

#keyup

Param { type: "keyup",
  target: this }

Invoked when the key is released on the keyboard.

#out

Param PointerTypeEvent & MouseTouchEvent & PointerEvent & { type: "out",
  target: this }

Invoked when mouse cursor moves out of hoverable object or it is no longer touched.

#over

Param PointerTypeEvent & MouseTouchEvent & PointerEvent & { type: "over",
  target: this }

Invoked when mouse cursor moves over hoverable object or it is touched.

#resize

Param PointerTypeEvent & ScaleEvent & MouseTouchEvent & { type: "resize",
  target: this }

Invoked when resizable object is being resized either by mouse or touch pinch gesture.

#rightclick

Param { type: "rightclick",
  target: this }

Invoked when right mouse button is clicked on the object.

#swipe

Param PointerTypeEvent & MouseTouchEvent & { type: "swipe",
  target: this }

Invoked when user performs "swiping" gesture (quick horizontal movement) on the object, either using mouse or touch.

#swipeleft

Param PointerTypeEvent & MouseTouchEvent & { type: "swipeleft",
  target: this }

Invoked when user performs "swiping" gesture towards left.

#swiperight

Param PointerTypeEvent & MouseTouchEvent & { type: "swiperight",
  target: this }

Invoked when user performs "swiping" gesture towards right.

#track

Param PointerTypeEvent & PointEvent & PointerEvent & MouseTouchEvent & { type: "track",
  target: this }

Invoked when pointer (mouse cursor or touch point) moves over trackable object.

#up

Param PointerTypeEvent & PointerEvent & MouseTouchEvent & { type: "up",
  target: this }

Invoked when the mouse button is released or touch ends.

#wheel

Param PointEvent & ShiftEvent & { type: "wheel",
  target: this }

Invoked when user turns mouse wheel while over the object.

#wheeldown

Param PointEvent & ShiftEvent & { type: "wheeldown",
  target: this }

Invoked when user turns mouse wheel downwards while over the object.

#wheelleft

Param PointEvent & ShiftEvent & { type: "wheelleft",
  target: this }

Invoked when user turns mouse wheel leftwards while over the object.

#wheelright

Param PointEvent & ShiftEvent & { type: "wheelright",
  target: this }

Invoked when user turns mouse wheel rightwards while over the object.

#wheelup

Param PointEvent & ShiftEvent & { type: "wheelup",
  target: this }

Invoked when user turns mouse wheel upwards while over the object.

Adapters

InteractionObject does not have any adapters.