#37 Improve history undo/redo for ink

.github/workflows/lint.yml

@@ -4,12 +4,11 @@ on:
   push:
     branches: ["main"]
   pull_request:
-    # The branches below must be a subset of the branches above
     branches: ["main"]
 
 jobs:
-  codeCheck:
-    name: Run eslint scanning
+  setUp:
+    name: Set up environment
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -20,11 +19,44 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+  prettier:
+    name: Run Prettier
+    runs-on: ubuntu-latest
+    needs: setUp
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies (cached)
+        run: npm ci --prefer-offline
+
       - name: Run Prettier
         run: npm run prettier
 
+  nextLint:
+    name: Run ESLint
+    runs-on: ubuntu-latest
+    needs: setUp
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies (cached)
+        run: npm ci --prefer-offline
+
       - name: Run ESLint
         run: npm run lint
 
+  typescript:
+    name: TypeScript check
+    runs-on: ubuntu-latest
+    needs: setUp
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install dependencies (cached)
+        run: npm ci --prefer-offline
+
       - name: TypeScript check
         run: npm run tsc

components/Canvas.tsx

@@ -216,11 +216,7 @@ export default function Canvas() {
       fontFamily: "Arial",
     };
 
-    if (selectedTool.includes("add")) {
-      setNewObject(newObject);
-    } else {
-      dispatch(addCanvasObject(newObject));
-    }
+    setNewObject(newObject);
     dispatch(selectCanvasObject(newObjectId));
   };
 
@@ -255,11 +251,7 @@ export default function Canvas() {
         return;
     }
 
-    if (selectedTool.includes("add")) {
-      setNewObject(newShape);
-    } else {
-      dispatch(addCanvasObject(newShape));
-    }
+    setNewObject(newShape);
     dispatch(selectCanvasObject(newShapeId));
   };
 
@@ -302,7 +294,7 @@ export default function Canvas() {
         stroke: strokeColor,
         strokeWidth: strokeWidth,
       };
-      dispatch(addCanvasObject(newLine));
+      setNewObject(newLine);
       return;
     }
 
@@ -315,7 +307,7 @@ export default function Canvas() {
 
   const handleMouseMove = (e: any) => {
     // Creating new text/object is in progress
-    if (isInProgress && newObject) {
+    if (isInProgress && newObject && newObject.type !== "ink") {
       const stage = e.target.getStage();
       const point = stage.getPointerPosition();
 
@@ -337,24 +329,16 @@ export default function Canvas() {
     }
 
     // Freehand drawing (eraser or pen) in progress
-    if (isInProgress) {
+    if (isInProgress && newObject) {
       const stage = e.target.getStage();
       const point = stage.getPointerPosition();
 
-      const lastObject = canvasObjects[canvasObjects.length - 1];
-
-      if (lastObject.type === "ink") {
-        // Create a new object that copies the lastObject and updates points
-        const updatedObject = {
-          ...lastObject,
-          points: lastObject.points!.concat([point.x, point.y]),
-        };
+      const updatedObject = {
+        ...newObject,
+        points: newObject.points!.concat([point.x, point.y]),
+      };
 
-        // Dispatch the update with the new object
-        dispatch(
-          updateCanvasObject({ id: lastObject.id, updates: updatedObject }),
-        );
-      }
+      setNewObject(updatedObject);
     }
   };
 
@@ -378,7 +362,7 @@ export default function Canvas() {
         onMouseup={handleMouseUp}
         onTouchStart={handleMouseDown}
       >
-        <InkLayer objects={canvasObjects} />
+        <InkLayer objects={canvasObjects} newObject={newObject} />
         <ShapesLayer
           objects={canvasObjects}
           newObject={newObject}

components/ink/InkLayer.tsx

@@ -3,10 +3,14 @@ import { CanvasObjectType } from "../Canvas";
 
 type Props = {
   objects: CanvasObjectType[];
+  newObject: CanvasObjectType | null;
 };
 
-export default function InkLayer({ objects }: Props) {
-  const lines = objects.filter((obj: CanvasObjectType) => obj.type === "ink");
+export default function InkLayer({ objects, newObject }: Props) {
+  const lines = [
+    ...objects.filter((obj: CanvasObjectType) => obj.type === "ink"),
+    ...(newObject && newObject.type === "ink" ? [newObject] : []),
+  ];
 
   return (
     <Layer>