From 56111a99cb233253c24f1eb690318778dede9c45 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Fri, 20 Dec 2024 23:06:54 +0000
Subject: [PATCH] feat: set scale dialog

---
 src/components/dialogs/SetScale.tsx | 40 +++++++++++++++++++++++++++++
 src/components/menubar/ViewMenu.tsx |  7 ++++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dialogs/SetScale.tsx

diff --git a/src/components/dialogs/SetScale.tsx b/src/components/dialogs/SetScale.tsx
new file mode 100644
index 0000000..668b0f1
--- /dev/null
+++ b/src/components/dialogs/SetScale.tsx
@@ -0,0 +1,40 @@
+import { useContext, useState } from "react";
+
+import { CanvasContext } from "@/context/Canvas";
+
+import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+function SetScale({ close }: DialogProps) {
+	const { scale, setScale } = useContext(CanvasContext);
+
+	const [newScale, setNewScale] = useState(scale * 100);
+
+	const onSubmit = () => {
+		setScale(newScale / 100);
+		close();
+	};
+
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Set Scale</DialogTitle>
+				<DialogDescription>Set your scale to a particular percentage</DialogDescription>
+			</DialogHeader>
+
+			<Input type="number" value={newScale} onChange={(e) => setNewScale(parseInt(e.target.value))} />
+
+			<DialogFooter>
+				<Button variant="outline" onClick={close}>
+					Cancel
+				</Button>
+				<Button type="submit" onClick={onSubmit}>
+					Submit
+				</Button>
+			</DialogFooter>
+		</DialogContent>
+	);
+}
+
+export default SetScale;
diff --git a/src/components/menubar/ViewMenu.tsx b/src/components/menubar/ViewMenu.tsx
index 6894e84..9d17656 100644
--- a/src/components/menubar/ViewMenu.tsx
+++ b/src/components/menubar/ViewMenu.tsx
@@ -1,8 +1,11 @@
 import { useContext } from "react";
-import { MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
+import { MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@/components/ui/menubar";
+
+import { DialogContext } from "@/context/Dialog";
 import { SettingsContext } from "@/context/Settings";
 
 function ViewMenu() {
+	const openDialog = useContext(DialogContext);
 	const { settings, setSetting } = useContext(SettingsContext);
 
 	const onCheckedChange = (key: keyof Settings) => (value: boolean) => {
@@ -13,6 +16,8 @@ function ViewMenu() {
 		<MenubarMenu>
 			<MenubarTrigger>View</MenubarTrigger>
 			<MenubarContent>
+				<MenubarItem onClick={() => openDialog("SetScale")}>Set Scale</MenubarItem>
+				<MenubarSeparator />
 				<MenubarCheckboxItem checked={settings.grid} onCheckedChange={onCheckedChange("grid")}>
 					Grid
 				</MenubarCheckboxItem>