Saving file

apps/web/src/commands/index.ts

@@ -27,6 +27,6 @@ export const executeCommand = async (
     throw new Error(`Command not found: ${name}`);
   }
 
-  return command.execute(context, params);
+  return command.execute(context, params as never);
 };
 

apps/web/src/commands/saveAsCurrentWorkspace.ts

@@ -1,16 +1,23 @@
+import { downloadAsFile } from "@/utils/html";
 import { CommandContext } from "./context";
 
 export const command = {
-  name: "saveAsCurrentWorkspace",
+  name: "saveCurrentWorkspaceAsFile",
   description: "Save the current workspace as a new file",
   execute: async (
-    context: CommandContext,
+    _: CommandContext,
     payload: {
       workspaceId: string;
       layerName: string;
+      format: "jpeg" | "png";
     }
   ) => {
-    console.log("Saving sheet", context, payload);
+    const { format } = payload;
+    const canvas = document.querySelector(
+      "#canvas-renderer"
+    ) as HTMLCanvasElement;
+    const data = canvas.toDataURL(`image/${format}`, 1.0);
+    downloadAsFile(data, `picture.${format}`);
   },
 } as const;
 

apps/web/src/components/main/appHeaderBar.tsx

@@ -1,7 +1,6 @@
 import { ModeToggle } from "../themeToggle";
 import { MenuBar } from "../menu-bar/menuBar";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
-import { IconButton } from "../iconButton";
 import { Button } from "../ui/button";
 import { cn } from "@/utils/css";
 import { useWorkspacesStore } from "@/store";
@@ -31,8 +30,9 @@ const WorkspaceTab = (props: {
 };
 
 export const AppHeaderBar = memo(() => {
-  const { workspaces, selectedWorkspaceIndex, addWorkspace } =
-    useWorkspacesStore((state) => state);
+  const { workspaces, selectedWorkspaceIndex } = useWorkspacesStore(
+    (state) => state
+  );
 
   return (
     <div className="border-b flex flex-row justify-between items-center px-small gap-big">
@@ -51,7 +51,7 @@ export const AppHeaderBar = memo(() => {
           </div>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
-        <IconButton type="plus" size="medium" onClick={addWorkspace} />
+        {/* <IconButton type="plus" size="medium" onClick={addWorkspace} /> */}
       </div>
       <ModeToggle />
     </div>

apps/web/src/components/menu-bar/definitions.ts

@@ -7,16 +7,34 @@ export const menuBarDefinition: MenuItem[] = [
     label: "File",
     items: [
       {
-        type: "leaf",
-        label: "Save As",
-        action: {
-          onClick: () => {
-            executeCommand("saveAsCurrentWorkspace", {
-              workspaceId: "123",
-              layerName: "test",
-            });
+        type: "parent",
+        label: "Save As...",
+        items: [
+          {
+            type: "leaf",
+            label: "JPEG Picture",
+            action: {
+              onClick: () =>
+                executeCommand("saveCurrentWorkspaceAsFile", {
+                  workspaceId: "1",
+                  layerName: "1",
+                  format: "jpeg",
+                }),
+            },
           },
-        },
+          {
+            type: "leaf",
+            label: "PNG Picture",
+            action: {
+              onClick: () =>
+                executeCommand("saveCurrentWorkspaceAsFile", {
+                  workspaceId: "1",
+                  layerName: "1",
+                  format: "png",
+                }),
+            },
+          },
+        ],
       },
       {
         type: "separator",

apps/web/src/hooks/useCanvasRenderer.ts

@@ -21,21 +21,25 @@ export const useCanvasRenderer = (
 
     const hostElement = hostElementRef.current;
     const canvas = document.createElement("canvas");
+    canvas.id = "canvas-renderer";
     canvas.width = size.width;
     canvas.height = size.height;
     canvas.style.width = `${size.width}px`;
     canvas.style.height = `${size.height}px`;
     canvas.className =
-      "pixelated-canvas bg-gray-100 pointer-events-none origin-top-left shadow-sm";
+      "pixelated-canvas pointer-events-none origin-top-left shadow-2xl border";
     hostElement.appendChild(canvas);
     canvasRef.current = canvas;
     const offscreenCanvas = canvasRef.current?.transferControlToOffscreen();
     const context = offscreenCanvas?.getContext("2d");
+
     if (!context) {
       throw new Error("Canvas context is null");
     }
 
     contextRef.current = context;
+    context.fillStyle = "white";
+    context.fillRect(0, 0, size.width, size.height);
 
     return () => {
       hostElement.removeChild(canvas);

apps/web/src/utils/html.ts

@@ -0,0 +1,7 @@
+export const downloadAsFile = (data: string, filename: string) => {
+  var anchor = document.createElement("a");
+  anchor.href = data;
+  anchor.download = filename;
+  anchor.click();
+};
+