refactor(ink): Update eslint config in packages/dds/ink to extend "re…

…commended" base config (#23575)

## Description

> The package currently uses our "minimal" config. We should update it
to use "recommended" and fix the resulting linter violations.

To update the config, replace the
"@fluidframework/eslint-config-fluid/minimal" entry in the extends block
of the package's `.eslintrc.js` with
"@fluidframework/eslint-config-fluid/recommended". Running `npm run
eslint` from within the package directory will reveal the issues that
need to be resolved.

Recommendation: start by running `npm run eslint:fix` (after updating
the config and building the code) and audit the results. This will
attempt to auto-fix many of the new rules being pulled in. This will
likely be much easier than going through all of the violations and
fixing by hand. Once the auto-fixable issues have been resolved, you
will unfortunately need to go through the remaining violations manually.


[AB#3011](https://dev.azure.com/fluidframework/235294da-091d-4c29-84fc-cdfc3d90890b/_workitems/edit/3011)

packages/dds/ink/.eslintrc.cjs

@@ -4,10 +4,7 @@
  */
 
 module.exports = {
-	extends: [
-		require.resolve("@fluidframework/eslint-config-fluid/minimal-deprecated"),
-		"prettier",
-	],
+	extends: [require.resolve("@fluidframework/eslint-config-fluid/recommended"), "prettier"],
 	parserOptions: {
 		project: ["./tsconfig.json", "./src/test/tsconfig.json"],
 	},

packages/dds/ink/src/ink.ts

@@ -112,15 +112,15 @@ export class Ink extends SharedObject<IInkEvents> implements IInk {
 	 * @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)
 	 */
-	public static create(runtime: IFluidDataStoreRuntime, id?: string) {
+	public static create(runtime: IFluidDataStoreRuntime, id?: string): Ink {
 		return runtime.createChannel(id, InkFactory.Type) as Ink;
 	}
 
 	/**
 	 * Get a factory for Ink to register with the data store.
 	 * @returns A factory that creates and loads Ink
 	 */
-	public static getFactory() {
+	public static getFactory(): InkFactory {
 		return new InkFactory();
 	}
 

packages/dds/ink/src/inkCanvas.ts

@@ -35,11 +35,11 @@ class Vector {
 	) {}
 
 	public length(): number {
-		return Math.sqrt(this.x * this.x + this.y * this.y);
+		return Math.hypot(this.x, this.y);
 	}
 }
 
-function drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {
+function drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]): void {
 	if (points.length === 0) {
 		return;
 	}
@@ -59,7 +59,7 @@ function drawPolygon(context: CanvasRenderingContext2D, points: IPoint[]) {
 	context.fill();
 }
 
-function drawCircle(context: CanvasRenderingContext2D, center: IPoint, radius: number) {
+function drawCircle(context: CanvasRenderingContext2D, center: IPoint, radius: number): void {
 	context.beginPath();
 	context.moveTo(center.x, center.y);
 	context.arc(center.x, center.y, radius, 0, Math.PI * 2);
@@ -142,11 +142,11 @@ export class InkCanvas {
 		this.sizeCanvasBackingStore();
 	}
 
-	public setPenColor(color: IColor) {
+	public setPenColor(color: IColor): void {
 		this.currentPen.color = color;
 	}
 
-	public replay() {
+	public replay(): void {
 		this.clearCanvas();
 
 		const strokes = this.model.getStrokes();
@@ -158,12 +158,12 @@ export class InkCanvas {
 		}
 	}
 
-	public clear() {
+	public clear(): void {
 		this.model.clear();
 		this.redraw();
 	}
 
-	public sizeCanvasBackingStore() {
+	public sizeCanvasBackingStore(): void {
 		const canvasBoundingClientRect = this.canvas.getBoundingClientRect();
 		// Scale the canvas size to match the physical pixel to avoid blurriness
 		const scale = window.devicePixelRatio;
@@ -176,7 +176,7 @@ export class InkCanvas {
 		this.redraw();
 	}
 
-	private handlePointerDown(evt: PointerEvent) {
+	private handlePointerDown(evt: PointerEvent): void {
 		// We will accept pen down or mouse left down as the start of a stroke.
 		if (evt.pointerType === "pen" || (evt.pointerType === "mouse" && evt.button === 0)) {
 			const strokeId = this.model.createStroke(this.currentPen).id;
@@ -188,23 +188,25 @@ export class InkCanvas {
 		}
 	}
 
-	private handlePointerMove(evt: PointerEvent) {
+	private handlePointerMove(evt: PointerEvent): void {
 		if (this.localActiveStrokeMap.has(evt.pointerId)) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
 			const evts = (evt as any)?.getCoalescedEvents() ?? ([evt] as PointerEvent[]);
 			for (const e of evts) {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 				this.appendPointerEventToStroke(e);
 			}
 		}
 	}
 
-	private handlePointerUp(evt: PointerEvent) {
+	private handlePointerUp(evt: PointerEvent): void {
 		if (this.localActiveStrokeMap.has(evt.pointerId)) {
 			this.appendPointerEventToStroke(evt);
 			this.localActiveStrokeMap.delete(evt.pointerId);
 		}
 	}
 
-	private appendPointerEventToStroke(evt: PointerEvent) {
+	private appendPointerEventToStroke(evt: PointerEvent): void {
 		const strokeId = this.localActiveStrokeMap.get(evt.pointerId);
 		if (strokeId === undefined) {
 			throw new Error("Unexpected pointer ID trying to append to stroke");
@@ -218,7 +220,7 @@ export class InkCanvas {
 		this.model.appendPointToStroke(inkPt, strokeId);
 	}
 
-	private animateStroke(stroke: IInkStroke, operationIndex: number, startTime: number) {
+	private animateStroke(stroke: IInkStroke, operationIndex: number, startTime: number): void {
 		if (operationIndex >= stroke.points.length) {
 			return;
 		}
@@ -238,11 +240,11 @@ export class InkCanvas {
 	/**
 	 * Clears the canvas
 	 */
-	private clearCanvas() {
+	private clearCanvas(): void {
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 	}
 
-	private redraw() {
+	private redraw(): void {
 		this.clearCanvas();
 
 		const strokes = this.model.getStrokes();
@@ -256,14 +258,14 @@ export class InkCanvas {
 		}
 	}
 
-	private drawStrokeSegment(pen: IPen, current: IInkPoint, previous: IInkPoint) {
+	private drawStrokeSegment(pen: IPen, current: IInkPoint, previous: IInkPoint): void {
 		// TODO Consider save/restore context
 		// TODO Consider half-pixel offset
 		this.context.fillStyle = `rgb(${pen.color.r}, ${pen.color.g}, ${pen.color.b})`;
 		drawShapes(this.context, previous, current, pen);
 	}
 
-	private handleStylus(operation: IStylusOperation) {
+	private handleStylus(operation: IStylusOperation): void {
 		// Render the dirty stroke
 		const dirtyStrokeId = operation.id;
 		const stroke = this.model.getStroke(dirtyStrokeId);

packages/dds/ink/src/inkFactory.ts

@@ -37,14 +37,14 @@ export class InkFactory implements IChannelFactory {
 	/**
 	 * {@inheritDoc @fluidframework/datastore-definitions#IChannelFactory."type"}
 	 */
-	public get type() {
+	public get type(): string {
 		return InkFactory.Type;
 	}
 
 	/**
 	 * {@inheritDoc @fluidframework/datastore-definitions#IChannelFactory.attributes}
 	 */
-	public get attributes() {
+	public get attributes(): IChannelAttributes {
 		return InkFactory.Attributes;
 	}