@dcg-overseas/number-line 0.1.30 → 1.0.0-beta.0

package/README.md

@@ -210,11 +210,12 @@ function App() {
 | `canDelete` | `boolean` | 是否有可删除的选中项（笔迹或弧线） |
 | `canUndo` | `boolean` | 是否有可撤销的操作 |
 | `onTogglePen` | `() => void` | 切换画笔工具 |
-| `onToggleEraser` | `() => void` | 切换橡皮擦 |
-| `onDelete` | `() => void` | 删除当前选中 |
-| `onReset` | `() => void` | 清空所有笔迹与选中，并隐藏全部跳数弧线**及分组边界粗刻度**（重新设置 `groupSize/groupCount/min/max` 后恢复） |
+| `onToggleEraser` | `() => void` | 切换橡皮擦 |
+| `onDelete` | `() => void` | 删除当前选中 |
+| `clearAll` | `() => void` | 可撤销地清空全部笔迹、弧线、选择和分组边界粗刻度；连续清空不会增加空历史项 |
+| `onReset` | `() => void` | `clearAll` 的兼容别名，已弃用；新代码请使用 `clearAll` |
 | `onUndo` | `() => void` | 撤销上一步操作 |
-| `showAllArcs` | `() => void` | 重新显示全部跳数弧线**及分组边界粗刻度**（清空删除记录）。即使参数未变、或刚 `onReset` 隐藏后，也能强制把跳数显示出来，且不影响笔迹 |
+| `showAllArcs` | `() => void` | 重新显示全部跳数弧线**及分组边界粗刻度**（清空删除记录）。即使参数未变、或刚 `clearAll` 隐藏后，也能强制把跳数显示出来，且不影响笔迹 |
 
 #### 缩放 API（仅 `enableZoom=true` 时有效）
 | 字段 | 类型 | 说明 |
@@ -234,7 +235,7 @@ function App() {
 import { NumberLineProvider, NumberLine, useNumberLineContext } from '@dcg-overseas/number-line'
 
 function Toolbar() {
-  const { tool, canDelete, canUndo, onTogglePen, onToggleEraser, onDelete, onReset, onUndo } =
+  const { tool, canDelete, canUndo, onTogglePen, onToggleEraser, onDelete, clearAll, onUndo } =
     useNumberLineContext()
 
   return (
@@ -242,7 +243,7 @@ function Toolbar() {
       <button data-active={tool === 'pen'} onClick={onTogglePen}>✏️ 画笔</button>
       <button data-active={tool === 'eraser'} onClick={onToggleEraser}>🩹 擦除</button>
       <button disabled={!canDelete} onClick={onDelete}>🗑 删除</button>
-      <button onClick={onReset}>♻️ 重置</button>
+      <button onClick={clearAll}>♻️ 全部清除</button>
       <button disabled={!canUndo} onClick={onUndo}>↶ 撤销</button>
     </div>
   )
@@ -304,12 +305,9 @@ import type {
 
 ### 操作级撤销
 
-撤销栈记录的是「操作」而非「状态」（`HistoryOp`），分两类：
-
-- `add` — 新增笔迹，撤销 = 移除指定 id
-- `delete` — 删除笔迹/弧线，撤销 = 恢复删除前完整快照 + 还原弧线 group index
-
-这样即使一次 `delete` 同时删了多条笔迹和多条弧线，撤销也能精确还原。
+撤销栈记录每次操作发生前的完整状态快照，包括笔迹、已删除弧线、已选弧线和粗分组刻度状态。
+画笔、橡皮擦、删除选中及 `clearAll` 都复用同一恢复流程，因此一次清空或批量删除可以完整还原。
+`min`、`max`、`groupSize`、`groupCount` 或 `tickStep` 改变时会执行不可撤销初始化并清空历史，防止把上一道题的数据恢复到新坐标范围。
 
 ---
 

package/dist/index.cjs

@@ -5,27 +5,16 @@ const React = require("react");
 function useHistory() {
   const stackRef = React.useRef([]);
   const [stackLen, setStackLen] = React.useState(0);
-  const push = React.useCallback((op) => {
-    stackRef.current = [...stackRef.current, op];
+  const push = React.useCallback((snapshot) => {
+    stackRef.current = [...stackRef.current, snapshot];
     setStackLen(stackRef.current.length);
   }, []);
-  const undo = React.useCallback((strokes) => {
-    if (stackRef.current.length === 0) return { strokes: null, arcIndices: [] };
-    const op = stackRef.current[stackRef.current.length - 1];
+  const undo = React.useCallback(() => {
+    if (stackRef.current.length === 0) return null;
+    const snapshot = stackRef.current[stackRef.current.length - 1];
     stackRef.current = stackRef.current.slice(0, -1);
     setStackLen(stackRef.current.length);
-    switch (op.type) {
-      case "add":
-        return {
-          strokes: strokes.filter((s) => !op.strokes.some((os) => os.id === s.id)),
-          arcIndices: []
-        };
-      case "delete":
-        return {
-          strokes: op.strokesBefore,
-          arcIndices: op.arcIndices
-        };
-    }
+    return snapshot;
   }, []);
   const clear = React.useCallback(() => {
     stackRef.current = [];
@@ -247,6 +236,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,11 +287,35 @@ 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);
+  const createHistorySnapshot = React.useCallback(
+    (strokesOverride) => ({
+      strokes: (strokesOverride ?? drawing.strokes).map((stroke) => ({ ...stroke })),
+      deletedArcIndices: [...deletedArcIndices],
+      selectedArcIndices: [...selectedArcIndices],
+      groupTicksHidden
+    }),
+    [drawing.strokes, deletedArcIndices, selectedArcIndices, groupTicksHidden]
+  );
   React.useEffect(() => {
+    drawing.resetStrokes();
+    history.clear();
+    setLiveStroke(null);
+    eraseGesture.current = null;
+    setEraseHoverIds(/* @__PURE__ */ new Set());
     setDeletedArcIndices(/* @__PURE__ */ new Set());
     setSelectedArcIndices(/* @__PURE__ */ new Set());
     setGroupTicksHidden(false);
-  }, [domainMin, domainMax, groupSize, groupCount]);
+  }, [
+    domainMin,
+    domainMax,
+    groupSize,
+    groupCount,
+    tickStep,
+    drawing.resetStrokes,
+    history.clear
+  ]);
   const getLocalCoords = React.useCallback(
     (e) => {
       const svg = svgRef.current;
@@ -304,51 +330,107 @@ 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(createHistorySnapshot(gesture.before));
+      }
+      return;
+    }
     if (drawing.tool !== "pen") return;
     const stroke = drawing.endStroke();
     setLiveStroke(null);
     if (stroke) {
+      history.push(createHistorySnapshot());
       drawing.addStroke(stroke);
-      history.push({ type: "add", strokes: [stroke] });
     }
-  }, [drawing, history]);
+  }, [drawing, history, createHistorySnapshot]);
+  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) => {
@@ -366,39 +448,55 @@ function NumberLineProvider({
   );
   const clearArcSelection = React.useCallback(() => setSelectedArcIndices(/* @__PURE__ */ new Set()), []);
   const onDelete = React.useCallback(() => {
-    const strokesBefore = drawing.strokes;
     const deletedStrokes = drawing.strokes.filter((s) => s.selected);
     const deletedArcs = [...selectedArcIndices];
     if (deletedStrokes.length === 0 && deletedArcs.length === 0) return;
+    history.push(createHistorySnapshot());
     if (deletedStrokes.length > 0) drawing.deleteSelected();
     if (deletedArcs.length > 0) {
       setDeletedArcIndices((prev) => /* @__PURE__ */ new Set([...prev, ...deletedArcs]));
       setSelectedArcIndices(/* @__PURE__ */ new Set());
     }
-    history.push({ type: "delete", strokesBefore, arcIndices: deletedArcs });
-  }, [drawing, history, selectedArcIndices]);
-  const onReset = React.useCallback(() => {
-    drawing.resetStrokes();
-    history.clear();
+  }, [drawing, history, selectedArcIndices, createHistorySnapshot]);
+  const clearAll = React.useCallback(() => {
     const arcCount = Math.max(0, Math.ceil(Number(groupCount) || 0));
+    const allArcsDeleted = deletedArcIndices.size >= arcCount && Array.from({ length: arcCount }, (_, index) => index).every(
+      (index) => deletedArcIndices.has(index)
+    );
+    const alreadyClear = drawing.strokes.length === 0 && selectedArcIndices.size === 0 && allArcsDeleted && groupTicksHidden;
+    if (alreadyClear) return;
+    history.push(createHistorySnapshot());
+    drawing.resetStrokes();
+    setLiveStroke(null);
+    eraseGesture.current = null;
+    setEraseHoverIds(/* @__PURE__ */ new Set());
     setDeletedArcIndices(new Set(Array.from({ length: arcCount }, (_, i) => i)));
     setSelectedArcIndices(/* @__PURE__ */ new Set());
     setGroupTicksHidden(true);
-  }, [drawing, history, groupCount]);
+  }, [
+    drawing,
+    history,
+    groupCount,
+    deletedArcIndices,
+    selectedArcIndices,
+    groupTicksHidden,
+    createHistorySnapshot
+  ]);
+  const onReset = clearAll;
   const showAllArcs = React.useCallback(() => {
     setDeletedArcIndices((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
     setGroupTicksHidden(false);
   }, []);
   const onUndo = React.useCallback(() => {
-    const result = history.undo(drawing.strokes);
-    if (result.strokes !== null) drawing.restoreStrokes(result.strokes);
-    if (result.arcIndices.length > 0) {
-      setDeletedArcIndices((prev) => {
-        const next = new Set(prev);
-        result.arcIndices.forEach((i) => next.delete(i));
-        return next;
-      });
-    }
+    const snapshot = history.undo();
+    if (!snapshot) return;
+    drawing.restoreStrokes(snapshot.strokes);
+    setDeletedArcIndices(new Set(snapshot.deletedArcIndices));
+    setSelectedArcIndices(new Set(snapshot.selectedArcIndices));
+    setGroupTicksHidden(snapshot.groupTicksHidden);
+    setLiveStroke(null);
+    eraseGesture.current = null;
+    setEraseHoverIds(/* @__PURE__ */ new Set());
   }, [history, drawing]);
   const onTogglePen = React.useCallback(
     () => {
@@ -417,6 +515,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 +567,13 @@ function NumberLineProvider({
         tool: drawing.tool,
         strokes: drawing.strokes,
         liveStroke,
+        eraseHoverIds,
         selectedArcIndices,
         deletedArcIndices,
         onPointerDown,
         onPointerMove,
         onPointerUp,
+        onPointerLeave,
         onStrokeClick,
         onArcClick,
         canDelete,
@@ -480,6 +581,7 @@ function NumberLineProvider({
         onTogglePen,
         onToggleEraser,
         onDelete,
+        clearAll,
         onReset,
         onUndo,
         showAllArcs
@@ -916,11 +1018,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 +1046,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 +1114,13 @@ function NumberLine({ className }) {
     tool,
     strokes,
     liveStroke,
+    eraseHoverIds,
     selectedArcIndices,
     deletedArcIndices,
     onPointerDown,
     onPointerMove,
     onPointerUp,
+    onPointerLeave,
     onStrokeClick,
     onArcClick
   } = useNumberLineContext();
@@ -1186,6 +1287,8 @@ function NumberLine({ className }) {
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onPointerLeave,
       onWheel: handleWheel,
       onDoubleClick: handleDoubleClick,
       onMouseEnter: () => enableZoom && setIsZoomActive(true),
@@ -1244,6 +1347,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;
@@ -41,6 +44,9 @@ export declare interface NumberLineContextValue {
     onTogglePen: () => void;
     onToggleEraser: () => void;
     onDelete: () => void;
+    /** 可撤销地清空笔迹、弧线、选择和粗分组刻度；已为空时不创建历史项。 */
+    clearAll: () => void;
+    /** @deprecated 请使用语义明确且行为相同的 `clearAll`。 */
     onReset: () => void;
     onUndo: () => void;
     /** restore (re-show) every arc by clearing the deleted-arc record */

package/dist/index.js

@@ -3,27 +3,16 @@ import React, { useRef, useState, useCallback, useLayoutEffect, useEffect, creat
 function useHistory() {
   const stackRef = useRef([]);
   const [stackLen, setStackLen] = useState(0);
-  const push = useCallback((op) => {
-    stackRef.current = [...stackRef.current, op];
+  const push = useCallback((snapshot) => {
+    stackRef.current = [...stackRef.current, snapshot];
     setStackLen(stackRef.current.length);
   }, []);
-  const undo = useCallback((strokes) => {
-    if (stackRef.current.length === 0) return { strokes: null, arcIndices: [] };
-    const op = stackRef.current[stackRef.current.length - 1];
+  const undo = useCallback(() => {
+    if (stackRef.current.length === 0) return null;
+    const snapshot = stackRef.current[stackRef.current.length - 1];
     stackRef.current = stackRef.current.slice(0, -1);
     setStackLen(stackRef.current.length);
-    switch (op.type) {
-      case "add":
-        return {
-          strokes: strokes.filter((s) => !op.strokes.some((os) => os.id === s.id)),
-          arcIndices: []
-        };
-      case "delete":
-        return {
-          strokes: op.strokesBefore,
-          arcIndices: op.arcIndices
-        };
-    }
+    return snapshot;
   }, []);
   const clear = useCallback(() => {
     stackRef.current = [];
@@ -245,6 +234,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,11 +285,35 @@ function NumberLineProvider({
   });
   const [liveStroke, setLiveStroke] = useState(null);
   const svgPoint = useRef(null);
+  const [eraseHoverIds, setEraseHoverIds] = useState(/* @__PURE__ */ new Set());
+  const eraseGesture = useRef(null);
+  const createHistorySnapshot = useCallback(
+    (strokesOverride) => ({
+      strokes: (strokesOverride ?? drawing.strokes).map((stroke) => ({ ...stroke })),
+      deletedArcIndices: [...deletedArcIndices],
+      selectedArcIndices: [...selectedArcIndices],
+      groupTicksHidden
+    }),
+    [drawing.strokes, deletedArcIndices, selectedArcIndices, groupTicksHidden]
+  );
   useEffect(() => {
+    drawing.resetStrokes();
+    history.clear();
+    setLiveStroke(null);
+    eraseGesture.current = null;
+    setEraseHoverIds(/* @__PURE__ */ new Set());
     setDeletedArcIndices(/* @__PURE__ */ new Set());
     setSelectedArcIndices(/* @__PURE__ */ new Set());
     setGroupTicksHidden(false);
-  }, [domainMin, domainMax, groupSize, groupCount]);
+  }, [
+    domainMin,
+    domainMax,
+    groupSize,
+    groupCount,
+    tickStep,
+    drawing.resetStrokes,
+    history.clear
+  ]);
   const getLocalCoords = useCallback(
     (e) => {
       const svg = svgRef.current;
@@ -302,51 +328,107 @@ 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(createHistorySnapshot(gesture.before));
+      }
+      return;
+    }
     if (drawing.tool !== "pen") return;
     const stroke = drawing.endStroke();
     setLiveStroke(null);
     if (stroke) {
+      history.push(createHistorySnapshot());
       drawing.addStroke(stroke);
-      history.push({ type: "add", strokes: [stroke] });
     }
-  }, [drawing, history]);
+  }, [drawing, history, createHistorySnapshot]);
+  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) => {
@@ -364,39 +446,55 @@ function NumberLineProvider({
   );
   const clearArcSelection = useCallback(() => setSelectedArcIndices(/* @__PURE__ */ new Set()), []);
   const onDelete = useCallback(() => {
-    const strokesBefore = drawing.strokes;
     const deletedStrokes = drawing.strokes.filter((s) => s.selected);
     const deletedArcs = [...selectedArcIndices];
     if (deletedStrokes.length === 0 && deletedArcs.length === 0) return;
+    history.push(createHistorySnapshot());
     if (deletedStrokes.length > 0) drawing.deleteSelected();
     if (deletedArcs.length > 0) {
       setDeletedArcIndices((prev) => /* @__PURE__ */ new Set([...prev, ...deletedArcs]));
       setSelectedArcIndices(/* @__PURE__ */ new Set());
     }
-    history.push({ type: "delete", strokesBefore, arcIndices: deletedArcs });
-  }, [drawing, history, selectedArcIndices]);
-  const onReset = useCallback(() => {
-    drawing.resetStrokes();
-    history.clear();
+  }, [drawing, history, selectedArcIndices, createHistorySnapshot]);
+  const clearAll = useCallback(() => {
     const arcCount = Math.max(0, Math.ceil(Number(groupCount) || 0));
+    const allArcsDeleted = deletedArcIndices.size >= arcCount && Array.from({ length: arcCount }, (_, index) => index).every(
+      (index) => deletedArcIndices.has(index)
+    );
+    const alreadyClear = drawing.strokes.length === 0 && selectedArcIndices.size === 0 && allArcsDeleted && groupTicksHidden;
+    if (alreadyClear) return;
+    history.push(createHistorySnapshot());
+    drawing.resetStrokes();
+    setLiveStroke(null);
+    eraseGesture.current = null;
+    setEraseHoverIds(/* @__PURE__ */ new Set());
     setDeletedArcIndices(new Set(Array.from({ length: arcCount }, (_, i) => i)));
     setSelectedArcIndices(/* @__PURE__ */ new Set());
     setGroupTicksHidden(true);
-  }, [drawing, history, groupCount]);
+  }, [
+    drawing,
+    history,
+    groupCount,
+    deletedArcIndices,
+    selectedArcIndices,
+    groupTicksHidden,
+    createHistorySnapshot
+  ]);
+  const onReset = clearAll;
   const showAllArcs = useCallback(() => {
     setDeletedArcIndices((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
     setGroupTicksHidden(false);
   }, []);
   const onUndo = useCallback(() => {
-    const result = history.undo(drawing.strokes);
-    if (result.strokes !== null) drawing.restoreStrokes(result.strokes);
-    if (result.arcIndices.length > 0) {
-      setDeletedArcIndices((prev) => {
-        const next = new Set(prev);
-        result.arcIndices.forEach((i) => next.delete(i));
-        return next;
-      });
-    }
+    const snapshot = history.undo();
+    if (!snapshot) return;
+    drawing.restoreStrokes(snapshot.strokes);
+    setDeletedArcIndices(new Set(snapshot.deletedArcIndices));
+    setSelectedArcIndices(new Set(snapshot.selectedArcIndices));
+    setGroupTicksHidden(snapshot.groupTicksHidden);
+    setLiveStroke(null);
+    eraseGesture.current = null;
+    setEraseHoverIds(/* @__PURE__ */ new Set());
   }, [history, drawing]);
   const onTogglePen = useCallback(
     () => {
@@ -415,6 +513,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 +565,13 @@ function NumberLineProvider({
         tool: drawing.tool,
         strokes: drawing.strokes,
         liveStroke,
+        eraseHoverIds,
         selectedArcIndices,
         deletedArcIndices,
         onPointerDown,
         onPointerMove,
         onPointerUp,
+        onPointerLeave,
         onStrokeClick,
         onArcClick,
         canDelete,
@@ -478,6 +579,7 @@ function NumberLineProvider({
         onTogglePen,
         onToggleEraser,
         onDelete,
+        clearAll,
         onReset,
         onUndo,
         showAllArcs
@@ -914,11 +1016,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 +1044,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 +1112,13 @@ function NumberLine({ className }) {
     tool,
     strokes,
     liveStroke,
+    eraseHoverIds,
     selectedArcIndices,
     deletedArcIndices,
     onPointerDown,
     onPointerMove,
     onPointerUp,
+    onPointerLeave,
     onStrokeClick,
     onArcClick
   } = useNumberLineContext();
@@ -1184,6 +1285,8 @@ function NumberLine({ className }) {
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onPointerLeave,
       onWheel: handleWheel,
       onDoubleClick: handleDoubleClick,
       onMouseEnter: () => enableZoom && setIsZoomActive(true),
@@ -1242,6 +1345,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            eraseHoverIds,
             onStrokeClick
           }
         )

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@dcg-overseas/number-line",
-  "version": "0.1.30",
-  "description": "Interactive number line component with group arcs and freehand drawing",
-  "type": "module",
-  "license": "MIT",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist *.tsbuildinfo"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@dcg-overseas/number-line",
+  "version": "1.0.0-beta.0",
+  "description": "Interactive number line component with group arcs and freehand drawing",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}