@marimo-team/islands 0.20.0 → 0.20.1

package/dist/main.js

@@ -73400,7 +73400,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.0"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.20.1"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -94413,26 +94413,33 @@ ${c}
     }
     update(e) {
       let r = __privateGet(this, _n4);
-      if (__privateSet(this, _n4, e), e.chartBase64 !== __privateGet(this, _s)) {
-        __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, e.chartBase64);
-        return;
-      }
+      __privateSet(this, _n4, e);
+      let c = false;
       if (e.width !== r.width || e.height !== r.height) {
         let r2 = globalThis.devicePixelRatio ?? 1;
-        __privateGet(this, _e8).width = e.width * r2, __privateGet(this, _e8).height = e.height * r2, __privateGet(this, _e8).style.width = `${e.width}px`, __privateGet(this, _e8).style.height = `${e.height}px`;
+        __privateGet(this, _e8).width = e.width * r2, __privateGet(this, _e8).height = e.height * r2, __privateGet(this, _e8).style.width = `${e.width}px`, __privateGet(this, _e8).style.height = `${e.height}px`, c = true;
+      }
+      if (e.chartBase64 !== __privateGet(this, _s)) {
+        __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, e.chartBase64);
+        return;
       }
-      (e.selectionColor !== r.selectionColor || e.selectionOpacity !== r.selectionOpacity || e.strokeWidth !== r.strokeWidth || e.width !== r.width || e.height !== r.height) && __privateGet(this, _l).call(this);
+      (c || e.selectionColor !== r.selectionColor || e.selectionOpacity !== r.selectionOpacity || e.strokeWidth !== r.strokeWidth) && __privateGet(this, _l).call(this);
     }
   }, _e8 = new WeakMap(), _t5 = new WeakMap(), _n4 = new WeakMap(), _r2 = new WeakMap(), _i3 = new WeakMap(), _a2 = new WeakMap(), _o2 = new WeakMap(), _s = new WeakMap(), _MatplotlibRenderer_instances = new WeakSet(), c_fn = function(e) {
     __privateSet(this, _s, e), __privateWrapper(this, _o2)._++;
     let r = __privateGet(this, _o2);
     __privateSet(this, _r2, {
       type: "idle"
-    });
-    let c = new Image();
-    c.onload = () => {
-      r === __privateGet(this, _o2) && (__privateSet(this, _a2, c), __privateGet(this, _l).call(this));
-    }, c.src = e;
+    }), __privateSet(this, _a2, null);
+    let c = __privateGet(this, _e8).getContext("2d");
+    if (c) {
+      let e2 = globalThis.devicePixelRatio ?? 1;
+      c.setTransform(e2, 0, 0, e2, 0, 0), c.clearRect(0, 0, __privateGet(this, _n4).width, __privateGet(this, _n4).height);
+    }
+    let d = new Image();
+    d.onload = () => {
+      r === __privateGet(this, _o2) && (__privateSet(this, _a2, d), __privateGet(this, _l).call(this));
+    }, d.src = e;
   }, _l = new WeakMap(), _u = new WeakMap(), _d2 = new WeakMap(), _f2 = new WeakMap(), _p = new WeakMap(), _m = new WeakMap(), _h2 = new WeakMap(), _g2 = new WeakMap(), __ = new WeakMap(), _v = new WeakMap(), _y = new WeakMap(), _b3 = new WeakMap(), _x = new WeakMap(), _S = new WeakMap(), _k), MatplotlibPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-matplotlib");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/core/codemirror/extensions.ts

@@ -29,14 +29,9 @@ export function formatKeymapExtension(hotkeys: HotkeyProvider) {
       preventDefault: true,
       run: (ev) => {
         const currentLanguage = getCurrentLanguageAdapter(ev);
-        // Early return if not a supported language
-        if (currentLanguage !== "markdown" && currentLanguage !== "python") {
-          return false;
-        }
-
-        // Toggle between markdown and python
         const destinationLanguage =
-          currentLanguage === "python" ? "markdown" : "python";
+          currentLanguage === "markdown" ? "python" : "markdown";
+
         const response = toggleToLanguage(ev, destinationLanguage, {
           force: true,
         });

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

@@ -330,10 +330,7 @@ export class MatplotlibRenderer {
     const prev = this.#state;
     this.#state = state;
 
-    if (state.chartBase64 !== this.#currentChartBase64) {
-      this.#loadImage(state.chartBase64);
-      return;
-    }
+    let needsRedraw = false;
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
@@ -342,15 +339,20 @@ export class MatplotlibRenderer {
       this.#canvas.height = state.height * dpr;
       this.#canvas.style.width = `${state.width}px`;
       this.#canvas.style.height = `${state.height}px`;
+      needsRedraw = true;
+    }
+
+    if (state.chartBase64 !== this.#currentChartBase64) {
+      this.#loadImage(state.chartBase64);
+      return;
     }
 
     // Redraw if style props changed or dimensions changed
     if (
+      needsRedraw ||
       state.selectionColor !== prev.selectionColor ||
       state.selectionOpacity !== prev.selectionOpacity ||
-      state.strokeWidth !== prev.strokeWidth ||
-      state.width !== prev.width ||
-      state.height !== prev.height
+      state.strokeWidth !== prev.strokeWidth
     ) {
       this.#drawCanvas();
     }
@@ -364,6 +366,15 @@ export class MatplotlibRenderer {
     // Clear selection on new chart
     this.#interaction = { type: "idle" };
 
+    // Clear stale image so old content doesn't linger while new image loads
+    this.#image = null;
+    const ctx = this.#canvas.getContext("2d");
+    if (ctx) {
+      const dpr = globalThis.devicePixelRatio ?? 1;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, this.#state.width, this.#state.height);
+    }
+
     const img = new Image();
     img.onload = () => {
       if (generation !== this.#imageGeneration) {