feat: edit menu - cut and clear selection

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<HTMLDivElement>(null);
@@ -42,7 +43,6 @@ function Canvas() {
 
 	const [holdingAlt, setHoldingAlt] = useState(false);
 	const [oldTool, setOldTool] = useState<Tool>("hand");
-	const [selectionBoxBounds, setSelectionBoxBounds] = useState<BoundingBox>({ minX: 0, minY: 0, maxX: 0, maxY: 0 });
 	const selectionBoxBoundsRef = useRef<BoundingBox>();
 
 	const visibleArea = useMemo(() => {

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 (
+		<MenubarMenu>
+			<MenubarTrigger>Edit</MenubarTrigger>
+			<MenubarContent>
+				<MenubarItem onClick={cut}>Cut</MenubarItem>
+
+				<MenubarSeparator />
+				<MenubarItem onClick={() => setSelectionBoxBounds({ minX: 0, minY: 0, maxX: 0, maxY: 0 })}>Clear Selection</MenubarItem>
+			</MenubarContent>
+		</MenubarMenu>
+	);
+}
+
+export default EditMenu;

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() {
 				</Link>
 
 				<FileMenu />
+				<EditMenu />
 				<ViewMenu />
 				<MoreMenu />
 

src/context/Tool.tsx

@@ -4,10 +4,12 @@ interface Context {
 	tool: Tool;
 	radius: number;
 	selectedBlock: string;
+	selectionBoxBounds: BoundingBox;
 	cssCursor: string;
 	setTool: React.Dispatch<React.SetStateAction<Tool>>;
 	setRadius: React.Dispatch<React.SetStateAction<number>>;
 	setSelectedBlock: React.Dispatch<React.SetStateAction<string>>;
+	setSelectionBoxBounds: React.Dispatch<React.SetStateAction<BoundingBox>>;
 	setCssCursor: React.Dispatch<React.SetStateAction<string>>;
 }
 
@@ -21,6 +23,7 @@ export const ToolProvider = ({ children }: Props) => {
 	const [tool, setTool] = useState<Tool>("hand");
 	const [radius, setRadius] = useState(1);
 	const [selectedBlock, setSelectedBlock] = useState("stone");
+	const [selectionBoxBounds, setSelectionBoxBounds] = useState<BoundingBox>({ 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 (
-		<ToolContext.Provider value={{ tool, radius, selectedBlock, cssCursor, setTool, setRadius, setSelectedBlock, setCssCursor }}>
+		<ToolContext.Provider
+			value={{
+				tool,
+				radius,
+				selectedBlock,
+				selectionBoxBounds,
+				cssCursor,
+				setTool,
+				setRadius,
+				setSelectedBlock,
+				setSelectionBoxBounds,
+				setCssCursor,
+			}}
+		>
 			{children}
 		</ToolContext.Provider>
 	);