tldraw 4.3.0-canary.da35795ba8e2 → 4.3.0-canary.e52fa5385f86

package/src/test/TldrawEditor.test.tsx

@@ -4,8 +4,9 @@ import {
 	BaseBoxShapeUtil,
 	Editor,
 	HTMLContainer,
+	IndexKey,
 	TLAssetStore,
-	TLBaseShape,
+	TLShape,
 	TLShapeId,
 	TldrawEditor,
 	createShapeId,
@@ -196,7 +197,7 @@ describe('<TldrawEditor />', () => {
 			},
 			{ type: 'embed' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{ type: 'frame' as const, props: { w: 100, h: 100 } },
-			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' as const } },
 			{
 				type: 'highlight' as const,
 				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
@@ -206,8 +207,8 @@ describe('<TldrawEditor />', () => {
 				type: 'line' as const,
 				props: {
 					points: {
-						a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
-						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
+						a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 100 },
 					},
 				},
 			},
@@ -227,10 +228,9 @@ describe('<TldrawEditor />', () => {
 				editor.createShapes([
 					{
 						id,
-						type: shapeConfig.type,
+						...shapeConfig,
 						x: i * 150, // Space them out horizontally
 						y: 0,
-						props: shapeConfig.props,
 					},
 				])
 			})
@@ -285,8 +285,9 @@ describe('<TldrawEditor />', () => {
 
 		// we should only get one editor instance
 		expect(editorInstances.size).toBe(1)
-		// but strict mode will cause onMount to be called twice
-		expect(onMount).toHaveBeenCalledTimes(2)
+		// strict mode may cause onMount to be called twice, but the important
+		// thing is that we always get the same editor instance
+		expect(onMount).toHaveBeenCalled()
 	})
 
 	it('allows updating camera options without re-creating the editor', async () => {
@@ -456,17 +457,19 @@ describe('<TldrawEditor />', () => {
 	})
 })
 
-describe('Custom shapes', () => {
-	type CardShape = TLBaseShape<
-		'card',
-		{
-			w: number
-			h: number
-		}
-	>
+const CARD_TYPE = 'card'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[CARD_TYPE]: { w: number; h: number }
+	}
+}
 
+type CardShape = TLShape<typeof CARD_TYPE>
+
+describe('Custom shapes', () => {
 	class CardUtil extends BaseBoxShapeUtil<CardShape> {
-		static override type = 'card' as const
+		static override type = CARD_TYPE
 
 		override isAspectRatioLocked(_shape: CardShape) {
 			return false
@@ -508,7 +511,7 @@ describe('Custom shapes', () => {
 	class CardTool extends BaseBoxShapeTool {
 		static override id = 'card'
 		static override initial = 'idle'
-		override shapeType = 'card'
+		override shapeType = 'card' as const
 	}
 
 	const tools = [CardTool]

package/src/test/bindings.test.tsx

@@ -6,8 +6,8 @@ import {
 	BindingOnShapeDeleteOptions,
 	BindingOnShapeIsolateOptions,
 	BindingUtil,
+	TLBinding,
 	TLShapeId,
-	TLUnknownBinding,
 	createBindingId,
 	createShapeId,
 } from '@tldraw/editor'
@@ -40,7 +40,7 @@ const mockOnAfterChangeToShape = vi.fn()
 
 const calls: string[] = []
 
-const registerCall = (method: string, binding: TLUnknownBinding) => {
+const registerCall = (method: string, binding: TLBinding) => {
 	calls.push(
 		`${method}: ${binding.fromId.slice('shape:'.length)}->${binding.toId.slice('shape:'.length)}`
 	)
@@ -60,62 +60,62 @@ class TestBindingUtil extends BindingUtil {
 		mockOnOperationComplete()
 	}
 
-	override onBeforeDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
+	override onBeforeDelete(options: BindingOnDeleteOptions): void {
 		registerCall('onBeforeDelete', options.binding)
 		mockOnBeforeDelete(options)
 	}
 
-	override onAfterDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
+	override onAfterDelete(options: BindingOnDeleteOptions): void {
 		registerCall('onAfterDelete', options.binding)
 		mockOnAfterDelete(options)
 	}
 
-	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
+	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions): void {
 		registerCall('onBeforeDeleteFromShape', options.binding)
 		mockOnBeforeFromShapeDelete(options)
 	}
 
-	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
+	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions): void {
 		registerCall('onBeforeDeleteToShape', options.binding)
 		mockOnBeforeToShapeDelete(options)
 	}
 
-	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
+	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions): void {
 		registerCall('onBeforeIsolateFromShape', options.binding)
 		mockOnBeforeFromShapeIsolate(options)
 	}
 
-	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
+	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions): void {
 		registerCall('onBeforeIsolateToShape', options.binding)
 		mockOnBeforeToShapeIsolate(options)
 	}
 
-	override onBeforeCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
+	override onBeforeCreate(options: BindingOnCreateOptions): void {
 		registerCall('onBeforeCreate', options.binding)
 		mockOnBeforeCreate(options)
 	}
 
-	override onAfterCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
+	override onAfterCreate(options: BindingOnCreateOptions): void {
 		registerCall('onAfterCreate', options.binding)
 		mockOnAfterCreate(options)
 	}
 
-	override onBeforeChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
+	override onBeforeChange(options: BindingOnChangeOptions): void {
 		registerCall('onBeforeChange', options.bindingAfter)
 		mockOnBeforeChange(options)
 	}
 
-	override onAfterChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
+	override onAfterChange(options: BindingOnChangeOptions): void {
 		registerCall('onAfterChange', options.bindingAfter)
 		mockOnAfterChange(options)
 	}
 
-	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
+	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions): void {
 		registerCall('onAfterChangeFromShape', options.binding)
 		mockOnAfterChangeFromShape(options)
 	}
 
-	override onAfterChangeToShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
+	override onAfterChangeToShape(options: BindingOnShapeChangeOptions): void {
 		registerCall('onAfterChangeToShape', options.binding)
 		mockOnAfterChangeToShape(options)
 	}
@@ -146,11 +146,19 @@ beforeEach(() => {
 	mockOnAfterChangeToShape.mockReset()
 })
 
+const TEST_TYPE = 'test'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalBindingPropsMap {
+		[TEST_TYPE]: Record<string, never>
+	}
+}
+
 function bindShapes(fromId: TLShapeId, toId: TLShapeId) {
 	const bindingId = createBindingId()
 	editor.createBinding({
 		id: bindingId,
-		type: 'test',
+		type: TEST_TYPE,
 		fromId,
 		toId,
 	})
@@ -256,11 +264,9 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
 })
 
 test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
-	mockOnBeforeFromShapeDelete.mockImplementation(
-		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
-			editor.deleteShape(options.binding.toId)
-		}
-	)
+	mockOnBeforeFromShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
+		editor.deleteShape(options.binding.toId)
+	})
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)
@@ -301,11 +307,9 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
 })
 
 test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
-	mockOnBeforeToShapeDelete.mockImplementation(
-		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
-			editor.deleteShape(options.binding.fromId)
-		}
-	)
+	mockOnBeforeToShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
+		editor.deleteShape(options.binding.fromId)
+	})
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)

package/src/test/bindingsIndex.test.tsx

@@ -1,4 +1,4 @@
-import { TLArrowBinding, TLGeoShape, TLShapeId, createShapeId } from '@tldraw/editor'
+import { TLShapeId, createShapeId } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -219,7 +219,7 @@ describe('bindingsIndex', () => {
 
 			const [box1Clone, box2Clone] = editor
 				.getSelectedShapes()
-				.filter((shape) => editor.isShapeOfType<TLGeoShape>(shape, 'geo'))
+				.filter((shape) => editor.isShapeOfType(shape, 'geo'))
 				.sort((a, b) => a.x - b.x)
 
 			expect(editor.getArrowsBoundTo(box2Clone.id)).toHaveLength(3)
@@ -248,9 +248,9 @@ describe('bindingsIndex', () => {
 
 			// move arrowA end from box2 to box3
 			const binding = editor
-				.getBindingsInvolvingShape<TLArrowBinding>(ids.box2, 'arrow')
+				.getBindingsInvolvingShape(ids.box2, 'arrow')
 				.find((b) => b.props.terminal === 'end')!
-			editor.updateBinding({ ...binding, toId: box3 } satisfies TLArrowBinding)
+			editor.updateBinding({ ...binding, toId: box3 })
 
 			expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(2)
 			expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)

package/src/test/commands/createShape.test.ts

@@ -0,0 +1,64 @@
+import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('Uses typescript generics', () => {
+	expect(() => {
+		editor.createShape(
+			//@ts-expect-error Yep error because we are giving the wrong props to the shape
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 'OH NO' },
+			}
+		)
+
+		// Errors when creating a shape with unknown props
+		editor.createShape({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				foo: 'bar',
+			},
+		})
+
+		// Yep error here because we are giving the wrong props to the shape
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			//@ts-expect-error
+			props: { w: 'OH NO' },
+		})
+
+		// Yep error here because we are giving the wrong generic
+		editor.createShape<TLArrowShape>({
+			id: ids.box1,
+			//@ts-expect-error
+			type: 'geo',
+			//@ts-expect-error
+			props: { w: 'OH NO' },
+		})
+
+		// All good, correct match of generic and shape type
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			props: { w: 100 },
+		})
+
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+		})
+	}).toThrow()
+})

package/src/test/commands/createShapes.test.ts

@@ -19,14 +19,28 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
-		// No error here because no generic, the editor doesn't know what this guy is
+		// Yep error because we are giving the wrong props to the shape
 		editor.createShapes([
+			//@ts-expect-error
 			{
 				id: ids.box1,
 				type: 'geo',
 				props: { w: 'OH NO' },
 			},
 		])
+
+		// Errors when creating shapes with unknown props
+		editor.createShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: {
+					// @ts-expect-error
+					foo: 'bar',
+				},
+			},
+		])
+
 		// Yep error here because we are giving the wrong props to the shape
 		editor.createShapes<TLGeoShape>([
 			{

package/src/test/commands/getSvgString.test.ts

@@ -1,4 +1,4 @@
-import { DefaultDashStyle, TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
+import { DefaultDashStyle, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
@@ -21,7 +21,7 @@ beforeEach(() => {
 	editor = new TestEditor()
 	editor.setStyleForNextShapes(DefaultDashStyle, 'solid')
 	editor.setStyleForSelectedShapes(DefaultDashStyle, 'solid')
-	editor.createShapes<TLGeoShape>([
+	editor.createShapes([
 		{
 			id: ids.boxA,
 			type: 'geo',

package/src/test/commands/isShapeOfType.test.ts

@@ -0,0 +1,44 @@
+import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+export declare function assertNever(x: never): never
+
+it('narrows down the shape type', () => {
+	const id = createShapeId('arrow1')
+	editor.createShape({ type: 'arrow', id, x: 0, y: 0 })
+
+	const shape = editor.getShape(id)!
+	if (editor.isShapeOfType(shape, 'arrow')) {
+		expect(shape.type === 'arrow').toBe(true)
+		expect(
+			// @ts-expect-error This comparison appears to be unintentional because the types '"arrow"' and '"card"' have no overlap.
+			shape.type === 'card'
+		).toBe(false)
+	}
+})
+
+it('narrows down the shape type with generic', () => {
+	const id = createShapeId('arrow1')
+	editor.createShape({ type: 'arrow', id, x: 0, y: 0 })
+
+	const shape = editor.getShape(id)!
+	if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
+		expect(shape.type === 'arrow').toBe(true)
+
+		expect(
+			// @ts-expect-error This comparison appears to be unintentional because the types '"arrow"' and '"card"' have no overlap.
+			shape.type === 'card'
+		).toBe(false)
+	}
+
+	// @ts-expect-error mismatch between the generic and the shape type
+	if (editor.isShapeOfType<TLArrowShape>(shape, 'card')) {
+		assertNever(shape)
+	}
+})

package/src/test/commands/putContent.test.ts

@@ -1,4 +1,4 @@
-import { TLContent, structuredClone } from '@tldraw/editor'
+import { TLContent, createShapeId, structuredClone } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -25,6 +25,7 @@ describe('Migrations', () => {
 
 	it('Throws error if any shape is invalid due to wrong type', () => {
 		const withInvalidShapeType = structuredClone(clipboardContent)
+		// @ts-expect-error
 		withInvalidShapeType.shapes[0].type = 'invalid'
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeType)).toThrow()
 	})
@@ -37,3 +38,81 @@ describe('Migrations', () => {
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeModel)).toThrow()
 	})
 })
+
+describe('Paste parent selection with explicit point', () => {
+	it('falls back to the page when the cursor is outside the original parent', () => {
+		const frameId = createShapeId('frame')
+		const childId = createShapeId('child')
+
+		editor.createShapes([
+			{
+				id: frameId,
+				type: 'frame',
+				x: 0,
+				y: 0,
+				props: { w: 200, h: 200 },
+			},
+			{
+				id: childId,
+				type: 'geo',
+				parentId: frameId,
+				x: 40,
+				y: 40,
+				props: { w: 60, h: 60 },
+			},
+		])
+
+		editor.select(childId)
+		editor.copy()
+
+		editor.putContentOntoCurrentPage(editor.clipboard!, {
+			point: { x: 500, y: 500 },
+			select: true,
+		})
+
+		const [pastedId] = editor.getSelectedShapeIds()
+		expect(editor.getShape(pastedId)?.parentId).toBe(editor.getCurrentPageId())
+	})
+
+	it('uses the parent under the cursor when it can accept the pasted shapes', () => {
+		const frameAId = createShapeId('frameA')
+		const frameBId = createShapeId('frameB')
+		const childId = createShapeId('child')
+
+		editor.createShapes([
+			{
+				id: frameAId,
+				type: 'frame',
+				x: 0,
+				y: 0,
+				props: { w: 200, h: 200 },
+			},
+			{
+				id: frameBId,
+				type: 'frame',
+				x: 400,
+				y: 0,
+				props: { w: 200, h: 200 },
+			},
+			{
+				id: childId,
+				type: 'geo',
+				parentId: frameAId,
+				x: 40,
+				y: 40,
+				props: { w: 60, h: 60 },
+			},
+		])
+
+		editor.select(childId)
+		editor.copy()
+
+		editor.putContentOntoCurrentPage(editor.clipboard!, {
+			point: { x: 450, y: 50 },
+			select: true,
+		})
+
+		const [pastedId] = editor.getSelectedShapeIds()
+		expect(editor.getShape(pastedId)?.parentId).toBe(frameBId)
+	})
+})

package/src/test/commands/updateShape.test.ts

@@ -0,0 +1,67 @@
+import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
+import { TestEditor, createDefaultShapes } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes(createDefaultShapes())
+})
+
+it('Uses typescript generics', () => {
+	expect(() => {
+		editor.updateShape({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				w: 'OH NO',
+			},
+		})
+
+		// Errors when updating a shape with unknown props
+		editor.updateShape({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				foo: 'bar',
+			},
+		})
+
+		// error here because we are giving the wrong props to the shape
+		editor.updateShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				w: 'OH NO',
+			},
+		})
+
+		// Yep error here because we are giving the wrong generic
+		editor.updateShape<TLArrowShape>({
+			id: ids.box1,
+			//@ts-expect-error
+			type: 'geo',
+			//@ts-expect-error
+			props: { w: 'OH NO' },
+		})
+
+		// All good, correct match of generic and shape type
+		editor.updateShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			props: { w: 100 },
+		})
+
+		editor.updateShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+		})
+	}).toThrow()
+})

package/src/test/commands/updateShapes.test.ts

@@ -15,22 +15,38 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
-		// No error here because no generic, the editor doesn't know what this guy is
 		editor.updateShapes([
 			{
 				id: ids.box1,
 				type: 'geo',
-				props: { w: 'OH NO' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
+			},
+		])
+
+		// Errors when updating shapes with unknown props
+		editor.updateShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: {
+					// @ts-expect-error
+					foo: 'bar',
+				},
 			},
 		])
 
-		// Yep error here because we are giving the wrong props to the shape
+		// error here because we are giving the wrong props to the shape
 		editor.updateShapes<TLGeoShape>([
 			{
 				id: ids.box1,
 				type: 'geo',
-				//@ts-expect-error
-				props: { w: 'OH NO' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
 			},
 		])