kopia lustrzana https://github.com/Tldraw/Tldraw
Adds undo for drawn shapes, zoom scales rdp
rodzic
c41def99d3
commit
bd02ca4fd9
|
@ -5,7 +5,6 @@ import {
|
||||||
VectorCodeControl,
|
VectorCodeControl,
|
||||||
} from "types"
|
} from "types"
|
||||||
import { v4 as uuid } from "uuid"
|
import { v4 as uuid } from "uuid"
|
||||||
import Vector from "./vector"
|
|
||||||
|
|
||||||
export const controls: Record<string, any> = {}
|
export const controls: Record<string, any> = {}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
import Command from "./command"
|
||||||
|
import history from "../history"
|
||||||
|
import { Data } from "types"
|
||||||
|
import { getPage } from "utils/utils"
|
||||||
|
import { getShapeUtils } from "lib/shape-utils"
|
||||||
|
import { current } from "immer"
|
||||||
|
|
||||||
|
export default function drawCommand(
|
||||||
|
data: Data,
|
||||||
|
id: string,
|
||||||
|
before: number[][],
|
||||||
|
after: number[][]
|
||||||
|
) {
|
||||||
|
const selectedIds = Array.from(data.selectedIds.values())
|
||||||
|
const restoreShape = current(getPage(data).shapes[id])
|
||||||
|
getShapeUtils(restoreShape).setPoints!(restoreShape, after)
|
||||||
|
|
||||||
|
history.execute(
|
||||||
|
data,
|
||||||
|
new Command({
|
||||||
|
name: "set_points",
|
||||||
|
category: "canvas",
|
||||||
|
manualSelection: true,
|
||||||
|
do(data, initial) {
|
||||||
|
if (!initial) {
|
||||||
|
getPage(data).shapes[id] = restoreShape
|
||||||
|
}
|
||||||
|
|
||||||
|
data.selectedIds.clear()
|
||||||
|
},
|
||||||
|
undo(data) {
|
||||||
|
delete getPage(data).shapes[id]
|
||||||
|
data.selectedIds.clear()
|
||||||
|
for (let id of selectedIds) {
|
||||||
|
data.selectedIds.add(id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
|
@ -4,7 +4,7 @@ import direct from "./direct"
|
||||||
import distribute from "./distribute"
|
import distribute from "./distribute"
|
||||||
import generate from "./generate"
|
import generate from "./generate"
|
||||||
import move from "./move"
|
import move from "./move"
|
||||||
import points from "./points"
|
import draw from "./draw"
|
||||||
import rotate from "./rotate"
|
import rotate from "./rotate"
|
||||||
import stretch from "./stretch"
|
import stretch from "./stretch"
|
||||||
import style from "./style"
|
import style from "./style"
|
||||||
|
@ -19,7 +19,7 @@ const commands = {
|
||||||
distribute,
|
distribute,
|
||||||
generate,
|
generate,
|
||||||
move,
|
move,
|
||||||
points,
|
draw,
|
||||||
rotate,
|
rotate,
|
||||||
stretch,
|
stretch,
|
||||||
style,
|
style,
|
||||||
|
|
|
@ -1,28 +0,0 @@
|
||||||
import Command from "./command"
|
|
||||||
import history from "../history"
|
|
||||||
import { Data } from "types"
|
|
||||||
import { getPage } from "utils/utils"
|
|
||||||
import { getShapeUtils } from "lib/shape-utils"
|
|
||||||
|
|
||||||
export default function pointsCommand(
|
|
||||||
data: Data,
|
|
||||||
id: string,
|
|
||||||
before: number[][],
|
|
||||||
after: number[][]
|
|
||||||
) {
|
|
||||||
history.execute(
|
|
||||||
data,
|
|
||||||
new Command({
|
|
||||||
name: "set_points",
|
|
||||||
category: "canvas",
|
|
||||||
do(data) {
|
|
||||||
const shape = getPage(data).shapes[id]
|
|
||||||
getShapeUtils(shape).setPoints!(shape, after)
|
|
||||||
},
|
|
||||||
undo(data) {
|
|
||||||
const shape = getPage(data).shapes[id]
|
|
||||||
getShapeUtils(shape).setPoints!(shape, before)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
|
@ -8,6 +8,7 @@ import commands from "state/commands"
|
||||||
|
|
||||||
export default class BrushSession extends BaseSession {
|
export default class BrushSession extends BaseSession {
|
||||||
origin: number[]
|
origin: number[]
|
||||||
|
previous: number[]
|
||||||
points: number[][]
|
points: number[][]
|
||||||
snapshot: DrawSnapshot
|
snapshot: DrawSnapshot
|
||||||
shapeId: string
|
shapeId: string
|
||||||
|
@ -16,7 +17,8 @@ export default class BrushSession extends BaseSession {
|
||||||
super(data)
|
super(data)
|
||||||
this.shapeId = id
|
this.shapeId = id
|
||||||
this.origin = point
|
this.origin = point
|
||||||
this.points = [[0, 0]]
|
this.previous = point
|
||||||
|
this.points = []
|
||||||
this.snapshot = getDrawSnapshot(data, id)
|
this.snapshot = getDrawSnapshot(data, id)
|
||||||
|
|
||||||
const page = getPage(data)
|
const page = getPage(data)
|
||||||
|
@ -27,7 +29,9 @@ export default class BrushSession extends BaseSession {
|
||||||
update = (data: Data, point: number[]) => {
|
update = (data: Data, point: number[]) => {
|
||||||
const { shapeId } = this
|
const { shapeId } = this
|
||||||
|
|
||||||
this.points.push(vec.sub(point, this.origin))
|
const lp = vec.med(this.previous, point)
|
||||||
|
this.points.push(vec.sub(lp, this.origin))
|
||||||
|
this.previous = lp
|
||||||
|
|
||||||
const page = getPage(data)
|
const page = getPage(data)
|
||||||
const shape = page.shapes[shapeId]
|
const shape = page.shapes[shapeId]
|
||||||
|
@ -42,11 +46,11 @@ export default class BrushSession extends BaseSession {
|
||||||
}
|
}
|
||||||
|
|
||||||
complete = (data: Data) => {
|
complete = (data: Data) => {
|
||||||
commands.points(
|
commands.draw(
|
||||||
data,
|
data,
|
||||||
this.shapeId,
|
this.shapeId,
|
||||||
this.snapshot.points,
|
this.snapshot.points,
|
||||||
simplify(this.points, 1).map(([x, y]) => [
|
simplify(this.points, 0.1 / data.camera.zoom).map(([x, y]) => [
|
||||||
Math.trunc(x * 100) / 100,
|
Math.trunc(x * 100) / 100,
|
||||||
Math.trunc(y * 100) / 100,
|
Math.trunc(y * 100) / 100,
|
||||||
])
|
])
|
||||||
|
|
|
@ -31,7 +31,6 @@ import {
|
||||||
DistributeType,
|
DistributeType,
|
||||||
AlignType,
|
AlignType,
|
||||||
StretchType,
|
StretchType,
|
||||||
DrawShape,
|
|
||||||
} from "types"
|
} from "types"
|
||||||
|
|
||||||
const initialData: Data = {
|
const initialData: Data = {
|
||||||
|
@ -928,7 +927,7 @@ const state = createState({
|
||||||
},
|
},
|
||||||
|
|
||||||
restoreSavedData(data) {
|
restoreSavedData(data) {
|
||||||
history.load(data)
|
// history.load(data)
|
||||||
},
|
},
|
||||||
|
|
||||||
clearBoundsRotation(data) {
|
clearBoundsRotation(data) {
|
||||||
|
|
Ładowanie…
Reference in New Issue