Improves translating, breaks save/load again
This commit is contained in:
parent
4a36ff7341
commit
94fcca1685
6 changed files with 40 additions and 26 deletions
|
@ -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) => {
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
|
|
|
@ -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),
|
||||
// })
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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('')
|
||||
|
||||
|
|
Loading…
Reference in a new issue