Ink Class

Ink is a shared object which holds a collection of ink strokes.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

/** @sealed */
export declare class Ink extends SharedObject<IInkEvents> implements IInk

Extends: SharedObject<IInkEvents

Implements: IInk

Remarks

### Creation and setup

To create an Ink object, call the static create method:

const ink = Ink.create(this.runtime, id);

You'll also need an IPen that will describe the style of your stroke:

this.currentPen = {
    color: { r: 0, g: 161 / 255, b: 241 / 255, a: 0 },
    thickness: 7,
};

### Usage

Once the Ink object is created, you can add and update ink strokes using createStroke and appendPointToStroke. Most likely you'll want to do this in response to incoming Pointer Events:

private handlePointerDown(e: PointerEvent) {
    const newStroke = ink.createStroke(this.currentPen);
    this.currentStrokeId = newStroke.id;
    handlePointerMotion(e);
}

private handlePointerMotion(e: PointerEvent) {
    const inkPoint = {
        x: e.clientX,
        y: e.clientY,
        time: Date.now(),
        pressure: e.pressure,
    };
    ink.appendPointToStroke(inkPoint, this.currentStrokeId);
}

canvas.addEventListener("pointerdown", this.handlePointerDown);
canvas.addEventListener("pointermove", this.handlePointerMotion);
canvas.addEventListener("pointerup", this.handlePointerMotion);

You can also clear all the ink with clear:

ink.clear();

To observe and react to changes to the ink from both your own modifications as well as remote participants, you can listen to the "createStroke", "stylus" and "clear" events. Since you don't need to render anything yet when a stroke is first created, registering for "createStroke" may not be necessary.

ink.on("stylus", this.renderStylusUpdate.bind(this));
ink.on("clear", this.renderClear.bind(this));

Constructors

Constructor	Description
(constructor)(runtime, id, attributes)	Create a new Ink.

Static Methods

Method	Return Type	Description
create(runtime, id)	Ink	Create a new Ink.
getFactory()	InkFactory	Get a factory for Ink to register with the data store.

Methods

Method	Return Type	Description
appendPointToStroke(point, id)	IInkStroke	Append the given point to the indicated stroke.
applyStashedOp()	void
clear()	void	Clear all strokes.
createStroke(pen)	IInkStroke	Create a stroke with the given pen information.
getStroke(key)	IInkStroke	Get a specific stroke with the given key.
getStrokes()	IInkStroke[]	Get the collection of strokes stored in this Ink object.
loadCore(storage)	Promise<void>
onDisconnect()	void
processCore(message, local, localOpMetadata)	void
summarizeCore(serializer)	ISummaryTreeWithStats	Gets a form of the object that can be serialized.

Constructor Details

(constructor)

Create a new Ink.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

constructor(runtime: IFluidDataStoreRuntime, id: string, attributes: IChannelAttributes);

Parameters

Parameter	Type	Description
runtime	IFluidDataStoreRuntime	The runtime the Ink will be associated with
id	string	Unique ID for the Ink
attributes	IChannelAttributes

Method Details

appendPointToStroke

Append the given point to the indicated stroke.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

appendPointToStroke(point: IInkPoint, id: string): IInkStroke;

Parameters

Parameter	Type	Description
point	IInkPoint	The point to append
id	string	The ID for the stroke to append to

Returns

The stroke that was updated

Return type: IInkStroke

applyStashedOp

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

protected applyStashedOp(): void;

clear

Clear all strokes.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

clear(): void;

create

Create a new Ink.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

static create(runtime: IFluidDataStoreRuntime, id?: string): Ink;

Parameters

Parameter	Modifiers	Type	Description
runtime		IFluidDataStoreRuntime	Data Store runtime the new Ink belongs to
id	optional	string	Optional name of the Ink; will be assigned a unique ID if not provided

Returns

Newly create Ink object (but not attached yet)

Return type: Ink

createStroke

Create a stroke with the given pen information.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

createStroke(pen: IPen): IInkStroke;

Parameters

Parameter	Type	Description
pen	IPen	The pen information for this stroke

Returns

The stroke that was created

Return type: IInkStroke

getFactory

Get a factory for Ink to register with the data store.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

static getFactory(): InkFactory;

Returns

A factory that creates and loads Ink

Return type: InkFactory

getStroke

Get a specific stroke with the given key.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

getStroke(key: string): IInkStroke;

Parameters

Parameter	Type	Description
key	string	ID for the stroke

Returns

the requested stroke, or undefined if it does not exist

Return type: IInkStroke

getStrokes

Get the collection of strokes stored in this Ink object.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

getStrokes(): IInkStroke[];

Returns

the array of strokes

Return type: IInkStroke[]

loadCore

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

protected loadCore(storage: IChannelStorageService): Promise<void>;

Parameters

Parameter	Type	Description
storage	IChannelStorageService

Returns

Return type: Promise<void>

onDisconnect

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

protected onDisconnect(): void;

processCore

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

protected processCore(message: ISequencedDocumentMessage, local: boolean, localOpMetadata: unknown): void;

Parameters

Parameter	Type	Description
message	ISequencedDocumentMessage
local	boolean
localOpMetadata	unknown

summarizeCore

Gets a form of the object that can be serialized.

Sealed

This type is "sealed," meaning that code outside of the library defining it should not implement or extend it. Future versions of this type may add members or make typing of readonly members more specific.

Signature

protected summarizeCore(serializer: IFluidSerializer): ISummaryTreeWithStats;

Parameters

Parameter	Type	Description
serializer	IFluidSerializer

Returns

A tree representing the snapshot of the shared object.

Return type: ISummaryTreeWithStats