@dcg-overseas/number-line 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -554,8 +554,8 @@ const ARC_COLORS = [
554
554
  "#16a34a"
555
555
  ];
556
556
  const ARC_RY_RATIO = 0.9;
557
- const ARC_ANIMATION_STAGGER_MS = 700;
558
- const ARC_ANIMATION_DRAW_MS = 800;
557
+ const ARC_ANIMATION_DRAW_MS = 1e3;
558
+ const ARC_ANIMATION_PAUSE_MS = 400;
559
559
  function gcd(a, b) {
560
560
  let x = Math.max(1, Math.abs(Math.round(a)));
561
561
  let y = Math.max(1, Math.abs(Math.round(b)));
@@ -578,7 +578,9 @@ const AxisLayer = React.memo(function AxisLayer2({
578
578
  showMajorTicks,
579
579
  showMinorTicks,
580
580
  showLabelStep,
581
- getShowLabelStep
581
+ getShowLabelStep,
582
+ arcColors = ARC_COLORS,
583
+ deletedArcIndices
582
584
  }) {
583
585
  const range = viewMax - viewMin;
584
586
  if (range <= 0) return null;
@@ -638,7 +640,9 @@ const AxisLayer = React.memo(function AxisLayer2({
638
640
  });
639
641
  const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6;
640
642
  const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : renderAsHalf ? 2 : 1;
641
- const color = renderAsGroup || renderAsMajor || renderAsHalf ? "#374151" : "#4b5563";
643
+ const arcIndex = renderAsGroup && offset > 0 ? offset / groupSize - 1 : -1;
644
+ const arcColored = arcIndex >= 0 && arcIndex < groupCount && !(deletedArcIndices == null ? void 0 : deletedArcIndices.has(arcIndex));
645
+ const color = arcColored ? arcColors[arcIndex % arcColors.length] : renderAsGroup || renderAsMajor || renderAsHalf ? "#374151" : "#4b5563";
642
646
  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
643
647
  /* @__PURE__ */ jsxRuntime.jsx(
644
648
  "line",
@@ -714,7 +718,7 @@ function AnimatedArc({
714
718
  setShowLabels(false);
715
719
  setShowHitArea(false);
716
720
  setIsDrawing(false);
717
- const delay = groupIndex * ARC_ANIMATION_STAGGER_MS;
721
+ const delay = groupIndex * (ARC_ANIMATION_DRAW_MS + ARC_ANIMATION_PAUSE_MS);
718
722
  let drawTimer = 0;
719
723
  let labelTimer = 0;
720
724
  let completeTimer = 0;
@@ -1211,7 +1215,9 @@ function NumberLine({ className }) {
1211
1215
  showMajorTicks,
1212
1216
  showMinorTicks,
1213
1217
  showLabelStep,
1214
- getShowLabelStep
1218
+ getShowLabelStep,
1219
+ arcColors,
1220
+ deletedArcIndices
1215
1221
  }
1216
1222
  ),
1217
1223
  /* @__PURE__ */ jsxRuntime.jsx(
package/dist/index.js CHANGED
@@ -552,8 +552,8 @@ const ARC_COLORS = [
552
552
  "#16a34a"
553
553
  ];
554
554
  const ARC_RY_RATIO = 0.9;
555
- const ARC_ANIMATION_STAGGER_MS = 700;
556
- const ARC_ANIMATION_DRAW_MS = 800;
555
+ const ARC_ANIMATION_DRAW_MS = 1e3;
556
+ const ARC_ANIMATION_PAUSE_MS = 400;
557
557
  function gcd(a, b) {
558
558
  let x = Math.max(1, Math.abs(Math.round(a)));
559
559
  let y = Math.max(1, Math.abs(Math.round(b)));
@@ -576,7 +576,9 @@ const AxisLayer = React.memo(function AxisLayer2({
576
576
  showMajorTicks,
577
577
  showMinorTicks,
578
578
  showLabelStep,
579
- getShowLabelStep
579
+ getShowLabelStep,
580
+ arcColors = ARC_COLORS,
581
+ deletedArcIndices
580
582
  }) {
581
583
  const range = viewMax - viewMin;
582
584
  if (range <= 0) return null;
@@ -636,7 +638,9 @@ const AxisLayer = React.memo(function AxisLayer2({
636
638
  });
637
639
  const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6;
638
640
  const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : renderAsHalf ? 2 : 1;
639
- const color = renderAsGroup || renderAsMajor || renderAsHalf ? "#374151" : "#4b5563";
641
+ const arcIndex = renderAsGroup && offset > 0 ? offset / groupSize - 1 : -1;
642
+ const arcColored = arcIndex >= 0 && arcIndex < groupCount && !(deletedArcIndices == null ? void 0 : deletedArcIndices.has(arcIndex));
643
+ const color = arcColored ? arcColors[arcIndex % arcColors.length] : renderAsGroup || renderAsMajor || renderAsHalf ? "#374151" : "#4b5563";
640
644
  return /* @__PURE__ */ jsxs("g", { children: [
641
645
  /* @__PURE__ */ jsx(
642
646
  "line",
@@ -712,7 +716,7 @@ function AnimatedArc({
712
716
  setShowLabels(false);
713
717
  setShowHitArea(false);
714
718
  setIsDrawing(false);
715
- const delay = groupIndex * ARC_ANIMATION_STAGGER_MS;
719
+ const delay = groupIndex * (ARC_ANIMATION_DRAW_MS + ARC_ANIMATION_PAUSE_MS);
716
720
  let drawTimer = 0;
717
721
  let labelTimer = 0;
718
722
  let completeTimer = 0;
@@ -1209,7 +1213,9 @@ function NumberLine({ className }) {
1209
1213
  showMajorTicks,
1210
1214
  showMinorTicks,
1211
1215
  showLabelStep,
1212
- getShowLabelStep
1216
+ getShowLabelStep,
1217
+ arcColors,
1218
+ deletedArcIndices
1213
1219
  }
1214
1220
  ),
1215
1221
  /* @__PURE__ */ jsx(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dcg-overseas/number-line",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "description": "Interactive number line component with group arcs and freehand drawing",
5
5
  "type": "module",
6
6
  "license": "MIT",