alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-23 21:42:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor canvas image storage to use IndexedDB

Browse Source 
Images used in canvas layers are now stored in a dedicated 'CanvasImages' object store in IndexedDB, referenced by unique imageId. The Canvas class and db.js were updated to support saving, loading, and removing images by imageId, improving performance and scalability. Legacy imageSrc handling is preserved for backward compatibility, and the database schema version was incremented to 2 to support the new store.
This commit is contained in:
Dariusz L
2025-06-25 09:02:28 +02:00
parent c3cc33c711
commit 0fc64df279
2 changed files with 262 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
js/db.js
View File

@@ -1,6 +1,7 @@
const DB_NAME = 'CanvasNodeDB';
const STORE_NAME = 'CanvasState';
const DB_VERSION = 1;
const STATE_STORE_NAME = 'CanvasState';
const IMAGE_STORE_NAME = 'CanvasImages';
const DB_VERSION = 2; // Zwiększono wersję, aby wymusić aktualizację schematu
let db;
@@ -28,9 +29,13 @@ function openDB() {
request.onupgradeneeded = (event) => {
console.log("Upgrading IndexedDB...");
const db = event.target.result;
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, {keyPath: 'id'});
console.log("Object store created:", STORE_NAME);
if (!db.objectStoreNames.contains(STATE_STORE_NAME)) {
db.createObjectStore(STATE_STORE_NAME, {keyPath: 'id'});
console.log("Object store created:", STATE_STORE_NAME);
}
if (!db.objectStoreNames.contains(IMAGE_STORE_NAME)) {
db.createObjectStore(IMAGE_STORE_NAME, {keyPath: 'imageId'});
console.log("Object store created:", IMAGE_STORE_NAME);
}
};
});
@@ -40,8 +45,8 @@ export async function getCanvasState(id) {
console.log(`DB: Getting state for id: ${id}`);
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction([STORE_NAME], 'readonly');
const store = transaction.objectStore(STORE_NAME);
const transaction = db.transaction([STATE_STORE_NAME], 'readonly');
const store = transaction.objectStore(STATE_STORE_NAME);
const request = store.get(id);
request.onerror = (event) => {
@@ -60,8 +65,8 @@ export async function setCanvasState(id, state) {
console.log(`DB: Setting state for id: ${id}`);
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction([STORE_NAME], 'readwrite');
const store = transaction.objectStore(STORE_NAME);
const transaction = db.transaction([STATE_STORE_NAME], 'readwrite');
const store = transaction.objectStore(STATE_STORE_NAME);
const request = store.put({id, state});
request.onerror = (event) => {
@@ -80,8 +85,8 @@ export async function removeCanvasState(id) {
console.log(`DB: Removing state for id: ${id}`);
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction([STORE_NAME], 'readwrite');
const store = transaction.objectStore(STORE_NAME);
const transaction = db.transaction([STATE_STORE_NAME], 'readwrite');
const store = transaction.objectStore(STATE_STORE_NAME);
const request = store.delete(id);
request.onerror = (event) => {
@@ -96,12 +101,72 @@ export async function removeCanvasState(id) {
});
}
export async function saveImage(imageId, imageSrc) {
console.log(`DB: Saving image with id: ${imageId}`);
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction([IMAGE_STORE_NAME], 'readwrite');
const store = transaction.objectStore(IMAGE_STORE_NAME);
const request = store.put({imageId, imageSrc});
request.onerror = (event) => {
console.error("DB: Error saving image:", event.target.error);
reject("Error saving image.");
};
request.onsuccess = () => {
console.log(`DB: Image saved successfully for id: ${imageId}`);
resolve();
};
});
}
export async function getImage(imageId) {
console.log(`DB: Getting image with id: ${imageId}`);
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction([IMAGE_STORE_NAME], 'readonly');
const store = transaction.objectStore(IMAGE_STORE_NAME);
const request = store.get(imageId);
request.onerror = (event) => {
console.error("DB: Error getting image:", event.target.error);
reject("Error getting image.");
};
request.onsuccess = (event) => {
console.log(`DB: Get image success for id: ${imageId}`, event.target.result ? 'found' : 'not found');
resolve(event.target.result ? event.target.result.imageSrc : null);
};
});
}
export async function removeImage(imageId) {
console.log(`DB: Removing image with id: ${imageId}`);
const db = await openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction([IMAGE_STORE_NAME], 'readwrite');
const store = transaction.objectStore(IMAGE_STORE_NAME);
const request = store.delete(imageId);
request.onerror = (event) => {
console.error("DB: Error removing image:", event.target.error);
reject("Error removing image.");
};
request.onsuccess = () => {
console.log(`DB: Remove image success for id: ${imageId}`);
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 transaction = db.transaction([STATE_STORE_NAME], 'readwrite');
const store = transaction.objectStore(STATE_STORE_NAME);
const request = store.clear();
request.onerror = (event) => {