kopia lustrzana https://github.com/Tldraw/Tldraw
Adds selected ids to commands that lack them
rodzic
efbded7a06
commit
d1ebcbc30b
|
@ -58,6 +58,11 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand
|
||||||
shapes: before,
|
shapes: before,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -67,6 +72,11 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand
|
||||||
shapes: after,
|
shapes: after,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,6 +24,11 @@ export function distribute(data: Data, ids: string[], type: DistributeType): TLD
|
||||||
pages: {
|
pages: {
|
||||||
[currentPageId]: { shapes: before },
|
[currentPageId]: { shapes: before },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -31,6 +36,11 @@ export function distribute(data: Data, ids: string[], type: DistributeType): TLD
|
||||||
pages: {
|
pages: {
|
||||||
[currentPageId]: { shapes: after },
|
[currentPageId]: { shapes: after },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -64,6 +64,11 @@ export function flip(data: Data, ids: string[], type: FlipType): TLDrawCommand {
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: { shapes: before },
|
[data.appState.currentPageId]: { shapes: before },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -71,6 +76,11 @@ export function flip(data: Data, ids: string[], type: FlipType): TLDrawCommand {
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: { shapes: after },
|
[data.appState.currentPageId]: { shapes: after },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -199,7 +199,7 @@ export function group(
|
||||||
},
|
},
|
||||||
pageStates: {
|
pageStates: {
|
||||||
[pageId]: {
|
[pageId]: {
|
||||||
selectedIds: TLDR.getSelectedIds(data, pageId),
|
selectedIds: ids,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -221,14 +221,24 @@ export function move(data: Data, ids: string[], type: MoveType): TLDrawCommand {
|
||||||
before: {
|
before: {
|
||||||
document: {
|
document: {
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: { shapes: result.before },
|
[currentPageId]: { shapes: result.before },
|
||||||
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
document: {
|
document: {
|
||||||
pages: {
|
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'
|
import { TLDR } from '~state/tldr'
|
||||||
|
|
||||||
export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCommand {
|
export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCommand {
|
||||||
|
const { currentPageId } = data.appState
|
||||||
|
|
||||||
const { before, after } = TLDR.mutateShapes(
|
const { before, after } = TLDR.mutateShapes(
|
||||||
data,
|
data,
|
||||||
ids,
|
ids,
|
||||||
|
@ -16,6 +18,11 @@ export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCo
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: { shapes: before },
|
[data.appState.currentPageId]: { shapes: before },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -23,6 +30,11 @@ export function resetBounds(data: Data, ids: string[], pageId: string): TLDrawCo
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: { shapes: after },
|
[data.appState.currentPageId]: { shapes: after },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,3 +40,20 @@ describe('Rotate command', () => {
|
||||||
|
|
||||||
it.todo('Rotates shapes with handles.')
|
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 },
|
[currentPageId]: { shapes: before },
|
||||||
},
|
},
|
||||||
pageStates: {
|
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 },
|
[currentPageId]: { shapes: after },
|
||||||
},
|
},
|
||||||
pageStates: {
|
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])
|
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 {
|
export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCommand {
|
||||||
const { currentPageId } = data.appState
|
const { currentPageId } = data.appState
|
||||||
|
|
||||||
|
const selectedIds = TLDR.getSelectedIds(data, currentPageId)
|
||||||
|
|
||||||
const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))
|
const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))
|
||||||
|
|
||||||
const boundsForShapes = initialShapes.map((shape) => TLDR.getBounds(shape))
|
const boundsForShapes = initialShapes.map((shape) => TLDR.getBounds(shape))
|
||||||
|
@ -63,6 +65,11 @@ export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCom
|
||||||
pages: {
|
pages: {
|
||||||
[currentPageId]: { shapes: before },
|
[currentPageId]: { shapes: before },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -70,6 +77,11 @@ export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCom
|
||||||
pages: {
|
pages: {
|
||||||
[currentPageId]: { shapes: after },
|
[currentPageId]: { shapes: after },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,11 +3,10 @@ import { mockDocument } from '~test'
|
||||||
import { SizeStyle } from '~types'
|
import { SizeStyle } from '~types'
|
||||||
|
|
||||||
describe('Style command', () => {
|
describe('Style command', () => {
|
||||||
const tlstate = new TLDrawState()
|
|
||||||
tlstate.loadDocument(mockDocument)
|
|
||||||
tlstate.select('rect1')
|
|
||||||
|
|
||||||
it('does, undoes and redoes command', () => {
|
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)
|
expect(tlstate.getShape('rect1').style.size).toEqual(SizeStyle.Medium)
|
||||||
|
|
||||||
tlstate.style({ size: SizeStyle.Small })
|
tlstate.style({ size: SizeStyle.Small })
|
||||||
|
@ -47,3 +46,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'])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
|
@ -22,6 +22,11 @@ export function style(data: Data, ids: string[], changes: Partial<ShapeStyles>):
|
||||||
shapes: before,
|
shapes: before,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
appState: {
|
appState: {
|
||||||
currentStyle: { ...data.appState.currentStyle },
|
currentStyle: { ...data.appState.currentStyle },
|
||||||
|
@ -34,6 +39,11 @@ export function style(data: Data, ids: string[], changes: Partial<ShapeStyles>):
|
||||||
shapes: after,
|
shapes: after,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
appState: {
|
appState: {
|
||||||
currentStyle: { ...data.appState.currentStyle, ...changes },
|
currentStyle: { ...data.appState.currentStyle, ...changes },
|
||||||
|
|
|
@ -45,6 +45,11 @@ export function toggleDecoration(
|
||||||
pages: {
|
pages: {
|
||||||
[currentPageId]: { shapes: beforeShapes },
|
[currentPageId]: { shapes: beforeShapes },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -52,6 +57,11 @@ export function toggleDecoration(
|
||||||
pages: {
|
pages: {
|
||||||
[currentPageId]: { shapes: afterShapes },
|
[currentPageId]: { shapes: afterShapes },
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,3 +60,20 @@ describe('Toggle command', () => {
|
||||||
expect(tlstate.getShape<RectangleShape>('rect1').isAspectRatioLocked).toBe(false)
|
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 {
|
export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDrawCommand {
|
||||||
const { currentPageId } = data.appState
|
const { currentPageId } = data.appState
|
||||||
|
|
||||||
const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))
|
const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))
|
||||||
|
|
||||||
const isAllToggled = initialShapes.every((shape) => shape[prop])
|
const isAllToggled = initialShapes.every((shape) => shape[prop])
|
||||||
|
|
||||||
const { before, after } = TLDR.mutateShapes(
|
const { before, after } = TLDR.mutateShapes(
|
||||||
|
@ -24,6 +26,11 @@ export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDr
|
||||||
shapes: before,
|
shapes: before,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
|
@ -33,6 +40,11 @@ export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDr
|
||||||
shapes: after,
|
shapes: after,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -67,14 +67,24 @@ export function translate(data: Data, ids: string[], delta: number[]): TLDrawCom
|
||||||
before: {
|
before: {
|
||||||
document: {
|
document: {
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: before,
|
[currentPageId]: before,
|
||||||
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
after: {
|
after: {
|
||||||
document: {
|
document: {
|
||||||
pages: {
|
pages: {
|
||||||
[data.appState.currentPageId]: after,
|
[currentPageId]: after,
|
||||||
|
},
|
||||||
|
pageStates: {
|
||||||
|
[currentPageId]: {
|
||||||
|
selectedIds: ids,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Ładowanie…
Reference in New Issue