tldraw 3.15.1 → 3.16.0-canary.03ed24d72068

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -149,13 +149,20 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
       "kind": "arc",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -315,13 +322,20 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
       "kind": "elbow",
       "labelColor": "black",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 0,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -221,7 +221,7 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
-						text,
+						richText: toRichText(text),
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
 						dash: getDash(element),

package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap

@@ -112,13 +112,20 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 146.32,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -241,13 +248,20 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 293.36,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",
@@ -389,13 +403,20 @@ exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
       "kind": "arc",
       "labelColor": "red",
       "labelPosition": 0.5,
+      "richText": {
+        "content": [
+          {
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      },
       "scale": 1,
       "size": "m",
       "start": {
         "x": 252.64,
         "y": 0,
       },
-      "text": "",
     },
     "rotation": 0,
     "type": "arrow",

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -405,7 +405,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 									...inCommon,
 									type: 'arrow',
 									props: {
-										text: v1Shape.label ?? '',
+										richText: toRichText(v1Shape.label ?? ''),
 										color: getV2Color(v1Shape.style.color),
 										labelColor: getV2Color(v1Shape.style.color),
 										size: getV2Size(v1Shape.style.size),
@@ -562,6 +562,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										y: point.y,
 									},
 									isPrecise: point.x !== 0.5 || point.y !== 0.5,
+									isCreatingShape: true,
 								})
 
 								if (change) {

package/src/test/SelectTool.test.ts

@@ -275,17 +275,27 @@ describe('PointingLabel', () => {
 				type: 'arrow',
 				x: 100,
 				y: 100,
-				props: { text: 'Test Label', end: { x: 100, y: 100 } },
+				props: {
+					richText: toRichText('Test Label'),
+					start: { x: 0, y: 0 },
+					end: { x: 100, y: 0 },
+				},
 			},
 		])
-		const shape = editor.getShape(ids.arrow1)
-		editor.pointerDown(150, 150, {
+		const shape = editor.getShape(ids.arrow1)!
+		// First select the shape so it's already selected
+		editor.select(shape.id)
+
+		// Click at the middle of the arrow where the label would be and drag to move the label
+		editor.pointerDown(150, 100, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(100, 100)
+		editor.pointerMove(160, 100)
 		editor.expectToBeIn('select.pointing_arrow_label')
 
+		// Continue dragging to actually move the label, then it should go to idle
+		editor.pointerMove(170, 100)
 		editor.pointerUp()
 		editor.expectToBeIn('select.idle')
 	})
@@ -297,16 +307,21 @@ describe('PointingLabel', () => {
 				type: 'arrow',
 				x: 100,
 				y: 100,
-				props: { text: 'Test Label', end: { x: 100, y: 100 } },
+				props: {
+					richText: toRichText('Test Label'),
+					start: { x: 0, y: 0 },
+					end: { x: 100, y: 0 },
+				},
 			},
 		])
 		const shape = editor.getShape(ids.arrow1)
 
-		editor.pointerDown(150, 150, {
+		// Click at the middle of the arrow where the label would be
+		editor.pointerDown(150, 100, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(100, 100)
+		editor.pointerMove(160, 100)
 		editor.expectToBeIn('select.pointing_arrow_label')
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
@@ -314,14 +329,25 @@ describe('PointingLabel', () => {
 
 	it('Doesnt go into pointing_arrow_label mode if not selecting the arrow shape', () => {
 		editor.createShapes<TLArrowShape>([
-			{ id: ids.arrow1, type: 'arrow', x: 100, y: 100, props: { text: 'Test Label' } },
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 100,
+				y: 100,
+				props: {
+					richText: toRichText(''), // Empty label
+					start: { x: 0, y: 0 },
+					end: { x: 100, y: 0 },
+				},
+			},
 		])
-		const shape = editor.getShape(ids.arrow1)
-		editor.pointerDown(0, 150, {
+		const shape = editor.getShape(ids.arrow1)!
+		// Click anywhere on the arrow - since there's no label, it should go to translating
+		editor.pointerDown(150, 100, {
 			target: 'shape',
 			shape,
 		})
-		editor.pointerMove(100, 100)
+		editor.pointerMove(155, 105)
 		editor.expectToBeIn('select.translating')
 
 		editor.pointerUp()

package/src/test/arrows-megabus.test.tsx

@@ -288,11 +288,13 @@ describe('When shapes are overlapping', () => {
 		editor.pointerDown(0, 50) // over nothing
 		editor.pointerMove(125, 50) // over box1 only
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(175, 50) // box2 is higher but box1 is filled?
+		editor.pointerMove(175, 50) // box2 is higher but box1 is filled, but we're on the edge ofd box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box2 is higher but box1 is filled, and we're inside of box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(225, 50) // box3 is higher
+		editor.pointerMove(225, 70) // box3 is higher
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(275, 50) // box4 is higher but box 3 is filled
+		editor.pointerMove(275, 70) // box4 is higher but box 3 is filled
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 	})
 
@@ -304,14 +306,18 @@ describe('When shapes are overlapping', () => {
 		])
 		editor.setCurrentTool('arrow')
 		editor.pointerDown(0, 50)
-		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2
+		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2, but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box1 is smaller even though it's behind box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(150, 90) // box3 is smaller and at the front
+		editor.pointerMove(150, 90) // box3 is smaller and at the front but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(160, 90) // box3 is smaller and at the front and we're in box1 and box 3 and box 2
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 		editor.sendToBack([ids.box3])
 		editor.pointerMove(149, 90) // box3 is smaller, even when at the back
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(175, 50)
+		editor.pointerMove(175, 60) // inside of box1 and box 2, but box 1 is smaller
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
 	})
 })

package/src/test/commands/deletePage.test.ts

@@ -1,4 +1,4 @@
-import { PageRecordType } from '@tldraw/editor'
+import { PageRecordType, createShapeId } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -76,4 +76,87 @@ describe('deletePage', () => {
 		expect(editor.getCurrentPageId()).not.toBe(currentPageId)
 		expect(editor.getCurrentPageId()).toBe(editor.getPages()[0].id)
 	})
+
+	it('deletes all shapes that belong to the deleted page', () => {
+		// Create a second page
+		const page2Id = PageRecordType.createId('page2')
+		editor.createPage({ name: 'Page 2', id: page2Id })
+
+		// Switch to the second page
+		editor.setCurrentPage(page2Id)
+
+		// Add some shapes to the second page
+		const shape1Id = createShapeId('shape1')
+		const shape2Id = createShapeId('shape2')
+		const shape3Id = createShapeId('shape3')
+
+		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
+		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
+		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
+
+		// Verify shapes were created and belong to the second page
+		expect(editor.getShape(shape1Id)).toBeDefined()
+		expect(editor.getShape(shape2Id)).toBeDefined()
+		expect(editor.getShape(shape3Id)).toBeDefined()
+		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
+
+		// Delete the second page
+		editor.deletePage(page2Id)
+
+		// Verify the page was deleted
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getPages()[0].id).not.toBe(page2Id)
+
+		// Verify all shapes that belonged to the deleted page were also deleted
+		expect(editor.getShape(shape1Id)).toBeUndefined()
+		expect(editor.getShape(shape2Id)).toBeUndefined()
+		expect(editor.getShape(shape3Id)).toBeUndefined()
+	})
+
+	it('deletes locked shapes that belong to the deleted page', () => {
+		// Create a second page
+		const page2Id = PageRecordType.createId('page2')
+		editor.createPage({ name: 'Page 2', id: page2Id })
+
+		// Switch to the second page
+		editor.setCurrentPage(page2Id)
+
+		// Add some shapes to the second page
+		const shape1Id = createShapeId('shape1')
+		const shape2Id = createShapeId('shape2')
+		const shape3Id = createShapeId('shape3')
+
+		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
+		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
+		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
+
+		// Lock some of the shapes
+		editor.updateShape({ id: shape1Id, type: 'text', isLocked: true })
+		editor.updateShape({ id: shape2Id, type: 'geo', isLocked: true })
+
+		// Verify shapes were created and belong to the second page
+		expect(editor.getShape(shape1Id)).toBeDefined()
+		expect(editor.getShape(shape2Id)).toBeDefined()
+		expect(editor.getShape(shape3Id)).toBeDefined()
+		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape1Id)?.isLocked).toBe(true)
+		expect(editor.getShape(shape2Id)?.isLocked).toBe(true)
+		expect(editor.getShape(shape3Id)?.isLocked).toBe(false)
+
+		// Delete the second page
+		editor.deletePage(page2Id)
+
+		// Verify the page was deleted
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getPages()[0].id).not.toBe(page2Id)
+
+		// Verify all shapes that belonged to the deleted page were also deleted, including locked ones
+		expect(editor.getShape(shape1Id)).toBeUndefined()
+		expect(editor.getShape(shape2Id)).toBeUndefined()
+		expect(editor.getShape(shape3Id)).toBeUndefined()
+	})
 })

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()
+		})
+	})
+})