diff --git a/packages/react-moveable/src/ables/Clippable.tsx b/packages/react-moveable/src/ables/Clippable.tsx index 994fa859c..3588ee4bb 100644 --- a/packages/react-moveable/src/ables/Clippable.tsx +++ b/packages/react-moveable/src/ables/Clippable.tsx @@ -661,6 +661,7 @@ background: var(--bounds-color); guideXPoses, guideYPoses, 5, + 5, ); let snapOffsetY = horizontalSnapInfo.offset; let snapOffsetX = verticalSnapInfo.offset; @@ -767,6 +768,7 @@ background: var(--bounds-color); guideXPoses, guideYPoses, 1, + 1, ); if (originalDraggable) { diff --git a/packages/react-moveable/src/ables/Snappable.tsx b/packages/react-moveable/src/ables/Snappable.tsx index 169a7441d..2c64c96a8 100644 --- a/packages/react-moveable/src/ables/Snappable.tsx +++ b/packages/react-moveable/src/ables/Snappable.tsx @@ -758,6 +758,7 @@ color: #f55; poses, snapRenderInfo.direction, snapRenderThreshold, + snapRenderThreshold, ) ); } @@ -767,7 +768,7 @@ color: #f55; (rect as any).middle = (rect.top + rect.bottom) / 2; (rect as any).center = (rect.left + rect.right) / 2; } - snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold)); + snapInfos.push(checkSnaps(moveable, rect, snapRenderThreshold, snapRenderThreshold)); } if (hasExternalPoses) { if (snapRenderInfo.center) { @@ -776,7 +777,7 @@ color: #f55; (externalRect as any).center = (externalRect.left + externalRect.right) / 2; } - snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold)); + snapInfos.push(checkSnaps(moveable, externalRect, snapRenderThreshold, snapRenderThreshold)); } snapInfos.forEach((snapInfo) => { const { diff --git a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts index b46d3983f..67dd5db39 100644 --- a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts +++ b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts @@ -252,6 +252,7 @@ export function getGapGuidelines( }); return gapGuidelines; } + export function startGridGroupGuidelines( moveable: MoveableManagerInterface, clientLeft: number, diff --git a/packages/react-moveable/src/ables/snappable/snap.ts b/packages/react-moveable/src/ables/snappable/snap.ts index 227f7338e..3a0f55b7d 100644 --- a/packages/react-moveable/src/ables/snappable/snap.ts +++ b/packages/react-moveable/src/ables/snappable/snap.ts @@ -19,13 +19,19 @@ export function checkMoveableSnapPoses( posesY: number[], dirXs: string[] = [], dirYs: string[] = [], - customSnapThreshold?: number, + customSnapVerticalThreshold: number | undefined, + customSnapHorizontalThreshold: number | undefined, ) { const props = moveable.props; const snapThresholdMultiples = moveable.state.snapThresholdInfo?.multiples || [1, 1]; - const snapThreshold = selectValue( - customSnapThreshold, - props.snapThreshold, + const snapHorizontalThreshold = selectValue( + customSnapHorizontalThreshold, + props.snapHorizontalThreshold, + 5, + ); + const snapVerticalThreshold = selectValue( + customSnapVerticalThreshold, + props.snapVerticalThreshold, 5, ); @@ -35,7 +41,8 @@ export function checkMoveableSnapPoses( posesY, dirXs, dirYs, - snapThreshold, + snapHorizontalThreshold, + snapVerticalThreshold, snapThresholdMultiples, ); } @@ -46,12 +53,13 @@ export function checkSnapPoses( posesY: number[], dirXs: string[], dirYs: string[], - snapThreshold: number, + snapHorizontalThreshold: number, + snapVerticalThreshold: number, multiples: number[], ) { return { - vertical: checkSnap(guidelines, "vertical", posesX, snapThreshold * multiples[0], dirXs), - horizontal: checkSnap(guidelines, "horizontal", posesY, snapThreshold * multiples[1], dirYs), + vertical: checkSnap(guidelines, "vertical", posesX, snapVerticalThreshold * multiples[0], dirXs), + horizontal: checkSnap(guidelines, "horizontal", posesY, snapHorizontalThreshold * multiples[1], dirYs), }; } export function checkSnapKeepRatio( @@ -88,7 +96,15 @@ export function checkSnapKeepRatio( const { vertical: verticalSnapInfo, horizontal: horizontalSnapInfo, - } = checkMoveableSnapPoses(moveable, dx ? [endX] : [], dy ? [endY] : []); + } = checkMoveableSnapPoses( + moveable, + dx ? [endX] : [], + dy ? [endY] : [], + [], + [], + undefined, + undefined, + ); verticalSnapInfo.posInfos.filter(({ pos }) => { return isRight ? pos >= startX : pos <= startX; @@ -173,7 +189,8 @@ function getStringDirection(dir: number | string) { export function checkSnaps( moveable: MoveableManagerInterface, rect: SnapDirectionPoses, - customSnapThreshold?: number, + customSnapVerticalThreshold: number | undefined, + customSnapHorizontalThreshold: number | undefined, ): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } { const poses = splitSnapDirectionPoses(moveable.props.snapDirections, rect); @@ -183,7 +200,8 @@ export function checkSnaps( poses.horizontal, poses.verticalNames.map(name => getStringDirection(name)), poses.horizontalNames.map(name => getStringDirection(name)), - customSnapThreshold, + customSnapVerticalThreshold, + customSnapHorizontalThreshold, ); const horizontalDirection = getStringDirection(poses.horizontalNames[result.horizontal.index]); const verticalDirection = getStringDirection(poses.verticalNames[result.vertical.index]); @@ -300,7 +318,8 @@ export function getSnapInfosByDirection( // pos1 pos2 pos3 pos4 poses: number[][], snapDirection: number[], - snapThreshold = 1, + customSnapVerticalThreshold: number | undefined, + customSnapHorizontalThreshold: number | undefined, ): { vertical: SnapDirectionInfo; horizontal: SnapDirectionInfo } { let dirs: number[][] = []; @@ -357,7 +376,8 @@ export function getSnapInfosByDirection( xs, ys, dirs.map(dir => getStringDirection(dir[0])), dirs.map(dir => getStringDirection(dir[1])), - snapThreshold + customSnapVerticalThreshold, + customSnapHorizontalThreshold, ); const verticalDirection = getStringDirection(dirs.map(dir => dir[0])[result.vertical.index]); const horizontalDirection = getStringDirection(dirs.map(dir => dir[1])[result.horizontal.index]); diff --git a/packages/react-moveable/src/ables/snappable/snapBounds.ts b/packages/react-moveable/src/ables/snappable/snapBounds.ts index ce90292e7..773d82584 100644 --- a/packages/react-moveable/src/ables/snappable/snapBounds.ts +++ b/packages/react-moveable/src/ables/snappable/snapBounds.ts @@ -295,6 +295,10 @@ export function checkMoveableSnapBounds( moveable, poses.vertical, poses.horizontal, + undefined, + undefined, + undefined, + undefined, ); const horizontalOffset = getSnapBound( horizontalBoundInfos[0], @@ -334,7 +338,8 @@ export function checkSnapBounds( bounds: BoundType | undefined | false, posesX: number[], posesY: number[], - snapThreshold: number, + snapHorizontalThreshold: number, + snapVerticalThreshold: number, multiples = [1, 1], ): DirectionSnapType> { const { @@ -351,7 +356,8 @@ export function checkSnapBounds( vertical: verticalSnapInfo, } = checkSnapPoses( guideines, posesX, posesY, [], [], - snapThreshold, + snapHorizontalThreshold, + snapVerticalThreshold, multiples, ); diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts index 3c7cd7307..00d225063 100644 --- a/packages/react-moveable/src/types.ts +++ b/packages/react-moveable/src/types.ts @@ -2608,9 +2608,21 @@ export interface SnappableOptions { /** /** * Distance value that can snap to guidelines. - * @default 5 + * Use `snapHorizontalThreshold` and `snapVerticalThreshold` + * @default 0 + * @depreacted */ snapThreshold?: number; + /** + * Distance horizontal between horizontal value that can snap to guidelines. + * @default 5 + */ + snapHorizontalThreshold?: number; + /** + * Distance Horizontal value that can snap to guidelines. + * @default 5 + */ + snapVerticalThreshold?: number; /** * Distance value that render snapped guidelines. * @default 1 diff --git a/packages/react-moveable/stories/controls/default.ts b/packages/react-moveable/stories/controls/default.ts index 7fe5f765d..58fd6cf71 100644 --- a/packages/react-moveable/stories/controls/default.ts +++ b/packages/react-moveable/stories/controls/default.ts @@ -199,9 +199,14 @@ export const DEFAULT_SNAPPABLE_CONTROLS = { description: makeLink("Snappable", "snapDirections"), defaultValue: { top: true, left: true, bottom: true, right: true }, }), - snapThreshold: makeArgType({ + snapHorizontalThreshold: makeArgType({ type: "number", - description: makeLink("Snappable", "snapThreshold"), + description: makeLink("Snappable", "snapHorizontalThreshold"), + defaultValue: 5, + }), + snapVerticalThreshold: makeArgType({ + type: "number", + description: makeLink("Snappable", "snapVerticalThreshold"), defaultValue: 5, }), }; diff --git a/storybook/stories/controls/default.ts b/storybook/stories/controls/default.ts index 7fe5f765d..58fd6cf71 100644 --- a/storybook/stories/controls/default.ts +++ b/storybook/stories/controls/default.ts @@ -199,9 +199,14 @@ export const DEFAULT_SNAPPABLE_CONTROLS = { description: makeLink("Snappable", "snapDirections"), defaultValue: { top: true, left: true, bottom: true, right: true }, }), - snapThreshold: makeArgType({ + snapHorizontalThreshold: makeArgType({ type: "number", - description: makeLink("Snappable", "snapThreshold"), + description: makeLink("Snappable", "snapHorizontalThreshold"), + defaultValue: 5, + }), + snapVerticalThreshold: makeArgType({ + type: "number", + description: makeLink("Snappable", "snapVerticalThreshold"), defaultValue: 5, }), };