A lot of general fixes to the renaming, saving, deleting logic that w…

…as fairly broken (#311)
lewish · Jul 8, 2024 · c5e9351 · c5e9351
1 parent ed4d8cb
commit c5e9351
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 39 deletions.
diff --git a/client/app.tsx b/client/app.tsx
@@ -87,7 +87,7 @@ document.addEventListener("paste", (e) => {
   if (store.selectTool.selectBox) {
     position = store.selectTool.selectBox.topLeft();
   }
-  if (store.toolMode.get() === ToolMode.TEXT && store.textTool.currentPosition) {
+  if (store.toolMode() === ToolMode.TEXT && store.textTool.currentPosition) {
     position = store.textTool.currentPosition;
   }
   const pastedLayer = textToLayer(clipboardText, position);

diff --git a/client/drawer.tsx b/client/drawer.tsx
@@ -109,15 +109,15 @@ export function Drawer() {
                       {drawingId.shareSpec ? (
                         <Icons.Share
                           color={
-                            store.route.toString() === drawingId.toString()
+                            store.route.get().toString() === drawingId.toString()
                               ? "primary"
                               : "inherit"
                           }
                         />
                       ) : (
                         <Icons.FileCopy
                           color={
-                            store.route.toString() === drawingId.toString()
+                            store.route.get().toString() === drawingId.toString()
                               ? "primary"
                               : "inherit"
                           }
@@ -435,7 +435,7 @@ function ToolControl(
   return useWatchable(() => {
     return (
       <ListItem
-        selected={store.toolMode.get() === props.tool}
+        selected={store.toolMode() === props.tool}
         button={true}
         onClick={() => store.setToolMode(props.tool)}
       >
@@ -503,7 +503,7 @@ function ToolHelp(
   }>
 ) {
   return useWatchable(() => {
-    return store.toolMode.get() === props.tool ? <>{props.children}</> : null;
+    return store.toolMode() === props.tool ? <>{props.children}</> : null;
   });
 }
 
@@ -538,7 +538,13 @@ function NewDrawingButton() {
       }
       confirmButton={
         <Button
-          onClick={() => history.push(DrawingId.local(newDrawingName).href)}
+          onClick={() => {
+            store.localDrawingIds.set([
+              ...store.localDrawingIds.get(),
+              DrawingId.local(newDrawingName),
+            ]);
+            history.push(DrawingId.local(newDrawingName).href);
+          }}
           color="primary"
         >
           Create

diff --git a/client/store/index.ts b/client/store/index.ts
@@ -108,20 +108,18 @@ export class Store {
   }
 
   public setRoute(value: DrawingId) {
-
-      this._route.set(value);
-
+    this._route.set(value);
   }
 
   public readonly freeformCharacter = watchableValue("x");
 
   public readonly selectedToolMode = watchableValue(ToolMode.BOX);
 
-  public get toolMode() {
+  public toolMode(): ToolMode | undefined {
     if (this.route.get().shareSpec) {
-      return null;
+      return undefined;
     }
-    return this.selectedToolMode;
+    return this.selectedToolMode.get();
   }
 
   public readonly unicode = watchableAdapter(Persistent.json("unicode", true));
@@ -164,17 +162,17 @@ export class Store {
   );
 
   get currentTool(): IDrawFunction {
-    return this.toolMode.get() === ToolMode.BOX
+    return this.toolMode() === ToolMode.BOX
       ? this.boxTool
-      : this.toolMode.get() === ToolMode.LINES
+      : this.toolMode() === ToolMode.LINES
       ? this.lineTool
-      : this.toolMode.get() === ToolMode.ARROWS
+      : this.toolMode() === ToolMode.ARROWS
       ? this.arrowTool
-      : this.toolMode.get() === ToolMode.FREEFORM
+      : this.toolMode() === ToolMode.FREEFORM
       ? this.freeformTool
-      : this.toolMode.get() === ToolMode.TEXT
+      : this.toolMode() === ToolMode.TEXT
       ? this.textTool
-      : this.toolMode.get() === ToolMode.SELECT
+      : this.toolMode() === ToolMode.SELECT
       ? this.selectTool
       : this.nullTool;
   }
@@ -207,17 +205,17 @@ export class Store {
     let canvas = this.canvases.get(drawingId.toString());
     if (!canvas) {
       // Add the drawing ID to the list of all drawing IDs if it's a local one.
-      if (
-        !!drawingId.localId &&
-        !this.localDrawingIds
-          .get()
-          .some(
-            (otherDrawingId) =>
-              otherDrawingId.toString() === drawingId.toString()
-          )
-      ) {
-        this.localDrawingIds.set([...this.localDrawingIds.get(), drawingId]);
-      }
+      // if (
+      //   !!drawingId.localId &&
+      //   !this.localDrawingIds
+      //     .get()
+      //     .some(
+      //       (otherDrawingId) =>
+      //         otherDrawingId.toString() === drawingId.toString()
+      //     )
+      // ) {
+      //   this.localDrawingIds.set([...this.localDrawingIds.get(), drawingId]);
+      // }
       canvas = new CanvasStore(drawingId);
       this.canvases.set(drawingId.toString(), canvas);
     }
@@ -252,27 +250,29 @@ export class Store {
   public renameDrawing(originalLocalId: string, newLocalId: string) {
     const originalId = DrawingId.local(originalLocalId);
     const newId = DrawingId.local(newLocalId);
-    this.localDrawingIds.set(
-      this.localDrawingIds
-        .get()
-        .map((drawingId) =>
-          drawingId.toString() === originalId.toString() ? newId : drawingId
-        )
-    );
-
     Object.keys(localStorage)
-      .filter((key) => key.startsWith(this.canvas(originalId).persistentKey()))
+      .filter((key) =>
+        key.startsWith(this.canvas(originalId).persistentKey() + "/")
+      )
       .forEach((key) => {
-        localStorage.removeItem(key);
         localStorage.setItem(
           key.replace(
             this.canvas(originalId).persistentKey(),
             this.canvas(newId).persistentKey()
           ),
           localStorage.getItem(key)
         );
+        localStorage.removeItem(key);
       });
     this.canvases.delete(newId.toString());
+    this.canvases.delete(originalId.toString());
+    this.localDrawingIds.set([
+      ...this.localDrawingIds
+        .get()
+        .filter((drawingId) => drawingId.toString() !== originalId.toString()),
+      newId,
+    ]);
+    window.location.hash = newId.href;
   }
 
   public saveDrawing(shareDrawingId: DrawingId, name: string) {
@@ -281,6 +281,10 @@ export class Store {
     localDrawing.persistentCommitted.set(
       sharedDrawing.persistentCommitted.get()
     );
+    this.localDrawingIds.set([
+      ...this.localDrawingIds.get(),
+      DrawingId.local(name),
+    ]);
   }
 }