tldraw 3.16.0-next.c30b1b5e551a → 3.16.0-next.e57e478c23e0

package/src/test/frames.test.ts

@@ -8,13 +8,14 @@ import {
 	createShapeId,
 	toRichText,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
 import { DEFAULT_FRAME_PADDING, fitFrameToContent, removeFrame } from '../lib/utils/frames/frames'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -335,7 +336,7 @@ describe('frame shapes', () => {
 		// move to the center of the frame
 		editor.pointerMove(100, 100)
 
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 
 		// Expect the shape to be inside the frame
 		expect(editor.getOnlySelectedShape()!.id).toBe(ids.boxA)
@@ -343,13 +344,13 @@ describe('frame shapes', () => {
 
 		// Move out of the frame
 		editor.pointerMove(275, 275)
-		jest.advanceTimersByTime(250)
+		vi.advanceTimersByTime(250)
 
 		expect(editor.getOnlySelectedShape()!.parentId).toBe(editor.getCurrentPageId())
 
 		// Move back into the frame
 		editor.pointerMove(150, 150)
-		jest.advanceTimersByTime(250)
+		vi.advanceTimersByTime(250)
 
 		// Expect the shape to be inside the frame again
 		expect(editor.getOnlySelectedShape()!.parentId).toBe(frameId)
@@ -384,7 +385,7 @@ describe('frame shapes', () => {
 
 		editor.setCurrentTool('select').select(box1.id).pointerDown(127, 127).pointerMove(132, 127)
 
-		jest.advanceTimersByTime(250)
+		vi.advanceTimersByTime(250)
 
 		expect(editor.getOnlySelectedShape()!.id).toBe(box1.id)
 		if (editor.getShape(box1)?.parentId !== frame.id) {
@@ -403,14 +404,14 @@ describe('frame shapes', () => {
 		editor.pointerMove(175, 175)
 		expect(editor.getOnlySelectedShape()!.parentId).toBe(frame.id)
 
-		jest.advanceTimersByTime(250)
+		vi.advanceTimersByTime(250)
 		expect(editor.getOnlySelectedShape()!.parentId).toBe(frame.id)
 
 		// Let's try that
 		editor.pointerMove(1750, 1750)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(175, 175)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		// yay
 		expect(editor.getHintingShapeIds()).toHaveLength(1)
@@ -958,7 +959,7 @@ describe('When dragging a shape inside a group inside a frame', () => {
 		editor.pointerMove(150, 150).pointerDown(150, 150).pointerMove(140, 140)
 
 		expect(editor.getOnlySelectedShapeId()).toBe(ids.box1)
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 
 		expect(editor.getShape(ids.box1)!.parentId).toBe(ids.group1)
 	})
@@ -973,7 +974,7 @@ it('Drags into a frame', () => {
 	editor.pointerDown(550, 550)
 	editor.pointerMove(250, 250)
 
-	jest.advanceTimersByTime(200)
+	vi.advanceTimersByTime(200)
 
 	expect(editor.getShape(box1)!.parentId).toBe(frame.id)
 })
@@ -992,7 +993,7 @@ it('Allows dragging grouped shapes into frames if every shape in the group is in
 	editor.pointerDown(1100, 1100)
 	editor.pointerMove(250, 250)
 
-	jest.advanceTimersByTime(250)
+	vi.advanceTimersByTime(250)
 
 	expect(editor.getHintingShapeIds()).toMatchObject([frame.id])
 
@@ -1068,7 +1069,7 @@ describe('When dragging a shape', () => {
 		editor.pointerMove(30, 50)
 		editor.pointerUp(30, 50)
 		const parent = editor.getShape(rectId)?.parentId
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(parent).toBe(frameId)
 	})
 
@@ -1185,7 +1186,7 @@ describe('Unparenting behavior', () => {
 	// 	expect(editor.getShape(rect.id)!.parentId).toBe(frame.id)
 	// 	editor.pointerDown(90, 50)
 	// 	editor.pointerMove(110, 50)
-	// 	jest.advanceTimersByTime(200)
+	// 	vi.advanceTimersByTime(200)
 	// 	expect(editor.getShape(rect.id)!.parentId).toBe(editor.getCurrentPageId())
 	// 	editor.pointerUp(110, 50)
 	// 	expect(editor.getShape(rect.id)!.parentId).toBe(editor.getCurrentPageId())
@@ -1199,7 +1200,7 @@ describe('Unparenting behavior', () => {
 		expect(editor.getShape(rect.id)!.parentId).toBe(frame.id)
 		editor.pointerDown(90, 50)
 		editor.pointerMove(110, 50)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(editor.getShape(rect.id)!.parentId).toBe(editor.getCurrentPageId())
 		editor.pointerUp(110, 50)
 		expect(editor.getShape(rect.id)!.parentId).toBe(editor.getCurrentPageId())
@@ -1299,7 +1300,7 @@ describe('Unparenting behavior', () => {
 		expect(editor.getShape(triangle.id)!.parentId).toBe(frame.id)
 
 		// But after a delay, the triangle is reparented because it's not overlapping
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(editor.getShape(triangle.id)!.parentId).toBe(editor.getCurrentPageId())
 
 		editor.pointerMove(50, 50)
@@ -1308,7 +1309,7 @@ describe('Unparenting behavior', () => {
 		expect(editor.getShape(triangle.id)!.parentId).toBe(editor.getCurrentPageId())
 
 		// But after a delay, the triangle is reparented because it's overlapping
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(editor.getShape(triangle.id)!.parentId).toBe(frame.id)
 	})
 
@@ -1348,12 +1349,12 @@ describe('Unparenting behavior', () => {
 			expect(editor.isIn('select.translating')).toBe(true)
 
 			// Wait for reparenting to happen
-			jest.advanceTimersByTime(250)
+			vi.advanceTimersByTime(250)
 			expect(editor.getShape(largeRect.id)!.parentId).toBe(frameId)
 
 			// The large rectangle should now be reparented to the frame, even though the frame covers it
 			editor.pointerUp(250, 250)
-			jest.advanceTimersByTime(250)
+			vi.advanceTimersByTime(250)
 		}
 
 		// When the shape has no fill and an empty label, it should fall out of the frame
@@ -1503,7 +1504,7 @@ describe('When dragging groups or shapes within a group', () => {
 		editor.pointerDown(1100, 1100)
 		editor.pointerMove(250, 250)
 
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShape(group)!.parentId).toBe(frame.id)
 	})
@@ -1526,14 +1527,14 @@ describe('When dragging groups or shapes within a group', () => {
 		editor.select(rect1ID)
 		editor.pointerDown(15, 15)
 		editor.pointerMove(100, 100)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShape(rect1ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(rect2ID)?.parentId).toBe(group.id)
 		expect(group.parentId).toBe(frame.id)
 
 		editor.pointerUp(100, 100)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShape(rect1ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(rect2ID)?.parentId).toBe(group.id)
@@ -1558,7 +1559,7 @@ describe('When dragging groups or shapes within a group', () => {
 		editor.pointerDown(15, 15)
 		editor.pointerMove(200, 200)
 
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(editor.getShape(rect1ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(rect2ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(group.id)?.parentId).toBe(editor.getCurrentPageId())
@@ -1587,7 +1588,7 @@ describe('When dragging groups or shapes within a group', () => {
 		editor.pointerDown(15, 15)
 		editor.pointerMove(200, 200)
 
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(editor.getShape(rect1ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(rect2ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(group.id)?.parentId).toBe(editor.getCurrentPageId())
@@ -1638,7 +1639,7 @@ describe('When dragging groups or shapes within a group', () => {
 		editor.pointerDown(215, 215)
 		editor.pointerMove(15, 15)
 
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		expect(editor.getShape(rect1ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(rect2ID)?.parentId).toBe(group.id)
 		expect(editor.getShape(group.id)?.parentId).toBe(frameID)

package/src/test/getCulledShapes.test.tsx

@@ -1,4 +1,5 @@
 import { Box, TLShapeId, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -28,13 +29,13 @@ it('lists shapes in viewport', () => {
 
 	// Move the camera 201 pixels to the right and 201 pixels down
 	editor.pan({ x: -201, y: -201 })
-	jest.advanceTimersByTime(500)
+	vi.advanceTimersByTime(500)
 
 	// A is now outside of the viewport, like D
 	expect(editor.getCulledShapes()).toStrictEqual(new Set([ids.A, ids.D]))
 
 	editor.pan({ x: -900, y: -900 })
-	jest.advanceTimersByTime(500)
+	vi.advanceTimersByTime(500)
 	// Now all shapes are outside of the viewport, except for D (which is clipped)
 	expect(editor.getCulledShapes()).toStrictEqual(new Set([ids.A, ids.B, ids.C]))
 

package/src/test/groups.test.tsx

@@ -1070,7 +1070,7 @@ describe('the select tool', () => {
 		// that we're doing hit testing manually—we'll catch that it was inside a shape
 
 		// editor.keyUp('Shift')
-		// jest.advanceTimersByTime(200)
+		// vi.advanceTimersByTime(200)
 
 		// expect(editor.selectedShapeIds.includes(ids.boxA)).toBe(false)
 		// expect(editor.selectedShapeIds.includes(ids.boxB)).toBe(true)

package/src/test/handleDeepLink.test.tsx

@@ -1,8 +1,9 @@
 import { PageRecordType, TLDeepLink, createDeepLinkString, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 let editor: TestEditor
 

package/src/test/inner-outer-margin.test.ts

@@ -0,0 +1,315 @@
+import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { getArrowBindings } from '../lib/shapes/arrow/shared'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	solidShape: createShapeId('solidShape'),
+	hollowShape: createShapeId('hollowShape'),
+	arrow: createShapeId('arrow'),
+}
+
+const _arrow = () => editor.getOnlySelectedShape() as TLArrowShape
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('Inner/Outer Margin Shape Detection', () => {
+	describe('getShapeAtPoint with inner/outer margins', () => {
+		beforeEach(() => {
+			// Create a solid filled shape
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow shape on top (same position, smaller size)
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+		})
+
+		it('should support inner/outer margin options', () => {
+			// Test that the new margin options are accepted
+			const point = { x: 150, y: 150 }
+
+			// Test with array margin [innerMargin, outerMargin]
+			const arrayMarginHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 4],
+			})
+			expect(arrayMarginHit).toBeDefined()
+
+			// Test with insideMargin option
+			const insideMarginHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+			})
+			expect(insideMarginHit).toBeDefined()
+
+			// Test with single number margin (should use same for both)
+			const singleMarginHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: 8,
+			})
+			expect(singleMarginHit).toBeDefined()
+		})
+
+		it('should respect hitInside option for hollow shapes', () => {
+			const point = { x: 150, y: 150 }
+
+			// Without hitInside, should not hit hollow shape
+			const noHitInsideHit = editor.getShapeAtPoint(point, {
+				margin: [8, 0],
+			})
+			expect(noHitInsideHit?.id).toBe(ids.solidShape)
+
+			// With hitInside, should be able to hit hollow shape
+			const withHitInsideHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 0],
+			})
+			expect(withHitInsideHit).toBeDefined()
+		})
+
+		it('should handle edge cases correctly', () => {
+			// Test point exactly on the edge of hollow shape
+			const edgePoint = { x: 125, y: 150 }
+
+			const edgeHit = editor.getShapeAtPoint(edgePoint, {
+				hitInside: true,
+				margin: [8, 8],
+			})
+			expect(edgeHit).toBeDefined()
+		})
+	})
+
+	describe('Arrow binding with inner/outer margins', () => {
+		beforeEach(() => {
+			// Create a solid filled shape
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow shape on top (same position, smaller size)
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+		})
+
+		it('should create arrow bindings with inner/outer margin support', () => {
+			editor.setCurrentTool('arrow')
+
+			// Start arrow outside both shapes
+			editor.pointerDown(50, 150)
+
+			// Move to center of hollow shape (which overlaps solid shape)
+			editor.pointerMove(150, 150)
+			editor.pointerUp()
+
+			const createdArrow = editor
+				.getCurrentPageShapes()
+				.find((s) => s.type === 'arrow') as TLArrowShape
+			expect(createdArrow).toBeDefined()
+
+			const arrowBindings = getArrowBindings(editor, createdArrow)
+			expect(arrowBindings.end).toBeDefined()
+			// The binding should be to one of the shapes
+			expect([ids.solidShape, ids.hollowShape]).toContain(arrowBindings.end?.toId)
+		})
+
+		it('should bind to solid shape when no hollow shape is present', () => {
+			// Remove the hollow shape
+			editor.deleteShape(ids.hollowShape)
+
+			editor.setCurrentTool('arrow')
+
+			// Start arrow outside shape
+			editor.pointerDown(50, 150)
+
+			// Move to center of solid shape
+			editor.pointerMove(150, 150)
+			editor.pointerUp()
+
+			const createdArrow = editor
+				.getCurrentPageShapes()
+				.find((s) => s.type === 'arrow') as TLArrowShape
+			expect(createdArrow).toBeDefined()
+
+			const arrowBindings = getArrowBindings(editor, createdArrow)
+			expect(arrowBindings.end).toBeDefined()
+			expect(arrowBindings.end?.toId).toBe(ids.solidShape)
+		})
+	})
+
+	describe('Complex overlapping scenarios', () => {
+		it('should handle multiple overlapping shapes correctly', () => {
+			// Create multiple shapes with different fill states
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Create another hollow shape
+			const hollowShape2 = createShapeId('hollowShape2')
+			editor.createShape({
+				id: hollowShape2,
+				type: 'geo',
+				x: 140,
+				y: 140,
+				props: {
+					w: 30,
+					h: 30,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Test point in the innermost hollow shape
+			const point = { x: 155, y: 155 }
+
+			const hit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 8],
+			})
+			expect(hit).toBeDefined()
+			// Should hit one of the shapes
+			expect([ids.solidShape, ids.hollowShape, hollowShape2]).toContain(hit?.id)
+		})
+
+		it('should handle shapes with different geometries', () => {
+			// Create a solid rectangle
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow circle on top
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					geo: 'ellipse',
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Test point inside the circle
+			const point = { x: 150, y: 150 }
+
+			const hit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 8],
+			})
+			expect(hit).toBeDefined()
+			// Should hit one of the shapes
+			expect([ids.solidShape, ids.hollowShape]).toContain(hit?.id)
+		})
+	})
+
+	describe('Regression tests for the original bug', () => {
+		it('should support binding to hollow shapes when overlapping solid shapes', () => {
+			// This test verifies that the infrastructure exists for the bug fix
+			// Create a solid shape
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow shape on top
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Test that we can detect both shapes
+			const point = { x: 150, y: 150 }
+
+			// Should be able to hit the solid shape without hitInside
+			const solidHit = editor.getShapeAtPoint(point)
+			expect(solidHit?.id).toBe(ids.solidShape)
+
+			// Should be able to hit the hollow shape with hitInside and inner margin
+			const hollowHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 0],
+			})
+			expect(hollowHit).toBeDefined()
+		})
+	})
+})

package/src/test/maxShapes.test.ts

@@ -1,4 +1,5 @@
 import { createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -82,7 +83,7 @@ describe('Maximum shapes behavior', () => {
 			})
 
 			it('should emit max-shapes event when limit is reached', () => {
-				const maxShapesHandler = jest.fn()
+				const maxShapesHandler = vi.fn()
 				editor.addListener('max-shapes', maxShapesHandler)
 
 				// Set up the note tool
@@ -282,7 +283,7 @@ describe('Maximum shapes behavior', () => {
 			expect(editor.getCurrentPageShapeIds().size).toBe(5)
 
 			// Try to create one more shape
-			const maxShapesHandler = jest.fn()
+			const maxShapesHandler = vi.fn()
 			editor.addListener('max-shapes', maxShapesHandler)
 
 			const extraShapeId = createShapeId('extra-shape')

package/src/test/modifiers.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -6,14 +7,14 @@ beforeEach(() => {
 	editor = new TestEditor()
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 it('Shift Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { shiftKey: true })
 	editor.pointerMove(100, 100, { shiftKey: false })
 	expect(editor.inputs.shiftKey).toBe(true)
-	jest.advanceTimersByTime(200)
+	vi.advanceTimersByTime(200)
 	expect(editor.inputs.shiftKey).toBe(false)
 })
 
@@ -22,7 +23,7 @@ it('Alt Key', () => {
 	editor.pointerMove(100, 100, { altKey: true })
 	editor.pointerMove(100, 100, { altKey: false })
 	expect(editor.inputs.altKey).toBe(true)
-	jest.advanceTimersByTime(200)
+	vi.advanceTimersByTime(200)
 	expect(editor.inputs.altKey).toBe(false)
 })
 
@@ -31,6 +32,6 @@ it('Ctrl Key', () => {
 	editor.pointerMove(100, 100, { ctrlKey: true })
 	editor.pointerMove(100, 100, { ctrlKey: false })
 	expect(editor.inputs.ctrlKey).toBe(true)
-	jest.advanceTimersByTime(200)
+	vi.advanceTimersByTime(200)
 	expect(editor.inputs.ctrlKey).toBe(false)
 })