@dcg-overseas/number-line 0.1.0 → 0.1.2

package/dist/index.js

@@ -0,0 +1,703 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState, useCallback, useEffect, createContext, useContext, memo } from "react";
+function useHistory() {
+  const stackRef = useRef([]);
+  const [stackLen, setStackLen] = useState(0);
+  const push = useCallback((op) => {
+    stackRef.current = [...stackRef.current, op];
+    setStackLen(stackRef.current.length);
+  }, []);
+  const undo = useCallback((strokes) => {
+    if (stackRef.current.length === 0) return { strokes: null, arcIndices: [] };
+    const op = stackRef.current[stackRef.current.length - 1];
+    stackRef.current = stackRef.current.slice(0, -1);
+    setStackLen(stackRef.current.length);
+    switch (op.type) {
+      case "add":
+        return {
+          strokes: strokes.filter((s) => !op.strokes.some((os) => os.id === s.id)),
+          arcIndices: []
+        };
+      case "delete":
+        return {
+          strokes: op.strokesBefore,
+          arcIndices: op.arcIndices
+        };
+    }
+  }, []);
+  const clear = useCallback(() => {
+    stackRef.current = [];
+    setStackLen(0);
+  }, []);
+  return { push, undo, clear, canUndo: stackLen > 0 };
+}
+function useDrawing() {
+  const [strokes, setStrokes] = useState([]);
+  const [tool, setTool] = useState("none");
+  const drawing = useRef(false);
+  const pointCount = useRef(0);
+  const currentD = useRef("");
+  const currentId = useRef("");
+  const toggleTool = useCallback((t) => {
+    setTool((prev) => {
+      if (prev === t) return "none";
+      return t;
+    });
+    setStrokes((prev) => prev.map((s) => ({ ...s, selected: false })));
+  }, []);
+  const startStroke = useCallback((x, y) => {
+    drawing.current = true;
+    pointCount.current = 1;
+    currentD.current = `M ${x} ${y}`;
+    currentId.current = `${Date.now()}-${Math.random()}`;
+  }, []);
+  const continueStroke = useCallback((x, y) => {
+    if (!drawing.current) return null;
+    pointCount.current++;
+    currentD.current += ` L ${x} ${y}`;
+    return {
+      id: currentId.current,
+      d: currentD.current,
+      selected: false
+    };
+  }, []);
+  const endStroke = useCallback(() => {
+    if (!drawing.current) return null;
+    drawing.current = false;
+    if (pointCount.current < 2) {
+      currentD.current = "";
+      pointCount.current = 0;
+      return null;
+    }
+    const stroke = {
+      id: currentId.current,
+      d: currentD.current,
+      selected: false
+    };
+    currentD.current = "";
+    pointCount.current = 0;
+    return stroke;
+  }, []);
+  const toggleSelect = useCallback((id) => {
+    setStrokes(
+      (prev) => prev.map((s) => s.id === id ? { ...s, selected: !s.selected } : s)
+    );
+  }, []);
+  const eraseStroke = useCallback((id) => {
+    setStrokes((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const addStroke = useCallback((stroke) => {
+    setStrokes((prev) => [...prev, stroke]);
+  }, []);
+  const deleteSelected = useCallback(() => {
+    setStrokes((prev) => prev.filter((s) => !s.selected));
+  }, []);
+  const resetStrokes = useCallback(() => {
+    setStrokes([]);
+  }, []);
+  const restoreStrokes = useCallback((restored) => {
+    setStrokes(restored);
+  }, []);
+  return {
+    strokes,
+    tool,
+    toggleTool,
+    startStroke,
+    continueStroke,
+    endStroke,
+    toggleSelect,
+    eraseStroke,
+    addStroke,
+    deleteSelected,
+    resetStrokes,
+    restoreStrokes
+  };
+}
+function useContainerSize() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(600);
+  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);
+    });
+    ro.observe(el);
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0) setWidth(rect.width);
+    return () => ro.disconnect();
+  }, []);
+  return { ref, width };
+}
+const NumberLineContext = createContext(null);
+function useNumberLineContext() {
+  const ctx = useContext(NumberLineContext);
+  if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
+  return ctx;
+}
+const DESIGN_WIDTH = 1e3;
+const DESIGN_HEIGHT = 200;
+function NumberLineProvider({
+  min,
+  max,
+  groupSize,
+  groupCount,
+  tickStep,
+  arcColors,
+  children
+}) {
+  const [selectedArcIndices, setSelectedArcIndices] = useState(/* @__PURE__ */ new Set());
+  const [deletedArcIndices, setDeletedArcIndices] = useState(/* @__PURE__ */ new Set());
+  const { ref: svgRef, width: containerWidth } = useContainerSize();
+  const history = useHistory();
+  const drawing = useDrawing();
+  const [liveStroke, setLiveStroke] = useState(null);
+  const svgPoint = useRef(null);
+  useEffect(() => {
+    setDeletedArcIndices(/* @__PURE__ */ new Set());
+    setSelectedArcIndices(/* @__PURE__ */ new Set());
+  }, [min, max, groupSize, groupCount]);
+  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 onPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.focus();
+      if (drawing.tool !== "pen") return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const coords = getLocalCoords(e);
+      if (!coords) return;
+      drawing.startStroke(...coords);
+    },
+    [drawing, getLocalCoords]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (drawing.tool !== "pen") return;
+      const coords = getLocalCoords(e);
+      if (!coords) return;
+      const live = drawing.continueStroke(...coords);
+      if (live) setLiveStroke(live);
+    },
+    [drawing, getLocalCoords]
+  );
+  const onPointerUp = useCallback(() => {
+    if (drawing.tool !== "pen") return;
+    const stroke = drawing.endStroke();
+    setLiveStroke(null);
+    if (stroke) {
+      drawing.addStroke(stroke);
+      history.push({ type: "add", strokes: [stroke] });
+    }
+  }, [drawing, history]);
+  const onStrokeClick = useCallback(
+    (id, e) => {
+      e.stopPropagation();
+      if (drawing.tool === "eraser") {
+        const target = drawing.strokes.find((s) => s.id === id);
+        if (target) {
+          const strokesBefore = drawing.strokes;
+          drawing.eraseStroke(id);
+          history.push({ type: "delete", strokesBefore, arcIndices: [] });
+        }
+      } else if (drawing.tool === "none") {
+        drawing.toggleSelect(id);
+      }
+    },
+    [drawing, history]
+  );
+  const onArcClick = useCallback(
+    (groupIndex, e) => {
+      e.stopPropagation();
+      if (drawing.tool === "eraser") {
+        const strokesBefore = drawing.strokes;
+        setDeletedArcIndices((prev) => /* @__PURE__ */ new Set([...prev, groupIndex]));
+        history.push({ type: "delete", strokesBefore, arcIndices: [groupIndex] });
+      } else if (drawing.tool === "none") {
+        setSelectedArcIndices((prev) => {
+          const next = new Set(prev);
+          if (next.has(groupIndex)) next.delete(groupIndex);
+          else next.add(groupIndex);
+          return next;
+        });
+      }
+    },
+    [drawing.tool, drawing.strokes, history]
+  );
+  const clearArcSelection = useCallback(() => setSelectedArcIndices(/* @__PURE__ */ new Set()), []);
+  const onDelete = useCallback(() => {
+    const strokesBefore = drawing.strokes;
+    const deletedStrokes = drawing.strokes.filter((s) => s.selected);
+    const deletedArcs = [...selectedArcIndices];
+    if (deletedStrokes.length === 0 && deletedArcs.length === 0) return;
+    if (deletedStrokes.length > 0) drawing.deleteSelected();
+    if (deletedArcs.length > 0) {
+      setDeletedArcIndices((prev) => /* @__PURE__ */ new Set([...prev, ...deletedArcs]));
+      setSelectedArcIndices(/* @__PURE__ */ new Set());
+    }
+    history.push({ type: "delete", strokesBefore, arcIndices: deletedArcs });
+  }, [drawing, history, selectedArcIndices]);
+  const onReset = useCallback(() => {
+    drawing.resetStrokes();
+    history.clear();
+    setDeletedArcIndices(/* @__PURE__ */ new Set());
+    setSelectedArcIndices(/* @__PURE__ */ new Set());
+  }, [drawing, history]);
+  const onUndo = useCallback(() => {
+    const result = history.undo(drawing.strokes);
+    if (result.strokes !== null) drawing.restoreStrokes(result.strokes);
+    if (result.arcIndices.length > 0) {
+      setDeletedArcIndices((prev) => {
+        const next = new Set(prev);
+        result.arcIndices.forEach((i) => next.delete(i));
+        return next;
+      });
+    }
+  }, [history, drawing]);
+  const onTogglePen = useCallback(
+    () => {
+      drawing.toggleTool("pen");
+      clearArcSelection();
+    },
+    [drawing, clearArcSelection]
+  );
+  const onToggleEraser = useCallback(
+    () => {
+      drawing.toggleTool("eraser");
+      clearArcSelection();
+    },
+    [drawing, clearArcSelection]
+  );
+  const canDelete = drawing.strokes.some((s) => s.selected) || selectedArcIndices.size > 0;
+  useEffect(() => {
+    setSelectedArcIndices(/* @__PURE__ */ new Set());
+  }, [drawing.tool]);
+  const keyHandlers = useRef({ toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo });
+  keyHandlers.current = { toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo };
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const onKey = (e) => {
+      const h = keyHandlers.current;
+      if (e.key === "Escape") {
+        h.toggleTool("none");
+        h.clearArcSelection();
+      } else if ((e.key === "Delete" || e.key === "Backspace") && h.canDelete) {
+        e.preventDefault();
+        h.onDelete();
+      } else if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        h.onUndo();
+      }
+    };
+    svg.addEventListener("keydown", onKey);
+    return () => svg.removeEventListener("keydown", onKey);
+  }, [svgRef]);
+  const svgCursor = drawing.tool === "pen" ? "crosshair" : drawing.tool === "eraser" ? "cell" : "default";
+  return /* @__PURE__ */ jsx(
+    NumberLineContext.Provider,
+    {
+      value: {
+        svgRef,
+        viewWidth: DESIGN_WIDTH,
+        containerWidth,
+        svgCursor,
+        min,
+        max,
+        groupSize,
+        groupCount,
+        tickStep,
+        arcColors,
+        tool: drawing.tool,
+        strokes: drawing.strokes,
+        liveStroke,
+        selectedArcIndices,
+        deletedArcIndices,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onStrokeClick,
+        onArcClick,
+        canDelete,
+        canUndo: history.canUndo,
+        onTogglePen,
+        onToggleEraser,
+        onDelete,
+        onReset,
+        onUndo
+      },
+      children
+    }
+  );
+}
+function buildArcPath({ x1, x2, y, rx, ry }) {
+  return `M ${x1} ${y} A ${rx} ${ry} 0 0 1 ${x2} ${y}`;
+}
+function computeLabelStep(containerWidth, range) {
+  const maxLabels = Math.floor(containerWidth / 40);
+  if (maxLabels <= 0) return range;
+  const raw = range / maxLabels;
+  const candidates = [1, 2, 5, 10, 20, 25, 50, 100, 200, 500];
+  return candidates.find((c) => c >= raw) ?? candidates[candidates.length - 1];
+}
+const ARC_COLORS = [
+  "#7c3aed",
+  "#0891b2",
+  "#d97706",
+  "#be185d",
+  "#16a34a"
+];
+const AxisLayer = React.memo(function AxisLayer2({
+  min,
+  max,
+  axisY,
+  padLeft,
+  padRight,
+  viewWidth,
+  containerWidth,
+  groupSize,
+  tickStep
+}) {
+  const range = max - min;
+  if (range <= 0) return null;
+  const usable = viewWidth - padLeft - padRight;
+  const toX = (v) => padLeft + (v - min) / range * usable;
+  const step = Math.max(1, Math.round(tickStep));
+  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 allTicks = [];
+  for (let v = min; v <= max; v += minorStep) allTicks.push(v);
+  return /* @__PURE__ */ jsxs("g", { className: "nl-axis-layer", children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: padLeft - 4,
+        y1: axisY,
+        x2: viewWidth - padRight,
+        y2: axisY,
+        stroke: "#374151",
+        strokeWidth: 2
+      }
+    ),
+    allTicks.map((v) => {
+      const x = toX(v);
+      const offset = v - min;
+      const isMajor = offset % step === 0;
+      const isGroupBoundary = groupSize > 0 && offset % groupSize === 0;
+      const showLabel = isMajor && offset % labelStep === 0;
+      const tickH = isGroupBoundary ? 10 : isMajor ? 7 : 4;
+      const strokeW = isGroupBoundary ? 1.5 : isMajor ? 1 : 0.5;
+      const color = isMajor ? "#374151" : "#9ca3af";
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: x,
+            y1: axisY - tickH,
+            x2: x,
+            y2: axisY + tickH,
+            stroke: color,
+            strokeWidth: strokeW
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x,
+            y: axisY + 22,
+            textAnchor: "middle",
+            fontSize: 11,
+            fill: "#374151",
+            pointerEvents: "none",
+            style: { userSelect: "none", WebkitUserSelect: "none" },
+            children: v
+          }
+        )
+      ] }, v);
+    })
+  ] });
+});
+const GroupArcsLayer = memo(function GroupArcsLayer2({
+  min,
+  max,
+  groupSize,
+  groupCount,
+  axisY,
+  padLeft,
+  padRight,
+  viewWidth,
+  arcMaxHeight,
+  tool,
+  selectedArcIndices,
+  deletedArcIndices,
+  onArcClick,
+  arcColors = ARC_COLORS
+}) {
+  if (groupSize <= 0 || groupCount <= 0) return null;
+  const range = max - min;
+  const usable = viewWidth - padLeft - padRight;
+  const toX = (v) => padLeft + (v - min) / range * usable;
+  const arcs = [];
+  for (let g = 0; g < groupCount; g++) {
+    if (deletedArcIndices.has(g)) continue;
+    const start = min + g * groupSize;
+    const end = start + groupSize;
+    if (end > max) break;
+    const x1 = toX(start);
+    const x2 = toX(end);
+    const rx = (x2 - x1) / 2;
+    const ry = Math.min(rx * 0.7, arcMaxHeight);
+    const color = arcColors[g % arcColors.length];
+    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";
+    arcs.push(
+      /* @__PURE__ */ jsxs("g", { children: [
+        isSelected && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: arcPath,
+            fill: "none",
+            stroke: "rgba(0,0,0,0.15)",
+            strokeWidth: 14,
+            strokeLinecap: "round",
+            pointerEvents: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: arcPath,
+            fill: "none",
+            stroke: isSelected ? "#1d4ed8" : color,
+            strokeWidth: isSelected ? 3 : 2,
+            pointerEvents: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: arcPath,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: 20,
+            strokeLinecap: "round",
+            pointerEvents: "stroke",
+            style: { cursor: hitCursor },
+            onPointerDown: (e) => {
+              if (tool === "eraser" || tool === "none") {
+                e.stopPropagation();
+                onArcClick(g, e);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: x2,
+            y: textY,
+            textAnchor: "middle",
+            fontSize: 10,
+            fill: isSelected ? "#1d4ed8" : color,
+            fontWeight: "600",
+            pointerEvents: "none",
+            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: [
+    strokes.map((s) => /* @__PURE__ */ jsxs("g", { children: [
+      s.selected && /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: s.d,
+          fill: "none",
+          stroke: "rgba(0,0,0,0.15)",
+          strokeWidth: 18,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: s.d,
+          fill: "none",
+          stroke: "transparent",
+          strokeWidth: tool === "eraser" ? 32 : 28,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          pointerEvents: "stroke",
+          style: { cursor: tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default" },
+          onPointerDown: (e) => {
+            if (tool === "eraser" || tool === "none") {
+              e.stopPropagation();
+              onStrokeClick(s.id, e);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: s.d,
+          fill: "none",
+          stroke: "#7c3aed",
+          strokeWidth: 2.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          pointerEvents: "none"
+        }
+      )
+    ] }, s.id)),
+    liveStroke && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: liveStroke.d,
+        fill: "none",
+        stroke: "#7c3aed",
+        strokeWidth: 2.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        pointerEvents: "none",
+        opacity: 0.7
+      }
+    )
+  ] });
+}
+const PAD_LEFT = 30;
+const PAD_RIGHT = 40;
+const AXIS_Y = 130;
+const ARC_MAX_HEIGHT = 80;
+function NumberLine({ className }) {
+  const {
+    svgRef,
+    containerWidth,
+    svgCursor,
+    min,
+    max,
+    groupSize,
+    groupCount,
+    tickStep,
+    arcColors,
+    tool,
+    strokes,
+    liveStroke,
+    selectedArcIndices,
+    deletedArcIndices,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onStrokeClick,
+    onArcClick
+  } = useNumberLineContext();
+  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",
+      style: { width: "100%", height: "100%", display: "block", outline: "none", cursor: svgCursor, touchAction: "none" },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      children: [
+        /* @__PURE__ */ jsx(
+          AxisLayer,
+          {
+            min,
+            max,
+            axisY: AXIS_Y,
+            padLeft: PAD_LEFT,
+            padRight: PAD_RIGHT,
+            viewWidth: DESIGN_WIDTH,
+            containerWidth,
+            groupSize,
+            tickStep
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GroupArcsLayer,
+          {
+            min,
+            max,
+            groupSize,
+            groupCount,
+            axisY: AXIS_Y,
+            padLeft: PAD_LEFT,
+            padRight: PAD_RIGHT,
+            viewWidth: DESIGN_WIDTH,
+            arcMaxHeight: ARC_MAX_HEIGHT,
+            tool,
+            selectedArcIndices,
+            deletedArcIndices,
+            onArcClick,
+            arcColors
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DrawingLayer,
+          {
+            strokes,
+            liveStroke,
+            tool,
+            onStrokeClick
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  NumberLine,
+  NumberLineProvider,
+  useNumberLineContext
+};

package/package.json

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