InkingManager class

Creates a new InkingManager instance.

new InkingManager(hostElement: HTMLElement)

Parameters

Gets the horizontal center of the inking surface.

number centerX

Property Value

Gets the vertical center of the inking surface.

number centerY

Property Value

Gets the client (screen) height of the inking surface.

number clientHeight

Property Value

Gets the client (screen) width of the inking surface.

number clientWidth

Property Value

Configures whether the Ctrl, Shift and Alt keys can be used to alter the way strokes are drawn using various tools.

static enableStrokeModifierHotKeys: boolean

Property Value

Configures the amount of time an ephemeral canvas (i.e. a canvas that renders ephemeral strokes) remains ready for new strokes before being faded out and removed.

static ephemeralCanvasRemovalDelay: number

Property Value

The size of the eraser.

eraserSize: number

Property Value

Gets the highlighter brush.

IBrush highlighterBrush

Property Value

Gets the DOM element that hosts the inking surface.

HTMLElement hostElement

Property Value

Gets the input provider object the inking surface receives pointer events from.

InputProvider inputProvider

Property Value

Gets the laser pointer brush.

IBrush laserPointerBrush

Property Value

Gets the line brush.

IBrush lineBrush

Property Value

The default client Id of the device running the application.

static localClientId: string

Property Value

Gets the viewport offset. Defaults to 0,0.

Readonly<IPoint> offset

Property Value

Gets the pen brush.

IBrush penBrush

Property Value

Gets the reference point. Defaults to "center".

CanvasReferencePoint referencePoint

Property Value

Gets the scale. Defaults to 1.

number scale

Property Value

Gets the current tool. Defaults to InkingTool.Pen.

InkingTool tool

Property Value

Gets inking surface's viewport, according to the current reference point, scale and offset.

IRect viewPort

Property Value

Value: boolean

Change the default captureRejections option on all new EventEmitter objects.

static captureRejections: boolean

Property Value

Inherited From EventEmitter.captureRejections

Value: Symbol.for('nodejs.rejection')

See how to write a custom rejection handler.

static captureRejectionSymbol: typeof captureRejectionSymbol

Property Value

Inherited From EventEmitter.captureRejectionSymbol

By default, a maximum of 10 listeners can be registered for any single event. This limit can be changed for individual EventEmitter instances using the emitter.setMaxListeners(n) method. To change the default for allEventEmitter instances, the events.defaultMaxListeners property can be used. If this value is not a positive number, a RangeError is thrown.

Take caution when setting the events.defaultMaxListeners because the change affects all EventEmitter instances, including those created before the change is made. However, calling emitter.setMaxListeners(n) still has precedence over events.defaultMaxListeners.

This is not a hard limit. The EventEmitter instance will allow more listeners to be added but will output a trace warning to stderr indicating that a "possible EventEmitter memory leak" has been detected. For any single EventEmitter, the emitter.getMaxListeners() and emitter.setMaxListeners() methods can be used to temporarily avoid this warning:

import { EventEmitter } from 'node:events';
const emitter = new EventEmitter();
emitter.setMaxListeners(emitter.getMaxListeners() + 1);
emitter.once('event', () => {
  // do stuff
  emitter.setMaxListeners(Math.max(emitter.getMaxListeners() - 1, 0));
});

The --trace-warnings command-line flag can be used to display the stack trace for such warnings.

The emitted warning can be inspected with process.on('warning') and will have the additional emitter, type, and count properties, referring to the event emitter instance, the event's name and the number of attached listeners, respectively. Its name property is set to 'MaxListenersExceededWarning'.

static defaultMaxListeners: number

Property Value

Inherited From EventEmitter.defaultMaxListeners

This symbol shall be used to install a listener for only monitoring 'error' events. Listeners installed using this symbol are called before the regular 'error' listeners are called.

Installing a listener using this symbol does not change the behavior once an 'error' event is emitted. Therefore, the process will still crash if no regular 'error' listener is installed.

static errorMonitor: typeof errorMonitor

Property Value

Inherited From EventEmitter.errorMonitor

Starts listening to pointer input.

function activate()

Adds a stroke to the drawing.

function addStroke(stroke: IStroke, options?: IAddRemoveStrokeOptions)

Parameters

Temporarily blocks the emission of StrokesAddedEvent and StrokesRemovedEvents in order to batch updates (via addStroke and removeStroke) into the change log. Once the updates are done, endUpdate must be called.

function beginUpdate()

Starts a new wet stroke which will be drawn progressively on the canvas. Multiple wet strokes can be created at the same time and will not interfere with each other.

function beginWetStroke(strokeType: StrokeType, strokeKind: StrokeMode, startPoint: IPointerPoint, options?: IStrokeCreationOptions): IWetStroke

Parameters

Returns

An IWetStroke object representing the ongoing stroke.

Clears the canvas.

function clear()

Stops listening to pointer input.

function deactivate()

Unblocks the emission of update events and flushes the change log, leading to a single StrokesAddedEvent and/or a single StrokesRemovedEvent.

function endUpdate()

Entirely removes any strokes that intersect with the eraser rectangle.

function erase(p: IPoint)

Parameters

Exports the current drawing as a collection of raw strokes.

function exportRaw(): IRawStroke[]

Returns

A collection or raw strokes.

Exports the current drawing to an SVG.

function exportSVG(): string

Returns

A serialized SVG string.

Retrieves an existing stroke from the drawing.

function getStroke(id: string): undefined | IStroke

Parameters

Returns

The stroke with the specified id.

Imports (adds) the specified strokes into the drawing.

function importRaw(rawStrokes: IRawStroke[])

Parameters

Erases portions of strokes that intersect with the eraser rectangle.

function pointErase(p: IPoint)

Parameters

Removes a stroke from the drawing.

function removeStroke(id: string, options?: IAddRemoveStrokeOptions)

Parameters

Converts screen coordinates to viewport coordinates.

function screenToViewport(p: IPoint): IPoint

Parameters

Returns

The converted point.

Sets the input filters to use with this InkingManager instance. By default, a jitter reduction filter is used.

function setInputFilters(inputFilters?: InputFilter[])

Parameters

Converts viewport coordinates to screen coordinates.

function viewportToScreen(p: IPoint): IPoint

Parameters

Returns

The converted point.

Listens once to the abort event on the provided signal.

Listening to the abort event on abort signals is unsafe and may lead to resource leaks since another third party with the signal can call e.stopImmediatePropagation(). Unfortunately Node.js cannot change this since it would violate the web standard. Additionally, the original API makes it easy to forget to remove listeners.

This API allows safely using AbortSignals in Node.js APIs by solving these two issues by listening to the event such that stopImmediatePropagation does not prevent the listener from running.

Returns a disposable so that it may be unsubscribed from more easily.

import { addAbortListener } from 'node:events';

function example(signal) {
  let disposable;
  try {
    signal.addEventListener('abort', (e) => e.stopImmediatePropagation());
    disposable = addAbortListener(signal, (e) => {
      // Do something when signal is aborted.
    });
  } finally {
    disposable?.[Symbol.dispose]();
  }
}

static function addAbortListener(signal: AbortSignal, resource: (event: Event) => void): Disposable

Parameters

Returns

Disposable that removes the abort listener.

Inherited From EventEmitter.addAbortListener

Alias for emitter.on(eventName, listener).

function addListener<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.addListener

Synchronously calls each of the listeners registered for the event named eventName, in the order they were registered, passing the supplied arguments to each.

Returns true if the event had listeners, false otherwise.

import { EventEmitter } from 'node:events';
const myEmitter = new EventEmitter();

// First listener
myEmitter.on('event', function firstListener() {
  console.log('Helloooo! first listener');
});
// Second listener
myEmitter.on('event', function secondListener(arg1, arg2) {
  console.log(`event with parameters ${arg1}, ${arg2} in second listener`);
});
// Third listener
myEmitter.on('event', function thirdListener(...args) {
  const parameters = args.join(', ');
  console.log(`event with parameters ${parameters} in third listener`);
});

console.log(myEmitter.listeners('event'));

myEmitter.emit('event', 1, 2, 3, 4, 5);

// Prints:
// [
//   [Function: firstListener],
//   [Function: secondListener],
//   [Function: thirdListener]
// ]
// Helloooo! first listener
// event with parameters 1, 2 in second listener
// event with parameters 1, 2, 3, 4, 5 in third listener

function emit<K>(eventName: string | symbol, args: AnyRest): boolean

Parameters

Returns

Inherited From EventEmitter.emit

Returns an array listing the events for which the emitter has registered listeners. The values in the array are strings or Symbols.

import { EventEmitter } from 'node:events';

const myEE = new EventEmitter();
myEE.on('foo', () => {});
myEE.on('bar', () => {});

const sym = Symbol('symbol');
myEE.on(sym, () => {});

console.log(myEE.eventNames());
// Prints: [ 'foo', 'bar', Symbol(symbol) ]

function eventNames(): (string | symbol)[]

Returns

Inherited From EventEmitter.eventNames

Returns a copy of the array of listeners for the event named eventName.

For EventEmitters this behaves exactly the same as calling .listeners on the emitter.

For EventTargets this is the only way to get the event listeners for the event target. This is useful for debugging and diagnostic purposes.

import { getEventListeners, EventEmitter } from 'node:events';

{
  const ee = new EventEmitter();
  const listener = () => console.log('Events are fun');
  ee.on('foo', listener);
  console.log(getEventListeners(ee, 'foo')); // [ [Function: listener] ]
}
{
  const et = new EventTarget();
  const listener = () => console.log('Events are fun');
  et.addEventListener('foo', listener);
  console.log(getEventListeners(et, 'foo')); // [ [Function: listener] ]
}

static function getEventListeners(emitter: EventEmitter<DefaultEventMap> | EventTarget, name: string | symbol): Function[]

Parameters

Returns

Inherited From EventEmitter.getEventListeners

Returns the current max listener value for the EventEmitter which is either set by emitter.setMaxListeners(n) or defaults to <xref:EventEmitter.defaultMaxListeners>.

function getMaxListeners(): number

Returns

Inherited From EventEmitter.getMaxListeners

Returns the currently set max amount of listeners.

For EventEmitters this behaves exactly the same as calling .getMaxListeners on the emitter.

For EventTargets this is the only way to get the max event listeners for the event target. If the number of event handlers on a single EventTarget exceeds the max set, the EventTarget will print a warning.

import { getMaxListeners, setMaxListeners, EventEmitter } from 'node:events';

{
  const ee = new EventEmitter();
  console.log(getMaxListeners(ee)); // 10
  setMaxListeners(11, ee);
  console.log(getMaxListeners(ee)); // 11
}
{
  const et = new EventTarget();
  console.log(getMaxListeners(et)); // 10
  setMaxListeners(11, et);
  console.log(getMaxListeners(et)); // 11
}

static function getMaxListeners(emitter: EventEmitter<DefaultEventMap> | EventTarget): number

Parameters

Returns

Inherited From EventEmitter.getMaxListeners

A class method that returns the number of listeners for the given eventName registered on the given emitter.

import { EventEmitter, listenerCount } from 'node:events';

const myEmitter = new EventEmitter();
myEmitter.on('event', () => {});
myEmitter.on('event', () => {});
console.log(listenerCount(myEmitter, 'event'));
// Prints: 2

static function listenerCount(emitter: EventEmitter<DefaultEventMap>, eventName: string | symbol): number

Parameters

Returns

Inherited From EventEmitter.listenerCount

Returns the number of listeners listening for the event named eventName. If listener is provided, it will return how many times the listener is found in the list of the listeners of the event.

function listenerCount<K>(eventName: string | symbol, listener?: Function): number

Parameters

Returns

Inherited From EventEmitter.listenerCount

Returns a copy of the array of listeners for the event named eventName.

server.on('connection', (stream) => {
  console.log('someone connected!');
});
console.log(util.inspect(server.listeners('connection')));
// Prints: [ [Function] ]

function listeners<K>(eventName: string | symbol): Function[]

Parameters

Returns

Inherited From EventEmitter.listeners

Alias for emitter.removeListener().

function off<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.off

import { on, EventEmitter } from 'node:events';
import process from 'node:process';

const ee = new EventEmitter();

// Emit later on
process.nextTick(() => {
  ee.emit('foo', 'bar');
  ee.emit('foo', 42);
});

for await (const event of on(ee, 'foo')) {
  // The execution of this inner block is synchronous and it
  // processes one event at a time (even with await). Do not use
  // if concurrent execution is required.
  console.log(event); // prints ['bar'] [42]
}
// Unreachable here

Returns an AsyncIterator that iterates eventName events. It will throw if the EventEmitter emits 'error'. It removes all listeners when exiting the loop. The value returned by each iteration is an array composed of the emitted event arguments.

An AbortSignal can be used to cancel waiting on events:

import { on, EventEmitter } from 'node:events';
import process from 'node:process';

const ac = new AbortController();

(async () => {
  const ee = new EventEmitter();

  // Emit later on
  process.nextTick(() => {
    ee.emit('foo', 'bar');
    ee.emit('foo', 42);
  });

  for await (const event of on(ee, 'foo', { signal: ac.signal })) {
    // The execution of this inner block is synchronous and it
    // processes one event at a time (even with await). Do not use
    // if concurrent execution is required.
    console.log(event); // prints ['bar'] [42]
  }
  // Unreachable here
})();

process.nextTick(() => ac.abort());

Use the close option to specify an array of event names that will end the iteration:

import { on, EventEmitter } from 'node:events';
import process from 'node:process';

const ee = new EventEmitter();

// Emit later on
process.nextTick(() => {
  ee.emit('foo', 'bar');
  ee.emit('foo', 42);
  ee.emit('close');
});

for await (const event of on(ee, 'foo', { close: ['close'] })) {
  console.log(event); // prints ['bar'] [42]
}
// the loop will exit after 'close' is emitted
console.log('done'); // prints 'done'

static function on(emitter: EventEmitter<DefaultEventMap>, eventName: string | symbol, options?: StaticEventEmitterIteratorOptions): AsyncIterator<any[], undefined, any>

Parameters

Returns

An AsyncIterator that iterates eventName events emitted by the emitter

Inherited From EventEmitter.on

static function on(emitter: EventTarget, eventName: string, options?: StaticEventEmitterIteratorOptions): AsyncIterator<any[], undefined, any>

Parameters

Returns

Inherited From EventEmitter.on

Adds the listener function to the end of the listeners array for the event named eventName. No checks are made to see if the listener has already been added. Multiple calls passing the same combination of eventName and listener will result in the listener being added, and called, multiple times.

server.on('connection', (stream) => {
  console.log('someone connected!');
});

Returns a reference to the EventEmitter, so that calls can be chained.

By default, event listeners are invoked in the order they are added. The emitter.prependListener() method can be used as an alternative to add the event listener to the beginning of the listeners array.

import { EventEmitter } from 'node:events';
const myEE = new EventEmitter();
myEE.on('foo', () => console.log('a'));
myEE.prependListener('foo', () => console.log('b'));
myEE.emit('foo');
// Prints:
//   b
//   a

function on<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.on

Creates a Promise that is fulfilled when the EventEmitter emits the given event or that is rejected if the EventEmitter emits 'error' while waiting. The Promise will resolve with an array of all the arguments emitted to the given event.

This method is intentionally generic and works with the web platform EventTarget interface, which has no special'error' event semantics and does not listen to the 'error' event.

import { once, EventEmitter } from 'node:events';
import process from 'node:process';

const ee = new EventEmitter();

process.nextTick(() => {
  ee.emit('myevent', 42);
});

const [value] = await once(ee, 'myevent');
console.log(value);

const err = new Error('kaboom');
process.nextTick(() => {
  ee.emit('error', err);
});

try {
  await once(ee, 'myevent');
} catch (err) {
  console.error('error happened', err);
}

The special handling of the 'error' event is only used when events.once() is used to wait for another event. If events.once() is used to wait for the 'error' event itself, then it is treated as any other kind of event without special handling:

import { EventEmitter, once } from 'node:events';

const ee = new EventEmitter();

once(ee, 'error')
  .then(([err]) => console.log('ok', err.message))
  .catch((err) => console.error('error', err.message));

ee.emit('error', new Error('boom'));

// Prints: ok boom

An AbortSignal can be used to cancel waiting for the event:

import { EventEmitter, once } from 'node:events';

const ee = new EventEmitter();
const ac = new AbortController();

async function foo(emitter, event, signal) {
  try {
    await once(emitter, event, { signal });
    console.log('event emitted!');
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Waiting for the event was canceled!');
    } else {
      console.error('There was an error', error.message);
    }
  }
}

foo(ee, 'foo', ac.signal);
ac.abort(); // Abort waiting for the event
ee.emit('foo'); // Prints: Waiting for the event was canceled!

static function once(emitter: EventEmitter<DefaultEventMap>, eventName: string | symbol, options?: StaticEventEmitterOptions): Promise<any[]>

Parameters

Returns

Inherited From EventEmitter.once

static function once(emitter: EventTarget, eventName: string, options?: StaticEventEmitterOptions): Promise<any[]>

Parameters

Returns

Inherited From EventEmitter.once

Adds a one-time listener function for the event named eventName. The next time eventName is triggered, this listener is removed and then invoked.

server.once('connection', (stream) => {
  console.log('Ah, we have our first user!');
});

Returns a reference to the EventEmitter, so that calls can be chained.

By default, event listeners are invoked in the order they are added. The emitter.prependOnceListener() method can be used as an alternative to add the event listener to the beginning of the listeners array.

import { EventEmitter } from 'node:events';
const myEE = new EventEmitter();
myEE.once('foo', () => console.log('a'));
myEE.prependOnceListener('foo', () => console.log('b'));
myEE.emit('foo');
// Prints:
//   b
//   a

function once<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.once

Adds the listener function to the beginning of the listeners array for the event named eventName. No checks are made to see if the listener has already been added. Multiple calls passing the same combination of eventName and listener will result in the listener being added, and called, multiple times.

server.prependListener('connection', (stream) => {
  console.log('someone connected!');
});

Returns a reference to the EventEmitter, so that calls can be chained.

function prependListener<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.prependListener

Adds a one-timelistener function for the event named eventName to the beginning of the listeners array. The next time eventName is triggered, this listener is removed, and then invoked.

server.prependOnceListener('connection', (stream) => {
  console.log('Ah, we have our first user!');
});

Returns a reference to the EventEmitter, so that calls can be chained.

function prependOnceListener<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.prependOnceListener

Returns a copy of the array of listeners for the event named eventName, including any wrappers (such as those created by .once()).

import { EventEmitter } from 'node:events';
const emitter = new EventEmitter();
emitter.once('log', () => console.log('log once'));

// Returns a new Array with a function `onceWrapper` which has a property
// `listener` which contains the original listener bound above
const listeners = emitter.rawListeners('log');
const logFnWrapper = listeners[0];

// Logs "log once" to the console and does not unbind the `once` event
logFnWrapper.listener();

// Logs "log once" to the console and removes the listener
logFnWrapper();

emitter.on('log', () => console.log('log persistently'));
// Will return a new Array with a single function bound by `.on()` above
const newListeners = emitter.rawListeners('log');

// Logs "log persistently" twice
newListeners[0]();
emitter.emit('log');

function rawListeners<K>(eventName: string | symbol): Function[]

Parameters

Returns

Inherited From EventEmitter.rawListeners

Removes all listeners, or those of the specified eventName.

It is bad practice to remove listeners added elsewhere in the code, particularly when the EventEmitter instance was created by some other component or module (e.g. sockets or file streams).

Returns a reference to the EventEmitter, so that calls can be chained.

function removeAllListeners(eventName?: string | symbol): InkingManager

Parameters

Returns

Inherited From EventEmitter.removeAllListeners

Removes the specified listener from the listener array for the event named eventName.

const callback = (stream) => {
  console.log('someone connected!');
};
server.on('connection', callback);
// ...
server.removeListener('connection', callback);

removeListener() will remove, at most, one instance of a listener from the listener array. If any single listener has been added multiple times to the listener array for the specified eventName, then removeListener() must be called multiple times to remove each instance.

Once an event is emitted, all listeners attached to it at the time of emitting are called in order. This implies that any removeListener() or removeAllListeners() calls after emitting and before the last listener finishes execution will not remove them fromemit() in progress. Subsequent events behave as expected.

import { EventEmitter } from 'node:events';
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();

const callbackA = () => {
  console.log('A');
  myEmitter.removeListener('event', callbackB);
};

const callbackB = () => {
  console.log('B');
};

myEmitter.on('event', callbackA);

myEmitter.on('event', callbackB);

// callbackA removes listener callbackB but it will still be called.
// Internal listener array at time of emit [callbackA, callbackB]
myEmitter.emit('event');
// Prints:
//   A
//   B

// callbackB is now removed.
// Internal listener array [callbackA]
myEmitter.emit('event');
// Prints:
//   A

Because listeners are managed using an internal array, calling this will change the position indices of any listener registered after the listener being removed. This will not impact the order in which listeners are called, but it means that any copies of the listener array as returned by the emitter.listeners() method will need to be recreated.

When a single function has been added as a handler multiple times for a single event (as in the example below), removeListener() will remove the most recently added instance. In the example the once('ping') listener is removed:

import { EventEmitter } from 'node:events';
const ee = new EventEmitter();

function pong() {
  console.log('pong');
}

ee.on('ping', pong);
ee.once('ping', pong);
ee.removeListener('ping', pong);

ee.emit('ping');
ee.emit('ping');

Returns a reference to the EventEmitter, so that calls can be chained.

function removeListener<K>(eventName: string | symbol, listener: (args: any[]) => void): InkingManager

Parameters

Returns

Inherited From EventEmitter.removeListener

By default EventEmitters will print a warning if more than 10 listeners are added for a particular event. This is a useful default that helps finding memory leaks. The emitter.setMaxListeners() method allows the limit to be modified for this specific EventEmitter instance. The value can be set to Infinity (or 0) to indicate an unlimited number of listeners.

Returns a reference to the EventEmitter, so that calls can be chained.

function setMaxListeners(n: number): InkingManager

Parameters

Returns

Inherited From EventEmitter.setMaxListeners

import { setMaxListeners, EventEmitter } from 'node:events';

const target = new EventTarget();
const emitter = new EventEmitter();

setMaxListeners(5, target, emitter);

static function setMaxListeners(n?: number, eventTargets: (EventEmitter<DefaultEventMap> | EventTarget)[])

Parameters

Inherited From EventEmitter.setMaxListeners

function [captureRejectionSymbol]<K>(error: Error, event: string | symbol, args: AnyRest)

Parameters

Inherited From EventEmitter.__@captureRejectionSymbol@229