add open/save as modals

The-Zagy · Sep 7, 2023 · 1e3402f · 1e3402f
1 parent 65d961b
commit 1e3402f
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -5,9 +5,6 @@
  <link rel="icon" type="image/svg+xml" href="/src/public/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Zagydraw | The whiteboarding app</title>
- <link rel="preload" as="font" href="/src/assets/fonts/FiraCode-VariableFont_wght.ttf" />
- <link rel="preload" as="font" href="/src/assets/fonts/GochiHand-Regular.ttf" />
- <link rel="preload" as="font" href="/src/assets/fonts/PressStart2P-Regular.ttf" />
  </head>
  <body>
  <div id="root">

diff --git a/src/actions/ExportScene.ts b/src/actions/ExportScene.ts
@@ -107,7 +107,25 @@ export class ActionExportScene extends Command {
  if (this.dest === DestOpts.CLIPBOARD) {
  await navigator.clipboard.writeText(JSON.stringify(portable));
  } else if (this.dest === DestOpts.JSON) {
- throw new Error("EXPORT SCENE: TODO export as json file");
+ // Create a Blob from the JSON string
+ const blob = new Blob([JSON.stringify(portable)], { type: "application/zagydraw" });
+ // Create a Blob URL
+ const blobUrl = URL.createObjectURL(blob);
+
+ // Create an <a> element
+ const downloadLink = document.createElement("a");
+
+ // Set the href attribute to the Blob URL
+ downloadLink.href = blobUrl;
+
+ // Set the download attribute to specify the filename
+ downloadLink.download = "zagy.zagydraw";
+
+ // Trigger a click event to open the file save dialog
+ downloadLink.click();
+
+ // Clean up by revoking the Blob URL
+ URL.revokeObjectURL(blobUrl);
  }
  } catch (e) {
  console.log("🪵 [copySelected.ts:15] ~ token ~ \x1b[0;32me\x1b[0m = ", e);

diff --git a/src/components/DropDown.tsx b/src/components/DropDown.tsx
@@ -1,4 +1,4 @@
-import { Trash2, Github, Keyboard, Menu } from "lucide-react";
+import { Trash2, Github, Keyboard, Menu, Save, File, AlertTriangle } from "lucide-react";
 
 import { ModeToggle } from "./mode-toggle";
 import { commandManager } from "@/actions/commandManager";
@@ -26,6 +26,15 @@ import {
  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { ActionExportScene, DestOpts } from "@/actions/ExportScene";
+
 function ResetCanvasAlert() {
  return (
  <AlertDialog>
@@ -54,6 +63,119 @@ function ResetCanvasAlert() {
  );
 }
 
+function SaveToDialog() {
+ return (
+ <Dialog>
+ {/*FIX: open dialog/alert dialog inside dropdown or context menu
+ @url https://github.com/radix-ui/primitives/issues/1836#issuecomment-1674338372
+ */}
+ <DialogTrigger asChild>
+ <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+ <Save className="mr-2 h-4 w-4" />
+ Save To
+ </DropdownMenuItem>
+ </DialogTrigger>
+ <DialogContent className="h-full w-full cursor-auto md:h-4/6 md:w-3/4 ">
+ <DialogHeader>
+ <DialogTitle>Save To</DialogTitle>
+ </DialogHeader>
+ <div className="flex h-full w-full flex-wrap justify-center gap-5 overflow-y-auto">
+ <div className="flex h-full w-2/5 flex-col items-center gap-5 border p-5">
+ <div className="h-16 w-fit">
+ <Save className="rounded-full border-2 p-2 " size={75} />
+ </div>
+ <h2 className="text-4xl font-bold">Save To Disk</h2>
+ <span className="h-20">
+ Export the scene data to a file from which you can import later.
+ </span>
+ <Button
+ variant={"default"}
+ onClick={() =>
+ commandManager.executeCommand(
+ new ActionExportScene(DestOpts["JSON"], false),
+ )
+ }>
+ Save to file
+ </Button>
+ </div>
+
+ <div className="flex h-full w-2/5 flex-col items-center gap-5 border p-5">
+ <div className="h-16 w-fit">
+ <span className="rounded-full border-2 p-2 text-4xl ">Z+</span>
+ </div>
+ <h2 className="text-4xl font-bold">Save To Z+</h2>
+ <span className="h-20">Save On The Cloud</span>
+ <Button disabled={true} variant={"default"}>
+ UNDER CONSTRUCTION
+ </Button>
+ </div>
+ </div>
+ </DialogContent>
+ </Dialog>
+ );
+}
+
+function OpenSceneDialog() {
+ return (
+ <Dialog>
+ {/*FIX: open dialog/alert dialog inside dropdown or context menu
+ @url https://github.com/radix-ui/primitives/issues/1836#issuecomment-1674338372
+ */}
+ <DialogTrigger asChild>
+ <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+ <File className="mr-2 h-4 w-4" />
+ Open
+ </DropdownMenuItem>
+ </DialogTrigger>
+ <DialogContent className="h-full w-full cursor-auto md:h-4/6 md:w-3/4">
+ <DialogHeader>
+ <DialogTitle>Load From File</DialogTitle>
+ </DialogHeader>
+ <div className="flex h-full w-full flex-wrap justify-center gap-5 overflow-y-auto">
+ <div className="flex w-full flex-col gap-3 bg-yellow-100 md:flex-row">
+ <p className="flex h-fit w-fit items-center justify-center rounded-full border-2 bg-yellow-400 text-4xl text-black">
+ <AlertTriangle />
+ </p>
+ <p className="shrink text-gray-500">
+ Loading from a file will{" "}
+ <span className="font-bold">replace your existing content.</span>
+ You can back up your drawing first using one of the options below.
+ </p>
+ <Button variant="default" className="w-content bg-yellow-400 text-black">
+ Load From File
+ </Button>
+ </div>
+
+ {/* EXPORT OPTIONS */}
+ <div className="flex w-2/5 flex-col items-center gap-5 border p-5">
+ <h2 className="text-4xl font-bold">Save To Disk</h2>
+ <span className="h-20">
+ Export the scene data to a file from which you can import later.
+ </span>
+ <Button
+ variant={"default"}
+ onClick={() =>
+ commandManager.executeCommand(
+ new ActionExportScene(DestOpts["JSON"], false),
+ )
+ }>
+ Save to file
+ </Button>
+ </div>
+
+ <div className="flex w-2/5 flex-col items-center gap-5 border p-5">
+ <h2 className="text-4xl font-bold">Save To Z+</h2>
+ <span className="h-20">Save On The Cloud</span>
+ <Button disabled={true} variant={"default"}>
+ UNDER CONSTRUCTION
+ </Button>
+ </div>
+ </div>
+ </DialogContent>
+ </Dialog>
+ );
+}
+
 export function DropDown() {
  return (
  <div className="fixed left-2 top-2">
@@ -73,6 +195,8 @@ export function DropDown() {
  <Image className="mr-2 h-4 w-4" />
  <span>Export Image</span>
  </DropdownMenuItem> */}
+ <OpenSceneDialog />
+ <SaveToDialog />
  <ResetCanvasAlert />
  </DropdownMenuGroup>
  <DropdownMenuSeparator />