Share via

InkingManager class

  • Reference
Package:
@microsoft/live-share-canvas

Handles user interaction with a canvas, and manages the rendering of wet and dry strokes.

Extends

EventEmitter

Constructors

InkingManager(HTMLElement)

Creates a new InkingManager instance.

Properties

centerX

Gets the horizontal center of the inking surface.
centerY

Gets the vertical center of the inking surface.
clientHeight

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

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

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

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

The size of the eraser.
highlighterBrush

Gets the highlighter brush.
hostElement

Gets the DOM element that hosts the inking surface.
inputProvider

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

Gets the laser pointer brush.
lineBrush

Gets the line brush.
localClientId

The default client Id of the device running the application.
offset

Gets the viewport offset. Defaults to 0,0.
penBrush

Gets the pen brush.
referencePoint

Gets the reference point. Defaults to "center".
scale

Gets the scale. Defaults to 1.
tool

Gets the current tool. Defaults to InkingTool.Pen.
viewPort

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

Inherited Properties

captureRejections

Value: boolean

Change the default captureRejections option on all new EventEmitter objects.
captureRejectionSymbol

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

See how to write a custom rejection handler.
defaultMaxListeners

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'.
errorMonitor

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.

Methods

activate()

Starts listening to pointer input.
addStroke(IStroke, IAddRemoveStrokeOptions)

Adds a stroke to the drawing.
beginUpdate()

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.
beginWetStroke(StrokeType, StrokeMode, IPointerPoint, IStrokeCreationOptions)

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.
clear()

Clears the canvas.
deactivate()

Stops listening to pointer input.
endUpdate()

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

Entirely removes any strokes that intersect with the eraser rectangle.
exportRaw()

Exports the current drawing as a collection of raw strokes.
exportSVG()

Exports the current drawing to an SVG.
getStroke(string)

Retrieves an existing stroke from the drawing.
importRaw(IRawStroke[])

Imports (adds) the specified strokes into the drawing.
pointErase(IPoint)

Erases portions of strokes that intersect with the eraser rectangle.
removeStroke(string, IAddRemoveStrokeOptions)

Removes a stroke from the drawing.
screenToViewport(IPoint)

Converts screen coordinates to viewport coordinates.
setInputFilters(InputFilter[])

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

Converts viewport coordinates to screen coordinates.

Inherited Methods

addAbortListener(AbortSignal, (event: Event) => void)

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]();
  }
}
addListener<K>(string | symbol, (args: any[]) => void)

Alias for emitter.on(eventName, listener).
emit<K>(string | symbol, AnyRest)

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
eventNames()

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) ]
getEventListeners(EventEmitter<DefaultEventMap> | EventTarget, string | symbol)

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] ]
}
getMaxListeners()

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

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
}
listenerCount(EventEmitter<DefaultEventMap>, string | symbol)

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
listenerCount<K>(string | symbol, Function)

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.
listeners<K>(string | symbol)

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] ]
off<K>(string | symbol, (args: any[]) => void)

Alias for emitter.removeListener().
on(EventEmitter<DefaultEventMap>, string | symbol, StaticEventEmitterIteratorOptions) 
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'
on(EventTarget, string, StaticEventEmitterIteratorOptions)
on<K>(string | symbol, (args: any[]) => void)

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
once(EventEmitter<DefaultEventMap>, string | symbol, StaticEventEmitterOptions)

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!
once(EventTarget, string, StaticEventEmitterOptions)
once<K>(string | symbol, (args: any[]) => void)

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
prependListener<K>(string | symbol, (args: any[]) => void)

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.
prependOnceListener<K>(string | symbol, (args: any[]) => void)

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.
rawListeners<K>(string | symbol)

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');
removeAllListeners(string | symbol)

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.
removeListener<K>(string | symbol, (args: any[]) => void)

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.
setMaxListeners(number)

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.
setMaxListeners(number, (EventEmitter<DefaultEventMap> | EventTarget)[]) 
import { setMaxListeners, EventEmitter } from 'node:events';

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

setMaxListeners(5, target, emitter);
[captureRejectionSymbol]<K>(Error, string | symbol, AnyRest)

Constructor Details

InkingManager(HTMLElement)

Creates a new InkingManager instance.

new InkingManager(hostElement: HTMLElement)

Parameters

hostElement

HTMLElement

The HTML element to host the canvases and other DOM elements handled by the InkingManager instance. hostElement shouldn't have any children. The InkingManager instance might change its attributes, including its style.

Property Details

centerX

Gets the horizontal center of the inking surface.

number centerX

Property Value

number

centerY

Gets the vertical center of the inking surface.

number centerY

Property Value

number

clientHeight

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

number clientHeight

Property Value

number

clientWidth

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

number clientWidth

Property Value

number

enableStrokeModifierHotKeys

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

boolean

ephemeralCanvasRemovalDelay

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

number

eraserSize

The size of the eraser.

eraserSize: number

Property Value

number

highlighterBrush

Gets the highlighter brush.

IBrush highlighterBrush

Property Value

IBrush

hostElement

Gets the DOM element that hosts the inking surface.

HTMLElement hostElement

Property Value

HTMLElement

inputProvider

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

InputProvider inputProvider

Property Value

InputProvider

laserPointerBrush

Gets the laser pointer brush.

IBrush laserPointerBrush

Property Value

IBrush

lineBrush

Gets the line brush.

IBrush lineBrush

Property Value

IBrush

localClientId

The default client Id of the device running the application.

static localClientId: string

Property Value

string

offset

Gets the viewport offset. Defaults to 0,0.

Readonly<IPoint> offset

Property Value

Readonly<IPoint>

penBrush

Gets the pen brush.

IBrush penBrush

Property Value

IBrush

referencePoint

Gets the reference point. Defaults to "center".

CanvasReferencePoint referencePoint

Property Value

CanvasReferencePoint

scale

Gets the scale. Defaults to 1.

number scale

Property Value

number

tool

Gets the current tool. Defaults to InkingTool.Pen.

InkingTool tool

Property Value

InkingTool

viewPort

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

IRect viewPort

Property Value

IRect

Inherited Property Details

captureRejections

Value: boolean

Change the default captureRejections option on all new EventEmitter objects.

static captureRejections: boolean

Property Value

boolean

Inherited From EventEmitter.captureRejections

captureRejectionSymbol

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

See how to write a custom rejection handler.

static captureRejectionSymbol: typeof captureRejectionSymbol

Property Value

typeof captureRejectionSymbol

Inherited From EventEmitter.captureRejectionSymbol

defaultMaxListeners

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

number

Inherited From EventEmitter.defaultMaxListeners

errorMonitor

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

typeof errorMonitor

Inherited From EventEmitter.errorMonitor

Method Details

activate()

Starts listening to pointer input.

function activate()

addStroke(IStroke, IAddRemoveStrokeOptions)

Adds a stroke to the drawing.

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

Parameters

stroke
IStroke

The stroke to add. If a stroke with the same id already exists in the drawing, is it replaced.

options
IAddRemoveStrokeOptions

Options allowing the caller to force a re-render and/or block the emission of StrokesAddedEvent.

beginUpdate()

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()

beginWetStroke(StrokeType, StrokeMode, IPointerPoint, IStrokeCreationOptions)

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

strokeType
StrokeType

The type of the stroke to start.

strokeKind
StrokeMode

The kind of stroke to start.

startPoint
IPointerPoint

The starting point of the stroke.

options
IStrokeCreationOptions

Creation options, such as id, points, brush...

Returns

IWetStroke

An IWetStroke object representing the ongoing stroke.

clear()

Clears the canvas.

function clear()

deactivate()

Stops listening to pointer input.

function deactivate()

endUpdate()

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

function endUpdate()

erase(IPoint)

Entirely removes any strokes that intersect with the eraser rectangle.

function erase(p: IPoint)

Parameters

p
IPoint

The center of the eraser rectangle. The size of the rectangle is determined by the eraserSize property.

exportRaw()

Exports the current drawing as a collection of raw strokes.

function exportRaw(): IRawStroke[]

Returns

IRawStroke[]

A collection or raw strokes.

exportSVG()

Exports the current drawing to an SVG.

function exportSVG(): string

Returns

string

A serialized SVG string.

getStroke(string)

Retrieves an existing stroke from the drawing.

function getStroke(id: string): undefined | IStroke

Parameters

id

string

The id of the stroke to retrieve.

Returns

undefined | IStroke

The stroke with the specified id.

importRaw(IRawStroke[])

Imports (adds) the specified strokes into the drawing.

function importRaw(rawStrokes: IRawStroke[])

Parameters

rawStrokes

IRawStroke[]

The strokes to import.

pointErase(IPoint)

Erases portions of strokes that intersect with the eraser rectangle.

function pointErase(p: IPoint)

Parameters

p
IPoint

The center of the eraser rectangle. The size of the rectangle is determined by the eraserSize property.

removeStroke(string, IAddRemoveStrokeOptions)

Removes a stroke from the drawing.

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

Parameters

id

string

The id of the stroke to remove. If the stroke doesn't exist, nothing happens.

options
IAddRemoveStrokeOptions

Options allowing the caller to force a re-render and/or block the emission of StrokesRemovedEvent.

screenToViewport(IPoint)

Converts screen coordinates to viewport coordinates.

function screenToViewport(p: IPoint): IPoint

Parameters

p
IPoint

The point to convert.

Returns

IPoint

The converted point.

setInputFilters(InputFilter[])

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

function setInputFilters(inputFilters?: InputFilter[])

Parameters

inputFilters

InputFilter[]

The input filters to use, in the order provided. If undefined is passed, the default input filters are used.

viewportToScreen(IPoint)

Converts viewport coordinates to screen coordinates.

function viewportToScreen(p: IPoint): IPoint

Parameters

p
IPoint

The point to convert.

Returns

IPoint

The converted point.

Inherited Method Details

addAbortListener(AbortSignal, (event: Event) => void)

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

signal

AbortSignal

resource

(event: Event) => void

Returns

Disposable

Disposable that removes the abort listener.

Inherited From EventEmitter.addAbortListener

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

Alias for emitter.on(eventName, listener).

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

Parameters

eventName

string | symbol

listener

(args: any[]) => void

Returns

InkingManager

Inherited From EventEmitter.addListener

emit<K>(string | symbol, AnyRest)

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

eventName

string | symbol

args

AnyRest

Returns

boolean

Inherited From EventEmitter.emit

eventNames()

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

(string | symbol)[]

Inherited From EventEmitter.eventNames

getEventListeners(EventEmitter<DefaultEventMap> | EventTarget, string | symbol)

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

emitter

EventEmitter<DefaultEventMap> | EventTarget

name

string | symbol

Returns

Function[]

Inherited From EventEmitter.getEventListeners

getMaxListeners()

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

function getMaxListeners(): number

Returns

number

Inherited From EventEmitter.getMaxListeners

getMaxListeners(EventEmitter<DefaultEventMap> | EventTarget)

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

emitter

EventEmitter<DefaultEventMap> | EventTarget

Returns

number

Inherited From EventEmitter.getMaxListeners

listenerCount(EventEmitter<DefaultEventMap>, string | symbol)

Warning

This API is now deprecated.

Since v3.2.0 - Use listenerCount instead.

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

emitter

EventEmitter<DefaultEventMap>

The emitter to query

eventName

string | symbol

The event name

Returns

number

Inherited From EventEmitter.listenerCount

listenerCount<K>(string | symbol, Function)

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

eventName

string | symbol

The name of the event being listened for

listener

Function

The event handler function

Returns

number

Inherited From EventEmitter.listenerCount

listeners<K>(string | symbol)

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

eventName

string | symbol

Returns

Function[]

Inherited From EventEmitter.listeners

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

Alias for emitter.removeListener().

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

Parameters

eventName

string | symbol

listener

(args: any[]) => void

Returns

InkingManager

Inherited From EventEmitter.off

on(EventEmitter<DefaultEventMap>, string | symbol, StaticEventEmitterIteratorOptions) 

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[], any, any>

Parameters

emitter

EventEmitter<DefaultEventMap>

eventName

string | symbol

options

StaticEventEmitterIteratorOptions

Returns

AsyncIterator<any[], any, any>

An AsyncIterator that iterates eventName events emitted by the emitter

Inherited From EventEmitter.on

on(EventTarget, string, StaticEventEmitterIteratorOptions) 

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

Parameters

emitter

EventTarget

eventName

string

options

StaticEventEmitterIteratorOptions

Returns

AsyncIterator<any[], any, any>

Inherited From EventEmitter.on

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

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

eventName

string | symbol

The name of the event.

listener

(args: any[]) => void

The callback function

Returns

InkingManager

Inherited From EventEmitter.on

once(EventEmitter<DefaultEventMap>, string | symbol, StaticEventEmitterOptions)

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

emitter

EventEmitter<DefaultEventMap>

eventName

string | symbol

options

StaticEventEmitterOptions

Returns

Promise<any[]>

Inherited From EventEmitter.once

once(EventTarget, string, StaticEventEmitterOptions) 

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

Parameters

emitter

EventTarget

eventName

string

options

StaticEventEmitterOptions

Returns

Promise<any[]>

Inherited From EventEmitter.once

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

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

eventName

string | symbol

The name of the event.

listener

(args: any[]) => void

The callback function

Returns

InkingManager

Inherited From EventEmitter.once

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

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

eventName

string | symbol

The name of the event.

listener

(args: any[]) => void

The callback function

Returns

InkingManager

Inherited From EventEmitter.prependListener

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

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

eventName

string | symbol

The name of the event.

listener

(args: any[]) => void

The callback function

Returns

InkingManager

Inherited From EventEmitter.prependOnceListener

rawListeners<K>(string | symbol)

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

eventName

string | symbol

Returns

Function[]

Inherited From EventEmitter.rawListeners

removeAllListeners(string | symbol)

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

eventName

string | symbol

Returns

InkingManager

Inherited From EventEmitter.removeAllListeners

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

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

eventName

string | symbol

listener

(args: any[]) => void

Returns

InkingManager

Inherited From EventEmitter.removeListener

setMaxListeners(number)

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

n

number

Returns

InkingManager

Inherited From EventEmitter.setMaxListeners

setMaxListeners(number, (EventEmitter<DefaultEventMap> | EventTarget)[]) 

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

n

number

A non-negative number. The maximum number of listeners per EventTarget event.

eventTargets

(EventEmitter<DefaultEventMap> | EventTarget)[]

Zero or more {EventTarget} or {EventEmitter} instances. If none are specified, n is set as the default max for all newly created {EventTarget} and {EventEmitter} objects.

Inherited From EventEmitter.setMaxListeners

[captureRejectionSymbol]<K>(Error, string | symbol, AnyRest) 

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

Parameters

error

Error

event

string | symbol

args

AnyRest

Inherited From EventEmitter.__@captureRejectionSymbol@238