@dcg-overseas/number-line 0.1.30 → 0.1.31

package/dist/index.cjs

@@ -247,6 +247,19 @@ function normalizeDomain(lo, hi) {
   }
   return { min: x, max: y };
 }
+function eraseRadius(pointerType) {
+  return pointerType === "touch" ? 28 : 16;
+}
+function strokeWithinRadius(d, px, py, radius, w, h) {
+  const nums = d.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi);
+  if (!nums) return false;
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    const x = parseFloat(nums[i]) * w;
+    const y = parseFloat(nums[i + 1]) * h;
+    if (Math.hypot(x - px, y - py) < radius) return true;
+  }
+  return false;
+}
 function NumberLineProvider({
   min,
   max,
@@ -285,6 +298,8 @@ function NumberLineProvider({
   });
   const [liveStroke, setLiveStroke] = React.useState(null);
   const svgPoint = React.useRef(null);
+  const [eraseHoverIds, setEraseHoverIds] = React.useState(/* @__PURE__ */ new Set());
+  const eraseGesture = React.useRef(null);
   React.useEffect(() => {
     setDeletedArcIndices(/* @__PURE__ */ new Set());
     setSelectedArcIndices(/* @__PURE__ */ new Set());
@@ -304,28 +319,87 @@ function NumberLineProvider({
     },
     [svgRef]
   );
+  const strokeIdsNear = React.useCallback(
+    (x, y, radius) => {
+      const ids = [];
+      for (const s of drawing.strokes) {
+        if (strokeWithinRadius(s.d, x, y, radius, containerWidth, containerHeight)) {
+          ids.push(s.id);
+        }
+      }
+      return ids;
+    },
+    [drawing.strokes, containerWidth, containerHeight]
+  );
+  const eraseAt = React.useCallback(
+    (x, y, radius) => {
+      const gesture = eraseGesture.current;
+      if (!gesture) return;
+      for (const id of strokeIdsNear(x, y, radius)) {
+        if (!gesture.removed.has(id)) {
+          gesture.removed.add(id);
+          drawing.eraseStroke(id);
+        }
+      }
+    },
+    [strokeIdsNear, drawing]
+  );
   const onPointerDown = React.useCallback(
     (e) => {
       e.currentTarget.focus();
+      if (drawing.tool === "eraser") {
+        if (eraseGesture.current) return;
+        const coords2 = getLocalCoords(e);
+        if (!coords2) return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        eraseGesture.current = { before: drawing.strokes, removed: /* @__PURE__ */ new Set() };
+        setEraseHoverIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+        eraseAt(coords2[0], coords2[1], eraseRadius(e.pointerType));
+        return;
+      }
       if (drawing.tool !== "pen") return;
       e.currentTarget.setPointerCapture(e.pointerId);
       const coords = getLocalCoords(e);
       if (!coords) return;
       drawing.startStroke(coords[0], coords[1], containerWidth, containerHeight);
     },
-    [drawing, getLocalCoords, containerWidth, containerHeight]
+    [drawing, getLocalCoords, containerWidth, containerHeight, eraseAt]
   );
   const onPointerMove = React.useCallback(
     (e) => {
+      if (drawing.tool === "eraser") {
+        const coords2 = getLocalCoords(e);
+        if (!coords2) return;
+        const radius = eraseRadius(e.pointerType);
+        if (eraseGesture.current) {
+          eraseAt(coords2[0], coords2[1], radius);
+        } else {
+          const nextIds = strokeIdsNear(coords2[0], coords2[1], radius);
+          setEraseHoverIds((prev) => {
+            if (nextIds.length === prev.size && nextIds.every((id) => prev.has(id)))
+              return prev;
+            return new Set(nextIds);
+          });
+        }
+        return;
+      }
       if (drawing.tool !== "pen") return;
       const coords = getLocalCoords(e);
       if (!coords) return;
       const live = drawing.continueStroke(coords[0], coords[1], containerWidth, containerHeight);
       if (live) setLiveStroke(live);
     },
-    [drawing, getLocalCoords, containerWidth, containerHeight]
+    [drawing, getLocalCoords, containerWidth, containerHeight, eraseAt, strokeIdsNear]
   );
   const onPointerUp = React.useCallback(() => {
+    const gesture = eraseGesture.current;
+    if (gesture) {
+      eraseGesture.current = null;
+      if (gesture.removed.size > 0) {
+        history.push({ type: "delete", strokesBefore: gesture.before, arcIndices: [] });
+      }
+      return;
+    }
     if (drawing.tool !== "pen") return;
     const stroke = drawing.endStroke();
     setLiveStroke(null);
@@ -334,21 +408,18 @@ function NumberLineProvider({
       history.push({ type: "add", strokes: [stroke] });
     }
   }, [drawing, history]);
+  const onPointerLeave = React.useCallback(() => {
+    if (eraseGesture.current) return;
+    setEraseHoverIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
   const onStrokeClick = React.useCallback(
     (id, e) => {
       e.stopPropagation();
-      if (drawing.tool === "eraser") {
-        const target = drawing.strokes.find((s) => s.id === id);
-        if (target) {
-          const strokesBefore = drawing.strokes;
-          drawing.eraseStroke(id);
-          history.push({ type: "delete", strokesBefore, arcIndices: [] });
-        }
-      } else if (drawing.tool === "none") {
+      if (drawing.tool === "none") {
         drawing.toggleSelect(id);
       }
     },
-    [drawing, history]
+    [drawing]
   );
   const onArcClick = React.useCallback(
     (groupIndex, e) => {
@@ -417,6 +488,7 @@ function NumberLineProvider({
   const canDelete = drawing.strokes.some((s) => s.selected) || selectedArcIndices.size > 0;
   React.useEffect(() => {
     setSelectedArcIndices(/* @__PURE__ */ new Set());
+    setEraseHoverIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
   }, [drawing.tool]);
   const keyHandlers = React.useRef({ toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo });
   keyHandlers.current = { toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo };
@@ -468,11 +540,13 @@ function NumberLineProvider({
         tool: drawing.tool,
         strokes: drawing.strokes,
         liveStroke,
+        eraseHoverIds,
         selectedArcIndices,
         deletedArcIndices,
         onPointerDown,
         onPointerMove,
         onPointerUp,
+        onPointerLeave,
         onStrokeClick,
         onArcClick,
         canDelete,
@@ -916,11 +990,10 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
-  const [hoveredId, setHoveredId] = React.useState(null);
+function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds, onStrokeClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
     strokes.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      (s.selected || tool === "eraser" && s.id === hoveredId) && /* @__PURE__ */ jsxRuntime.jsx(
+      (s.selected || tool === "eraser" && eraseHoverIds.has(s.id)) && /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
           d: s.d,
@@ -945,10 +1018,8 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
           vectorEffect: "non-scaling-stroke",
           pointerEvents: "stroke",
           style: { cursor: tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default" },
-          onPointerEnter: () => setHoveredId(s.id),
-          onPointerLeave: () => setHoveredId((prev) => prev === s.id ? null : prev),
           onClick: (e) => {
-            if (tool === "eraser" || tool === "none") {
+            if (tool === "none") {
               e.stopPropagation();
               onStrokeClick(s.id, e);
             }
@@ -1015,11 +1086,13 @@ function NumberLine({ className }) {
     tool,
     strokes,
     liveStroke,
+    eraseHoverIds,
     selectedArcIndices,
     deletedArcIndices,
     onPointerDown,
     onPointerMove,
     onPointerUp,
+    onPointerLeave,
     onStrokeClick,
     onArcClick
   } = useNumberLineContext();
@@ -1186,6 +1259,8 @@ function NumberLine({ className }) {
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onPointerLeave,
       onWheel: handleWheel,
       onDoubleClick: handleDoubleClick,
       onMouseEnter: () => enableZoom && setIsZoomActive(true),
@@ -1244,6 +1319,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            eraseHoverIds,
             onStrokeClick
           }
         )

package/dist/index.d.ts

@@ -29,11 +29,14 @@ export declare interface NumberLineContextValue {
     tool: Tool;
     strokes: Stroke[];
     liveStroke: Stroke | null;
+    /** Stroke ids the eraser brush is hovering over (preview of what a press would remove). */
+    eraseHoverIds: Set<string>;
     selectedArcIndices: Set<number>;
     deletedArcIndices: Set<number>;
     onPointerDown: (e: default_2.PointerEvent<SVGSVGElement>) => void;
     onPointerMove: (e: default_2.PointerEvent<SVGSVGElement>) => void;
     onPointerUp: () => void;
+    onPointerLeave: () => void;
     onStrokeClick: (id: string, e: default_2.PointerEvent) => void;
     onArcClick: (groupIndex: number, e: default_2.PointerEvent) => void;
     canDelete: boolean;

package/dist/index.js

@@ -245,6 +245,19 @@ function normalizeDomain(lo, hi) {
   }
   return { min: x, max: y };
 }
+function eraseRadius(pointerType) {
+  return pointerType === "touch" ? 28 : 16;
+}
+function strokeWithinRadius(d, px, py, radius, w, h) {
+  const nums = d.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi);
+  if (!nums) return false;
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    const x = parseFloat(nums[i]) * w;
+    const y = parseFloat(nums[i + 1]) * h;
+    if (Math.hypot(x - px, y - py) < radius) return true;
+  }
+  return false;
+}
 function NumberLineProvider({
   min,
   max,
@@ -283,6 +296,8 @@ function NumberLineProvider({
   });
   const [liveStroke, setLiveStroke] = useState(null);
   const svgPoint = useRef(null);
+  const [eraseHoverIds, setEraseHoverIds] = useState(/* @__PURE__ */ new Set());
+  const eraseGesture = useRef(null);
   useEffect(() => {
     setDeletedArcIndices(/* @__PURE__ */ new Set());
     setSelectedArcIndices(/* @__PURE__ */ new Set());
@@ -302,28 +317,87 @@ function NumberLineProvider({
     },
     [svgRef]
   );
+  const strokeIdsNear = useCallback(
+    (x, y, radius) => {
+      const ids = [];
+      for (const s of drawing.strokes) {
+        if (strokeWithinRadius(s.d, x, y, radius, containerWidth, containerHeight)) {
+          ids.push(s.id);
+        }
+      }
+      return ids;
+    },
+    [drawing.strokes, containerWidth, containerHeight]
+  );
+  const eraseAt = useCallback(
+    (x, y, radius) => {
+      const gesture = eraseGesture.current;
+      if (!gesture) return;
+      for (const id of strokeIdsNear(x, y, radius)) {
+        if (!gesture.removed.has(id)) {
+          gesture.removed.add(id);
+          drawing.eraseStroke(id);
+        }
+      }
+    },
+    [strokeIdsNear, drawing]
+  );
   const onPointerDown = useCallback(
     (e) => {
       e.currentTarget.focus();
+      if (drawing.tool === "eraser") {
+        if (eraseGesture.current) return;
+        const coords2 = getLocalCoords(e);
+        if (!coords2) return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        eraseGesture.current = { before: drawing.strokes, removed: /* @__PURE__ */ new Set() };
+        setEraseHoverIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+        eraseAt(coords2[0], coords2[1], eraseRadius(e.pointerType));
+        return;
+      }
       if (drawing.tool !== "pen") return;
       e.currentTarget.setPointerCapture(e.pointerId);
       const coords = getLocalCoords(e);
       if (!coords) return;
       drawing.startStroke(coords[0], coords[1], containerWidth, containerHeight);
     },
-    [drawing, getLocalCoords, containerWidth, containerHeight]
+    [drawing, getLocalCoords, containerWidth, containerHeight, eraseAt]
   );
   const onPointerMove = useCallback(
     (e) => {
+      if (drawing.tool === "eraser") {
+        const coords2 = getLocalCoords(e);
+        if (!coords2) return;
+        const radius = eraseRadius(e.pointerType);
+        if (eraseGesture.current) {
+          eraseAt(coords2[0], coords2[1], radius);
+        } else {
+          const nextIds = strokeIdsNear(coords2[0], coords2[1], radius);
+          setEraseHoverIds((prev) => {
+            if (nextIds.length === prev.size && nextIds.every((id) => prev.has(id)))
+              return prev;
+            return new Set(nextIds);
+          });
+        }
+        return;
+      }
       if (drawing.tool !== "pen") return;
       const coords = getLocalCoords(e);
       if (!coords) return;
       const live = drawing.continueStroke(coords[0], coords[1], containerWidth, containerHeight);
       if (live) setLiveStroke(live);
     },
-    [drawing, getLocalCoords, containerWidth, containerHeight]
+    [drawing, getLocalCoords, containerWidth, containerHeight, eraseAt, strokeIdsNear]
   );
   const onPointerUp = useCallback(() => {
+    const gesture = eraseGesture.current;
+    if (gesture) {
+      eraseGesture.current = null;
+      if (gesture.removed.size > 0) {
+        history.push({ type: "delete", strokesBefore: gesture.before, arcIndices: [] });
+      }
+      return;
+    }
     if (drawing.tool !== "pen") return;
     const stroke = drawing.endStroke();
     setLiveStroke(null);
@@ -332,21 +406,18 @@ function NumberLineProvider({
       history.push({ type: "add", strokes: [stroke] });
     }
   }, [drawing, history]);
+  const onPointerLeave = useCallback(() => {
+    if (eraseGesture.current) return;
+    setEraseHoverIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
   const onStrokeClick = useCallback(
     (id, e) => {
       e.stopPropagation();
-      if (drawing.tool === "eraser") {
-        const target = drawing.strokes.find((s) => s.id === id);
-        if (target) {
-          const strokesBefore = drawing.strokes;
-          drawing.eraseStroke(id);
-          history.push({ type: "delete", strokesBefore, arcIndices: [] });
-        }
-      } else if (drawing.tool === "none") {
+      if (drawing.tool === "none") {
         drawing.toggleSelect(id);
       }
     },
-    [drawing, history]
+    [drawing]
   );
   const onArcClick = useCallback(
     (groupIndex, e) => {
@@ -415,6 +486,7 @@ function NumberLineProvider({
   const canDelete = drawing.strokes.some((s) => s.selected) || selectedArcIndices.size > 0;
   useEffect(() => {
     setSelectedArcIndices(/* @__PURE__ */ new Set());
+    setEraseHoverIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
   }, [drawing.tool]);
   const keyHandlers = useRef({ toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo });
   keyHandlers.current = { toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo };
@@ -466,11 +538,13 @@ function NumberLineProvider({
         tool: drawing.tool,
         strokes: drawing.strokes,
         liveStroke,
+        eraseHoverIds,
         selectedArcIndices,
         deletedArcIndices,
         onPointerDown,
         onPointerMove,
         onPointerUp,
+        onPointerLeave,
         onStrokeClick,
         onArcClick,
         canDelete,
@@ -914,11 +988,10 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   }
   return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
-  const [hoveredId, setHoveredId] = useState(null);
+function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds, onStrokeClick }) {
   return /* @__PURE__ */ jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
     strokes.map((s) => /* @__PURE__ */ jsxs("g", { children: [
-      (s.selected || tool === "eraser" && s.id === hoveredId) && /* @__PURE__ */ jsx(
+      (s.selected || tool === "eraser" && eraseHoverIds.has(s.id)) && /* @__PURE__ */ jsx(
         "path",
         {
           d: s.d,
@@ -943,10 +1016,8 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
           vectorEffect: "non-scaling-stroke",
           pointerEvents: "stroke",
           style: { cursor: tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default" },
-          onPointerEnter: () => setHoveredId(s.id),
-          onPointerLeave: () => setHoveredId((prev) => prev === s.id ? null : prev),
           onClick: (e) => {
-            if (tool === "eraser" || tool === "none") {
+            if (tool === "none") {
               e.stopPropagation();
               onStrokeClick(s.id, e);
             }
@@ -1013,11 +1084,13 @@ function NumberLine({ className }) {
     tool,
     strokes,
     liveStroke,
+    eraseHoverIds,
     selectedArcIndices,
     deletedArcIndices,
     onPointerDown,
     onPointerMove,
     onPointerUp,
+    onPointerLeave,
     onStrokeClick,
     onArcClick
   } = useNumberLineContext();
@@ -1184,6 +1257,8 @@ function NumberLine({ className }) {
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onPointerLeave,
       onWheel: handleWheel,
       onDoubleClick: handleDoubleClick,
       onMouseEnter: () => enableZoom && setIsZoomActive(true),
@@ -1242,6 +1317,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            eraseHoverIds,
             onStrokeClick
           }
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcg-overseas/number-line",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "Interactive number line component with group arcs and freehand drawing",
   "type": "module",
   "license": "MIT",