@dcg-overseas/number-line 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

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

package/dist/index.cjs

@@ -223,6 +223,7 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
+const DEFAULT_DRAWING_STROKE_WIDTH = 2.5;
 function normalizeDomain(lo, hi) {
   const a = Number(lo);
   const b = Number(hi);
@@ -255,6 +256,7 @@ function NumberLineProvider({
   groupSize,
   groupCount,
   tickStep,
+  strokeWidth: configuredStrokeWidth,
   arcColors,
   showGroupTicks = true,
   showMajorTicks = true,
@@ -270,6 +272,7 @@ function NumberLineProvider({
   children
 }) {
   const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
+  const strokeWidth = typeof configuredStrokeWidth === "number" && Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0 ? configuredStrokeWidth : DEFAULT_DRAWING_STROKE_WIDTH;
   const [selectedArcIndices, setSelectedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const [groupTicksHidden, setGroupTicksHidden] = React.useState(false);
@@ -357,7 +360,6 @@ function NumberLineProvider({
   );
   const onPointerDown = React.useCallback(
     (e) => {
-      e.currentTarget.focus();
       if (drawing.tool === "eraser") {
         if (eraseGesture.current) return;
         const coords2 = getLocalCoords(e);
@@ -552,6 +554,7 @@ function NumberLineProvider({
         groupSize,
         groupCount,
         tickStep,
+        strokeWidth,
         arcColors,
         showGroupTicks: showGroupTicks && !groupTicksHidden,
         showMajorTicks,
@@ -731,14 +734,15 @@ const AxisLayer = React.memo(function AxisLayer2({
       const renderAsMajor = !renderAsGroup && majorActive;
       const renderAsHalf = !renderAsGroup && !renderAsMajor && halfTickOffset > 0 && Math.abs(offset % step - halfTickOffset) < 1e-9;
       const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
-      const currentShowLabelStep = typeof getShowLabelStep !== "function" ? false : getShowLabelStep == null ? void 0 : getShowLabelStep({
+      const currentShowLabelStep = typeof getShowLabelStep === "function" ? getShowLabelStep({
         viewMin,
         viewMax,
         offset,
         labelStep,
         length,
         v
-      });
+      }) : void 0;
+      const shouldShowLabel = currentShowLabelStep ?? (showLabel || showLabelStep);
       const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6;
       const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : renderAsHalf ? 2 : 1;
       const arcIndex = renderAsGroup ? offset > 0 ? offset / groupSize - 1 : offset === 0 ? 0 : -1 : -1;
@@ -756,7 +760,7 @@ const AxisLayer = React.memo(function AxisLayer2({
             strokeWidth: strokeW
           }
         ),
-        (showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowLabel && /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             x,
@@ -790,6 +794,7 @@ function AnimatedArc({
   max,
   hitCursor,
   shouldAnimate,
+  showLabel,
   onArcClick
 }) {
   const measureRef = React.useRef(null);
@@ -872,7 +877,7 @@ function AnimatedArc({
         pointerEvents: "none"
       }
     ),
-    arcVisible && /* @__PURE__ */ jsxRuntime.jsx(
+    arcVisible && showLabel && /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         d: arcPath,
@@ -969,6 +974,8 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   if (groupSize <= 0 || groupCount <= 0) return null;
   const shouldAnimate = groupSize > 0 && groupCount > 0;
   const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
+  const pixelsPerGroup = Math.abs(toX(min + groupSize) - toX(min));
+  const arcLabelInterval = Math.max(1, Math.ceil(36 / Math.max(1, pixelsPerGroup)));
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
     if (deletedArcIndices.has(g)) continue;
@@ -988,6 +995,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
     );
     const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
     const isSelected = selectedArcIndices.has(g);
+    const showLabel = arcLabelInterval === 1 || (g + 1) % arcLabelInterval === 0 || g === groupCount - 1;
     const hitCursor = tool === "none" ? "pointer" : "default";
     arcs.push(
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1005,6 +1013,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
           max,
           hitCursor,
           shouldAnimate,
+          showLabel,
           onArcClick: (index, e) => {
             if (tool === "none") {
               e.stopPropagation();
@@ -1018,7 +1027,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds, onStrokeClick }) {
+function DrawingLayer({ strokes, liveStroke, tool, width, height, strokeWidth, 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" && eraseHoverIds.has(s.id)) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1060,7 +1069,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
           d: s.d,
           fill: "none",
           stroke: "#7c3aed",
-          strokeWidth: 2.5,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           vectorEffect: "non-scaling-stroke",
@@ -1074,7 +1083,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
         d: liveStroke.d,
         fill: "none",
         stroke: "#7c3aed",
-        strokeWidth: 2.5,
+        strokeWidth,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         vectorEffect: "non-scaling-stroke",
@@ -1099,6 +1108,7 @@ function NumberLine({ className }) {
     groupSize,
     groupCount,
     tickStep,
+    strokeWidth,
     arcColors,
     showGroupTicks,
     showMajorTicks,
@@ -1281,7 +1291,11 @@ function NumberLine({ className }) {
         display: "block",
         cursor: svgCursor,
         touchAction: "none",
-        overflow: "visible"
+        overflow: "visible",
+        // 数轴自身带有键盘快捷键，所以 SVG 需要保留 tabIndex；但各浏览器会在鼠标、
+        // 触摸和键盘聚焦时都绘制一圈与教学内容无关的边框。该工具使用按钮状态表达
+        // 可操作性，因此统一移除原生 outline，避免它被误认为数轴的选中标记。
+        outline: "none"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -1346,6 +1360,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            strokeWidth,
             eraseHoverIds,
             onStrokeClick
           }

package/dist/index.d.ts

@@ -15,6 +15,8 @@ export declare interface NumberLineContextValue {
     groupSize: number;
     groupCount: number;
     tickStep: number;
+    /** 用户自由绘制笔迹的固定视觉线宽，单位为 CSS 像素。 */
+    strokeWidth: number;
     arcColors?: string[];
     showGroupTicks: boolean;
     showMajorTicks: boolean;
@@ -60,6 +62,8 @@ export declare interface NumberLineProps {
     groupSize: number;
     groupCount: number;
     tickStep: number;
+    /** 用户自由绘制笔迹的固定视觉线宽，单位为 CSS 像素；默认 2.5。 */
+    strokeWidth?: number;
     arcColors?: string[];
     /** show group boundary ticks (tallest). Default: true */
     showGroupTicks?: boolean;
@@ -80,10 +84,14 @@ export declare interface NumberLineProps {
     viewMax?: number;
     /** fired whenever internal viewport changes (uncontrolled mode) */
     onViewChange?: (viewMin: number, viewMax: number) => void;
+    /**
+     * 自定义主刻度标签可见性。提供该回调后，其返回值会覆盖组件的自动标签密度，
+     * 适用于小窗等需要按实际可用宽度降低标签数量的场景。
+     */
     getShowLabelStep?: (params: unknown) => boolean;
 }
 
-export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
+export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, strokeWidth: configuredStrokeWidth, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
 
 declare interface NumberLineProviderProps extends NumberLineProps {
     children: default_2.ReactNode;

package/dist/index.js

@@ -221,6 +221,7 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
+const DEFAULT_DRAWING_STROKE_WIDTH = 2.5;
 function normalizeDomain(lo, hi) {
   const a = Number(lo);
   const b = Number(hi);
@@ -253,6 +254,7 @@ function NumberLineProvider({
   groupSize,
   groupCount,
   tickStep,
+  strokeWidth: configuredStrokeWidth,
   arcColors,
   showGroupTicks = true,
   showMajorTicks = true,
@@ -268,6 +270,7 @@ function NumberLineProvider({
   children
 }) {
   const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
+  const strokeWidth = typeof configuredStrokeWidth === "number" && Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0 ? configuredStrokeWidth : DEFAULT_DRAWING_STROKE_WIDTH;
   const [selectedArcIndices, setSelectedArcIndices] = useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = useState(/* @__PURE__ */ new Set());
   const [groupTicksHidden, setGroupTicksHidden] = useState(false);
@@ -355,7 +358,6 @@ function NumberLineProvider({
   );
   const onPointerDown = useCallback(
     (e) => {
-      e.currentTarget.focus();
       if (drawing.tool === "eraser") {
         if (eraseGesture.current) return;
         const coords2 = getLocalCoords(e);
@@ -550,6 +552,7 @@ function NumberLineProvider({
         groupSize,
         groupCount,
         tickStep,
+        strokeWidth,
         arcColors,
         showGroupTicks: showGroupTicks && !groupTicksHidden,
         showMajorTicks,
@@ -729,14 +732,15 @@ const AxisLayer = React.memo(function AxisLayer2({
       const renderAsMajor = !renderAsGroup && majorActive;
       const renderAsHalf = !renderAsGroup && !renderAsMajor && halfTickOffset > 0 && Math.abs(offset % step - halfTickOffset) < 1e-9;
       const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
-      const currentShowLabelStep = typeof getShowLabelStep !== "function" ? false : getShowLabelStep == null ? void 0 : getShowLabelStep({
+      const currentShowLabelStep = typeof getShowLabelStep === "function" ? getShowLabelStep({
         viewMin,
         viewMax,
         offset,
         labelStep,
         length,
         v
-      });
+      }) : void 0;
+      const shouldShowLabel = currentShowLabelStep ?? (showLabel || showLabelStep);
       const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6;
       const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : renderAsHalf ? 2 : 1;
       const arcIndex = renderAsGroup ? offset > 0 ? offset / groupSize - 1 : offset === 0 ? 0 : -1 : -1;
@@ -754,7 +758,7 @@ const AxisLayer = React.memo(function AxisLayer2({
             strokeWidth: strokeW
           }
         ),
-        (showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsx(
+        shouldShowLabel && /* @__PURE__ */ jsx(
           "text",
           {
             x,
@@ -788,6 +792,7 @@ function AnimatedArc({
   max,
   hitCursor,
   shouldAnimate,
+  showLabel,
   onArcClick
 }) {
   const measureRef = useRef(null);
@@ -870,7 +875,7 @@ function AnimatedArc({
         pointerEvents: "none"
       }
     ),
-    arcVisible && /* @__PURE__ */ jsx(
+    arcVisible && showLabel && /* @__PURE__ */ jsx(
       "path",
       {
         d: arcPath,
@@ -967,6 +972,8 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   if (groupSize <= 0 || groupCount <= 0) return null;
   const shouldAnimate = groupSize > 0 && groupCount > 0;
   const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
+  const pixelsPerGroup = Math.abs(toX(min + groupSize) - toX(min));
+  const arcLabelInterval = Math.max(1, Math.ceil(36 / Math.max(1, pixelsPerGroup)));
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
     if (deletedArcIndices.has(g)) continue;
@@ -986,6 +993,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
     );
     const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
     const isSelected = selectedArcIndices.has(g);
+    const showLabel = arcLabelInterval === 1 || (g + 1) % arcLabelInterval === 0 || g === groupCount - 1;
     const hitCursor = tool === "none" ? "pointer" : "default";
     arcs.push(
       /* @__PURE__ */ jsx(
@@ -1003,6 +1011,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
           max,
           hitCursor,
           shouldAnimate,
+          showLabel,
           onArcClick: (index, e) => {
             if (tool === "none") {
               e.stopPropagation();
@@ -1016,7 +1025,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   }
   return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds, onStrokeClick }) {
+function DrawingLayer({ strokes, liveStroke, tool, width, height, strokeWidth, 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" && eraseHoverIds.has(s.id)) && /* @__PURE__ */ jsx(
@@ -1058,7 +1067,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
           d: s.d,
           fill: "none",
           stroke: "#7c3aed",
-          strokeWidth: 2.5,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           vectorEffect: "non-scaling-stroke",
@@ -1072,7 +1081,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
         d: liveStroke.d,
         fill: "none",
         stroke: "#7c3aed",
-        strokeWidth: 2.5,
+        strokeWidth,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         vectorEffect: "non-scaling-stroke",
@@ -1097,6 +1106,7 @@ function NumberLine({ className }) {
     groupSize,
     groupCount,
     tickStep,
+    strokeWidth,
     arcColors,
     showGroupTicks,
     showMajorTicks,
@@ -1279,7 +1289,11 @@ function NumberLine({ className }) {
         display: "block",
         cursor: svgCursor,
         touchAction: "none",
-        overflow: "visible"
+        overflow: "visible",
+        // 数轴自身带有键盘快捷键，所以 SVG 需要保留 tabIndex；但各浏览器会在鼠标、
+        // 触摸和键盘聚焦时都绘制一圈与教学内容无关的边框。该工具使用按钮状态表达
+        // 可操作性，因此统一移除原生 outline，避免它被误认为数轴的选中标记。
+        outline: "none"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -1344,6 +1358,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            strokeWidth,
             eraseHoverIds,
             onStrokeClick
           }

package/package.json

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