@fluidframework/ink NPM

@fluidframework/ink

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

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

Note: this is subject to change, see the "Next steps" section below

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

Next steps for Ink/Canvases

Ink is an in-progress data structure with the purpose of facilitating collaborative inking. There is a set of anticipated work to be done still, including breaking changes across Ink, client-ui-lib/OverlayCanvas, and the Canvas example. Please do try it out and let us know what you think, but also be prepared for the following incoming changes:

Coordinate bundling

Enable bundled coordinate updates rather than one per op

Canvas consolidation

Replace client-ui-lib's OverlayCanvas with ink's InkCanvas, or remove it.
Consider splitting the new InkCanvas control into input/output, to enable reuse of input handling across multiple renderers.

Wet ink and ink drying

Distinguish wet/dry ink in the data model
Add an op for drying a stroke
Enable wet/dry ink on OverlayCanvas/canvas

Atomic stroke rendering

Enable atomic stroke rendering on the canvases, allowing transparency in ink color (requires wet ink for rendering performance)

@fluidframework/core-interfaces @fluidframework/datastore-definitions @fluidframework/driver-utils @fluidframework/protocol-definitions @fluidframework/runtime-definitions @fluidframework/shared-object-base uuid

@everything-registry/sub-chunk-331 @zalastax/nolb-_flu @fluidframework/test-end-to-end-tests @fluidframework/test-version-utils @kurtb/canvas @kurtb/shared-text

29 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

2.0.0-dev-rc.1.0.0.232845

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

2.0.0-dev-rc.1.0.0.228517

5 months ago

2.0.0-dev-rc.1.0.0.225277

5 months ago

2.0.0-dev-rc.1.0.0.224419

5 months ago

2.0.0-internal.8.0.0

5 months ago

2.0.0-internal.7.4.0

5 months ago

2.0.0-dev.7.4.0.221926

5 months ago

2.0.0-dev.7.4.0.217884

6 months ago

2.0.0-dev.7.4.0.215366

6 months ago

2.0.0-dev.7.3.0.210328

6 months ago

2.0.0-dev.7.2.0.205722

7 months ago

2.0.0-dev.7.4.0.217212

6 months ago

2.0.0-dev.7.4.0.216897

6 months ago

2.0.0-dev.7.3.0.209023

7 months ago

1.3.7

9 months ago

2.0.0-dev.6.4.0.191258

8 months ago

2.0.0-internal.7.0.1

7 months ago

2.0.0-dev.7.2.0.204906

7 months ago

7 months ago

8 months ago

6 months ago

9 months ago

8 months ago

8 months ago

9 months ago

10 months ago

2.0.0-dev.7.2.0.203917

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

2.0.0-dev.6.4.0.191457

8 months ago

2.0.0-dev.7.3.0.211848

6 months ago

2.0.0-internal.7.2.0

7 months ago

2.0.0-internal.7.2.1

7 months ago

2.0.0-internal.7.2.2

7 months ago

2.0.0-dev.6.4.0.191515

8 months ago

2.0.0-internal.6.4.0

8 months ago

2.0.0-internal.7.3.0

6 months ago

2.0.0-dev.7.4.0.215930

6 months ago

2.0.0-internal.5.1.1

11 months ago

2.0.0-dev.7.3.0.206769

7 months ago

2.0.0-internal.4.3.2

8 months ago

2.0.0-dev.7.3.0.207992

7 months ago

10 months ago

9 months ago

9 months ago

8 months ago

8 months ago

11 months ago

10 months ago

10 months ago

10 months ago

2.0.0-dev.5.3.2.178189

10 months ago

2.0.0-dev.7.3.0.209831

6 months ago

2.0.0-dev.7.4.0.214930

6 months ago

9 months ago

9 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

2.0.0-dev.7.3.0.207781

7 months ago

2.0.0-dev.7.3.0.209174

7 months ago

2.0.0-dev.7.3.0.212138

6 months ago

2.0.0-dev.6.4.0.192049

8 months ago

2.0.0-dev.7.4.0.215747

6 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

2.0.0-dev.5.2.0.169897

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2.0.0-dev.4.4.0.161784

1 year ago

2.0.0-dev.4.4.0.161652

1 year ago

2.0.0-internal.4.2.0

1 year ago

2.0.0-internal.4.2.1

1 year ago

2.0.0-internal.3.2.3

1 year ago

2.0.0-dev.4.4.0.161322

1 year ago

2.0.0-internal.2.4.2

1 year ago

2.0.0-internal.2.4.3

1 year ago

2.0.0-internal.3.1.1

1 year ago

2.0.0-dev.4.4.0.162089

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2.0.0-dev.4.3.0.158678

1 year ago

2.0.0-dev.4.4.0.162574

12 months ago

2.0.0-dev.4.2.0.153917

1 year ago

2.0.0-dev.4.3.0.157531

1 year ago

2.0.0-dev.4.4.0.162253

12 months ago

2.0.0-dev.4.3.0.159619

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2.0.0-dev.4.1.0.148229

1 year ago

2.0.0-dev.4.4.0.161516

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2.0.0-dev.3.1.0.125672

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2.0.0-dev.1.4.5.105745

2 years ago

1.4.0-111997

1 year ago

2.0.0-dev.2.2.0.111723

1 year ago

2.0.0-dev.1.4.6.106135

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2.0.0-dev.2.3.0.115467

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.0.0-dev.1.3.0.96595

2 years ago

2.0.0-internal.1.1.4

2 years ago

0.59.4003

2 years ago

2.0.0-internal.1.2.0.93071

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.0.0-internal.1.0.0.81589

2 years ago

1.2.0-77818

2 years ago

1.2.3-83900

2 years ago

1.1.0-76254

2 years ago

2.0.0-internal.1.0.0.82693

2 years ago

1.2.0

2 years ago

2.0.0-internal.1.0.0.82159

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.0.0-internal.1.0.0.81601

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.0.0-internal.1.0.0.84253

2 years ago

2.0.0-internal.1.0.0

2 years ago

2.0.0-internal.1.0.0.82628

2 years ago

2.0.0-internal.1.0.0.83139

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago