From 0fd350337eb1f28e827b520cc42f07383a1ca369 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Sat, 11 Apr 2026 08:54:51 +0200 Subject: [PATCH 1/4] adopt globalCompositeOperation, test the color converter cache for opacity --- src/marks/raster.js | 2 +- test/output/rasterOpacityCache.svg | 67 ++++++++++++++++++++++++++++++ test/plots/raster-precision.ts | 15 +++++++ 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 test/output/rasterOpacityCache.svg diff --git a/src/marks/raster.js b/src/marks/raster.js index 4d541563a0..d408f098a7 100644 --- a/src/marks/raster.js +++ b/src/marks/raster.js @@ -507,11 +507,11 @@ function getColorConverter(colorSpace, {document}) { canvas.width = 1; canvas.height = 1; const context = canvas.getContext("2d", {colorSpace, willReadFrequently: true}); + context.globalCompositeOperation = "copy"; return (color) => { if (color == null) return transparent; let data = cache.get(color); if (data !== undefined) return data; - context.clearRect(0, 0, 1, 1); context.fillStyle = color; context.fillRect(0, 0, 1, 1); data = context.getImageData(0, 0, 1, 1).data; diff --git a/test/output/rasterOpacityCache.svg b/test/output/rasterOpacityCache.svg new file mode 100644 index 0000000000..078dd575df --- /dev/null +++ b/test/output/rasterOpacityCache.svg @@ -0,0 +1,67 @@ + + + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + + + + 0.0 + 0.5 + 1.0 + 1.5 + 2.0 + 2.5 + 3.0 + 3.5 + 4.0 + + + + + \ No newline at end of file diff --git a/test/plots/raster-precision.ts b/test/plots/raster-precision.ts index ced5801cc1..0924b3070e 100644 --- a/test/plots/raster-precision.ts +++ b/test/plots/raster-precision.ts @@ -39,3 +39,18 @@ test(async function rasterFacet() { ] }); }); + +test(async function rasterOpacityCache() { + // Test the opacity cache in the color converter +return Plot.plot({ + marks: [ + Plot.raster({ + width: 4, + height: 10, + imageRendering: "pixelated", + fill: (x: number, y: number) => + x < 2 ? d3.schemeObservable10[y | 0] : "rgba(128, 128, 128, 0.5)" + }) + ] + }); +}); From cf1fe94be46c319e19b1216a356e3e64568ef93f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Sat, 11 Apr 2026 08:58:35 +0200 Subject: [PATCH 2/4] preddier --- test/plots/raster-precision.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/test/plots/raster-precision.ts b/test/plots/raster-precision.ts index 0924b3070e..72a6c53419 100644 --- a/test/plots/raster-precision.ts +++ b/test/plots/raster-precision.ts @@ -42,14 +42,13 @@ test(async function rasterFacet() { test(async function rasterOpacityCache() { // Test the opacity cache in the color converter -return Plot.plot({ + return Plot.plot({ marks: [ Plot.raster({ width: 4, height: 10, imageRendering: "pixelated", - fill: (x: number, y: number) => - x < 2 ? d3.schemeObservable10[y | 0] : "rgba(128, 128, 128, 0.5)" + fill: (x: number, y: number) => (x < 2 ? d3.schemeObservable10[y | 0] : "rgba(128, 128, 128, 0.5)") }) ] }); From ac9f84797eb2199aa516f694b6d4e4a99d9b6b29 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sat, 11 Apr 2026 12:35:19 -0700 Subject: [PATCH 3/4] restore clearRect; rename test --- src/marks/raster.js | 2 +- test/output/rasterMixedOpacity.svg | 67 ++++++++++++++++++++++++++++++ test/plots/raster-precision.ts | 5 +-- 3 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 test/output/rasterMixedOpacity.svg diff --git a/src/marks/raster.js b/src/marks/raster.js index d408f098a7..4d541563a0 100644 --- a/src/marks/raster.js +++ b/src/marks/raster.js @@ -507,11 +507,11 @@ function getColorConverter(colorSpace, {document}) { canvas.width = 1; canvas.height = 1; const context = canvas.getContext("2d", {colorSpace, willReadFrequently: true}); - context.globalCompositeOperation = "copy"; return (color) => { if (color == null) return transparent; let data = cache.get(color); if (data !== undefined) return data; + context.clearRect(0, 0, 1, 1); context.fillStyle = color; context.fillRect(0, 0, 1, 1); data = context.getImageData(0, 0, 1, 1).data; diff --git a/test/output/rasterMixedOpacity.svg b/test/output/rasterMixedOpacity.svg new file mode 100644 index 0000000000..ee8bf1d8ec --- /dev/null +++ b/test/output/rasterMixedOpacity.svg @@ -0,0 +1,67 @@ + + + + + 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + + + + 0.0 + 0.5 + 1.0 + 1.5 + 2.0 + 2.5 + 3.0 + 3.5 + 4.0 + + + + + \ No newline at end of file diff --git a/test/plots/raster-precision.ts b/test/plots/raster-precision.ts index 72a6c53419..059589afd5 100644 --- a/test/plots/raster-precision.ts +++ b/test/plots/raster-precision.ts @@ -40,15 +40,14 @@ test(async function rasterFacet() { }); }); -test(async function rasterOpacityCache() { - // Test the opacity cache in the color converter +test(async function rasterMixedOpacity() { return Plot.plot({ marks: [ Plot.raster({ width: 4, height: 10, imageRendering: "pixelated", - fill: (x: number, y: number) => (x < 2 ? d3.schemeObservable10[y | 0] : "rgba(128, 128, 128, 0.5)") + fill: (x: number, y: number) => (x < 2 ? d3.schemeObservable10[y | 0] : `rgba(128, 128, 128, ${y / 10})`) }) ] }); From fa1e9c5b8143d84878e263d063fa28a46cb59354 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sat, 11 Apr 2026 12:35:54 -0700 Subject: [PATCH 4/4] remove old snapshot --- test/output/rasterOpacityCache.svg | 67 ------------------------------ 1 file changed, 67 deletions(-) delete mode 100644 test/output/rasterOpacityCache.svg diff --git a/test/output/rasterOpacityCache.svg b/test/output/rasterOpacityCache.svg deleted file mode 100644 index 078dd575df..0000000000 --- a/test/output/rasterOpacityCache.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - - 0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - - - - 0.0 - 0.5 - 1.0 - 1.5 - 2.0 - 2.5 - 3.0 - 3.5 - 4.0 - - - - - \ No newline at end of file