@marimo-team/frontend 0.23.1-dev8 → 0.23.1-dev9

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-bjxpaV0V.js"></script>
+    <script type="module" crossorigin src="./assets/index-Bm25ctN7.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-D2MJg03u.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.1-dev8",
+  "version": "0.23.1-dev9",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -297,13 +297,7 @@ export class MatplotlibRenderer {
     // Create canvas
     const canvas = document.createElement("canvas");
     canvas.className = "block cursor-crosshair";
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    canvas.width = this.#state.width * dpr;
-    canvas.height = this.#state.height * dpr;
-    canvas.style.width = `${this.#state.width}px`;
-    canvas.style.maxWidth = "100%";
-    canvas.style.height = "auto";
-    canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`;
+    this.#syncCanvasSize(canvas);
     canvas.style.touchAction = "none";
     container.append(canvas);
     this.#canvas = canvas;
@@ -322,6 +316,10 @@ export class MatplotlibRenderer {
       signal: options.signal,
     });
 
+    // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
+    // displays). matchMedia fires exactly once per DPR transition.
+    this.#watchDevicePixelRatio(options.signal);
+
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
       cancelAnimationFrame(this.#rafId);
@@ -333,6 +331,38 @@ export class MatplotlibRenderer {
     this.#restoreSelection(this.#state.value);
   }
 
+  /** Set the canvas buffer + CSS size to match current logical size and DPR. */
+  #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    const { width, height } = this.#state;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.maxWidth = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = `${width} / ${height}`;
+  }
+
+  /**
+   * Observe devicePixelRatio changes via matchMedia. Each listener fires once
+   * per transition, so we re-register after every change.
+   */
+  #watchDevicePixelRatio(signal: AbortSignal): void {
+    if (signal.aborted) {
+      return;
+    }
+    const mq = matchMedia(
+      `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
+    );
+    const onChange = () => {
+      this.#syncCanvasSize();
+      this.#drawCanvas();
+      // Re-register for the next DPR transition
+      this.#watchDevicePixelRatio(signal);
+    };
+    mq.addEventListener("change", onChange, { once: true, signal });
+  }
+
   update(state: MatplotlibState): void {
     const prev = this.#state;
     this.#state = state;
@@ -341,13 +371,7 @@ export class MatplotlibRenderer {
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      this.#canvas.width = state.width * dpr;
-      this.#canvas.height = state.height * dpr;
-      this.#canvas.style.width = `${state.width}px`;
-      this.#canvas.style.maxWidth = "100%";
-      this.#canvas.style.height = "auto";
-      this.#canvas.style.aspectRatio = `${state.width} / ${state.height}`;
+      this.#syncCanvasSize();
       needsRedraw = true;
     }