@dcg-overseas/number-line 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -47,16 +47,20 @@ function useDrawing() {
     });
     setStrokes((prev) => prev.map((s) => ({ ...s, selected: false })));
   }, []);
-  const startStroke = React.useCallback((x, y) => {
+  const startStroke = React.useCallback((x, y, w, h) => {
     drawing.current = true;
     pointCount.current = 1;
-    currentD.current = `M ${x} ${y}`;
+    const xN = w > 0 ? x / w : 0;
+    const yN = h > 0 ? y / h : 0;
+    currentD.current = `M ${xN} ${yN}`;
     currentId.current = `${Date.now()}-${Math.random()}`;
   }, []);
-  const continueStroke = React.useCallback((x, y) => {
+  const continueStroke = React.useCallback((x, y, w, h) => {
     if (!drawing.current) return null;
     pointCount.current++;
-    currentD.current += ` L ${x} ${y}`;
+    const xN = w > 0 ? x / w : 0;
+    const yN = h > 0 ? y / h : 0;
+    currentD.current += ` L ${xN} ${yN}`;
     return {
       id: currentId.current,
       d: currentD.current,
@@ -117,21 +121,29 @@ function useDrawing() {
 }
 function useContainerSize() {
   const ref = React.useRef(null);
-  const [width, setWidth] = React.useState(600);
+  const [size, setSize] = React.useState({ width: 600, height: 200 });
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      setSize({ width: rect.width, height: rect.height });
+    }
+  }, []);
   React.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       var _a;
-      const w = (_a = entries[0]) == null ? void 0 : _a.contentRect.width;
-      if (w && w > 0) setWidth(w);
+      const rect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
+      if (rect && rect.width > 0 && rect.height > 0) {
+        setSize({ width: rect.width, height: rect.height });
+      }
     });
     ro.observe(el);
-    const rect = el.getBoundingClientRect();
-    if (rect.width > 0) setWidth(rect.width);
     return () => ro.disconnect();
   }, []);
-  return { ref, width };
+  return { ref, width: size.width, height: size.height };
 }
 const NumberLineContext = React.createContext(null);
 function useNumberLineContext() {
@@ -139,8 +151,6 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
-const DESIGN_WIDTH = 1e3;
-const DESIGN_HEIGHT = 200;
 function NumberLineProvider({
   min,
   max,
@@ -148,11 +158,14 @@ function NumberLineProvider({
   groupCount,
   tickStep,
   arcColors,
+  showGroupTicks = true,
+  showMajorTicks = true,
+  showMinorTicks = false,
   children
 }) {
   const [selectedArcIndices, setSelectedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = React.useState(/* @__PURE__ */ new Set());
-  const { ref: svgRef, width: containerWidth } = useContainerSize();
+  const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
   const history = useHistory();
   const drawing = useDrawing();
   const [liveStroke, setLiveStroke] = React.useState(null);
@@ -182,19 +195,19 @@ function NumberLineProvider({
       e.currentTarget.setPointerCapture(e.pointerId);
       const coords = getLocalCoords(e);
       if (!coords) return;
-      drawing.startStroke(...coords);
+      drawing.startStroke(coords[0], coords[1], containerWidth, containerHeight);
     },
-    [drawing, getLocalCoords]
+    [drawing, getLocalCoords, containerWidth, containerHeight]
   );
   const onPointerMove = React.useCallback(
     (e) => {
       if (drawing.tool !== "pen") return;
       const coords = getLocalCoords(e);
       if (!coords) return;
-      const live = drawing.continueStroke(...coords);
+      const live = drawing.continueStroke(coords[0], coords[1], containerWidth, containerHeight);
       if (live) setLiveStroke(live);
     },
-    [drawing, getLocalCoords]
+    [drawing, getLocalCoords, containerWidth, containerHeight]
   );
   const onPointerUp = React.useCallback(() => {
     if (drawing.tool !== "pen") return;
@@ -314,8 +327,8 @@ function NumberLineProvider({
     {
       value: {
         svgRef,
-        viewWidth: DESIGN_WIDTH,
         containerWidth,
+        containerHeight,
         svgCursor,
         min,
         max,
@@ -323,6 +336,9 @@ function NumberLineProvider({
         groupCount,
         tickStep,
         arcColors,
+        showGroupTicks,
+        showMajorTicks,
+        showMinorTicks,
         tool: drawing.tool,
         strokes: drawing.strokes,
         liveStroke,
@@ -362,6 +378,12 @@ const ARC_COLORS = [
   "#be185d",
   "#16a34a"
 ];
+function gcd(a, b) {
+  let x = Math.max(1, Math.abs(Math.round(a)));
+  let y = Math.max(1, Math.abs(Math.round(b)));
+  while (y !== 0) [x, y] = [y, x % y];
+  return x;
+}
 const AxisLayer = React.memo(function AxisLayer2({
   min,
   max,
@@ -371,7 +393,10 @@ const AxisLayer = React.memo(function AxisLayer2({
   viewWidth,
   containerWidth,
   groupSize,
-  tickStep
+  tickStep,
+  showGroupTicks,
+  showMajorTicks,
+  showMinorTicks
 }) {
   const range = max - min;
   if (range <= 0) return null;
@@ -381,9 +406,11 @@ const AxisLayer = React.memo(function AxisLayer2({
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
   const MAX_TICKS = 500;
-  const minorStep = Math.max(1, Math.ceil(range / MAX_TICKS));
+  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 allTicks = [];
-  for (let v = min; v <= max; v += minorStep) allTicks.push(v);
+  for (let v = min; v <= max; v += iterStep) allTicks.push(v);
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-axis-layer", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "line",
@@ -402,6 +429,8 @@ const AxisLayer = React.memo(function AxisLayer2({
       const isMajor = offset % step === 0;
       const isGroupBoundary = groupSize > 0 && offset % groupSize === 0;
       const showLabel = isMajor && offset % labelStep === 0;
+      const visible = isGroupBoundary ? showGroupTicks : isMajor ? showMajorTicks : showMinorTicks;
+      if (!visible) return null;
       const tickH = isGroupBoundary ? 10 : isMajor ? 7 : 4;
       const strokeW = isGroupBoundary ? 1.5 : isMajor ? 1 : 0.5;
       const color = isMajor ? "#374151" : "#9ca3af";
@@ -465,8 +494,10 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
     const rx = (x2 - x1) / 2;
     const ry = Math.min(rx * 0.7, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
-    const midX = (x1 + x2) / 2;
-    const labelY = axisY - ry - 6;
+    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";
@@ -514,8 +545,8 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
-            x: midX,
-            y: labelY,
+            x: x2,
+            y: textY,
             textAnchor: "middle",
             fontSize: 10,
             fill: isSelected ? "#1d4ed8" : color,
@@ -524,14 +555,34 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
             style: { userSelect: "none", WebkitUserSelect: "none" },
             children: end
           }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: x2,
+            y1: textY + 4,
+            x2,
+            y2: axisY - arrowHeadH,
+            stroke: isSelected ? "#1d4ed8" : color,
+            strokeWidth: 1.5,
+            pointerEvents: "none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "polygon",
+          {
+            points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
+            fill: isSelected ? "#1d4ed8" : color,
+            pointerEvents: "none"
+          }
         )
       ] }, g)
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-drawing-layer", children: [
+function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
     strokes.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       s.selected && /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -542,6 +593,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
           strokeWidth: 18,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke",
           pointerEvents: "none"
         }
       ),
@@ -554,6 +606,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
           strokeWidth: tool === "eraser" ? 32 : 28,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke",
           pointerEvents: "stroke",
           style: { cursor: tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default" },
           onPointerDown: (e) => {
@@ -573,6 +626,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
           strokeWidth: 2.5,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke",
           pointerEvents: "none"
         }
       )
@@ -586,6 +640,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
         strokeWidth: 2.5,
         strokeLinecap: "round",
         strokeLinejoin: "round",
+        vectorEffect: "non-scaling-stroke",
         pointerEvents: "none",
         opacity: 0.7
       }
@@ -594,12 +649,14 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
 }
 const PAD_LEFT = 30;
 const PAD_RIGHT = 40;
-const AXIS_Y = 130;
-const ARC_MAX_HEIGHT = 80;
+const AXIS_BOTTOM_OFFSET = 50;
+const ARC_TOP_PADDING = 16;
+const MIN_ARC_HEIGHT = 24;
 function NumberLine({ className }) {
   const {
     svgRef,
     containerWidth,
+    containerHeight,
     svgCursor,
     min,
     max,
@@ -607,6 +664,9 @@ function NumberLine({ className }) {
     groupCount,
     tickStep,
     arcColors,
+    showGroupTicks,
+    showMajorTicks,
+    showMinorTicks,
     tool,
     strokes,
     liveStroke,
@@ -618,14 +678,18 @@ function NumberLine({ className }) {
     onStrokeClick,
     onArcClick
   } = useNumberLineContext();
+  const w = containerWidth;
+  const h = containerHeight;
+  const axisY = Math.max(MIN_ARC_HEIGHT + ARC_TOP_PADDING, h - AXIS_BOTTOM_OFFSET);
+  const arcMaxHeight = Math.max(MIN_ARC_HEIGHT, axisY - ARC_TOP_PADDING);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       ref: svgRef,
       tabIndex: 0,
       className: className ? `nl-svg ${className}` : "nl-svg",
-      viewBox: `0 0 ${DESIGN_WIDTH} ${DESIGN_HEIGHT}`,
-      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `0 0 ${w} ${h}`,
+      preserveAspectRatio: "none",
       style: { width: "100%", height: "100%", display: "block", outline: "none", cursor: svgCursor, touchAction: "none" },
       onPointerDown,
       onPointerMove,
@@ -636,13 +700,16 @@ function NumberLine({ className }) {
           {
             min,
             max,
-            axisY: AXIS_Y,
+            axisY,
             padLeft: PAD_LEFT,
             padRight: PAD_RIGHT,
-            viewWidth: DESIGN_WIDTH,
-            containerWidth,
+            viewWidth: w,
+            containerWidth: w,
             groupSize,
-            tickStep
+            tickStep,
+            showGroupTicks,
+            showMajorTicks,
+            showMinorTicks
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -652,11 +719,11 @@ function NumberLine({ className }) {
             max,
             groupSize,
             groupCount,
-            axisY: AXIS_Y,
+            axisY,
             padLeft: PAD_LEFT,
             padRight: PAD_RIGHT,
-            viewWidth: DESIGN_WIDTH,
-            arcMaxHeight: ARC_MAX_HEIGHT,
+            viewWidth: w,
+            arcMaxHeight,
             tool,
             selectedArcIndices,
             deletedArcIndices,
@@ -670,6 +737,8 @@ function NumberLine({ className }) {
             strokes,
             liveStroke,
             tool,
+            width: w,
+            height: h,
             onStrokeClick
           }
         )

package/dist/index.d.ts

@@ -7,8 +7,8 @@ export declare function NumberLine({ className }: {
 
 export declare interface NumberLineContextValue {
     svgRef: default_2.RefObject<SVGSVGElement>;
-    viewWidth: number;
     containerWidth: number;
+    containerHeight: number;
     svgCursor: string;
     min: number;
     max: number;
@@ -16,6 +16,9 @@ export declare interface NumberLineContextValue {
     groupCount: number;
     tickStep: number;
     arcColors?: string[];
+    showGroupTicks: boolean;
+    showMajorTicks: boolean;
+    showMinorTicks: boolean;
     tool: Tool;
     strokes: Stroke[];
     liveStroke: Stroke | null;
@@ -42,9 +45,15 @@ export declare interface NumberLineProps {
     groupCount: number;
     tickStep: number;
     arcColors?: string[];
+    /** show group boundary ticks (tallest). Default: true */
+    showGroupTicks?: boolean;
+    /** show major ticks. Default: true */
+    showMajorTicks?: boolean;
+    /** show minor ticks (in-between). Default: false */
+    showMinorTicks?: boolean;
 }
 
-export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, children, }: NumberLineProviderProps): JSX_2.Element;
+export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, children, }: NumberLineProviderProps): JSX_2.Element;
 
 declare interface NumberLineProviderProps extends NumberLineProps {
     children: default_2.ReactNode;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useCallback, useEffect, createContext, useContext, memo } from "react";
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect, createContext, useContext, memo } from "react";
 function useHistory() {
   const stackRef = useRef([]);
   const [stackLen, setStackLen] = useState(0);
@@ -45,16 +45,20 @@ function useDrawing() {
     });
     setStrokes((prev) => prev.map((s) => ({ ...s, selected: false })));
   }, []);
-  const startStroke = useCallback((x, y) => {
+  const startStroke = useCallback((x, y, w, h) => {
     drawing.current = true;
     pointCount.current = 1;
-    currentD.current = `M ${x} ${y}`;
+    const xN = w > 0 ? x / w : 0;
+    const yN = h > 0 ? y / h : 0;
+    currentD.current = `M ${xN} ${yN}`;
     currentId.current = `${Date.now()}-${Math.random()}`;
   }, []);
-  const continueStroke = useCallback((x, y) => {
+  const continueStroke = useCallback((x, y, w, h) => {
     if (!drawing.current) return null;
     pointCount.current++;
-    currentD.current += ` L ${x} ${y}`;
+    const xN = w > 0 ? x / w : 0;
+    const yN = h > 0 ? y / h : 0;
+    currentD.current += ` L ${xN} ${yN}`;
     return {
       id: currentId.current,
       d: currentD.current,
@@ -115,21 +119,29 @@ function useDrawing() {
 }
 function useContainerSize() {
   const ref = useRef(null);
-  const [width, setWidth] = useState(600);
+  const [size, setSize] = useState({ width: 600, height: 200 });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      setSize({ width: rect.width, height: rect.height });
+    }
+  }, []);
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       var _a;
-      const w = (_a = entries[0]) == null ? void 0 : _a.contentRect.width;
-      if (w && w > 0) setWidth(w);
+      const rect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
+      if (rect && rect.width > 0 && rect.height > 0) {
+        setSize({ width: rect.width, height: rect.height });
+      }
     });
     ro.observe(el);
-    const rect = el.getBoundingClientRect();
-    if (rect.width > 0) setWidth(rect.width);
     return () => ro.disconnect();
   }, []);
-  return { ref, width };
+  return { ref, width: size.width, height: size.height };
 }
 const NumberLineContext = createContext(null);
 function useNumberLineContext() {
@@ -137,8 +149,6 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
-const DESIGN_WIDTH = 1e3;
-const DESIGN_HEIGHT = 200;
 function NumberLineProvider({
   min,
   max,
@@ -146,11 +156,14 @@ function NumberLineProvider({
   groupCount,
   tickStep,
   arcColors,
+  showGroupTicks = true,
+  showMajorTicks = true,
+  showMinorTicks = false,
   children
 }) {
   const [selectedArcIndices, setSelectedArcIndices] = useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = useState(/* @__PURE__ */ new Set());
-  const { ref: svgRef, width: containerWidth } = useContainerSize();
+  const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
   const history = useHistory();
   const drawing = useDrawing();
   const [liveStroke, setLiveStroke] = useState(null);
@@ -180,19 +193,19 @@ function NumberLineProvider({
       e.currentTarget.setPointerCapture(e.pointerId);
       const coords = getLocalCoords(e);
       if (!coords) return;
-      drawing.startStroke(...coords);
+      drawing.startStroke(coords[0], coords[1], containerWidth, containerHeight);
     },
-    [drawing, getLocalCoords]
+    [drawing, getLocalCoords, containerWidth, containerHeight]
   );
   const onPointerMove = useCallback(
     (e) => {
       if (drawing.tool !== "pen") return;
       const coords = getLocalCoords(e);
       if (!coords) return;
-      const live = drawing.continueStroke(...coords);
+      const live = drawing.continueStroke(coords[0], coords[1], containerWidth, containerHeight);
       if (live) setLiveStroke(live);
     },
-    [drawing, getLocalCoords]
+    [drawing, getLocalCoords, containerWidth, containerHeight]
   );
   const onPointerUp = useCallback(() => {
     if (drawing.tool !== "pen") return;
@@ -312,8 +325,8 @@ function NumberLineProvider({
     {
       value: {
         svgRef,
-        viewWidth: DESIGN_WIDTH,
         containerWidth,
+        containerHeight,
         svgCursor,
         min,
         max,
@@ -321,6 +334,9 @@ function NumberLineProvider({
         groupCount,
         tickStep,
         arcColors,
+        showGroupTicks,
+        showMajorTicks,
+        showMinorTicks,
         tool: drawing.tool,
         strokes: drawing.strokes,
         liveStroke,
@@ -360,6 +376,12 @@ const ARC_COLORS = [
   "#be185d",
   "#16a34a"
 ];
+function gcd(a, b) {
+  let x = Math.max(1, Math.abs(Math.round(a)));
+  let y = Math.max(1, Math.abs(Math.round(b)));
+  while (y !== 0) [x, y] = [y, x % y];
+  return x;
+}
 const AxisLayer = React.memo(function AxisLayer2({
   min,
   max,
@@ -369,7 +391,10 @@ const AxisLayer = React.memo(function AxisLayer2({
   viewWidth,
   containerWidth,
   groupSize,
-  tickStep
+  tickStep,
+  showGroupTicks,
+  showMajorTicks,
+  showMinorTicks
 }) {
   const range = max - min;
   if (range <= 0) return null;
@@ -379,9 +404,11 @@ const AxisLayer = React.memo(function AxisLayer2({
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
   const MAX_TICKS = 500;
-  const minorStep = Math.max(1, Math.ceil(range / MAX_TICKS));
+  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 allTicks = [];
-  for (let v = min; v <= max; v += minorStep) allTicks.push(v);
+  for (let v = min; v <= max; v += iterStep) allTicks.push(v);
   return /* @__PURE__ */ jsxs("g", { className: "nl-axis-layer", children: [
     /* @__PURE__ */ jsx(
       "line",
@@ -400,6 +427,8 @@ const AxisLayer = React.memo(function AxisLayer2({
       const isMajor = offset % step === 0;
       const isGroupBoundary = groupSize > 0 && offset % groupSize === 0;
       const showLabel = isMajor && offset % labelStep === 0;
+      const visible = isGroupBoundary ? showGroupTicks : isMajor ? showMajorTicks : showMinorTicks;
+      if (!visible) return null;
       const tickH = isGroupBoundary ? 10 : isMajor ? 7 : 4;
       const strokeW = isGroupBoundary ? 1.5 : isMajor ? 1 : 0.5;
       const color = isMajor ? "#374151" : "#9ca3af";
@@ -463,8 +492,10 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
     const rx = (x2 - x1) / 2;
     const ry = Math.min(rx * 0.7, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
-    const midX = (x1 + x2) / 2;
-    const labelY = axisY - ry - 6;
+    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";
@@ -512,8 +543,8 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
         /* @__PURE__ */ jsx(
           "text",
           {
-            x: midX,
-            y: labelY,
+            x: x2,
+            y: textY,
             textAnchor: "middle",
             fontSize: 10,
             fill: isSelected ? "#1d4ed8" : color,
@@ -522,14 +553,34 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
             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)
     );
   }
   return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
-  return /* @__PURE__ */ jsxs("g", { className: "nl-drawing-layer", children: [
+function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
+  return /* @__PURE__ */ jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
     strokes.map((s) => /* @__PURE__ */ jsxs("g", { children: [
       s.selected && /* @__PURE__ */ jsx(
         "path",
@@ -540,6 +591,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
           strokeWidth: 18,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke",
           pointerEvents: "none"
         }
       ),
@@ -552,6 +604,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
           strokeWidth: tool === "eraser" ? 32 : 28,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke",
           pointerEvents: "stroke",
           style: { cursor: tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default" },
           onPointerDown: (e) => {
@@ -571,6 +624,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
           strokeWidth: 2.5,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          vectorEffect: "non-scaling-stroke",
           pointerEvents: "none"
         }
       )
@@ -584,6 +638,7 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
         strokeWidth: 2.5,
         strokeLinecap: "round",
         strokeLinejoin: "round",
+        vectorEffect: "non-scaling-stroke",
         pointerEvents: "none",
         opacity: 0.7
       }
@@ -592,12 +647,14 @@ function DrawingLayer({ strokes, liveStroke, tool, onStrokeClick }) {
 }
 const PAD_LEFT = 30;
 const PAD_RIGHT = 40;
-const AXIS_Y = 130;
-const ARC_MAX_HEIGHT = 80;
+const AXIS_BOTTOM_OFFSET = 50;
+const ARC_TOP_PADDING = 16;
+const MIN_ARC_HEIGHT = 24;
 function NumberLine({ className }) {
   const {
     svgRef,
     containerWidth,
+    containerHeight,
     svgCursor,
     min,
     max,
@@ -605,6 +662,9 @@ function NumberLine({ className }) {
     groupCount,
     tickStep,
     arcColors,
+    showGroupTicks,
+    showMajorTicks,
+    showMinorTicks,
     tool,
     strokes,
     liveStroke,
@@ -616,14 +676,18 @@ function NumberLine({ className }) {
     onStrokeClick,
     onArcClick
   } = useNumberLineContext();
+  const w = containerWidth;
+  const h = containerHeight;
+  const axisY = Math.max(MIN_ARC_HEIGHT + ARC_TOP_PADDING, h - AXIS_BOTTOM_OFFSET);
+  const arcMaxHeight = Math.max(MIN_ARC_HEIGHT, axisY - ARC_TOP_PADDING);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       ref: svgRef,
       tabIndex: 0,
       className: className ? `nl-svg ${className}` : "nl-svg",
-      viewBox: `0 0 ${DESIGN_WIDTH} ${DESIGN_HEIGHT}`,
-      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `0 0 ${w} ${h}`,
+      preserveAspectRatio: "none",
       style: { width: "100%", height: "100%", display: "block", outline: "none", cursor: svgCursor, touchAction: "none" },
       onPointerDown,
       onPointerMove,
@@ -634,13 +698,16 @@ function NumberLine({ className }) {
           {
             min,
             max,
-            axisY: AXIS_Y,
+            axisY,
             padLeft: PAD_LEFT,
             padRight: PAD_RIGHT,
-            viewWidth: DESIGN_WIDTH,
-            containerWidth,
+            viewWidth: w,
+            containerWidth: w,
             groupSize,
-            tickStep
+            tickStep,
+            showGroupTicks,
+            showMajorTicks,
+            showMinorTicks
           }
         ),
         /* @__PURE__ */ jsx(
@@ -650,11 +717,11 @@ function NumberLine({ className }) {
             max,
             groupSize,
             groupCount,
-            axisY: AXIS_Y,
+            axisY,
             padLeft: PAD_LEFT,
             padRight: PAD_RIGHT,
-            viewWidth: DESIGN_WIDTH,
-            arcMaxHeight: ARC_MAX_HEIGHT,
+            viewWidth: w,
+            arcMaxHeight,
             tool,
             selectedArcIndices,
             deletedArcIndices,
@@ -668,6 +735,8 @@ function NumberLine({ className }) {
             strokes,
             liveStroke,
             tool,
+            width: w,
+            height: h,
             onStrokeClick
           }
         )

package/package.json

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