alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-24 14:02:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

Migrate canvas state storage to IndexedDB

Browse Source 
Replaced localStorage usage in Canvas.js with asynchronous IndexedDB operations for saving, loading, and removing canvas state. Added a new db.js module to handle IndexedDB interactions, improving scalability and reliability of state persistence.
This commit is contained in:
Dariusz L
2025-06-24 08:21:34 +02:00
parent e47d51e19c
commit a874a341e0
2 changed files with 122 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
js/Canvas.js
View File

@@ -1,3 +1,5 @@
import { getCanvasState, setCanvasState, removeCanvasState } from "./db.js";
export class Canvas {
constructor(node, widget) {
this.node = node;
@@ -82,28 +84,20 @@ export class Canvas {
// this.saveState(); // Wywołanie przeniesione do loadInitialState
}
getLocalStorageKey() {
async loadStateFromDB() {
console.log("Attempting to load state from IndexedDB for node:", this.node.id);
if (!this.node.id) {
console.error("Node ID is not available for generating localStorage key.");
return null;
console.error("Node ID is not available for loading state from DB.");
return false;
}
return `canvas-state-${this.node.id}`;
}
async loadStateFromLocalStorage() {
console.log("Attempting to load state from localStorage for node:", this.node.id);
const key = this.getLocalStorageKey();
if (!key) return false;
try {
const savedStateJSON = localStorage.getItem(key);
if (!savedStateJSON) {
console.log("No saved state found in localStorage for key:", key);
const savedState = await getCanvasState(this.node.id);
if (!savedState) {
console.log("No saved state found in IndexedDB for node:", this.node.id);
return false;
}
console.log("Found saved state in localStorage:", savedStateJSON.substring(0, 200) + "...");
const savedState = JSON.parse(savedStateJSON);
console.log("Found saved state in IndexedDB.");
this.width = savedState.width || 512;
this.height = savedState.height || 512;
@@ -144,16 +138,18 @@ export class Canvas {
console.log("Canvas state loaded successfully from localStorage for node", this.node.id);
return true;
} catch (e) {
console.error("Error loading canvas state from localStorage:", e);
localStorage.removeItem(key);
console.error("Error loading canvas state from IndexedDB:", e);
await removeCanvasState(this.node.id).catch(err => console.error("Failed to remove corrupted state:", err));
return false;
}
}
saveStateToLocalStorage() {
console.log("Attempting to save state to localStorage for node:", this.node.id);
const key = this.getLocalStorageKey();
if (!key) return;
async saveStateToDB() {
console.log("Attempting to save state to IndexedDB for node:", this.node.id);
if (!this.node.id) {
console.error("Node ID is not available for saving state to DB.");
return;
}
try {
const state = {
@@ -172,17 +168,16 @@ export class Canvas {
width: this.width,
height: this.height,
};
const stateJSON = JSON.stringify(state);
localStorage.setItem(key, stateJSON);
console.log("Canvas state saved to localStorage:", stateJSON.substring(0, 200) + "...");
await setCanvasState(this.node.id, state);
console.log("Canvas state saved to IndexedDB.");
} catch (e) {
console.error("Error saving canvas state to localStorage:", e);
console.error("Error saving canvas state to IndexedDB:", e);
}
}
async loadInitialState() {
console.log("Loading initial state for node:", this.node.id);
const loaded = await this.loadStateFromLocalStorage();
const loaded = await this.loadStateFromDB();
if (!loaded) {
console.log("No saved state found, initializing from node data.");
await this.initNodeData();
@@ -220,7 +215,7 @@ export class Canvas {
}
this.redoStack = [];
this.updateHistoryButtons();
this.saveStateToLocalStorage();
this.saveStateToDB();
}
undo() {
@@ -1138,7 +1133,7 @@ export class Canvas {
this.render();
if (saveHistory) {
this.saveStateToLocalStorage();
this.saveStateToDB();
}
}