diff --git a/src/components/controls/DrawingToolSettings.tsx b/src/components/controls/DrawingToolSettings.tsx
index b36fa81..8a5f8e4 100644
--- a/src/components/controls/DrawingToolSettings.tsx
+++ b/src/components/controls/DrawingToolSettings.tsx
@@ -1,5 +1,5 @@
import { useEffect } from "react";
-import { Flex, IconButton } from "theme-ui";
+import { Flex } from "theme-ui";
import { useMedia } from "react-media";
import RadioIconButton from "../RadioIconButton";
@@ -15,7 +15,6 @@ import BrushLineIcon from "../../icons/BrushLineIcon";
import BrushRectangleIcon from "../../icons/BrushRectangleIcon";
import BrushCircleIcon from "../../icons/BrushCircleIcon";
import BrushTriangleIcon from "../../icons/BrushTriangleIcon";
-import EraseAllIcon from "../../icons/EraseAllIcon";
import EraseIcon from "../../icons/EraseToolIcon";
import Divider from "../Divider";
@@ -28,6 +27,7 @@ import {
DrawingToolSettings as DrawingToolSettingsType,
DrawingToolType,
} from "../../types/Drawing";
+import EraseAllButton from "./shared/EraseAllButton";
type DrawingToolSettingsProps = {
settings: DrawingToolSettingsType;
@@ -138,14 +138,10 @@ function DrawingToolSettings({
>
- onToolAction("eraseAll")}
+
-
-
+ />
void;
+ disabled: boolean;
+};
+
+function EraseAllButton({ onToolAction, disabled }: EraseAllButtonProps) {
+ const [isEraseAllConfirmOpen, setIsEraseAllConfirmOpen] = useState(false);
+
+ const buttonRef = useRef(null);
+ const [menuLeft, setMenuLeft] = useState(0);
+ const [menuTop, setMenuTop] = useState(0);
+ useEffect(() => {
+ const button = buttonRef.current;
+ if (isEraseAllConfirmOpen && button) {
+ const rect = button.getBoundingClientRect();
+ setMenuLeft(rect.left + rect.width / 2);
+ setMenuTop(rect.bottom + 8);
+ }
+ }, [isEraseAllConfirmOpen]);
+
+ return (
+ <>
+ setIsEraseAllConfirmOpen(true)}
+ disabled={disabled}
+ ref={buttonRef}
+ >
+
+
+ setIsEraseAllConfirmOpen(false)}
+ left={menuLeft}
+ top={menuTop}
+ style={{ transform: "translateX(-50%)" }}
+ >
+
+
+ >
+ );
+}
+
+export default EraseAllButton;