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

package/dist/index.cjs

@@ -289,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(
@@ -319,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 = [];

package/dist/index.js

@@ -287,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(
@@ -317,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 = [];

package/package.json

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