From 918ebef54df25d63ea21c5558273aa76f687b746 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Fri, 22 Oct 2021 12:08:02 +0100 Subject: [PATCH] Adds selected ids to commands that lack them (#192) --- .../src/state/command/align/align.command.ts | 10 ++++++++ .../command/distribute/distribute.command.ts | 10 ++++++++ .../src/state/command/flip/flip.command.ts | 10 ++++++++ .../src/state/command/group/group.command.ts | 2 +- .../src/state/command/move/move.command.ts | 14 +++++++++-- .../reset-bounds/reset-bounds.command.ts | 12 ++++++++++ .../command/rotate/rotate.command.spec.ts | 17 +++++++++++++ .../state/command/rotate/rotate.command.ts | 10 ++++++-- .../command/stretch/stretch.command.spec.ts | 17 +++++++++++++ .../state/command/stretch/stretch.command.ts | 12 ++++++++++ .../state/command/style/style.command.spec.ts | 24 +++++++++++++++---- .../src/state/command/style/style.command.ts | 10 ++++++++ .../toggle-decoration.command.ts | 10 ++++++++ .../command/toggle/toggle.command.spec.ts | 17 +++++++++++++ .../state/command/toggle/toggle.command.ts | 12 ++++++++++ .../command/translate/translate.command.ts | 14 +++++++++-- 16 files changed, 190 insertions(+), 11 deletions(-) diff --git a/packages/tldraw/src/state/command/align/align.command.ts b/packages/tldraw/src/state/command/align/align.command.ts index cc6437808..8468ec28c 100644 --- a/packages/tldraw/src/state/command/align/align.command.ts +++ b/packages/tldraw/src/state/command/align/align.command.ts @@ -58,6 +58,11 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand shapes: before, }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, after: { @@ -67,6 +72,11 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand shapes: after, }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/distribute/distribute.command.ts b/packages/tldraw/src/state/command/distribute/distribute.command.ts index 01d20ba34..82efff1a6 100644 --- a/packages/tldraw/src/state/command/distribute/distribute.command.ts +++ b/packages/tldraw/src/state/command/distribute/distribute.command.ts @@ -24,6 +24,11 @@ export function distribute(data: Data, ids: string[], type: DistributeType): TLD pages: { [currentPageId]: { shapes: before }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, after: { @@ -31,6 +36,11 @@ export function distribute(data: Data, ids: string[], type: DistributeType): TLD pages: { [currentPageId]: { shapes: after }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/flip/flip.command.ts b/packages/tldraw/src/state/command/flip/flip.command.ts index bae659a32..51298f6b7 100644 --- a/packages/tldraw/src/state/command/flip/flip.command.ts +++ b/packages/tldraw/src/state/command/flip/flip.command.ts @@ -64,6 +64,11 @@ export function flip(data: Data, ids: string[], type: FlipType): TLDrawCommand { pages: { [data.appState.currentPageId]: { shapes: before }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, after: { @@ -71,6 +76,11 @@ export function flip(data: Data, ids: string[], type: FlipType): TLDrawCommand { pages: { [data.appState.currentPageId]: { shapes: after }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/group/group.command.ts b/packages/tldraw/src/state/command/group/group.command.ts index 458b9e587..cd05a808c 100644 --- a/packages/tldraw/src/state/command/group/group.command.ts +++ b/packages/tldraw/src/state/command/group/group.command.ts @@ -199,7 +199,7 @@ export function group( }, pageStates: { [pageId]: { - selectedIds: TLDR.getSelectedIds(data, pageId), + selectedIds: ids, }, }, }, diff --git a/packages/tldraw/src/state/command/move/move.command.ts b/packages/tldraw/src/state/command/move/move.command.ts index cfc1683cf..a7359ebbe 100644 --- a/packages/tldraw/src/state/command/move/move.command.ts +++ b/packages/tldraw/src/state/command/move/move.command.ts @@ -221,14 +221,24 @@ export function move(data: Data, ids: string[], type: MoveType): TLDrawCommand { before: { document: { pages: { - [data.appState.currentPageId]: { shapes: result.before }, + [currentPageId]: { shapes: result.before }, + }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, }, }, }, after: { document: { pages: { - [data.appState.currentPageId]: { shapes: result.after }, + [currentPageId]: { shapes: result.after }, + }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, }, }, }, diff --git a/packages/tldraw/src/state/command/reset-bounds/reset-bounds.command.ts b/packages/tldraw/src/state/command/reset-bounds/reset-bounds.command.ts index 5bd67dfd4..c695a866c 100644 --- a/packages/tldraw/src/state/command/reset-bounds/reset-bounds.command.ts +++ b/packages/tldraw/src/state/command/reset-bounds/reset-bounds.command.ts @@ -2,6 +2,8 @@ import type { Data, TLDrawCommand } from '~types' import { TLDR } from '~state/tldr' export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCommand { + const { currentPageId } = data.appState + const { before, after } = TLDR.mutateShapes( data, ids, @@ -16,6 +18,11 @@ export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCo pages: { [data.appState.currentPageId]: { shapes: before }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, after: { @@ -23,6 +30,11 @@ export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCo pages: { [data.appState.currentPageId]: { shapes: after }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/rotate/rotate.command.spec.ts b/packages/tldraw/src/state/command/rotate/rotate.command.spec.ts index a85af9a07..91a315e77 100644 --- a/packages/tldraw/src/state/command/rotate/rotate.command.spec.ts +++ b/packages/tldraw/src/state/command/rotate/rotate.command.spec.ts @@ -40,3 +40,20 @@ describe('Rotate command', () => { it.todo('Rotates shapes with handles.') }) + +describe('when running the command', () => { + it('restores selection on undo', () => { + const tlstate = new TLDrawState() + .loadDocument(mockDocument) + .select('rect1') + .rotate() + .deselectAll() + .undo() + + expect(tlstate.selectedIds).toEqual(['rect1']) + + tlstate.deselectAll().redo() + + expect(tlstate.selectedIds).toEqual(['rect1']) + }) +}) diff --git a/packages/tldraw/src/state/command/rotate/rotate.command.ts b/packages/tldraw/src/state/command/rotate/rotate.command.ts index 22387fcb4..48a468081 100644 --- a/packages/tldraw/src/state/command/rotate/rotate.command.ts +++ b/packages/tldraw/src/state/command/rotate/rotate.command.ts @@ -50,7 +50,10 @@ export function rotate(data: Data, ids: string[], delta = -PI2 / 4): TLDrawComma [currentPageId]: { shapes: before }, }, pageStates: { - [currentPageId]: { boundsRotation: beforeBoundsRotation }, + [currentPageId]: { + selectedIds: ids, + boundsRotation: beforeBoundsRotation, + }, }, }, }, @@ -60,7 +63,10 @@ export function rotate(data: Data, ids: string[], delta = -PI2 / 4): TLDrawComma [currentPageId]: { shapes: after }, }, pageStates: { - [currentPageId]: { boundsRotation: afterBoundsRotation }, + [currentPageId]: { + selectedIds: ids, + boundsRotation: afterBoundsRotation, + }, }, }, }, diff --git a/packages/tldraw/src/state/command/stretch/stretch.command.spec.ts b/packages/tldraw/src/state/command/stretch/stretch.command.spec.ts index bb055b655..d3d35cfc5 100644 --- a/packages/tldraw/src/state/command/stretch/stretch.command.spec.ts +++ b/packages/tldraw/src/state/command/stretch/stretch.command.spec.ts @@ -64,3 +64,20 @@ describe('Stretch command', () => { expect(tlstate.getShape('rect2').size).toStrictEqual([100, 200]) }) }) + +describe('when running the command', () => { + it('restores selection on undo', () => { + const tlstate = new TLDrawState() + .loadDocument(mockDocument) + .select('rect1', 'rect2') + .stretch(StretchType.Horizontal) + .deselectAll() + .undo() + + expect(tlstate.selectedIds).toEqual(['rect1', 'rect2']) + + tlstate.deselectAll().redo() + + expect(tlstate.selectedIds).toEqual(['rect1', 'rect2']) + }) +}) diff --git a/packages/tldraw/src/state/command/stretch/stretch.command.ts b/packages/tldraw/src/state/command/stretch/stretch.command.ts index 4fe738866..abcee3f07 100644 --- a/packages/tldraw/src/state/command/stretch/stretch.command.ts +++ b/packages/tldraw/src/state/command/stretch/stretch.command.ts @@ -6,6 +6,8 @@ import { TLDR } from '~state/tldr' export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCommand { const { currentPageId } = data.appState + const selectedIds = TLDR.getSelectedIds(data, currentPageId) + const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId)) const boundsForShapes = initialShapes.map((shape) => TLDR.getBounds(shape)) @@ -63,6 +65,11 @@ export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCom pages: { [currentPageId]: { shapes: before }, }, + pageStates: { + [currentPageId]: { + selectedIds, + }, + }, }, }, after: { @@ -70,6 +77,11 @@ export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCom pages: { [currentPageId]: { shapes: after }, }, + pageStates: { + [currentPageId]: { + selectedIds, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/style/style.command.spec.ts b/packages/tldraw/src/state/command/style/style.command.spec.ts index 5e0bfdaed..70aee082f 100644 --- a/packages/tldraw/src/state/command/style/style.command.spec.ts +++ b/packages/tldraw/src/state/command/style/style.command.spec.ts @@ -4,11 +4,10 @@ import { mockDocument } from '~test' import { SizeStyle, TLDrawShapeType } from '~types' describe('Style command', () => { - const tlstate = new TLDrawState() - tlstate.loadDocument(mockDocument) - tlstate.select('rect1') - it('does, undoes and redoes command', () => { + const tlstate = new TLDrawState() + tlstate.loadDocument(mockDocument) + tlstate.select('rect1') expect(tlstate.getShape('rect1').style.size).toEqual(SizeStyle.Medium) tlstate.style({ size: SizeStyle.Small }) @@ -76,3 +75,20 @@ describe('Style command', () => { }) }) }) + +describe('when running the command', () => { + it('restores selection on undo', () => { + const tlstate = new TLDrawState() + .loadDocument(mockDocument) + .select('rect1') + .style({ size: SizeStyle.Small }) + .deselectAll() + .undo() + + expect(tlstate.selectedIds).toEqual(['rect1']) + + tlstate.deselectAll().redo() + + expect(tlstate.selectedIds).toEqual(['rect1']) + }) +}) diff --git a/packages/tldraw/src/state/command/style/style.command.ts b/packages/tldraw/src/state/command/style/style.command.ts index 748d68696..3cff252fb 100644 --- a/packages/tldraw/src/state/command/style/style.command.ts +++ b/packages/tldraw/src/state/command/style/style.command.ts @@ -60,6 +60,11 @@ export function style(data: Data, ids: string[], changes: Partial): shapes: beforeShapes, }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, appState: { currentStyle: { ...data.appState.currentStyle }, @@ -72,6 +77,11 @@ export function style(data: Data, ids: string[], changes: Partial): shapes: afterShapes, }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, appState: { currentStyle: { ...data.appState.currentStyle, ...changes }, diff --git a/packages/tldraw/src/state/command/toggle-decoration/toggle-decoration.command.ts b/packages/tldraw/src/state/command/toggle-decoration/toggle-decoration.command.ts index 215c5147b..336d4c851 100644 --- a/packages/tldraw/src/state/command/toggle-decoration/toggle-decoration.command.ts +++ b/packages/tldraw/src/state/command/toggle-decoration/toggle-decoration.command.ts @@ -45,6 +45,11 @@ export function toggleDecoration( pages: { [currentPageId]: { shapes: beforeShapes }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, after: { @@ -52,6 +57,11 @@ export function toggleDecoration( pages: { [currentPageId]: { shapes: afterShapes }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/toggle/toggle.command.spec.ts b/packages/tldraw/src/state/command/toggle/toggle.command.spec.ts index 1a914631d..9c547759c 100644 --- a/packages/tldraw/src/state/command/toggle/toggle.command.spec.ts +++ b/packages/tldraw/src/state/command/toggle/toggle.command.spec.ts @@ -60,3 +60,20 @@ describe('Toggle command', () => { expect(tlstate.getShape('rect1').isAspectRatioLocked).toBe(false) }) }) + +describe('when running the command', () => { + it('restores selection on undo', () => { + const tlstate = new TLDrawState() + .loadDocument(mockDocument) + .select('rect1') + .toggleHidden() + .deselectAll() + .undo() + + expect(tlstate.selectedIds).toEqual(['rect1']) + + tlstate.deselectAll().redo() + + expect(tlstate.selectedIds).toEqual(['rect1']) + }) +}) diff --git a/packages/tldraw/src/state/command/toggle/toggle.command.ts b/packages/tldraw/src/state/command/toggle/toggle.command.ts index e15353e79..75c226995 100644 --- a/packages/tldraw/src/state/command/toggle/toggle.command.ts +++ b/packages/tldraw/src/state/command/toggle/toggle.command.ts @@ -3,7 +3,9 @@ import { TLDR } from '~state/tldr' export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDrawCommand { const { currentPageId } = data.appState + const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId)) + const isAllToggled = initialShapes.every((shape) => shape[prop]) const { before, after } = TLDR.mutateShapes( @@ -24,6 +26,11 @@ export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDr shapes: before, }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, after: { @@ -33,6 +40,11 @@ export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDr shapes: after, }, }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, + }, }, }, } diff --git a/packages/tldraw/src/state/command/translate/translate.command.ts b/packages/tldraw/src/state/command/translate/translate.command.ts index 2ba337f2a..7e17d0147 100644 --- a/packages/tldraw/src/state/command/translate/translate.command.ts +++ b/packages/tldraw/src/state/command/translate/translate.command.ts @@ -67,14 +67,24 @@ export function translate(data: Data, ids: string[], delta: number[]): TLDrawCom before: { document: { pages: { - [data.appState.currentPageId]: before, + [currentPageId]: before, + }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, }, }, }, after: { document: { pages: { - [data.appState.currentPageId]: after, + [currentPageId]: after, + }, + pageStates: { + [currentPageId]: { + selectedIds: ids, + }, }, }, },