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

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

@@ -357,7 +357,6 @@ function NumberLineProvider({
   );
   const onPointerDown = React.useCallback(
     (e) => {
-      e.currentTarget.focus();
       if (drawing.tool === "eraser") {
         if (eraseGesture.current) return;
         const coords2 = getLocalCoords(e);
@@ -731,14 +730,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 +756,7 @@ const AxisLayer = React.memo(function AxisLayer2({
             strokeWidth: strokeW
           }
         ),
-        (showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowLabel && /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             x,
@@ -790,6 +790,7 @@ function AnimatedArc({
   max,
   hitCursor,
   shouldAnimate,
+  showLabel,
   onArcClick
 }) {
   const measureRef = React.useRef(null);
@@ -872,7 +873,7 @@ function AnimatedArc({
         pointerEvents: "none"
       }
     ),
-    arcVisible && /* @__PURE__ */ jsxRuntime.jsx(
+    arcVisible && showLabel && /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         d: arcPath,
@@ -969,6 +970,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 +991,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 +1009,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
           max,
           hitCursor,
           shouldAnimate,
+          showLabel,
           onArcClick: (index, e) => {
             if (tool === "none") {
               e.stopPropagation();
@@ -1281,7 +1286,11 @@ function NumberLine({ className }) {
         display: "block",
         cursor: svgCursor,
         touchAction: "none",
-        overflow: "visible"
+        overflow: "visible",
+        // 数轴自身带有键盘快捷键，所以 SVG 需要保留 tabIndex；但各浏览器会在鼠标、
+        // 触摸和键盘聚焦时都绘制一圈与教学内容无关的边框。该工具使用按钮状态表达
+        // 可操作性，因此统一移除原生 outline，避免它被误认为数轴的选中标记。
+        outline: "none"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,

package/dist/index.d.ts

@@ -80,6 +80,10 @@ export declare interface NumberLineProps {
     viewMax?: number;
     /** fired whenever internal viewport changes (uncontrolled mode) */
     onViewChange?: (viewMin: number, viewMax: number) => void;
+    /**
+     * 自定义主刻度标签可见性。提供该回调后，其返回值会覆盖组件的自动标签密度，
+     * 适用于小窗等需要按实际可用宽度降低标签数量的场景。
+     */
     getShowLabelStep?: (params: unknown) => boolean;
 }
 

package/dist/index.js

@@ -355,7 +355,6 @@ function NumberLineProvider({
   );
   const onPointerDown = useCallback(
     (e) => {
-      e.currentTarget.focus();
       if (drawing.tool === "eraser") {
         if (eraseGesture.current) return;
         const coords2 = getLocalCoords(e);
@@ -729,14 +728,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 +754,7 @@ const AxisLayer = React.memo(function AxisLayer2({
             strokeWidth: strokeW
           }
         ),
-        (showLabel || showLabelStep || currentShowLabelStep) && /* @__PURE__ */ jsx(
+        shouldShowLabel && /* @__PURE__ */ jsx(
           "text",
           {
             x,
@@ -788,6 +788,7 @@ function AnimatedArc({
   max,
   hitCursor,
   shouldAnimate,
+  showLabel,
   onArcClick
 }) {
   const measureRef = useRef(null);
@@ -870,7 +871,7 @@ function AnimatedArc({
         pointerEvents: "none"
       }
     ),
-    arcVisible && /* @__PURE__ */ jsx(
+    arcVisible && showLabel && /* @__PURE__ */ jsx(
       "path",
       {
         d: arcPath,
@@ -967,6 +968,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 +989,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 +1007,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
           max,
           hitCursor,
           shouldAnimate,
+          showLabel,
           onArcClick: (index, e) => {
             if (tool === "none") {
               e.stopPropagation();
@@ -1279,7 +1284,11 @@ function NumberLine({ className }) {
         display: "block",
         cursor: svgCursor,
         touchAction: "none",
-        overflow: "visible"
+        overflow: "visible",
+        // 数轴自身带有键盘快捷键，所以 SVG 需要保留 tabIndex；但各浏览器会在鼠标、
+        // 触摸和键盘聚焦时都绘制一圈与教学内容无关的边框。该工具使用按钮状态表达
+        // 可操作性，因此统一移除原生 outline，避免它被误认为数轴的选中标记。
+        outline: "none"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,

package/package.json

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