tldraw 4.3.0-canary.da35795ba8e2 → 4.3.0-canary.e1766dd4eab3

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',
+				},
 			},
 		])
 

package/src/test/custom-clipping.test.ts

@@ -8,7 +8,6 @@ import {
 	resizeBox,
 	StateNode,
 	T,
-	TLBaseShape,
 	TLEventHandlers,
 	TLGeoShape,
 	TLResizeInfo,
@@ -19,19 +18,21 @@ import {
 } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
-// Custom Circle Clip Shape Definition
-export type CircleClipShape = TLBaseShape<
-	'circle-clip',
-	{
-		w: number
-		h: number
+const CIRCLE_CLIP_TYPE = 'circle-clip'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[CIRCLE_CLIP_TYPE]: { w: number; h: number }
 	}
->
+}
+
+// Custom Circle Clip Shape Definition
+export type CircleClipShape = TLShape<typeof CIRCLE_CLIP_TYPE>
 
 export const isClippingEnabled$ = atom('isClippingEnabled', true)
 
 export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
-	static override type = 'circle-clip' as const
+	static override type = CIRCLE_CLIP_TYPE
 	static override props: RecordProps<CircleClipShape> = {
 		w: T.number,
 		h: T.number,
@@ -113,8 +114,8 @@ export class CircleClipShapeTool extends StateNode {
 		if (info.target === 'canvas') {
 			const { originPagePoint } = this.editor.inputs
 
-			this.editor.createShape<CircleClipShape>({
-				type: 'circle-clip',
+			this.editor.createShape({
+				type: CIRCLE_CLIP_TYPE,
 				x: originPagePoint.x - 100,
 				y: originPagePoint.y - 100,
 				props: {
@@ -153,9 +154,9 @@ beforeEach(() => {
 describe('CircleClipShapeUtil', () => {
 	describe('shape creation and properties', () => {
 		it('should create a circle clip shape with default properties', () => {
-			editor.createShape<CircleClipShape>({
+			editor.createShape({
 				id: ids.circleClip1,
-				type: 'circle-clip',
+				type: CIRCLE_CLIP_TYPE,
 				x: 100,
 				y: 100,
 				props: {
@@ -172,9 +173,9 @@ describe('CircleClipShapeUtil', () => {
 		})
 
 		it('should use default props when not specified', () => {
-			editor.createShape<CircleClipShape>({
+			editor.createShape({
 				id: ids.circleClip1,
-				type: 'circle-clip',
+				type: CIRCLE_CLIP_TYPE,
 				x: 100,
 				y: 100,
 				props: {},
@@ -188,9 +189,9 @@ describe('CircleClipShapeUtil', () => {
 
 	describe('geometry and clipping', () => {
 		it('should generate correct circle geometry', () => {
-			editor.createShape<CircleClipShape>({
+			editor.createShape({
 				id: ids.circleClip1,
-				type: 'circle-clip',
+				type: CIRCLE_CLIP_TYPE,
 				x: 100,
 				y: 100,
 				props: {
@@ -210,9 +211,9 @@ describe('CircleClipShapeUtil', () => {
 		})
 
 		it('should generate clip path for circle', () => {
-			editor.createShape<CircleClipShape>({
+			editor.createShape({
 				id: ids.circleClip1,
-				type: 'circle-clip',
+				type: CIRCLE_CLIP_TYPE,
 				x: 100,
 				y: 100,
 				props: {
@@ -245,9 +246,9 @@ describe('CircleClipShapeUtil', () => {
 
 	describe('child clipping behavior', () => {
 		it('should clip children when clipping is enabled', () => {
-			editor.createShape<CircleClipShape>({
+			editor.createShape({
 				id: ids.circleClip1,
-				type: 'circle-clip',
+				type: CIRCLE_CLIP_TYPE,
 				x: 100,
 				y: 100,
 				props: {
@@ -256,7 +257,7 @@ describe('CircleClipShapeUtil', () => {
 				},
 			})
 
-			editor.createShape<TLTextShape>({
+			editor.createShape({
 				id: ids.text1,
 				type: 'text',
 				x: 0,
@@ -279,9 +280,9 @@ describe('CircleClipShapeUtil', () => {
 		it('should not clip children when clipping is disabled', () => {
 			isClippingEnabled$.set(false)
 
-			editor.createShape<CircleClipShape>({
+			editor.createShape({
 				id: ids.circleClip1,
-				type: 'circle-clip',
+				type: CIRCLE_CLIP_TYPE,
 				x: 100,
 				y: 100,
 				props: {
@@ -290,7 +291,7 @@ describe('CircleClipShapeUtil', () => {
 				},
 			})
 
-			editor.createShape<TLTextShape>({
+			editor.createShape({
 				id: ids.text1,
 				type: 'text',
 				x: 0,
@@ -314,9 +315,9 @@ describe('CircleClipShapeUtil', () => {
 describe('Integration tests', () => {
 	it('should create and manage circle clip shapes with children', () => {
 		// Create circle clip shape
-		editor.createShape<CircleClipShape>({
+		editor.createShape({
 			id: ids.circleClip1,
-			type: 'circle-clip',
+			type: CIRCLE_CLIP_TYPE,
 			x: 100,
 			y: 100,
 			props: {
@@ -326,7 +327,7 @@ describe('Integration tests', () => {
 		})
 
 		// Add text child
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			id: ids.text1,
 			type: 'text',
 			x: 50,
@@ -338,7 +339,7 @@ describe('Integration tests', () => {
 		})
 
 		// Add geo child
-		editor.createShape<TLGeoShape>({
+		editor.createShape({
 			id: ids.geo1,
 			type: 'geo',
 			x: 150,
@@ -375,9 +376,9 @@ describe('Integration tests', () => {
 
 	it('should handle multiple circle clip shapes independently', () => {
 		// Create two circle clip shapes
-		editor.createShape<CircleClipShape>({
+		editor.createShape({
 			id: ids.circleClip1,
-			type: 'circle-clip',
+			type: CIRCLE_CLIP_TYPE,
 			x: 100,
 			y: 100,
 			props: {
@@ -386,9 +387,9 @@ describe('Integration tests', () => {
 			},
 		})
 
-		editor.createShape<CircleClipShape>({
+		editor.createShape({
 			id: ids.circleClip2,
-			type: 'circle-clip',
+			type: CIRCLE_CLIP_TYPE,
 			x: 400,
 			y: 100,
 			props: {
@@ -398,7 +399,7 @@ describe('Integration tests', () => {
 		})
 
 		// Add children to both
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			id: ids.text1,
 			type: 'text',
 			x: 0,
@@ -409,7 +410,7 @@ describe('Integration tests', () => {
 			},
 		})
 
-		editor.createShape<TLTextShape>({
+		editor.createShape({
 			id: ids.geo1,
 			type: 'text',
 			x: 0,