Event

You can track the situation by receiving events for specific situations.

The Event module provides a way to manage events in your application. It includes methods for subscribing to, unsubscribing from, and triggering events.

Event Types

The following EventType are supported:

• click
• mousemove
• mousedown
• mouseup
• mouseleave
• mouseover
• mouseout
• touchstart
• touchmove
• touchend
• dragstart
• draging
• dragend
• wave-dragstart
• wave-draging
• wave-dragend
• pause
• and custom event types

EventData

EventData is the parameter type of the callback function that is called with event issuance. It can include various properties depending on the type of event. Here are some common properties that may be included in EventData:

• target: Node

  • The element that triggered the event.

• originalEvent: MouseEvent | TouchEvent | Event

  • Information about the original mouse event that occurred, including details such as click, movement, etc.
  • Type inference is made based on EventType.
  • e.g.1 mousedown -> MouseEvent
  • e.g.2 touchmove -> TouchEvent

• bubble: boolean

  • Indicates whether the event bubbles. If true, the event propagates to parent elements.
  • default is true.

• position: { x: number, y: number }

  • The coordinates of the event, useful for mouse-related events.

• data: any

  • Additional data related to the event, which can be useful in custom events.

EventData Structure

export type EventData<T extends EventType = EventType> = {
  target: Node;
  point?: {
    x: number;
    y: number;
  };
  originalEvent?: T extends keyof EventDataMap ? EventDataMap[T] : any;
  bubble?: boolean;
  data?: any;
  [key: string]: unknown;
};

This structure allows event handlers to access relevant information about the event, enabling more dynamic and responsive event handling in your application.

export type EventHandler<T extends EventType = EventType> = (event: EventData<T>) => void;

Methods

on (eventType, handler)

Subscribes a handler function to the specified event type.

const handleClick: EventHandler = event => {
  console.log('Click event triggered:', event);
};

//
editor.on('custom-click', handleClick);

There is no need to specify a type for the event parameter, such as event: EventData. Use built-in type inference.

off (eventType, handler)

Unsubscribes a handler function from the specified event type.

editor.off('custom-click', handleClick);

call (eventType, eventData)

Triggers the specified event type, calling all subscribed handlers with the provided event data.

editor.call('custom-click', {
  target: null,
  originalEvent: new MouseEvent('click'),
  bubble: true,
  position: { x: 100, y: 200 },
  data: 'custom-click',
});