@dcg-overseas/number-line 0.1.8 → 0.1.10

package/dist/index.js

@@ -487,6 +487,21 @@ function computeLabelStep(containerWidth, range) {
   const candidates = [1, 2, 5, 10, 20, 25, 50, 100, 200, 500];
   return candidates.find((c) => c >= raw) ?? candidates[candidates.length - 1];
 }
+function computeMinorTickStep(majorStep, containerWidth, range) {
+  if (majorStep <= 1 || range <= 0 || containerWidth <= 0) return 0;
+  const pxPerMajor = containerWidth / range * majorStep;
+  const MIN_MINOR_PX = 8;
+  for (const divisions of [10, 5, 4, 2]) {
+    if (majorStep % divisions !== 0) continue;
+    const minorStep = majorStep / divisions;
+    if (minorStep < 1) continue;
+    if (pxPerMajor / divisions >= MIN_MINOR_PX) return minorStep;
+  }
+  if (majorStep >= 2 && pxPerMajor / Math.min(majorStep - 1, 5) >= MIN_MINOR_PX) {
+    return 1;
+  }
+  return 0;
+}
 function computeHorizontalLayout(minVal, maxVal) {
   const gutter = 16;
   const charWidth = 8;
@@ -520,6 +535,9 @@ const ARC_COLORS = [
   "#be185d",
   "#16a34a"
 ];
+const ARC_RY_RATIO = 0.9;
+const ARC_ANIMATION_STAGGER_MS = 400;
+const ARC_ANIMATION_DRAW_MS = 500;
 function gcd(a, b) {
   let x = Math.max(1, Math.abs(Math.round(a)));
   let y = Math.max(1, Math.abs(Math.round(b)));
@@ -550,10 +568,11 @@ const AxisLayer = React.memo(function AxisLayer2({
   const step = Math.max(1, Math.round(tickStep));
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
+  const minorStep = showMinorTicks ? computeMinorTickStep(step, containerWidth, range) : 0;
   const MAX_TICKS = 500;
   const capStep = Math.max(1, Math.ceil(range / MAX_TICKS));
   const visibleStep = groupSize > 0 ? gcd(step, groupSize) : step;
-  const iterStep = showMinorTicks ? capStep : Math.max(capStep, visibleStep);
+  const iterStep = showMinorTicks && minorStep > 0 ? Math.max(capStep, gcd(minorStep, capStep)) : Math.max(capStep, visibleStep);
   const startVal = Math.floor(viewMin / iterStep) * iterStep;
   const allTicks = [];
   for (let v = startVal; v <= viewMax; v += iterStep) {
@@ -563,28 +582,30 @@ const AxisLayer = React.memo(function AxisLayer2({
     /* @__PURE__ */ jsx(
       "line",
       {
-        x1: axisStartX - 4,
+        x1: axisStartX - 10,
         y1: axisY,
-        x2: axisEndX,
+        x2: axisEndX + 10,
         y2: axisY,
-        stroke: "#374151",
-        strokeWidth: 2
+        stroke: "#472E17",
+        strokeWidth: 4
       }
     ),
     allTicks.map((v) => {
       const x = toX(v);
       const offset = v - min;
       const isMajor = offset % step === 0;
+      const isOnMinorGrid = minorStep > 0 && Math.abs(offset % minorStep) < 1e-9;
       const maxGroupBoundary = min + groupCount * groupSize;
       const isGroupBoundary = groupSize > 0 && offset % groupSize === 0 && v <= maxGroupBoundary;
-      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || !isGroupBoundary && !isMajor && showMinorTicks;
+      const isMinorTick = isOnMinorGrid && !isMajor && !isGroupBoundary;
+      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || isMinorTick && showMinorTicks;
       if (!visible) return null;
       const renderAsGroup = isGroupBoundary && showGroupTicks;
       const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
       const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
       const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
-      const strokeW = renderAsGroup ? 1.5 : renderAsMajor ? 1 : 0.5;
-      const color = renderAsGroup || renderAsMajor ? "#374151" : "#9ca3af";
+      const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : 1;
+      const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
           "line",
@@ -601,10 +622,10 @@ const AxisLayer = React.memo(function AxisLayer2({
           "text",
           {
             x,
-            y: axisY + 22,
+            y: axisY + 32,
             textAnchor: edgeTextAnchor(v, min, max),
-            fontSize: 11,
-            fill: "#374151",
+            fontSize: 18,
+            fill: "#472E17",
             pointerEvents: "none",
             style: { userSelect: "none", WebkitUserSelect: "none" },
             children: v
@@ -614,6 +635,173 @@ const AxisLayer = React.memo(function AxisLayer2({
     })
   ] });
 });
+function AnimatedArc({
+  groupIndex,
+  arcPath,
+  color,
+  isSelected,
+  x2,
+  textY,
+  axisY,
+  end,
+  min,
+  max,
+  hitCursor,
+  shouldAnimate,
+  onArcClick
+}) {
+  const measureRef = useRef(null);
+  const animatedRef = useRef(false);
+  const [pathLen, setPathLen] = useState(null);
+  const [dashOffset, setDashOffset] = useState(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [showLabels, setShowLabels] = useState(!shouldAnimate);
+  const [showHitArea, setShowHitArea] = useState(!shouldAnimate);
+  const strokeColor = isSelected ? "#1d4ed8" : color;
+  const arrowHeadH = 7;
+  const arrowHeadHW = 4;
+  useLayoutEffect(() => {
+    var _a;
+    const len = ((_a = measureRef.current) == null ? void 0 : _a.getTotalLength()) ?? 0;
+    if (len <= 0) return;
+    setPathLen(len);
+    if (!shouldAnimate || animatedRef.current) {
+      setDashOffset(0);
+      setShowLabels(true);
+      setShowHitArea(true);
+      setIsDrawing(false);
+      return;
+    }
+    setDashOffset(len);
+    setShowLabels(false);
+    setShowHitArea(false);
+    setIsDrawing(false);
+    const delay = groupIndex * ARC_ANIMATION_STAGGER_MS;
+    let drawTimer = 0;
+    let labelTimer = 0;
+    let completeTimer = 0;
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        drawTimer = window.setTimeout(() => {
+          setIsDrawing(true);
+          setDashOffset(0);
+        }, delay);
+        labelTimer = window.setTimeout(
+          () => setShowLabels(true),
+          delay + ARC_ANIMATION_DRAW_MS
+        );
+        completeTimer = window.setTimeout(() => {
+          animatedRef.current = true;
+          setIsDrawing(false);
+          setShowHitArea(true);
+        }, delay + ARC_ANIMATION_DRAW_MS);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.clearTimeout(drawTimer);
+      window.clearTimeout(labelTimer);
+      window.clearTimeout(completeTimer);
+    };
+  }, [arcPath, groupIndex, shouldAnimate]);
+  const strokeTransition = isDrawing ? `stroke-dashoffset ${ARC_ANIMATION_DRAW_MS}ms ease-out` : "none";
+  const arcVisible = pathLen !== null && dashOffset !== null;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        ref: measureRef,
+        d: arcPath,
+        fill: "none",
+        stroke: "none",
+        visibility: "hidden",
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && isSelected && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: "rgba(0,0,0,0.15)",
+        strokeWidth: 14,
+        strokeLinecap: "round",
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: strokeColor,
+        strokeWidth: isSelected ? 3 : 2,
+        strokeDasharray: pathLen,
+        strokeDashoffset: dashOffset,
+        style: { transition: strokeTransition },
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && showHitArea && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 20,
+        strokeLinecap: "round",
+        pointerEvents: "stroke",
+        style: { cursor: hitCursor },
+        onClick: (e) => {
+          onArcClick(groupIndex, e);
+        }
+      }
+    ),
+    arcVisible && /* @__PURE__ */ jsxs(
+      "g",
+      {
+        opacity: showLabels ? 1 : 0,
+        style: { transition: "opacity 220ms ease-out" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: x2,
+              y: textY,
+              textAnchor: edgeTextAnchor(end, min, max),
+              fontSize: 10,
+              fill: strokeColor,
+              fontWeight: "600",
+              pointerEvents: "none",
+              style: { userSelect: "none", WebkitUserSelect: "none" },
+              children: end
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x2,
+              y1: textY + 4,
+              x2,
+              y2: axisY - arrowHeadH,
+              stroke: strokeColor,
+              strokeWidth: 1.5,
+              pointerEvents: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
+              fill: strokeColor,
+              pointerEvents: "none"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 const GroupArcsLayer = memo(function GroupArcsLayer2({
   min,
   max,
@@ -632,6 +820,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   arcColors = ARC_COLORS
 }) {
   if (groupSize <= 0 || groupCount <= 0) return null;
+  const shouldAnimate = groupSize > 0 && groupCount > 0;
   const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
@@ -643,91 +832,38 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
     const x1 = toX(start);
     const x2 = toX(end);
     const rx = (x2 - x1) / 2;
-    const ry = Math.min(rx * 0.7, arcMaxHeight);
+    const ry = Math.min(rx * ARC_RY_RATIO, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
-    const arrowHeadH = 7;
-    const arrowHeadHW = 4;
     const MIN_ARROW_SPAN = 18;
     const textY = Math.min(axisY - ry - 6, 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";
     arcs.push(
-      /* @__PURE__ */ jsxs("g", { children: [
-        isSelected && /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "rgba(0,0,0,0.15)",
-            strokeWidth: 14,
-            strokeLinecap: "round",
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: isSelected ? 3 : 2,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "transparent",
-            strokeWidth: 20,
-            strokeLinecap: "round",
-            pointerEvents: "stroke",
-            style: { cursor: hitCursor },
-            onClick: (e) => {
-              if (tool === "eraser" || tool === "none") {
-                e.stopPropagation();
-                onArcClick(g, e);
-              }
+      /* @__PURE__ */ jsx(
+        AnimatedArc,
+        {
+          groupIndex: g,
+          arcPath,
+          color,
+          isSelected,
+          x2,
+          textY,
+          axisY,
+          end,
+          min,
+          max,
+          hitCursor,
+          shouldAnimate,
+          onArcClick: (index, e) => {
+            if (tool === "eraser" || tool === "none") {
+              e.stopPropagation();
+              onArcClick(index, e);
             }
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: x2,
-            y: textY,
-            textAnchor: edgeTextAnchor(end, min, max),
-            fontSize: 10,
-            fill: isSelected ? "#1d4ed8" : color,
-            fontWeight: "600",
-            pointerEvents: "none",
-            style: { userSelect: "none", WebkitUserSelect: "none" },
-            children: end
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: x2,
-            y1: textY + 4,
-            x2,
-            y2: axisY - arrowHeadH,
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: 1.5,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
-            fill: isSelected ? "#1d4ed8" : color,
-            pointerEvents: "none"
-          }
-        )
-      ] }, g)
+        },
+        g
+      )
     );
   }
   return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
@@ -845,7 +981,7 @@ function NumberLine({ className }) {
   let ryTypical = MIN_ARC_HEIGHT * 0.5;
   if (groupSize > 0 && groupCount > 0) {
     const rx = usable * groupSize / range / 2;
-    ryTypical = Math.min(rx * 0.7, h * 0.48);
+    ryTypical = Math.min(rx * ARC_RY_RATIO, h * 0.48);
   }
   const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
   const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;

package/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "@dcg-overseas/number-line",
-  "version": "0.1.8",
-  "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"
-  }
-}
+{
+  "name": "@dcg-overseas/number-line",
+  "version": "0.1.10",
+  "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/"
+  }
+}