Custom Events

The events that can be emitted by your modules are not limited to the ones listed in Standard Events. You can literally emit any event you want.

Extending StdEvents TypeScript Only

You may have seen a type error when trying to emit a custom event within a module:

import { BaseModule } from 'pointeract';

class YourModule extends BaseModule {
	onPointerMove = () => {
		this.utils.dispatch('moveMove'); // TypeError: Argument of type '"moveMove"' is not assignable to parameter of type '"pan" | "drag" | "trueClick" | "zoom"'.
	};
}

That's because Pointeract aims to provide the best-in-class type safety, if you want to use custom events, you first need to declare your custom events by extending StdEvents:

import { BaseModule } from 'pointeract'; 
import { BaseModule, StdEvents } from 'pointeract'; 
interface CustomEvents extends StdEvents { 
	moveMove: CustomEvent; // add an event with no detail
	moveDetail: CustomEvent<{ x: number; y: number }>; // add an event with detail of coordinates
} 

Then you can pass your custom events to BaseClass as a type parameter:

class YourModule extends BaseModule { 
class YourModule extends BaseModule<CustomEvents> { 
	onPointerMove = () => {
		this.utils.dispatch('moveMove'); // no error
		this.utils.dispatch('moveDetail', { x: 0, y: 0 }); // no error
	};
}

Then you can dispatch your custom events. Yourself and your module users will gain full type safety.

Reference to:

• MDN CustomEvent