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

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.
Files changed (4) hide show
  1. package/dist/index.cjs +16 -2
  2. package/dist/index.d.ts +18 -1
  3. package/dist/index.js +16 -2
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -257,6 +257,8 @@ function NumberLineProvider({
257
257
  groupCount,
258
258
  tickStep,
259
259
  strokeWidth: configuredStrokeWidth,
260
+ coordinateScale: configuredCoordinateScale = 1,
261
+ tickHeightScale: configuredTickHeightScale = 1,
260
262
  arcColors,
261
263
  showGroupTicks = true,
262
264
  showMajorTicks = true,
@@ -273,10 +275,18 @@ function NumberLineProvider({
273
275
  }) {
274
276
  const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
275
277
  const strokeWidth = typeof configuredStrokeWidth === "number" && Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0 ? configuredStrokeWidth : DEFAULT_DRAWING_STROKE_WIDTH;
278
+ const coordinateScale = typeof configuredCoordinateScale === "number" && Number.isFinite(configuredCoordinateScale) && configuredCoordinateScale > 0 ? configuredCoordinateScale : 1;
279
+ const tickHeightScale = typeof configuredTickHeightScale === "number" && Number.isFinite(configuredTickHeightScale) && configuredTickHeightScale > 0 ? configuredTickHeightScale : 1;
276
280
  const [selectedArcIndices, setSelectedArcIndices] = React.useState(/* @__PURE__ */ new Set());
277
281
  const [deletedArcIndices, setDeletedArcIndices] = React.useState(/* @__PURE__ */ new Set());
278
282
  const [groupTicksHidden, setGroupTicksHidden] = React.useState(false);
279
- const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
283
+ const {
284
+ ref: svgRef,
285
+ width: measuredWidth,
286
+ height: measuredHeight
287
+ } = useContainerSize();
288
+ const containerWidth = measuredWidth * coordinateScale;
289
+ const containerHeight = measuredHeight * coordinateScale;
280
290
  const history = useHistory();
281
291
  const drawing = useDrawing();
282
292
  const { viewMin, viewMax, zoomAt, panByFraction, resetView } = useZoom({
@@ -552,6 +562,7 @@ function NumberLineProvider({
552
562
  tickStep,
553
563
  strokeWidth,
554
564
  arcColors,
565
+ tickHeightScale,
555
566
  showGroupTicks: showGroupTicks && !groupTicksHidden,
556
567
  showMajorTicks,
557
568
  showMinorTicks,
@@ -674,6 +685,7 @@ const AxisLayer = React.memo(function AxisLayer2({
674
685
  groupSize,
675
686
  groupCount,
676
687
  tickStep,
688
+ tickHeightScale,
677
689
  showGroupTicks,
678
690
  showMajorTicks,
679
691
  showMinorTicks,
@@ -739,7 +751,7 @@ const AxisLayer = React.memo(function AxisLayer2({
739
751
  v
740
752
  }) : void 0;
741
753
  const shouldShowLabel = currentShowLabelStep ?? (showLabel || showLabelStep);
742
- const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6;
754
+ const tickH = (renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6) * tickHeightScale;
743
755
  const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : renderAsHalf ? 2 : 1;
744
756
  const arcIndex = renderAsGroup ? offset > 0 ? offset / groupSize - 1 : offset === 0 ? 0 : -1 : -1;
745
757
  const arcColored = arcIndex >= 0 && arcIndex < groupCount && !(deletedArcIndices == null ? void 0 : deletedArcIndices.has(arcIndex));
@@ -1105,6 +1117,7 @@ function NumberLine({ className }) {
1105
1117
  groupCount,
1106
1118
  tickStep,
1107
1119
  strokeWidth,
1120
+ tickHeightScale,
1108
1121
  arcColors,
1109
1122
  showGroupTicks,
1110
1123
  showMajorTicks,
@@ -1319,6 +1332,7 @@ function NumberLine({ className }) {
1319
1332
  groupSize,
1320
1333
  groupCount,
1321
1334
  tickStep,
1335
+ tickHeightScale,
1322
1336
  showGroupTicks,
1323
1337
  showMajorTicks,
1324
1338
  showMinorTicks,
package/dist/index.d.ts CHANGED
@@ -17,6 +17,8 @@ export declare interface NumberLineContextValue {
17
17
  tickStep: number;
18
18
  /** 用户自由绘制笔迹的固定视觉线宽，单位为 CSS 像素。 */
19
19
  strokeWidth: number;
20
+ /** 仅用于补偿 SVG 整体缩放后的刻度线逻辑高度；默认值为 1。 */
21
+ tickHeightScale: number;
20
22
  arcColors?: string[];
21
23
  showGroupTicks: boolean;
22
24
  showMajorTicks: boolean;
@@ -64,6 +66,21 @@ export declare interface NumberLineProps {
64
66
  tickStep: number;
65
67
  /** 用户自由绘制笔迹的固定视觉线宽，单位为 CSS 像素；默认 2.5。 */
66
68
  strokeWidth?: number;
69
+ /**
70
+ * SVG 逻辑坐标相对于实际 CSS 像素的倍率；默认 1。
71
+ *
72
+ * 大于 1 时扩大内部 viewBox 和布局计算使用的坐标，不改变 SVG 元素本身的 CSS 宽高。
73
+ * 宿主可在整体 rem 缩放的场景传入反向倍率，使标签密度、弧线位置和指针坐标仍以
74
+ * 设计稿尺寸计算，同时避免 CSS transform 产生独立合成层。
75
+ */
76
+ coordinateScale?: number;
77
+ /**
78
+ * 数轴刻度线高度的逻辑补偿倍率；默认 1。
79
+ *
80
+ * 当 coordinateScale 缩小竖屏的 SVG 视觉坐标时，宿主可传入相同的反向倍率，使刻度线
81
+ * 映射到实际画布后的显示高度仍与横屏一致；不会影响主轴、数字标签、弧线或绘制笔迹。
82
+ */
83
+ tickHeightScale?: number;
67
84
  arcColors?: string[];
68
85
  /** show group boundary ticks (tallest). Default: true */
69
86
  showGroupTicks?: boolean;
@@ -91,7 +108,7 @@ export declare interface NumberLineProps {
91
108
  getShowLabelStep?: (params: unknown) => boolean;
92
109
  }
93
110
 
94
- export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, strokeWidth: configuredStrokeWidth, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
111
+ export declare function NumberLineProvider({ min, max, groupSize, groupCount, tickStep, strokeWidth: configuredStrokeWidth, coordinateScale: configuredCoordinateScale, tickHeightScale: configuredTickHeightScale, arcColors, showGroupTicks, showMajorTicks, showMinorTicks, enableZoom, minZoom, maxZoom, showLabelStep, viewMin: controlledViewMin, viewMax: controlledViewMax, getShowLabelStep, onViewChange, children, }: NumberLineProviderProps): JSX_2.Element;
95
112
 
96
113
  declare interface NumberLineProviderProps extends NumberLineProps {
97
114
  children: default_2.ReactNode;
package/dist/index.js CHANGED
@@ -255,6 +255,8 @@ function NumberLineProvider({
255
255
  groupCount,
256
256
  tickStep,
257
257
  strokeWidth: configuredStrokeWidth,
258
+ coordinateScale: configuredCoordinateScale = 1,
259
+ tickHeightScale: configuredTickHeightScale = 1,
258
260
  arcColors,
259
261
  showGroupTicks = true,
260
262
  showMajorTicks = true,
@@ -271,10 +273,18 @@ function NumberLineProvider({
271
273
  }) {
272
274
  const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
273
275
  const strokeWidth = typeof configuredStrokeWidth === "number" && Number.isFinite(configuredStrokeWidth) && configuredStrokeWidth > 0 ? configuredStrokeWidth : DEFAULT_DRAWING_STROKE_WIDTH;
276
+ const coordinateScale = typeof configuredCoordinateScale === "number" && Number.isFinite(configuredCoordinateScale) && configuredCoordinateScale > 0 ? configuredCoordinateScale : 1;
277
+ const tickHeightScale = typeof configuredTickHeightScale === "number" && Number.isFinite(configuredTickHeightScale) && configuredTickHeightScale > 0 ? configuredTickHeightScale : 1;
274
278
  const [selectedArcIndices, setSelectedArcIndices] = useState(/* @__PURE__ */ new Set());
275
279
  const [deletedArcIndices, setDeletedArcIndices] = useState(/* @__PURE__ */ new Set());
276
280
  const [groupTicksHidden, setGroupTicksHidden] = useState(false);
277
- const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
281
+ const {
282
+ ref: svgRef,
283
+ width: measuredWidth,
284
+ height: measuredHeight
285
+ } = useContainerSize();
286
+ const containerWidth = measuredWidth * coordinateScale;
287
+ const containerHeight = measuredHeight * coordinateScale;
278
288
  const history = useHistory();
279
289
  const drawing = useDrawing();
280
290
  const { viewMin, viewMax, zoomAt, panByFraction, resetView } = useZoom({
@@ -550,6 +560,7 @@ function NumberLineProvider({
550
560
  tickStep,
551
561
  strokeWidth,
552
562
  arcColors,
563
+ tickHeightScale,
553
564
  showGroupTicks: showGroupTicks && !groupTicksHidden,
554
565
  showMajorTicks,
555
566
  showMinorTicks,
@@ -672,6 +683,7 @@ const AxisLayer = React.memo(function AxisLayer2({
672
683
  groupSize,
673
684
  groupCount,
674
685
  tickStep,
686
+ tickHeightScale,
675
687
  showGroupTicks,
676
688
  showMajorTicks,
677
689
  showMinorTicks,
@@ -737,7 +749,7 @@ const AxisLayer = React.memo(function AxisLayer2({
737
749
  v
738
750
  }) : void 0;
739
751
  const shouldShowLabel = currentShowLabelStep ?? (showLabel || showLabelStep);
740
- const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6;
752
+ const tickH = (renderAsGroup ? 7 : renderAsMajor ? 10 : renderAsHalf ? 8 : 6) * tickHeightScale;
741
753
  const strokeW = renderAsGroup ? 4 : renderAsMajor ? 2 : renderAsHalf ? 2 : 1;
742
754
  const arcIndex = renderAsGroup ? offset > 0 ? offset / groupSize - 1 : offset === 0 ? 0 : -1 : -1;
743
755
  const arcColored = arcIndex >= 0 && arcIndex < groupCount && !(deletedArcIndices == null ? void 0 : deletedArcIndices.has(arcIndex));
@@ -1103,6 +1115,7 @@ function NumberLine({ className }) {
1103
1115
  groupCount,
1104
1116
  tickStep,
1105
1117
  strokeWidth,
1118
+ tickHeightScale,
1106
1119
  arcColors,
1107
1120
  showGroupTicks,
1108
1121
  showMajorTicks,
@@ -1317,6 +1330,7 @@ function NumberLine({ className }) {
1317
1330
  groupSize,
1318
1331
  groupCount,
1319
1332
  tickStep,
1333
+ tickHeightScale,
1320
1334
  showGroupTicks,
1321
1335
  showMajorTicks,
1322
1336
  showMinorTicks,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dcg-overseas/number-line",
3
- "version": "1.0.0-beta.4",
3
+ "version": "1.0.0-beta.6",
4
4
  "description": "Interactive number line component with group arcs and freehand drawing",
5
5
  "type": "module",
6
6
  "license": "MIT",