diff --git a/src/components/dialogs/SaveImage.tsx b/src/components/dialogs/SaveImage.tsx index 7bcf6a6..8031965 100644 --- a/src/components/dialogs/SaveImage.tsx +++ b/src/components/dialogs/SaveImage.tsx @@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input"; import { useTextures } from "@/hooks/useTextures"; -function SaveImage({ close }: DialogProps) { +function SaveImage({ close, registerSubmit, dialogKeyHandler }: DialogProps) { const { blocks, canvasSize, version } = useContext(CanvasContext); const { missingTexture } = useContext(TexturesContext); @@ -59,15 +59,17 @@ function SaveImage({ close }: DialogProps) { close(); }; + registerSubmit(onSubmit); + return ( - + Save as image (.png) Save your canvas as a full size image
- setFileName(e.target.value)} /> + setFileName(e.target.value)} autoFocus /> .png
diff --git a/src/components/dialogs/SaveLitematic.tsx b/src/components/dialogs/SaveLitematic.tsx index 8702f1b..4298ee5 100644 --- a/src/components/dialogs/SaveLitematic.tsx +++ b/src/components/dialogs/SaveLitematic.tsx @@ -19,7 +19,7 @@ type BlockStatePalette = { Properties?: Record; }[]; -function SaveLitematic({ close }: DialogProps) { +function SaveLitematic({ close, registerSubmit, dialogKeyHandler }: DialogProps) { const { canvasSize, blocks, version } = useContext(CanvasContext); const { setLoading } = useContext(LoadingContext); @@ -164,15 +164,17 @@ function SaveLitematic({ close }: DialogProps) { close(); }; + registerSubmit(onSubmit); + return ( - + Save as .litematic Save your image as a litematic
- setFileName(e.target.value)} /> + setFileName(e.target.value)} autoFocus /> .litematic
diff --git a/src/components/dialogs/SaveSchem.tsx b/src/components/dialogs/SaveSchem.tsx index f9e95ed..e4e928a 100644 --- a/src/components/dialogs/SaveSchem.tsx +++ b/src/components/dialogs/SaveSchem.tsx @@ -43,7 +43,7 @@ const blockEntitiesWhitelist = [ "vault", ]; -function SaveSchem({ close }: DialogProps) { +function SaveSchem({ close, registerSubmit, dialogKeyHandler }: DialogProps) { const { canvasSize, blocks, version } = useContext(CanvasContext); const { setLoading } = useContext(LoadingContext); @@ -166,15 +166,17 @@ function SaveSchem({ close }: DialogProps) { close(); }; + registerSubmit(onSubmit); + return ( - + Save as .schem Save your image as a .schem (Sponge Version 3)
- setFileName(e.target.value)} /> + setFileName(e.target.value)} autoFocus /> .schem
diff --git a/src/components/dialogs/SetCoords.tsx b/src/components/dialogs/SetCoords.tsx index ba9819d..f53701a 100644 --- a/src/components/dialogs/SetCoords.tsx +++ b/src/components/dialogs/SetCoords.tsx @@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -function SetCoords({ close }: DialogProps) { +function SetCoords({ close, registerSubmit, dialogKeyHandler }: DialogProps) { const { stageSize, coords, scale, setCoords } = useContext(CanvasContext); const [newTilemapCoords, setNewTilemapCoords] = useState(coords); @@ -30,6 +30,8 @@ function SetCoords({ close }: DialogProps) { close(); }; + registerSubmit(onSubmit); + // Sets the current coordinates when the dialog is first opened useEffect(() => { // Get center of screen @@ -47,7 +49,7 @@ function SetCoords({ close }: DialogProps) { }, []); return ( - + Set Coordinates Set your coordinates to a particular position @@ -62,6 +64,7 @@ function SetCoords({ close }: DialogProps) { placeholder="X" value={newTilemapCoords.x} onChange={(e) => setNewTilemapCoords((prev) => ({ ...prev, x: parseInt(e.target.value) }))} + autoFocus /> diff --git a/src/components/dialogs/SetScale.tsx b/src/components/dialogs/SetScale.tsx index 668b0f1..010f556 100644 --- a/src/components/dialogs/SetScale.tsx +++ b/src/components/dialogs/SetScale.tsx @@ -6,7 +6,7 @@ import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTit import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -function SetScale({ close }: DialogProps) { +function SetScale({ close, registerSubmit, dialogKeyHandler }: DialogProps) { const { scale, setScale } = useContext(CanvasContext); const [newScale, setNewScale] = useState(scale * 100); @@ -16,14 +16,16 @@ function SetScale({ close }: DialogProps) { close(); }; + registerSubmit(onSubmit); + return ( - + Set Scale Set your scale to a particular percentage - setNewScale(parseInt(e.target.value))} /> + setNewScale(parseInt(e.target.value))} autoFocus /> - diff --git a/src/context/Dialog.tsx b/src/context/Dialog.tsx index e6213f8..2d54cc7 100644 --- a/src/context/Dialog.tsx +++ b/src/context/Dialog.tsx @@ -1,5 +1,5 @@ import { Dialog } from "@/components/ui/dialog"; -import { createContext, lazy, ReactNode, Suspense, useState } from "react"; +import { createContext, lazy, ReactNode, Suspense, useRef, useState } from "react"; type Context = (id: string) => void; @@ -13,19 +13,29 @@ export const DialogProvider = ({ children }: Props) => { const [open, setOpen] = useState(false); const [id, setId] = useState(""); + const onSubmitRef = useRef<(() => void) | null>(null); + const openDialog = (id: string) => { setId(id); setOpen(true); }; - const LazyDialogContent = id ? lazy(() => import(`@/components/dialogs/${id}.tsx`)) : null; + const dialogKeyHandler = (e: React.KeyboardEvent) => { + if (!onSubmitRef.current) return; + if (e.key !== "Enter") return; + + onSubmitRef.current(); + close(); + }; + + const LazyDialogContent = id ? lazy>(() => import(`@/components/dialogs/${id}.tsx`)) : null; return ( setOpen(value)}> {LazyDialogContent && ( Loading dialog...}> - setOpen(false)} /> + setOpen(false)} registerSubmit={(fn) => (onSubmitRef.current = fn)} dialogKeyHandler={dialogKeyHandler} /> )} diff --git a/src/types.d.ts b/src/types.d.ts index fda4a6f..e11035f 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -36,6 +36,8 @@ interface Settings { interface DialogProps { close: () => void; + registerSubmit: (fn: () => void) => void; + dialogKeyHandler: (e: React.KeyboardEvent) => void; } type BlockData = Record<