feat: add "new" button to clear the canvas

src/main.tsx

@@ -62,13 +62,14 @@ const App = () => {
     if ((drawingName?.length ?? 0) == 0) return;
 
     // retrieve the drawing from content-script
-    const drawing = await getDrawing();
-    await createDrawing({
+    const rawDrawing = await getDrawing();
+    const drawing = await createDrawing({
       id: Date.now().toString(), //todo: use an uuid
       name: drawingName!,
       lastUpdate: new Date().toDateString(),
-      data: drawing
-    })
+      data: rawDrawing
+    });
+    await setDrawing(drawing);
   }
 
   const SaveNewDrawing = <>
@@ -84,6 +85,7 @@ const App = () => {
       <Button
         onClick={onSaveButtonClick}
         color='green'>Save</Button>
+      <Button onClick={() => setDrawing({ data: [], name: null })} color='red'>Clear</Button>
     </Group>
   </>;
 
@@ -92,7 +94,7 @@ const App = () => {
       <Text size='s'>{activeDrawingName}</Text>
     </Group>
     <Group margin="5px 0 20px 0">
-      <Button color='red'>New</Button>
+      <Button onClick={() => setDrawing({ data: [], name: null })} color='red'>New</Button>
       <Button color='orange'>Update</Button>
       <Button color='green'>Save as</Button>
     </Group>

src/model.ts

@@ -44,7 +44,7 @@ type GetDrawingResponse = { action: "drawing"; data: any };
  * Set the current drawing in the local store
  * with the data content
  */
-type SetDrawingRequest = { action: "set-drawing"; name: string; data: any };
+type SetDrawingRequest = { action: "set-drawing"; name: string | null; data: any };
 
 type SetDrawingResponse = { action: "drawing-set"; success: boolean };
 

src/script.ts

@@ -27,7 +27,9 @@ chrome.runtime.onMessage.addListener(function (
       break;
     case "set-drawing":
       localStorage.setItem(ACTIVE_DRAWING_DATA_KEY, request.data);
-      localStorage.setItem(ACTIVE_DRAWING_NAME_KEY, request.name);
+      if (request.name)
+        localStorage.setItem(ACTIVE_DRAWING_NAME_KEY, request.name);
+      else localStorage.removeItem(ACTIVE_DRAWING_NAME_KEY);
       reply({
         action: "drawing-set",
         success: true,

src/use-content-script.ts

@@ -30,7 +30,7 @@ export const useContentScript = () => {
     }
   };
 
-  const setDrawing = async (drawing: Drawing) => {
+  const setDrawing = async (drawing: {data: any, name: string | null}) => {
     const response = await sendReceiveMessage({
       action: "set-drawing",
       data: drawing.data,

src/use-storage.ts

@@ -36,7 +36,7 @@ export const useStorage = () => {
     readDrawings();
   }, []);
 
-  const createDrawing = async (newDrawing: Drawing): Promise<void> => {
+  const createDrawing = async (newDrawing: Drawing): Promise<Drawing> => {
     await readDrawings();
     if (drawings.find((d) => d.id === newDrawing.id)) {
       throw Error("[createDrawing] Duplicated id found");
@@ -45,6 +45,7 @@ export const useStorage = () => {
     await storage.set(DATA_KEY, result);
     // update the state with read drawings
     await readDrawings();
+    return newDrawing
   };
 
   const readDrawings = async (): Promise<void> => {