diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
index f9ec202..c7bca4d 100644
--- a/src/components/canvas/Canvas.tsx
+++ b/src/components/canvas/Canvas.tsx
@@ -41,7 +41,7 @@ PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
function Canvas() {
const { stageSize, canvasSize, blocks, coords, scale, version, setStageSize, setBlocks, setCoords, setScale } = useContext(CanvasContext);
const { addHistory, undo, redo } = useContext(HistoryContext);
- const { selectionCoords, selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks, confirmSelection } = useContext(SelectionContext);
+ const { selectionCoords, selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks } = useContext(SelectionContext);
const { settings } = useContext(SettingsContext);
const { missingTexture } = useContext(TexturesContext);
const { isDark } = useContext(ThemeContext);
@@ -245,11 +245,23 @@ function Canvas() {
async (e: React.KeyboardEvent) => {
switch (e.key) {
case "Escape":
+ setBlocks(startBlocksRef.current);
setSelectionLayerBlocks([]);
break;
- case "Enter":
- confirmSelection();
+ case "Enter": {
+ const combinedBlocks = [...blocks, ...selectionLayerBlocks];
+ const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values());
+
+ setBlocks(uniqueBlocks);
+ setSelectionLayerBlocks([]);
+
+ addHistory(
+ "Move Selection",
+ () => setBlocks(uniqueBlocks),
+ () => setBlocks(startBlocksRef.current)
+ );
break;
+ }
case " ": // Space
setDragging(true);
oldToolRef.current = tool;
@@ -364,11 +376,11 @@ function Canvas() {
},
[
tool,
- blocks,
selectionCoords,
- selectionLayerBlocks,
canvasSize,
blockData,
+ blocks,
+ selectionLayerBlocks,
clipboard,
setBlocks,
setSelectionCoords,
@@ -487,7 +499,7 @@ function Canvas() {
-
+
);
}
diff --git a/src/components/canvas/SelectionBar.tsx b/src/components/canvas/SelectionBar.tsx
index 6fcfa78..665fba8 100644
--- a/src/components/canvas/SelectionBar.tsx
+++ b/src/components/canvas/SelectionBar.tsx
@@ -1,15 +1,52 @@
import { useContext, useEffect, useState } from "react";
import { CheckIcon, XIcon } from "lucide-react";
+import { HistoryContext } from "@/context/History";
import { SelectionContext } from "@/context/Selection";
import { Button } from "@/components/ui/button";
+import { CanvasContext } from "@/context/Canvas";
-function SelectionBar() {
- const { selectionLayerBlocks, setSelectionLayerBlocks, confirmSelection } = useContext(SelectionContext);
+interface Props {
+ startBlocks: Block[];
+ startSelectionCoords: CoordinateArray;
+}
+
+function SelectionBar({ startBlocks, startSelectionCoords }: Props) {
+ const { blocks, setBlocks } = useContext(CanvasContext);
+ const { addHistory } = useContext(HistoryContext);
+ const { selectionCoords, selectionLayerBlocks, setSelectionCoords, setSelectionLayerBlocks } = useContext(SelectionContext);
const [isVisible, setIsVisible] = useState(false);
+ const confirm = () => {
+ const oldSelectionCoords = [...selectionCoords];
+
+ const combinedBlocks = [...blocks, ...selectionLayerBlocks];
+ const uniqueBlocks = Array.from(new Map(combinedBlocks.map((block) => [`${block.x},${block.y}`, block])).values());
+
+ setBlocks(uniqueBlocks);
+ setSelectionLayerBlocks([]);
+
+ addHistory(
+ "Move Selection",
+ () => {
+ setBlocks(uniqueBlocks);
+ setSelectionCoords(oldSelectionCoords);
+ },
+ () => {
+ setBlocks(startBlocks);
+ setSelectionCoords(startSelectionCoords);
+ }
+ );
+ };
+
+ const cancel = () => {
+ setBlocks(startBlocks);
+ setSelectionLayerBlocks([]);
+ setSelectionCoords(startSelectionCoords);
+ };
+
useEffect(() => {
setIsVisible(selectionLayerBlocks.length !== 0);
}, [selectionLayerBlocks]);
@@ -20,12 +57,11 @@ function SelectionBar() {
${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6 pointer-events-none"}
`}
>
- {/* todo: place back blocks removed */}
-