@dcg-overseas/number-line 0.1.13 → 0.1.15

package/dist/index.cjs

@@ -480,7 +480,7 @@ function NumberLineProvider({
   );
 }
 function buildArcPath({ x1, x2, y, rx, ry }) {
-  return `M ${x1} ${y} A ${rx} ${ry} 0 0 1 ${x2} ${y}`;
+  return `M ${x1} ${y - 10} A ${rx} ${ry} 0 0 1 ${x2} ${y - 10}`;
 }
 function computeLabelStep(containerWidth, range) {
   const maxLabels = Math.floor(containerWidth / 40);
@@ -561,7 +561,8 @@ const AxisLayer = React.memo(function AxisLayer2({
   tickStep,
   showGroupTicks,
   showMajorTicks,
-  showMinorTicks
+  showMinorTicks,
+  showLabelStep
 }) {
   const range = viewMax - viewMin;
   if (range <= 0) return null;
@@ -621,15 +622,16 @@ const AxisLayer = React.memo(function AxisLayer2({
             strokeWidth: strokeW
           }
         ),
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+        (showLabel || showLabelStep) && /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             x,
             y: axisY + 32,
             textAnchor: edgeTextAnchor(),
-            fontSize: 18,
+            fontSize: 20,
             fill: "#472E17",
             pointerEvents: "none",
+            "data-type": "2",
             style: { userSelect: "none", WebkitUserSelect: "none" },
             children: v
           }
@@ -742,7 +744,8 @@ function AnimatedArc({
         strokeDasharray: pathLen,
         strokeDashoffset: dashOffset,
         style: { transition: strokeTransition },
-        pointerEvents: "none"
+        pointerEvents: "none",
+        "data-type": "1"
       }
     ),
     arcVisible && showHitArea && /* @__PURE__ */ jsxRuntime.jsx(
@@ -786,7 +789,7 @@ function AnimatedArc({
               x1: x2,
               y1: textY + 5,
               x2,
-              y2: axisY - arrowHeadH,
+              y2: axisY - arrowHeadH - 10,
               stroke: strokeColor,
               strokeWidth: 1.5,
               pointerEvents: "none"
@@ -795,7 +798,7 @@ function AnimatedArc({
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
-              points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
+              points: `${x2},${axisY - 16} ${x2 - arrowHeadHW},${axisY - arrowHeadH - 16} ${x2 + arrowHeadHW},${axisY - arrowHeadH - 16}`,
               fill: strokeColor,
               pointerEvents: "none"
             }
@@ -838,7 +841,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
     const ry = Math.min(rx * ARC_RY_RATIO, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
     const MIN_ARROW_SPAN = 24;
-    const textY = Math.min(axisY - ry - 6, axisY - MIN_ARROW_SPAN);
+    const textY = Math.min(axisY - ry - 26, axisY - MIN_ARROW_SPAN);
     const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
     const isSelected = selectedArcIndices.has(g);
     const hitCursor = tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default";
@@ -956,6 +959,7 @@ function NumberLine({ className }) {
     showGroupTicks,
     showMajorTicks,
     showMinorTicks,
+    showLabelStep,
     viewMin,
     viewMax,
     enableZoom,
@@ -1165,7 +1169,8 @@ function NumberLine({ className }) {
             tickStep,
             showGroupTicks,
             showMajorTicks,
-            showMinorTicks
+            showMinorTicks,
+            showLabelStep
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export declare interface NumberLineContextValue {
     showGroupTicks: boolean;
     showMajorTicks: boolean;
     showMinorTicks: boolean;
+    showLabelStep: boolean;
     viewMin: number;
     viewMax: number;
     enableZoom: boolean;

package/dist/index.js

@@ -478,7 +478,7 @@ function NumberLineProvider({
   );
 }
 function buildArcPath({ x1, x2, y, rx, ry }) {
-  return `M ${x1} ${y} A ${rx} ${ry} 0 0 1 ${x2} ${y}`;
+  return `M ${x1} ${y - 10} A ${rx} ${ry} 0 0 1 ${x2} ${y - 10}`;
 }
 function computeLabelStep(containerWidth, range) {
   const maxLabels = Math.floor(containerWidth / 40);
@@ -559,7 +559,8 @@ const AxisLayer = React.memo(function AxisLayer2({
   tickStep,
   showGroupTicks,
   showMajorTicks,
-  showMinorTicks
+  showMinorTicks,
+  showLabelStep
 }) {
   const range = viewMax - viewMin;
   if (range <= 0) return null;
@@ -619,15 +620,16 @@ const AxisLayer = React.memo(function AxisLayer2({
             strokeWidth: strokeW
           }
         ),
-        showLabel && /* @__PURE__ */ jsx(
+        (showLabel || showLabelStep) && /* @__PURE__ */ jsx(
           "text",
           {
             x,
             y: axisY + 32,
             textAnchor: edgeTextAnchor(),
-            fontSize: 18,
+            fontSize: 20,
             fill: "#472E17",
             pointerEvents: "none",
+            "data-type": "2",
             style: { userSelect: "none", WebkitUserSelect: "none" },
             children: v
           }
@@ -740,7 +742,8 @@ function AnimatedArc({
         strokeDasharray: pathLen,
         strokeDashoffset: dashOffset,
         style: { transition: strokeTransition },
-        pointerEvents: "none"
+        pointerEvents: "none",
+        "data-type": "1"
       }
     ),
     arcVisible && showHitArea && /* @__PURE__ */ jsx(
@@ -784,7 +787,7 @@ function AnimatedArc({
               x1: x2,
               y1: textY + 5,
               x2,
-              y2: axisY - arrowHeadH,
+              y2: axisY - arrowHeadH - 10,
               stroke: strokeColor,
               strokeWidth: 1.5,
               pointerEvents: "none"
@@ -793,7 +796,7 @@ function AnimatedArc({
           /* @__PURE__ */ jsx(
             "polygon",
             {
-              points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
+              points: `${x2},${axisY - 16} ${x2 - arrowHeadHW},${axisY - arrowHeadH - 16} ${x2 + arrowHeadHW},${axisY - arrowHeadH - 16}`,
               fill: strokeColor,
               pointerEvents: "none"
             }
@@ -836,7 +839,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
     const ry = Math.min(rx * ARC_RY_RATIO, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
     const MIN_ARROW_SPAN = 24;
-    const textY = Math.min(axisY - ry - 6, axisY - MIN_ARROW_SPAN);
+    const textY = Math.min(axisY - ry - 26, axisY - MIN_ARROW_SPAN);
     const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
     const isSelected = selectedArcIndices.has(g);
     const hitCursor = tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default";
@@ -954,6 +957,7 @@ function NumberLine({ className }) {
     showGroupTicks,
     showMajorTicks,
     showMinorTicks,
+    showLabelStep,
     viewMin,
     viewMax,
     enableZoom,
@@ -1163,7 +1167,8 @@ function NumberLine({ className }) {
             tickStep,
             showGroupTicks,
             showMajorTicks,
-            showMinorTicks
+            showMinorTicks,
+            showLabelStep
           }
         ),
         /* @__PURE__ */ jsx(

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@dcg-overseas/number-line",
-  "version": "0.1.13",
-  "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": "0.1.15",
+  "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,
+  "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/"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
+}