Improves translating, breaks save/load again

This commit is contained in:
Steve Ruiz 2021-06-13 15:12:59 +01:00
parent 4a36ff7341
commit 94fcca1685
6 changed files with 40 additions and 26 deletions

View file

@ -1,6 +1,6 @@
import { MutableRefObject, useCallback } from 'react'
import state from 'state'
import { fastBrushSelect, fastDrawUpdate } from 'state/hacks'
import { fastBrushSelect, fastDrawUpdate, fastTranslate } from 'state/hacks'
import inputs from 'state/inputs'
import { isMobile } from 'utils/utils'
@ -30,18 +30,24 @@ export default function useCanvasEvents(
const handlePointerMove = useCallback((e: React.PointerEvent) => {
if (!inputs.canAccept(e.pointerId)) return
const info = inputs.pointerMove(e)
if (state.isIn('draw.editing')) {
fastDrawUpdate(inputs.pointerMove(e))
fastDrawUpdate(info)
return
}
if (state.isIn('brushSelecting')) {
const info = inputs.pointerMove(e)
fastBrushSelect(info.point)
return
}
state.send('MOVED_POINTER', inputs.pointerMove(e))
if (state.isIn('translatingSelection')) {
fastTranslate(info)
return
}
state.send('MOVED_POINTER', info)
}, [])
const handlePointerUp = useCallback((e: React.PointerEvent) => {

View file

@ -14,14 +14,16 @@ export default function useShapeEvents(
e.stopPropagation()
rGroup.current.setPointerCapture(e.pointerId)
const info = inputs.pointerDown(e, id)
if (e.button === 0) {
if (inputs.isDoubleClick()) {
state.send('DOUBLE_POINTED_SHAPE', inputs.pointerDown(e, id))
if (inputs.isDoubleClick() && !(info.altKey || info.metaKey)) {
state.send('DOUBLE_POINTED_SHAPE', info)
}
state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
state.send('POINTED_SHAPE', info)
} else {
state.send('RIGHT_POINTED', inputs.pointerDown(e, id))
state.send('RIGHT_POINTED', info)
}
},
[id]

View file

@ -12,7 +12,7 @@ import {
import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
import getStroke from 'perfect-freehand'
const pathCache = new WeakMap<RectangleShape, string>([])
const pathCache = new WeakMap<number[], string>([])
const rectangle = registerShapeUtils<RectangleShape>({
boundsCache: new WeakMap([]),
@ -42,11 +42,11 @@ const rectangle = registerShapeUtils<RectangleShape>({
const { id, size, radius, style } = shape
const styles = getShapeStyle(style)
if (!pathCache.has(shape)) {
if (!pathCache.has(shape.size)) {
renderPath(shape)
}
const path = pathCache.get(shape)
const path = pathCache.get(shape.size)
return (
<g id={id}>
@ -163,5 +163,5 @@ function renderPath(shape: RectangleShape) {
}
)
pathCache.set(shape, getSvgPathFromStroke(stroke))
pathCache.set(shape.size, getSvgPathFromStroke(stroke))
}

View file

@ -56,6 +56,7 @@ export default class TranslateSession extends BaseSession {
for (const { id, point } of initialShapes) {
const shape = shapes[id]
getShapeUtils(shape).translateTo(shape, point)
shapes[shape.id] = { ...shape }
}
for (const clone of clones) {
@ -65,6 +66,8 @@ export default class TranslateSession extends BaseSession {
getShapeUtils(shape).translateBy(shape, delta)
shapes[clone.id] = { ...shape }
const parent = shapes[shape.parentId]
if (!parent) continue
@ -73,12 +76,15 @@ export default class TranslateSession extends BaseSession {
...parent.children,
shape.id,
])
shapes[shape.parentId] = { ...parent }
}
}
for (const { id } of clones) {
const shape = shapes[id]
getShapeUtils(shape).translateBy(shape, trueDelta)
shapes[id] = { ...shape }
}
setSelectedIds(
@ -107,19 +113,22 @@ export default class TranslateSession extends BaseSession {
getDocumentBranch(data, initialShape.id).forEach((id) => {
const shape = shapes[id]
getShapeUtils(shape).translateBy(shape, delta)
shapes[id] = { ...shape }
})
}
initialParents.forEach(
(parent) =>
((shapes[parent.id] as GroupShape).children = parent.children)
)
initialParents.forEach((parent) => {
const shape = shapes[parent.id] as GroupShape
shapes[parent.id] = { ...shape, children: parent.children }
})
}
for (const initialShape of initialShapes) {
getDocumentBranch(data, initialShape.id).forEach((id) => {
const shape = shapes[id]
getShapeUtils(shape).translateBy(shape, trueDelta)
shapes[id] = { ...shape }
})
}
@ -204,7 +213,6 @@ export function getTranslateSnapshot(data: Data) {
clones: selectedShapes
.filter((shape) => shape.type !== ShapeType.Group)
.flatMap((shape) => {
// TODO: Clone children recursively
const clone = {
...shape,
id: uuid(),
@ -214,13 +222,6 @@ export function getTranslateSnapshot(data: Data) {
}
return clone
// cloneGroup(cData, {
// ...shape,
// id: uuid(),
// parentId: shape.parentId,
// childIndex: getChildIndexAbove(cData, shape.id),
// })
}),
}
}

View file

@ -6,7 +6,7 @@ import { current } from 'immer'
import { v4 as uuid } from 'uuid'
import * as idb from 'idb-keyval'
const CURRENT_VERSION = 'code_slate_0.0.6'
const CURRENT_VERSION = 'code_slate_0.0.7'
const DOCUMENT_ID = '0001'
function storageId(fileId: string, label: string, id?: string) {
@ -27,7 +27,7 @@ class Storage {
this.loadPage(data, data.currentPageId)
// this.saveToLocalStorage(data, data.document.id)
this.saveToLocalStorage(data, data.document.id)
localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
}

View file

@ -1636,6 +1636,8 @@ export function updateParents(data: Data, changedShapeIds: string[]) {
parent,
parent.children.map((id) => shapes[id])
)
shapes[parentId] = { ...parent }
}
updateParents(data, parentToUpdateIds)
@ -1770,6 +1772,7 @@ export function getPoint(
}
export function lzw_encode(s: string) {
return s
const dict = {}
const data = (s + '').split('')
@ -1803,6 +1806,8 @@ export function lzw_encode(s: string) {
// Decompress an LZW-encoded string
export function lzw_decode(s: string) {
return s
const dict = {}
const data = (s + '').split('')