From 392257231599f6b149374bd9b3e3fdec5cfc1a84 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Tue, 24 Jun 2025 16:38:56 +0200
Subject: [PATCH] Add button to clear all saved canvas states

Introduces a 'Clear Cache' button to the Canvas widget UI, allowing users to clear all saved canvas states. Implements the clearAllCanvasStates function in db.js to handle the deletion of all canvas state entries from the database.
---
 js/Canvas_view.js | 19 +++++++++++++++++++
 js/db.js          | 20 ++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/js/Canvas_view.js b/js/Canvas_view.js
index 868e9ab..7234111 100644
--- a/js/Canvas_view.js
+++ b/js/Canvas_view.js
@@ -2,6 +2,7 @@ import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
 import {$el} from "../../scripts/ui.js";
 import {Canvas} from "./Canvas.js";
+import { clearAllCanvasStates } from "./db.js";
 
 async function createCanvasWidget(node, widget, app) {
     const canvas = new Canvas(node, widget);
@@ -610,6 +611,24 @@ async function createCanvasWidget(node, widget, app) {
                         statusIndicator.setStatus('error');
                     }
                 }
+            }),
+            $el("button.painter-button", {
+                textContent: "Clear Cache",
+                style: {
+                    backgroundColor: "#d44a4a",
+                    borderColor: "#b42a2a",
+                },
+                onclick: async () => {
+                    if (confirm("Are you sure you want to clear all saved canvas states? This action cannot be undone.")) {
+                        try {
+                            await clearAllCanvasStates();
+                            alert("Canvas cache cleared successfully!");
+                        } catch (e) {
+                            console.error("Failed to clear canvas cache:", e);
+                            alert("Error clearing canvas cache. Check the console for details.");
+                        }
+                    }
+                }
             })
         ])
     ]);
diff --git a/js/db.js b/js/db.js
index e34f6e1..3329be9 100644
--- a/js/db.js
+++ b/js/db.js
@@ -94,4 +94,24 @@ export async function removeCanvasState(id) {
             resolve();
         };
     });
+}
+
+export async function clearAllCanvasStates() {
+    console.log("DB: Clearing all canvas states...");
+    const db = await openDB();
+    return new Promise((resolve, reject) => {
+        const transaction = db.transaction([STORE_NAME], 'readwrite');
+        const store = transaction.objectStore(STORE_NAME);
+        const request = store.clear();
+
+        request.onerror = (event) => {
+            console.error("DB: Error clearing canvas states:", event.target.error);
+            reject("Error clearing states.");
+        };
+
+        request.onsuccess = () => {
+            console.log("DB: All canvas states cleared successfully.");
+            resolve();
+        };
+    });
 }
\ No newline at end of file