diff --git a/hooks/useCanvasEvents.ts b/hooks/useCanvasEvents.ts index d0bca431b..8c7326454 100644 --- a/hooks/useCanvasEvents.ts +++ b/hooks/useCanvasEvents.ts @@ -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) => { diff --git a/hooks/useShapeEvents.ts b/hooks/useShapeEvents.ts index 41a77cee8..5caa087ad 100644 --- a/hooks/useShapeEvents.ts +++ b/hooks/useShapeEvents.ts @@ -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] diff --git a/lib/shape-utils/rectangle.tsx b/lib/shape-utils/rectangle.tsx index f28e0bcac..45b6f4754 100644 --- a/lib/shape-utils/rectangle.tsx +++ b/lib/shape-utils/rectangle.tsx @@ -12,7 +12,7 @@ import { import { defaultStyle, getShapeStyle } from 'lib/shape-styles' import getStroke from 'perfect-freehand' -const pathCache = new WeakMap([]) +const pathCache = new WeakMap([]) const rectangle = registerShapeUtils({ boundsCache: new WeakMap([]), @@ -42,11 +42,11 @@ const rectangle = registerShapeUtils({ 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 ( @@ -163,5 +163,5 @@ function renderPath(shape: RectangleShape) { } ) - pathCache.set(shape, getSvgPathFromStroke(stroke)) + pathCache.set(shape.size, getSvgPathFromStroke(stroke)) } diff --git a/state/sessions/translate-session.ts b/state/sessions/translate-session.ts index b2b100622..db6b3c47d 100644 --- a/state/sessions/translate-session.ts +++ b/state/sessions/translate-session.ts @@ -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), - // }) }), } } diff --git a/state/storage.ts b/state/storage.ts index 8dbf09806..e6229306e 100644 --- a/state/storage.ts +++ b/state/storage.ts @@ -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) } diff --git a/utils/utils.ts b/utils/utils.ts index 30912be09..303aa3868 100644 --- a/utils/utils.ts +++ b/utils/utils.ts @@ -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('')