Adds selected ids to commands that lack them (#192)
This commit is contained in:
parent
ff50aa6ad5
commit
918ebef54d
16 changed files with 190 additions and 11 deletions
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -199,7 +199,7 @@ export function group(
|
|||
},
|
||||
pageStates: {
|
||||
[pageId]: {
|
||||
selectedIds: TLDR.getSelectedIds(data, pageId),
|
||||
selectedIds: ids,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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'])
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -64,3 +64,20 @@ describe('Stretch command', () => {
|
|||
expect(tlstate.getShape<RectangleShape>('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'])
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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'])
|
||||
})
|
||||
})
|
||||
|
|
|
@ -60,6 +60,11 @@ export function style(data: Data, ids: string[], changes: Partial<ShapeStyles>):
|
|||
shapes: beforeShapes,
|
||||
},
|
||||
},
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
selectedIds: ids,
|
||||
},
|
||||
},
|
||||
},
|
||||
appState: {
|
||||
currentStyle: { ...data.appState.currentStyle },
|
||||
|
@ -72,6 +77,11 @@ export function style(data: Data, ids: string[], changes: Partial<ShapeStyles>):
|
|||
shapes: afterShapes,
|
||||
},
|
||||
},
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
selectedIds: ids,
|
||||
},
|
||||
},
|
||||
},
|
||||
appState: {
|
||||
currentStyle: { ...data.appState.currentStyle, ...changes },
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -60,3 +60,20 @@ describe('Toggle command', () => {
|
|||
expect(tlstate.getShape<RectangleShape>('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'])
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue