Add screenshot feature

client/package.json

@@ -7,6 +7,7 @@
     "@devbookhq/splitter": "^1.4.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@hello-pangea/dnd": "^16.6.0",
     "@monaco-editor/react": "^4.5.2",
     "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.146",
@@ -49,7 +50,6 @@
     "protocol": "file:../protocol",
     "react": "^19.0.0-beta-26f2496093-20240514",
     "react-async-hook": "^4.0.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-colorful": "^5.6.1",
     "react-d3-tree": "^3.6.1",
     "react-dnd": "^16.0.1",

client/src/Sidebar.tsx

@@ -89,6 +89,10 @@ export function useSidebarBackground() {
   );
 }
 
+function Divider2() {
+  return <Divider sx={{ mx: 2, my: 1 }} />;
+}
+
 export function Sidebar({ children }: { children?: ReactNode }) {
   const { isPrimary } = useSyncStatus();
   const { Content, produceRoot, root, setRoot, setOpen, tab, open } =
@@ -150,7 +154,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
               )
               .flatMap((c, i, cx) => [
                 !sm && !!i && c.color !== cx[i - 1].color && (
-                  <Divider key={`divider-${i}`} sx={{ mx: 2, my: 1 }} />
+                  <Divider2 key={`divider-${i}`} />
                 ),
                 <Tab
                   onClick={() => {

client/src/client/internal.ts

@@ -1,8 +1,8 @@
 import { Dictionary, chain as _, entries, find, map } from "lodash";
-import { PathfindingTask, Scheme } from "protocol/SolveTask";
+import memoizee from "memoizee";
+import { Scheme } from "protocol/SolveTask";
 import url from "url-parse";
 import { Transport } from "./Transport";
-import memoizee from "memoizee";
 
 const paths = import.meta.glob("/public/maps/*.grid", {
   as: "url",

client/src/components/generic/ListEditor.tsx

@@ -3,7 +3,6 @@ import {
   ClearOutlined as DeleteIcon,
   DragHandleOutlined,
   EditOutlined as EditIcon,
-  LabelOutlined as LabelIcon,
 } from "@mui/icons-material";
 import {
   Box,
@@ -19,12 +18,11 @@ import {
   SxProps,
   Theme,
   Typography,
-  alpha,
   useTheme,
 } from "@mui/material";
 import { defer, filter, map, sortBy, uniqBy } from "lodash";
 import { nanoid as id } from "nanoid";
-import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 
 import {
   CSSProperties,
@@ -41,7 +39,10 @@ import { useAcrylic, usePaper } from "theme";
 import { Flex } from "./Flex";
 
 export const DefaultListEditorInput = forwardRef(function StyledInputBase(
-  props: ComponentProps<typeof InputBase>,
+  {
+    onValueChange,
+    ...props
+  }: ComponentProps<typeof InputBase> & { onValueChange?: (v: string) => void },
   ref
 ) {
   return (
@@ -381,7 +382,12 @@ export default function Editor<T>(props: Props<T>) {
         }
       >
         <Box mt={getCategory ? -1 : 0}>
-          <Droppable droppableId="list">
+          <Droppable
+            droppableId="list"
+            isDropDisabled={false}
+            isCombineEnabled={false}
+            ignoreContainerClipping={true}
+          >
             {(provided) => (
               <div {...provided.droppableProps} ref={provided.innerRef}>
                 {(() => {

client/src/components/layer-editor/LayerEditor.tsx

@@ -26,17 +26,9 @@ import {
   startCase,
   truncate,
 } from "lodash";
-import {
-  ForwardedRef,
-  ReactNode,
-  createElement,
-  forwardRef,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { ReactNode, createElement, useEffect, useMemo, useState } from "react";
 import { Layer } from "slices/layers";
-import { useAcrylic, usePaper } from "theme";
+import { usePaper } from "theme";
 
 const compositeOperations = [
   "color",
@@ -100,7 +92,10 @@ function useDraft<T>(
   ] as const;
 }
 
-function Component({ value, onValueChange: onChange }: LayerEditorProps) {
+export function LayerEditor({
+  value,
+  onValueChange: onChange,
+}: LayerEditorProps) {
   const paper = usePaper();
   const [draft, setDraft] = useDraft(value, onChange, 300, [
     "name",
@@ -273,5 +268,3 @@ function Component({ value, onValueChange: onChange }: LayerEditorProps) {
     </>
   );
 }
-
-export const LayerEditor = forwardRef(Component);

client/src/layers/trace/index.tsx

@@ -172,7 +172,7 @@ export const controller = {
             notify("Opening trace...");
             try {
               const output = readUploadedTrace(file);
-              return { trace: { ...(await output.read()) } };
+              return { trace: await output.read() };
             } catch (e) {
               console.error(e);
               notify(`Error opening, ${get(e, "message")}`);
@@ -274,7 +274,7 @@ export const controller = {
         const parsedTrace = await parseTrace();
         produce((l) => {
           set(l, "source.parsedTrace", parsedTrace);
-          // set(l, "viewKey", id());
+          set(l, "viewKey", id());
         });
       }
     }, [loading, parseTrace]);

client/src/pages/SettingsPage.tsx

@@ -289,6 +289,10 @@ export function SettingsPage({ template: Page }: PageContentProps) {
 const a = keys(mapParsers).map((c) => ({ key: c }));
 type A = (typeof a)[number];
 
+function Sink({ children }: { children?: ReactNode }) {
+  return children;
+}
+
 export function MapParserListEditor() {
   return (
     <Box sx={{ mx: -2 }}>
@@ -298,12 +302,12 @@ export function MapParserListEditor() {
         addable={false}
         deletable={false}
         editor={(v) => (
-          <Box key={v.key}>
+          <Sink key={v.key}>
             <ListItemText
               primary={startCase(v.key)}
               secondary={`Support for *.${v.key} maps`}
             />
-          </Box>
+          </Sink>
         )}
         icon={null}
         value={a}

client/src/pages/TreePage.tsx

@@ -219,7 +219,7 @@ export function TreeGraph({
     });
 
     const numParents: Dictionary<Set<string | number>> = {};
-    forEach(trace?.events, ({ id, pId, type }, i) => {
+    forEach(trace?.events, ({ id, pId }) => {
       if (id && pId) {
         numParents[id] = numParents[id] ?? new Set();
         numParents[id].add(pId);
@@ -400,8 +400,6 @@ export function TreePage({ template: Page }: PageContentProps) {
   const [trackedProperty, setTrackedProperty] = useState<string>("");
 
   const trace = layer?.source?.trace?.content;
-  const lastModified = layer?.source?.trace?.lastModified;
-  const id = layer?.source?.trace?.key;
 
   // Reset tracked property
   useEffect(() => {
@@ -422,12 +420,7 @@ export function TreePage({ template: Page }: PageContentProps) {
     return { events, current: findLast(events, (c) => c.step <= step) };
   }, [selection, step]);
 
-  const params = useMemo(
-    () => ({ trace, mode }),
-    [trace, id, lastModified, mode]
-  );
-
-  const { result: tree, loading } = useTreeMemo(params, [params]);
+  const { result: tree, loading } = useTreeMemo({ trace, mode }, [key, mode]);
 
   const settings = useMemo(
     () =>

client/src/pages/ViewportPage.tsx

@@ -1,5 +1,6 @@
 import {
   BlurCircularOutlined,
+  CameraOutlined,
   CenterFocusWeakOutlined,
   LayersOutlined,
   TimesOneMobiledataOutlined,
@@ -11,6 +12,7 @@ import { Flex } from "components/generic/Flex";
 import { IconButtonWithTooltip } from "components/generic/IconButtonWithTooltip";
 import { TraceRenderer } from "components/inspector/TraceRenderer";
 import { useViewTreeContext } from "components/inspector/ViewTree";
+import download from "downloadjs";
 import { inferLayerName } from "layers/inferLayerName";
 import {
   Dictionary,
@@ -29,6 +31,7 @@ import { useLayers } from "slices/layers";
 import { Renderer, useRenderers } from "slices/renderers";
 import { PanelState } from "slices/view";
 import { useAcrylic, usePaper } from "theme";
+import { generateUsername as id } from "unique-username-generator";
 import { PageContentProps } from "./PageMeta";
 import { useRendererResolver } from "./useRendererResolver";
 
@@ -122,7 +125,6 @@ export function ViewportPage({ template: Page }: PageContentProps) {
                       label="Fit"
                       icon={<CenterFocusWeakOutlined />}
                     />
-                    {divider}
                     <IconButtonWithTooltip
                       color="primary"
                       disabled={!rendererInstance}
@@ -132,6 +134,19 @@ export function ViewportPage({ template: Page }: PageContentProps) {
                       icon={<TimesOneMobiledataOutlined />}
                       label="1 to 1"
                     />
+                    {divider}
+                    <IconButtonWithTooltip
+                      color="primary"
+                      disabled={!rendererInstance}
+                      onClick={async () => {
+                        const a = await rendererInstance?.toDataUrl();
+                        if (a) {
+                          download(a, id("-"));
+                        }
+                      }}
+                      icon={<CameraOutlined />}
+                      label="capture-screenshot"
+                    />
                   </Stack>
                 </Stack>
               </Box>

client/src/services/BootstrapService.tsx

@@ -6,9 +6,8 @@ export function BootstrapService() {
   const { load } = useWorkspace();
   useAsync(async () => {
     try {
-      const param = new URLSearchParams(location.search).get("workspace");
-      if (param) {
-        const workspace = decodeURIComponent(param);
+      const workspace = new URLSearchParams(location.search).get("workspace");
+      if (workspace && isWorkspace(workspace)) {
         if (isWorkspace(workspace)) {
           const name = workspace.split("/").pop() ?? workspace;
           const a = await fetch(workspace);

client/src/services/LayerService.tsx

@@ -6,7 +6,7 @@ import { useSyncStatus } from "./SyncService";
 
 function useLayerServices() {
   const { isPrimary } = useSyncStatus();
-  const [{ layers }, setLayers] = useLayers();
+  const [{ layers }, setLayers, , c1] = useLayers();
   return useMemo(() => {
     return !isPrimary
       ? []
@@ -23,7 +23,7 @@ function useLayerServices() {
             });
           }
         });
-  }, [layers, setLayers, isPrimary]);
+  }, [c1, setLayers, isPrimary]);
 }
 
 export function LayerService() {

client/src/services/SettingsService.tsx

@@ -8,7 +8,8 @@ export function SettingsService() {
     useSettings();
   const [, setUIState] = useUIState();
   useEffect(() => {
-    if (!minimal && showOnStart && initialised) {
+    const workspace = new URLSearchParams(location.search).get("workspace");
+    if (!minimal && showOnStart && initialised && !workspace) {
       setUIState(() => ({ fullscreenModal: showOnStart }));
     }
   }, [initialised, minimal]);

client/vite.config.ts

@@ -16,7 +16,7 @@ export default defineConfig(({ mode }) => ({
   plugins: [
     react({
       babel: {
-        plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
+        // plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
       },
     }),
     viteTsconfigPaths(),

package.json

@@ -17,6 +17,9 @@
     "url": "https://github.com/ShortestPathLab/posthoc-app/issues"
   },
   "homepage": "posthoc.pathfinding.ai",
-  "dependencies": {},
+  "dependencies": {
+    "react": "^19.0.0-beta-26f2496093-20240514",
+    "react-dom": "^19.0.0-beta-26f2496093-20240514"
+  },
   "type": "module"
 }