From 169ed8e74205cfe1e8f9fcd3f3c0402034b87ffd Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sun, 15 Aug 2021 14:19:05 +0100 Subject: [PATCH] Restores select on single click --- packages/tldraw/src/state/tlstate.spec.ts | 84 ++++++++++++++--------- packages/tldraw/src/state/tlstate.ts | 35 +++++++--- packages/tldraw/src/test/state-utils.tsx | 10 +++ 3 files changed, 87 insertions(+), 42 deletions(-) diff --git a/packages/tldraw/src/state/tlstate.spec.ts b/packages/tldraw/src/state/tlstate.spec.ts index 5e8972b3c..073868095 100644 --- a/packages/tldraw/src/state/tlstate.spec.ts +++ b/packages/tldraw/src/state/tlstate.spec.ts @@ -72,18 +72,18 @@ describe('TLDrawState', () => { expect(tlstate.selectedIds.length).toBe(3) }) - it('does not select selected shape when single-clicked', () => { + it('selects selected shape when single-clicked', () => { tlstate.loadDocument(mockDocument).selectAll() tlu.clickShape('rect2') - expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2', 'rect3']) - }) - - it('selects shape when double-clicked', () => { - tlstate.loadDocument(mockDocument).selectAll() - tlu.doubleClickShape('rect2') expect(tlstate.selectedIds).toStrictEqual(['rect2']) }) + // it('selects shape when double-clicked', () => { + // tlstate.loadDocument(mockDocument).selectAll() + // tlu.doubleClickShape('rect2') + // expect(tlstate.selectedIds).toStrictEqual(['rect2']) + // }) + it('does not select on meta-click', () => { tlstate.loadDocument(mockDocument).deselectAll() tlu.clickShape('rect1', { ctrlKey: true }) @@ -98,36 +98,52 @@ describe('TLDrawState', () => { expect(tlstate.status.current).toBe('idle') }) + it('deletes shapes if cancelled during creating', () => { + // TODO + }) + + it('deletes shapes on undo after creating', () => { + // TODO + }) + + it('re-creates shapes on undo after creating', () => { + // TODO + }) + + it('selects all', () => { + // TODO + }) + // Single click on a selected shape to select just that shape - // it('single-selects shape in selection on click', () => { - // tlstate.deselectAll() - // clickShape('rect1') - // clickShape('rect2', { shiftKey: true }) - // clickShape('rect2') - // expect(tlstate.selectedIds).toStrictEqual(['rect2']) - // expect(tlstate.status.current).toBe('idle') - // }) + it('single-selects shape in selection on click', () => { + tlstate.deselectAll() + tlu.clickShape('rect1') + tlu.clickShape('rect2', { shiftKey: true }) + tlu.clickShape('rect2') + expect(tlstate.selectedIds).toStrictEqual(['rect2']) + expect(tlstate.status.current).toBe('idle') + }) - // it('single-selects shape in selection on pointerup only', () => { - // tlstate.deselectAll() - // clickShape('rect1') - // clickShape('rect2', { shiftKey: true }) - // pointShape('rect2') - // expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2']) - // stopPointing('rect2') - // expect(tlstate.selectedIds).toStrictEqual(['rect2']) - // expect(tlstate.status.current).toBe('idle') - // }) + it('single-selects shape in selection on pointerup only', () => { + tlstate.deselectAll() + tlu.clickShape('rect1') + tlu.clickShape('rect2', { shiftKey: true }) + tlu.pointShape('rect2') + expect(tlstate.selectedIds).toStrictEqual(['rect1', 'rect2']) + tlu.stopPointing('rect2') + expect(tlstate.selectedIds).toStrictEqual(['rect2']) + expect(tlstate.status.current).toBe('idle') + }) - // it('selects shapes if shift key is lifted before pointerup', () => { - // tlstate.deselectAll() - // clickShape('rect1') - // pointShape('rect2', { shiftKey: true }) - // expect(tlstate.status.current).toBe('pointingBounds') - // stopPointing('rect2') - // expect(tlstate.selectedIds).toStrictEqual(['rect2']) - // expect(tlstate.status.current).toBe('idle') - // }) + it('selects shapes if shift key is lifted before pointerup', () => { + tlstate.deselectAll() + tlu.clickShape('rect1') + tlu.pointShape('rect2', { shiftKey: true }) + expect(tlstate.status.current).toBe('pointingBounds') + tlu.stopPointing('rect2') + expect(tlstate.selectedIds).toStrictEqual(['rect2']) + expect(tlstate.status.current).toBe('idle') + }) }) }) diff --git a/packages/tldraw/src/state/tlstate.ts b/packages/tldraw/src/state/tlstate.ts index 1da3e58e7..9255eddb8 100644 --- a/packages/tldraw/src/state/tlstate.ts +++ b/packages/tldraw/src/state/tlstate.ts @@ -1474,6 +1474,8 @@ export class TLDrawState implements TLCallbacks { if (this.pointedId !== info.target) { this.setSelectedIds(data.pageState.selectedIds.filter((id) => id !== info.target)) } + } else { + this.setSelectedIds([info.target]) } } else if (this.pointedId === info.target) { if (info.shiftKey) { @@ -1582,7 +1584,7 @@ export class TLDrawState implements TLCallbacks { onPointShape: TLPointerEventHandler = (info) => { const data = this.getState() switch (this.status.current) { - case 'idle': { + case TLDrawStatus.Idle: { switch (this.appState.activeTool) { case 'select': { if (info.metaKey) { @@ -1607,21 +1609,38 @@ export class TLDrawState implements TLCallbacks { } break } - case 'pointingBounds': { + case TLDrawStatus.PointingBounds: { this.pointedId = info.target break } } } - onReleaseShape: TLPointerEventHandler = () => { - // Unused + onReleaseShape: TLPointerEventHandler = (info) => { + // const data = this.getState() + // switch (this.status.current) { + // case TLDrawStatus.PointingBounds: { + // switch (this.appState.activeTool) { + // case 'select': { + // if (data.pageState.selectedIds.includes(info.target)) { + // // If the shape is not selected; then if the user is pressing shift, + // // add the shape to the current selection; otherwise, set the shape as + // // the only selected shape. + // this.setSelectedIds([info.target], info.shiftKey) + // } + // this.setStatus(TLDrawStatus.Idle) + // break + // } + // } + // break + // } + // } } - onDoubleClickShape: TLPointerEventHandler = (info) => { - if (this.selectedIds.includes(info.target)) { - this.setSelectedIds([info.target]) - } + onDoubleClickShape: TLPointerEventHandler = () => { + // if (this.selectedIds.includes(info.target)) { + // this.setSelectedIds([info.target]) + // } } onRightPointShape: TLPointerEventHandler = () => { diff --git a/packages/tldraw/src/test/state-utils.tsx b/packages/tldraw/src/test/state-utils.tsx index 3d49b25f9..5be2a02d0 100644 --- a/packages/tldraw/src/test/state-utils.tsx +++ b/packages/tldraw/src/test/state-utils.tsx @@ -22,6 +22,7 @@ export class TLStateUtils { inputs.pointerDown(this.getPoint(options), 'canvas'), {} as React.PointerEvent ) + return this } pointShape = (id: string, options: PointerOptions = {}) => { @@ -29,6 +30,7 @@ export class TLStateUtils { inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent ) + return this } doubleClickShape = (id: string, options: PointerOptions = {}) => { @@ -36,6 +38,7 @@ export class TLStateUtils { inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent ) + return this } pointBounds = (options: PointerOptions = {}) => { @@ -43,6 +46,7 @@ export class TLStateUtils { inputs.pointerDown(this.getPoint(options), 'bounds'), {} as React.PointerEvent ) + return this } pointBoundsHandle = ( @@ -53,6 +57,7 @@ export class TLStateUtils { inputs.pointerDown(this.getPoint(options), 'bounds'), {} as React.PointerEvent ) + return this } stopPointing = (target = 'canvas', options: PointerOptions = {}) => { @@ -60,21 +65,25 @@ export class TLStateUtils { inputs.pointerDown(this.getPoint(options), target), {} as React.PointerEvent ) + return this } clickCanvas = (options: PointerOptions = {}) => { this.pointCanvas(options) this.stopPointing() + return this } clickShape = (id: string, options: PointerOptions = {}) => { this.pointShape(id, options) this.stopPointing(id, options) + return this } clickBounds = (options: PointerOptions = {}) => { this.pointBounds(options) this.stopPointing() + return this } clickBoundsHandle = ( @@ -83,6 +92,7 @@ export class TLStateUtils { ) => { this.pointBoundsHandle(id, options) this.stopPointing(id) + return this } getPoint(options: PointerOptions = {} as PointerOptions): PointerEvent {