@dcg-overseas/number-line 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -465,8 +465,9 @@ 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 textY = axisY - ry - 6;
+    const arrowHeadH = 7;
+    const arrowHeadHW = 4;
     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 +515,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,6 +525,26 @@ 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)
     );

package/dist/index.js

@@ -463,8 +463,9 @@ 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 textY = axisY - ry - 6;
+    const arrowHeadH = 7;
+    const arrowHeadHW = 4;
     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 +513,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,6 +523,26 @@ 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)
     );

package/package.json

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