implement clear auto shapes button

franciscoBSalgueiro · Jun 24, 2024 · 8ac4ec9 · 8ac4ec9
1 parent 3cc5a78
commit 8ac4ec9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/src/chessground/Chessground.tsx b/src/chessground/Chessground.tsx
@@ -16,7 +16,19 @@ export function Chessground(
   const moveMethod = useAtomValue(moveMethodAtom);
 
   useEffect(() => {
-    if (ref?.current && !api) {
+    if (ref?.current == null) return;
+    if (api) {
+      api?.set({
+        ...props,
+        events: {
+          change: () => {
+            if (props.setBoardFen && api) {
+              props.setBoardFen(api.getFen());
+            }
+          },
+        },
+      });
+    } else {
       const chessgroundApi = NativeChessground(ref.current, {
         ...props,
         events: {
@@ -36,17 +48,6 @@ export function Chessground(
         },
       });
       setApi(chessgroundApi);
-    } else if (ref?.current && api) {
-      api?.set({
-        ...props,
-        events: {
-          change: () => {
-            if (props.setBoardFen && api) {
-              props.setBoardFen(api.getFen());
-            }
-          },
-        },
-      });
     }
   }, [api, props, ref]);
 

diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -46,6 +46,7 @@ import {
   IconDeviceFloppy,
   IconEdit,
   IconEditOff,
+  IconEraser,
   IconPlus,
   IconSwitchVertical,
   IconTarget,
@@ -62,7 +63,7 @@ import {
 import { chessgroundDests, chessgroundMove } from "chessops/compat";
 import { makeSan } from "chessops/san";
 import { useAtom, useAtomValue } from "jotai";
-import { memo, useContext, useMemo, useState } from "react";
+import { memo, useContext, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { match } from "ts-pattern";
@@ -324,6 +325,15 @@ function Board({
             )}
           </ActionIcon>
         </Tooltip>
+        <Tooltip label="Clear Drawings">
+          <ActionIcon
+            variant={editingMode ? "filled" : "default"}
+            size="lg"
+            onClick={() => setShapes([])}
+          >
+            <IconEraser size="1.3rem" />
+          </ActionIcon>
+        </Tooltip>
         {!disableVariations && (
           <Tooltip label="Edit Position">
             <ActionIcon

diff --git a/src/state/store.ts b/src/state/store.ts
@@ -640,16 +640,23 @@ function promoteVariation(state: TreeState, path: number[]) {
 function setShapes(state: TreeState, shapes: DrawShape[]) {
   const node = getNodeAtPath(state.root, state.position);
   if (!node) return state;
-  const shape = shapes[0];
-  const index = node.shapes.findIndex(
-    (s) => s.orig === shape.orig && s.dest === shape.dest,
-  );
 
-  if (index !== -1) {
-    node.shapes.splice(index, 1);
+  const [shape] = shapes;
+  if (shape) {
+    const index = node.shapes.findIndex(
+      (s) => s.orig === shape.orig && s.dest === shape.dest,
+    );
+
+    if (index !== -1) {
+      node.shapes.splice(index, 1);
+    } else {
+      node.shapes.push(shape);
+    }
   } else {
-    node.shapes.push(shape);
+    node.shapes = [];
   }
+
+  return state;
 }
 
 function addAnalysis(