Add zoom functionality to wafermap

change/@ni-nimble-components-5067d35f-244c-42ff-b498-4329212f03ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add zoom functionality to wafer map",
+  "packageName": "@ni/nimble-components",
+  "email": "49208904+arinluca333@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/package.json

@@ -54,6 +54,10 @@
     "@tanstack/table-core": "^8.7.0",
     "@types/d3": "^7.4.0",
     "@types/d3-scale": "^4.0.2",
+    "@types/d3-zoom": "^3.0.0",
+    "@types/d3-selection": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "d3-random": "^3.0.1",
     "d3-scale": "^4.0.2",
     "hex-rgb": "^5.0.0",

packages/nimble-components/src/wafer-map/index.ts

@@ -16,6 +16,7 @@ import {
 } from './types';
 import { DataManager } from './modules/data-manager';
 import { RenderingModule } from './modules/rendering';
+import { ZoomHandler } from './modules/zoom-handler';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -59,6 +60,8 @@ export class WaferMap extends FoundationElement {
      */
     public readonly canvas!: HTMLCanvasElement;
 
+    public readonly zoomContainer!: HTMLElement;
+
     @observable public colorScaleMode: WaferMapColorScaleMode = WaferMapColorScaleMode.linear;
 
     @observable public highlightedValues: string[] = [];
@@ -94,6 +97,13 @@ export class WaferMap extends FoundationElement {
         );
 
         const renderer = new RenderingModule(this.dataManager, this.canvas);
+        const zoomHandler = new ZoomHandler(
+            this.canvas,
+            this.zoomContainer,
+            this.dataManager,
+            renderer
+        );
+        zoomHandler.attachZoomBehaviour();
         renderer.drawWafer();
     }
 

packages/nimble-components/src/wafer-map/modules/zoom-handler.ts

@@ -0,0 +1,122 @@
+import { select } from 'd3-selection';
+import {
+    zoom,
+    ZoomBehavior,
+    zoomIdentity,
+    ZoomTransform,
+    zoomTransform
+} from 'd3-zoom';
+import type { DataManager } from './data-manager';
+import type { RenderingModule } from './rendering';
+
+/**
+ * ZoomHandler deals with user interactions and events like zooming
+ */
+export class ZoomHandler {
+    private zoomTransform: ZoomTransform = zoomIdentity;
+    private readonly minScale = 1.1;
+    private readonly minExtentPoint: [number, number] = [-100, -100];
+    private readonly extentPadding = 100;
+
+    public constructor(
+        private readonly canvas: HTMLCanvasElement,
+        private readonly zoomContainer: HTMLElement,
+        private readonly dataManager: DataManager,
+        private readonly renderingModule: RenderingModule
+    ) {}
+
+    public attachZoomBehaviour(): void {
+        const zoomBehavior = this.createZoomBehavior();
+        zoomBehavior(select(this.canvas as Element));
+    }
+
+    private createZoomBehavior(): ZoomBehavior<Element, unknown> {
+        this.canvas.addEventListener('wheel', event => event.preventDefault());
+        if (this.dataManager === undefined) return zoom();
+        const zoomBehavior = zoom()
+            .scaleExtent([
+                1.1,
+                this.getZoomMax(
+                    this.canvas.width * this.canvas.height,
+                    this.dataManager.containerDimensions.width * this.dataManager.containerDimensions.height
+                )
+            ])
+            .translateExtent([
+                this.minExtentPoint,
+                [this.canvas.width + this.extentPadding, this.canvas.height + this.extentPadding]
+            ])
+            .filter((event: Event) => {
+                const transform = zoomTransform(this.canvas);
+                return transform.k >= this.minScale || event.type === 'wheel';
+            })
+            .on('zoom', (event: { transform: ZoomTransform }) => {
+                if (this.dataManager === undefined) return;
+                const transform = event.transform;
+                const canvasContext = this.canvas.getContext('2d');
+                if (canvasContext === null) return;
+                canvasContext.save();
+                if (transform.k === this.minScale) {
+                    this.zoomTransform = zoomIdentity;
+                    this.clearCanvas(
+                        canvasContext,
+                        this.canvas.width,
+                        this.canvas.height
+                    );
+                    this.scaleCanvas(
+                        canvasContext,
+                        zoomIdentity.x,
+                        zoomIdentity.y,
+                        zoomIdentity.k
+                    );
+                    this.renderingModule.drawWafer();
+                    zoomBehavior.transform(
+                        select(this.canvas as Element),
+                        zoomIdentity
+                    );
+                } else {
+                    this.zoomTransform = transform;
+                    this.clearCanvas(
+                        canvasContext,
+                        this.canvas.width * this.zoomTransform.k,
+                        this.canvas.height * this.zoomTransform.k
+                    );
+                    this.scaleCanvas(
+                        canvasContext,
+                        transform.x,
+                        transform.y,
+                        transform.k
+                    );
+                    this.renderingModule.drawWafer();
+                }
+                canvasContext.restore();
+                this.zoomContainer.setAttribute(
+                    'transform',
+                    this.zoomTransform.toString()
+                );
+            });
+
+        return zoomBehavior;
+    }
+
+    private getZoomMax(canvasArea: number, dataArea: number): number {
+        return Math.ceil((dataArea / canvasArea) * 100);
+    }
+
+    private clearCanvas(
+        context: CanvasRenderingContext2D,
+        width: number,
+        height: number
+    ): void {
+        context.clearRect(0, 0, width, height);
+    }
+
+    private scaleCanvas(
+        context: CanvasRenderingContext2D,
+        x = 0,
+        y = 0,
+        scale = 1
+    ): void {
+        context.translate(x, y);
+        context.scale(scale, scale);
+    }
+}