Also fix create shape.

packages/editor/api-report.md

@@ -633,7 +633,7 @@ export class Editor extends EventEmitter<TLEventMap> {
         };
     };
     createPage(page: Partial<TLPage>): this;
-    createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this;
+    createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): EditorResult<void>;
     createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): EditorResult<void>;
     deleteAssets(assets: TLAsset[] | TLAssetId[]): this;
     deleteOpenMenu(id: string): this;

packages/editor/src/lib/editor/Editor.ts

@@ -6223,9 +6223,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this {
-		this.createShapes([shape])
-		return this
+	createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>) {
+		return this.createShapes([shape])
 	}
 
 	/**

packages/tldraw/src/lib/shapes/geo/toolStates/Pointing.ts

@@ -75,7 +75,7 @@ export class Pointing extends StateNode {
 
 		this.editor.mark(this.markId)
 
-		this.editor.createShapes<TLGeoShape>([
+		const result = this.editor.createShapes<TLGeoShape>([
 			{
 				id,
 				type: 'geo',
@@ -88,6 +88,10 @@ export class Pointing extends StateNode {
 				},
 			},
 		])
+		if (!result.ok) {
+			this.cancel()
+			return
+		}
 
 		const shape = this.editor.getShape<TLGeoShape>(id)!
 		if (!shape) return

packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts

@@ -190,8 +190,8 @@ describe('Grid placement helpers', () => {
 	})
 
 	it('Falls into a sticky pit when empty', () => {
+		editor.createShape({ type: 'note', x: 0, y: 0 })
 		editor
-			.createShape({ type: 'note', x: 0, y: 0 })
 			.setCurrentTool('note')
 			.pointerMove(324, 104)
 			.click()
@@ -204,9 +204,9 @@ describe('Grid placement helpers', () => {
 	})
 
 	it('Does not create a new sticky note in a sticky pit if a note is already there', () => {
+		editor.createShape({ type: 'note', x: 0, y: 0 })
+		editor.createShape({ type: 'note', x: 330, y: 8 }) // make a shape kinda there already!
 		editor
-			.createShape({ type: 'note', x: 0, y: 0 })
-			.createShape({ type: 'note', x: 330, y: 8 }) // make a shape kinda there already!
 			.setCurrentTool('note')
 			.pointerMove(300, 104)
 			.click()
@@ -241,7 +241,8 @@ describe('Grid placement helpers', () => {
 	})
 
 	it('Falls into correct pit below notes with growY', () => {
-		editor.createShape({ type: 'note', x: 0, y: 0 }).updateShape({
+		editor.createShape({ type: 'note', x: 0, y: 0 })
+		editor.updateShape({
 			...editor.getLastCreatedShape(),
 			props: { growY: 100 },
 		})

packages/tldraw/src/lib/shapes/note/toolStates/Pointing.ts

@@ -40,7 +40,12 @@ export class Pointing extends StateNode {
 			if (offset) {
 				center.sub(offset)
 			}
-			this.shape = createSticky(this.editor, id, center)
+			const result = createSticky(this.editor, id, center)
+			if (!result) {
+				this.cancel()
+				return
+			}
+			this.shape = result
 		}
 	}
 
@@ -53,7 +58,12 @@ export class Pointing extends StateNode {
 				if (offset) {
 					center.sub(offset)
 				}
-				this.shape = createSticky(this.editor, id, center)
+				const result = createSticky(this.editor, id, center)
+				if (!result) {
+					this.cancel()
+					return
+				}
+				this.shape = result
 			}
 
 			this.editor.setCurrentTool('select.translating', {
@@ -123,14 +133,17 @@ export function getNotePitOffset(editor: Editor, center: Vec) {
 }
 
 export function createSticky(editor: Editor, id: TLShapeId, center: Vec) {
-	editor
-		.createShape({
-			id,
-			type: 'note',
-			x: center.x,
-			y: center.y,
-		})
-		.select(id)
+	const result = editor.createShape({
+		id,
+		type: 'note',
+		x: center.x,
+		y: center.y,
+	})
+	if (!result.ok) {
+		return null
+	}
+
+	editor.select(id)
 
 	const shape = editor.getShape<TLNoteShape>(id)!
 	const bounds = editor.getShapeGeometry(shape).bounds

packages/tldraw/src/test/SelectTool.test.ts

@@ -563,8 +563,8 @@ describe('When in readonly mode', () => {
 
 // This should be end to end, the problem is the blur handler of the react component
 it('goes into pointing canvas', () => {
+	editor.createShape({ type: 'note' })
 	editor
-		.createShape({ type: 'note' })
 		.pointerMove(50, 50)
 		.doubleClick()
 		.expectToBeIn('select.editing_shape')

packages/tldraw/src/test/selection-omnibus.test.ts

@@ -680,26 +680,25 @@ describe('when a frame has multiple children', () => {
 	let box1: TLGeoShape
 	let box2: TLGeoShape
 	beforeEach(() => {
-		editor
-			.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
-			.createShape<TLGeoShape>({
-				id: ids.box1,
-				parentId: ids.frame1,
-				type: 'geo',
-				x: 25,
-				y: 25,
-			})
-			.createShape<TLGeoShape>({
-				id: ids.box2,
-				parentId: ids.frame1,
-				type: 'geo',
-				x: 50,
-				y: 50,
-				props: {
-					w: 80,
-					h: 80,
-				},
-			})
+		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			parentId: ids.frame1,
+			type: 'geo',
+			x: 25,
+			y: 25,
+		})
+		editor.createShape<TLGeoShape>({
+			id: ids.box2,
+			parentId: ids.frame1,
+			type: 'geo',
+			x: 50,
+			y: 50,
+			props: {
+				w: 80,
+				h: 80,
+			},
+		})
 		box1 = editor.getShape<TLGeoShape>(ids.box1)!
 		box2 = editor.getShape<TLGeoShape>(ids.box2)!
 	})

packages/tldraw/src/test/translating.test.ts

@@ -1954,9 +1954,9 @@ const defaultPitLocations = [
 
 describe('Note shape grid helper positions / pits', () => {
 	it('Snaps to pits', () => {
+		editor.createShape({ type: 'note' })
+		editor.createShape({ type: 'note', x: 500, y: 500 })
 		editor
-			.createShape({ type: 'note' })
-			.createShape({ type: 'note', x: 500, y: 500 })
 			.pointerMove(600, 600)
 			// start translating
 			.pointerDown()
@@ -1971,9 +1971,9 @@ describe('Note shape grid helper positions / pits', () => {
 	})
 
 	it('Does not snap to pit if shape has a different rotation', () => {
+		editor.createShape({ type: 'note', rotation: 0.001 })
+		editor.createShape({ type: 'note', x: 500, y: 500 })
 		editor
-			.createShape({ type: 'note', rotation: 0.001 })
-			.createShape({ type: 'note', x: 500, y: 500 })
 			.pointerMove(600, 600)
 			// start translating
 			.pointerDown()
@@ -1989,9 +1989,9 @@ describe('Note shape grid helper positions / pits', () => {
 	})
 
 	it('Snaps to pit if shape has the same rotation', () => {
+		editor.createShape({ type: 'note', rotation: 0.001 })
+		editor.createShape({ type: 'note', x: 500, y: 500, rotation: 0.001 })
 		editor
-			.createShape({ type: 'note', rotation: 0.001 })
-			.createShape({ type: 'note', x: 500, y: 500, rotation: 0.001 })
 			.pointerMove(600, 600)
 			// start translating
 			.pointerDown()
@@ -2008,9 +2008,9 @@ describe('Note shape grid helper positions / pits', () => {
 	})
 
 	it('Snaps correctly to the top when the translating shape has growY', () => {
+		editor.createShape({ type: 'note' })
+		editor.createShape({ type: 'note', x: 500, y: 500 })
 		editor
-			.createShape({ type: 'note' })
-			.createShape({ type: 'note', x: 500, y: 500 })
 			.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
 			.pointerMove(600, 600)
 			// start translating
@@ -2028,10 +2028,10 @@ describe('Note shape grid helper positions / pits', () => {
 	})
 
 	it('Snaps correctly to the bottom when the not-translating shape has growY', () => {
+		editor.createShape({ type: 'note' })
+		editor.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
+		editor.createShape({ type: 'note', x: 500, y: 500 })
 		editor
-			.createShape({ type: 'note' })
-			.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
-			.createShape({ type: 'note', x: 500, y: 500 })
 			.pointerMove(600, 600)
 			// start translating
 			.pointerDown()