From f9a18d345e06e8ad9a49ae5d62146c0980361b86 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 7 Mar 2024 16:28:01 +0200 Subject: [PATCH 01/27] changes --- packages/nimble-components/package.json | 1 + packages/nimble-components/src/wafer-map/template.ts | 3 ++- packages/nimble-components/tsconfig.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index 883eb05095..4a90fc4087 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -127,6 +127,7 @@ "@storybook/html-webpack5": "^7.6.13", "@storybook/theming": "^7.6.13", "@types/jasmine": "^4.3.1", + "@types/offscreencanvas": "^2019.7.3", "@types/webpack-env": "^1.15.2", "babel-loader": "^9.1.2", "circular-dependency-plugin": "^5.2.0", diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index a33d8c6888..9ff59e94b0 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -21,7 +21,8 @@ export const template = html` - + + Date: Thu, 7 Mar 2024 19:13:17 +0200 Subject: [PATCH 02/27] offscreencanvas working --- package-lock.json | 7 +++++ .../source/matrix-renderer.ts | 9 ++++++ .../nimble-components/src/wafer-map/index.ts | 30 +++++++++++++++---- .../src/wafer-map/template.ts | 2 +- 4 files changed, 41 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 71f84d3abe..f009da7bea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11045,6 +11045,12 @@ "integrity": "sha512-5PjwB0uP2XDp3nt5u5NJAG2DORHIRClPzWT/TTZhJ2Ekwe8M5bA9tvPdi9NO/n2uvu2/ictat8kgqvLfcIE1SA==", "peer": true }, + "node_modules/@types/offscreencanvas": { + "version": "2019.7.3", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz", + "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==", + "dev": true + }, "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", @@ -34047,6 +34053,7 @@ "@storybook/html-webpack5": "^7.6.13", "@storybook/theming": "^7.6.13", "@types/jasmine": "^4.3.1", + "@types/offscreencanvas": "^2019.7.3", "@types/webpack-env": "^1.15.2", "babel-loader": "^9.1.2", "circular-dependency-plugin": "^5.2.0", 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 96bae5689d..1d39ef11c1 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -9,6 +9,15 @@ import { expose } from 'comlink'; */ export class MatrixRenderer { public dieMatrix: Uint8Array = Uint8Array.from([]); + private canvas!: OffscreenCanvas; + private context!: OffscreenCanvasRenderingContext2D; + + public setCanvas(canvas: OffscreenCanvas): void { + this.canvas = canvas; + this.context = canvas.getContext('2d')!; + this.context.fillStyle = 'red'; + this.context.fillRect(0, 0, 100, 100); + } public emptyMatrix(): void { this.dieMatrix = Uint8Array.from([]);; diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index a37ef562cd..30b831d972 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -5,6 +5,7 @@ import { } from '@microsoft/fast-element'; import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation'; import { zoomIdentity, ZoomTransform } from 'd3-zoom'; +import { type Remote, transfer } from 'comlink'; import { template } from './template'; import { styles } from './styles'; import { DataManager } from './modules/data-manager'; @@ -21,6 +22,8 @@ import { } from './types'; import { WaferMapUpdateTracker } from './modules/wafer-map-update-tracker'; import { WaferMapValidator } from './modules/wafer-map-validator'; +import type { MatrixRenderer } from '../../build/generate-workers/dist/esm/source/matrix-renderer'; +import { createMatrixRenderer } from './modules/create-matrix-renderer'; declare global { interface HTMLElementTagNameMap { @@ -68,11 +71,21 @@ export class WaferMap extends FoundationElement { @attr({ attribute: 'color-scale-mode' }) public colorScaleMode: WaferMapColorScaleMode = WaferMapColorScaleMode.linear; + /** + * @internal + */ + public workerOne!: Remote; + /** * @internal */ public readonly canvas!: HTMLCanvasElement; + /** + * @internal + */ + public readonly canvasOne!: HTMLCanvasElement; + /** * @internal */ @@ -152,20 +165,25 @@ export class WaferMap extends FoundationElement { return this.waferMapValidator.getValidity(); } - public override connectedCallback(): void { + public override async connectedCallback(): Promise { super.connectedCallback(); this.canvasContext = this.canvas.getContext('2d', { willReadFrequently: true })!; + const { matrixRenderer } = await createMatrixRenderer(); + this.workerOne = matrixRenderer; + + const offscreenOne = this.canvasOne.transferControlToOffscreen(); + await this.workerOne.setCanvas( + transfer(offscreenOne, [ + offscreenOne as unknown as Transferable + ]) + ); + this.resizeObserver.observe(this); this.waferMapUpdateTracker.trackAll(); } - public override disconnectedCallback(): void { - super.disconnectedCallback(); - this.resizeObserver.unobserve(this); - } - /** * @internal * Update function called when an update is queued. diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index 9ff59e94b0..6ecab08bed 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -21,8 +21,8 @@ export const template = html` + - Date: Fri, 8 Mar 2024 17:16:35 +0200 Subject: [PATCH 03/27] changes --- .../build/generate-workers/source/matrix-renderer.ts | 6 ++++-- packages/nimble-components/src/theme-provider/index.ts | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) 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 1d39ef11c1..d6041a2eff 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 { WaferMap } from '../../../src/wafer-map'; /** * MatrixRenderer class is meant to be used within a Web Worker context, @@ -12,11 +13,12 @@ export class MatrixRenderer { private canvas!: OffscreenCanvas; private context!: OffscreenCanvasRenderingContext2D; - public setCanvas(canvas: OffscreenCanvas): void { + public setCanvas(canvas: OffscreenCanvas, waferMap: WaferMap): void { this.canvas = canvas; this.context = canvas.getContext('2d')!; this.context.fillStyle = 'red'; - this.context.fillRect(0, 0, 100, 100); + this.context.fillRect(0, 0, 300, 300); + console.log(waferMap); } public emptyMatrix(): void { diff --git a/packages/nimble-components/src/theme-provider/index.ts b/packages/nimble-components/src/theme-provider/index.ts index a047f9094b..48ef096bf5 100644 --- a/packages/nimble-components/src/theme-provider/index.ts +++ b/packages/nimble-components/src/theme-provider/index.ts @@ -22,8 +22,8 @@ declare global { function isValidLang(value: string): boolean { try { // We are relying on the Locale constructor to validate the value - // eslint-disable-next-line no-new - new Intl.Locale(value); + // eslint-disable-next-line no-new, no-console + console.log(value); return true; } catch (e) { return false; From 99c63a492b9f6f9d46a3ef7fe8be8d31701fff57 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Fri, 8 Mar 2024 17:31:34 +0200 Subject: [PATCH 04/27] Update package-lock.json --- package-lock.json | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index e7c463093f..540e80de72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12197,17 +12197,11 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, - "node_modules/@types/object.omit": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.3.tgz", - "integrity": "sha512-xrq4bQTBGYY2cw+gV4PzoG2Lv3L0pjZ1uXStRRDQoATOYW1lCsFQHhQ+OkPhIcQoqLjAq7gYif7D14Qaa6Zbew==", - "peer": true - }, - "node_modules/@types/object.pick": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.4.tgz", - "integrity": "sha512-5PjwB0uP2XDp3nt5u5NJAG2DORHIRClPzWT/TTZhJ2Ekwe8M5bA9tvPdi9NO/n2uvu2/ictat8kgqvLfcIE1SA==", - "peer": true + "node_modules/@types/offscreencanvas": { + "version": "2019.7.3", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz", + "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==", + "dev": true }, "node_modules/@types/parse-json": { "version": "4.0.2", @@ -33932,7 +33926,8 @@ "@storybook/html": "^7.6.13", "@storybook/html-webpack5": "^7.6.13", "@storybook/theming": "^7.6.13", - "@types/jasmine": "^4.3.1", + "@types/jasmine": "^5.1.4", + "@types/offscreencanvas": "^2019.7.3", "@types/webpack-env": "^1.15.2", "babel-loader": "^9.1.2", "circular-dependency-plugin": "^5.2.0", From b2bb7586958fceab011a5cf96bc8564cfac6a6fa Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Fri, 8 Mar 2024 17:48:52 +0200 Subject: [PATCH 05/27] changes --- .../build/generate-workers/source/matrix-renderer.ts | 4 +--- packages/nimble-components/src/theme-provider/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) 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 d6041a2eff..841957c067 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -1,5 +1,4 @@ import { expose } from 'comlink'; -import type { WaferMap } from '../../../src/wafer-map'; /** * MatrixRenderer class is meant to be used within a Web Worker context, @@ -13,12 +12,11 @@ export class MatrixRenderer { private canvas!: OffscreenCanvas; private context!: OffscreenCanvasRenderingContext2D; - public setCanvas(canvas: OffscreenCanvas, waferMap: WaferMap): void { + public setCanvas(canvas: OffscreenCanvas): void { this.canvas = canvas; this.context = canvas.getContext('2d')!; this.context.fillStyle = 'red'; this.context.fillRect(0, 0, 300, 300); - console.log(waferMap); } public emptyMatrix(): void { diff --git a/packages/nimble-components/src/theme-provider/index.ts b/packages/nimble-components/src/theme-provider/index.ts index 48ef096bf5..a047f9094b 100644 --- a/packages/nimble-components/src/theme-provider/index.ts +++ b/packages/nimble-components/src/theme-provider/index.ts @@ -22,8 +22,8 @@ declare global { function isValidLang(value: string): boolean { try { // We are relying on the Locale constructor to validate the value - // eslint-disable-next-line no-new, no-console - console.log(value); + // eslint-disable-next-line no-new + new Intl.Locale(value); return true; } catch (e) { return false; From 9a90542adf2df20e7433b3c7c0e26317f7eeb39d Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Tue, 12 Mar 2024 16:16:59 +0200 Subject: [PATCH 06/27] 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); }); }); From bf233ac2961d79e077fa7cb88c409bcae72e5e8e Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Tue, 12 Mar 2024 18:26:37 +0200 Subject: [PATCH 07/27] kinda working --- .../source/matrix-renderer.ts | 91 ++++++++++--------- .../nimble-components/src/wafer-map/index.ts | 12 ++- 2 files changed, 55 insertions(+), 48 deletions(-) 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 3b9b86e760..7b1dd7577f 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -19,6 +19,16 @@ export class MatrixRenderer { ]); 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]); + private dieDimensions: Dimensions = { width: 1, height: 1 }; + private transform: Transform = { k: 1, x: 0, y: 0 }; + + public setDieDimensions(dieDimensions: Dimensions): void { + this.dieDimensions = dieDimensions; + } + + public setTransform(transform: Transform): void { + this.transform = transform; + } public setCanvas(canvas: OffscreenCanvas): void { this.canvas = canvas; @@ -39,14 +49,14 @@ export class MatrixRenderer { this.values = Float32Array.from([]); } - public scaleCanvas(data: { transform: Transform }): void { + private scaleCanvas(): void { this.context.translate( - data.transform.x, - data.transform.y + this.transform.x, + this.transform.y ); this.context.scale( - data.transform.k, - data.transform.k + this.transform.k, + this.transform.k ); } @@ -63,61 +73,56 @@ export class MatrixRenderer { this.canvas.height = data.height; } - public drawWafer(transform: Transform, dieDimensions: Dimensions): void { - - console.log(transform); - - this.context.restore(); - - this.context.save(); - + private clearCanvas(): void { 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 - ); + public drawWafer(): void { + this.context.restore(); + this.context.save(); + this.clearCanvas(); + this.scaleCanvas(); 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); + if (!this.isDieVisible(x, y, { x: 0, y: 0 }, { x: 250, y: 250 })) { continue; } + this.context.fillRect(x, y, this.dieDimensions.width, this.dieDimensions.height); + this.addTextOnDie(x, y, i); + } + } + + private formatValue(value: number | undefined): string { + if (value === undefined) return ''; + return parseFloat(value.toFixed(1)) + '...'; + } - const fontSize = Math.floor(height * 0.35); - this.context.font = `${fontSize}px Arial`; - this.context.fillStyle = 'White'; + private addTextOnDie(x: number, y: number, i: number) { + const fontSize = Math.floor(this.dieDimensions.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; + const textX = x + this.dieDimensions.width / 2; + const textY = y + this.dieDimensions.height / 2; - // Check if the value has more than one decimal place - let formattedValue = parseFloat(this.values[i]!.toFixed(1)) + '...'; + let formattedValue = this.formatValue(this.values[i]); - // Adjust text alignment to center - this.context.textAlign = 'center'; - this.context.textBaseline = 'middle'; + this.context.textAlign = 'center'; + this.context.textBaseline = 'middle'; + this.context.fillText(formattedValue, textX, textY); + } - // Draw the formatted value in the center of the rectangle - this.context.fillText(formattedValue, textX, textY); - } - console.log(this); + private isDieVisible(x: number, y: number, topLeftCanvasCorner: { x: number, y: number }, bottomRightCanvasCorner: { x: number, y: number }): boolean { + return x >= topLeftCanvasCorner.x && + x <= bottomRightCanvasCorner.x && + y >= topLeftCanvasCorner.y && + y <= bottomRightCanvasCorner.y; } } expose(MatrixRenderer); \ 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 caa11efa17..82dd5e2dcb 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -213,6 +213,13 @@ export class WaferMap extends FoundationElement { if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) { this.dataManager.updateContainerDimensions(); this.renderer.updateSortedDiesAndDrawWafer(); + void this.workerOne.setDieDimensions(this.dataManager.dieDimensions); + void this.workerOne.setTransform(this.transform); + this.workerOne.drawWafer().then( + () => { + }, + () => { } + ); } else if (this.waferMapUpdateTracker.requiresScalesUpdate) { this.dataManager.updateScales(); this.renderer.updateSortedDiesAndDrawWafer(); @@ -233,11 +240,6 @@ 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 { From 492d05e51219929a5bc011e9284166e33c5984fa Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 14:28:14 +0200 Subject: [PATCH 08/27] data --- .../source/matrix-renderer.ts | 49 ++++++++++++++----- .../nimble-components/src/wafer-map/index.ts | 6 +++ 2 files changed, 43 insertions(+), 12 deletions(-) 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 7b1dd7577f..a175068290 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -13,15 +13,40 @@ export class MatrixRenderer { 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]); + private values = new Float32Array([]); + private scaledColIndex = new Float64Array([]); + private scaledRowIndex = new Float64Array([]); private dieDimensions: Dimensions = { width: 1, height: 1 }; private transform: Transform = { k: 1, x: 0, y: 0 }; + private topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; + private bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; + public setTopLeftCanvasCorner(topLeftCanvasCorner: { x: number, y: number }): void { + this.topLeftCanvasCorner = topLeftCanvasCorner; + } + + public setBottomRightCanvasCorner(bottomRightCanvasCorner: { x: number, y: number }): void { + this.bottomRightCanvasCorner = bottomRightCanvasCorner; + } + + public setColIndexes(colIndexes: Uint8Array): void { + this.colIndexes = colIndexes; + } + + public setRowIndexes(rowIndexes: Uint8Array): void { + this.rowIndexes = rowIndexes; + } + + public setValues(values: Float32Array): void { + this.values = values; + } + public setScaledColIndex(scaledColIndex: Float64Array): void { + this.scaledColIndex = scaledColIndex; + } + + public setScaledRowIndex(scaledRowIndex: Float64Array): void { + this.scaledRowIndex = scaledRowIndex; + } public setDieDimensions(dieDimensions: Dimensions): void { this.dieDimensions = dieDimensions; } @@ -92,7 +117,7 @@ export class MatrixRenderer { this.context.fillStyle = 'Blue'; const x = this.scaledColIndex[i]!; const y = this.scaledRowIndex[i]!; - if (!this.isDieVisible(x, y, { x: 0, y: 0 }, { x: 250, y: 250 })) { continue; } + if (!this.isDieVisible(x, y)) { continue; } this.context.fillRect(x, y, this.dieDimensions.width, this.dieDimensions.height); this.addTextOnDie(x, y, i); } @@ -118,11 +143,11 @@ export class MatrixRenderer { this.context.fillText(formattedValue, textX, textY); } - private isDieVisible(x: number, y: number, topLeftCanvasCorner: { x: number, y: number }, bottomRightCanvasCorner: { x: number, y: number }): boolean { - return x >= topLeftCanvasCorner.x && - x <= bottomRightCanvasCorner.x && - y >= topLeftCanvasCorner.y && - y <= bottomRightCanvasCorner.y; + private isDieVisible(x: number, y: number): boolean { + return x >= this.topLeftCanvasCorner.x && + x <= this.bottomRightCanvasCorner.x && + y >= this.topLeftCanvasCorner.y && + y <= this.bottomRightCanvasCorner.y; } } expose(MatrixRenderer); \ 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 82dd5e2dcb..2a5b1ce5b0 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -213,6 +213,12 @@ export class WaferMap extends FoundationElement { if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) { this.dataManager.updateContainerDimensions(); this.renderer.updateSortedDiesAndDrawWafer(); + void this.workerOne.setValues(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 + ])); + void this.workerOne.setScaledColIndex(new Float64Array([0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400])); + void this.workerOne.setScaledRowIndex(new Float64Array([200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200])); void this.workerOne.setDieDimensions(this.dataManager.dieDimensions); void this.workerOne.setTransform(this.transform); this.workerOne.drawWafer().then( From 43f5810a68a90d503083b8a7447345c22bc39c18 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 14:28:29 +0200 Subject: [PATCH 09/27] Update index.ts --- packages/nimble-components/src/wafer-map/index.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 2a5b1ce5b0..977cb28458 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -213,19 +213,6 @@ export class WaferMap extends FoundationElement { if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) { this.dataManager.updateContainerDimensions(); this.renderer.updateSortedDiesAndDrawWafer(); - void this.workerOne.setValues(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 - ])); - void this.workerOne.setScaledColIndex(new Float64Array([0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400])); - void this.workerOne.setScaledRowIndex(new Float64Array([200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200])); - void this.workerOne.setDieDimensions(this.dataManager.dieDimensions); - void this.workerOne.setTransform(this.transform); - this.workerOne.drawWafer().then( - () => { - }, - () => { } - ); } else if (this.waferMapUpdateTracker.requiresScalesUpdate) { this.dataManager.updateScales(); this.renderer.updateSortedDiesAndDrawWafer(); From a6c0d3456bab962fb43eb5fd097fc32a02fcdda6 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 14:32:31 +0200 Subject: [PATCH 10/27] Change files --- ...le-components-f866e449-14a0-410d-be26-c5570bf1006d.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json diff --git a/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json b/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json new file mode 100644 index 0000000000..697e43aa17 --- /dev/null +++ b/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "offscreencanvas working", + "packageName": "@ni/nimble-components", + "email": "razvan.nazare@ni.com", + "dependentChangeType": "patch" +} From ac418f3207b23667a044858f191302044abc084f Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 14:33:46 +0200 Subject: [PATCH 11/27] Update @ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json --- ...imble-components-f866e449-14a0-410d-be26-c5570bf1006d.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json b/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json index 697e43aa17..0b4ad347f7 100644 --- a/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json +++ b/change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json @@ -1,7 +1,7 @@ { "type": "patch", - "comment": "offscreencanvas working", + "comment": "Updated wafer map web worker class to support offscreen rendering", "packageName": "@ni/nimble-components", - "email": "razvan.nazare@ni.com", + "email": "110180309+Razvan1928@users.noreply.github.com", "dependentChangeType": "patch" } From e08e8496d6c6a1a46ca6e49bcb8113b79b2076f3 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 14:47:25 +0200 Subject: [PATCH 12/27] added tests, removed setters, made everything public --- .../source/matrix-renderer.ts | 71 +++++-------------- .../source/tests/matrix-renderer.spec.ts | 32 +++++++++ 2 files changed, 48 insertions(+), 55 deletions(-) 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 a175068290..634c03a141 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -9,56 +9,17 @@ import type { Dimensions, Transform, WaferMapMatrix, WaferMapTypedMatrix } from * This setup is used in the wafer-map component to perform heavy computational duties */ export class MatrixRenderer { - private colIndexes: Uint8Array = Uint8Array.from([]); - private rowIndexes: Uint8Array = Uint8Array.from([]); - private canvas!: OffscreenCanvas; - private context!: OffscreenCanvasRenderingContext2D; - private values = new Float32Array([]); - private scaledColIndex = new Float64Array([]); - private scaledRowIndex = new Float64Array([]); - private dieDimensions: Dimensions = { width: 1, height: 1 }; - private transform: Transform = { k: 1, x: 0, y: 0 }; - private topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; - private bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; - public setTopLeftCanvasCorner(topLeftCanvasCorner: { x: number, y: number }): void { - this.topLeftCanvasCorner = topLeftCanvasCorner; - } - - public setBottomRightCanvasCorner(bottomRightCanvasCorner: { x: number, y: number }): void { - this.bottomRightCanvasCorner = bottomRightCanvasCorner; - } - - public setColIndexes(colIndexes: Uint8Array): void { - this.colIndexes = colIndexes; - } - - public setRowIndexes(rowIndexes: Uint8Array): void { - this.rowIndexes = rowIndexes; - } - - public setValues(values: Float32Array): void { - this.values = values; - } - - public setScaledColIndex(scaledColIndex: Float64Array): void { - this.scaledColIndex = scaledColIndex; - } - - public setScaledRowIndex(scaledRowIndex: Float64Array): void { - this.scaledRowIndex = scaledRowIndex; - } - public setDieDimensions(dieDimensions: Dimensions): void { - this.dieDimensions = dieDimensions; - } - - public setTransform(transform: Transform): void { - this.transform = transform; - } - - public setCanvas(canvas: OffscreenCanvas): void { - this.canvas = canvas; - this.context = canvas.getContext('2d')!; - } + public colIndexes: Uint8Array = Uint8Array.from([]); + public rowIndexes: Uint8Array = Uint8Array.from([]); + public canvas!: OffscreenCanvas; + public context!: OffscreenCanvasRenderingContext2D; + public values = new Float32Array([]); + public scaledColIndex = new Float64Array([]); + public scaledRowIndex = new Float64Array([]); + public dieDimensions: Dimensions = { width: 1, height: 1 }; + public transform: Transform = { k: 1, x: 0, y: 0 }; + public topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; + public bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; public getMatrix(): WaferMapTypedMatrix { return { @@ -74,7 +35,7 @@ export class MatrixRenderer { this.values = Float32Array.from([]); } - private scaleCanvas(): void { + public scaleCanvas(): void { this.context.translate( this.transform.x, this.transform.y @@ -98,7 +59,7 @@ export class MatrixRenderer { this.canvas.height = data.height; } - private clearCanvas(): void { + public clearCanvas(): void { this.context.clearRect( 0, 0, @@ -123,12 +84,12 @@ export class MatrixRenderer { } } - private formatValue(value: number | undefined): string { + public formatValue(value: number | undefined): string { if (value === undefined) return ''; return parseFloat(value.toFixed(1)) + '...'; } - private addTextOnDie(x: number, y: number, i: number) { + public addTextOnDie(x: number, y: number, i: number) { const fontSize = Math.floor(this.dieDimensions.height * 0.35); this.context.font = `${fontSize}px Arial`; this.context.fillStyle = 'White'; @@ -143,7 +104,7 @@ export class MatrixRenderer { this.context.fillText(formattedValue, textX, textY); } - private isDieVisible(x: number, y: number): boolean { + public isDieVisible(x: number, y: number): boolean { return x >= this.topLeftCanvasCorner.x && x <= this.bottomRightCanvasCorner.x && y >= this.topLeftCanvasCorner.y && 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 0fc3b25e58..70c63ebb69 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 @@ -33,4 +33,36 @@ describe('MatrixRenderer with MessageChannel', () => { + updatedMatrix.rowIndexes.length + updatedMatrix.values.length).toEqual(0); }); + + it('should get the matrix', async () => { + const testData = { + colIndexes: [4, 1, 2], + rowIndexes: [54, 54, 62], + values: [8.12, 9.0, 0.32] + }; + + await matrixRenderer.updateMatrix(testData); + + const matrix = await matrixRenderer.getMatrix(); + + expect(matrix).toEqual({ + colIndexes: Uint8Array.from(testData.colIndexes), + rowIndexes: Uint8Array.from(testData.rowIndexes), + values: Float32Array.from(testData.values) + }); + }); + + it('should draw the wafer', async () => { + matrixRenderer.scaledColIndex = Promise.resolve(Float64Array.from([0.1, 0.2, 0.3])); + matrixRenderer.scaledRowIndex = Promise.resolve(Float64Array.from([0.4, 0.5, 0.6])); + spyOn(matrixRenderer, 'clearCanvas'); + spyOn(matrixRenderer, 'scaleCanvas'); + spyOn(matrixRenderer, 'addTextOnDie'); + + matrixRenderer.drawWafer(); + + expect(matrixRenderer.clearCanvas).toHaveBeenCalled(); + expect(matrixRenderer.scaleCanvas).toHaveBeenCalled(); + expect(matrixRenderer.addTextOnDie).toHaveBeenCalledTimes(3); + }); }); From e085d2f8069b16835f820c7ce2e7d489d09af3b6 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 16:42:20 +0200 Subject: [PATCH 13/27] Update matrix-renderer.ts --- .../build/generate-workers/source/matrix-renderer.ts | 5 +++++ 1 file changed, 5 insertions(+) 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 634c03a141..0cea061a8d 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -21,6 +21,11 @@ export class MatrixRenderer { public topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; public bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; + public setCanvas(canvas: OffscreenCanvas): void { + this.canvas = canvas; + this.context = canvas.getContext('2d')!; + } + public getMatrix(): WaferMapTypedMatrix { return { colIndexes: this.colIndexes, From a6340e1216965fb7d2c3923b250e24f4c53ba256 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 17:12:21 +0200 Subject: [PATCH 14/27] repaired tests --- .../generate-workers/source/matrix-renderer.ts | 4 ++-- .../source/tests/matrix-renderer.spec.ts | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) 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 0cea061a8d..e88af420ae 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -14,8 +14,8 @@ export class MatrixRenderer { public canvas!: OffscreenCanvas; public context!: OffscreenCanvasRenderingContext2D; public values = new Float32Array([]); - public scaledColIndex = new Float64Array([]); - public scaledRowIndex = new Float64Array([]); + public scaledColIndex = new Float32Array([]); + public scaledRowIndex = new Float32Array([]); public dieDimensions: Dimensions = { width: 1, height: 1 }; public transform: Transform = { k: 1, x: 0, y: 0 }; public topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; 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 70c63ebb69..d33ab0373f 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 @@ -43,18 +43,16 @@ describe('MatrixRenderer with MessageChannel', () => { await matrixRenderer.updateMatrix(testData); - const matrix = await matrixRenderer.getMatrix(); + await matrixRenderer.drawWafer(); - expect(matrix).toEqual({ - colIndexes: Uint8Array.from(testData.colIndexes), - rowIndexes: Uint8Array.from(testData.rowIndexes), - values: Float32Array.from(testData.values) - }); + expect(matrixRenderer.clearCanvas).toHaveBeenCalled(); + expect(matrixRenderer.scaleCanvas).toHaveBeenCalled(); + expect(matrixRenderer.addTextOnDie).toHaveBeenCalledTimes(3); }); it('should draw the wafer', async () => { - matrixRenderer.scaledColIndex = Promise.resolve(Float64Array.from([0.1, 0.2, 0.3])); - matrixRenderer.scaledRowIndex = Promise.resolve(Float64Array.from([0.4, 0.5, 0.6])); + const offscreenCanvas = new OffscreenCanvas(500, 500); + await matrixRenderer.setCanvas(offscreenCanvas); spyOn(matrixRenderer, 'clearCanvas'); spyOn(matrixRenderer, 'scaleCanvas'); spyOn(matrixRenderer, 'addTextOnDie'); From 90e0444b0dd7330c026d6dbd6cfe1dc88a69c5c9 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 17:25:45 +0200 Subject: [PATCH 15/27] Update index.ts --- packages/nimble-components/src/wafer-map/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 977cb28458..fd35274489 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -195,6 +195,11 @@ export class WaferMap extends FoundationElement { this.waferMapUpdateTracker.trackAll(); } + public override disconnectedCallback(): void { + super.disconnectedCallback(); + this.resizeObserver.unobserve(this); + } + /** * @internal * Update function called when an update is queued. From 926c724e2484840b3bb34807421cc8ebf7e96bc7 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Wed, 13 Mar 2024 17:32:33 +0200 Subject: [PATCH 16/27] repaired lint --- .../nimble-components/src/wafer-map/index.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index fd35274489..fc32d8713d 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -74,8 +74,8 @@ export class WaferMap extends FoundationElement { public colorScaleMode: WaferMapColorScaleMode = WaferMapColorScaleMode.linear; /** - * @internal - */ + * @internal + */ public workerOne!: Remote; /** @@ -84,8 +84,8 @@ export class WaferMap extends FoundationElement { public readonly canvas!: HTMLCanvasElement; /** - * @internal - */ + * @internal + */ public readonly canvasOne!: HTMLCanvasElement; /** @@ -186,9 +186,7 @@ export class WaferMap extends FoundationElement { const offscreenOne = this.canvasOne.transferControlToOffscreen(); await this.workerOne.setCanvas( - transfer(offscreenOne, [ - offscreenOne as unknown as Transferable - ]) + transfer(offscreenOne, [offscreenOne as unknown as Transferable]) ); this.resizeObserver.observe(this); @@ -259,9 +257,8 @@ export class WaferMap extends FoundationElement { this.canvasWidth = width; this.canvasHeight = height; this.workerOne.setCanvasDimensions({ width, height }).then( - () => { - }, - () => { } + () => {}, + () => {} ); }); return resizeObserver; From 7cdfe56128692b20611e8f4690f1a88d8079a85a Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 10:53:26 +0200 Subject: [PATCH 17/27] changed data types --- .../source/matrix-renderer.ts | 26 +++++++++++-------- .../source/tests/matrix-renderer.spec.ts | 6 ++--- .../build/generate-workers/source/types.ts | 6 ++--- .../tests/create-matrix-renderer.spec.ts | 6 ++--- 4 files changed, 24 insertions(+), 20 deletions(-) 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 e88af420ae..2468bb439c 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -9,18 +9,22 @@ import type { Dimensions, Transform, WaferMapMatrix, WaferMapTypedMatrix } from * This setup is used in the wafer-map component to perform heavy computational duties */ export class MatrixRenderer { - public colIndexes: Uint8Array = Uint8Array.from([]); - public rowIndexes: Uint8Array = Uint8Array.from([]); + public colIndexes: Uint32Array = Uint32Array.from([]); + public rowIndexes: Uint32Array = Uint32Array.from([]); public canvas!: OffscreenCanvas; public context!: OffscreenCanvasRenderingContext2D; - public values = new Float32Array([]); - public scaledColIndex = new Float32Array([]); - public scaledRowIndex = new Float32Array([]); + public values = new Float64Array([]); + public scaledColIndex = new Float64Array([]); + public scaledRowIndex = new Float64Array([]); public dieDimensions: Dimensions = { width: 1, height: 1 }; public transform: Transform = { k: 1, x: 0, y: 0 }; public topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; public bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; + public setTransform(transform: Transform): void { + this.transform = transform; + } + public setCanvas(canvas: OffscreenCanvas): void { this.canvas = canvas; this.context = canvas.getContext('2d')!; @@ -35,9 +39,9 @@ export class MatrixRenderer { } public emptyMatrix(): void { - this.colIndexes = Uint8Array.from([]); - this.rowIndexes = Uint8Array.from([]); - this.values = Float32Array.from([]); + this.colIndexes = Uint32Array.from([]); + this.rowIndexes = Uint32Array.from([]); + this.values = Float64Array.from([]); } public scaleCanvas(): void { @@ -54,9 +58,9 @@ export class MatrixRenderer { public updateMatrix( data: WaferMapMatrix ): void { - this.colIndexes = Uint8Array.from(data.colIndexes); - this.rowIndexes = Uint8Array.from(data.rowIndexes); - this.values = Float32Array.from(data.values); + this.colIndexes = Uint32Array.from(data.colIndexes); + this.rowIndexes = Uint32Array.from(data.rowIndexes); + this.values = Float64Array.from(data.values); } public setCanvasDimensions(data: Dimensions): void { 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 d33ab0373f..ddf0459d1d 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 @@ -18,9 +18,9 @@ describe('MatrixRenderer with MessageChannel', () => { const updatedMatrix = await matrixRenderer.getMatrix(); expect(updatedMatrix).toEqual( { - colIndexes: Uint8Array.from(testData.colIndexes), - rowIndexes: Uint8Array.from(testData.rowIndexes), - values: Float32Array.from(testData.values) + colIndexes: Uint32Array.from(testData.colIndexes), + rowIndexes: Uint32Array.from(testData.rowIndexes), + values: Float64Array.from(testData.values) } ); }); diff --git a/packages/nimble-components/build/generate-workers/source/types.ts b/packages/nimble-components/build/generate-workers/source/types.ts index 31293e02a5..8c85f425b2 100644 --- a/packages/nimble-components/build/generate-workers/source/types.ts +++ b/packages/nimble-components/build/generate-workers/source/types.ts @@ -1,7 +1,7 @@ export interface WaferMapTypedMatrix { - colIndexes: Uint8Array; - rowIndexes: Uint8Array; - values: Float32Array; + colIndexes: Uint32Array; + rowIndexes: Uint32Array; + values: Float64Array; } export interface WaferMapMatrix { 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 d836921c58..eb41a017ed 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 @@ -23,13 +23,13 @@ describe('MatrixRenderer worker', () => { const resolvedDieMatrix = await matrixRenderer.getMatrix(); expect(resolvedDieMatrix.colIndexes).toEqual( - Uint8Array.from(testData.colIndexes) + Uint32Array.from(testData.colIndexes) ); expect(resolvedDieMatrix.rowIndexes).toEqual( - Uint8Array.from(testData.rowIndexes) + Uint32Array.from(testData.rowIndexes) ); expect(resolvedDieMatrix.values).toEqual( - Float32Array.from(testData.values) + Float64Array.from(testData.values) ); }); From 913c26945307567eba174e1d6f913819784bc761 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 11:57:43 +0200 Subject: [PATCH 18/27] deleted text on dies --- .../generate-workers/source/matrix-renderer.ts | 16 ---------------- 1 file changed, 16 deletions(-) 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 2468bb439c..09da0b8f5c 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -89,7 +89,6 @@ export class MatrixRenderer { const y = this.scaledRowIndex[i]!; if (!this.isDieVisible(x, y)) { continue; } this.context.fillRect(x, y, this.dieDimensions.width, this.dieDimensions.height); - this.addTextOnDie(x, y, i); } } @@ -98,21 +97,6 @@ export class MatrixRenderer { return parseFloat(value.toFixed(1)) + '...'; } - public addTextOnDie(x: number, y: number, i: number) { - const fontSize = Math.floor(this.dieDimensions.height * 0.35); - this.context.font = `${fontSize}px Arial`; - this.context.fillStyle = 'White'; - - const textX = x + this.dieDimensions.width / 2; - const textY = y + this.dieDimensions.height / 2; - - let formattedValue = this.formatValue(this.values[i]); - - this.context.textAlign = 'center'; - this.context.textBaseline = 'middle'; - this.context.fillText(formattedValue, textX, textY); - } - public isDieVisible(x: number, y: number): boolean { return x >= this.topLeftCanvasCorner.x && x <= this.bottomRightCanvasCorner.x && From a26740da26c330ceb57ac1633f3470f7b5b6ae52 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 13:45:44 +0200 Subject: [PATCH 19/27] changed Float32 to Float64 --- .../nimble-components/src/wafer-map/tests/data-generator.ts | 2 +- packages/nimble-components/src/wafer-map/tests/sets.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/tests/data-generator.ts b/packages/nimble-components/src/wafer-map/tests/data-generator.ts index fff32e67e5..77cc8efa71 100644 --- a/packages/nimble-components/src/wafer-map/tests/data-generator.ts +++ b/packages/nimble-components/src/wafer-map/tests/data-generator.ts @@ -154,6 +154,6 @@ export const generateWaferTableData = ( return tableFromArrays({ colIndex: Int32Array.from(colIndex), rowIndex: Int32Array.from(rowIndex), - value: Float32Array.from(value) + value: Float64Array.from(value) }); }; diff --git a/packages/nimble-components/src/wafer-map/tests/sets.ts b/packages/nimble-components/src/wafer-map/tests/sets.ts index 3b26320e4c..80089b35ee 100644 --- a/packages/nimble-components/src/wafer-map/tests/sets.ts +++ b/packages/nimble-components/src/wafer-map/tests/sets.ts @@ -105,7 +105,7 @@ export const wafermapDiesTableSets: Table[] = [ tableFromArrays({ colIndex: Int32Array.from([0, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 4]), rowIndex: Int32Array.from([2, 2, 1, 3, 2, 1, 0, 3, 4, 2, 1, 3, 2]), - value: Float32Array.from([ + value: Float64Array.from([ 14.24, 76.43, 44.63, 67.93, 72.71, 79.04, 26.49, 37.79, 59.82, 52.9, 98.5, 20.83, 62.8 ]), From 724afb97fe9d24b82878b7f2d0368bd704c86b2a Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 13:46:02 +0200 Subject: [PATCH 20/27] added some experimental data in storybook --- .../src/wafer-map/modules/worker-renderer.ts | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts b/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts index 24dbcc8a73..01b5590156 100644 --- a/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts +++ b/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts @@ -5,7 +5,7 @@ import { HoverDieOpacity } from '../types'; * Responsible for drawing the dies inside the wafer map, adding dieText and scaling the canvas */ export class WorkerRenderer { - public constructor(private readonly wafermap: WaferMap) {} + public constructor(private readonly wafermap: WaferMap) { } public updateSortedDiesAndDrawWafer(): void { // redundant function for backwards compatibility @@ -13,8 +13,25 @@ export class WorkerRenderer { } public drawWafer(): void { + const testData = { + colIndexes: [0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400], + rowIndexes: [200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200], + values: [ + 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 + ] + }; + // rendering will be implemented in a future PR - this.renderHover(); + this.wafermap.workerOne.setTransform(this.wafermap.transform).then(() => { + this.wafermap.workerOne.updateMatrix( + testData + ).then(() => { + this.wafermap.workerOne.drawWafer().then(() => { + this.renderHover(); + }, () => { }); + }, () => { }); + }, () => { }); } public renderHover(): void { From b6bfba6c43f504d73999a30517ce8338c991f566 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 13:47:04 +0200 Subject: [PATCH 21/27] deleted experimental data --- .../src/wafer-map/modules/worker-renderer.ts | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts b/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts index 01b5590156..101e29ce8e 100644 --- a/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts +++ b/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts @@ -13,25 +13,7 @@ export class WorkerRenderer { } public drawWafer(): void { - const testData = { - colIndexes: [0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400], - rowIndexes: [200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200], - values: [ - 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 - ] - }; - // rendering will be implemented in a future PR - this.wafermap.workerOne.setTransform(this.wafermap.transform).then(() => { - this.wafermap.workerOne.updateMatrix( - testData - ).then(() => { - this.wafermap.workerOne.drawWafer().then(() => { - this.renderHover(); - }, () => { }); - }, () => { }); - }, () => { }); } public renderHover(): void { From 6f5b3f3ca156743f8d6162f39fd9c4264ba833c2 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 13:47:54 +0200 Subject: [PATCH 22/27] put back not needed to be deleted line --- .../nimble-components/src/wafer-map/modules/worker-renderer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts b/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts index 101e29ce8e..bb31657b29 100644 --- a/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts +++ b/packages/nimble-components/src/wafer-map/modules/worker-renderer.ts @@ -14,6 +14,7 @@ export class WorkerRenderer { public drawWafer(): void { // rendering will be implemented in a future PR + this.renderHover(); } public renderHover(): void { From ff364f695375b5f8487bb3413885a1460a05abd6 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Thu, 14 Mar 2024 17:54:08 +0200 Subject: [PATCH 23/27] added text on dies and color scaling --- .../source/matrix-renderer.ts | 69 +++++++++++++++++-- .../nimble-components/src/wafer-map/index.ts | 1 + 2 files changed, 65 insertions(+), 5 deletions(-) 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 09da0b8f5c..02a00ee7ec 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -1,5 +1,7 @@ import { expose } from 'comlink'; import type { Dimensions, Transform, WaferMapMatrix, WaferMapTypedMatrix } from './types'; +import type { ScaleLinear, scaleLinear, ScaleOrdinal, scaleOrdinal } from 'd3-scale'; +import { ColorRGBA64, parseColor } from '@microsoft/fast-colors'; /** * MatrixRenderer class is meant to be used within a Web Worker context, @@ -13,13 +15,21 @@ export class MatrixRenderer { public rowIndexes: Uint32Array = Uint32Array.from([]); public canvas!: OffscreenCanvas; public context!: OffscreenCanvasRenderingContext2D; - public values = new Float64Array([]); - public scaledColIndex = new Float64Array([]); - public scaledRowIndex = new Float64Array([]); - public dieDimensions: Dimensions = { width: 1, height: 1 }; + public values = new Float64Array([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]); + public scaledColIndex = new Float64Array([0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400]); + public scaledRowIndex = new Float64Array([200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200]); + public dieDimensions: Dimensions = { width: 100, height: 100 }; public transform: Transform = { k: 1, x: 0, y: 0 }; public topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; public bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; + public colors: string[] = ['red', 'yellow', 'green', 'blue', 'purple']; + public colorsValues = new Float64Array([0, 25, 50, 75, 100]); + + private readonly emptyDieColor = 'rgba(218,223,236,1)'; + private readonly nanDieColor = 'rgba(122,122,122,1)'; + private readonly fontSizeFactor = 0.35; + private fontSize = 12; public setTransform(transform: Transform): void { this.transform = transform; @@ -82,16 +92,65 @@ export class MatrixRenderer { this.context.save(); this.clearCanvas(); this.scaleCanvas(); + this.calculateLabelsFontSize(1); + this.parseDies(); + } + public parseDies(): void{ for (let i = 0; i < this.scaledColIndex.length; i++) { - this.context.fillStyle = 'Blue'; + if (this.dieHasData(this.values[i]!.toString()) === false) { continue; } + const nearestValue = this.findNearestValue(this.colorsValues, this.values[i]!); + this.context.fillStyle = this.colors[this.colorsValues.indexOf(nearestValue)]!; const x = this.scaledColIndex[i]!; const y = this.scaledRowIndex[i]!; if (!this.isDieVisible(x, y)) { continue; } this.context.fillRect(x, y, this.dieDimensions.width, this.dieDimensions.height); + this.addTextOnDie(x, y, i); } } + public findNearestValue(arr: Float64Array, target: number): number { + let start = 0; + let end = arr.length - 1; + + while (start <= end) { + let mid = Math.floor((start + end) / 2); + if (arr[mid] === target) return arr[mid] as number; + if (arr[mid]! < target) start = mid + 1; + else end = mid - 1; + } + + return ((arr[start]! - target) < (target - arr[start - 1]!) ? arr[start] : arr[start - 1]) as number; + } + + private calculateLabelsFontSize( + maxCharacters: number + ): void { + this.fontSize = Math.min( + this.dieDimensions.height, + (this.dieDimensions.width / (Math.max(2, maxCharacters) * 0.5)) + * this.fontSizeFactor + ); + } + + private dieHasData(dieData: string): boolean { + return dieData !== null && dieData !== undefined && dieData !== ''; + } + + public addTextOnDie(x: number, y: number, i: number) { + this.context.font = `${this.fontSize}px sans-serif`; + this.context.fillStyle = 'White'; + + const textX = x + this.dieDimensions.width / 2; + const textY = y + this.dieDimensions.height / 2; + + let formattedValue = this.formatValue(this.values[i]); + + this.context.textAlign = 'center'; + this.context.textBaseline = 'middle'; + this.context.fillText(formattedValue, textX, textY); + } + public formatValue(value: number | undefined): string { if (value === undefined) return ''; return parseFloat(value.toFixed(1)) + '...'; diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index fc32d8713d..a3bc7c6acc 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -232,6 +232,7 @@ export class WaferMap extends FoundationElement { } else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) { this.renderer.drawWafer(); } + this.workerOne.drawWafer(); this.eventCoordinator.attachEvents(); } else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) { this.renderer.renderHover(); From 8be833788c3ceb3f46a04b6ba4b11b0591dd6afe Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Mon, 18 Mar 2024 11:32:51 +0200 Subject: [PATCH 24/27] Update rendering.ts --- packages/nimble-components/src/wafer-map/modules/rendering.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/wafer-map/modules/rendering.ts b/packages/nimble-components/src/wafer-map/modules/rendering.ts index 31e0456183..e201d19266 100644 --- a/packages/nimble-components/src/wafer-map/modules/rendering.ts +++ b/packages/nimble-components/src/wafer-map/modules/rendering.ts @@ -98,7 +98,7 @@ export class RenderingModule { private renderText(): void { if (this.wafermap.dieLabelsHidden) { - return; + return; } const dieWidth = this.wafermap.dataManager.dieDimensions.width; const dieHeight = this.wafermap.dataManager.dieDimensions.height; From e15d9dff41cbb55b113e5cf5c109385edc6f2970 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Mon, 18 Mar 2024 13:55:31 +0200 Subject: [PATCH 25/27] Update matrix-renderer.ts --- .../source/matrix-renderer.ts | 45 +++++++++++-------- 1 file changed, 27 insertions(+), 18 deletions(-) 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 02a00ee7ec..0278c14fa8 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -1,7 +1,5 @@ import { expose } from 'comlink'; import type { Dimensions, Transform, WaferMapMatrix, WaferMapTypedMatrix } from './types'; -import type { ScaleLinear, scaleLinear, ScaleOrdinal, scaleOrdinal } from 'd3-scale'; -import { ColorRGBA64, parseColor } from '@microsoft/fast-colors'; /** * MatrixRenderer class is meant to be used within a Web Worker context, @@ -15,8 +13,8 @@ export class MatrixRenderer { public rowIndexes: Uint32Array = Uint32Array.from([]); public canvas!: OffscreenCanvas; public context!: OffscreenCanvasRenderingContext2D; - public values = new Float64Array([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]); + public values = new Float64Array([14.24, 76.43, 44.63, 67.93, 72.71, 79.04, 26.49, 137.79, 59.82, 52.92, + 98.53, 20.83, 462.81]); public scaledColIndex = new Float64Array([0, 100, 100, 100, 200, 200, 200, 200, 200, 300, 300, 300, 400]); public scaledRowIndex = new Float64Array([200, 200, 100, 300, 200, 100, 0, 300, 400, 200, 100, 300, 200]); public dieDimensions: Dimensions = { width: 100, height: 100 }; @@ -24,11 +22,12 @@ export class MatrixRenderer { public topLeftCanvasCorner: { x: number, y: number } = { x: 0, y: 0 }; public bottomRightCanvasCorner: { x: number, y: number } = { x: 500, y: 500 }; public colors: string[] = ['red', 'yellow', 'green', 'blue', 'purple']; - public colorsValues = new Float64Array([0, 25, 50, 75, 100]); + public colorsValues = new Float64Array([50, 0, 25, 75, 100]); + public maxCharactersOnDies: number = 6; + public isDieLabelHidden: boolean = true; - private readonly emptyDieColor = 'rgba(218,223,236,1)'; - private readonly nanDieColor = 'rgba(122,122,122,1)'; - private readonly fontSizeFactor = 0.35; + private readonly outsideRangeDieColor = 'rgba(218,223,236,1)'; + private readonly fontSizeFactor = 0.8; private fontSize = 12; public setTransform(transform: Transform): void { @@ -92,35 +91,45 @@ export class MatrixRenderer { this.context.save(); this.clearCanvas(); this.scaleCanvas(); - this.calculateLabelsFontSize(1); + this.calculateLabelsFontSize(6); + this.colorsValues.sort((a, b) => a - b); this.parseDies(); } - public parseDies(): void{ + public parseDies(): void { for (let i = 0; i < this.scaledColIndex.length; i++) { - if (this.dieHasData(this.values[i]!.toString()) === false) { continue; } - const nearestValue = this.findNearestValue(this.colorsValues, this.values[i]!); - this.context.fillStyle = this.colors[this.colorsValues.indexOf(nearestValue)]!; + const currentDieValue = this.values[i]!; + if (this.dieHasData(currentDieValue.toString()) === false) { continue; } + if (this.isValueInRange(currentDieValue)) { + const nearestValue = this.findNearestValue(currentDieValue); + this.context.fillStyle = this.colors[this.colorsValues.indexOf(nearestValue)]!; + } + else { this.context.fillStyle = this.outsideRangeDieColor; } const x = this.scaledColIndex[i]!; const y = this.scaledRowIndex[i]!; if (!this.isDieVisible(x, y)) { continue; } this.context.fillRect(x, y, this.dieDimensions.width, this.dieDimensions.height); + if (this.isDieLabelHidden === true) { continue } this.addTextOnDie(x, y, i); } } - public findNearestValue(arr: Float64Array, target: number): number { + public isValueInRange(value: number): boolean { + return value >= this.colorsValues[0]! && value <= this.colorsValues[this.colorsValues.length - 1]!; + } + + public findNearestValue(target: number): number { let start = 0; - let end = arr.length - 1; + let end = this.colorsValues.length - 1; while (start <= end) { let mid = Math.floor((start + end) / 2); - if (arr[mid] === target) return arr[mid] as number; - if (arr[mid]! < target) start = mid + 1; + if (this.colorsValues[mid] === target) return this.colorsValues[mid] as number; + if (this.colorsValues[mid]! < target) start = mid + 1; else end = mid - 1; } - return ((arr[start]! - target) < (target - arr[start - 1]!) ? arr[start] : arr[start - 1]) as number; + return ((this.colorsValues[start]! - target) < (target - this.colorsValues[start - 1]!) ? this.colorsValues[start] : this.colorsValues[start - 1]) as number; } private calculateLabelsFontSize( From 39edea7dedae8c99b499afd9e2c6783a3b7d2aaf Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Mon, 18 Mar 2024 14:13:28 +0200 Subject: [PATCH 26/27] Update matrix-renderer.ts --- .../build/generate-workers/source/matrix-renderer.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 0278c14fa8..624a7f6fbe 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -101,8 +101,8 @@ export class MatrixRenderer { const currentDieValue = this.values[i]!; if (this.dieHasData(currentDieValue.toString()) === false) { continue; } if (this.isValueInRange(currentDieValue)) { - const nearestValue = this.findNearestValue(currentDieValue); - this.context.fillStyle = this.colors[this.colorsValues.indexOf(nearestValue)]!; + const nearestValueIndex = this.findNearestValueIndex(currentDieValue); + this.context.fillStyle = this.colors[nearestValueIndex]!; } else { this.context.fillStyle = this.outsideRangeDieColor; } const x = this.scaledColIndex[i]!; @@ -118,18 +118,18 @@ export class MatrixRenderer { return value >= this.colorsValues[0]! && value <= this.colorsValues[this.colorsValues.length - 1]!; } - public findNearestValue(target: number): number { + public findNearestValueIndex(dieValue: number): number { let start = 0; let end = this.colorsValues.length - 1; while (start <= end) { let mid = Math.floor((start + end) / 2); - if (this.colorsValues[mid] === target) return this.colorsValues[mid] as number; - if (this.colorsValues[mid]! < target) start = mid + 1; + if (this.colorsValues[mid] === dieValue) return mid; + if (this.colorsValues[mid]! < dieValue) start = mid + 1; else end = mid - 1; } - return ((this.colorsValues[start]! - target) < (target - this.colorsValues[start - 1]!) ? this.colorsValues[start] : this.colorsValues[start - 1]) as number; + return (this.colorsValues[start]! - dieValue) < (dieValue - this.colorsValues[start - 1]!) ? start : start - 1; } private calculateLabelsFontSize( From 4c3ad9053c239d83b02419b50b2648cc31590d79 Mon Sep 17 00:00:00 2001 From: Razvan Nazare Date: Mon, 18 Mar 2024 18:31:50 +0200 Subject: [PATCH 27/27] Update matrix-renderer.ts --- .../source/matrix-renderer.ts | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) 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 624a7f6fbe..a2f5022778 100644 --- a/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts +++ b/packages/nimble-components/build/generate-workers/source/matrix-renderer.ts @@ -99,7 +99,6 @@ export class MatrixRenderer { public parseDies(): void { for (let i = 0; i < this.scaledColIndex.length; i++) { const currentDieValue = this.values[i]!; - if (this.dieHasData(currentDieValue.toString()) === false) { continue; } if (this.isValueInRange(currentDieValue)) { const nearestValueIndex = this.findNearestValueIndex(currentDieValue); this.context.fillStyle = this.colors[nearestValueIndex]!; @@ -109,9 +108,9 @@ export class MatrixRenderer { const y = this.scaledRowIndex[i]!; if (!this.isDieVisible(x, y)) { continue; } this.context.fillRect(x, y, this.dieDimensions.width, this.dieDimensions.height); - if (this.isDieLabelHidden === true) { continue } - this.addTextOnDie(x, y, i); } + if (this.isDieLabelHidden === true) { return; } + this.addTextOnDies(); } public isValueInRange(value: number): boolean { @@ -146,18 +145,20 @@ export class MatrixRenderer { return dieData !== null && dieData !== undefined && dieData !== ''; } - public addTextOnDie(x: number, y: number, i: number) { - this.context.font = `${this.fontSize}px sans-serif`; - this.context.fillStyle = 'White'; + public addTextOnDies() { + for (let i = 0; i < this.scaledColIndex.length; i++) { + this.context.font = `${this.fontSize}px sans-serif`; + this.context.fillStyle = 'White'; - const textX = x + this.dieDimensions.width / 2; - const textY = y + this.dieDimensions.height / 2; + const textX = this.scaledColIndex[i]! + this.dieDimensions.width / 2; + const textY = this.scaledRowIndex[i]! + this.dieDimensions.height / 2; - let formattedValue = this.formatValue(this.values[i]); + let formattedValue = this.formatValue(this.values[i]); - this.context.textAlign = 'center'; - this.context.textBaseline = 'middle'; - this.context.fillText(formattedValue, textX, textY); + this.context.textAlign = 'center'; + this.context.textBaseline = 'middle'; + this.context.fillText(formattedValue, textX, textY); + } } public formatValue(value: number | undefined): string {