Skip to content

Commit 6cd5114

Browse files
daybrushdaybrush
committed
feat: add snapHorizontalThreshold, snapVerticalThreshold #1044 
1 parent 9f4c9f4 commit 6cd5114

8 files changed

Lines changed: 74 additions & 22 deletions

File tree

‎packages/react-moveable/src/ables/Clippable.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -661,6 +661,7 @@ background: var(--bounds-color);
661661
guideXPoses,
662662
guideYPoses,
663663
5,
664+
5,
664665
);
665666
let snapOffsetY = horizontalSnapInfo.offset;
666667
let snapOffsetX = verticalSnapInfo.offset;
@@ -767,6 +768,7 @@ background: var(--bounds-color);
767768
guideXPoses,
768769
guideYPoses,
769770
1,
771+
1,
770772
);
771773

772774
if (originalDraggable) {

‎packages/react-moveable/src/ables/Snappable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -758,6 +758,7 @@ color: #f55;
758758
poses,
759759
snapRenderInfo.direction,
760760
snapRenderThreshold,
761+
snapRenderThreshold,
761762
)
762763
);
763764
}
@@ -767,7 +768,7 @@ color: #f55;
767768
(rect as any).middle = (rect.top + rect.bottom) / 2;
768769
(rect as any).center = (rect.left + rect.right) / 2;
769770
}
770-
snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold));
771+
snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold, snapRenderThreshold));
771772
}
772773
if (hasExternalPoses) {
773774
if (snapRenderInfo.center) {
@@ -776,7 +777,7 @@ color: #f55;
776777
(externalRect as any).center =
777778
(externalRect.left + externalRect.right) / 2;
778779
}
779-
snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold));
780+
snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold, snapRenderThreshold));
780781
}
781782
snapInfos.forEach((snapInfo) => {
782783
const {

‎packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ export function getGapGuidelines(
252252
});
253253
return gapGuidelines;
254254
}
255+
255256
export function startGridGroupGuidelines(
256257
moveable: MoveableManagerInterface<SnappableProps, SnappableState>,
257258
clientLeft: number,

‎packages/react-moveable/src/ables/snappable/snap.ts‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,19 @@ export function checkMoveableSnapPoses(
1919
posesY: number[],
2020
dirXs: string[] = [],
2121
dirYs: string[] = [],
22-
customSnapThreshold?: number,
22+
customSnapVerticalThreshold: number | undefined,
23+
customSnapHorizontalThreshold: number | undefined,
2324
) {
2425
const props = moveable.props;
2526
const snapThresholdMultiples = moveable.state.snapThresholdInfo?.multiples || [1, 1];
26-
const snapThreshold = selectValue<number>(
27-
customSnapThreshold,
28-
props.snapThreshold,
27+
const snapHorizontalThreshold = selectValue<number>(
28+
customSnapHorizontalThreshold,
29+
props.snapHorizontalThreshold,
30+
5,
31+
);
32+
const snapVerticalThreshold = selectValue<number>(
33+
customSnapVerticalThreshold,
34+
props.snapVerticalThreshold,
2935
5,
3036
);
3137

@@ -35,7 +41,8 @@ export function checkMoveableSnapPoses(
3541
posesY,
3642
dirXs,
3743
dirYs,
38-
snapThreshold,
44+
snapHorizontalThreshold,
45+
snapVerticalThreshold,
3946
snapThresholdMultiples,
4047
);
4148
}
@@ -46,12 +53,13 @@ export function checkSnapPoses(
4653
posesY: number[],
4754
dirXs: string[],
4855
dirYs: string[],
49-
snapThreshold: number,
56+
snapHorizontalThreshold: number,
57+
snapVerticalThreshold: number,
5058
multiples: number[],
5159
) {
5260
return {
53-
vertical: checkSnap(guidelines, "vertical", posesX, snapThreshold * multiples[0], dirXs),
54-
horizontal: checkSnap(guidelines, "horizontal", posesY, snapThreshold * multiples[1], dirYs),
61+
vertical: checkSnap(guidelines, "vertical", posesX, snapVerticalThreshold * multiples[0], dirXs),
62+
horizontal: checkSnap(guidelines, "horizontal", posesY, snapHorizontalThreshold * multiples[1], dirYs),
5563
};
5664
}
5765
export function checkSnapKeepRatio(
@@ -88,7 +96,15 @@ export function checkSnapKeepRatio(
8896
const {
8997
vertical: verticalSnapInfo,
9098
horizontal: horizontalSnapInfo,
91-
} = checkMoveableSnapPoses(moveable, dx ? [endX] : [], dy ? [endY] : []);
99+
} = checkMoveableSnapPoses(
100+
moveable,
101+
dx ? [endX] : [],
102+
dy ? [endY] : [],
103+
[],
104+
[],
105+
undefined,
106+
undefined,
107+
);
92108

93109
verticalSnapInfo.posInfos.filter(({ pos }) => {
94110
return isRight ? pos >= startX : pos <= startX;
@@ -173,7 +189,8 @@ function getStringDirection(dir: number | string) {
173189
export function checkSnaps(
174190
moveable: MoveableManagerInterface<SnappableProps, SnappableState>,
175191
rect: SnapDirectionPoses,
176-
customSnapThreshold?: number,
192+
customSnapVerticalThreshold: number | undefined,
193+
customSnapHorizontalThreshold: number | undefined,
177194
): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } {
178195
const poses = splitSnapDirectionPoses(moveable.props.snapDirections, rect);
179196

@@ -183,7 +200,8 @@ export function checkSnaps(
183200
poses.horizontal,
184201
poses.verticalNames.map(name => getStringDirection(name)),
185202
poses.horizontalNames.map(name => getStringDirection(name)),
186-
customSnapThreshold,
203+
customSnapVerticalThreshold,
204+
customSnapHorizontalThreshold,
187205
);
188206
const horizontalDirection = getStringDirection(poses.horizontalNames[result.horizontal.index]);
189207
const verticalDirection = getStringDirection(poses.verticalNames[result.vertical.index]);
@@ -300,7 +318,8 @@ export function getSnapInfosByDirection(
300318
// pos1 pos2 pos3 pos4
301319
poses: number[][],
302320
snapDirection: number[],
303-
snapThreshold = 1,
321+
customSnapVerticalThreshold: number | undefined,
322+
customSnapHorizontalThreshold: number | undefined,
304323
): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } {
305324
let dirs: number[][] = [];
306325

@@ -357,7 +376,8 @@ export function getSnapInfosByDirection(
357376
xs, ys,
358377
dirs.map(dir => getStringDirection(dir[0])),
359378
dirs.map(dir => getStringDirection(dir[1])),
360-
snapThreshold
379+
customSnapVerticalThreshold,
380+
customSnapHorizontalThreshold,
361381
);
362382
const verticalDirection = getStringDirection(dirs.map(dir => dir[0])[result.vertical.index]);
363383
const horizontalDirection = getStringDirection(dirs.map(dir => dir[1])[result.horizontal.index]);

‎packages/react-moveable/src/ables/snappable/snapBounds.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,10 @@ export function checkMoveableSnapBounds(
295295
moveable,
296296
poses.vertical,
297297
poses.horizontal,
298+
undefined,
299+
undefined,
300+
undefined,
301+
undefined,
298302
);
299303
const horizontalOffset = getSnapBound(
300304
horizontalBoundInfos[0],
@@ -334,7 +338,8 @@ export function checkSnapBounds(
334338
bounds: BoundType | undefined | false,
335339
posesX: number[],
336340
posesY: number[],
337-
snapThreshold: number,
341+
snapHorizontalThreshold: number,
342+
snapVerticalThreshold: number,
338343
multiples = [1, 1],
339344
): DirectionSnapType<Required<SnapBoundInfo>> {
340345
const {
@@ -351,7 +356,8 @@ export function checkSnapBounds(
351356
vertical: verticalSnapInfo,
352357
} = checkSnapPoses(
353358
guideines, posesX, posesY, [], [],
354-
snapThreshold,
359+
snapHorizontalThreshold,
360+
snapVerticalThreshold,
355361
multiples,
356362
);
357363

‎packages/react-moveable/src/types.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2608,9 +2608,21 @@ export interface SnappableOptions {
26082608
/**
26092609
/**
26102610
* Distance value that can snap to guidelines.
2611-
* @default 5
2611+
* Use `snapHorizontalThreshold` and `snapVerticalThreshold`
2612+
* @default 0
2613+
* @depreacted
26122614
*/
26132615
snapThreshold?: number;
2616+
/**
2617+
* Distance horizontal between horizontal value that can snap to guidelines.
2618+
* @default 5
2619+
*/
2620+
snapHorizontalThreshold?: number;
2621+
/**
2622+
* Distance Horizontal value that can snap to guidelines.
2623+
* @default 5
2624+
*/
2625+
snapVerticalThreshold?: number;
26142626
/**
26152627
* Distance value that render snapped guidelines.
26162628
* @default 1

‎packages/react-moveable/stories/controls/default.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,14 @@ export const DEFAULT_SNAPPABLE_CONTROLS = {
199199
description: makeLink("Snappable", "snapDirections"),
200200
defaultValue: { top: true, left: true, bottom: true, right: true },
201201
}),
202-
snapThreshold: makeArgType({
202+
snapHorizontalThreshold: makeArgType({
203203
type: "number",
204-
description: makeLink("Snappable", "snapThreshold"),
204+
description: makeLink("Snappable", "snapHorizontalThreshold"),
205+
defaultValue: 5,
206+
}),
207+
snapVerticalThreshold: makeArgType({
208+
type: "number",
209+
description: makeLink("Snappable", "snapVerticalThreshold"),
205210
defaultValue: 5,
206211
}),
207212
};

‎storybook/stories/controls/default.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,14 @@ export const DEFAULT_SNAPPABLE_CONTROLS = {
199199
description: makeLink("Snappable", "snapDirections"),
200200
defaultValue: { top: true, left: true, bottom: true, right: true },
201201
}),
202-
snapThreshold: makeArgType({
202+
snapHorizontalThreshold: makeArgType({
203203
type: "number",
204-
description: makeLink("Snappable", "snapThreshold"),
204+
description: makeLink("Snappable", "snapHorizontalThreshold"),
205+
defaultValue: 5,
206+
}),
207+
snapVerticalThreshold: makeArgType({
208+
type: "number",
209+
description: makeLink("Snappable", "snapVerticalThreshold"),
205210
defaultValue: 5,
206211
}),
207212
};

0 commit comments

Comments
 (0)