@marimo-team/frontend 0.20.1 → 0.20.2

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-DEPjuBkG.js"></script>
+    <script type="module" crossorigin src="./assets/index-xckvhXGM.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-reX6CfMN.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-nlQpVU_5.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-BfqzeB_k.js">

package/package.json

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

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 {
@@ -568,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)],
@@ -620,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",