PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[fix] snapping bug (#1819)

Browse source 
This PR fixes a crash that was happening with certain snapping
interactions. Closes https://github.com/tldraw/tldraw/issues/1815

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Create a series of equally spaced shapes like this:
 
<img width="870" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/416a42af-d8b0-4013-9d3c-341e374e96a4">

Drag the right group into position with the left group while snapping.

### Release Notes

- [fix] crash that could occur when snapping
This commit is contained in:
Steve Ruiz 2023-08-25 17:19:40 +02:00 committed by GitHub
parent fd71bd1b5f
commit 162f68b71a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/editor/src/lib/editor/managers/SnapManager.ts
View file

@ -129,11 +129,8 @@ function findAdjacentGaps(
shapeId: TLShapeId, shapeId: TLShapeId,
gapLength: number, gapLength: number,
direction: 'forward' | 'backward', direction: 'forward' | 'backward',
intersection: [number, number], intersection: [number, number]
depth: number
): Gap[] { ): Gap[] {
if (depth > 100) return []
// TODO: take advantage of the fact that gaps is sorted by starting position? // TODO: take advantage of the fact that gaps is sorted by starting position?
const matches = gaps.filter( const matches = gaps.filter(
(gap) => (gap) =>
@ -151,27 +148,26 @@ function findAdjacentGaps(
const nextNodes = new Set<TLShapeId>() const nextNodes = new Set<TLShapeId>()
for (const match of matches) { matches.forEach((match) => {
const node = direction === 'forward' ? match.endNode.id : match.startNode.id const node = direction === 'forward' ? match.endNode.id : match.startNode.id
if (!nextNodes.has(node)) { if (!nextNodes.has(node)) {
nextNodes.add(node) nextNodes.add(node)
matches.push( const foundGaps = findAdjacentGaps(
...findAdjacentGaps( gaps,
gaps, node,
node, gapLength,
gapLength, direction,
direction, rangeIntersection(
rangeIntersection( match.breadthIntersection[0],
match.breadthIntersection[0], match.breadthIntersection[1],
match.breadthIntersection[1], intersection[0],
intersection[0], intersection[1]
intersection[1] )!
)!,
depth + 1
)
) )
matches.push(...foundGaps)
} }
} })
return matches return matches
} }
@ -1135,8 +1131,7 @@ export class SnapManager {
startNode.id, startNode.id,
newGapsLength, newGapsLength,
'backward', 'backward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
{ {
startEdge, startEdge,
@ -1151,8 +1146,7 @@ export class SnapManager {
endNode.id, endNode.id,
newGapsLength, newGapsLength,
'forward', 'forward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
], ],
}) })
@ -1185,8 +1179,7 @@ export class SnapManager {
endNode.id, endNode.id,
length, length,
'forward', 'forward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
] ]
: [ : [
@ -1195,8 +1188,7 @@ export class SnapManager {
startNode.id, startNode.id,
length, length,
'backward', 'backward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
{ startEdge, endEdge }, { startEdge, endEdge },
{ {
@ -1242,8 +1234,7 @@ export class SnapManager {
startNode.id, startNode.id,
newGapsLength, newGapsLength,
'backward', 'backward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
{ {
startEdge, startEdge,
@ -1258,8 +1249,7 @@ export class SnapManager {
snap.gap.endNode.id, snap.gap.endNode.id,
newGapsLength, newGapsLength,
'forward', 'forward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
], ],
}) })
@ -1293,8 +1283,7 @@ export class SnapManager {
endNode.id, endNode.id,
length, length,
'forward', 'forward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
] ]
: [ : [
@ -1303,8 +1292,7 @@ export class SnapManager {
startNode.id, startNode.id,
length, length,
'backward', 'backward',
gapBreadthIntersection, gapBreadthIntersection
0
), ),
{ startEdge, endEdge }, { startEdge, endEdge },
{ {