diff --git a/frontend/src/components/threads/ThreadCanvas.tsx b/frontend/src/components/threads/ThreadCanvas.tsx index 9ed2090..81b1fd8 100644 --- a/frontend/src/components/threads/ThreadCanvas.tsx +++ b/frontend/src/components/threads/ThreadCanvas.tsx @@ -68,11 +68,18 @@ export default () => { const activeLayer = layers.find (l => l.id === activeLayerId) const handleMouseDown = (ev: Konva.KonvaEventObject) => { - const pos = ev.target.getStage ()?.getPointerPosition () - if (!(pos) || !(activeLayer)) + if (!(activeLayer)) return drawingRef.current = true + + updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines]) + updateActiveLayerFuture ([]) + + const pos = ev.target.getStage ()?.getPointerPosition () + if (!(pos)) + return + const lines: Line[] = [ ...activeLayer.lines, { mode, @@ -106,20 +113,20 @@ export default () => { if (!(activeLayer) || activeLayer.lines.length === 0) return - const prev = activeLayer.lines.slice (0, -1) - const popped = activeLayer.lines[activeLayer.lines.length - 1] - updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines]) - updateActiveLayerFuture ([popped, ...activeLayer.future]) + const prev = activeLayer.history[activeLayer.history.length - 1] + updateActiveLayerFuture ([...activeLayer.future, activeLayer.lines]) updateActiveLayerLines (prev) + updateActiveLayerHistory (activeLayer.history.slice (0, -1)) } const handleRedo = () => { if (!(activeLayer) || activeLayer.future.length === 0) return - const [redoStroke, ...rest] = activeLayer.future - updateActiveLayerLines ([...activeLayer.lines, redoStroke]) - updateActiveLayerFuture (rest) + const next = activeLayer.future[activeLayer.future.length - 1] + updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines]) + updateActiveLayerLines (next) + updateActiveLayerFuture (activeLayer.future.slice (0, -1)) } const handleImportImage: ChangeEventHandler = ev => {