Drag and drop workspaces

client/package.json

@@ -34,6 +34,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-d3-tree": "^3.6.1",
     "react-dom": "^18.2.0",
+    "react-file-drop": "^3.1.6",
     "react-slot-component": "^2.0.3",
     "react-use": "^17.4.0",
     "react-virtualized-auto-sizer": "^1.0.20",

client/src/components/app-bar/Playback.tsx

@@ -38,8 +38,8 @@ export function PlaybackService({
   children,
   value,
 }: EditorSetterProps<Layer<PlaybackLayerData>>) {
-  const { step, tick, end, playing, pause } = usePlaybackState(value?.key);
   useRaf();
+  const { step, tick, end, playing, pause } = usePlaybackState(value?.key);
 
   const notify = useSnackbar();
   const [{ playbackRate = 1 }] = useSettings();

client/src/components/inspector/FullscreenProgress.tsx

@@ -21,8 +21,6 @@ export function FullscreenProgress() {
         WebkitAppRegion: "drag",
       }}
       open={!!messages.length}
-      unmountOnExit
-      mountOnEnter
     >
       <Stack alignItems="center" spacing={4}>
         <CircularProgress />

client/src/components/inspector/WorkspaceDropZone.tsx

@@ -0,0 +1,39 @@
+import { WorkspacesOutlined } from "@mui/icons-material";
+import { Backdrop, Stack, Typography as Type } from "@mui/material";
+import { useWorkspace } from "hooks/useWorkspace";
+import { head } from "lodash";
+import { useState } from "react";
+import { FileDrop } from "react-file-drop";
+import { useAcrylic } from "theme";
+
+export function WorkspaceDropZone() {
+  const acrylic = useAcrylic() as any;
+  const { load } = useWorkspace();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <FileDrop
+        onFrameDragLeave={() => setOpen(false)}
+        onFrameDragEnter={() => setOpen(true)}
+        onFrameDrop={() => setOpen(false)}
+        onDragLeave={() => setOpen(false)}
+        onDrop={(f) => f?.length && load(head(f))}
+      >
+        <Backdrop
+          sx={{
+            ...acrylic,
+            zIndex: (t) => t.zIndex.tooltip + 1,
+          }}
+          open={open}
+        >
+          <Stack alignItems="center" spacing={4}>
+            <WorkspacesOutlined />
+            <Type variant="body2" color="textSecondary">
+              Open workspace
+            </Type>
+          </Stack>
+        </Backdrop>
+      </FileDrop>
+    </>
+  );
+}

client/src/components/inspector/index.tsx

@@ -6,6 +6,7 @@ import { useAnyLoading } from "slices/loading";
 import { PanelState, useView } from "slices/view";
 import { ViewTree } from "./ViewTree";
 import { FullscreenProgress } from "./FullscreenProgress";
+import { WorkspaceDropZone } from "./WorkspaceDropZone";
 
 type SpecimenInspectorProps = Record<string, any> & FlexProps;
 
@@ -39,6 +40,7 @@ export function Inspector(props: SpecimenInspectorProps) {
         />
       </Fade>
       <FullscreenProgress />
+      <WorkspaceDropZone />
     </>
   );
 }

client/src/hooks/useWorkspace.tsx

@@ -1,42 +1,48 @@
+import { useSnackbar } from "components/generic/Snackbar";
 import download from "downloadjs";
 import { fileDialog as file } from "file-select-dialog";
+import { find } from "lodash";
 import { UIState, useUIState } from "slices/UIState";
 import { formatByte, useBusyState } from "slices/busy";
 import { Layers, useLayers } from "slices/layers";
 import { generateUsername as id } from "unique-username-generator";
 import { parseYamlAsync } from "workers/async";
 
-function ext(s: string) {
-  return s.split(".").pop();
-}
-const FORMATS = ["json", "yaml"];
+const acceptedFormats = [`.workspace.yaml`, `.workspace.json`];
 
 type Workspace = {
   UIState: UIState;
   layers: Layers;
 };
 
 export function useWorkspace() {
+  const notify = useSnackbar();
   const [layers, setLayers] = useLayers();
   const [UIState, setUIState] = useUIState();
   const usingBusyState = useBusyState("workspace");
   return {
-    load: async () => {
-      const f = await file({
-        accept: FORMATS.map((c) => `.workspace.${c}`),
-        strict: true,
-      });
-      if (f && FORMATS.includes(ext(f.name)!)) {
-        await usingBusyState(async () => {
-          const content = await f.text();
-          const parsed = (await parseYamlAsync(content)) as
-            | Workspace
-            | undefined;
-          if (parsed) {
-            setLayers(() => parsed.layers);
-            setUIState(() => parsed.UIState);
-          }
-        }, `Opening workspace (${formatByte(f.size)})`);
+    load: async (selectedFile?: File) => {
+      const f =
+        selectedFile ??
+        (await file({
+          accept: acceptedFormats,
+          strict: true,
+        }));
+      if (f) {
+        if (isWorkspaceFile(f)) {
+          await usingBusyState(async () => {
+            const content = await f.text();
+            const parsed = (await parseYamlAsync(content)) as
+              | Workspace
+              | undefined;
+            if (parsed) {
+              setLayers(() => parsed.layers);
+              setUIState(() => parsed.UIState);
+            }
+          }, `Opening workspace (${formatByte(f.size)})`);
+        } else {
+          notify(`${f?.name} is not a workspace file.`);
+        }
       }
     },
     save: () => {
@@ -48,3 +54,7 @@ export function useWorkspace() {
     },
   };
 }
+
+export function isWorkspaceFile(f: File) {
+  return find(acceptedFormats, (format) => f.name.endsWith(format));
+}

internal-renderers/src/d2-renderer/D2RendererWorker.ts

@@ -206,20 +206,20 @@ export class D2RendererWorker extends EventEmitter<
     ctx.fillStyle = this.#options.backgroundColor;
     ctx.fillRect(0, 0, tile.width, tile.height);
 
-    const x = 16;
+    const length = 16;
     const thickness = 1;
-    ctx.fillStyle = `rgba(127,127,127,0.25)`;
+    ctx.fillStyle = `rgba(127,127,127,0.36)`;
     ctx.fillRect(
-      (tile.width - x) / 2,
+      (tile.width - length) / 2,
       (tile.height - thickness) / 2,
-      x,
+      length,
       thickness
     );
     ctx.fillRect(
       (tile.width - thickness) / 2,
-      (tile.height - x) / 2,
+      (tile.height - length) / 2,
       thickness,
-      x
+      length
     );
 
     for (const { component } of sortBy(