kinda working

packages/nimble-components/build/generate-workers/source/matrix-renderer.ts

@@ -1,4 +1,5 @@
 import { expose } from 'comlink';
+import type { Dimensions, Transform, WaferMapMatrix, WaferMapTypedMatrix } from './types';
 
 /**
  * MatrixRenderer class is meant to be used within a Web Worker context, 
@@ -8,25 +9,115 @@ import { expose } from 'comlink';
  * This setup is used in the wafer-map component to perform heavy computational duties
  */
 export class MatrixRenderer {
-    public dieMatrix: Uint8Array = Uint8Array.from([]);
+    private colIndexes: Uint8Array = Uint8Array.from([]);
+    private rowIndexes: Uint8Array = Uint8Array.from([]);
     private canvas!: OffscreenCanvas;
     private context!: OffscreenCanvasRenderingContext2D;
+    private values = new Float32Array([
+        14.24, 76.43, 44.63, 67.93, 72.71, 79.04, 26.49, 37.79, 59.82, 52.92,
+        98.53, 20.83, 62.81
+    ]);
+    private scaledColIndex = new Float64Array([0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400]);
+    private scaledRowIndex = new Float64Array([200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200]);
 
     public setCanvas(canvas: OffscreenCanvas): void {
         this.canvas = canvas;
         this.context = canvas.getContext('2d')!;
-        this.context.fillStyle = 'red';
-        this.context.fillRect(0, 0, 300, 300);
+    }
+
+    public getMatrix(): WaferMapTypedMatrix {
+        return {
+            colIndexes: this.colIndexes,
+            rowIndexes: this.rowIndexes,
+            values: this.values
+        };
     }
 
     public emptyMatrix(): void {
-        this.dieMatrix = Uint8Array.from([]);;
+        this.colIndexes = Uint8Array.from([]);
+        this.rowIndexes = Uint8Array.from([]);
+        this.values = Float32Array.from([]);
+    }
+
+    public scaleCanvas(data: { transform: Transform }): void {
+        this.context.translate(
+            data.transform.x,
+            data.transform.y
+        );
+        this.context.scale(
+            data.transform.k,
+            data.transform.k
+        );
     }
 
     public updateMatrix(
-        data: Iterable<number>
+        data: WaferMapMatrix
     ): void {
-        this.dieMatrix = Uint8Array.from(data);
+        this.colIndexes = Uint8Array.from(data.colIndexes);
+        this.rowIndexes = Uint8Array.from(data.rowIndexes);
+        this.values = Float32Array.from(data.values);
+    }
+
+    public setCanvasDimensions(data: Dimensions): void {
+        this.canvas.width = data.width;
+        this.canvas.height = data.height;
+    }
+
+    public drawWafer(transform: Transform, dieDimensions: Dimensions): void {
+
+        console.log(transform);
+
+        this.context.restore();
+
+        this.context.save();
+
+        this.context.clearRect(
+            0,
+            0,
+            this.canvas.width,
+            this.canvas.height
+        );
+
+        this.scaleCanvas({ transform });
+
+        this.context.translate(
+            transform.x,
+            transform.y
+        );
+
+        this.context.scale(
+            transform.k,
+            transform.k
+        );
+
+        for (let i = 0; i < this.scaledColIndex.length; i++) {
+            this.context.fillStyle = 'Blue';
+
+            const x = this.scaledColIndex[i]!;
+            const y = this.scaledRowIndex[i]!;
+            const width = dieDimensions.width;
+            const height = dieDimensions.height;
+            this.context.fillRect(x, y, width, height);
+
+            const fontSize = Math.floor(height * 0.35);
+            this.context.font = `${fontSize}px Arial`;
+            this.context.fillStyle = 'White';
+
+            // Calculate the position to center the text in the rectangle
+            const textX = x + width / 2;
+            let textY = y + height / 2;
+
+            // Check if the value has more than one decimal place
+            let formattedValue = parseFloat(this.values[i]!.toFixed(1)) + '...';
+
+            // Adjust text alignment to center
+            this.context.textAlign = 'center';
+            this.context.textBaseline = 'middle';
+
+            // Draw the formatted value in the center of the rectangle
+            this.context.fillText(formattedValue, textX, textY);
+        }
+        console.log(this);
     }
 }
 expose(MatrixRenderer);

packages/nimble-components/build/generate-workers/source/tests/matrix-renderer.spec.ts

@@ -12,17 +12,25 @@ describe('MatrixRenderer with MessageChannel', () => {
     });
 
     it('updateMatrix should update the dieMatrix', async () => {
-        const testData = [4, 5, 6];
+        const testData = { colIndexes: [4, 1, 2], rowIndexes: [54, 54, 62], values: [8.12, 9.0, 0.32] };
         await matrixRenderer.updateMatrix(testData);
 
-        const updatedMatrix = await matrixRenderer.dieMatrix;
-        expect(updatedMatrix).toEqual(Uint8Array.from(testData));
+        const updatedMatrix = await matrixRenderer.getMatrix();
+        expect(updatedMatrix).toEqual(
+            {
+                colIndexes: Uint8Array.from(testData.colIndexes),
+                rowIndexes: Uint8Array.from(testData.rowIndexes),
+                values: Float32Array.from(testData.values)
+            }
+        );
     });
 
     it('emptyMatrix should empty the dieMatrix', async () => {
         await matrixRenderer.emptyMatrix();
 
-        const updatedMatrix = await matrixRenderer.dieMatrix;
-        expect(updatedMatrix.length).toEqual(0);
+        const updatedMatrix = await matrixRenderer.getMatrix();
+        expect(updatedMatrix.colIndexes.length
+            + updatedMatrix.rowIndexes.length
+            + updatedMatrix.values.length).toEqual(0);
     });
 });

packages/nimble-components/build/generate-workers/source/types.ts

@@ -0,0 +1,22 @@
+export interface WaferMapTypedMatrix {
+    colIndexes: Uint8Array;
+    rowIndexes: Uint8Array;
+    values: Float32Array;
+}
+
+export interface WaferMapMatrix {
+    colIndexes: number[];
+    rowIndexes: number[];
+    values: number[];
+}
+
+export interface Transform{
+    k: number;
+    x: number;
+    y: number;
+}
+
+export interface Dimensions{
+    width: number;
+    height: number;
+}

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

@@ -233,6 +233,11 @@ export class WaferMap extends FoundationElement {
         } else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
             this.renderer.renderHover();
         }
+        this.workerOne.drawWafer(this.transform, this.dataManager.dieDimensions).then(
+            () => {
+            },
+            () => { }
+        );
     }
 
     private validate(): void {
@@ -253,6 +258,11 @@ export class WaferMap extends FoundationElement {
             this.canvas.height = height;
             this.canvasWidth = width;
             this.canvasHeight = height;
+            this.workerOne.setCanvasDimensions({ width, height }).then(
+                () => {
+                },
+                () => { }
+            );
         });
         return resizeObserver;
     }

packages/nimble-components/src/wafer-map/tests/create-matrix-renderer.spec.ts

@@ -18,19 +18,28 @@ describe('MatrixRenderer worker', () => {
     });
 
     it('updateMatrix should update the dieMatrix', async () => {
-        const testData = [4, 5, 6];
+        const testData = { colIndexes: [1, 2, 3], rowIndexes: [4, 5, 6], values: [8.1, 9.2, 10.32] };
         await matrixRenderer.updateMatrix(testData);
-        const resolvedDieMatrix = await matrixRenderer.dieMatrix;
-        expect(Array.from(resolvedDieMatrix)).toEqual(
-            Array.from(Uint8Array.from(testData))
+        const resolvedDieMatrix = await matrixRenderer.getMatrix();
+
+        expect(resolvedDieMatrix.colIndexes).toEqual(
+            Uint8Array.from(testData.colIndexes)
+        );
+        expect(resolvedDieMatrix.rowIndexes).toEqual(
+            Uint8Array.from(testData.rowIndexes)
+        );
+        expect(resolvedDieMatrix.values).toEqual(
+            Float32Array.from(testData.values)
         );
     });
 
     it('emptyMatrix should empty the dieMatrix', async () => {
-        const testData = [4, 5, 6];
+        const testData = { colIndexes: [4, 1, 2], rowIndexes: [54, 54, 62], values: [8.12, 9.0, 0.32] };
         await matrixRenderer.updateMatrix(testData);
         await matrixRenderer.emptyMatrix();
-        const resolvedDieMatrix = await matrixRenderer.dieMatrix;
-        expect(resolvedDieMatrix.length).toEqual(0);
+        const resolvedDieMatrix = await matrixRenderer.getMatrix();
+        expect(resolvedDieMatrix.colIndexes.length
+            + resolvedDieMatrix.rowIndexes.length
+            + resolvedDieMatrix.values.length).toEqual(0);
     });
 });