diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 7a52c56..4b1e4e1 100644 --- a/src/components/canvas/Canvas.tsx +++ b/src/components/canvas/Canvas.tsx @@ -30,7 +30,8 @@ function Canvas() { const { settings } = useContext(SettingsContext); const { missingTexture, solidTextures } = useContext(TexturesContext); const { isDark } = useContext(ThemeContext); - const { tool, radius, selectedBlock, cssCursor, setTool, setSelectedBlock, setCssCursor } = useContext(ToolContext); + const { tool, radius, selectedBlock, selectionBoxBounds, cssCursor, setTool, setSelectedBlock, setSelectionBoxBounds, setCssCursor } = + useContext(ToolContext); const textures = useTextures(version); const stageContainerRef = useRef(null); @@ -42,7 +43,6 @@ function Canvas() { const [holdingAlt, setHoldingAlt] = useState(false); const [oldTool, setOldTool] = useState("hand"); - const [selectionBoxBounds, setSelectionBoxBounds] = useState({ minX: 0, minY: 0, maxX: 0, maxY: 0 }); const selectionBoxBoundsRef = useRef(); const visibleArea = useMemo(() => { diff --git a/src/components/menubar/EditMenu.tsx b/src/components/menubar/EditMenu.tsx new file mode 100644 index 0000000..afbccc8 --- /dev/null +++ b/src/components/menubar/EditMenu.tsx @@ -0,0 +1,33 @@ +import { useContext } from "react"; + +import { CanvasContext } from "@/context/Canvas"; +import { ToolContext } from "@/context/Tool"; + +import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@/components/ui/menubar"; + +function EditMenu() { + const { setBlocks } = useContext(CanvasContext); + const { selectionBoxBounds, setSelectionBoxBounds } = useContext(ToolContext); + + const cut = () => { + setBlocks((prev) => + prev.filter( + (b) => !(b.x >= selectionBoxBounds.minX && b.x < selectionBoxBounds.maxX && b.y >= selectionBoxBounds.minY && b.y < selectionBoxBounds.maxY) + ) + ); + }; + + return ( + + Edit + + Cut + + + setSelectionBoxBounds({ minX: 0, minY: 0, maxX: 0, maxY: 0 })}>Clear Selection + + + ); +} + +export default EditMenu; diff --git a/src/components/menubar/index.tsx b/src/components/menubar/index.tsx index e39e0e4..9723d1c 100644 --- a/src/components/menubar/index.tsx +++ b/src/components/menubar/index.tsx @@ -7,6 +7,7 @@ import { ThemeContext } from "@/context/Theme"; import { Menubar as UIMenubar } from "@/components/ui/menubar"; import FileMenu from "./FileMenu"; +import EditMenu from "./EditMenu"; import ViewMenu from "./ViewMenu"; import MoreMenu from "./MoreMenu"; @@ -24,6 +25,7 @@ function Menubar() { + diff --git a/src/context/Tool.tsx b/src/context/Tool.tsx index 3fd4463..b5b04c3 100644 --- a/src/context/Tool.tsx +++ b/src/context/Tool.tsx @@ -4,10 +4,12 @@ interface Context { tool: Tool; radius: number; selectedBlock: string; + selectionBoxBounds: BoundingBox; cssCursor: string; setTool: React.Dispatch>; setRadius: React.Dispatch>; setSelectedBlock: React.Dispatch>; + setSelectionBoxBounds: React.Dispatch>; setCssCursor: React.Dispatch>; } @@ -21,6 +23,7 @@ export const ToolProvider = ({ children }: Props) => { const [tool, setTool] = useState("hand"); const [radius, setRadius] = useState(1); const [selectedBlock, setSelectedBlock] = useState("stone"); + const [selectionBoxBounds, setSelectionBoxBounds] = useState({ minX: 0, minY: 0, maxX: 0, maxY: 0 }); const [cssCursor, setCssCursor] = useState("crosshair"); useEffect(() => { @@ -39,7 +42,20 @@ export const ToolProvider = ({ children }: Props) => { }, [tool]); return ( - + {children} );