@mui/x-charts-premium 9.7.0 → 9.8.0

package/BarChartPremium/webgl/BarWebGLProgram.d.mts

@@ -5,11 +5,10 @@ export declare class BarWebGLProgram {
   private readonly program;
   private readonly vao;
   private readonly quadBuffer;
-  private readonly aPositionLocation;
-  private readonly centersBuffer;
-  private readonly halfSizesBuffer;
-  private readonly colorsBuffer;
-  private readonly cornerRadiiBuffer;
+  private readonly centers;
+  private readonly halfSizes;
+  private readonly colors;
+  private readonly cornerRadii;
   private readonly uResolution;
   constructor(gl: WebGL2RenderingContext);
   setResolution(width: number, height: number): void;

package/BarChartPremium/webgl/BarWebGLProgram.d.ts

@@ -5,11 +5,10 @@ export declare class BarWebGLProgram {
   private readonly program;
   private readonly vao;
   private readonly quadBuffer;
-  private readonly aPositionLocation;
-  private readonly centersBuffer;
-  private readonly halfSizesBuffer;
-  private readonly colorsBuffer;
-  private readonly cornerRadiiBuffer;
+  private readonly centers;
+  private readonly halfSizes;
+  private readonly colors;
+  private readonly cornerRadii;
   private readonly uResolution;
   constructor(gl: WebGL2RenderingContext);
   setResolution(width: number, height: number): void;

package/BarChartPremium/webgl/BarWebGLProgram.js

@@ -5,36 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BarWebGLProgram = void 0;
 var _utils = require("../../utils/webgl/utils");
+var _instancedAttribute = require("../../utils/webgl/instancedAttribute");
 var _shaders = require("./shaders");
 class BarWebGLProgram {
   shaders = [];
+
+  /* Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1]. */
+
   constructor(gl) {
     this.gl = gl;
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    this.program = gl.createProgram();
-    const vertexShader = (0, _utils.compileShader)(gl, _shaders.barVertexShaderSource, gl.VERTEX_SHADER);
-    const fragmentShader = (0, _utils.compileShader)(gl, _shaders.barFragmentShaderSource, gl.FRAGMENT_SHADER);
-    gl.attachShader(this.program, vertexShader);
-    gl.attachShader(this.program, fragmentShader);
-    gl.linkProgram(this.program);
-    this.shaders.push(vertexShader, fragmentShader);
-    if (process.env.NODE_ENV !== 'production' && !gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
-      console.error(`Program linking failed: ${gl.getProgramInfoLog(this.program)}`);
-      console.error(`Vertex info-log: ${gl.getShaderInfoLog(vertexShader)}`);
-      console.error(`Fragment info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
-    }
-
-    // Cache locations once.
+    (0, _utils.setupStandardBlending)(gl);
+    const linked = (0, _utils.linkProgram)(gl, _shaders.barVertexShaderSource, _shaders.barFragmentShaderSource);
+    this.program = linked.program;
+    this.shaders.push(...linked.shaders);
     this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
-    this.aPositionLocation = gl.getAttribLocation(this.program, 'a_position');
     this.quadBuffer = (0, _utils.uploadQuadBuffer)(gl);
     this.vao = gl.createVertexArray();
-    this.centersBuffer = createInstancedBuffer(gl, this.program, 'a_center', 2, gl.FLOAT, false);
-    this.halfSizesBuffer = createInstancedBuffer(gl, this.program, 'a_halfSize', 2, gl.FLOAT, false);
-    // Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1].
-    this.colorsBuffer = createInstancedBuffer(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
-    this.cornerRadiiBuffer = createInstancedBuffer(gl, this.program, 'a_cornerRadii', 4, gl.FLOAT, false);
+    gl.bindVertexArray(this.vao);
+    (0, _utils.bindQuadBuffer)(gl, this.program, this.quadBuffer);
+    this.centers = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_center', 2);
+    this.halfSizes = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_halfSize', 2);
+    this.colors = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
+    this.cornerRadii = (0, _instancedAttribute.createInstancedAttribute)(gl, this.program, 'a_cornerRadii', 4);
+    gl.bindVertexArray(null);
   }
   setResolution(width, height) {
     this.gl.useProgram(this.program);
@@ -42,18 +35,10 @@ class BarWebGLProgram {
   }
   plot(plotData) {
     const gl = this.gl;
-    gl.useProgram(this.program);
-    gl.bindVertexArray(this.vao);
-
-    // Bind quad buffer + a_position (per-vertex).
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
-    gl.enableVertexAttribArray(this.aPositionLocation);
-    gl.vertexAttribPointer(this.aPositionLocation, 2, gl.FLOAT, false, 0, 0);
-    uploadAndBindInstanced(gl, this.centersBuffer, plotData.centers);
-    uploadAndBindInstanced(gl, this.halfSizesBuffer, plotData.halfSizes);
-    uploadAndBindInstanced(gl, this.colorsBuffer, plotData.colors);
-    uploadAndBindInstanced(gl, this.cornerRadiiBuffer, plotData.cornerRadii);
-    gl.bindVertexArray(null);
+    (0, _utils.uploadGrowableBuffer)(gl, this.centers.buffer, plotData.centers);
+    (0, _utils.uploadGrowableBuffer)(gl, this.halfSizes.buffer, plotData.halfSizes);
+    (0, _utils.uploadGrowableBuffer)(gl, this.colors.buffer, plotData.colors);
+    (0, _utils.uploadGrowableBuffer)(gl, this.cornerRadii.buffer, plotData.cornerRadii);
     (0, _utils.logWebGLErrors)(gl);
   }
   render(count) {
@@ -71,37 +56,11 @@ class BarWebGLProgram {
     gl.deleteProgram(this.program);
     gl.deleteVertexArray(this.vao);
     gl.deleteBuffer(this.quadBuffer);
-    gl.deleteBuffer(this.centersBuffer.buffer);
-    gl.deleteBuffer(this.halfSizesBuffer.buffer);
-    gl.deleteBuffer(this.colorsBuffer.buffer);
-    gl.deleteBuffer(this.cornerRadiiBuffer.buffer);
+    gl.deleteBuffer(this.centers.buffer.buffer);
+    gl.deleteBuffer(this.halfSizes.buffer.buffer);
+    gl.deleteBuffer(this.colors.buffer.buffer);
+    gl.deleteBuffer(this.cornerRadii.buffer.buffer);
     this.shaders.forEach(shader => gl.deleteShader(shader));
   }
 }
-exports.BarWebGLProgram = BarWebGLProgram;
-function createInstancedBuffer(gl, program, name, size, glType, normalized) {
-  return {
-    buffer: gl.createBuffer(),
-    capacityBytes: 0,
-    lastUploaded: null,
-    location: gl.getAttribLocation(program, name),
-    size,
-    glType,
-    normalized
-  };
-}
-function uploadAndBindInstanced(gl, target, data) {
-  gl.bindBuffer(gl.ARRAY_BUFFER, target.buffer);
-  if (target.lastUploaded !== data) {
-    if (data.byteLength <= target.capacityBytes) {
-      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
-    } else {
-      gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
-      target.capacityBytes = data.byteLength;
-    }
-    target.lastUploaded = data;
-  }
-  gl.enableVertexAttribArray(target.location);
-  gl.vertexAttribPointer(target.location, target.size, target.glType, target.normalized, 0, 0);
-  gl.vertexAttribDivisor(target.location, 1);
-}
+exports.BarWebGLProgram = BarWebGLProgram;

package/BarChartPremium/webgl/BarWebGLProgram.mjs

@@ -1,34 +1,27 @@
-import { compileShader, logWebGLErrors, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { bindQuadBuffer, linkProgram, logWebGLErrors, setupStandardBlending, uploadGrowableBuffer, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { createInstancedAttribute } from "../../utils/webgl/instancedAttribute.mjs";
 import { barFragmentShaderSource, barVertexShaderSource } from "./shaders.mjs";
 export class BarWebGLProgram {
   shaders = [];
+
+  /* Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1]. */
+
   constructor(gl) {
     this.gl = gl;
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    this.program = gl.createProgram();
-    const vertexShader = compileShader(gl, barVertexShaderSource, gl.VERTEX_SHADER);
-    const fragmentShader = compileShader(gl, barFragmentShaderSource, gl.FRAGMENT_SHADER);
-    gl.attachShader(this.program, vertexShader);
-    gl.attachShader(this.program, fragmentShader);
-    gl.linkProgram(this.program);
-    this.shaders.push(vertexShader, fragmentShader);
-    if (process.env.NODE_ENV !== 'production' && !gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
-      console.error(`Program linking failed: ${gl.getProgramInfoLog(this.program)}`);
-      console.error(`Vertex info-log: ${gl.getShaderInfoLog(vertexShader)}`);
-      console.error(`Fragment info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
-    }
-
-    // Cache locations once.
+    setupStandardBlending(gl);
+    const linked = linkProgram(gl, barVertexShaderSource, barFragmentShaderSource);
+    this.program = linked.program;
+    this.shaders.push(...linked.shaders);
     this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
-    this.aPositionLocation = gl.getAttribLocation(this.program, 'a_position');
     this.quadBuffer = uploadQuadBuffer(gl);
     this.vao = gl.createVertexArray();
-    this.centersBuffer = createInstancedBuffer(gl, this.program, 'a_center', 2, gl.FLOAT, false);
-    this.halfSizesBuffer = createInstancedBuffer(gl, this.program, 'a_halfSize', 2, gl.FLOAT, false);
-    // Colors come in as Uint8 [0, 255]; normalized=true makes the GPU read them back as vec4 in [0, 1].
-    this.colorsBuffer = createInstancedBuffer(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
-    this.cornerRadiiBuffer = createInstancedBuffer(gl, this.program, 'a_cornerRadii', 4, gl.FLOAT, false);
+    gl.bindVertexArray(this.vao);
+    bindQuadBuffer(gl, this.program, this.quadBuffer);
+    this.centers = createInstancedAttribute(gl, this.program, 'a_center', 2);
+    this.halfSizes = createInstancedAttribute(gl, this.program, 'a_halfSize', 2);
+    this.colors = createInstancedAttribute(gl, this.program, 'a_color', 4, gl.UNSIGNED_BYTE, true);
+    this.cornerRadii = createInstancedAttribute(gl, this.program, 'a_cornerRadii', 4);
+    gl.bindVertexArray(null);
   }
   setResolution(width, height) {
     this.gl.useProgram(this.program);
@@ -36,18 +29,10 @@ export class BarWebGLProgram {
   }
   plot(plotData) {
     const gl = this.gl;
-    gl.useProgram(this.program);
-    gl.bindVertexArray(this.vao);
-
-    // Bind quad buffer + a_position (per-vertex).
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
-    gl.enableVertexAttribArray(this.aPositionLocation);
-    gl.vertexAttribPointer(this.aPositionLocation, 2, gl.FLOAT, false, 0, 0);
-    uploadAndBindInstanced(gl, this.centersBuffer, plotData.centers);
-    uploadAndBindInstanced(gl, this.halfSizesBuffer, plotData.halfSizes);
-    uploadAndBindInstanced(gl, this.colorsBuffer, plotData.colors);
-    uploadAndBindInstanced(gl, this.cornerRadiiBuffer, plotData.cornerRadii);
-    gl.bindVertexArray(null);
+    uploadGrowableBuffer(gl, this.centers.buffer, plotData.centers);
+    uploadGrowableBuffer(gl, this.halfSizes.buffer, plotData.halfSizes);
+    uploadGrowableBuffer(gl, this.colors.buffer, plotData.colors);
+    uploadGrowableBuffer(gl, this.cornerRadii.buffer, plotData.cornerRadii);
     logWebGLErrors(gl);
   }
   render(count) {
@@ -65,36 +50,10 @@ export class BarWebGLProgram {
     gl.deleteProgram(this.program);
     gl.deleteVertexArray(this.vao);
     gl.deleteBuffer(this.quadBuffer);
-    gl.deleteBuffer(this.centersBuffer.buffer);
-    gl.deleteBuffer(this.halfSizesBuffer.buffer);
-    gl.deleteBuffer(this.colorsBuffer.buffer);
-    gl.deleteBuffer(this.cornerRadiiBuffer.buffer);
+    gl.deleteBuffer(this.centers.buffer.buffer);
+    gl.deleteBuffer(this.halfSizes.buffer.buffer);
+    gl.deleteBuffer(this.colors.buffer.buffer);
+    gl.deleteBuffer(this.cornerRadii.buffer.buffer);
     this.shaders.forEach(shader => gl.deleteShader(shader));
   }
-}
-function createInstancedBuffer(gl, program, name, size, glType, normalized) {
-  return {
-    buffer: gl.createBuffer(),
-    capacityBytes: 0,
-    lastUploaded: null,
-    location: gl.getAttribLocation(program, name),
-    size,
-    glType,
-    normalized
-  };
-}
-function uploadAndBindInstanced(gl, target, data) {
-  gl.bindBuffer(gl.ARRAY_BUFFER, target.buffer);
-  if (target.lastUploaded !== data) {
-    if (data.byteLength <= target.capacityBytes) {
-      gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
-    } else {
-      gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
-      target.capacityBytes = data.byteLength;
-    }
-    target.lastUploaded = data;
-  }
-  gl.enableVertexAttribArray(target.location);
-  gl.vertexAttribPointer(target.location, target.size, target.glType, target.normalized, 0, 0);
-  gl.vertexAttribDivisor(target.location, 1);
 }

package/BarChartPremium/webgl/shaders.d.mts

@@ -1,2 +1,2 @@
 export declare const barVertexShaderSource = "\n    precision mediump float;\n\n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec2 a_halfSize;\n    attribute vec4 a_color;\n    attribute vec4 a_cornerRadii;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    uniform vec2 u_resolution;\n\n    void main() {\n      vec2 position = a_center + a_position * a_halfSize;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = a_color;\n      v_pos = a_position * a_halfSize;\n      v_halfSize = a_halfSize;\n      v_cornerRadii = a_cornerRadii;\n    }\n  ";
-export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";
+export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    \n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n  \n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/BarChartPremium/webgl/shaders.d.ts

@@ -1,2 +1,2 @@
 export declare const barVertexShaderSource = "\n    precision mediump float;\n\n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec2 a_halfSize;\n    attribute vec4 a_color;\n    attribute vec4 a_cornerRadii;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    uniform vec2 u_resolution;\n\n    void main() {\n      vec2 position = a_center + a_position * a_halfSize;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = a_color;\n      v_pos = a_position * a_halfSize;\n      v_halfSize = a_halfSize;\n      v_cornerRadii = a_cornerRadii;\n    }\n  ";
-export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";
+export declare const barFragmentShaderSource = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n    varying vec2 v_halfSize;\n    varying vec4 v_cornerRadii;\n\n    \n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n  \n\n    void main() {\n      float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);\n      // Anti-alias only outside the SDF (dist >= 0). Starting smoothstep at 0\n      // keeps interior pixels at full color instead of fading them.\n      float alpha = 1.0 - smoothstep(0.0, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/BarChartPremium/webgl/shaders.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.barVertexShaderSource = exports.barFragmentShaderSource = void 0;
+var _glsl = require("../../utils/webgl/glsl");
 // language=Glsl
 const barVertexShaderSource = exports.barVertexShaderSource = /* glsl */`
     precision mediump float;
@@ -34,10 +35,6 @@ const barVertexShaderSource = exports.barVertexShaderSource = /* glsl */`
   `;
 
 // language=Glsl
-// Per-corner radii ordering follows CSS: top-left, top-right, bottom-right, bottom-left.
-// Screen-space conventions after the y-flip in the vertex stage:
-//   v_pos.y < 0 -> top, v_pos.y > 0 -> bottom
-//   v_pos.x < 0 -> left, v_pos.x > 0 -> right
 const barFragmentShaderSource = exports.barFragmentShaderSource = /* glsl */`
     precision mediump float;
 
@@ -46,17 +43,7 @@ const barFragmentShaderSource = exports.barFragmentShaderSource = /* glsl */`
     varying vec2 v_halfSize;
     varying vec4 v_cornerRadii;
 
-    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {
-      float radius;
-      if (pos.x < 0.0) {
-        radius = pos.y < 0.0 ? r.x : r.w;
-      } else {
-        radius = pos.y < 0.0 ? r.y : r.z;
-      }
-
-      vec2 q = abs(pos) - halfSize + radius;
-      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-    }
+    ${_glsl.ROUNDED_BOX_SDF_GLSL}
 
     void main() {
       float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);

package/BarChartPremium/webgl/shaders.mjs

@@ -1,3 +1,5 @@
+import { ROUNDED_BOX_SDF_GLSL } from "../../utils/webgl/glsl.mjs";
+
 // language=Glsl
 export const barVertexShaderSource = /* glsl */`
     precision mediump float;
@@ -28,10 +30,6 @@ export const barVertexShaderSource = /* glsl */`
   `;
 
 // language=Glsl
-// Per-corner radii ordering follows CSS: top-left, top-right, bottom-right, bottom-left.
-// Screen-space conventions after the y-flip in the vertex stage:
-//   v_pos.y < 0 -> top, v_pos.y > 0 -> bottom
-//   v_pos.x < 0 -> left, v_pos.x > 0 -> right
 export const barFragmentShaderSource = /* glsl */`
     precision mediump float;
 
@@ -40,17 +38,7 @@ export const barFragmentShaderSource = /* glsl */`
     varying vec2 v_halfSize;
     varying vec4 v_cornerRadii;
 
-    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {
-      float radius;
-      if (pos.x < 0.0) {
-        radius = pos.y < 0.0 ? r.x : r.w;
-      } else {
-        radius = pos.y < 0.0 ? r.y : r.z;
-      }
-
-      vec2 q = abs(pos) - halfSize + radius;
-      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-    }
+    ${ROUNDED_BOX_SDF_GLSL}
 
     void main() {
       float dist = roundedBoxSDF(v_pos, v_halfSize, v_cornerRadii);

package/CHANGELOG.md

@@ -1,5 +1,135 @@
 # Changelog
 
+## 9.8.0
+
+_Jul 2, 2026_
+
+We'd like to extend a big thank you to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🗺️ New [`MapImagePlot`](https://mui.com/x/react-charts/map/) for rendering raster base maps, with `onItemClick` support on map shapes (Premium)
+- 📊 New [`usePolarGeometry`](https://mui.com/x/react-charts/hooks/use-polar-geometry/) hook to build custom radial overlays
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @aromanio, @greymoth-jp, @mustafajw07, @timbuckley, @voidmatcha
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @joserodolfofreitas, @LukasTy, @mapache-salvaje, @michelengelen, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.8.0`
+
+- [DataGrid] Prevent cell editing from resurrecting a deleted row (#22958) @Anexus5919
+- [DataGrid] Avoid reading `type` of `undefined` in `gridRowUtils` (#21808) @timbuckley
+- [DataGrid] Improved get started tutorial (#22911) @joserodolfofreitas
+- [l10n] Improve Japanese (ja-JP) locale (#23001) @greymoth-jp
+
+#### `@mui/x-data-grid-pro@9.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.8.0`.
+
+#### `@mui/x-data-grid-premium@9.8.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.8.0`, plus:
+
+- [DataGridPremium] Escape `singleSelect` values in Excel export with `escapeFormulas` enabled (#22851) @Anexus5919
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.8.0`
+
+- [pickers] Fix localized digit crash (#22995) @alexfauquette
+- [pickers] Flag the first and last visible day cell across year boundaries (#22981) @Anexus5919
+- [pickers] Use calendar day tokens in `AdapterMomentHijri` and `AdapterMomentJalaali` formats (#22974) @Anexus5919
+- [pickers] Use the Hijri day token in `AdapterMomentHijri` `normalDateWithWeekday` (#22972) @Anexus5919
+- [l10n] Improve Romanian (ro-RO) locale (#22969) @aromanio
+
+#### `@mui/x-date-pickers-pro@9.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.8.0`, plus:
+
+- [DateRangeCalendar] Fix auto month-switch across the year boundary (#22987) @Anexus5919
+
+### Charts
+
+#### `@mui/x-charts@9.8.0`
+
+- [charts] Decouple `d3-geo` from the universal tooltip (#23011) @sai6855
+- [charts] Deduplicate `getGroupingConfig` (#22889) @sai6855
+- [charts] Expose `usePolarGeometry` hook for radial overlays (#22892) @mustafajw07
+
+#### `@mui/x-charts-pro@9.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.8.0`.
+
+#### `@mui/x-charts-premium@9.8.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.8.0`, plus:
+
+- [charts-premium] Add `onItemClick` support for the Map shapes (#22876) @sai6855
+- [charts-premium] Replace `dataIndex` with `name` in map identifier (#22891) @sai6855
+- [charts-premium] Share helper function (#23030) @alexfauquette
+- [charts-premium] Extract shared WebGL utilities across bar/scatter/heatmap renderers (#22466) @sai6855
+- [charts-premium] Add `MapImagePlot` for raster base maps (#22977) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.8.0`
+
+- [TreeView] Fix extra selection event when clicking a collapsed parent item (#22249) @michelengelen
+- [TreeView] Enforce top-level type imports (#23034) @Janpot
+
+#### `@mui/x-tree-view-pro@9.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.8.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.4`
+
+- [scheduler] Enforce top-level type imports (#22931) @Janpot
+- [scheduler] Keep the occurrence date when editing only one recurring event (#23007) @Anexus5919
+- [scheduler] Track bundle size of scheduler packages (#22682) @flaviendelangle
+- [scheduler] Add `viewConfig` prop to limit displayed hours in the day and week views (#22929) @flaviendelangle
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.4`, plus:
+
+- [scheduler] Collapsible resources in the timeline (#22920) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add recipe for conditional master-detail panels (#22971) @michelengelen
+- [docs] Add recipe for describing active filters in the toolbar (#22970) @michelengelen
+- [docs] Add recipe for triggering clipboard copy from a button (#22967) @michelengelen
+- [docs] Clarify that `fieldRef.current.focusField()` is the canonical way to focus a field (#22937) @michelengelen
+- [docs][scheduler] Another copyediting pass across the Scheduler docs (#22619) @mapache-salvaje
+- [docs][charts] Add map example for arbitrary GeoJSON shapes (#22976) @JCQuintas
+- [docs][charts] Double point count in `ScatterAsyncRenderer` demo (#22906) @JCQuintas
+
+### Core
+
+- [code-infra] Fix tracking branch bug in release script (#22956) @michelengelen
+- [code-infra] Remove mark-duplicate workflow (#22994) @cherniavskii
+- [code-infra] Revert `nanoid@3.3.15` `minimumReleaseAge` exemption (#22953) @LukasTy
+
+### Miscellaneous
+
+- [internals] Fix `ERR_UNSUPPORTED_DIR_IMPORT` for `core-js-pure` in Node ESM (#22985) @michelengelen
+- [internals] Harden `useDisposable` React internals read with safeReact (#22986) @rita-codes
+- [internals] Replace core-js `DisposableStack` ponyfill with a minimal fallback (#23002) @sai6855
+- [test] Assert the edited `dateTime` cell value in the e2e edit test (#22982) @voidmatcha
+- [virtualizer] Remeasure scrollbars when layout changes (#22914) @arminmeh
+
 ## 9.7.0
 
 _Jun 25, 2026_
@@ -178,7 +308,6 @@ Same changes as in `@mui/x-charts-pro@9.6.0`, plus:
 - [charts-premium] Support maps tooltip positioned on items (#22648) @alexfauquette
 - [docs] Show how to export maps (#22837) @alexfauquette
 
-
 ### Tree View
 
 #### `@mui/x-tree-view@9.6.0`

package/ChartsDataProviderPremium/ChartsDataProviderPremium.js

@@ -19,8 +19,8 @@ var _useChartsDataProviderPremiumProps = require("./useChartsDataProviderPremium
 var _seriesConfig2 = require("../CandlestickChart/seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc4MjM0NTYwMDAwMA==",
-  version: "9.7.0",
+  releaseDate: "MTc4Mjk1MDQwMDAwMA==",
+  version: "9.8.0",
   name: 'x-charts-premium'
 };
 const defaultSeriesConfigPremium = exports.defaultSeriesConfigPremium = (0, _extends2.default)({}, _internals2.defaultSeriesConfigPro, {

package/ChartsDataProviderPremium/ChartsDataProviderPremium.mjs

@@ -12,8 +12,8 @@ import { useChartsDataProviderPremiumProps } from "./useChartsDataProviderPremiu
 import { ohlcSeriesConfig } from "../CandlestickChart/seriesConfig/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc4MjM0NTYwMDAwMA==",
-  version: "9.7.0",
+  releaseDate: "MTc4Mjk1MDQwMDAwMA==",
+  version: "9.8.0",
   name: 'x-charts-premium'
 };
 export const defaultSeriesConfigPremium = _extends({}, defaultSeriesConfigPro, {

package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.js

@@ -18,8 +18,8 @@ var _useChartsGeoDataProviderPremiumProps = require("./useChartsGeoDataProviderP
 var _ChartsGeoDataProviderPremium = require("./ChartsGeoDataProviderPremium.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc4MjM0NTYwMDAwMA==",
-  version: "9.7.0",
+  releaseDate: "MTc4Mjk1MDQwMDAwMA==",
+  version: "9.8.0",
   name: 'x-charts-premium'
 };
 /**

package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.mjs

@@ -11,8 +11,8 @@ import { useChartsGeoDataProviderPremiumProps } from "./useChartsGeoDataProvider
 import { GEO_PREMIUM_PLUGINS } from "./ChartsGeoDataProviderPremium.plugins.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc4MjM0NTYwMDAwMA==",
-  version: "9.7.0",
+  releaseDate: "MTc4Mjk1MDQwMDAwMA==",
+  version: "9.8.0",
   name: 'x-charts-premium'
 };
 /**

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.js

@@ -19,8 +19,8 @@ var _ChartsRadialDataProviderPremium = require("./ChartsRadialDataProviderPremiu
 var _seriesConfig = require("../RadialLineChart/seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc4MjM0NTYwMDAwMA==",
-  version: "9.7.0",
+  releaseDate: "MTc4Mjk1MDQwMDAwMA==",
+  version: "9.8.0",
   name: 'x-charts-premium'
 };
 const defaultRadialPremiumSeriesConfig = {

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.mjs

@@ -12,8 +12,8 @@ import { RADIAL_PREMIUM_PLUGINS } from "./ChartsRadialDataProviderPremium.plugin
 import { radialLineSeriesConfig } from "../RadialLineChart/seriesConfig/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc4MjM0NTYwMDAwMA==",
-  version: "9.7.0",
+  releaseDate: "MTc4Mjk1MDQwMDAwMA==",
+  version: "9.8.0",
   name: 'x-charts-premium'
 };
 const defaultRadialPremiumSeriesConfig = {

package/HeatmapPremium/webgl/HeatmapWebGLProgram.js

@@ -5,19 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HeatmapWebGLProgram = void 0;
 var _utils = require("../../utils/webgl/utils");
+var _instancedAttribute = require("../../utils/webgl/instancedAttribute");
 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);
+    /* These are global to the WebGL context and need to be set only once. */
+    (0, _utils.setupStandardBlending)(gl);
+    this.quadBuffer = (0, _utils.uploadQuadBuffer)(gl);
     this.centers = (0, _utils.createGrowableBuffer)(gl);
     this.colors = (0, _utils.createGrowableBuffer)(gl);
     this.saturations = (0, _utils.createGrowableBuffer)(gl);
@@ -29,28 +25,16 @@ class HeatmapWebGLProgram {
   }
   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 linked = (0, _utils.linkProgram)(gl, _shaders.heatmapVertexShaderSource, fragmentShaderSource);
+    this.shaders.push(...linked.shaders);
+    const program = linked.program;
     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);
+    (0, _utils.bindQuadBuffer)(gl, program, this.quadBuffer);
+    (0, _instancedAttribute.bindInstancedAttribute)(gl, program, 'a_center', this.centers, 2);
     /* 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);
+    (0, _instancedAttribute.bindInstancedAttribute)(gl, program, 'a_color', this.colors, 4, gl.UNSIGNED_BYTE, true);
+    (0, _instancedAttribute.bindInstancedAttribute)(gl, program, 'a_saturation', this.saturations, 1);
     gl.bindVertexArray(null);
     return {
       program,
@@ -120,13 +104,4 @@ class HeatmapWebGLProgram {
     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);
-  }
-}
+exports.HeatmapWebGLProgram = HeatmapWebGLProgram;