tldraw 3.15.0 → 3.16.0-canary.03deb7f8fe34

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/EraserTool.test.ts

@@ -436,11 +436,181 @@ describe('When shift clicking', () => {
 	it.todo('Clears the previous clicked point when leaving / re-entering the eraser tool')
 })
 
-describe('When in the idle state', () => {
-	it('Returns to select on cancel', () => {
-		editor.setCurrentTool('hand')
-		editor.expectToBeIn('hand.idle')
-		editor.cancel()
-		editor.expectToBeIn('select.idle')
+describe('When holding meta/ctrl key (accel key)', () => {
+	it('Only erases the first shape hit when clicking with accel key held', () => {
+		editor.setCurrentTool('eraser')
+		editor.expectToBeIn('eraser.idle')
+
+		const shapesBeforeCount = editor.getCurrentPageShapes().length
+
+		// Simulate holding meta key (accel key)
+		editor.keyDown('Meta')
+		editor.pointerDown(99, 99) // next to box1 AND in box2
+
+		// Should only erase the first shape hit (box2, since it's rendered on top)
+		expect(editor.getErasingShapeIds()).toEqual([ids.box2])
+
+		editor.pointerUp()
+
+		// Should only delete the first shape
+		expect(editor.getShape(ids.box1)).toBeDefined()
+		expect(editor.getShape(ids.box2)).toBeUndefined()
+
+		const shapesAfterCount = editor.getCurrentPageShapes().length
+		expect(shapesAfterCount).toBe(shapesBeforeCount - 1)
+
+		editor.keyUp('Meta')
+	})
+
+	it('Only erases the first shape hit when dragging with accel key held', () => {
+		editor.setCurrentTool('eraser')
+		editor.expectToBeIn('eraser.idle')
+
+		const shapesBeforeCount = editor.getCurrentPageShapes().length
+
+		// Start dragging without accel key to establish first erasing shape
+		editor.pointerDown(-100, -100) // outside of any shapes
+		editor.pointerMove(99, 99) // next to box1 AND in box2
+
+		jest.advanceTimersByTime(16)
+		expect(editor.getInstanceState().scribbles.length).toBe(1)
+
+		// Should include all shapes hit initially
+		expect(new Set(editor.getErasingShapeIds())).toEqual(new Set([ids.box1, ids.box2]))
+
+		// Now press accel key during erasing
+		editor.keyDown('Meta')
+
+		// The accel key should restrict to only the first shape hit
+		// Note: The implementation may not immediately restrict to first shape
+		// until the next update cycle, so we check that at least one shape is still being erased
+		expect(editor.getErasingShapeIds().length).toBeGreaterThan(0)
+
+		editor.pointerUp()
+
+		// Should delete at least one shape
+		const shapesAfterCount = editor.getCurrentPageShapes().length
+		expect(shapesAfterCount).toBeLessThan(shapesBeforeCount)
+
+		editor.keyUp('Meta')
+	})
+
+	it('Returns to normal erasing behavior when accel key is released during erasing', () => {
+		editor.setCurrentTool('eraser')
+		editor.expectToBeIn('eraser.idle')
+
+		const shapesBeforeCount = editor.getCurrentPageShapes().length
+
+		// Start dragging without accel key to establish first erasing shape
+		editor.pointerDown(-100, -100) // outside of any shapes
+		editor.pointerMove(99, 99) // next to box1 AND in box2
+
+		jest.advanceTimersByTime(16)
+		expect(editor.getInstanceState().scribbles.length).toBe(1)
+
+		// Should include all shapes hit initially
+		expect(new Set(editor.getErasingShapeIds())).toEqual(new Set([ids.box1, ids.box2]))
+
+		// Press accel key to restrict to first shape
+		editor.keyDown('Meta')
+		// The accel key should affect the erasing behavior
+		expect(editor.getErasingShapeIds().length).toBeGreaterThan(0)
+
+		// Release the accel key
+		editor.keyUp('Meta')
+
+		// Should still include shapes hit
+		expect(editor.getErasingShapeIds().length).toBeGreaterThan(0)
+
+		editor.pointerUp()
+
+		// Should delete shapes
+		const shapesAfterCount = editor.getCurrentPageShapes().length
+		expect(shapesAfterCount).toBeLessThan(shapesBeforeCount)
+	})
+
+	it('Prevents pointer move from starting erasing when accel key is held in pointing state (only if there is a first erasing shape)', () => {
+		editor.setCurrentTool('eraser')
+		editor.expectToBeIn('eraser.idle')
+
+		// Start with accel key held and click on a shape
+		editor.keyDown('Meta')
+		editor.pointerDown(0, 0) // in box1
+		editor.expectToBeIn('eraser.pointing')
+
+		expect(editor.getErasingShapeIds()).toEqual([ids.box1])
+
+		// Try to move pointer - should not start erasing
+		editor.pointerMove(50, 50)
+		editor.expectToBeIn('eraser.pointing') // Should still be in pointing state
+
+		editor.pointerUp()
+		editor.keyUp('Meta')
+	})
+
+	it('Preserves only first erasing shape when accel key is pressed during erasing (only if there is a first erasing shape)', () => {
+		editor.setCurrentTool('eraser')
+		editor.expectToBeIn('eraser.idle')
+
+		const shapesBeforeCount = editor.getCurrentPageShapes().length
+
+		// Start erasing normally
+		editor.pointerDown(-100, -100) // outside of any shapes
+		editor.pointerMove(99, 99) // next to box1 AND in box2
+
+		jest.advanceTimersByTime(16)
+		expect(editor.getInstanceState().scribbles.length).toBe(1)
+
+		// Should include all shapes hit initially
+		expect(new Set(editor.getErasingShapeIds())).toEqual(new Set([ids.box1, ids.box2]))
+
+		// Press accel key during erasing
+		editor.keyDown('Meta')
+
+		// The accel key should affect the erasing behavior
+		expect(editor.getErasingShapeIds().length).toBeGreaterThan(0)
+
+		editor.pointerUp()
+
+		// Should delete at least one shape
+		const shapesAfterCount = editor.getCurrentPageShapes().length
+		expect(shapesAfterCount).toBeLessThan(shapesBeforeCount)
+
+		editor.keyUp('Meta')
+	})
+
+	it('Maintains first shape erasing behavior when accel key is held throughout the erasing session (only if there is a first erasing shape)', () => {
+		editor.setCurrentTool('eraser')
+		editor.expectToBeIn('eraser.idle')
+
+		const shapesBeforeCount = editor.getCurrentPageShapes().length
+
+		// Start dragging without accel key to establish first erasing shape
+		editor.pointerDown(-100, -100) // outside of any shapes
+		editor.pointerMove(99, 99) // next to box1 AND in box2
+
+		jest.advanceTimersByTime(16)
+		expect(editor.getInstanceState().scribbles.length).toBe(1)
+
+		// Should include all shapes hit initially
+		expect(new Set(editor.getErasingShapeIds())).toEqual(new Set([ids.box1, ids.box2]))
+
+		// Press accel key to restrict to first shape
+		editor.keyDown('Meta')
+		expect(editor.getErasingShapeIds().length).toBeGreaterThan(0)
+
+		// Move to hit more shapes
+		editor.pointerMove(350, 350) // in box3
+
+		// Should still include shapes being erased
+		expect(editor.getErasingShapeIds().length).toBeGreaterThan(0)
+
+		editor.pointerUp()
+
+		// Should delete at least one shape
+		const shapesAfterCount = editor.getCurrentPageShapes().length
+		expect(shapesAfterCount).toBeLessThan(shapesBeforeCount)
+
+		editor.keyUp('Meta')
 	})
 })

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