add setting to erase drawables on click

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

Hide file tree

Showing 6 changed files with 45 additions and 11 deletions.
diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -7,6 +7,7 @@ import {
   currentTabAtom,
   deckAtomFamily,
   enableBoardScrollAtom,
+  eraseDrawablesOnClickAtom,
   forcedEnPassantAtom,
   moveInputAtom,
   showArrowsAtom,
@@ -63,7 +64,7 @@ import {
 import { chessgroundDests, chessgroundMove } from "chessops/compat";
 import { makeSan } from "chessops/san";
 import { useAtom, useAtomValue } from "jotai";
-import { memo, useContext, useMemo, useRef, useState } from "react";
+import { memo, useContext, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { match } from "ts-pattern";
@@ -153,6 +154,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);
@@ -325,15 +327,17 @@ function Board({
             )}
           </ActionIcon>
         </Tooltip>
-        <Tooltip label="Clear Drawings">
-          <ActionIcon
-            variant={editingMode ? "filled" : "default"}
-            size="lg"
-            onClick={() => setShapes([])}
-          >
-            <IconEraser size="1.3rem" />
-          </ActionIcon>
-        </Tooltip>
+        {!eraseDrawablesOnClick && (
+          <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
@@ -598,6 +602,9 @@ function Board({
               }
               className={chessboard}
               ref={boardRef}
+              onClick={() => {
+                eraseDrawablesOnClick && setShapes([]);
+              }}
               onWheel={(e) => {
                 if (enableBoardScroll) {
                   if (e.deltaY > 0) {

diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
@@ -1,4 +1,3 @@
-import type { Dirs } from "@/App";
 import {
   autoPromoteAtom,
   autoSaveAtom,
@@ -13,6 +12,7 @@ import {
   previewBoardOnHoverAtom,
   showArrowsAtom,
   showConsecutiveArrowsAtom,
+  eraseDrawablesOnClickAtom,
   showCoordinatesAtom,
   showDestsAtom,
   snapArrowsAtom,
@@ -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"

diff --git a/src/state/atoms.ts b/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>(

diff --git a/src/translation/en_US.ts b/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",

diff --git a/src/translation/pt_PT.ts b/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 desenháveis ao clicar",
+    "Settings.EraseDrawablesOnClick.Desc":
+      "Limpe o tabuleiro de setas e círculos desenhados clicando com o botão esquerdo do mouse",
     "Settings.AutoPromition": "Auto Promoção",
     "Settings.AutoPromition.Desc": "Automaticamente promover para rainha",
     "Settings.Coordinates": "Coordenadas",

diff --git a/src/translation/zh_CN.ts b/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": "坐标",