@mui/x-charts-premium 9.0.3 → 9.1.0

package/HeatmapPremium/webgl/HeatmapWebGLPlot.mjs

@@ -2,11 +2,9 @@
 
 import * as React from 'react';
 import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { useWebGLLayer } from "../../ChartsWebGLLayer/ChartsWebGLContext.mjs";
 import { useHeatmapSeriesContext } from "../../hooks/index.mjs";
-import { heatmapFragmentShaderSourceNoBorderRadius, heatmapFragmentShaderSourceWithBorderRadius, heatmapVertexShaderSource } from "./shaders.mjs";
-import { attachShader, bindQuadBuffer, compileShader, logWebGLErrors, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { HeatmapWebGLProgram } from "./HeatmapWebGLProgram.mjs";
 import { useHeatmapPlotData } from "./useHeatmapPlotData.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function HeatmapWebGLPlot({
@@ -37,135 +35,45 @@ function HeatmapWebGLPlotImpl(props) {
   const drawingArea = useDrawingArea();
   const xScale = useXScale();
   const yScale = useYScale();
-  const [vertexShader] = React.useState(() => compileShader(gl, heatmapVertexShaderSource, gl.VERTEX_SHADER));
-  const [program] = React.useState(() => {
-    const p = gl.createProgram();
-    gl.attachShader(p, vertexShader);
-    return p;
-  });
-  const [quadBuffer] = React.useState(() => uploadQuadBuffer(gl));
+  const [program, setProgram] = React.useState(null);
   const dataLength = series.data.length;
   const drawRef = React.useRef(null);
   React.useEffect(() => {
     drawRef.current = () => {
-      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+      program?.render(dataLength);
     };
-  }, [gl, dataLength]);
+  }, [program, dataLength]);
   React.useEffect(() => {
     const unregister = registerDraw(drawRef);
     return unregister;
   }, [registerDraw]);
   React.useEffect(() => {
-    /* Enable blending for transparency
-     * These are global to the WebGL context and need to be set only once */
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    const prog = new HeatmapWebGLProgram(gl);
+    setProgram(prog);
+    return () => {
+      prog.dispose();
+    };
   }, [gl]);
   const width = xScale.bandwidth();
   const height = yScale.bandwidth();
-
-  // A border radius cannot be larger than half the width or height of the rectangle
+  /* A border radius cannot be larger than half the width or height of the rectangle. */
   const seriesBorderRadius = Math.min(borderRadius ?? 0, width / 2, height / 2);
-  const lastSeriesBorderRadiusRef = React.useRef(seriesBorderRadius > 0 ? 0 : 1);
-  const setupResolutionUniform = React.useCallback(() => {
-    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), drawingArea.width, drawingArea.height);
-  }, [drawingArea.height, drawingArea.width, gl, program]);
-  const setupBorderRadiusUniform = React.useCallback(() => {
-    gl.uniform1f(gl.getUniformLocation(program, 'u_borderRadius'), seriesBorderRadius);
-  }, [gl, program, seriesBorderRadius]);
-  const setupRectDimensionsUniform = React.useCallback(() => {
-    gl.uniform2f(gl.getUniformLocation(program, 'u_dimensions'), width, height);
-  }, [gl, height, program, width]);
-  const setupUniformsEvent = useEventCallback(() => {
-    bindQuadBuffer(gl, program, quadBuffer);
-    setupBorderRadiusUniform();
-    setupResolutionUniform();
-    setupRectDimensionsUniform();
-  });
-  const plotData = useHeatmapPlotData(drawingArea, series, xScale, yScale);
-  const setupAttributes = React.useCallback(() => {
-    const {
-      centers,
-      colors,
-      saturations
-    } = plotData;
-
-    // Upload rectangle centers
-    const centerBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, centers, gl.STATIC_DRAW);
-    const aCenter = gl.getAttribLocation(program, 'a_center');
-    gl.enableVertexAttribArray(aCenter);
-    gl.vertexAttribPointer(aCenter, 2, gl.FLOAT, false, 0, 0);
-
-    // This makes the attribute instanced (one value per rectangle, not per vertex)
-    gl.vertexAttribDivisor(aCenter, 1);
-
-    // Upload colors
-    const colorBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
-    const aColor = gl.getAttribLocation(program, 'a_color');
-    gl.enableVertexAttribArray(aColor);
-    gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0);
-    gl.vertexAttribDivisor(aColor, 1);
-
-    // Upload saturations
-    const saturationBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, saturationBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, saturations, gl.STATIC_DRAW);
-    const aSaturation = gl.getAttribLocation(program, 'a_saturation');
-    gl.enableVertexAttribArray(aSaturation);
-    gl.vertexAttribPointer(aSaturation, 1, gl.FLOAT, false, 0, 0);
-    gl.vertexAttribDivisor(aSaturation, 1);
-  }, [gl, plotData, program]);
-  const setupAttributesEvent = useEventCallback(() => setupAttributes());
   React.useEffect(() => {
-    const shouldAttachNewShader = lastSeriesBorderRadiusRef.current > 0 !== seriesBorderRadius > 0;
-    lastSeriesBorderRadiusRef.current = seriesBorderRadius;
-    if (shouldAttachNewShader) {
-      const shaderSource = seriesBorderRadius > 0 ? heatmapFragmentShaderSourceWithBorderRadius : heatmapFragmentShaderSourceNoBorderRadius;
-      gl.getAttachedShaders(program)?.forEach(shader => {
-        const shaderType = gl.getShaderParameter(shader, gl.SHADER_TYPE);
-        if (shaderType === gl.FRAGMENT_SHADER) {
-          gl.detachShader(program, shader);
-          gl.deleteShader(shader);
-        }
-      });
-      const fragmentShader = attachShader(gl, program, shaderSource, gl.FRAGMENT_SHADER);
-      gl.linkProgram(program);
-
-      // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails
-      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        console.error(`Program linking failed: ${gl.getProgramInfoLog(program)}`);
-        console.error(`Vertex shader info-log: ${gl.getShaderInfoLog(vertexShader)}`);
-        console.error(`Fragment shader info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
-      }
-
-      // Not a hook
-      // eslint-disable-next-line react-compiler/react-compiler
-      gl.useProgram(program);
-      logWebGLErrors(gl);
-      setupUniformsEvent();
-      setupAttributesEvent();
-    } else {
-      setupBorderRadiusUniform();
-    }
+    program?.setResolution(drawingArea.width, drawingArea.height);
     requestRender();
-  }, [gl, program, requestRender, seriesBorderRadius, setupBorderRadiusUniform,
-  // We use the event callback versions here because we only want this effect to trigger when the border radius changes
-  setupAttributesEvent, setupUniformsEvent, vertexShader]);
+  }, [drawingArea.height, drawingArea.width, program, requestRender]);
   React.useEffect(() => {
-    setupResolutionUniform();
+    program?.setRectDimensions(width, height);
     requestRender();
-  }, [setupResolutionUniform, requestRender]);
+  }, [width, height, program, requestRender]);
   React.useEffect(() => {
-    setupRectDimensionsUniform();
+    program?.setBorderRadius(seriesBorderRadius);
     requestRender();
-  }, [setupRectDimensionsUniform, requestRender]);
+  }, [seriesBorderRadius, program, requestRender]);
+  const plotData = useHeatmapPlotData(drawingArea, series, xScale, yScale);
   React.useEffect(() => {
-    setupAttributes();
+    program?.plot(plotData);
     requestRender();
-  }, [requestRender, setupAttributes]);
+  }, [plotData, program, requestRender]);
   return null;
 }

package/HeatmapPremium/webgl/HeatmapWebGLProgram.d.mts

@@ -0,0 +1,24 @@
+export interface HeatmapPlotData {
+  centers: Float32Array;
+  colors: Uint8Array;
+  saturations: Float32Array;
+}
+export declare class HeatmapWebGLProgram {
+  private gl;
+  private readonly shaders;
+  private readonly quadBuffer;
+  private readonly centers;
+  private readonly colors;
+  private readonly saturations;
+  private readonly flatVariant;
+  private readonly roundedVariant;
+  private active;
+  constructor(gl: WebGL2RenderingContext);
+  private buildVariant;
+  setBorderRadius(borderRadius: number): void;
+  setResolution(width: number, height: number): void;
+  setRectDimensions(width: number, height: number): void;
+  plot(plotData: HeatmapPlotData): void;
+  render(dataLength: number): void;
+  dispose(): void;
+}

package/HeatmapPremium/webgl/HeatmapWebGLProgram.d.ts

@@ -0,0 +1,24 @@
+export interface HeatmapPlotData {
+  centers: Float32Array;
+  colors: Uint8Array;
+  saturations: Float32Array;
+}
+export declare class HeatmapWebGLProgram {
+  private gl;
+  private readonly shaders;
+  private readonly quadBuffer;
+  private readonly centers;
+  private readonly colors;
+  private readonly saturations;
+  private readonly flatVariant;
+  private readonly roundedVariant;
+  private active;
+  constructor(gl: WebGL2RenderingContext);
+  private buildVariant;
+  setBorderRadius(borderRadius: number): void;
+  setResolution(width: number, height: number): void;
+  setRectDimensions(width: number, height: number): void;
+  plot(plotData: HeatmapPlotData): void;
+  render(dataLength: number): void;
+  dispose(): void;
+}

package/HeatmapPremium/webgl/HeatmapWebGLProgram.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapWebGLProgram = void 0;
+var _utils = require("../../utils/webgl/utils");
+var _shaders = require("./shaders");
+const QUAD_VERTICES = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+class HeatmapWebGLProgram {
+  shaders = [];
+  constructor(gl) {
+    this.gl = gl;
+    /* Enable blending for transparency
+     * These are global to the WebGL context and need to be set only once */
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+    this.centers = (0, _utils.createGrowableBuffer)(gl);
+    this.colors = (0, _utils.createGrowableBuffer)(gl);
+    this.saturations = (0, _utils.createGrowableBuffer)(gl);
+
+    /* Two pre-built programs let us swap border-radius on/off without re-linking. */
+    this.flatVariant = this.buildVariant(_shaders.heatmapFragmentShaderSourceNoBorderRadius);
+    this.roundedVariant = this.buildVariant(_shaders.heatmapFragmentShaderSourceWithBorderRadius);
+    this.active = this.flatVariant;
+  }
+  buildVariant(fragmentShaderSource) {
+    const gl = this.gl;
+    const program = gl.createProgram();
+    const vertexShader = (0, _utils.compileShader)(gl, _shaders.heatmapVertexShaderSource, gl.VERTEX_SHADER);
+    gl.attachShader(program, vertexShader);
+    const fragmentShader = (0, _utils.attachShader)(gl, program, fragmentShaderSource, gl.FRAGMENT_SHADER);
+    gl.linkProgram(program);
+
+    /* https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails */
+    if (process.env.NODE_ENV !== 'production') {
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(`Program linking failed: ${gl.getProgramInfoLog(program)}`);
+        console.error(`Vertex shader info-log: ${gl.getShaderInfoLog(vertexShader)}`);
+        console.error(`Fragment shader info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
+      }
+    }
+    this.shaders.push(vertexShader, fragmentShader);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    bindAttribute(gl, program, 'a_position', this.quadBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', this.centers.buffer, 2, 1);
+    /* Colors are uploaded as Uint8(Clamped)Array; shader sees normalized [0, 1] floats. */
+    bindAttribute(gl, program, 'a_color', this.colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    bindAttribute(gl, program, 'a_saturation', this.saturations.buffer, 1, 1);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uDimensions: gl.getUniformLocation(program, 'u_dimensions'),
+      uBorderRadius: gl.getUniformLocation(program, 'u_borderRadius')
+    };
+  }
+  setBorderRadius(borderRadius) {
+    this.active = borderRadius > 0 ? this.roundedVariant : this.flatVariant;
+    if (this.active.uBorderRadius) {
+      this.gl.useProgram(this.active.program);
+      this.gl.uniform1f(this.active.uBorderRadius, borderRadius);
+    }
+  }
+  setResolution(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uResolution, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uResolution, width, height);
+  }
+  setRectDimensions(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uDimensions, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uDimensions, width, height);
+  }
+  plot(plotData) {
+    const {
+      gl
+    } = this;
+    (0, _utils.uploadGrowableBuffer)(gl, this.centers, plotData.centers);
+    (0, _utils.uploadGrowableBuffer)(gl, this.colors, plotData.colors);
+    (0, _utils.uploadGrowableBuffer)(gl, this.saturations, plotData.saturations);
+  }
+  render(dataLength) {
+    if (dataLength === 0) {
+      return;
+    }
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.active.program);
+    gl.bindVertexArray(this.active.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    (0, _utils.logWebGLErrors)(gl);
+  }
+  dispose() {
+    const {
+      gl
+    } = this;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.centers.buffer);
+    gl.deleteBuffer(this.colors.buffer);
+    gl.deleteBuffer(this.saturations.buffer);
+    gl.deleteProgram(this.flatVariant.program);
+    gl.deleteVertexArray(this.flatVariant.vao);
+    gl.deleteProgram(this.roundedVariant.program);
+    gl.deleteVertexArray(this.roundedVariant.vao);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+exports.HeatmapWebGLProgram = HeatmapWebGLProgram;
+function bindAttribute(gl, program, name, buffer, size, divisor, type = gl.FLOAT, normalized = false) {
+  const location = gl.getAttribLocation(program, name);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, size, type, normalized, 0, 0);
+  if (divisor !== 0) {
+    gl.vertexAttribDivisor(location, divisor);
+  }
+}

package/HeatmapPremium/webgl/HeatmapWebGLProgram.mjs

@@ -0,0 +1,125 @@
+import { attachShader, compileShader, createGrowableBuffer, logWebGLErrors, uploadGrowableBuffer } from "../../utils/webgl/utils.mjs";
+import { heatmapFragmentShaderSourceNoBorderRadius, heatmapFragmentShaderSourceWithBorderRadius, heatmapVertexShaderSource } from "./shaders.mjs";
+const QUAD_VERTICES = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+export class HeatmapWebGLProgram {
+  shaders = [];
+  constructor(gl) {
+    this.gl = gl;
+    /* Enable blending for transparency
+     * These are global to the WebGL context and need to be set only once */
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+    this.centers = createGrowableBuffer(gl);
+    this.colors = createGrowableBuffer(gl);
+    this.saturations = createGrowableBuffer(gl);
+
+    /* Two pre-built programs let us swap border-radius on/off without re-linking. */
+    this.flatVariant = this.buildVariant(heatmapFragmentShaderSourceNoBorderRadius);
+    this.roundedVariant = this.buildVariant(heatmapFragmentShaderSourceWithBorderRadius);
+    this.active = this.flatVariant;
+  }
+  buildVariant(fragmentShaderSource) {
+    const gl = this.gl;
+    const program = gl.createProgram();
+    const vertexShader = compileShader(gl, heatmapVertexShaderSource, gl.VERTEX_SHADER);
+    gl.attachShader(program, vertexShader);
+    const fragmentShader = attachShader(gl, program, fragmentShaderSource, gl.FRAGMENT_SHADER);
+    gl.linkProgram(program);
+
+    /* https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails */
+    if (process.env.NODE_ENV !== 'production') {
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(`Program linking failed: ${gl.getProgramInfoLog(program)}`);
+        console.error(`Vertex shader info-log: ${gl.getShaderInfoLog(vertexShader)}`);
+        console.error(`Fragment shader info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
+      }
+    }
+    this.shaders.push(vertexShader, fragmentShader);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    bindAttribute(gl, program, 'a_position', this.quadBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', this.centers.buffer, 2, 1);
+    /* Colors are uploaded as Uint8(Clamped)Array; shader sees normalized [0, 1] floats. */
+    bindAttribute(gl, program, 'a_color', this.colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    bindAttribute(gl, program, 'a_saturation', this.saturations.buffer, 1, 1);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uDimensions: gl.getUniformLocation(program, 'u_dimensions'),
+      uBorderRadius: gl.getUniformLocation(program, 'u_borderRadius')
+    };
+  }
+  setBorderRadius(borderRadius) {
+    this.active = borderRadius > 0 ? this.roundedVariant : this.flatVariant;
+    if (this.active.uBorderRadius) {
+      this.gl.useProgram(this.active.program);
+      this.gl.uniform1f(this.active.uBorderRadius, borderRadius);
+    }
+  }
+  setResolution(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uResolution, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uResolution, width, height);
+  }
+  setRectDimensions(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uDimensions, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uDimensions, width, height);
+  }
+  plot(plotData) {
+    const {
+      gl
+    } = this;
+    uploadGrowableBuffer(gl, this.centers, plotData.centers);
+    uploadGrowableBuffer(gl, this.colors, plotData.colors);
+    uploadGrowableBuffer(gl, this.saturations, plotData.saturations);
+  }
+  render(dataLength) {
+    if (dataLength === 0) {
+      return;
+    }
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.active.program);
+    gl.bindVertexArray(this.active.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    logWebGLErrors(gl);
+  }
+  dispose() {
+    const {
+      gl
+    } = this;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.centers.buffer);
+    gl.deleteBuffer(this.colors.buffer);
+    gl.deleteBuffer(this.saturations.buffer);
+    gl.deleteProgram(this.flatVariant.program);
+    gl.deleteVertexArray(this.flatVariant.vao);
+    gl.deleteProgram(this.roundedVariant.program);
+    gl.deleteVertexArray(this.roundedVariant.vao);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+function bindAttribute(gl, program, name, buffer, size, divisor, type = gl.FLOAT, normalized = false) {
+  const location = gl.getAttribLocation(program, name);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, size, type, normalized, 0, 0);
+  if (divisor !== 0) {
+    gl.vertexAttribDivisor(location, divisor);
+  }
+}

package/HeatmapPremium/webgl/shaders.d.mts

@@ -1,3 +1,3 @@
-export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
+export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n    \n    varying vec4 v_color;\n    \n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {\n      vec2 q = abs(pos) - half_size + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);\n      \n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n      \n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/HeatmapPremium/webgl/shaders.d.ts

@@ -1,3 +1,3 @@
-export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
+export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n    \n    varying vec4 v_color;\n    \n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
 export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {\n      vec2 q = abs(pos) - half_size + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);\n      \n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n      \n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/HeatmapPremium/webgl/shaders.js

@@ -21,7 +21,7 @@ const heatmapVertexShaderSource = exports.heatmapVertexShaderSource = /* glsl */
     
     // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/
     vec3 adjust_saturation(vec3 color, float value) {
-      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
       const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
       vec3 grayscale = vec3(dot(color, luminosityFactor));
     

package/HeatmapPremium/webgl/shaders.mjs

@@ -15,7 +15,7 @@ export const heatmapVertexShaderSource = /* glsl */`
     
     // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/
     vec3 adjust_saturation(vec3 color, float value) {
-      // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
       const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
       vec3 grayscale = vec3(dot(color, luminosityFactor));
     

package/HeatmapPremium/webgl/useHeatmapPlotData.d.mts

@@ -6,7 +6,7 @@ export declare function useHeatmapPlotData(drawingArea: ChartDrawingArea, series
 }>, yScale: ScaleBand<{
   toString(): string;
 }>): {
-  centers: Float32Array<ArrayBuffer>;
-  colors: Float32Array<ArrayBuffer>;
-  saturations: Float32Array<ArrayBuffer>;
+  centers: Float32Array<ArrayBufferLike>;
+  colors: Uint8Array<ArrayBuffer>;
+  saturations: Float32Array<ArrayBufferLike>;
 };

package/HeatmapPremium/webgl/useHeatmapPlotData.d.ts

@@ -6,7 +6,7 @@ export declare function useHeatmapPlotData(drawingArea: ChartDrawingArea, series
 }>, yScale: ScaleBand<{
   toString(): string;
 }>): {
-  centers: Float32Array<ArrayBuffer>;
-  colors: Float32Array<ArrayBuffer>;
-  saturations: Float32Array<ArrayBuffer>;
+  centers: Float32Array<ArrayBufferLike>;
+  colors: Uint8Array<ArrayBuffer>;
+  saturations: Float32Array<ArrayBufferLike>;
 };