/*! * Copyright (c) Microsoft Corporation and contributors. All rights reserved. * Licensed under the MIT License. */ import { IFluidDataStoreRuntime, IChannelStorageService, IChannelAttributes } from "@fluidframework/datastore-definitions"; import { ISequencedDocumentMessage } from "@fluidframework/protocol-definitions"; import { ISummaryTreeWithStats } from "@fluidframework/runtime-definitions"; import { IFluidSerializer, SharedObject } from "@fluidframework/shared-object-base"; import { InkFactory } from "./inkFactory"; import { IInk, IInkPoint, IInkStroke, IPen, IInkEvents } from "./interfaces"; /** * `Ink` is a shared object which holds a collection of ink strokes. * * @remarks * ### Creation and setup * * To create an `Ink` object, call the static `create` method: * * ```typescript * const ink = Ink.create(this.runtime, id); * ``` * * You'll also need an `IPen` that will describe the style of your stroke: * * ```typescript * 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: * * ```typescript * 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`: * * ```typescript * 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. * * ```typescript * ink.on("stylus", this.renderStylusUpdate.bind(this)); * ink.on("clear", this.renderClear.bind(this)); * ``` * @sealed */ export declare class Ink extends SharedObject implements IInk { /** * Create a new Ink. * @param runtime - Data Store runtime the new Ink belongs to * @param id - Optional name of the Ink; will be assigned a unique ID if not provided * @returns Newly create Ink object (but not attached yet) */ static create(runtime: IFluidDataStoreRuntime, id?: string): Ink; /** * Get a factory for Ink to register with the data store. * @returns A factory that creates and loads Ink */ static getFactory(): InkFactory; /** * The current ink snapshot. */ private inkData; /** * Create a new Ink. * @param runtime - The runtime the Ink will be associated with * @param id - Unique ID for the Ink */ constructor(runtime: IFluidDataStoreRuntime, id: string, attributes: IChannelAttributes); /** * {@inheritDoc IInk.createStroke} */ createStroke(pen: IPen): IInkStroke; /** * {@inheritDoc IInk.appendPointToStroke} */ appendPointToStroke(point: IInkPoint, id: string): IInkStroke; /** * {@inheritDoc IInk.clear} */ clear(): void; /** * {@inheritDoc IInk.getStrokes} */ getStrokes(): IInkStroke[]; /** * {@inheritDoc IInk.getStroke} */ getStroke(key: string): IInkStroke; /** * {@inheritDoc @fluidframework/shared-object-base#SharedObject.summarizeCore} */ protected summarizeCore(serializer: IFluidSerializer): ISummaryTreeWithStats; /** * {@inheritDoc @fluidframework/shared-object-base#SharedObject.loadCore} */ protected loadCore(storage: IChannelStorageService): Promise; /** * {@inheritDoc @fluidframework/shared-object-base#SharedObject.processCore} */ protected processCore(message: ISequencedDocumentMessage, local: boolean, localOpMetadata: unknown): void; /** * {@inheritDoc @fluidframework/shared-object-base#SharedObject.onDisconnect} */ protected onDisconnect(): void; /** * Update the model for a clear operation. * @param operation - The operation object */ private executeClearOperation; /** * Update the model for a create stroke operation. * @param operation - The operation object * @returns The stroke that was created */ private executeCreateStrokeOperation; /** * Update the model for a stylus operation. These represent updates to an existing stroke. * @param operation - The operation object * @returns The stroke that was updated */ private executeStylusOperation; protected applyStashedOp(): void; } //# sourceMappingURL=ink.d.ts.map