@pluot/react 0.1.16 → 0.1.17

package/dist-tsc/use-brush.js

@@ -0,0 +1,360 @@
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { throttle } from "lodash-es";
+import { clampToBrushRegion, getBrushGeometry, getClearButtonCenter, getEdgeDragCorners, getVerticesBoundingBox, isDegenerateBrush, isPointInBrush, rectVerticesFromCorners, reprojectBrushState, vertexFromPixels, } from "./brush.js";
+import { NO_BRUSH } from "./types.js";
+/** Cursor movement (in pixels) that cancels a pending long-click, since the user is panning instead. */
+const LONG_CLICK_CANCEL_PX = 4;
+/** Caps how many vertices a lasso drag can produce, per the `brushMode: "Polygon"` contract. */
+const POLYGON_VERTEX_THROTTLE_MS = 40;
+/** Radius (in pixels) of the hover target around the clear button. */
+export const CLEAR_BUTTON_RADIUS_PX = 9;
+/**
+ * Implements the brush interactions: long-click to create a rect/lasso, drag a
+ * vertex to edit, and click the clear button to cancel.
+ *
+ * Brushing is controlled when `brush` is a `BrushState` or `undefined`, and
+ * uncontrolled when `brush` is `null` (mirroring `cameraMatrix`/`setCameraMatrix`).
+ * When controlled, nothing is stored here: updates are emitted via `onBrush`/
+ * `onBrushEnd` and the parent is expected to feed them back through `brush`.
+ */
+export function useBrush(params) {
+    const { containerRef, width, height, marginTop, marginRight, marginBottom, marginLeft, aspectRatioMode, aspectRatioAlignmentMode, cameraMatrix, brushUnitsModeX = "Data", brushUnitsModeY = "Data", brushMarginTop, brushMarginRight, brushMarginBottom, brushMarginLeft, enableBrushCreate = false, enableBrushEdit = false, enableBrushClear = false, brushDelay = 1500, maybeBrushDelay = 250, persistBrush = false, brushMode = "Rect", brush: controlledBrush, onBrush, onBrushEnd, onBrushClear, } = params;
+    // `null` (or an omitted prop) means uncontrolled; a BrushState or `NO_BRUSH`
+    // means controlled, with `NO_BRUSH` standing for "controlled, nothing brushed".
+    const isControlledBrush = controlledBrush !== null && controlledBrush !== undefined;
+    const [uncontrolledBrush, setUncontrolledBrush] = useState(undefined);
+    const rawBrush = isControlledBrush
+        ? (controlledBrush === NO_BRUSH ? undefined : controlledBrush)
+        : uncontrolledBrush;
+    // A parent may switch between controlled and uncontrolled at runtime. Whatever
+    // was stored during an earlier uncontrolled phase is not the current selection,
+    // so drop it rather than let it resurface if the brush ever goes back.
+    useEffect(() => {
+        if (isControlledBrush) {
+            setUncontrolledBrush(undefined);
+        }
+    }, [isControlledBrush]);
+    const [pressProgress, setPressProgress] = useState(null);
+    const [isBrushHovered, setIsBrushHovered] = useState(false);
+    const isBrushingRef = useRef(false);
+    const shouldSuppressClickRef = useRef(false);
+    // The overlay SVG, so that presses on its handles can be told apart from
+    // presses on the plot itself.
+    const overlayRef = useRef(null);
+    const interactionRef = useRef(null);
+    // The in-progress brush, so that incremental updates (e.g. appending lasso
+    // vertices) do not depend on a controlled parent having fed state back yet.
+    const draftRef = useRef(null);
+    // Bookkeeping for the pending long-click, before any brush exists.
+    const pendingPressRef = useRef(null);
+    const geometry = useMemo(() => getBrushGeometry({
+        width, height,
+        marginTop, marginRight, marginBottom, marginLeft,
+        brushMarginTop, brushMarginRight, brushMarginBottom, brushMarginLeft,
+        brushUnitsModeX, brushUnitsModeY,
+        aspectRatioMode, aspectRatioAlignmentMode, cameraMatrix,
+    }), [
+        width, height, marginTop, marginRight, marginBottom, marginLeft,
+        brushMarginTop, brushMarginRight, brushMarginBottom, brushMarginLeft,
+        brushUnitsModeX, brushUnitsModeY,
+        aspectRatioMode, aspectRatioAlignmentMode, cameraMatrix,
+    ]);
+    // Re-derive the pixel positions under the current geometry, so that a brush
+    // with a "Data" units mode follows the camera as the user zooms/pans.
+    const brushState = useMemo(() => (rawBrush ? reprojectBrushState(rawBrush, geometry, brushUnitsModeX, brushUnitsModeY) : undefined), [rawBrush, geometry, brushUnitsModeX, brushUnitsModeY]);
+    // Convert a mouse event to a position relative to the top-left of the
+    // container, which is the coordinate space of the brush overlay SVG.
+    // `offsetX`/`offsetY` are unusable here because a drag may travel over
+    // several descendants (or leave the container entirely).
+    const getContainerCoords = useCallback((event) => {
+        const containerEl = containerRef.current;
+        if (!containerEl) {
+            return [0, 0];
+        }
+        const rect = containerEl.getBoundingClientRect();
+        return [event.clientX - rect.left, event.clientY - rect.top];
+    }, [containerRef]);
+    // Push a brush update out: internally when uncontrolled, and to the parent in
+    // both cases. Until the Rust-side `Brushable` trait lands there is nothing to
+    // snap to, so the snapped state is the state and the `BrushResult` is unused.
+    const emitBrush = useEffectEvent((nextBrush, isEnd) => {
+        // The draft is always advanced, since the rest of the drag builds on it...
+        draftRef.current = nextBrush;
+        // ...but a brush that spans nothing is not a selection. Committing one would
+        // strand a stray dot on screen (four coincident vertex handles) that the user
+        // then has to clear, so hold it back until the drag gives it some extent.
+        if (isDegenerateBrush(nextBrush)) {
+            return;
+        }
+        if (!isControlledBrush) {
+            setUncontrolledBrush(nextBrush);
+        }
+        if (isEnd) {
+            onBrushEnd?.(nextBrush, nextBrush);
+            // `persistBrush` only applies when uncontrolled; when controlled, the brush
+            // persists for exactly as long as the parent keeps passing it.
+            if (!isControlledBrush && !persistBrush) {
+                setUncontrolledBrush(undefined);
+                draftRef.current = null;
+            }
+        }
+        else {
+            onBrush?.(nextBrush, nextBrush);
+        }
+    });
+    const clearBrush = useEffectEvent(() => {
+        const cleared = draftRef.current ?? rawBrush;
+        draftRef.current = null;
+        if (!isControlledBrush) {
+            setUncontrolledBrush(undefined);
+        }
+        setIsBrushHovered(false);
+        if (cleared) {
+            onBrushClear?.(cleared);
+        }
+    });
+    // --- Drawing a new brush ---
+    const startBrush = useEffectEvent((xPixels, yPixels) => {
+        const [x, y] = clampToBrushRegion(xPixels, yPixels, geometry);
+        isBrushingRef.current = true;
+        interactionRef.current = { kind: "Create", anchorX: x, anchorY: y };
+        const vertices = brushMode === "Polygon"
+            ? [vertexFromPixels(x, y, geometry)]
+            : rectVerticesFromCorners(x, y, x, y, geometry, brushMode);
+        emitBrush({ status: "Drawing", shape: brushMode, vertices }, false);
+    });
+    const appendPolygonVertex = useEffectEvent((xPixels, yPixels) => {
+        const draft = draftRef.current;
+        if (!draft || draft.shape !== "Polygon") {
+            return;
+        }
+        const [x, y] = clampToBrushRegion(xPixels, yPixels, geometry);
+        emitBrush({ ...draft, vertices: [...draft.vertices, vertexFromPixels(x, y, geometry)] }, false);
+    });
+    // The lasso samples the cursor on a timer rather than on every mousemove, to
+    // keep the vertex count bounded regardless of how slowly the user drags.
+    const throttledAppendPolygonVertex = useMemo(() => throttle(appendPolygonVertex, POLYGON_VERTEX_THROTTLE_MS, { leading: true, trailing: true }), []);
+    const updateRect = useEffectEvent((xPixels, yPixels) => {
+        const interaction = interactionRef.current;
+        const draft = draftRef.current;
+        if (!interaction || !draft || draft.shape === "Polygon") {
+            return;
+        }
+        const [x, y] = clampToBrushRegion(xPixels, yPixels, geometry);
+        // Every rect-like drag reduces to a fixed corner plus a moving one. While
+        // creating, the fixed corner is the press point; while dragging a corner, it
+        // is the corner diagonally opposite; while dragging a side, it is a corner of
+        // the opposite side, and the cursor drives only one axis of the moving corner.
+        const fixedX = interaction.kind === "Create" ? interaction.anchorX : interaction.fixedX;
+        const fixedY = interaction.kind === "Create" ? interaction.anchorY : interaction.fixedY;
+        const movingX = interaction.kind === "EditEdge" && interaction.axis === "Y" ? interaction.movingX : x;
+        const movingY = interaction.kind === "EditEdge" && interaction.axis === "X" ? interaction.movingY : y;
+        emitBrush({
+            ...draft,
+            // For RangeX/RangeY this discards the cross-axis drag, so dragging any
+            // corner only ever moves the selected edge.
+            vertices: rectVerticesFromCorners(fixedX, fixedY, movingX, movingY, geometry, draft.shape),
+        }, false);
+    });
+    const movePolygonVertex = useEffectEvent((vertexIndex, xPixels, yPixels) => {
+        const draft = draftRef.current;
+        if (!draft) {
+            return;
+        }
+        const [x, y] = clampToBrushRegion(xPixels, yPixels, geometry);
+        const vertices = draft.vertices.map((vertex, i) => (i === vertexIndex ? vertexFromPixels(x, y, geometry) : vertex));
+        emitBrush({ ...draft, vertices }, false);
+    });
+    const endBrush = useEffectEvent(() => {
+        throttledAppendPolygonVertex.cancel();
+        const draft = draftRef.current;
+        interactionRef.current = null;
+        isBrushingRef.current = false;
+        if (!draft) {
+            return;
+        }
+        shouldSuppressClickRef.current = true;
+        emitBrush({ ...draft, status: "Complete" }, true);
+    });
+    // --- Long-click detection ---
+    const cancelPendingPress = useCallback(() => {
+        if (pendingPressRef.current) {
+            cancelAnimationFrame(pendingPressRef.current.rafId);
+            pendingPressRef.current = null;
+            setPressProgress(null);
+        }
+    }, []);
+    // Runs once per frame while the button is held, showing the filling wedge from
+    // `maybeBrushDelay` onwards and handing off to `startBrush` at `brushDelay`.
+    const tickPendingPress = useEffectEvent(() => {
+        const pending = pendingPressRef.current;
+        if (!pending) {
+            return;
+        }
+        const elapsed = performance.now() - pending.startTime;
+        if (elapsed >= brushDelay) {
+            const { x, y } = pending;
+            cancelPendingPress();
+            startBrush(x, y);
+            return;
+        }
+        setPressProgress(elapsed >= maybeBrushDelay
+            ? { xPixels: pending.x, yPixels: pending.y, fraction: elapsed / brushDelay }
+            : null);
+        pending.rafId = requestAnimationFrame(tickPendingPress);
+    });
+    const mouseDownHandler = useEffectEvent((event) => {
+        // Only a primary-button press inside the brushable region can start a brush.
+        if (!enableBrushCreate || event.button !== 0 || interactionRef.current) {
+            return;
+        }
+        // Presses on the overlay's own controls (the vertex handles and the clear
+        // button) are not attempts to draw a new brush. Their React handlers cannot
+        // prevent this: React dispatches from its root, by which point this native
+        // listener on an ancestor has already run, so `stopPropagation` is too late.
+        if (event.target instanceof Node && overlayRef.current?.contains(event.target)) {
+            return;
+        }
+        const [x, y] = getContainerCoords(event);
+        if (x < geometry.brushLeft || x > geometry.brushRight || y < geometry.brushTop || y > geometry.brushBottom) {
+            return;
+        }
+        cancelPendingPress();
+        pendingPressRef.current = { x, y, startTime: performance.now(), rafId: requestAnimationFrame(tickPendingPress) };
+    });
+    const mouseMoveHandler = useEffectEvent((event) => {
+        // This listener is on the window, so bail out before reading the container's
+        // layout when there is nothing brush-related to track.
+        const isTrackingHover = enableBrushClear && brushState !== undefined;
+        if (!pendingPressRef.current && !interactionRef.current && !isTrackingHover) {
+            return;
+        }
+        const [x, y] = getContainerCoords(event);
+        // Moving before the long-click completes means the user is panning, not brushing.
+        const pending = pendingPressRef.current;
+        if (pending && Math.hypot(x - pending.x, y - pending.y) > LONG_CLICK_CANCEL_PX) {
+            cancelPendingPress();
+        }
+        const interaction = interactionRef.current;
+        if (interaction) {
+            if (interaction.kind === "Create") {
+                if (brushMode === "Polygon") {
+                    throttledAppendPolygonVertex(x, y);
+                }
+                else {
+                    updateRect(x, y);
+                }
+            }
+            else if (interaction.kind === "EditVertex" && draftRef.current?.shape === "Polygon") {
+                movePolygonVertex(interaction.vertexIndex, x, y);
+            }
+            else {
+                updateRect(x, y);
+            }
+            return;
+        }
+        // Not dragging: track whether the pointer is over the brush, to decide
+        // whether to reveal the clear button.
+        if (isTrackingHover && brushState) {
+            const clearButtonCenter = getClearButtonCenter(brushState.vertices, CLEAR_BUTTON_RADIUS_PX, geometry);
+            // The button sits outside the brush, so it needs its own hover target;
+            // otherwise it would vanish as soon as the pointer moved towards it.
+            const isOverClearButton = clearButtonCenter !== null
+                && Math.hypot(x - clearButtonCenter[0], y - clearButtonCenter[1]) <= CLEAR_BUTTON_RADIUS_PX * 2;
+            setIsBrushHovered(isOverClearButton || isPointInBrush(x, y, brushState.vertices));
+        }
+    });
+    const mouseUpHandler = useEffectEvent(() => {
+        cancelPendingPress();
+        if (interactionRef.current) {
+            endBrush();
+        }
+    });
+    const mouseLeaveHandler = useEffectEvent(() => {
+        // Only the hover affordance is reset here; an in-flight drag continues,
+        // since its listeners are on the window.
+        if (!interactionRef.current) {
+            cancelPendingPress();
+            setIsBrushHovered(false);
+        }
+    });
+    useEffect(() => {
+        const containerEl = containerRef.current;
+        if (!containerEl) {
+            return () => { };
+        }
+        containerEl.addEventListener("mousedown", mouseDownHandler);
+        containerEl.addEventListener("mouseleave", mouseLeaveHandler);
+        // Move/up go on the window so a drag that leaves the container still
+        // updates (clamped to the brushable region) and still terminates.
+        window.addEventListener("mousemove", mouseMoveHandler);
+        window.addEventListener("mouseup", mouseUpHandler);
+        return () => {
+            containerEl.removeEventListener("mousedown", mouseDownHandler);
+            containerEl.removeEventListener("mouseleave", mouseLeaveHandler);
+            window.removeEventListener("mousemove", mouseMoveHandler);
+            window.removeEventListener("mouseup", mouseUpHandler);
+        };
+    }, [containerRef]);
+    useEffect(() => () => {
+        cancelPendingPress();
+        throttledAppendPolygonVertex.cancel();
+    }, [cancelPendingPress, throttledAppendPolygonVertex]);
+    // --- Handlers for the overlay's own SVG elements ---
+    const vertexMouseDown = useEffectEvent((vertexIndex, event) => {
+        if (!enableBrushEdit || !brushState || event.button !== 0) {
+            return;
+        }
+        // `mouseDownHandler` already ignored this press; preventDefault only stops
+        // the browser's own text-selection/drag behaviour.
+        event.preventDefault();
+        cancelPendingPress();
+        draftRef.current = brushState;
+        isBrushingRef.current = true;
+        const oppositeVertex = brushState.vertices[(vertexIndex + 2) % 4];
+        interactionRef.current = {
+            kind: "EditVertex",
+            vertexIndex,
+            // Only meaningful for a Rect, where the opposite corner is the pivot.
+            fixedX: oppositeVertex?.x_pixels ?? 0,
+            fixedY: oppositeVertex?.y_pixels ?? 0,
+        };
+    });
+    const edgeMouseDown = useEffectEvent((edge, event) => {
+        if (!enableBrushEdit || !brushState || event.button !== 0) {
+            return;
+        }
+        const boundingBox = getVerticesBoundingBox(brushState.vertices);
+        if (!boundingBox) {
+            return;
+        }
+        // See `vertexMouseDown`: preventDefault only stops text selection here.
+        event.preventDefault();
+        cancelPendingPress();
+        draftRef.current = brushState;
+        isBrushingRef.current = true;
+        interactionRef.current = { kind: "EditEdge", ...getEdgeDragCorners(edge, boundingBox) };
+    });
+    const clearClick = useEffectEvent((event) => {
+        // The overlay is a sibling of the camera element rather than an ancestor,
+        // so this click never reaches the picking handler and needs no suppression.
+        event.preventDefault();
+        clearBrush();
+    });
+    // Wrap in plain callbacks, since useEffectEvent functions may not be handed to children.
+    const onVertexMouseDown = useCallback((vertexIndex, event) => vertexMouseDown(vertexIndex, event), []);
+    const onEdgeMouseDown = useCallback((edge, event) => edgeMouseDown(edge, event), []);
+    const onClearClick = useCallback((event) => clearClick(event), []);
+    return {
+        brushState,
+        geometry,
+        overlayRef,
+        pressProgress,
+        isBrushHovered: isBrushHovered && enableBrushClear,
+        isBrushingRef,
+        shouldSuppressClickRef,
+        onVertexMouseDown,
+        onEdgeMouseDown,
+        onClearClick,
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pluot/react",
   "private": false,
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "React component for visualization with Pluot",
   "license": "Apache-2.0",
   "author": "Mark Keller",
@@ -36,7 +36,7 @@
     "mouse-wheel": "^1.0.2",
     "lz-string": "^1.5.0",
     "lodash-es": "^4.17.23",
-    "@pluot/core": "0.1.16"
+    "@pluot/core": "0.1.17"
   },
   "devDependencies": {
     "vitest": "^3.2.4",
@@ -44,7 +44,9 @@
     "@vitejs/plugin-react": "^5.0.0",
     "jsdom": "^26.1.0",
     "vitest-canvas-mock": "^0.3.3",
-    "typescript": "^5.9"
+    "typescript": "^5.9",
+    "@types/react": "^19.2.14",
+    "@types/lodash-es": "^4.17.12"
   },
   "peerDependencies": {
     "react": "^19.0.0"

package/src/BrushOverlay.tsx

@@ -0,0 +1,254 @@
+import React, { useId, useMemo, type RefObject } from "react";
+import {
+  describeWedgePath, getClearButtonCenter, getEdgeLine, getEditableEdges, getVerticesBoundingBox,
+  type BrushEdge, type BrushGeometry,
+} from "./brush.js";
+import type { BrushState } from "./types.js";
+import { CLEAR_BUTTON_RADIUS_PX, type BrushPressProgress } from "./use-brush.js";
+
+const VERTEX_HANDLE_RADIUS_PX = 4;
+const PRESS_INDICATOR_RADIUS_PX = 10;
+/** How wide a side's invisible grab target is. Kept generous, since a side is 1.5px of ink. */
+const EDGE_HANDLE_WIDTH_PX = 9;
+
+/** Opacity of the brush's fill, relative to `color`; the stroke and handles stay fully opaque. */
+const BRUSH_FILL_OPACITY = 0.15;
+const HANDLE_FILL = "#ffffff";
+const CLEAR_FILL = "#b34040";
+
+// Note: we could alternatively render the brush overlay on the rust side, as a new layer type.
+// This would solve the problem of syncing the overlay (on the JS side) with the rendered visualization (on the rust side) upon camera interactions.
+// However this syncing problem only arises when the brush units mode is Data _and_ the brush overlay is persisted beyond the brush creation.
+
+export type BrushOverlayProps = {
+  width: number;
+  height: number;
+  /** From `useBrush`, so that presses on the handles below are not read as new brushes. */
+  overlayRef: RefObject<SVGSVGElement | null>;
+  /** Supplies the brushable region, which everything drawn here is clipped to. */
+  geometry: BrushGeometry;
+  /** Stroke color of the brush outline/handles; the fill uses the same color at reduced opacity. */
+  color: string;
+  brushState: BrushState | undefined;
+  pressProgress: BrushPressProgress | null;
+  /** Whether to draw the clear button (the pointer is over the brush and `enableBrushClear`). */
+  isBrushHovered: boolean;
+  enableBrushEdit: boolean;
+  onVertexMouseDown: (vertexIndex: number, event: React.MouseEvent) => void;
+  onEdgeMouseDown: (edge: BrushEdge, event: React.MouseEvent) => void;
+  onClearClick: (event: React.MouseEvent) => void;
+};
+
+/** A side is dragged along its perpendicular, so it takes the matching resize cursor. */
+function getEdgeCursor(edge: BrushEdge): string {
+  return edge === "Left" || edge === "Right" ? "ew-resize" : "ns-resize";
+}
+
+/**
+ * The cursor for corner `vertexIndex`, which advertises the axes that corner can
+ * actually move: a range brush only resizes along the axis it selects, and a rect
+ * corner resizes along the diagonal it sits on.
+ */
+function getVertexCursor(shape: BrushState['shape'] | undefined, vertexIndex: number): string {
+  if (shape === "RangeX") {
+    return "ew-resize";
+  }
+  if (shape === "RangeY") {
+    return "ns-resize";
+  }
+  if (shape === "Rect") {
+    // Corners are ordered clockwise from the top-left.
+    return vertexIndex % 2 === 0 ? "nwse-resize" : "nesw-resize";
+  }
+  return "grab";
+}
+
+/**
+ * Draws the brush as an SVG above the plot: a rectangle (or lasso polygon) with
+ * a circle at each vertex, plus the long-click progress wedge and the clear button.
+ *
+ * The SVG root is `pointerEvents: none` so that it never intercepts the camera's
+ * pan/zoom; only the vertex handles and the clear button opt back in.
+ */
+export function BrushOverlay(props: BrushOverlayProps) {
+  const {
+    width, height,
+    overlayRef,
+    geometry,
+    color,
+    brushState,
+    pressProgress,
+    isBrushHovered,
+    enableBrushEdit,
+    onVertexMouseDown,
+    onEdgeMouseDown,
+    onClearClick,
+  } = props;
+
+  const vertices = brushState?.vertices ?? [];
+
+  // Every shape but the lasso is a closed rectangle throughout the drag; a lasso
+  // is left open while the user is still drawing it, and closed once the drag completes.
+  const isClosed = (brushState !== undefined && brushState.shape !== "Polygon")
+    || brushState?.status === "Complete";
+
+  const pathData = useMemo(() => {
+    if (vertices.length === 0) {
+      return null;
+    }
+    const points = vertices.map(v => `${v.x_pixels},${v.y_pixels}`).join(" L ");
+    return `M ${points}${isClosed ? " Z" : ""}`;
+  }, [vertices, isClosed]);
+
+  const clearButtonCenter = getClearButtonCenter(vertices, CLEAR_BUTTON_RADIUS_PX, geometry);
+
+  // `useId` emits colons, which are legal in an id but awkward inside `url(#...)`.
+  const clipPathId = `pluot-brush-clip-${useId().replace(/:/g, "")}`;
+
+  // While drawing a lasso, the intermediate vertices are too dense to be useful
+  // as handles, and they are not editable until the drag completes.
+  const shouldShowVertexHandles = isClosed;
+
+  // Sides are draggable only once the shape is settled, and only for the
+  // axis-aligned shapes; a lasso has no meaningful sides.
+  const editableEdges = enableBrushEdit && isClosed && brushState
+    ? getEditableEdges(brushState.shape)
+    : [];
+
+  // The side handles are the only thing here that needs the extent, so it is not
+  // computed for a lasso or for a brush whose sides are not draggable.
+  const edgeBoundingBox = editableEdges.length > 0 ? getVerticesBoundingBox(vertices) : null;
+
+  return (
+    <svg
+      ref={overlayRef}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        marginTop: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        marginBottom: 0,
+        pointerEvents: "none",
+        // Sit above the canvas/SVG plot and the camera element.
+        zIndex: 1,
+      }}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <clipPath id={clipPathId}>
+          <rect
+            x={geometry.brushLeft}
+            y={geometry.brushTop}
+            width={Math.max(geometry.brushRight - geometry.brushLeft, 0)}
+            height={Math.max(geometry.brushBottom - geometry.brushTop, 0)}
+          />
+        </clipPath>
+      </defs>
+      {/* Everything is clipped to the brushable region: a brush anchored in data
+          units scrolls with the camera, so without this it would spill over the
+          axes and the surrounding margins as the user pans or zooms out. Clipping
+          also applies to hit-testing, so handles that have scrolled out of the
+          region stop responding, matching what the user can see. */}
+      <g clipPath={`url(#${clipPathId})`}>
+        {pathData ? (
+          <path
+            d={pathData}
+            fill={isClosed ? color : "none"}
+            fillOpacity={isClosed ? BRUSH_FILL_OPACITY : undefined}
+            stroke={color}
+            strokeWidth={1.5}
+            strokeDasharray={brushState?.status === "Drawing" ? "4 3" : undefined}
+          />
+        ) : null}
+        {/* Drawn before the corner handles, so a press near a corner grabs the
+            corner rather than one of the two sides meeting there. */}
+        {edgeBoundingBox === null ? null : editableEdges.map(edge => {
+          const [x1, y1, x2, y2] = getEdgeLine(edge, edgeBoundingBox);
+          return (
+            <line
+              key={edge}
+              x1={x1}
+              y1={y1}
+              x2={x2}
+              y2={y2}
+              // Invisible ink, but a wide grab target.
+              stroke="transparent"
+              strokeWidth={EDGE_HANDLE_WIDTH_PX}
+              strokeLinecap="butt"
+              style={{ pointerEvents: "stroke", cursor: getEdgeCursor(edge) }}
+              onMouseDown={event => onEdgeMouseDown(edge, event)}
+            />
+          );
+        })}
+        {shouldShowVertexHandles ? vertices.map((vertex, vertexIndex) => (
+          <circle
+            // Vertices have no identity beyond their position in the ring, and the
+            // list is rebuilt on every update, so the index is the only stable key.
+            key={vertexIndex}
+            cx={vertex.x_pixels}
+            cy={vertex.y_pixels}
+            r={VERTEX_HANDLE_RADIUS_PX}
+            fill={HANDLE_FILL}
+            stroke={color}
+            strokeWidth={1.5}
+            style={{
+              pointerEvents: enableBrushEdit ? "auto" : "none",
+              cursor: enableBrushEdit ? getVertexCursor(brushState?.shape, vertexIndex) : "default",
+            }}
+            onMouseDown={enableBrushEdit ? (event => onVertexMouseDown(vertexIndex, event)) : undefined}
+          />
+        )) : null}
+        {isBrushHovered && clearButtonCenter ? (
+          <g
+            style={{ pointerEvents: "auto", cursor: "pointer" }}
+            onClick={onClearClick}
+            role="button"
+            aria-label="Clear brush"
+          >
+            <circle
+              cx={clearButtonCenter[0]}
+              cy={clearButtonCenter[1]}
+              r={CLEAR_BUTTON_RADIUS_PX}
+              fill={CLEAR_FILL}
+            />
+            <path
+              d={
+                `M ${clearButtonCenter[0] - 4} ${clearButtonCenter[1] - 4} L ${clearButtonCenter[0] + 4} ${clearButtonCenter[1] + 4} `
+                + `M ${clearButtonCenter[0] + 4} ${clearButtonCenter[1] - 4} L ${clearButtonCenter[0] - 4} ${clearButtonCenter[1] + 4}`
+              }
+              stroke="#ffffff"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+            />
+          </g>
+        ) : null}
+        {pressProgress ? (
+          <g>
+            <circle
+              cx={pressProgress.xPixels}
+              cy={pressProgress.yPixels}
+              r={PRESS_INDICATOR_RADIUS_PX}
+              fill="rgba(255, 255, 255, 0.6)"
+              stroke={color}
+              strokeWidth={1.5}
+            />
+            <path
+              d={describeWedgePath(
+                pressProgress.xPixels,
+                pressProgress.yPixels,
+                PRESS_INDICATOR_RADIUS_PX,
+                pressProgress.fraction,
+              )}
+              fill={color}
+            />
+          </g>
+        ) : null}
+      </g>
+    </svg>
+  );
+}