@marimo-team/islands 0.20.0 → 0.20.2

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.2"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -94128,6 +94128,10 @@ ${c}
     let d = Math.min(r.x, c.x), f = Math.max(r.x, c.x), _ = Math.min(r.y, c.y), v = Math.max(r.y, c.y);
     return e.x >= d && e.x <= f && e.y >= _ && e.y <= v;
   }
+  function isInAxes(e, r) {
+    let [c, d, f, _] = r.axesPixelBounds;
+    return e.x >= c && e.x <= f && e.y >= d && e.y <= _;
+  }
   var MatplotlibRenderer = (_k = class {
     constructor(e, r) {
       __privateAdd(this, _MatplotlibRenderer_instances);
@@ -94259,6 +94263,7 @@ ${c}
         __privateGet(this, _e8).setPointerCapture(e.pointerId), __privateGet(this, _t5).focus();
         let r = __privateGet(this, _d2).call(this, e), c = __privateGet(this, _r2);
         if (e.shiftKey) {
+          if (!isInAxes(r, __privateGet(this, _n4))) return;
           __privateSet(this, _r2, {
             type: "lasso",
             points: [
@@ -94307,7 +94312,7 @@ ${c}
           });
           return;
         }
-        __privateGet(this, _h2).call(this) && __privateGet(this, _m).call(this);
+        if (__privateGet(this, _h2).call(this) && __privateGet(this, _m).call(this), !isInAxes(r, __privateGet(this, _n4))) return;
         let d = clampToAxes(r, __privateGet(this, _n4));
         __privateSet(this, _r2, {
           type: "box",
@@ -94413,26 +94418,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;
       }
-      (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);
+      if (e.chartBase64 !== __privateGet(this, _s)) {
+        __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, e.chartBase64);
+        return;
+      }
+      (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.2",
   "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/__tests__/matplotlib-renderer.test.ts

@@ -3,8 +3,14 @@ import { describe, expect, it } from "vitest";
 import type { Data } from "../matplotlib-renderer";
 import { visibleForTesting } from "../matplotlib-renderer";
 
-const { pixelToData, dataToPixel, pointInPolygon, clampToAxes, isPointInBox } =
-  visibleForTesting;
+const {
+  pixelToData,
+  dataToPixel,
+  pointInPolygon,
+  clampToAxes,
+  isPointInBox,
+  isInAxes,
+} = visibleForTesting;
 
 // A simple axes geometry for testing:
 // axes occupy pixels [100, 50] to [500, 350] (400px wide, 300px tall)
@@ -150,3 +156,32 @@ describe("isPointInBox", () => {
     expect(isPointInBox({ x: 5, y: 30 }, boxEnd, boxStart)).toBe(false);
   });
 });
+
+describe("isInAxes", () => {
+  it("returns true for a point inside the axes", () => {
+    expect(isInAxes({ x: 300, y: 200 }, LINEAR_AXES)).toBe(true);
+  });
+
+  it("returns true for a point on the boundary", () => {
+    expect(isInAxes({ x: 100, y: 50 }, LINEAR_AXES)).toBe(true); // top-left
+    expect(isInAxes({ x: 500, y: 350 }, LINEAR_AXES)).toBe(true); // bottom-right
+    expect(isInAxes({ x: 100, y: 350 }, LINEAR_AXES)).toBe(true); // bottom-left
+    expect(isInAxes({ x: 500, y: 50 }, LINEAR_AXES)).toBe(true); // top-right
+  });
+
+  it("returns false for a point left of axes", () => {
+    expect(isInAxes({ x: 99, y: 200 }, LINEAR_AXES)).toBe(false);
+  });
+
+  it("returns false for a point right of axes", () => {
+    expect(isInAxes({ x: 501, y: 200 }, LINEAR_AXES)).toBe(false);
+  });
+
+  it("returns false for a point above axes", () => {
+    expect(isInAxes({ x: 300, y: 49 }, LINEAR_AXES)).toBe(false);
+  });
+
+  it("returns false for a point below axes", () => {
+    expect(isInAxes({ x: 300, y: 351 }, LINEAR_AXES)).toBe(false);
+  });
+});

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

@@ -257,6 +257,11 @@ function isPointInBox(
   return pt.x >= minX && pt.x <= maxX && pt.y >= minY && pt.y <= maxY;
 }
 
+function isInAxes(pt: PixelPoint, g: AxesGeometry): boolean {
+  const [axLeft, axTop, axRight, axBottom] = g.axesPixelBounds;
+  return pt.x >= axLeft && pt.x <= axRight && pt.y >= axTop && pt.y <= axBottom;
+}
+
 export const visibleForTesting = {
   createScale,
   pixelToData,
@@ -264,6 +269,7 @@ export const visibleForTesting = {
   pointInPolygon,
   clampToAxes,
   isPointInBox,
+  isInAxes,
 };
 
 export class MatplotlibRenderer {
@@ -330,10 +336,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 +345,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 +372,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) {
@@ -557,6 +574,9 @@ export class MatplotlibRenderer {
 
     // Shift+click -> start lasso
     if (e.shiftKey) {
+      if (!isInAxes(pt, this.#state)) {
+        return;
+      }
       this.#interaction = {
         type: "lasso",
         points: [clampToAxes(pt, this.#state)],
@@ -609,7 +629,10 @@ export class MatplotlibRenderer {
       this.#clearSelection();
     }
 
-    // Start new box selection
+    // Start new box selection (only inside axes)
+    if (!isInAxes(pt, this.#state)) {
+      return;
+    }
     const clamped = clampToAxes(pt, this.#state);
     this.#interaction = {
       type: "box",