refactor: move clipboard util script into custom hook

This commit is contained in:
trafficlunar 2025-02-08 13:16:46 +00:00
parent 14c026b81a
commit 4687330f02
4 changed files with 52 additions and 48 deletions

View file

@ -13,6 +13,7 @@ import { ToolContext } from "@/context/Tool";
import { useTextures } from "@/hooks/useTextures";
import { useBlockData } from "@/hooks/useBlockData";
import { useClipboard } from "@/hooks/useClipboard";
import { useMoveTool } from "@/hooks/tools/move";
import { useRectangleSelectTool } from "@/hooks/tools/rectangle-select";
@ -25,7 +26,6 @@ import { useEyedropperTool } from "@/hooks/tools/eyedropper";
import { useZoomTool } from "@/hooks/tools/zoom";
import * as selection from "@/utils/selection";
import * as clipboard from "@/utils/clipboard";
import Blocks from "./Blocks";
import Cursor from "./Cursor";
@ -67,6 +67,8 @@ function Canvas() {
const startBlocksRef = useRef<Block[]>([]);
const startSelectionCoordsRef = useRef<CoordinateArray>([]);
const clipboard = useClipboard();
const zoom = useCallback(
(newScale: number) => {
setScale(newScale);
@ -300,11 +302,11 @@ function Canvas() {
break;
case "c":
if (!e.ctrlKey) return;
clipboard.copy(selectionCoords, blocks);
clipboard.copy();
break;
case "v":
if (!e.ctrlKey) return;
clipboard.paste(setSelectionLayerBlocks, setSelectionCoords, setTool);
clipboard.paste();
break;
case "1":
setTool("hand");
@ -360,11 +362,12 @@ function Canvas() {
selectionLayerBlocks,
canvasSize,
blockData,
clipboard,
setBlocks,
setCssCursor,
setSelectionCoords,
setSelectionLayerBlocks,
setTool,
addHistory,
redo,
undo,
]

View file

@ -3,17 +3,17 @@ import { useContext } from "react";
import { CanvasContext } from "@/context/Canvas";
import { HistoryContext } from "@/context/History";
import { SelectionContext } from "@/context/Selection";
import { ToolContext } from "@/context/Tool";
import * as clipboard from "@/utils/clipboard";
import { useClipboard } from "@/hooks/useClipboard";
import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from "@/components/ui/menubar";
function EditMenu() {
const { blocks, setBlocks } = useContext(CanvasContext);
const { setBlocks } = useContext(CanvasContext);
const { undo, redo, isUndoAvailable, isRedoAvailable } = useContext(HistoryContext);
const { selectionCoords, setSelectionCoords, setSelectionLayerBlocks } = useContext(SelectionContext);
const { setTool } = useContext(ToolContext);
const { selectionCoords } = useContext(SelectionContext);
const clipboard = useClipboard();
const cut = () => {
setBlocks((prev) => prev.filter((b) => !selectionCoords.some(([x2, y2]) => x2 === b.x && y2 === b.y)));
@ -33,11 +33,11 @@ function EditMenu() {
</MenubarItem>
<MenubarSeparator />
<MenubarItem onClick={() => clipboard.copy(selectionCoords, blocks)}>
<MenubarItem onClick={clipboard.copy}>
Copy
<MenubarShortcut>Ctrl C</MenubarShortcut>
</MenubarItem>
<MenubarItem onClick={() => clipboard.paste(setSelectionLayerBlocks, setSelectionCoords, setTool)}>
<MenubarItem onClick={clipboard.paste}>
Paste
<MenubarShortcut>Ctrl V</MenubarShortcut>
</MenubarItem>