@fluid-experimental/ink 2.1.0-276985 → 2.1.0-281041

package/README.md

@@ -2,7 +2,7 @@
 
 Contains a [Distributed Data Structure](https://fluidframework.com/docs/build/dds/) (DDS) for representing digital ink strokes.
 
-<!-- AUTO-GENERATED-CONTENT:START (LIBRARY_PACKAGE_README:scripts=FALSE&packageScopeNotice=EXPERIMENTAL) -->
+<!-- AUTO-GENERATED-CONTENT:START (LIBRARY_PACKAGE_README_HEADER:) -->
 
 <!-- prettier-ignore-start -->
 <!-- NOTE: This section is automatically generated using @fluid-tools/markdown-magic. Do not update these generated contents directly. -->
@@ -28,10 +28,63 @@ To get started, install the package by running the following command:
 npm i @fluid-experimental/ink
 ```
 
+<!-- prettier-ignore-end -->
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (LIBRARY_PACKAGE_README_FOOTER:) -->
+
+<!-- prettier-ignore-start -->
+<!-- NOTE: This section is automatically generated using @fluid-tools/markdown-magic. Do not update these generated contents directly. -->
+
 ## API Documentation
 
 API documentation for **@fluid-experimental/ink** is available at <https://fluidframework.com/docs/apis/ink>.
 
+## Minimum Client Requirements
+
+These are the platform requirements for the current version of Fluid Framework Client Packages.
+These requirements err on the side of being too strict since within a major version they can be relaxed over time, but not made stricter.
+For Long Term Support (LTS) versions this can require supporting these platforms for several years.
+
+It is likely that other configurations will work, but they are not supported: if they stop working, we do not consider that a bug.
+If you would benefit from support for something not listed here, file an issue and the product team will evaluate your request.
+When making such a request please include if the configuration already works (and thus the request is just that it becomes officially supported), or if changes are required to get it working.
+
+### Supported Runtimes
+
+-   NodeJs ^20.10.0 except that we will drop support for it [when NodeJs 20 loses its upstream support on 2026-04-30](https://github.com/nodejs/release#release-schedule), and will support a newer LTS version of NodeJS (22) at least 1 year before 20 is end-of-life. This same policy applies to NodeJS 22 when it is end of life (2027-04-30).
+-   Modern browsers supporting the es2022 standard library: in response to asks we can add explicit support for using babel to polyfill to target specific standards or runtimes (meaning we can avoid/remove use of things that don't polyfill robustly, but otherwise target modern standards).
+
+### Supported Tools
+
+-   TypeScript 5.4:
+    -   All [`strict`](https://www.typescriptlang.org/tsconfig) options are supported.
+    -   [`strictNullChecks`](https://www.typescriptlang.org/tsconfig) is required.
+    -   [Configuration options deprecated in 5.0](https://github.com/microsoft/TypeScript/issues/51909) are not supported.
+    -   `exactOptionalPropertyTypes` is currently not fully supported.
+        If used, narrowing members of Fluid Framework types types using `in`, `Reflect.has`, `Object.hasOwn` or `Object.prototype.hasOwnProperty` should be avoided as they may incorrectly exclude `undefined` from the possible values in some cases.
+-   [webpack](https://webpack.js.org/) 5
+    -   We are not intending to be prescriptive about what bundler to use.
+        Other bundlers which can handle ES Modules should work, but webpack is the only one we actively test.
+
+### Module Resolution
+
+[`Node16`, `NodeNext`, or `Bundler`](https://www.typescriptlang.org/tsconfig#moduleResolution) resolution should be used with TypeScript compilerOptions to follow the [Node.js v12+ ESM Resolution and Loading algorithm](https://nodejs.github.io/nodejs.dev/en/api/v20/esm/#resolution-and-loading-algorithm).
+Node10 resolution is not supported as it does not support Fluid Framework's API structuring pattern that is used to distinguish stable APIs from those that are in development.
+
+### Module Formats
+
+-   ES Modules:
+    ES Modules are the preferred way to consume our client packages (including in NodeJs) and consuming our client packages from ES Modules is fully supported.
+-   CommonJs:
+    Consuming our client packages as CommonJs is supported only in NodeJS and only for the cases listed below.
+    This is done to accommodate some workflows without good ES Module support.
+    If you have a workflow you would like included in this list, file an issue.
+    Once this list of workflows motivating CommonJS support is empty, we may drop support for CommonJS one year after notice of the change is posted here.
+
+    -   Testing with Jest (which lacks [stable ESM support](https://jestjs.io/docs/ecmascript-modules) due to [unstable APIs in NodeJs](https://github.com/nodejs/node/issues/37648))
+
 ## Contribution Guidelines
 
 There are many ways to [contribute](https://github.com/microsoft/FluidFramework/blob/main/CONTRIBUTING.md) to Fluid.

package/dist/inkCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inkCanvas.d.ts","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAiD,MAAM,iBAAiB,CAAC;AAyG9F;;GAEG;AACH,qBAAa,SAAS;IAMpB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK;IANvB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAkC;IACvE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAO;gBAGhB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,IAAI;IAwBtB,WAAW,CAAC,KAAK,EAAE,MAAM;IAIzB,MAAM;IAYN,KAAK;IAKL,sBAAsB;IAa7B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,0BAA0B;IAclC,OAAO,CAAC,aAAa;IAiBrB;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;CASpB"}
+{"version":3,"file":"inkCanvas.d.ts","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAiD,MAAM,iBAAiB,CAAC;AA4G9F;;GAEG;AACH,qBAAa,SAAS;IAMpB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK;IANvB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAkC;IACvE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAO;gBAGhB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,IAAI;IAwBtB,WAAW,CAAC,KAAK,EAAE,MAAM;IAIzB,MAAM;IAeN,KAAK;IAKL,sBAAsB;IAa7B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,0BAA0B;IAclC,OAAO,CAAC,aAAa;IAqBrB;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;CAWpB"}

package/dist/inkCanvas.js

@@ -28,18 +28,21 @@ class Vector {
     }
 }
 function drawPolygon(context, points) {
-    if (points.length === 0) {
+    const firstPoint = points[0];
+    if (firstPoint === undefined) {
         return;
     }
     context.beginPath();
     // Move to the first point
-    context.moveTo(points[0].x, points[0].y);
+    context.moveTo(firstPoint.x, firstPoint.y);
     // Draw the rest of the segments
     for (let i = 1; i < points.length; i++) {
+        // Non null asserting, this must exist because the we are iterating through the length of points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         context.lineTo(points[i].x, points[i].y);
     }
     // And then close the shape
-    context.lineTo(points[0].x, points[0].y);
+    context.lineTo(firstPoint.x, firstPoint.y);
     context.closePath();
     context.fill();
 }
@@ -112,7 +115,10 @@ class InkCanvas {
         this.clearCanvas();
         const strokes = this.model.getStrokes();
         // Time of the first operation in stroke 0 is our starting time
-        const startTime = strokes[0].points[0].time;
+        const startTime = strokes[0]?.points[0]?.time;
+        if (startTime === undefined) {
+            throw new Error("Couldn't get start time");
+        }
         for (const stroke of strokes) {
             this.animateStroke(stroke, 0, startTime);
         }
@@ -173,7 +179,11 @@ class InkCanvas {
             return;
         }
         // Draw the requested stroke
+        // Non null asserting, this must exist because the operationIndex must be less than the length of stroke.points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const current = stroke.points[operationIndex];
+        // Non null asserting, this must exist because its either the first index or operationIndex minus one which is less than the length of stroke.points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const previous = stroke.points[Math.max(0, operationIndex - 1)];
         const time = operationIndex === 0 ? current.time - startTime : current.time - previous.time;
         setTimeout(() => {
@@ -191,6 +201,8 @@ class InkCanvas {
         this.clearCanvas();
         const strokes = this.model.getStrokes();
         for (const stroke of strokes) {
+            // Non null asserting since previous would not be used if stroke.points is empty
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             let previous = stroke.points[0];
             for (const current of stroke.points) {
                 // For the down, current === previous === stroke.operations[0]
@@ -210,7 +222,10 @@ class InkCanvas {
         const dirtyStrokeId = operation.id;
         const stroke = this.model.getStroke(dirtyStrokeId);
         // If this is the only point in the stroke, we'll use it for both the start and end of the segment
-        const prevPoint = stroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];
+        const prevPoint = 
+        // Non null asserting, this must exist its within the length of stroke.points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        stroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];
         this.drawStrokeSegment(stroke.pen, prevPoint, operation.point);
     }
 }

package/dist/inkCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"inkCanvas.js","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IColor, IInk, IInkPoint, IInkStroke, IPen, IStylusOperation } from \"./interfaces.js\";\n\ninterface IPoint {\n\tx: number;\n\ty: number;\n}\n\nclass Vector {\n\t/**\n\t * Returns the vector resulting from rotating vector by angle\n\t */\n\tpublic static rotate(vector: Vector, angle: number): Vector {\n\t\treturn new Vector(\n\t\t\tvector.x * Math.cos(angle) - vector.y * Math.sin(angle),\n\t\t\tvector.x * Math.sin(angle) + vector.y * Math.cos(angle),\n\t\t);\n\t}\n\n\t/**\n\t * Returns the normalized form of the given vector\n\t */\n\tpublic static normalize(vector: Vector): Vector {\n\t\tconst length = vector.length();\n\t\treturn new Vector(vector.x / length, vector.y / length);\n\t}\n\n\tconstructor(\n\t\tpublic x: number,\n\t\tpublic y: number,\n\t) {}\n\n\tpublic length(): number {\n\t\treturn Math.sqrt(this.x * this.x + this.y * this.y);\n\t}\n}\n\nfunction drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {\n\tif (points.length === 0) {\n\t\treturn;\n\t}\n\n\tcontext.beginPath();\n\t// Move to the first point\n\tcontext.moveTo(points[0].x, points[0].y);\n\n\t// Draw the rest of the segments\n\tfor (let i = 1; i < points.length; i++) {\n\t\tcontext.lineTo(points[i].x, points[i].y);\n\t}\n\n\t// And then close the shape\n\tcontext.lineTo(points[0].x, points[0].y);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawCircle(context: CanvasRenderingContext2D, center: IPoint, radius: number) {\n\tcontext.beginPath();\n\tcontext.moveTo(center.x, center.y);\n\tcontext.arc(center.x, center.y, radius, 0, Math.PI * 2);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawShapes(\n\tcontext: CanvasRenderingContext2D,\n\tstartPoint: IInkPoint,\n\tendPoint: IInkPoint,\n\tpen: IPen,\n): void {\n\tconst dirVector = new Vector(endPoint.x - startPoint.x, endPoint.y - startPoint.y);\n\tconst len = dirVector.length();\n\n\tconst widthAtStart = pen.thickness * startPoint.pressure;\n\tconst widthAtEnd = pen.thickness * endPoint.pressure;\n\n\tif (len + Math.min(widthAtStart, widthAtEnd) > Math.max(widthAtStart, widthAtEnd)) {\n\t\t// Circles don't completely overlap, need a trapezoid\n\t\tconst normalizedLateralVector = new Vector(-dirVector.y / len, dirVector.x / len);\n\n\t\tconst trapezoidP0 = {\n\t\t\tx: startPoint.x + widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y + widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP1 = {\n\t\t\tx: startPoint.x - widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y - widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP2 = {\n\t\t\tx: endPoint.x - widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y - widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP3 = {\n\t\t\tx: endPoint.x + widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y + widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\n\t\tdrawPolygon(context, [trapezoidP0, trapezoidP1, trapezoidP2, trapezoidP3]);\n\t}\n\n\t// End circle\n\t// TODO should only draw if not eclipsed by the previous circle, be careful about single-point\n\tdrawCircle(context, { x: endPoint.x, y: endPoint.y }, widthAtEnd);\n}\n\n/**\n * @internal\n */\nexport class InkCanvas {\n\tprivate readonly context: CanvasRenderingContext2D;\n\tprivate readonly localActiveStrokeMap: Map<number, string> = new Map();\n\tprivate readonly currentPen: IPen;\n\n\tconstructor(\n\t\tprivate readonly canvas: HTMLCanvasElement,\n\t\tprivate readonly model: IInk,\n\t) {\n\t\tthis.model.on(\"clear\", this.redraw.bind(this));\n\t\tthis.model.on(\"stylus\", this.handleStylus.bind(this));\n\t\tthis.canvas.style.touchAction = \"none\";\n\n\t\tthis.canvas.addEventListener(\"pointerdown\", this.handlePointerDown.bind(this));\n\t\tthis.canvas.addEventListener(\"pointermove\", this.handlePointerMove.bind(this));\n\t\tthis.canvas.addEventListener(\"pointerup\", this.handlePointerUp.bind(this));\n\n\t\tconst context = this.canvas.getContext(\"2d\");\n\t\tif (context === null) {\n\t\t\tthrow new Error(\"InkCanvas requires a canvas with 2d rendering context\");\n\t\t}\n\t\tthis.context = context;\n\n\t\tthis.currentPen = {\n\t\t\tcolor: { r: 0, g: 161, b: 241, a: 0 },\n\t\t\tthickness: 7,\n\t\t};\n\n\t\tthis.sizeCanvasBackingStore();\n\t}\n\n\tpublic setPenColor(color: IColor) {\n\t\tthis.currentPen.color = color;\n\t}\n\n\tpublic replay() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\n\t\t// Time of the first operation in stroke 0 is our starting time\n\t\tconst startTime = strokes[0].points[0].time;\n\t\tfor (const stroke of strokes) {\n\t\t\tthis.animateStroke(stroke, 0, startTime);\n\t\t}\n\t}\n\n\tpublic clear() {\n\t\tthis.model.clear();\n\t\tthis.redraw();\n\t}\n\n\tpublic sizeCanvasBackingStore() {\n\t\tconst canvasBoundingClientRect = this.canvas.getBoundingClientRect();\n\t\t// Scale the canvas size to match the physical pixel to avoid blurriness\n\t\tconst scale = window.devicePixelRatio;\n\t\tthis.canvas.width = Math.floor(canvasBoundingClientRect.width * scale);\n\t\tthis.canvas.height = Math.floor(canvasBoundingClientRect.height * scale);\n\t\t// Scale the context to bring back coordinate system in CSS pixels\n\t\tthis.context.setTransform(1, 0, 0, 1, 0, 0);\n\t\tthis.context.scale(scale, scale);\n\n\t\tthis.redraw();\n\t}\n\n\tprivate handlePointerDown(evt: PointerEvent) {\n\t\t// We will accept pen down or mouse left down as the start of a stroke.\n\t\tif (evt.pointerType === \"pen\" || (evt.pointerType === \"mouse\" && evt.button === 0)) {\n\t\t\tconst strokeId = this.model.createStroke(this.currentPen).id;\n\t\t\tthis.localActiveStrokeMap.set(evt.pointerId, strokeId);\n\n\t\t\tthis.appendPointerEventToStroke(evt);\n\n\t\t\tevt.preventDefault();\n\t\t}\n\t}\n\n\tprivate handlePointerMove(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tconst evts = (evt as any)?.getCoalescedEvents() ?? ([evt] as PointerEvent[]);\n\t\t\tfor (const e of evts) {\n\t\t\t\tthis.appendPointerEventToStroke(e);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handlePointerUp(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tthis.appendPointerEventToStroke(evt);\n\t\t\tthis.localActiveStrokeMap.delete(evt.pointerId);\n\t\t}\n\t}\n\n\tprivate appendPointerEventToStroke(evt: PointerEvent) {\n\t\tconst strokeId = this.localActiveStrokeMap.get(evt.pointerId);\n\t\tif (strokeId === undefined) {\n\t\t\tthrow new Error(\"Unexpected pointer ID trying to append to stroke\");\n\t\t}\n\t\tconst inkPt = {\n\t\t\tx: evt.offsetX,\n\t\t\ty: evt.offsetY,\n\t\t\ttime: Date.now(),\n\t\t\tpressure: evt.pressure,\n\t\t};\n\t\tthis.model.appendPointToStroke(inkPt, strokeId);\n\t}\n\n\tprivate animateStroke(stroke: IInkStroke, operationIndex: number, startTime: number) {\n\t\tif (operationIndex >= stroke.points.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Draw the requested stroke\n\t\tconst current = stroke.points[operationIndex];\n\t\tconst previous = stroke.points[Math.max(0, operationIndex - 1)];\n\t\tconst time =\n\t\t\toperationIndex === 0 ? current.time - startTime : current.time - previous.time;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\tthis.animateStroke(stroke, operationIndex + 1, startTime);\n\t\t}, time);\n\t}\n\n\t/**\n\t * Clears the canvas\n\t */\n\tprivate clearCanvas() {\n\t\tthis.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tprivate redraw() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\t\tfor (const stroke of strokes) {\n\t\t\tlet previous = stroke.points[0];\n\t\t\tfor (const current of stroke.points) {\n\t\t\t\t// For the down, current === previous === stroke.operations[0]\n\t\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\t\tprevious = current;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate drawStrokeSegment(pen: IPen, current: IInkPoint, previous: IInkPoint) {\n\t\t// TODO Consider save/restore context\n\t\t// TODO Consider half-pixel offset\n\t\tthis.context.fillStyle = `rgb(${pen.color.r}, ${pen.color.g}, ${pen.color.b})`;\n\t\tdrawShapes(this.context, previous, current, pen);\n\t}\n\n\tprivate handleStylus(operation: IStylusOperation) {\n\t\t// Render the dirty stroke\n\t\tconst dirtyStrokeId = operation.id;\n\t\tconst stroke = this.model.getStroke(dirtyStrokeId);\n\t\t// If this is the only point in the stroke, we'll use it for both the start and end of the segment\n\t\tconst prevPoint =\n\t\t\tstroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];\n\t\tthis.drawStrokeSegment(stroke.pen, prevPoint, operation.point);\n\t}\n}\n"]}
+{"version":3,"file":"inkCanvas.js","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IColor, IInk, IInkPoint, IInkStroke, IPen, IStylusOperation } from \"./interfaces.js\";\n\ninterface IPoint {\n\tx: number;\n\ty: number;\n}\n\nclass Vector {\n\t/**\n\t * Returns the vector resulting from rotating vector by angle\n\t */\n\tpublic static rotate(vector: Vector, angle: number): Vector {\n\t\treturn new Vector(\n\t\t\tvector.x * Math.cos(angle) - vector.y * Math.sin(angle),\n\t\t\tvector.x * Math.sin(angle) + vector.y * Math.cos(angle),\n\t\t);\n\t}\n\n\t/**\n\t * Returns the normalized form of the given vector\n\t */\n\tpublic static normalize(vector: Vector): Vector {\n\t\tconst length = vector.length();\n\t\treturn new Vector(vector.x / length, vector.y / length);\n\t}\n\n\tconstructor(\n\t\tpublic x: number,\n\t\tpublic y: number,\n\t) {}\n\n\tpublic length(): number {\n\t\treturn Math.sqrt(this.x * this.x + this.y * this.y);\n\t}\n}\n\nfunction drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {\n\tconst firstPoint = points[0];\n\tif (firstPoint === undefined) {\n\t\treturn;\n\t}\n\n\tcontext.beginPath();\n\t// Move to the first point\n\tcontext.moveTo(firstPoint.x, firstPoint.y);\n\n\t// Draw the rest of the segments\n\tfor (let i = 1; i < points.length; i++) {\n\t\t// Non null asserting, this must exist because the we are iterating through the length of points\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\tcontext.lineTo(points[i]!.x, points[i]!.y);\n\t}\n\n\t// And then close the shape\n\tcontext.lineTo(firstPoint.x, firstPoint.y);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawCircle(context: CanvasRenderingContext2D, center: IPoint, radius: number) {\n\tcontext.beginPath();\n\tcontext.moveTo(center.x, center.y);\n\tcontext.arc(center.x, center.y, radius, 0, Math.PI * 2);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawShapes(\n\tcontext: CanvasRenderingContext2D,\n\tstartPoint: IInkPoint,\n\tendPoint: IInkPoint,\n\tpen: IPen,\n): void {\n\tconst dirVector = new Vector(endPoint.x - startPoint.x, endPoint.y - startPoint.y);\n\tconst len = dirVector.length();\n\n\tconst widthAtStart = pen.thickness * startPoint.pressure;\n\tconst widthAtEnd = pen.thickness * endPoint.pressure;\n\n\tif (len + Math.min(widthAtStart, widthAtEnd) > Math.max(widthAtStart, widthAtEnd)) {\n\t\t// Circles don't completely overlap, need a trapezoid\n\t\tconst normalizedLateralVector = new Vector(-dirVector.y / len, dirVector.x / len);\n\n\t\tconst trapezoidP0 = {\n\t\t\tx: startPoint.x + widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y + widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP1 = {\n\t\t\tx: startPoint.x - widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y - widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP2 = {\n\t\t\tx: endPoint.x - widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y - widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP3 = {\n\t\t\tx: endPoint.x + widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y + widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\n\t\tdrawPolygon(context, [trapezoidP0, trapezoidP1, trapezoidP2, trapezoidP3]);\n\t}\n\n\t// End circle\n\t// TODO should only draw if not eclipsed by the previous circle, be careful about single-point\n\tdrawCircle(context, { x: endPoint.x, y: endPoint.y }, widthAtEnd);\n}\n\n/**\n * @internal\n */\nexport class InkCanvas {\n\tprivate readonly context: CanvasRenderingContext2D;\n\tprivate readonly localActiveStrokeMap: Map<number, string> = new Map();\n\tprivate readonly currentPen: IPen;\n\n\tconstructor(\n\t\tprivate readonly canvas: HTMLCanvasElement,\n\t\tprivate readonly model: IInk,\n\t) {\n\t\tthis.model.on(\"clear\", this.redraw.bind(this));\n\t\tthis.model.on(\"stylus\", this.handleStylus.bind(this));\n\t\tthis.canvas.style.touchAction = \"none\";\n\n\t\tthis.canvas.addEventListener(\"pointerdown\", this.handlePointerDown.bind(this));\n\t\tthis.canvas.addEventListener(\"pointermove\", this.handlePointerMove.bind(this));\n\t\tthis.canvas.addEventListener(\"pointerup\", this.handlePointerUp.bind(this));\n\n\t\tconst context = this.canvas.getContext(\"2d\");\n\t\tif (context === null) {\n\t\t\tthrow new Error(\"InkCanvas requires a canvas with 2d rendering context\");\n\t\t}\n\t\tthis.context = context;\n\n\t\tthis.currentPen = {\n\t\t\tcolor: { r: 0, g: 161, b: 241, a: 0 },\n\t\t\tthickness: 7,\n\t\t};\n\n\t\tthis.sizeCanvasBackingStore();\n\t}\n\n\tpublic setPenColor(color: IColor) {\n\t\tthis.currentPen.color = color;\n\t}\n\n\tpublic replay() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\n\t\t// Time of the first operation in stroke 0 is our starting time\n\t\tconst startTime = strokes[0]?.points[0]?.time;\n\t\tif (startTime === undefined) {\n\t\t\tthrow new Error(\"Couldn't get start time\");\n\t\t}\n\t\tfor (const stroke of strokes) {\n\t\t\tthis.animateStroke(stroke, 0, startTime);\n\t\t}\n\t}\n\n\tpublic clear() {\n\t\tthis.model.clear();\n\t\tthis.redraw();\n\t}\n\n\tpublic sizeCanvasBackingStore() {\n\t\tconst canvasBoundingClientRect = this.canvas.getBoundingClientRect();\n\t\t// Scale the canvas size to match the physical pixel to avoid blurriness\n\t\tconst scale = window.devicePixelRatio;\n\t\tthis.canvas.width = Math.floor(canvasBoundingClientRect.width * scale);\n\t\tthis.canvas.height = Math.floor(canvasBoundingClientRect.height * scale);\n\t\t// Scale the context to bring back coordinate system in CSS pixels\n\t\tthis.context.setTransform(1, 0, 0, 1, 0, 0);\n\t\tthis.context.scale(scale, scale);\n\n\t\tthis.redraw();\n\t}\n\n\tprivate handlePointerDown(evt: PointerEvent) {\n\t\t// We will accept pen down or mouse left down as the start of a stroke.\n\t\tif (evt.pointerType === \"pen\" || (evt.pointerType === \"mouse\" && evt.button === 0)) {\n\t\t\tconst strokeId = this.model.createStroke(this.currentPen).id;\n\t\t\tthis.localActiveStrokeMap.set(evt.pointerId, strokeId);\n\n\t\t\tthis.appendPointerEventToStroke(evt);\n\n\t\t\tevt.preventDefault();\n\t\t}\n\t}\n\n\tprivate handlePointerMove(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tconst evts = (evt as any)?.getCoalescedEvents() ?? ([evt] as PointerEvent[]);\n\t\t\tfor (const e of evts) {\n\t\t\t\tthis.appendPointerEventToStroke(e);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handlePointerUp(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tthis.appendPointerEventToStroke(evt);\n\t\t\tthis.localActiveStrokeMap.delete(evt.pointerId);\n\t\t}\n\t}\n\n\tprivate appendPointerEventToStroke(evt: PointerEvent) {\n\t\tconst strokeId = this.localActiveStrokeMap.get(evt.pointerId);\n\t\tif (strokeId === undefined) {\n\t\t\tthrow new Error(\"Unexpected pointer ID trying to append to stroke\");\n\t\t}\n\t\tconst inkPt = {\n\t\t\tx: evt.offsetX,\n\t\t\ty: evt.offsetY,\n\t\t\ttime: Date.now(),\n\t\t\tpressure: evt.pressure,\n\t\t};\n\t\tthis.model.appendPointToStroke(inkPt, strokeId);\n\t}\n\n\tprivate animateStroke(stroke: IInkStroke, operationIndex: number, startTime: number) {\n\t\tif (operationIndex >= stroke.points.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Draw the requested stroke\n\t\t// Non null asserting, this must exist because the operationIndex must be less than the length of stroke.points\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\tconst current = stroke.points[operationIndex]!;\n\t\t// Non null asserting, this must exist because its either the first index or operationIndex minus one which is less than the length of stroke.points\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\tconst previous = stroke.points[Math.max(0, operationIndex - 1)]!;\n\t\tconst time =\n\t\t\toperationIndex === 0 ? current.time - startTime : current.time - previous.time;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\tthis.animateStroke(stroke, operationIndex + 1, startTime);\n\t\t}, time);\n\t}\n\n\t/**\n\t * Clears the canvas\n\t */\n\tprivate clearCanvas() {\n\t\tthis.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tprivate redraw() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\t\tfor (const stroke of strokes) {\n\t\t\t// Non null asserting since previous would not be used if stroke.points is empty\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\tlet previous = stroke.points[0]!;\n\t\t\tfor (const current of stroke.points) {\n\t\t\t\t// For the down, current === previous === stroke.operations[0]\n\t\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\t\tprevious = current;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate drawStrokeSegment(pen: IPen, current: IInkPoint, previous: IInkPoint) {\n\t\t// TODO Consider save/restore context\n\t\t// TODO Consider half-pixel offset\n\t\tthis.context.fillStyle = `rgb(${pen.color.r}, ${pen.color.g}, ${pen.color.b})`;\n\t\tdrawShapes(this.context, previous, current, pen);\n\t}\n\n\tprivate handleStylus(operation: IStylusOperation) {\n\t\t// Render the dirty stroke\n\t\tconst dirtyStrokeId = operation.id;\n\t\tconst stroke = this.model.getStroke(dirtyStrokeId);\n\t\t// If this is the only point in the stroke, we'll use it for both the start and end of the segment\n\t\tconst prevPoint =\n\t\t\t// Non null asserting, this must exist its within the length of stroke.points\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\tstroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)]!;\n\t\tthis.drawStrokeSegment(stroke.pen, prevPoint, operation.point);\n\t}\n}\n"]}

package/dist/packageVersion.d.ts

@@ -5,5 +5,5 @@
  * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY
  */
 export declare const pkgName = "@fluid-experimental/ink";
-export declare const pkgVersion = "2.1.0-276985";
+export declare const pkgVersion = "2.1.0-281041";
 //# sourceMappingURL=packageVersion.d.ts.map

package/dist/packageVersion.js

@@ -8,5 +8,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pkgVersion = exports.pkgName = void 0;
 exports.pkgName = "@fluid-experimental/ink";
-exports.pkgVersion = "2.1.0-276985";
+exports.pkgVersion = "2.1.0-281041";
 //# sourceMappingURL=packageVersion.js.map

package/dist/packageVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"packageVersion.js","sourceRoot":"","sources":["../src/packageVersion.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAEU,QAAA,OAAO,GAAG,yBAAyB,CAAC;AACpC,QAAA,UAAU,GAAG,cAAc,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n *\n * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY\n */\n\nexport const pkgName = \"@fluid-experimental/ink\";\nexport const pkgVersion = \"2.1.0-276985\";\n"]}
+{"version":3,"file":"packageVersion.js","sourceRoot":"","sources":["../src/packageVersion.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAEU,QAAA,OAAO,GAAG,yBAAyB,CAAC;AACpC,QAAA,UAAU,GAAG,cAAc,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n *\n * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY\n */\n\nexport const pkgName = \"@fluid-experimental/ink\";\nexport const pkgVersion = \"2.1.0-281041\";\n"]}

package/dist/snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACvC;AAED;;GAEG;AACH,qBAAa,OAAO;IACnB;;OAEG;IACH,OAAO,CAAC,OAAO,CAAe;IAE9B;;OAEG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C;;;OAGG;gBACS,QAAQ,CAAC,EAAE,gBAAgB;IAKvC;;OAEG;IACI,UAAU,IAAI,UAAU,EAAE;IAIjC;;OAEG;IACI,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU;IAIzC;;OAEG;IACI,KAAK,IAAI,IAAI;IAKpB;;;OAGG;IACI,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAK1C;;;OAGG;IACI,eAAe,IAAI,gBAAgB;CAM1C"}
+{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACvC;AAED;;GAEG;AACH,qBAAa,OAAO;IACnB;;OAEG;IACH,OAAO,CAAC,OAAO,CAAe;IAE9B;;OAEG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C;;;OAGG;gBACS,QAAQ,CAAC,EAAE,gBAAgB;IAKvC;;OAEG;IACI,UAAU,IAAI,UAAU,EAAE;IAIjC;;OAEG;IACI,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU;IAMzC;;OAEG;IACI,KAAK,IAAI,IAAI;IAKpB;;;OAGG;IACI,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAK1C;;;OAGG;IACI,eAAe,IAAI,gBAAgB;CAM1C"}

package/dist/snapshot.js

@@ -27,6 +27,8 @@ class InkData {
      * {@inheritDoc IInk.getStroke}
      */
     getStroke(key) {
+        // Non null asserting, it should be okay that a bad key results in an error being thrown
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return this.strokes[this.strokeIndex[key]];
     }
     /**

package/dist/snapshot.js.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot.js","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAoBH;;GAEG;AACH,MAAa,OAAO;IAWnB;;;OAGG;IACH,YAAY,QAA2B;QACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,WAAW,IAAI,EAAE,CAAC;IAChD,CAAC;IAED;;OAEG;IACI,UAAU;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED;;OAEG;IACI,SAAS,CAAC,GAAW;QAC3B,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED;;OAEG;IACI,KAAK;QACX,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACvB,CAAC;IAED;;;OAGG;IACI,SAAS,CAAC,MAAkB;QAClC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAED;;;OAGG;IACI,eAAe;QACrB,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;IACH,CAAC;CACD;AA7DD,0BA6DC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IInkStroke } from \"./interfaces.js\";\n\n/**\n * Ink snapshot interface.\n */\nexport interface ISerializableInk {\n\t/**\n\t * Collection of ink strokes.\n\t */\n\tstrokes: IInkStroke[];\n\n\t/**\n\t * Stores a mapping from the provided key to its index in strokes. Since\n\t * ISerializableInk is serialized we need to use an index.\n\t */\n\tstrokeIndex: { [key: string]: number };\n}\n\n/**\n * Maintains a live record of the data that can be used for snapshotting.\n */\nexport class InkData {\n\t/**\n\t * {@inheritDoc ISerializableInk.strokes}\n\t */\n\tprivate strokes: IInkStroke[];\n\n\t/**\n\t * {@inheritDoc ISerializableInk.strokeIndex}\n\t */\n\tprivate strokeIndex: { [key: string]: number };\n\n\t/**\n\t * Construct a new InkData.\n\t * @param snapshot - Existing data to initialize with\n\t */\n\tconstructor(snapshot?: ISerializableInk) {\n\t\tthis.strokes = snapshot?.strokes ?? [];\n\t\tthis.strokeIndex = snapshot?.strokeIndex ?? {};\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStrokes}\n\t */\n\tpublic getStrokes(): IInkStroke[] {\n\t\treturn this.strokes;\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStroke}\n\t */\n\tpublic getStroke(key: string): IInkStroke {\n\t\treturn this.strokes[this.strokeIndex[key]];\n\t}\n\n\t/**\n\t * Clear all stored data.\n\t */\n\tpublic clear(): void {\n\t\tthis.strokes = [];\n\t\tthis.strokeIndex = {};\n\t}\n\n\t/**\n\t * Add the given stroke to the stored data.\n\t * @param stroke - The stroke to add\n\t */\n\tpublic addStroke(stroke: IInkStroke): void {\n\t\tthis.strokes.push(stroke);\n\t\tthis.strokeIndex[stroke.id] = this.strokes.length - 1;\n\t}\n\n\t/**\n\t * Get a JSON-compatible representation of the stored data.\n\t * @returns The JSON-compatible object\n\t */\n\tpublic getSerializable(): ISerializableInk {\n\t\treturn {\n\t\t\tstrokes: this.strokes,\n\t\t\tstrokeIndex: this.strokeIndex,\n\t\t};\n\t}\n}\n"]}
+{"version":3,"file":"snapshot.js","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAoBH;;GAEG;AACH,MAAa,OAAO;IAWnB;;;OAGG;IACH,YAAY,QAA2B;QACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,WAAW,IAAI,EAAE,CAAC;IAChD,CAAC;IAED;;OAEG;IACI,UAAU;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED;;OAEG;IACI,SAAS,CAAC,GAAW;QAC3B,wFAAwF;QACxF,oEAAoE;QACpE,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAE,CAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACI,KAAK;QACX,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACvB,CAAC;IAED;;;OAGG;IACI,SAAS,CAAC,MAAkB;QAClC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAED;;;OAGG;IACI,eAAe;QACrB,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;IACH,CAAC;CACD;AA/DD,0BA+DC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IInkStroke } from \"./interfaces.js\";\n\n/**\n * Ink snapshot interface.\n */\nexport interface ISerializableInk {\n\t/**\n\t * Collection of ink strokes.\n\t */\n\tstrokes: IInkStroke[];\n\n\t/**\n\t * Stores a mapping from the provided key to its index in strokes. Since\n\t * ISerializableInk is serialized we need to use an index.\n\t */\n\tstrokeIndex: { [key: string]: number };\n}\n\n/**\n * Maintains a live record of the data that can be used for snapshotting.\n */\nexport class InkData {\n\t/**\n\t * {@inheritDoc ISerializableInk.strokes}\n\t */\n\tprivate strokes: IInkStroke[];\n\n\t/**\n\t * {@inheritDoc ISerializableInk.strokeIndex}\n\t */\n\tprivate strokeIndex: { [key: string]: number };\n\n\t/**\n\t * Construct a new InkData.\n\t * @param snapshot - Existing data to initialize with\n\t */\n\tconstructor(snapshot?: ISerializableInk) {\n\t\tthis.strokes = snapshot?.strokes ?? [];\n\t\tthis.strokeIndex = snapshot?.strokeIndex ?? {};\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStrokes}\n\t */\n\tpublic getStrokes(): IInkStroke[] {\n\t\treturn this.strokes;\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStroke}\n\t */\n\tpublic getStroke(key: string): IInkStroke {\n\t\t// Non null asserting, it should be okay that a bad key results in an error being thrown\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\treturn this.strokes[this.strokeIndex[key]!]!;\n\t}\n\n\t/**\n\t * Clear all stored data.\n\t */\n\tpublic clear(): void {\n\t\tthis.strokes = [];\n\t\tthis.strokeIndex = {};\n\t}\n\n\t/**\n\t * Add the given stroke to the stored data.\n\t * @param stroke - The stroke to add\n\t */\n\tpublic addStroke(stroke: IInkStroke): void {\n\t\tthis.strokes.push(stroke);\n\t\tthis.strokeIndex[stroke.id] = this.strokes.length - 1;\n\t}\n\n\t/**\n\t * Get a JSON-compatible representation of the stored data.\n\t * @returns The JSON-compatible object\n\t */\n\tpublic getSerializable(): ISerializableInk {\n\t\treturn {\n\t\t\tstrokes: this.strokes,\n\t\t\tstrokeIndex: this.strokeIndex,\n\t\t};\n\t}\n}\n"]}

package/lib/inkCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inkCanvas.d.ts","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAiD,MAAM,iBAAiB,CAAC;AAyG9F;;GAEG;AACH,qBAAa,SAAS;IAMpB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK;IANvB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAkC;IACvE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAO;gBAGhB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,IAAI;IAwBtB,WAAW,CAAC,KAAK,EAAE,MAAM;IAIzB,MAAM;IAYN,KAAK;IAKL,sBAAsB;IAa7B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,0BAA0B;IAclC,OAAO,CAAC,aAAa;IAiBrB;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;CASpB"}
+{"version":3,"file":"inkCanvas.d.ts","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAiD,MAAM,iBAAiB,CAAC;AA4G9F;;GAEG;AACH,qBAAa,SAAS;IAMpB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,KAAK;IANvB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAkC;IACvE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAO;gBAGhB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,IAAI;IAwBtB,WAAW,CAAC,KAAK,EAAE,MAAM;IAIzB,MAAM;IAeN,KAAK;IAKL,sBAAsB;IAa7B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,0BAA0B;IAclC,OAAO,CAAC,aAAa;IAqBrB;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;CAWpB"}

package/lib/inkCanvas.js

@@ -25,18 +25,21 @@ class Vector {
     }
 }
 function drawPolygon(context, points) {
-    if (points.length === 0) {
+    const firstPoint = points[0];
+    if (firstPoint === undefined) {
         return;
     }
     context.beginPath();
     // Move to the first point
-    context.moveTo(points[0].x, points[0].y);
+    context.moveTo(firstPoint.x, firstPoint.y);
     // Draw the rest of the segments
     for (let i = 1; i < points.length; i++) {
+        // Non null asserting, this must exist because the we are iterating through the length of points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         context.lineTo(points[i].x, points[i].y);
     }
     // And then close the shape
-    context.lineTo(points[0].x, points[0].y);
+    context.lineTo(firstPoint.x, firstPoint.y);
     context.closePath();
     context.fill();
 }
@@ -109,7 +112,10 @@ export class InkCanvas {
         this.clearCanvas();
         const strokes = this.model.getStrokes();
         // Time of the first operation in stroke 0 is our starting time
-        const startTime = strokes[0].points[0].time;
+        const startTime = strokes[0]?.points[0]?.time;
+        if (startTime === undefined) {
+            throw new Error("Couldn't get start time");
+        }
         for (const stroke of strokes) {
             this.animateStroke(stroke, 0, startTime);
         }
@@ -170,7 +176,11 @@ export class InkCanvas {
             return;
         }
         // Draw the requested stroke
+        // Non null asserting, this must exist because the operationIndex must be less than the length of stroke.points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const current = stroke.points[operationIndex];
+        // Non null asserting, this must exist because its either the first index or operationIndex minus one which is less than the length of stroke.points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const previous = stroke.points[Math.max(0, operationIndex - 1)];
         const time = operationIndex === 0 ? current.time - startTime : current.time - previous.time;
         setTimeout(() => {
@@ -188,6 +198,8 @@ export class InkCanvas {
         this.clearCanvas();
         const strokes = this.model.getStrokes();
         for (const stroke of strokes) {
+            // Non null asserting since previous would not be used if stroke.points is empty
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             let previous = stroke.points[0];
             for (const current of stroke.points) {
                 // For the down, current === previous === stroke.operations[0]
@@ -207,7 +219,10 @@ export class InkCanvas {
         const dirtyStrokeId = operation.id;
         const stroke = this.model.getStroke(dirtyStrokeId);
         // If this is the only point in the stroke, we'll use it for both the start and end of the segment
-        const prevPoint = stroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];
+        const prevPoint = 
+        // Non null asserting, this must exist its within the length of stroke.points
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        stroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];
         this.drawStrokeSegment(stroke.pen, prevPoint, operation.point);
     }
 }

package/lib/inkCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"inkCanvas.js","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IColor, IInk, IInkPoint, IInkStroke, IPen, IStylusOperation } from \"./interfaces.js\";\n\ninterface IPoint {\n\tx: number;\n\ty: number;\n}\n\nclass Vector {\n\t/**\n\t * Returns the vector resulting from rotating vector by angle\n\t */\n\tpublic static rotate(vector: Vector, angle: number): Vector {\n\t\treturn new Vector(\n\t\t\tvector.x * Math.cos(angle) - vector.y * Math.sin(angle),\n\t\t\tvector.x * Math.sin(angle) + vector.y * Math.cos(angle),\n\t\t);\n\t}\n\n\t/**\n\t * Returns the normalized form of the given vector\n\t */\n\tpublic static normalize(vector: Vector): Vector {\n\t\tconst length = vector.length();\n\t\treturn new Vector(vector.x / length, vector.y / length);\n\t}\n\n\tconstructor(\n\t\tpublic x: number,\n\t\tpublic y: number,\n\t) {}\n\n\tpublic length(): number {\n\t\treturn Math.sqrt(this.x * this.x + this.y * this.y);\n\t}\n}\n\nfunction drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {\n\tif (points.length === 0) {\n\t\treturn;\n\t}\n\n\tcontext.beginPath();\n\t// Move to the first point\n\tcontext.moveTo(points[0].x, points[0].y);\n\n\t// Draw the rest of the segments\n\tfor (let i = 1; i < points.length; i++) {\n\t\tcontext.lineTo(points[i].x, points[i].y);\n\t}\n\n\t// And then close the shape\n\tcontext.lineTo(points[0].x, points[0].y);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawCircle(context: CanvasRenderingContext2D, center: IPoint, radius: number) {\n\tcontext.beginPath();\n\tcontext.moveTo(center.x, center.y);\n\tcontext.arc(center.x, center.y, radius, 0, Math.PI * 2);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawShapes(\n\tcontext: CanvasRenderingContext2D,\n\tstartPoint: IInkPoint,\n\tendPoint: IInkPoint,\n\tpen: IPen,\n): void {\n\tconst dirVector = new Vector(endPoint.x - startPoint.x, endPoint.y - startPoint.y);\n\tconst len = dirVector.length();\n\n\tconst widthAtStart = pen.thickness * startPoint.pressure;\n\tconst widthAtEnd = pen.thickness * endPoint.pressure;\n\n\tif (len + Math.min(widthAtStart, widthAtEnd) > Math.max(widthAtStart, widthAtEnd)) {\n\t\t// Circles don't completely overlap, need a trapezoid\n\t\tconst normalizedLateralVector = new Vector(-dirVector.y / len, dirVector.x / len);\n\n\t\tconst trapezoidP0 = {\n\t\t\tx: startPoint.x + widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y + widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP1 = {\n\t\t\tx: startPoint.x - widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y - widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP2 = {\n\t\t\tx: endPoint.x - widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y - widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP3 = {\n\t\t\tx: endPoint.x + widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y + widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\n\t\tdrawPolygon(context, [trapezoidP0, trapezoidP1, trapezoidP2, trapezoidP3]);\n\t}\n\n\t// End circle\n\t// TODO should only draw if not eclipsed by the previous circle, be careful about single-point\n\tdrawCircle(context, { x: endPoint.x, y: endPoint.y }, widthAtEnd);\n}\n\n/**\n * @internal\n */\nexport class InkCanvas {\n\tprivate readonly context: CanvasRenderingContext2D;\n\tprivate readonly localActiveStrokeMap: Map<number, string> = new Map();\n\tprivate readonly currentPen: IPen;\n\n\tconstructor(\n\t\tprivate readonly canvas: HTMLCanvasElement,\n\t\tprivate readonly model: IInk,\n\t) {\n\t\tthis.model.on(\"clear\", this.redraw.bind(this));\n\t\tthis.model.on(\"stylus\", this.handleStylus.bind(this));\n\t\tthis.canvas.style.touchAction = \"none\";\n\n\t\tthis.canvas.addEventListener(\"pointerdown\", this.handlePointerDown.bind(this));\n\t\tthis.canvas.addEventListener(\"pointermove\", this.handlePointerMove.bind(this));\n\t\tthis.canvas.addEventListener(\"pointerup\", this.handlePointerUp.bind(this));\n\n\t\tconst context = this.canvas.getContext(\"2d\");\n\t\tif (context === null) {\n\t\t\tthrow new Error(\"InkCanvas requires a canvas with 2d rendering context\");\n\t\t}\n\t\tthis.context = context;\n\n\t\tthis.currentPen = {\n\t\t\tcolor: { r: 0, g: 161, b: 241, a: 0 },\n\t\t\tthickness: 7,\n\t\t};\n\n\t\tthis.sizeCanvasBackingStore();\n\t}\n\n\tpublic setPenColor(color: IColor) {\n\t\tthis.currentPen.color = color;\n\t}\n\n\tpublic replay() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\n\t\t// Time of the first operation in stroke 0 is our starting time\n\t\tconst startTime = strokes[0].points[0].time;\n\t\tfor (const stroke of strokes) {\n\t\t\tthis.animateStroke(stroke, 0, startTime);\n\t\t}\n\t}\n\n\tpublic clear() {\n\t\tthis.model.clear();\n\t\tthis.redraw();\n\t}\n\n\tpublic sizeCanvasBackingStore() {\n\t\tconst canvasBoundingClientRect = this.canvas.getBoundingClientRect();\n\t\t// Scale the canvas size to match the physical pixel to avoid blurriness\n\t\tconst scale = window.devicePixelRatio;\n\t\tthis.canvas.width = Math.floor(canvasBoundingClientRect.width * scale);\n\t\tthis.canvas.height = Math.floor(canvasBoundingClientRect.height * scale);\n\t\t// Scale the context to bring back coordinate system in CSS pixels\n\t\tthis.context.setTransform(1, 0, 0, 1, 0, 0);\n\t\tthis.context.scale(scale, scale);\n\n\t\tthis.redraw();\n\t}\n\n\tprivate handlePointerDown(evt: PointerEvent) {\n\t\t// We will accept pen down or mouse left down as the start of a stroke.\n\t\tif (evt.pointerType === \"pen\" || (evt.pointerType === \"mouse\" && evt.button === 0)) {\n\t\t\tconst strokeId = this.model.createStroke(this.currentPen).id;\n\t\t\tthis.localActiveStrokeMap.set(evt.pointerId, strokeId);\n\n\t\t\tthis.appendPointerEventToStroke(evt);\n\n\t\t\tevt.preventDefault();\n\t\t}\n\t}\n\n\tprivate handlePointerMove(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tconst evts = (evt as any)?.getCoalescedEvents() ?? ([evt] as PointerEvent[]);\n\t\t\tfor (const e of evts) {\n\t\t\t\tthis.appendPointerEventToStroke(e);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handlePointerUp(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tthis.appendPointerEventToStroke(evt);\n\t\t\tthis.localActiveStrokeMap.delete(evt.pointerId);\n\t\t}\n\t}\n\n\tprivate appendPointerEventToStroke(evt: PointerEvent) {\n\t\tconst strokeId = this.localActiveStrokeMap.get(evt.pointerId);\n\t\tif (strokeId === undefined) {\n\t\t\tthrow new Error(\"Unexpected pointer ID trying to append to stroke\");\n\t\t}\n\t\tconst inkPt = {\n\t\t\tx: evt.offsetX,\n\t\t\ty: evt.offsetY,\n\t\t\ttime: Date.now(),\n\t\t\tpressure: evt.pressure,\n\t\t};\n\t\tthis.model.appendPointToStroke(inkPt, strokeId);\n\t}\n\n\tprivate animateStroke(stroke: IInkStroke, operationIndex: number, startTime: number) {\n\t\tif (operationIndex >= stroke.points.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Draw the requested stroke\n\t\tconst current = stroke.points[operationIndex];\n\t\tconst previous = stroke.points[Math.max(0, operationIndex - 1)];\n\t\tconst time =\n\t\t\toperationIndex === 0 ? current.time - startTime : current.time - previous.time;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\tthis.animateStroke(stroke, operationIndex + 1, startTime);\n\t\t}, time);\n\t}\n\n\t/**\n\t * Clears the canvas\n\t */\n\tprivate clearCanvas() {\n\t\tthis.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tprivate redraw() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\t\tfor (const stroke of strokes) {\n\t\t\tlet previous = stroke.points[0];\n\t\t\tfor (const current of stroke.points) {\n\t\t\t\t// For the down, current === previous === stroke.operations[0]\n\t\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\t\tprevious = current;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate drawStrokeSegment(pen: IPen, current: IInkPoint, previous: IInkPoint) {\n\t\t// TODO Consider save/restore context\n\t\t// TODO Consider half-pixel offset\n\t\tthis.context.fillStyle = `rgb(${pen.color.r}, ${pen.color.g}, ${pen.color.b})`;\n\t\tdrawShapes(this.context, previous, current, pen);\n\t}\n\n\tprivate handleStylus(operation: IStylusOperation) {\n\t\t// Render the dirty stroke\n\t\tconst dirtyStrokeId = operation.id;\n\t\tconst stroke = this.model.getStroke(dirtyStrokeId);\n\t\t// If this is the only point in the stroke, we'll use it for both the start and end of the segment\n\t\tconst prevPoint =\n\t\t\tstroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];\n\t\tthis.drawStrokeSegment(stroke.pen, prevPoint, operation.point);\n\t}\n}\n"]}
+{"version":3,"file":"inkCanvas.js","sourceRoot":"","sources":["../src/inkCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IColor, IInk, IInkPoint, IInkStroke, IPen, IStylusOperation } from \"./interfaces.js\";\n\ninterface IPoint {\n\tx: number;\n\ty: number;\n}\n\nclass Vector {\n\t/**\n\t * Returns the vector resulting from rotating vector by angle\n\t */\n\tpublic static rotate(vector: Vector, angle: number): Vector {\n\t\treturn new Vector(\n\t\t\tvector.x * Math.cos(angle) - vector.y * Math.sin(angle),\n\t\t\tvector.x * Math.sin(angle) + vector.y * Math.cos(angle),\n\t\t);\n\t}\n\n\t/**\n\t * Returns the normalized form of the given vector\n\t */\n\tpublic static normalize(vector: Vector): Vector {\n\t\tconst length = vector.length();\n\t\treturn new Vector(vector.x / length, vector.y / length);\n\t}\n\n\tconstructor(\n\t\tpublic x: number,\n\t\tpublic y: number,\n\t) {}\n\n\tpublic length(): number {\n\t\treturn Math.sqrt(this.x * this.x + this.y * this.y);\n\t}\n}\n\nfunction drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {\n\tconst firstPoint = points[0];\n\tif (firstPoint === undefined) {\n\t\treturn;\n\t}\n\n\tcontext.beginPath();\n\t// Move to the first point\n\tcontext.moveTo(firstPoint.x, firstPoint.y);\n\n\t// Draw the rest of the segments\n\tfor (let i = 1; i < points.length; i++) {\n\t\t// Non null asserting, this must exist because the we are iterating through the length of points\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\tcontext.lineTo(points[i]!.x, points[i]!.y);\n\t}\n\n\t// And then close the shape\n\tcontext.lineTo(firstPoint.x, firstPoint.y);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawCircle(context: CanvasRenderingContext2D, center: IPoint, radius: number) {\n\tcontext.beginPath();\n\tcontext.moveTo(center.x, center.y);\n\tcontext.arc(center.x, center.y, radius, 0, Math.PI * 2);\n\tcontext.closePath();\n\tcontext.fill();\n}\n\nfunction drawShapes(\n\tcontext: CanvasRenderingContext2D,\n\tstartPoint: IInkPoint,\n\tendPoint: IInkPoint,\n\tpen: IPen,\n): void {\n\tconst dirVector = new Vector(endPoint.x - startPoint.x, endPoint.y - startPoint.y);\n\tconst len = dirVector.length();\n\n\tconst widthAtStart = pen.thickness * startPoint.pressure;\n\tconst widthAtEnd = pen.thickness * endPoint.pressure;\n\n\tif (len + Math.min(widthAtStart, widthAtEnd) > Math.max(widthAtStart, widthAtEnd)) {\n\t\t// Circles don't completely overlap, need a trapezoid\n\t\tconst normalizedLateralVector = new Vector(-dirVector.y / len, dirVector.x / len);\n\n\t\tconst trapezoidP0 = {\n\t\t\tx: startPoint.x + widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y + widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP1 = {\n\t\t\tx: startPoint.x - widthAtStart * normalizedLateralVector.x,\n\t\t\ty: startPoint.y - widthAtStart * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP2 = {\n\t\t\tx: endPoint.x - widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y - widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\t\tconst trapezoidP3 = {\n\t\t\tx: endPoint.x + widthAtEnd * normalizedLateralVector.x,\n\t\t\ty: endPoint.y + widthAtEnd * normalizedLateralVector.y,\n\t\t};\n\n\t\tdrawPolygon(context, [trapezoidP0, trapezoidP1, trapezoidP2, trapezoidP3]);\n\t}\n\n\t// End circle\n\t// TODO should only draw if not eclipsed by the previous circle, be careful about single-point\n\tdrawCircle(context, { x: endPoint.x, y: endPoint.y }, widthAtEnd);\n}\n\n/**\n * @internal\n */\nexport class InkCanvas {\n\tprivate readonly context: CanvasRenderingContext2D;\n\tprivate readonly localActiveStrokeMap: Map<number, string> = new Map();\n\tprivate readonly currentPen: IPen;\n\n\tconstructor(\n\t\tprivate readonly canvas: HTMLCanvasElement,\n\t\tprivate readonly model: IInk,\n\t) {\n\t\tthis.model.on(\"clear\", this.redraw.bind(this));\n\t\tthis.model.on(\"stylus\", this.handleStylus.bind(this));\n\t\tthis.canvas.style.touchAction = \"none\";\n\n\t\tthis.canvas.addEventListener(\"pointerdown\", this.handlePointerDown.bind(this));\n\t\tthis.canvas.addEventListener(\"pointermove\", this.handlePointerMove.bind(this));\n\t\tthis.canvas.addEventListener(\"pointerup\", this.handlePointerUp.bind(this));\n\n\t\tconst context = this.canvas.getContext(\"2d\");\n\t\tif (context === null) {\n\t\t\tthrow new Error(\"InkCanvas requires a canvas with 2d rendering context\");\n\t\t}\n\t\tthis.context = context;\n\n\t\tthis.currentPen = {\n\t\t\tcolor: { r: 0, g: 161, b: 241, a: 0 },\n\t\t\tthickness: 7,\n\t\t};\n\n\t\tthis.sizeCanvasBackingStore();\n\t}\n\n\tpublic setPenColor(color: IColor) {\n\t\tthis.currentPen.color = color;\n\t}\n\n\tpublic replay() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\n\t\t// Time of the first operation in stroke 0 is our starting time\n\t\tconst startTime = strokes[0]?.points[0]?.time;\n\t\tif (startTime === undefined) {\n\t\t\tthrow new Error(\"Couldn't get start time\");\n\t\t}\n\t\tfor (const stroke of strokes) {\n\t\t\tthis.animateStroke(stroke, 0, startTime);\n\t\t}\n\t}\n\n\tpublic clear() {\n\t\tthis.model.clear();\n\t\tthis.redraw();\n\t}\n\n\tpublic sizeCanvasBackingStore() {\n\t\tconst canvasBoundingClientRect = this.canvas.getBoundingClientRect();\n\t\t// Scale the canvas size to match the physical pixel to avoid blurriness\n\t\tconst scale = window.devicePixelRatio;\n\t\tthis.canvas.width = Math.floor(canvasBoundingClientRect.width * scale);\n\t\tthis.canvas.height = Math.floor(canvasBoundingClientRect.height * scale);\n\t\t// Scale the context to bring back coordinate system in CSS pixels\n\t\tthis.context.setTransform(1, 0, 0, 1, 0, 0);\n\t\tthis.context.scale(scale, scale);\n\n\t\tthis.redraw();\n\t}\n\n\tprivate handlePointerDown(evt: PointerEvent) {\n\t\t// We will accept pen down or mouse left down as the start of a stroke.\n\t\tif (evt.pointerType === \"pen\" || (evt.pointerType === \"mouse\" && evt.button === 0)) {\n\t\t\tconst strokeId = this.model.createStroke(this.currentPen).id;\n\t\t\tthis.localActiveStrokeMap.set(evt.pointerId, strokeId);\n\n\t\t\tthis.appendPointerEventToStroke(evt);\n\n\t\t\tevt.preventDefault();\n\t\t}\n\t}\n\n\tprivate handlePointerMove(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tconst evts = (evt as any)?.getCoalescedEvents() ?? ([evt] as PointerEvent[]);\n\t\t\tfor (const e of evts) {\n\t\t\t\tthis.appendPointerEventToStroke(e);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate handlePointerUp(evt: PointerEvent) {\n\t\tif (this.localActiveStrokeMap.has(evt.pointerId)) {\n\t\t\tthis.appendPointerEventToStroke(evt);\n\t\t\tthis.localActiveStrokeMap.delete(evt.pointerId);\n\t\t}\n\t}\n\n\tprivate appendPointerEventToStroke(evt: PointerEvent) {\n\t\tconst strokeId = this.localActiveStrokeMap.get(evt.pointerId);\n\t\tif (strokeId === undefined) {\n\t\t\tthrow new Error(\"Unexpected pointer ID trying to append to stroke\");\n\t\t}\n\t\tconst inkPt = {\n\t\t\tx: evt.offsetX,\n\t\t\ty: evt.offsetY,\n\t\t\ttime: Date.now(),\n\t\t\tpressure: evt.pressure,\n\t\t};\n\t\tthis.model.appendPointToStroke(inkPt, strokeId);\n\t}\n\n\tprivate animateStroke(stroke: IInkStroke, operationIndex: number, startTime: number) {\n\t\tif (operationIndex >= stroke.points.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Draw the requested stroke\n\t\t// Non null asserting, this must exist because the operationIndex must be less than the length of stroke.points\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\tconst current = stroke.points[operationIndex]!;\n\t\t// Non null asserting, this must exist because its either the first index or operationIndex minus one which is less than the length of stroke.points\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\tconst previous = stroke.points[Math.max(0, operationIndex - 1)]!;\n\t\tconst time =\n\t\t\toperationIndex === 0 ? current.time - startTime : current.time - previous.time;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\tthis.animateStroke(stroke, operationIndex + 1, startTime);\n\t\t}, time);\n\t}\n\n\t/**\n\t * Clears the canvas\n\t */\n\tprivate clearCanvas() {\n\t\tthis.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\t}\n\n\tprivate redraw() {\n\t\tthis.clearCanvas();\n\n\t\tconst strokes = this.model.getStrokes();\n\t\tfor (const stroke of strokes) {\n\t\t\t// Non null asserting since previous would not be used if stroke.points is empty\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\tlet previous = stroke.points[0]!;\n\t\t\tfor (const current of stroke.points) {\n\t\t\t\t// For the down, current === previous === stroke.operations[0]\n\t\t\t\tthis.drawStrokeSegment(stroke.pen, current, previous);\n\t\t\t\tprevious = current;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate drawStrokeSegment(pen: IPen, current: IInkPoint, previous: IInkPoint) {\n\t\t// TODO Consider save/restore context\n\t\t// TODO Consider half-pixel offset\n\t\tthis.context.fillStyle = `rgb(${pen.color.r}, ${pen.color.g}, ${pen.color.b})`;\n\t\tdrawShapes(this.context, previous, current, pen);\n\t}\n\n\tprivate handleStylus(operation: IStylusOperation) {\n\t\t// Render the dirty stroke\n\t\tconst dirtyStrokeId = operation.id;\n\t\tconst stroke = this.model.getStroke(dirtyStrokeId);\n\t\t// If this is the only point in the stroke, we'll use it for both the start and end of the segment\n\t\tconst prevPoint =\n\t\t\t// Non null asserting, this must exist its within the length of stroke.points\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\tstroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)]!;\n\t\tthis.drawStrokeSegment(stroke.pen, prevPoint, operation.point);\n\t}\n}\n"]}

package/lib/packageVersion.d.ts

@@ -5,5 +5,5 @@
  * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY
  */
 export declare const pkgName = "@fluid-experimental/ink";
-export declare const pkgVersion = "2.1.0-276985";
+export declare const pkgVersion = "2.1.0-281041";
 //# sourceMappingURL=packageVersion.d.ts.map

package/lib/packageVersion.js

@@ -5,5 +5,5 @@
  * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY
  */
 export const pkgName = "@fluid-experimental/ink";
-export const pkgVersion = "2.1.0-276985";
+export const pkgVersion = "2.1.0-281041";
 //# sourceMappingURL=packageVersion.js.map

package/lib/packageVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"packageVersion.js","sourceRoot":"","sources":["../src/packageVersion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,yBAAyB,CAAC;AACjD,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n *\n * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY\n */\n\nexport const pkgName = \"@fluid-experimental/ink\";\nexport const pkgVersion = \"2.1.0-276985\";\n"]}
+{"version":3,"file":"packageVersion.js","sourceRoot":"","sources":["../src/packageVersion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,yBAAyB,CAAC;AACjD,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n *\n * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY\n */\n\nexport const pkgName = \"@fluid-experimental/ink\";\nexport const pkgVersion = \"2.1.0-281041\";\n"]}

package/lib/snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACvC;AAED;;GAEG;AACH,qBAAa,OAAO;IACnB;;OAEG;IACH,OAAO,CAAC,OAAO,CAAe;IAE9B;;OAEG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C;;;OAGG;gBACS,QAAQ,CAAC,EAAE,gBAAgB;IAKvC;;OAEG;IACI,UAAU,IAAI,UAAU,EAAE;IAIjC;;OAEG;IACI,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU;IAIzC;;OAEG;IACI,KAAK,IAAI,IAAI;IAKpB;;;OAGG;IACI,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAK1C;;;OAGG;IACI,eAAe,IAAI,gBAAgB;CAM1C"}
+{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACvC;AAED;;GAEG;AACH,qBAAa,OAAO;IACnB;;OAEG;IACH,OAAO,CAAC,OAAO,CAAe;IAE9B;;OAEG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C;;;OAGG;gBACS,QAAQ,CAAC,EAAE,gBAAgB;IAKvC;;OAEG;IACI,UAAU,IAAI,UAAU,EAAE;IAIjC;;OAEG;IACI,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU;IAMzC;;OAEG;IACI,KAAK,IAAI,IAAI;IAKpB;;;OAGG;IACI,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAK1C;;;OAGG;IACI,eAAe,IAAI,gBAAgB;CAM1C"}

package/lib/snapshot.js

@@ -24,6 +24,8 @@ export class InkData {
      * {@inheritDoc IInk.getStroke}
      */
     getStroke(key) {
+        // Non null asserting, it should be okay that a bad key results in an error being thrown
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return this.strokes[this.strokeIndex[key]];
     }
     /**

package/lib/snapshot.js.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot.js","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAoBH;;GAEG;AACH,MAAM,OAAO,OAAO;IAWnB;;;OAGG;IACH,YAAY,QAA2B;QACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,WAAW,IAAI,EAAE,CAAC;IAChD,CAAC;IAED;;OAEG;IACI,UAAU;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED;;OAEG;IACI,SAAS,CAAC,GAAW;QAC3B,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED;;OAEG;IACI,KAAK;QACX,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACvB,CAAC;IAED;;;OAGG;IACI,SAAS,CAAC,MAAkB;QAClC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAED;;;OAGG;IACI,eAAe;QACrB,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;IACH,CAAC;CACD","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IInkStroke } from \"./interfaces.js\";\n\n/**\n * Ink snapshot interface.\n */\nexport interface ISerializableInk {\n\t/**\n\t * Collection of ink strokes.\n\t */\n\tstrokes: IInkStroke[];\n\n\t/**\n\t * Stores a mapping from the provided key to its index in strokes. Since\n\t * ISerializableInk is serialized we need to use an index.\n\t */\n\tstrokeIndex: { [key: string]: number };\n}\n\n/**\n * Maintains a live record of the data that can be used for snapshotting.\n */\nexport class InkData {\n\t/**\n\t * {@inheritDoc ISerializableInk.strokes}\n\t */\n\tprivate strokes: IInkStroke[];\n\n\t/**\n\t * {@inheritDoc ISerializableInk.strokeIndex}\n\t */\n\tprivate strokeIndex: { [key: string]: number };\n\n\t/**\n\t * Construct a new InkData.\n\t * @param snapshot - Existing data to initialize with\n\t */\n\tconstructor(snapshot?: ISerializableInk) {\n\t\tthis.strokes = snapshot?.strokes ?? [];\n\t\tthis.strokeIndex = snapshot?.strokeIndex ?? {};\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStrokes}\n\t */\n\tpublic getStrokes(): IInkStroke[] {\n\t\treturn this.strokes;\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStroke}\n\t */\n\tpublic getStroke(key: string): IInkStroke {\n\t\treturn this.strokes[this.strokeIndex[key]];\n\t}\n\n\t/**\n\t * Clear all stored data.\n\t */\n\tpublic clear(): void {\n\t\tthis.strokes = [];\n\t\tthis.strokeIndex = {};\n\t}\n\n\t/**\n\t * Add the given stroke to the stored data.\n\t * @param stroke - The stroke to add\n\t */\n\tpublic addStroke(stroke: IInkStroke): void {\n\t\tthis.strokes.push(stroke);\n\t\tthis.strokeIndex[stroke.id] = this.strokes.length - 1;\n\t}\n\n\t/**\n\t * Get a JSON-compatible representation of the stored data.\n\t * @returns The JSON-compatible object\n\t */\n\tpublic getSerializable(): ISerializableInk {\n\t\treturn {\n\t\t\tstrokes: this.strokes,\n\t\t\tstrokeIndex: this.strokeIndex,\n\t\t};\n\t}\n}\n"]}
+{"version":3,"file":"snapshot.js","sourceRoot":"","sources":["../src/snapshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAoBH;;GAEG;AACH,MAAM,OAAO,OAAO;IAWnB;;;OAGG;IACH,YAAY,QAA2B;QACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,WAAW,IAAI,EAAE,CAAC;IAChD,CAAC;IAED;;OAEG;IACI,UAAU;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED;;OAEG;IACI,SAAS,CAAC,GAAW;QAC3B,wFAAwF;QACxF,oEAAoE;QACpE,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAE,CAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACI,KAAK;QACX,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACvB,CAAC;IAED;;;OAGG;IACI,SAAS,CAAC,MAAkB;QAClC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC;IAED;;;OAGG;IACI,eAAe;QACrB,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC7B,CAAC;IACH,CAAC;CACD","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { IInkStroke } from \"./interfaces.js\";\n\n/**\n * Ink snapshot interface.\n */\nexport interface ISerializableInk {\n\t/**\n\t * Collection of ink strokes.\n\t */\n\tstrokes: IInkStroke[];\n\n\t/**\n\t * Stores a mapping from the provided key to its index in strokes. Since\n\t * ISerializableInk is serialized we need to use an index.\n\t */\n\tstrokeIndex: { [key: string]: number };\n}\n\n/**\n * Maintains a live record of the data that can be used for snapshotting.\n */\nexport class InkData {\n\t/**\n\t * {@inheritDoc ISerializableInk.strokes}\n\t */\n\tprivate strokes: IInkStroke[];\n\n\t/**\n\t * {@inheritDoc ISerializableInk.strokeIndex}\n\t */\n\tprivate strokeIndex: { [key: string]: number };\n\n\t/**\n\t * Construct a new InkData.\n\t * @param snapshot - Existing data to initialize with\n\t */\n\tconstructor(snapshot?: ISerializableInk) {\n\t\tthis.strokes = snapshot?.strokes ?? [];\n\t\tthis.strokeIndex = snapshot?.strokeIndex ?? {};\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStrokes}\n\t */\n\tpublic getStrokes(): IInkStroke[] {\n\t\treturn this.strokes;\n\t}\n\n\t/**\n\t * {@inheritDoc IInk.getStroke}\n\t */\n\tpublic getStroke(key: string): IInkStroke {\n\t\t// Non null asserting, it should be okay that a bad key results in an error being thrown\n\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\treturn this.strokes[this.strokeIndex[key]!]!;\n\t}\n\n\t/**\n\t * Clear all stored data.\n\t */\n\tpublic clear(): void {\n\t\tthis.strokes = [];\n\t\tthis.strokeIndex = {};\n\t}\n\n\t/**\n\t * Add the given stroke to the stored data.\n\t * @param stroke - The stroke to add\n\t */\n\tpublic addStroke(stroke: IInkStroke): void {\n\t\tthis.strokes.push(stroke);\n\t\tthis.strokeIndex[stroke.id] = this.strokes.length - 1;\n\t}\n\n\t/**\n\t * Get a JSON-compatible representation of the stored data.\n\t * @returns The JSON-compatible object\n\t */\n\tpublic getSerializable(): ISerializableInk {\n\t\treturn {\n\t\t\tstrokes: this.strokes,\n\t\t\tstrokeIndex: this.strokeIndex,\n\t\t};\n\t}\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-experimental/ink",
-  "version": "2.1.0-276985",
+  "version": "2.1.0-281041",
   "description": "Ink DDS",
   "homepage": "https://fluidframework.com",
   "repository": {
@@ -47,24 +47,24 @@
     "temp-directory": "nyc/.nyc_output"
   },
   "dependencies": {
-    "@fluidframework/core-interfaces": "2.1.0-276985",
-    "@fluidframework/datastore-definitions": "2.1.0-276985",
-    "@fluidframework/driver-definitions": "2.1.0-276985",
-    "@fluidframework/driver-utils": "2.1.0-276985",
-    "@fluidframework/runtime-definitions": "2.1.0-276985",
-    "@fluidframework/shared-object-base": "2.1.0-276985",
+    "@fluidframework/core-interfaces": "2.1.0-281041",
+    "@fluidframework/datastore-definitions": "2.1.0-281041",
+    "@fluidframework/driver-definitions": "2.1.0-281041",
+    "@fluidframework/driver-utils": "2.1.0-281041",
+    "@fluidframework/runtime-definitions": "2.1.0-281041",
+    "@fluidframework/shared-object-base": "2.1.0-281041",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.15.2",
-    "@biomejs/biome": "^1.7.3",
-    "@fluid-internal/mocha-test-setup": "2.1.0-276985",
-    "@fluid-tools/build-cli": "^0.39.0",
+    "@biomejs/biome": "~1.8.3",
+    "@fluid-internal/mocha-test-setup": "2.1.0-281041",
+    "@fluid-tools/build-cli": "^0.40.0",
     "@fluidframework/build-common": "^2.0.3",
-    "@fluidframework/build-tools": "^0.39.0",
-    "@fluidframework/container-definitions": "2.1.0-276985",
+    "@fluidframework/build-tools": "^0.40.0",
+    "@fluidframework/container-definitions": "2.1.0-281041",
     "@fluidframework/eslint-config-fluid": "^5.3.0",
-    "@fluidframework/test-runtime-utils": "2.1.0-276985",
+    "@fluidframework/test-runtime-utils": "2.1.0-281041",
     "@microsoft/api-extractor": "^7.45.1",
     "@types/mocha": "^9.1.1",
     "@types/node": "^18.19.0",
@@ -98,7 +98,7 @@
     "build:test:cjs": "fluid-tsc commonjs --project ./src/test/tsconfig.cjs.json",
     "build:test:esm": "tsc --project ./src/test/tsconfig.json",
     "check:are-the-types-wrong": "attw --pack .",
-    "check:biome": "biome check . --formatter-enabled=true",
+    "check:biome": "biome check .",
     "check:exports": "concurrently \"npm:check:exports:*\"",
     "check:exports:bundle-release-tags": "api-extractor run --config api-extractor/api-extractor-lint-bundle.json",
     "check:exports:cjs:index": "api-extractor run --config api-extractor/api-extractor-lint-index.cjs.json",
@@ -110,7 +110,7 @@
     "eslint": "eslint --format stylish src",
     "eslint:fix": "eslint --format stylish src --fix --fix-type problem,suggestion,layout",
     "format": "npm run format:biome",
-    "format:biome": "biome check . --formatter-enabled=true --apply",
+    "format:biome": "biome check . --write",
     "format:prettier": "prettier --write . --cache --ignore-path ../../../.prettierignore",
     "lint": "fluid-build . --task lint",
     "lint:fix": "fluid-build . --task eslint:fix --task format",

package/src/inkCanvas.ts

@@ -40,21 +40,24 @@ class Vector {
 }
 
 function drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {
-	if (points.length === 0) {
+	const firstPoint = points[0];
+	if (firstPoint === undefined) {
 		return;
 	}
 
 	context.beginPath();
 	// Move to the first point
-	context.moveTo(points[0].x, points[0].y);
+	context.moveTo(firstPoint.x, firstPoint.y);
 
 	// Draw the rest of the segments
 	for (let i = 1; i < points.length; i++) {
-		context.lineTo(points[i].x, points[i].y);
+		// Non null asserting, this must exist because the we are iterating through the length of points
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		context.lineTo(points[i]!.x, points[i]!.y);
 	}
 
 	// And then close the shape
-	context.lineTo(points[0].x, points[0].y);
+	context.lineTo(firstPoint.x, firstPoint.y);
 	context.closePath();
 	context.fill();
 }
@@ -152,7 +155,10 @@ export class InkCanvas {
 		const strokes = this.model.getStrokes();
 
 		// Time of the first operation in stroke 0 is our starting time
-		const startTime = strokes[0].points[0].time;
+		const startTime = strokes[0]?.points[0]?.time;
+		if (startTime === undefined) {
+			throw new Error("Couldn't get start time");
+		}
 		for (const stroke of strokes) {
 			this.animateStroke(stroke, 0, startTime);
 		}
@@ -224,8 +230,12 @@ export class InkCanvas {
 		}
 
 		// Draw the requested stroke
-		const current = stroke.points[operationIndex];
-		const previous = stroke.points[Math.max(0, operationIndex - 1)];
+		// Non null asserting, this must exist because the operationIndex must be less than the length of stroke.points
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const current = stroke.points[operationIndex]!;
+		// Non null asserting, this must exist because its either the first index or operationIndex minus one which is less than the length of stroke.points
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const previous = stroke.points[Math.max(0, operationIndex - 1)]!;
 		const time =
 			operationIndex === 0 ? current.time - startTime : current.time - previous.time;
 
@@ -247,7 +257,9 @@ export class InkCanvas {
 
 		const strokes = this.model.getStrokes();
 		for (const stroke of strokes) {
-			let previous = stroke.points[0];
+			// Non null asserting since previous would not be used if stroke.points is empty
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			let previous = stroke.points[0]!;
 			for (const current of stroke.points) {
 				// For the down, current === previous === stroke.operations[0]
 				this.drawStrokeSegment(stroke.pen, current, previous);
@@ -269,7 +281,9 @@ export class InkCanvas {
 		const stroke = this.model.getStroke(dirtyStrokeId);
 		// If this is the only point in the stroke, we'll use it for both the start and end of the segment
 		const prevPoint =
-			stroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)];
+			// Non null asserting, this must exist its within the length of stroke.points
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			stroke.points[stroke.points.length - (stroke.points.length >= 2 ? 2 : 1)]!;
 		this.drawStrokeSegment(stroke.pen, prevPoint, operation.point);
 	}
 }

package/src/packageVersion.ts

@@ -6,4 +6,4 @@
  */
 
 export const pkgName = "@fluid-experimental/ink";
-export const pkgVersion = "2.1.0-276985";
+export const pkgVersion = "2.1.0-281041";

package/src/snapshot.ts

@@ -55,7 +55,9 @@ export class InkData {
 	 * {@inheritDoc IInk.getStroke}
 	 */
 	public getStroke(key: string): IInkStroke {
-		return this.strokes[this.strokeIndex[key]];
+		// Non null asserting, it should be okay that a bad key results in an error being thrown
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.strokes[this.strokeIndex[key]!]!;
 	}
 
 	/**

package/tsconfig.json

@@ -5,7 +5,6 @@
 	"compilerOptions": {
 		"rootDir": "./src",
 		"outDir": "./lib",
-		"noUncheckedIndexedAccess": false,
 		"exactOptionalPropertyTypes": false,
 	},
 }