@dcg-overseas/number-line 0.1.7 → 0.1.8

package/dist/index.cjs

@@ -489,6 +489,32 @@ 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 computeHorizontalLayout(minVal, maxVal) {
+  const gutter = 16;
+  const charWidth = 8;
+  const leftLabel = String(Math.round(minVal));
+  const rightLabel = String(Math.round(maxVal));
+  return {
+    padLeft: gutter,
+    padRight: gutter,
+    labelInsetLeft: Math.max(8, Math.ceil(leftLabel.length * charWidth / 2) + 2),
+    labelInsetRight: Math.max(12, Math.ceil(rightLabel.length * charWidth / 2) + 4)
+  };
+}
+function createValueToX(viewMin, viewMax, viewWidth, layout) {
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(viewWidth - layout.padLeft - layout.padRight, 1);
+  const innerUsable = Math.max(
+    usable - layout.labelInsetLeft - layout.labelInsetRight,
+    1
+  );
+  return (value) => layout.padLeft + layout.labelInsetLeft + (value - viewMin) / range * innerUsable;
+}
+function edgeTextAnchor(value, domainMin, domainMax) {
+  if (Math.abs(value - domainMin) < 1e-9) return "start";
+  if (Math.abs(value - domainMax) < 1e-9) return "end";
+  return "middle";
+}
 const ARC_COLORS = [
   "#7c3aed",
   "#0891b2",
@@ -504,11 +530,11 @@ function gcd(a, b) {
 }
 const AxisLayer = React.memo(function AxisLayer2({
   min,
+  max,
   viewMin,
   viewMax,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   containerWidth,
   groupSize,
@@ -520,8 +546,9 @@ const AxisLayer = React.memo(function AxisLayer2({
 }) {
   const range = viewMax - viewMin;
   if (range <= 0) return null;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
+  const axisStartX = toX(viewMin);
+  const axisEndX = toX(viewMax);
   const step = Math.max(1, Math.round(tickStep));
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
@@ -538,9 +565,9 @@ const AxisLayer = React.memo(function AxisLayer2({
     /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
-        x1: padLeft - 4,
+        x1: axisStartX - 4,
         y1: axisY,
-        x2: viewWidth - padRight,
+        x2: axisEndX,
         y2: axisY,
         stroke: "#374151",
         strokeWidth: 2
@@ -577,7 +604,7 @@ const AxisLayer = React.memo(function AxisLayer2({
           {
             x,
             y: axisY + 22,
-            textAnchor: "middle",
+            textAnchor: edgeTextAnchor(v, min, max),
             fontSize: 11,
             fill: "#374151",
             pointerEvents: "none",
@@ -597,8 +624,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   groupSize,
   groupCount,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   arcMaxHeight,
   tool,
@@ -608,10 +634,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   arcColors = ARC_COLORS
 }) {
   if (groupSize <= 0 || groupCount <= 0) return null;
-  const range = viewMax - viewMin;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
-  const clipId = React.useId().replace(/:/g, "_") + "-arcs-clip";
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
     if (deletedArcIndices.has(g)) continue;
@@ -677,7 +700,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
           {
             x: x2,
             y: textY,
-            textAnchor: "middle",
+            textAnchor: edgeTextAnchor(end, min, max),
             fontSize: 10,
             fill: isSelected ? "#1d4ed8" : color,
             fontWeight: "600",
@@ -709,18 +732,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
       ] }, g)
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-arcs-layer", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "rect",
-      {
-        x: padLeft,
-        y: 0,
-        width: usable,
-        height: axisY + 1
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${clipId})`, children: arcs })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
 function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
@@ -788,9 +800,6 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
     )
   ] });
 }
-const PAD_LEFT_LEGACY = 30;
-const PAD_RIGHT_LEGACY = 40;
-const PAD_X = (PAD_LEFT_LEGACY + PAD_RIGHT_LEGACY) / 2;
 const LABEL_SPACE_BELOW_AXIS = 42;
 const LABEL_ABOVE_AXIS_SLOP = 32;
 const ARC_TOP_PADDING = 16;
@@ -829,8 +838,12 @@ function NumberLine({ className }) {
   } = useNumberLineContext();
   const w = containerWidth;
   const h = containerHeight;
+  const horizontalLayout = computeHorizontalLayout(min, max);
   const range = Math.max(viewMax - viewMin, 1e-6);
-  const usable = Math.max(w - 2 * PAD_X, 1);
+  const usable = Math.max(
+    w - horizontalLayout.padLeft - horizontalLayout.padRight - horizontalLayout.labelInsetLeft - horizontalLayout.labelInsetRight,
+    1
+  );
   let ryTypical = MIN_ARC_HEIGHT * 0.5;
   if (groupSize > 0 && groupCount > 0) {
     const rx = usable * groupSize / range / 2;
@@ -986,7 +999,8 @@ function NumberLine({ className }) {
         display: "block",
         outline: enableZoom && isZoomActive ? "2px solid rgba(59, 130, 246, 0.5)" : "none",
         cursor: svgCursor,
-        touchAction: "none"
+        touchAction: "none",
+        overflow: "visible"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -1006,8 +1020,7 @@ function NumberLine({ className }) {
             viewMin,
             viewMax,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             containerWidth: w,
             groupSize,
@@ -1028,8 +1041,7 @@ function NumberLine({ className }) {
             groupSize,
             groupCount,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             arcMaxHeight,
             tool,

package/dist/index.js

@@ -487,6 +487,32 @@ 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 computeHorizontalLayout(minVal, maxVal) {
+  const gutter = 16;
+  const charWidth = 8;
+  const leftLabel = String(Math.round(minVal));
+  const rightLabel = String(Math.round(maxVal));
+  return {
+    padLeft: gutter,
+    padRight: gutter,
+    labelInsetLeft: Math.max(8, Math.ceil(leftLabel.length * charWidth / 2) + 2),
+    labelInsetRight: Math.max(12, Math.ceil(rightLabel.length * charWidth / 2) + 4)
+  };
+}
+function createValueToX(viewMin, viewMax, viewWidth, layout) {
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(viewWidth - layout.padLeft - layout.padRight, 1);
+  const innerUsable = Math.max(
+    usable - layout.labelInsetLeft - layout.labelInsetRight,
+    1
+  );
+  return (value) => layout.padLeft + layout.labelInsetLeft + (value - viewMin) / range * innerUsable;
+}
+function edgeTextAnchor(value, domainMin, domainMax) {
+  if (Math.abs(value - domainMin) < 1e-9) return "start";
+  if (Math.abs(value - domainMax) < 1e-9) return "end";
+  return "middle";
+}
 const ARC_COLORS = [
   "#7c3aed",
   "#0891b2",
@@ -502,11 +528,11 @@ function gcd(a, b) {
 }
 const AxisLayer = React.memo(function AxisLayer2({
   min,
+  max,
   viewMin,
   viewMax,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   containerWidth,
   groupSize,
@@ -518,8 +544,9 @@ const AxisLayer = React.memo(function AxisLayer2({
 }) {
   const range = viewMax - viewMin;
   if (range <= 0) return null;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
+  const axisStartX = toX(viewMin);
+  const axisEndX = toX(viewMax);
   const step = Math.max(1, Math.round(tickStep));
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
@@ -536,9 +563,9 @@ const AxisLayer = React.memo(function AxisLayer2({
     /* @__PURE__ */ jsx(
       "line",
       {
-        x1: padLeft - 4,
+        x1: axisStartX - 4,
         y1: axisY,
-        x2: viewWidth - padRight,
+        x2: axisEndX,
         y2: axisY,
         stroke: "#374151",
         strokeWidth: 2
@@ -575,7 +602,7 @@ const AxisLayer = React.memo(function AxisLayer2({
           {
             x,
             y: axisY + 22,
-            textAnchor: "middle",
+            textAnchor: edgeTextAnchor(v, min, max),
             fontSize: 11,
             fill: "#374151",
             pointerEvents: "none",
@@ -595,8 +622,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   groupSize,
   groupCount,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   arcMaxHeight,
   tool,
@@ -606,10 +632,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   arcColors = ARC_COLORS
 }) {
   if (groupSize <= 0 || groupCount <= 0) return null;
-  const range = viewMax - viewMin;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
-  const clipId = React.useId().replace(/:/g, "_") + "-arcs-clip";
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
     if (deletedArcIndices.has(g)) continue;
@@ -675,7 +698,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
           {
             x: x2,
             y: textY,
-            textAnchor: "middle",
+            textAnchor: edgeTextAnchor(end, min, max),
             fontSize: 10,
             fill: isSelected ? "#1d4ed8" : color,
             fontWeight: "600",
@@ -707,18 +730,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
       ] }, g)
     );
   }
-  return /* @__PURE__ */ jsxs("g", { className: "nl-arcs-layer", children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: padLeft,
-        y: 0,
-        width: usable,
-        height: axisY + 1
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: arcs })
-  ] });
+  return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
 function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
   return /* @__PURE__ */ jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
@@ -786,9 +798,6 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
     )
   ] });
 }
-const PAD_LEFT_LEGACY = 30;
-const PAD_RIGHT_LEGACY = 40;
-const PAD_X = (PAD_LEFT_LEGACY + PAD_RIGHT_LEGACY) / 2;
 const LABEL_SPACE_BELOW_AXIS = 42;
 const LABEL_ABOVE_AXIS_SLOP = 32;
 const ARC_TOP_PADDING = 16;
@@ -827,8 +836,12 @@ function NumberLine({ className }) {
   } = useNumberLineContext();
   const w = containerWidth;
   const h = containerHeight;
+  const horizontalLayout = computeHorizontalLayout(min, max);
   const range = Math.max(viewMax - viewMin, 1e-6);
-  const usable = Math.max(w - 2 * PAD_X, 1);
+  const usable = Math.max(
+    w - horizontalLayout.padLeft - horizontalLayout.padRight - horizontalLayout.labelInsetLeft - horizontalLayout.labelInsetRight,
+    1
+  );
   let ryTypical = MIN_ARC_HEIGHT * 0.5;
   if (groupSize > 0 && groupCount > 0) {
     const rx = usable * groupSize / range / 2;
@@ -984,7 +997,8 @@ function NumberLine({ className }) {
         display: "block",
         outline: enableZoom && isZoomActive ? "2px solid rgba(59, 130, 246, 0.5)" : "none",
         cursor: svgCursor,
-        touchAction: "none"
+        touchAction: "none",
+        overflow: "visible"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -1004,8 +1018,7 @@ function NumberLine({ className }) {
             viewMin,
             viewMax,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             containerWidth: w,
             groupSize,
@@ -1026,8 +1039,7 @@ function NumberLine({ className }) {
             groupSize,
             groupCount,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             arcMaxHeight,
             tool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcg-overseas/number-line",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Interactive number line component with group arcs and freehand drawing",
   "type": "module",
   "license": "MIT",
@@ -23,12 +23,6 @@
     "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"
@@ -43,5 +37,11 @@
   "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"
   }
-}
+}