PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: undo, redo, add shape to tree

Browse source
This commit is contained in:
Judicael 2022-08-23 14:32:59 +03:00
parent 18e47ad56b
commit 0d923b4700
5 changed files with 69 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/src/hooks/useShapeTree.tsx
View file

@ -54,7 +54,7 @@ function addToShapeTree<T extends TLShape, M extends Record<string, unknown>>(
shape.children
.map((id) => shapes[id])
.filter(Boolean) // TODO: Find cases where shapes would be missing.
.filter((childShape) => shapes[childShape.id]) // TODO: Find cases where shapes would be missing.
.sort((a, b) => a.childIndex - b.childIndex)
.forEach((childShape) =>
addToShapeTree(

65
packages/tldraw/src/state/TLDR.ts
View file

@ -382,8 +382,9 @@ export class TLDR {
static mutateShapes<T extends TDShape>(
data: TDSnapshot,
ids: string[],
fn: (shape: T, i: number) => Partial<T> | void,
pageId: string
fn: (shape: T, i: number) => any | void,
pageId: string,
isFlipping?: boolean
): {
before: Record<string, Partial<T>>
after: Record<string, Partial<T>>
@ -394,36 +395,46 @@ export class TLDR {
const shapes = data.document.pages?.[data.appState.currentPageId].shapes
const groupShape = shapes?.[ids[0]]
const isSingle = ids.length === 1
if (ids.length === 1 && groupShape?.type === 'group') {
groupShape.children.forEach((id, i) => {
const shape = TLDR.getShape<T>(data, id, pageId)
if (shape.isLocked) return
const change = fn(shape, i)
if (change) {
beforeShapes[id] = TLDR.getBeforeShape(shape, change)
afterShapes[id] = change
const mirror = (data: TDSnapshot, shapeId: string, pageId: string, index: number) => {
const shape = TLDR.getShape<T>(data, shapeId, pageId)
if (shape.isLocked) return
const change = fn(shape, index)
if (change) {
if (shape.children && isFlipping) {
console.log('hello')
shape.children.forEach((childId, i) => {
const childShape = TLDR.getShape<T>(data, childId, pageId)
const changeChild = fn(shape, i)
const pointY = change.dy ? change.dy + childShape.point[1] : childShape.point[1]
const pointX = change.dx ? change.dx + childShape.point[0] : childShape.point[0]
const nextChange: Partial<T> = {
...changeChild,
point: [pointX, pointY],
}
beforeShapes[childId] = {
point: childShape.point,
} as Partial<T>
afterShapes[childId] = nextChange
})
} else {
const nextChange = 'transformedValue' in change ? change.transformedValue : change
beforeShapes[shapeId] = TLDR.getBeforeShape(shape, nextChange)
afterShapes[shapeId] = nextChange
}
}
}
if (isSingle && groupShape?.children && isFlipping) {
groupShape.children.forEach((id, i) => {
mirror(data, id, pageId, i)
})
} else {
ids.forEach((id, i) => {
const shape = TLDR.getShape<T>(data, id, pageId)
if (shape.isLocked) return
if (shape.children) {
for (const [index, child] of shape.children.entries()) {
const childShape = TLDR.getShape<T>(data, child, pageId)
const change = fn(childShape, Number(index))
if (change) {
beforeShapes[child] = TLDR.getBeforeShape(shape, change)
afterShapes[child] = change
}
}
}
const change = fn(shape, i)
if (change) {
beforeShapes[id] = TLDR.getBeforeShape(shape, change)
afterShapes[id] = change
}
mirror(data, id, pageId, i)
})
}

3
packages/tldraw/src/state/commands/alignShapes/alignShapes.ts
View file

@ -48,7 +48,8 @@ export function alignShapes(app: TldrawApp, ids: string[], type: AlignType): Tld
if (!deltaMap[shape.id]) return shape
return { point: deltaMap[shape.id].next }
},
currentPageId
currentPageId,
false
)
initialShapes.forEach((shape) => {

8
packages/tldraw/src/state/commands/flipShapes/flipShapes.spec.ts
View file

@ -100,11 +100,11 @@ describe('Flip command', () => {
app.flipHorizontal()
expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([100, 0])
expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([0, 100])
expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
app.flipVertical()
expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([100, 100])
expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([0, 0])
expect(app.getShape<RectangleShape>('rect1').point).toStrictEqual([0, 0])
expect(app.getShape<RectangleShape>('rect2').point).toStrictEqual([100, 100])
})
})

42
packages/tldraw/src/state/commands/flipShapes/flipShapes.ts
View file

@ -1,8 +1,8 @@
import { TLBoundsCorner, Utils } from '@tldraw/core'
import { TLDR } from '~state/TLDR'
import type { TldrawApp } from '~state/TldrawApp'
import { FlipType } from '~types'
import type { TldrawCommand } from '~types'
import { TLBoundsCorner, Utils } from '@tldraw/core'
export function flipShapes(app: TldrawApp, ids: string[], type: FlipType): TldrawCommand {
const {
@ -29,14 +29,17 @@ export function flipShapes(app: TldrawApp, ids: string[], type: FlipType): Tldra
true,
false
)
return TLDR.getShapeUtil(shape).transform(shape, newShapeBounds, {
type: TLBoundsCorner.TopLeft,
scaleX: -1,
scaleY: 1,
initialShape: shape,
transformOrigin: [0.5, 0.5],
})
const dx = newShapeBounds.minX - shapeBounds.minX
return {
dx,
transformedValue: TLDR.getShapeUtil(shape).transform(shape, newShapeBounds, {
type: TLBoundsCorner.TopLeft,
scaleX: -1,
scaleY: 1,
initialShape: shape,
transformOrigin: [0.5, 0.5],
}),
}
}
case FlipType.Vertical: {
const newShapeBounds = Utils.getRelativeTransformedBoundingBox(
@ -46,18 +49,21 @@ export function flipShapes(app: TldrawApp, ids: string[], type: FlipType): Tldra
false,
true
)
return TLDR.getShapeUtil(shape).transform(shape, newShapeBounds, {
type: TLBoundsCorner.TopLeft,
scaleX: 1,
scaleY: -1,
initialShape: shape,
transformOrigin: [0.5, 0.5],
})
return {
dy: newShapeBounds.minY - shapeBounds.minY,
transformedValue: TLDR.getShapeUtil(shape).transform(shape, newShapeBounds, {
type: TLBoundsCorner.TopLeft,
scaleX: 1,
scaleY: -1,
initialShape: shape,
transformOrigin: [0.5, 0.5],
}),
}
}
}
},
currentPageId
currentPageId,
true
)
return {