tldraw 3.15.0 → 3.16.0-next.c30b1b5e551a

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