diff --git a/components/toolbar/Toolbar.tsx b/components/toolbar/Toolbar.tsx index 7b54c54..872063a 100644 --- a/components/toolbar/Toolbar.tsx +++ b/components/toolbar/Toolbar.tsx @@ -14,8 +14,6 @@ import DrawIcon from "../icons/DrawIcon"; import DeleteIcon from "../icons/DeleteIcon"; import ShapesIcon from "../icons/ShapesIcon"; import { - Palette, - LineWeightRounded, CropSquareRounded, CircleOutlined, ChangeHistoryRounded, @@ -33,8 +31,9 @@ import { redo, selectCanvasObject, undo } from "@/redux/canvasSlice"; import { updateSelectedTool } from "@/redux/settingsSlice"; import SelectIcon from "../icons/SelectIcon"; import { setIsSidePanelOpen } from "@/redux/settingsSlice"; +import { setEraserSize } from "@/redux/eraserSlice"; -export function LineWeightSliderValueLabel(props: SliderValueLabelProps) { +export function NumberSliderValueLabel(props: SliderValueLabelProps) { const { children, value } = props; return ( @@ -52,6 +51,7 @@ type ToolbarProps = { function Toolbar({ objects, onDelete, isDarkMode }: ToolbarProps) { const dispatch = useDispatch(); + const { eraserSize } = useSelector((state: RootState) => state.eraser); const { undoStack, redoStack } = useSelector( (state: RootState) => state.canvas, @@ -73,25 +73,21 @@ function Toolbar({ objects, onDelete, isDarkMode }: ToolbarProps) { }; // stroke width - const [lineWeightAnchorEl, setLineWeightAnchorEl] = + const [eraserSizeAnchorEl, setEraserSizeAnchorEl] = useState(null); - const isLineWeightSliderAnchorElOpen = Boolean(lineWeightAnchorEl); + const isEraserSizeAnchorElOpen = Boolean(eraserSizeAnchorEl); - const handleClickLineWeightButton = ( + const handleClickEraserSizeButton = ( event: React.MouseEvent, ) => { - setLineWeightAnchorEl(event.currentTarget); + setEraserSizeAnchorEl(event.currentTarget); }; - const handleCloseLineWeightSlider = () => { - setLineWeightAnchorEl(null); + const handleCloseEraserSizeSlider = () => { + setEraserSizeAnchorEl(null); }; - // const handleChangeStrokeWidth = (value: number) => { - // setStrokeWidth(value); - // }; - return (
- {/* line weight */} - - - - - - {/* eraser */} { + onClick={(e) => { dispatch(updateSelectedTool("eraser")); dispatch(selectCanvasObject("")); // clear selected object, if there is + handleClickEraserSizeButton(e); }} > @@ -214,12 +201,11 @@ function Toolbar({ objects, onDelete, isDarkMode }: ToolbarProps) { - {/* lineWeightPopover */} - {/* handleChangeStrokeWidth(value as number)} + value={eraserSize} + onChange={(_, value) => dispatch(setEraserSize(value as number))} /> - */} + {/* shapesPopover */} diff --git a/components/toolbar/sidePanel/ShapePanel.tsx b/components/toolbar/sidePanel/ShapePanel.tsx index 9fb9a7f..5291def 100644 --- a/components/toolbar/sidePanel/ShapePanel.tsx +++ b/components/toolbar/sidePanel/ShapePanel.tsx @@ -8,7 +8,7 @@ import { Slider, } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; -import { LineWeightSliderValueLabel } from "../Toolbar"; +import { NumberSliderValueLabel } from "../Toolbar"; import MyColorPicker from "@/components/MyColorPicker"; import { RootState } from "@/redux/store"; import { useDispatch, useSelector } from "react-redux"; @@ -91,7 +91,7 @@ export default function ShapePanel({ max={100} valueLabelDisplay="auto" slots={{ - valueLabel: LineWeightSliderValueLabel, + valueLabel: NumberSliderValueLabel, }} aria-label="Border width" onChange={(_, value) =>