Implement clearing of drawables with mouse (#321)

* implement clear auto shapes button

* add setting to erase drawables on click

* use `clearShapes` instead of `setShapes` for removing drawables

* improve portuguese translation

* only update shapes if there are shapes

---------

Co-authored-by: Francisco Salgueiro <fgcdbs@gmail.com>

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]);
 

src/components/boards/Board.tsx

@@ -7,6 +7,7 @@ import {
   currentTabAtom,
   deckAtomFamily,
   enableBoardScrollAtom,
+  eraseDrawablesOnClickAtom,
   forcedEnPassantAtom,
   moveInputAtom,
   showArrowsAtom,
@@ -46,6 +47,7 @@ import {
   IconDeviceFloppy,
   IconEdit,
   IconEditOff,
+  IconEraser,
   IconPlus,
   IconSwitchVertical,
   IconTarget,
@@ -143,6 +145,7 @@ function Board({
   const storeMakeMove = useStore(store, (s) => s.makeMove);
   const setHeaders = useStore(store, (s) => s.setHeaders);
   const deleteMove = useStore(store, (s) => s.deleteMove);
+  const clearShapes = useStore(store, (s) => s.clearShapes);
   const setShapes = useStore(store, (s) => s.setShapes);
   const setFen = useStore(store, (s) => s.setFen);
 
@@ -152,6 +155,7 @@ function Board({
   const showDests = useAtomValue(showDestsAtom);
   const showArrows = useAtomValue(showArrowsAtom);
   const showConsecutiveArrows = useAtomValue(showConsecutiveArrowsAtom);
+  const eraseDrawablesOnClick = useAtomValue(eraseDrawablesOnClickAtom);
   const autoPromote = useAtomValue(autoPromoteAtom);
   const forcedEP = useAtomValue(forcedEnPassantAtom);
   const showCoordinates = useAtomValue(showCoordinatesAtom);
@@ -324,6 +328,17 @@ function Board({
             )}
           </ActionIcon>
         </Tooltip>
+        {!eraseDrawablesOnClick && (
+          <Tooltip label="Clear Drawings">
+            <ActionIcon
+              variant={editingMode ? "filled" : "default"}
+              size="lg"
+              onClick={() => clearShapes()}
+            >
+              <IconEraser size="1.3rem" />
+            </ActionIcon>
+          </Tooltip>
+        )}
         {!disableVariations && (
           <Tooltip label="Edit Position">
             <ActionIcon
@@ -588,6 +603,9 @@ function Board({
               }
               className={chessboard}
               ref={boardRef}
+              onClick={() => {
+                eraseDrawablesOnClick && clearShapes();
+              }}
               onWheel={(e) => {
                 if (enableBoardScroll) {
                   if (e.deltaY > 0) {

src/components/settings/SettingsPage.tsx

@@ -1,8 +1,8 @@
-import type { Dirs } from "@/App";
 import {
   autoPromoteAtom,
   autoSaveAtom,
   enableBoardScrollAtom,
+  eraseDrawablesOnClickAtom,
   forcedEnPassantAtom,
   minimumGamesAtom,
   moveInputAtom,
@@ -222,6 +222,20 @@ export default function Page() {
                 </div>
                 <SettingsSwitch atom={showConsecutiveArrowsAtom} />
               </Group>
+              <Group
+                justify="space-between"
+                wrap="nowrap"
+                gap="xl"
+                className={classes.item}
+              >
+                <div>
+                  <Text>{t("Settings.EraseDrawablesOnClick")}</Text>
+                  <Text size="xs" c="dimmed">
+                    {t("Settings.EraseDrawablesOnClick.Desc")}
+                  </Text>
+                </div>
+                <SettingsSwitch atom={eraseDrawablesOnClickAtom} />
+              </Group>
               <Group
                 justify="space-between"
                 wrap="nowrap"

src/state/atoms.ts

@@ -130,6 +130,10 @@ export const showConsecutiveArrowsAtom = atomWithStorage<boolean>(
   "show-consecutive-arrows",
   false,
 );
+export const eraseDrawablesOnClickAtom = atomWithStorage<boolean>(
+  "erase-drawables-on-click",
+  false,
+);
 export const autoPromoteAtom = atomWithStorage<boolean>("auto-promote", true);
 export const autoSaveAtom = atomWithStorage<boolean>("auto-save", true);
 export const previewBoardOnHoverAtom = atomWithStorage<boolean>(

src/state/store.ts

@@ -468,9 +468,9 @@ export const createTreeStore = (id?: string, initialTree?: TreeState) => {
     clearShapes: () =>
       set(
         produce((state) => {
-          state.dirty = true;
           const node = getNodeAtPath(state.root, state.position);
-          if (node) {
+          if (node && node.shapes.length > 0) {
+            state.dirty = true;
             node.shapes = [];
           }
         }),
@@ -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(

src/translation/en_US.ts

@@ -286,6 +286,9 @@ export const en_US = {
     "Settings.ConsecutiveArrows": "Consecutive Arrows",
     "Settings.ConsecutiveArrows.Desc":
       "Show multiple arrows for the best line, if it involves moving the same piece several times",
+    "Settings.EraseDrawablesOnClick": "Erase Drawables On Click",
+    "Settings.EraseDrawablesOnClick.Desc":
+      "Clear the board of drawn arrows & circles by left-clicking the mouse",
     "Settings.AutoPromition": "Auto Promotion",
     "Settings.AutoPromition.Desc":
       "Automatically promote to a queen when a pawn reaches the last rank",

src/translation/pt_PT.ts

@@ -285,6 +285,9 @@ export const pt_PT = {
     "Settings.ConsecutiveArrows": "Setas consecutivas",
     "Settings.ConsecutiveArrows.Desc":
       "Mostra várias setas para a melhor linha, caso ela consista em mover a mesma peça várias vezes",
+    "Settings.EraseDrawablesOnClick": "Apagar desenhos ao clicar",
+    "Settings.EraseDrawablesOnClick.Desc":
+      "Limpar o tabuleiro das setas e círculos desenhados ao clicar com o botão esquerdo do rato",
     "Settings.AutoPromition": "Auto Promoção",
     "Settings.AutoPromition.Desc": "Automaticamente promover para rainha",
     "Settings.Coordinates": "Coordenadas",

src/translation/zh_CN.ts

@@ -280,6 +280,9 @@ export const zh_CN = {
     "Settings.ConsecutiveArrows": "连续箭头",
     "Settings.ConsecutiveArrows.Desc":
       "如果最佳着法中会多次移动同一个棋子，显示多个箭头",
+    "Settings.EraseDrawablesOnClick": "单击时擦除可绘制对象",
+    "Settings.EraseDrawablesOnClick.Desc":
+      "通过单击鼠标左键清除棋盘上绘制的箭头和圆圈",
     "Settings.AutoPromition": "自动升变",
     "Settings.AutoPromition.Desc": "兵抵达底线时自动升变为后",
     "Settings.Coordinates": "坐标",