1.0.5

README.md

@@ -4,12 +4,11 @@
 
 ![logo64](./docs/assets/22-09-2023/logo64.png)
 
-# Waypoint
+# Visualiser
 
-Waypoint is a visualiser and debugging tool for pathfinding
-search.
+Visualise pathfinding search and more.
 
-[Open Waypoint](https://path-visualiser.github.io/app)
+[Open Visualiser](https://path-visualiser.github.io/app)
 
 ## Start Development Server
 

adapter-iron-harvest/build.sh

@@ -31,10 +31,10 @@ npx --yes resedit-cli \
     --in dist/main-win.exe \
     --out dist/main-win.exe \
     --icon "1,icon.ico" \
-    --product-name "Waypoint" \
+    --product-name "Visualiser" \
     --product-version "0.1.0.0" \
     --file-version "0.1.0.0" \
-    --file-description "Waypoint Adapter Server"
+    --file-description "Visualiser Adapter Server"
 
 # Sign Windows executable
 
@@ -52,7 +52,7 @@ if which osslsigncode >/dev/null; then
             -in private/cert.pem
     fi
     osslsigncode sign -pkcs12 private/cert.p12 \
-        -n "Waypoint Adapter Server" \
+        -n "Visualiser Adapter Server" \
         -i "https://github.com/path-visualiser" \
         -in dist/main-win.exe \
         -out dist/main-win-signed.exe

adapter-iron-harvest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adapter-iron-harvest",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "main": "index.ts",
   "scripts": {

adapter-iron-harvest/src/index.ts

@@ -21,7 +21,7 @@ const mainText = `Adapter started on ${chalk.blueBright(
   `http://localhost:${port}/`
 )}`;
 
-const hintText = chalk.dim(`(Hint: Add it to Waypoint's connections list)`);
+const hintText = chalk.dim(`(Hint: Add it to Visualiser's connections list)`);
 
 const server = createAdapter(port);
 

adapter-warthog-wasm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adapter-warthog-wasm",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {

adapter-warthog-wasm/src/core/templates.ts

@@ -1,7 +1,7 @@
 import { Trace } from "protocol";
 
 export const gridTemplate: Partial<Trace> = {
-  version: "1.0.4",
+  version: "1.0.5",
   render: {
     context: {},
     components: {
@@ -33,7 +33,7 @@ export const gridTemplate: Partial<Trace> = {
 };
 
 export const xyTemplate: Partial<Trace> = {
-  version: "1.0.4",
+  version: "1.0.5",
   render: {
     components: {
       node: [

adapter-warthog-wasm/src/methods/general.ts

@@ -6,7 +6,7 @@ export const general = [
    */
   createMethod("about", async () => ({
     name: "Warthog (WebAssembly)",
-    version: "1.0.4",
+    version: "1.0.5",
     description: "Solver Adapter for Warthog & Roadhog",
   })),
 ];

adapter-warthog-websocket/adapter.config.yaml

@@ -1,4 +1,4 @@
 name: Warthog (Socket.io)
-version: 1.0.4
+version: 1.0.5
 description: Solver Adapter for Warthog & Roadhog
 port: 8221

adapter-warthog-websocket/build.sh

@@ -31,10 +31,10 @@ npx --yes resedit-cli \
     --in dist/main-win.exe \
     --out dist/main-win.exe \
     --icon "1,icon.ico" \
-    --product-name "Waypoint" \
+    --product-name "Visualiser" \
     --product-version "0.1.0.0" \
     --file-version "0.1.0.0" \
-    --file-description "Waypoint Adapter Server"
+    --file-description "Visualiser Adapter Server"
 
 # Sign Windows executable
 
@@ -52,7 +52,7 @@ if which osslsigncode >/dev/null; then
             -in private/cert.pem
     fi
     osslsigncode sign -pkcs12 private/cert.p12 \
-        -n "Waypoint Adapter Server" \
+        -n "Visualiser Adapter Server" \
         -i "https://github.com/path-visualiser" \
         -in dist/main-win.exe \
         -out dist/main-win-signed.exe

adapter-warthog-websocket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adapter-warthog-websocket",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "main": "index.js",
   "scripts": {

adapter-warthog-websocket/src/core/templates.ts

@@ -1,7 +1,7 @@
 import { Trace } from "protocol";
 
 export const gridTemplate: Partial<Trace> = {
-  version: "1.0.4",
+  version: "1.0.5",
   render: {
     context: {},
     components: {
@@ -33,7 +33,7 @@ export const gridTemplate: Partial<Trace> = {
 };
 
 export const xyTemplate: Partial<Trace> = {
-  version: "1.0.4",
+  version: "1.0.5",
   render: {
     components: {
       node: [

adapter-warthog-websocket/src/index.ts

@@ -21,7 +21,7 @@ const mainText = `Adapter started on ${chalk.blueBright(
   `http://localhost:${port}/`
 )}`;
 
-const hintText = chalk.dim(`(Hint: Add it to Waypoint's connections list)`);
+const hintText = chalk.dim(`(Hint: Add it to Visualiser's connections list)`);
 
 const server = createAdapter(port);
 

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "dependencies": {
     "@devbookhq/splitter": "^1.4.2",
@@ -42,6 +42,7 @@
     "socket.io-client": "^4.7.2",
     "string-template-parser": "^1.2.6",
     "typescript": "^5.2.2",
+    "unique-username-generator": "^1.2.0",
     "url-parse": "^1.5.3",
     "vite": "^4.4.9",
     "vite-tsconfig-paths": "^4.2.1"

client/src/components/Editor.tsx

@@ -2,3 +2,7 @@ export type EditorProps<T> = {
   value?: T;
   onChange?: (key: T) => void;
 };
+export type EditorSetterProps<T> = {
+  value?: T;
+  onChange?: (key: (value: T) => T) => void;
+};

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

@@ -7,14 +7,15 @@ import { useSnackbar } from "components/generic/Snackbar";
 import { useBreakpoints } from "hooks/useBreakpoints";
 import { usePlaybackState } from "hooks/usePlaybackState";
 import { useSettings } from "slices/settings";
-import { Layer, UploadedTrace } from "slices/UIState";
+import { UploadedTrace } from "slices/UIState";
 import {
   SkipNextOutlined as ForwardIcon,
   PauseOutlined as PauseIcon,
   PlayArrowOutlined as PlayIcon,
   SkipPreviousOutlined as PreviousIcon,
   StopOutlined as StopIcon,
 } from "@mui/icons-material";
+import { Layer } from "slices/layers";
 
 function cancellable<T = void>(f: () => Promise<T>, g: (result: T) => void) {
   let cancelled = false;
@@ -47,7 +48,7 @@ export function Playback({
     stepBackward,
     stepForward,
     stop,
-  } = usePlaybackState(layer);
+  } = usePlaybackState(layer?.key);
   useRaf();
 
   const notify = useSnackbar();

client/src/components/breakpoint-editor/BreakpointListEditor.tsx

@@ -34,7 +34,10 @@ export function BreakpointListEditor() {
             type: undefined,
             reference: 0,
           })}
-          onChange={debounce((v) => setUIState({ breakpoints: v }), 1000)}
+          onChange={debounce(
+            (v) => setUIState(() => ({ breakpoints: v })),
+            1000
+          )}
           addItemLabel="Breakpoint"
           placeholderText="Click the button below to add a breakpoint."
         />

client/src/components/generic/Snackbar.tsx

@@ -1,8 +1,8 @@
-import { CloseOutlined as CloseIcon } from "@mui/icons-material";
-import { IconButton, Snackbar } from "@mui/material";
-import { filter, noop } from "lodash";
-import { Label } from "./Label";
-import { useLog } from "slices/log";
+import { CloseOutlined as CloseIcon } from "@mui/icons-material";
+import { IconButton, Snackbar } from "@mui/material";
+import { filter, noop } from "lodash";
+import { Label } from "./Label";
+import { useLog } from "slices/log";
 import {
   ReactNode,
   createContext,
@@ -12,9 +12,6 @@ import {
   useState,
 } from "react";
 
-
-
-
 const SnackbarContext = createContext<
   (message?: string, secondary?: string) => () => void
 >(() => noop);
@@ -62,10 +59,10 @@ export function SnackbarProvider({ children }: { children?: ReactNode }) {
           key: new Date().getTime(),
         },
       ]);
-      appendLog({
+      appendLog(() => ({
         content: filter([message, secondary]).join(", "),
         timestamp: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
-      });
+      }));
       return () => handleClose("");
     },
     [setSnackPack]
@@ -105,4 +102,4 @@ export function SnackbarProvider({ children }: { children?: ReactNode }) {
       />
     </>
   );
-}
+}

client/src/components/inspector/EventInspector.tsx

@@ -1,21 +1,20 @@
-import { pick } from "lodash";
-import { TraceEvent } from "protocol/Trace";
-import { EventLabel } from "./EventLabel";
-import { PropertyList } from "./PropertyList";
-import { getColorHex } from "components/renderer/colors";
-import { usePlayback } from "slices/playback";
 import {
   Divider,
   ListItem,
   ListItemButton,
   ListItemButtonProps,
   ListItemIcon,
   ListItemText,
-  Typography as Type,
-  useTheme,
   Skeleton as Placeholder,
   Tooltip,
+  Typography as Type,
+  useTheme,
 } from "@mui/material";
+import { getColorHex } from "components/renderer/colors";
+import { pick } from "lodash";
+import { TraceEvent } from "protocol/Trace";
+import { EventLabel } from "./EventLabel";
+import { PropertyList } from "./PropertyList";
 
 type EventInspectorProps = {
   event?: TraceEvent;
@@ -30,7 +29,6 @@ export function EventInspector({
   ...props
 }: EventInspectorProps) {
   const { spacing } = useTheme();
-  const [, setPlayback] = usePlayback();
 
   // const cardStyles = selected
   //   ? {
@@ -55,7 +53,6 @@ export function EventInspector({
         borderLeft: `${spacing(0.5)} solid ${getColorHex(event?.type)}`,
         ...props.sx,
       }}
-      onClick={() => setPlayback({ step: index })}
     >
       <ListItemIcon>
         <Type variant="body2">{index}</Type>

client/src/components/inspector/SelectionMenu.tsx

@@ -17,6 +17,7 @@ import {
   SelectionInfoProvider,
   getLayerHandler,
 } from "components/layer-editor/layers/LayerSource";
+import { useLayers } from "slices/layers";
 
 type Props = {
   selection?: RendererSelectEvent;
@@ -127,21 +128,21 @@ export function SelectionMenu({ selection, onClose }: Props) {
   );
 }
 
-type SelectionInfoProviderProps<T> = ComponentProps<SelectionInfoProvider<T>>;
+type SelectionInfoProviderProps = ComponentProps<SelectionInfoProvider>;
 
-const identity = ({ children }: SelectionInfoProviderProps<any>) => (
+const identity = ({ children }: SelectionInfoProviderProps) => (
   <>{children?.({})}</>
 );
 
 function useSelectionMenu() {
-  const [{ layers }] = useUIState();
+  const [{ layers: layers }] = useLayers();
   return useMemo(
     () =>
       chain(layers)
         .reduce((A, l) => {
           const B = getLayerHandler(l)?.getSelectionInfo ?? identity;
-          return ({ children, event }: SelectionInfoProviderProps<any>) => (
-            <B layer={l} event={event}>
+          return ({ children, event }: SelectionInfoProviderProps) => (
+            <B layer={l.key} event={event}>
               {(a) => <A event={event}>{(b) => children?.(merge(a, b))}</A>}
             </B>
           );

client/src/components/inspector/index.tsx

@@ -17,7 +17,7 @@ export function Inspector(props: SpecimenInspectorProps) {
       <Flex {...props}>
         <ViewTree<PanelState>
           root={view}
-          onChange={(v) => setView({ view: v })}
+          onChange={(v) => setView(() => ({ view: v }))}
           renderLeaf={({ content }) => (
             <Fade in>
               <Box sx={{ width: "100%", height: "100%" }}>

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

@@ -24,8 +24,8 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Layer } from "slices/UIState";
 import { inferLayerName, layerHandlers } from "./layers/LayerSource";
+import { Layer } from "slices/layers";
 
 type LayerEditorProps = {
   value: Layer;
@@ -157,7 +157,7 @@ function Component(
               )}
               {draft.source?.type &&
                 createElement(layerHandlers[draft.source.type].editor, {
-                  onChange: setDraft,
+                  onChange: (e) => setDraft(e(draft)),
                   value: draft,
                 })}
             </Box>