@dcg-overseas/number-line 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/index.cjs

@@ -223,6 +223,7 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
+const DEFAULT_DRAWING_STROKE_WIDTH = 2.5;
 function normalizeDomain(lo, hi) {
   const a = Number(lo);
   const b = Number(hi);
@@ -255,6 +256,7 @@ function NumberLineProvider({
   groupSize,
   groupCount,
   tickStep,
+  strokeWidth: configuredStrokeWidth,
   arcColors,
   showGroupTicks = true,
   showMajorTicks = true,
@@ -270,6 +272,7 @@ function NumberLineProvider({
   children
 }) {
   const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
+  const strokeWidth = typeof configuredStrokeWidth === "number" && Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0 ? configuredStrokeWidth : DEFAULT_DRAWING_STROKE_WIDTH;
   const [selectedArcIndices, setSelectedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = React.useState(/* @__PURE__ */ new Set());
   const [groupTicksHidden, setGroupTicksHidden] = React.useState(false);
@@ -286,7 +289,6 @@ function NumberLineProvider({
     onChange: onViewChange
   });
   const [liveStroke, setLiveStroke] = React.useState(null);
-  const svgPoint = React.useRef(null);
   const [eraseHoverIds, setEraseHoverIds] = React.useState(/* @__PURE__ */ new Set());
   const eraseGesture = React.useRef(null);
   const createHistorySnapshot = React.useCallback(
@@ -316,20 +318,17 @@ function NumberLineProvider({
     drawing.resetStrokes,
     history.clear
   ]);
-  const getLocalCoords = React.useCallback(
-    (e) => {
-      const svg = svgRef.current;
-      if (!svg) return null;
-      const ctm = svg.getScreenCTM();
-      if (!ctm) return null;
-      if (!svgPoint.current) svgPoint.current = svg.createSVGPoint();
-      svgPoint.current.x = e.clientX;
-      svgPoint.current.y = e.clientY;
-      const pt = svgPoint.current.matrixTransform(ctm.inverse());
-      return [pt.x, pt.y];
-    },
-    [svgRef]
-  );
+  const getLocalCoords = React.useCallback((event) => {
+    const svg = svgRef.current;
+    if (!svg) return null;
+    const rect = svg.getBoundingClientRect();
+    const viewBox = svg.viewBox.baseVal;
+    if (rect.width <= 0 || rect.height <= 0 || viewBox.width <= 0 || viewBox.height <= 0) return null;
+    return [
+      viewBox.x + (event.clientX - rect.left) / rect.width * viewBox.width,
+      viewBox.y + (event.clientY - rect.top) / rect.height * viewBox.height
+    ];
+  }, [svgRef]);
   const strokeIdsNear = React.useCallback(
     (x, y, radius) => {
       const ids = [];
@@ -551,6 +550,7 @@ function NumberLineProvider({
         groupSize,
         groupCount,
         tickStep,
+        strokeWidth,
         arcColors,
         showGroupTicks: showGroupTicks && !groupTicksHidden,
         showMajorTicks,
@@ -1023,7 +1023,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds, onStrokeClick }) {
+function DrawingLayer({ strokes, liveStroke, tool, width, height, strokeWidth, eraseHoverIds, 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 || tool === "eraser" && eraseHoverIds.has(s.id)) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1065,7 +1065,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
           d: s.d,
           fill: "none",
           stroke: "#7c3aed",
-          strokeWidth: 2.5,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           vectorEffect: "non-scaling-stroke",
@@ -1079,7 +1079,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
         d: liveStroke.d,
         fill: "none",
         stroke: "#7c3aed",
-        strokeWidth: 2.5,
+        strokeWidth,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         vectorEffect: "non-scaling-stroke",
@@ -1104,6 +1104,7 @@ function NumberLine({ className }) {
     groupSize,
     groupCount,
     tickStep,
+    strokeWidth,
     arcColors,
     showGroupTicks,
     showMajorTicks,
@@ -1355,6 +1356,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            strokeWidth,
             eraseHoverIds,
             onStrokeClick
           }

package/dist/index.d.ts

@@ -15,6 +15,8 @@ export declare interface NumberLineContextValue {
     groupSize: number;
     groupCount: number;
     tickStep: number;
+    /** 用户自由绘制笔迹的固定视觉线宽，单位为 CSS 像素。 */
+    strokeWidth: number;
     arcColors?: string[];
     showGroupTicks: boolean;
     showMajorTicks: boolean;
@@ -60,6 +62,8 @@ export declare interface NumberLineProps {
     groupSize: number;
     groupCount: number;
     tickStep: number;
+    /** 用户自由绘制笔迹的固定视觉线宽，单位为 CSS 像素；默认 2.5。 */
+    strokeWidth?: number;
     arcColors?: string[];
     /** show group boundary ticks (tallest). Default: true */
     showGroupTicks?: boolean;
@@ -87,7 +91,7 @@ export declare interface NumberLineProps {
     getShowLabelStep?: (params: unknown) => boolean;
 }
 
-export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
+export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, strokeWidth: configuredStrokeWidth, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
 
 declare interface NumberLineProviderProps extends NumberLineProps {
     children: default_2.ReactNode;

package/dist/index.js

@@ -221,6 +221,7 @@ function useNumberLineContext() {
   if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
   return ctx;
 }
+const DEFAULT_DRAWING_STROKE_WIDTH = 2.5;
 function normalizeDomain(lo, hi) {
   const a = Number(lo);
   const b = Number(hi);
@@ -253,6 +254,7 @@ function NumberLineProvider({
   groupSize,
   groupCount,
   tickStep,
+  strokeWidth: configuredStrokeWidth,
   arcColors,
   showGroupTicks = true,
   showMajorTicks = true,
@@ -268,6 +270,7 @@ function NumberLineProvider({
   children
 }) {
   const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
+  const strokeWidth = typeof configuredStrokeWidth === "number" && Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0 ? configuredStrokeWidth : DEFAULT_DRAWING_STROKE_WIDTH;
   const [selectedArcIndices, setSelectedArcIndices] = useState(/* @__PURE__ */ new Set());
   const [deletedArcIndices, setDeletedArcIndices] = useState(/* @__PURE__ */ new Set());
   const [groupTicksHidden, setGroupTicksHidden] = useState(false);
@@ -284,7 +287,6 @@ function NumberLineProvider({
     onChange: onViewChange
   });
   const [liveStroke, setLiveStroke] = useState(null);
-  const svgPoint = useRef(null);
   const [eraseHoverIds, setEraseHoverIds] = useState(/* @__PURE__ */ new Set());
   const eraseGesture = useRef(null);
   const createHistorySnapshot = useCallback(
@@ -314,20 +316,17 @@ function NumberLineProvider({
     drawing.resetStrokes,
     history.clear
   ]);
-  const getLocalCoords = useCallback(
-    (e) => {
-      const svg = svgRef.current;
-      if (!svg) return null;
-      const ctm = svg.getScreenCTM();
-      if (!ctm) return null;
-      if (!svgPoint.current) svgPoint.current = svg.createSVGPoint();
-      svgPoint.current.x = e.clientX;
-      svgPoint.current.y = e.clientY;
-      const pt = svgPoint.current.matrixTransform(ctm.inverse());
-      return [pt.x, pt.y];
-    },
-    [svgRef]
-  );
+  const getLocalCoords = useCallback((event) => {
+    const svg = svgRef.current;
+    if (!svg) return null;
+    const rect = svg.getBoundingClientRect();
+    const viewBox = svg.viewBox.baseVal;
+    if (rect.width <= 0 || rect.height <= 0 || viewBox.width <= 0 || viewBox.height <= 0) return null;
+    return [
+      viewBox.x + (event.clientX - rect.left) / rect.width * viewBox.width,
+      viewBox.y + (event.clientY - rect.top) / rect.height * viewBox.height
+    ];
+  }, [svgRef]);
   const strokeIdsNear = useCallback(
     (x, y, radius) => {
       const ids = [];
@@ -549,6 +548,7 @@ function NumberLineProvider({
         groupSize,
         groupCount,
         tickStep,
+        strokeWidth,
         arcColors,
         showGroupTicks: showGroupTicks && !groupTicksHidden,
         showMajorTicks,
@@ -1021,7 +1021,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   }
   return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
-function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds, onStrokeClick }) {
+function DrawingLayer({ strokes, liveStroke, tool, width, height, strokeWidth, eraseHoverIds, onStrokeClick }) {
   return /* @__PURE__ */ jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
     strokes.map((s) => /* @__PURE__ */ jsxs("g", { children: [
       (s.selected || tool === "eraser" && eraseHoverIds.has(s.id)) && /* @__PURE__ */ jsx(
@@ -1063,7 +1063,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
           d: s.d,
           fill: "none",
           stroke: "#7c3aed",
-          strokeWidth: 2.5,
+          strokeWidth,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           vectorEffect: "non-scaling-stroke",
@@ -1077,7 +1077,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, eraseHoverIds,
         d: liveStroke.d,
         fill: "none",
         stroke: "#7c3aed",
-        strokeWidth: 2.5,
+        strokeWidth,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         vectorEffect: "non-scaling-stroke",
@@ -1102,6 +1102,7 @@ function NumberLine({ className }) {
     groupSize,
     groupCount,
     tickStep,
+    strokeWidth,
     arcColors,
     showGroupTicks,
     showMajorTicks,
@@ -1353,6 +1354,7 @@ function NumberLine({ className }) {
             tool,
             width: w,
             height: h,
+            strokeWidth,
             eraseHoverIds,
             onStrokeClick
           }

package/package.json

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