From 760a7358729589207f29c1f69663853f71bbb9d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= Date: Fri, 26 Apr 2024 14:40:14 +0200 Subject: [PATCH] Also fix create shape. --- packages/editor/api-report.md | 2 +- packages/editor/src/lib/editor/Editor.ts | 5 +-- .../src/lib/shapes/geo/toolStates/Pointing.ts | 6 ++- .../src/lib/shapes/note/NoteShapeTool.test.ts | 9 +++-- .../lib/shapes/note/toolStates/Pointing.ts | 33 +++++++++++----- packages/tldraw/src/test/SelectTool.test.ts | 2 +- .../tldraw/src/test/selection-omnibus.test.ts | 39 +++++++++---------- packages/tldraw/src/test/translating.test.ts | 22 +++++------ 8 files changed, 67 insertions(+), 51 deletions(-) diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index 0e5f1915a..bfda225fe 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -633,7 +633,7 @@ export class Editor extends EventEmitter { }; }; createPage(page: Partial): this; - createShape(shape: OptionalKeys, 'id'>): this; + createShape(shape: OptionalKeys, 'id'>): EditorResult; createShapes(shapes: OptionalKeys, 'id'>[]): EditorResult; deleteAssets(assets: TLAsset[] | TLAssetId[]): this; deleteOpenMenu(id: string): this; diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 37be641a3..ae5ee9e0b 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -6223,9 +6223,8 @@ export class Editor extends EventEmitter { * * @public */ - createShape(shape: OptionalKeys, 'id'>): this { - this.createShapes([shape]) - return this + createShape(shape: OptionalKeys, 'id'>) { + return this.createShapes([shape]) } /** diff --git a/packages/tldraw/src/lib/shapes/geo/toolStates/Pointing.ts b/packages/tldraw/src/lib/shapes/geo/toolStates/Pointing.ts index 214d4a37f..6a885c8d8 100644 --- a/packages/tldraw/src/lib/shapes/geo/toolStates/Pointing.ts +++ b/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([ + const result = this.editor.createShapes([ { id, type: 'geo', @@ -88,6 +88,10 @@ export class Pointing extends StateNode { }, }, ]) + if (!result.ok) { + this.cancel() + return + } const shape = this.editor.getShape(id)! if (!shape) return diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts b/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts index 1395e4c99..c02357546 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts +++ b/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 }, }) diff --git a/packages/tldraw/src/lib/shapes/note/toolStates/Pointing.ts b/packages/tldraw/src/lib/shapes/note/toolStates/Pointing.ts index 835fe5fd4..b8fce4738 100644 --- a/packages/tldraw/src/lib/shapes/note/toolStates/Pointing.ts +++ b/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(id)! const bounds = editor.getShapeGeometry(shape).bounds diff --git a/packages/tldraw/src/test/SelectTool.test.ts b/packages/tldraw/src/test/SelectTool.test.ts index f23e8c5ba..45e6d626b 100644 --- a/packages/tldraw/src/test/SelectTool.test.ts +++ b/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') diff --git a/packages/tldraw/src/test/selection-omnibus.test.ts b/packages/tldraw/src/test/selection-omnibus.test.ts index 7259703fd..f8897876a 100644 --- a/packages/tldraw/src/test/selection-omnibus.test.ts +++ b/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({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } }) - .createShape({ - id: ids.box1, - parentId: ids.frame1, - type: 'geo', - x: 25, - y: 25, - }) - .createShape({ - id: ids.box2, - parentId: ids.frame1, - type: 'geo', - x: 50, - y: 50, - props: { - w: 80, - h: 80, - }, - }) + editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } }) + editor.createShape({ + id: ids.box1, + parentId: ids.frame1, + type: 'geo', + x: 25, + y: 25, + }) + editor.createShape({ + id: ids.box2, + parentId: ids.frame1, + type: 'geo', + x: 50, + y: 50, + props: { + w: 80, + h: 80, + }, + }) box1 = editor.getShape(ids.box1)! box2 = editor.getShape(ids.box2)! }) diff --git a/packages/tldraw/src/test/translating.test.ts b/packages/tldraw/src/test/translating.test.ts index 412e68c7a..69d2c107e 100644 --- a/packages/tldraw/src/test/translating.test.ts +++ b/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()