@dcg-overseas/number-line 0.1.26 → 0.1.27
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 +11 -5
- package/dist/index.js +11 -5
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -554,6 +554,9 @@ const ARC_COLORS = [
|
|
|
554
554
|
"#16a34a"
|
|
555
555
|
];
|
|
556
556
|
const ARC_RY_RATIO = 0.9;
|
|
557
|
+
const ARC_LABEL_GAP = 6;
|
|
558
|
+
const ARC_LABEL_FONT_SIZE = 16;
|
|
559
|
+
const ARC_LABEL_SPACE = ARC_LABEL_GAP + ARC_LABEL_FONT_SIZE;
|
|
557
560
|
const ARC_ANIMATION_DRAW_MS = 1e3;
|
|
558
561
|
const ARC_ANIMATION_PAUSE_MS = 400;
|
|
559
562
|
function gcd(a, b) {
|
|
@@ -812,7 +815,7 @@ function AnimatedArc({
|
|
|
812
815
|
x: x2,
|
|
813
816
|
y: textY,
|
|
814
817
|
textAnchor: edgeTextAnchor(),
|
|
815
|
-
fontSize:
|
|
818
|
+
fontSize: ARC_LABEL_FONT_SIZE,
|
|
816
819
|
fill: strokeColor,
|
|
817
820
|
fontWeight: "600",
|
|
818
821
|
pointerEvents: "none",
|
|
@@ -882,7 +885,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
|
|
|
882
885
|
const color = arcColors[g % arcColors.length];
|
|
883
886
|
const MIN_ARROW_SPAN = 24;
|
|
884
887
|
const textY = Math.min(
|
|
885
|
-
axisY - ry - ARC_BASELINE_LIFT -
|
|
888
|
+
axisY - ry - ARC_BASELINE_LIFT - ARC_LABEL_GAP,
|
|
886
889
|
axisY - MIN_ARROW_SPAN
|
|
887
890
|
);
|
|
888
891
|
const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
|
|
@@ -984,7 +987,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
|
|
|
984
987
|
] });
|
|
985
988
|
}
|
|
986
989
|
const LABEL_SPACE_BELOW_AXIS = 42;
|
|
987
|
-
const LABEL_ABOVE_AXIS_SLOP =
|
|
990
|
+
const LABEL_ABOVE_AXIS_SLOP = ARC_BASELINE_LIFT + ARC_LABEL_SPACE;
|
|
988
991
|
const ARC_TOP_PADDING = 16;
|
|
989
992
|
const MIN_ARC_HEIGHT = 24;
|
|
990
993
|
function NumberLine({ className }) {
|
|
@@ -1034,11 +1037,14 @@ function NumberLine({ className }) {
|
|
|
1034
1037
|
const rx = usable * groupSize / range / 2;
|
|
1035
1038
|
ryTypical = Math.min(rx * ARC_RY_RATIO, h * 0.48);
|
|
1036
1039
|
}
|
|
1037
|
-
const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
|
|
1040
|
+
const minAxisY = MIN_ARC_HEIGHT + ARC_BASELINE_LIFT + ARC_LABEL_SPACE + ARC_TOP_PADDING;
|
|
1038
1041
|
const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
|
|
1039
1042
|
const axisYCentered = (h + ryTypical + LABEL_ABOVE_AXIS_SLOP - LABEL_SPACE_BELOW_AXIS) / 2;
|
|
1040
1043
|
const axisY = Math.min(maxAxisY, Math.max(minAxisY, axisYCentered));
|
|
1041
|
-
const arcMaxHeight = Math.max(
|
|
1044
|
+
const arcMaxHeight = Math.max(
|
|
1045
|
+
MIN_ARC_HEIGHT,
|
|
1046
|
+
axisY - ARC_TOP_PADDING - ARC_BASELINE_LIFT - ARC_LABEL_SPACE
|
|
1047
|
+
);
|
|
1042
1048
|
const [isZoomActive, setIsZoomActive] = React.useState(false);
|
|
1043
1049
|
const [isPanning, setIsPanning] = React.useState(false);
|
|
1044
1050
|
const panStart = React.useRef(null);
|
package/dist/index.js
CHANGED
|
@@ -552,6 +552,9 @@ const ARC_COLORS = [
|
|
|
552
552
|
"#16a34a"
|
|
553
553
|
];
|
|
554
554
|
const ARC_RY_RATIO = 0.9;
|
|
555
|
+
const ARC_LABEL_GAP = 6;
|
|
556
|
+
const ARC_LABEL_FONT_SIZE = 16;
|
|
557
|
+
const ARC_LABEL_SPACE = ARC_LABEL_GAP + ARC_LABEL_FONT_SIZE;
|
|
555
558
|
const ARC_ANIMATION_DRAW_MS = 1e3;
|
|
556
559
|
const ARC_ANIMATION_PAUSE_MS = 400;
|
|
557
560
|
function gcd(a, b) {
|
|
@@ -810,7 +813,7 @@ function AnimatedArc({
|
|
|
810
813
|
x: x2,
|
|
811
814
|
y: textY,
|
|
812
815
|
textAnchor: edgeTextAnchor(),
|
|
813
|
-
fontSize:
|
|
816
|
+
fontSize: ARC_LABEL_FONT_SIZE,
|
|
814
817
|
fill: strokeColor,
|
|
815
818
|
fontWeight: "600",
|
|
816
819
|
pointerEvents: "none",
|
|
@@ -880,7 +883,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
|
|
|
880
883
|
const color = arcColors[g % arcColors.length];
|
|
881
884
|
const MIN_ARROW_SPAN = 24;
|
|
882
885
|
const textY = Math.min(
|
|
883
|
-
axisY - ry - ARC_BASELINE_LIFT -
|
|
886
|
+
axisY - ry - ARC_BASELINE_LIFT - ARC_LABEL_GAP,
|
|
884
887
|
axisY - MIN_ARROW_SPAN
|
|
885
888
|
);
|
|
886
889
|
const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
|
|
@@ -982,7 +985,7 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
|
|
|
982
985
|
] });
|
|
983
986
|
}
|
|
984
987
|
const LABEL_SPACE_BELOW_AXIS = 42;
|
|
985
|
-
const LABEL_ABOVE_AXIS_SLOP =
|
|
988
|
+
const LABEL_ABOVE_AXIS_SLOP = ARC_BASELINE_LIFT + ARC_LABEL_SPACE;
|
|
986
989
|
const ARC_TOP_PADDING = 16;
|
|
987
990
|
const MIN_ARC_HEIGHT = 24;
|
|
988
991
|
function NumberLine({ className }) {
|
|
@@ -1032,11 +1035,14 @@ function NumberLine({ className }) {
|
|
|
1032
1035
|
const rx = usable * groupSize / range / 2;
|
|
1033
1036
|
ryTypical = Math.min(rx * ARC_RY_RATIO, h * 0.48);
|
|
1034
1037
|
}
|
|
1035
|
-
const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
|
|
1038
|
+
const minAxisY = MIN_ARC_HEIGHT + ARC_BASELINE_LIFT + ARC_LABEL_SPACE + ARC_TOP_PADDING;
|
|
1036
1039
|
const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
|
|
1037
1040
|
const axisYCentered = (h + ryTypical + LABEL_ABOVE_AXIS_SLOP - LABEL_SPACE_BELOW_AXIS) / 2;
|
|
1038
1041
|
const axisY = Math.min(maxAxisY, Math.max(minAxisY, axisYCentered));
|
|
1039
|
-
const arcMaxHeight = Math.max(
|
|
1042
|
+
const arcMaxHeight = Math.max(
|
|
1043
|
+
MIN_ARC_HEIGHT,
|
|
1044
|
+
axisY - ARC_TOP_PADDING - ARC_BASELINE_LIFT - ARC_LABEL_SPACE
|
|
1045
|
+
);
|
|
1040
1046
|
const [isZoomActive, setIsZoomActive] = useState(false);
|
|
1041
1047
|
const [isPanning, setIsPanning] = useState(false);
|
|
1042
1048
|
const panStart = useRef(null);
|