From 9a90542adf2df20e7433b3c7c0e26317f7eeb39d Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Tue, 12 Mar 2024 16:16:59 +0200 Subject: [PATCH] kinda working --- .../source/matrix-renderer.ts | 103 +++++++++++++++++- .../source/tests/matrix-renderer.spec.ts | 18 ++- .../build/generate-workers/source/types.ts | 22 ++++ .../nimble-components/src/wafer-map/index.ts | 10 ++ .../tests/create-matrix-renderer.spec.ts | 23 ++-- 5 files changed, 158 insertions(+), 18 deletions(-) create mode 100644 packages/nimble-components/build/generate-workers/source/types.ts diff --git a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts index 841957c067..3b9b86e760 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/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 + 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); \ No newline at end of file diff --git a/packages/nimble-components/build/generate-workers/source/tests/matrix-renderer.spec.ts b/packages/nimble-components/build/generate-workers/source/tests/matrix-renderer.spec.ts index c144814f18..0fc3b25e58 100644 --- a/packages/nimble-components/build/generate-workers/source/tests/matrix-renderer.spec.ts +++ b/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); }); }); diff --git a/packages/nimble-components/build/generate-workers/source/types.ts b/packages/nimble-components/build/generate-workers/source/types.ts new file mode 100644 index 0000000000..31293e02a5 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index be46f1a058..caa11efa17 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/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; } diff --git a/packages/nimble-components/src/wafer-map/tests/create-matrix-renderer.spec.ts b/packages/nimble-components/src/wafer-map/tests/create-matrix-renderer.spec.ts index c412092a38..d836921c58 100644 --- a/packages/nimble-components/src/wafer-map/tests/create-matrix-renderer.spec.ts +++ b/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); }); });