#3

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<MouseEvent | TouchEvent>) => {
-    const pos = ev.target.getStage ()?.getPointerPosition ()
+    if (!(activeLayer))
-    if (!(pos) || !(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 prev = activeLayer.history[activeLayer.history.length - 1]
-    const popped = activeLayer.lines[activeLayer.lines.length - 1]
+    updateActiveLayerFuture ([...activeLayer.future, activeLayer.lines])
-    updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines])
-    updateActiveLayerFuture ([popped, ...activeLayer.future])
     updateActiveLayerLines (prev)
+    updateActiveLayerHistory (activeLayer.history.slice (0, -1))
   }
 
   const handleRedo = () => {
     if (!(activeLayer) || activeLayer.future.length === 0)
       return
 
-    const [redoStroke, ...rest] = activeLayer.future
+    const next = activeLayer.future[activeLayer.future.length - 1]
-    updateActiveLayerLines ([...activeLayer.lines, redoStroke])
+    updateActiveLayerHistory ([...activeLayer.history, activeLayer.lines])
-    updateActiveLayerFuture (rest)
+    updateActiveLayerLines (next)
+    updateActiveLayerFuture (activeLayer.future.slice (0, -1))
   }
 
   const handleImportImage: ChangeEventHandler<HTMLInputElement> = ev => {