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

implements alignment

Browse source
This commit is contained in:
Steve Ruiz 2021-05-26 20:34:57 +01:00
parent ab50d76e6e
commit 25fc384216
1 changed files with 56 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
state/commands/align.ts
View file

@ -1,17 +1,19 @@
import Command from "./command" import Command from "./command"
import history from "../history" import history from "../history"
import { AlignType, Data } from "types" import { AlignType, Data } from "types"
import { getPage } from "utils/utils" import { getCommonBounds, getPage, getSelectedShapes } from "utils/utils"
import { getShapeUtils } from "lib/shape-utils" import { getShapeUtils } from "lib/shape-utils"
export default function alignCommand(data: Data, type: AlignType) { export default function alignCommand(data: Data, type: AlignType) {
const { currentPageId } = data const { currentPageId } = data
const initialPoints = Object.fromEntries( const selectedShapes = getSelectedShapes(data)
Object.entries(getPage(data).shapes).map(([id, shape]) => [ const entries = selectedShapes.map(
id, (shape) => [shape.id, getShapeUtils(shape).getBounds(shape)] as const
[...shape.point],
])
) )
const boundsForShapes = Object.fromEntries(entries)
const commonBounds = getCommonBounds(...entries.map((entry) => entry[1]))
const midX = commonBounds.minX + commonBounds.width / 2
const midY = commonBounds.minY + commonBounds.height / 2
history.execute( history.execute(
data, data,
@ -23,30 +25,76 @@ export default function alignCommand(data: Data, type: AlignType) {
switch (type) { switch (type) {
case AlignType.Top: { case AlignType.Top: {
for (let id in boundsForShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, [
shape.point[0],
commonBounds.minY,
])
}
break break
} }
case AlignType.CenterVertical: { case AlignType.CenterVertical: {
for (let id in boundsForShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, [
shape.point[0],
midY - boundsForShapes[id].height / 2,
])
}
break break
} }
case AlignType.Bottom: { case AlignType.Bottom: {
for (let id in boundsForShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, [
shape.point[0],
commonBounds.maxY - boundsForShapes[id].height,
])
}
break break
} }
case AlignType.Left: { case AlignType.Left: {
for (let id in boundsForShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, [
commonBounds.minX,
shape.point[1],
])
}
break break
} }
case AlignType.CenterHorizontal: { case AlignType.CenterHorizontal: {
for (let id in boundsForShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, [
midX - boundsForShapes[id].width / 2,
shape.point[1],
])
}
break break
} }
case AlignType.Right: { case AlignType.Right: {
for (let id in boundsForShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, [
commonBounds.maxX - boundsForShapes[id].width,
shape.point[1],
])
}
break break
} }
} }
}, },
undo(data) { undo(data) {
const { shapes } = getPage(data, currentPageId) const { shapes } = getPage(data, currentPageId)
for (let id in initialPoints) { for (let id in boundsForShapes) {
const shape = shapes[id] const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, initialPoints[id]) const initialBounds = boundsForShapes[id]
getShapeUtils(shape).translateTo(shape, [
initialBounds.minX,
initialBounds.minY,
])
} }
}, },
}) })