@dcg-overseas/number-line 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -234,6 +234,19 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
+function normalizeDomain(lo, hi) {
+  const a = Number(lo);
+  const b = Number(hi);
+  const x = Math.min(a, b);
+  const y = Math.max(a, b);
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return { min: 0, max: 1 };
+  }
+  if (y <= x) {
+    return { min: x, max: x + 1 };
+  }
+  return { min: x, max: y };
+}
 function NumberLineProvider({
   min,
   max,
@@ -252,14 +265,15 @@ function NumberLineProvider({
   onViewChange,
   children
 }) {
+  const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
   const [selectedArcIndices, setSelectedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
   const history = useHistory();
   const drawing = useDrawing();
   const { viewMin, viewMax, zoomAt, panByFraction, resetView } = useZoom({
-    dataMin: min,
-    dataMax: max,
+    dataMin: domainMin,
+    dataMax: domainMax,
     minZoom,
     maxZoom,
     controlledMin: controlledViewMin,
@@ -271,7 +285,7 @@ function NumberLineProvider({
   React.useEffect(() => {
     setDeletedArcIndices(/* @__PURE__ */ new Set());
     setSelectedArcIndices(/* @__PURE__ */ new Set());
-  }, [min, max, groupSize, groupCount]);
+  }, [domainMin, domainMax, groupSize, groupCount]);
   const getLocalCoords = React.useCallback(
     (e) => {
       const svg = svgRef.current;
@@ -428,8 +442,8 @@ function NumberLineProvider({
         containerWidth,
         containerHeight,
         svgCursor,
-        min,
-        max,
+        min: domainMin,
+        max: domainMax,
         groupSize,
         groupCount,
         tickStep,
@@ -774,9 +788,11 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
     )
   ] });
 }
-const PAD_LEFT = 30;
-const PAD_RIGHT = 40;
-const AXIS_BOTTOM_OFFSET = 50;
+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;
 const MIN_ARC_HEIGHT = 24;
 function NumberLine({ className }) {
@@ -813,7 +829,17 @@ function NumberLine({ className }) {
   } = useNumberLineContext();
   const w = containerWidth;
   const h = containerHeight;
-  const axisY = Math.max(MIN_ARC_HEIGHT + ARC_TOP_PADDING, h - AXIS_BOTTOM_OFFSET);
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(w - 2 * PAD_X, 1);
+  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);
+  }
+  const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
+  const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
+  const axisYCentered = (h + ryTypical + LABEL_ABOVE_AXIS_SLOP - LABEL_SPACE_BELOW_AXIS) / 2;
+  const axisY = Math.min(maxAxisY, Math.max(minAxisY, axisYCentered));
   const arcMaxHeight = Math.max(MIN_ARC_HEIGHT, axisY - ARC_TOP_PADDING);
   const [isZoomActive, setIsZoomActive] = React.useState(false);
   const [isPanning, setIsPanning] = React.useState(false);
@@ -980,8 +1006,8 @@ function NumberLine({ className }) {
             viewMin,
             viewMax,
             axisY,
-            padLeft: PAD_LEFT,
-            padRight: PAD_RIGHT,
+            padLeft: PAD_X,
+            padRight: PAD_X,
             viewWidth: w,
             containerWidth: w,
             groupSize,
@@ -1002,8 +1028,8 @@ function NumberLine({ className }) {
             groupSize,
             groupCount,
             axisY,
-            padLeft: PAD_LEFT,
-            padRight: PAD_RIGHT,
+            padLeft: PAD_X,
+            padRight: PAD_X,
             viewWidth: w,
             arcMaxHeight,
             tool,

package/dist/index.js

@@ -232,6 +232,19 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
+function normalizeDomain(lo, hi) {
+  const a = Number(lo);
+  const b = Number(hi);
+  const x = Math.min(a, b);
+  const y = Math.max(a, b);
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return { min: 0, max: 1 };
+  }
+  if (y <= x) {
+    return { min: x, max: x + 1 };
+  }
+  return { min: x, max: y };
+}
 function NumberLineProvider({
   min,
   max,
@@ -250,14 +263,15 @@ function NumberLineProvider({
   onViewChange,
   children
 }) {
+  const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
   const [selectedArcIndices, setSelectedArcIndices] = useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = useState(/* @__PURE__ */ new Set());
   const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
   const history = useHistory();
   const drawing = useDrawing();
   const { viewMin, viewMax, zoomAt, panByFraction, resetView } = useZoom({
-    dataMin: min,
-    dataMax: max,
+    dataMin: domainMin,
+    dataMax: domainMax,
     minZoom,
     maxZoom,
     controlledMin: controlledViewMin,
@@ -269,7 +283,7 @@ function NumberLineProvider({
   useEffect(() => {
     setDeletedArcIndices(/* @__PURE__ */ new Set());
     setSelectedArcIndices(/* @__PURE__ */ new Set());
-  }, [min, max, groupSize, groupCount]);
+  }, [domainMin, domainMax, groupSize, groupCount]);
   const getLocalCoords = useCallback(
     (e) => {
       const svg = svgRef.current;
@@ -426,8 +440,8 @@ function NumberLineProvider({
         containerWidth,
         containerHeight,
         svgCursor,
-        min,
-        max,
+        min: domainMin,
+        max: domainMax,
         groupSize,
         groupCount,
         tickStep,
@@ -772,9 +786,11 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
     )
   ] });
 }
-const PAD_LEFT = 30;
-const PAD_RIGHT = 40;
-const AXIS_BOTTOM_OFFSET = 50;
+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;
 const MIN_ARC_HEIGHT = 24;
 function NumberLine({ className }) {
@@ -811,7 +827,17 @@ function NumberLine({ className }) {
   } = useNumberLineContext();
   const w = containerWidth;
   const h = containerHeight;
-  const axisY = Math.max(MIN_ARC_HEIGHT + ARC_TOP_PADDING, h - AXIS_BOTTOM_OFFSET);
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(w - 2 * PAD_X, 1);
+  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);
+  }
+  const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
+  const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
+  const axisYCentered = (h + ryTypical + LABEL_ABOVE_AXIS_SLOP - LABEL_SPACE_BELOW_AXIS) / 2;
+  const axisY = Math.min(maxAxisY, Math.max(minAxisY, axisYCentered));
   const arcMaxHeight = Math.max(MIN_ARC_HEIGHT, axisY - ARC_TOP_PADDING);
   const [isZoomActive, setIsZoomActive] = useState(false);
   const [isPanning, setIsPanning] = useState(false);
@@ -978,8 +1004,8 @@ function NumberLine({ className }) {
             viewMin,
             viewMax,
             axisY,
-            padLeft: PAD_LEFT,
-            padRight: PAD_RIGHT,
+            padLeft: PAD_X,
+            padRight: PAD_X,
             viewWidth: w,
             containerWidth: w,
             groupSize,
@@ -1000,8 +1026,8 @@ function NumberLine({ className }) {
             groupSize,
             groupCount,
             axisY,
-            padLeft: PAD_LEFT,
-            padRight: PAD_RIGHT,
+            padLeft: PAD_X,
+            padRight: PAD_X,
             viewWidth: w,
             arcMaxHeight,
             tool,

package/package.json

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