@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-image-product-react/imageBlobStore.ts

@@ -0,0 +1,315 @@
+import type { AssetId, Editor } from "@land/canvas-core";
+import {
+  LAND_DOCUMENT_INDEXEDDB_NAME,
+  LAND_DOCUMENT_INDEXEDDB_STORE,
+  LAND_DOCUMENT_INDEXEDDB_VERSION,
+  LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+} from "@land/canvas-product-react/persistence";
+
+const IMAGE_STORAGE_KEY_PREFIX = "image-blob:";
+
+export interface ImageBlobWriteResult {
+  storageKey: string;
+}
+
+export interface ImageObjectUrlStore {
+  preloadForEditor(editor: Editor): Promise<void>;
+  preload(storageKey: string): Promise<string | null>;
+  resolve(storageKey: string): string | null;
+  resolveAssetUrl(editor: Editor, assetId: AssetId): string | null;
+  release(storageKey: string): void;
+  releaseAll(): void;
+}
+
+export function createImageStorageKey(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return `${IMAGE_STORAGE_KEY_PREFIX}${crypto.randomUUID()}`;
+  }
+  return `${IMAGE_STORAGE_KEY_PREFIX}${Date.now().toString(36)}-${Math.random()
+    .toString(36)
+    .slice(2)}`;
+}
+
+export async function writeImageBlob(blob: Blob): Promise<ImageBlobWriteResult> {
+  const storageKey = createImageStorageKey();
+  const database = await openImageBlobDatabase();
+  if (!database) {
+    throw new Error("IndexedDB is not available for image storage.");
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const transaction = database.transaction(
+      LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+      "readwrite",
+    );
+    transaction.addEventListener("complete", () => {
+      database.close();
+      resolve();
+    });
+    transaction.addEventListener("abort", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.addEventListener("error", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction
+      .objectStore(LAND_IMAGE_BLOB_INDEXEDDB_STORE)
+      .put(blob, storageKey);
+  });
+
+  return { storageKey };
+}
+
+export async function readImageBlob(
+  storageKey: string,
+): Promise<Blob | null> {
+  const database = await openImageBlobDatabase();
+  if (!database) {
+    return null;
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(
+      LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+      "readonly",
+    );
+    transaction.addEventListener("complete", () => database.close());
+    transaction.addEventListener("abort", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.addEventListener("error", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    const request = transaction
+      .objectStore(LAND_IMAGE_BLOB_INDEXEDDB_STORE)
+      .get(storageKey);
+    request.addEventListener("success", () => {
+      resolve(request.result instanceof Blob ? request.result : null);
+    });
+    request.addEventListener("error", () => reject(request.error));
+  });
+}
+
+export async function readImageBlobAsDataUrl(
+  storageKey: string,
+): Promise<string | null> {
+  const blob = await readImageBlob(storageKey);
+  if (!blob) {
+    return null;
+  }
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      resolve(typeof reader.result === "string" ? reader.result : null);
+    });
+    reader.addEventListener("error", () => {
+      reject(reader.error);
+    });
+    reader.readAsDataURL(blob);
+  });
+}
+
+export async function deleteImageBlob(storageKey: string): Promise<void> {
+  const database = await openImageBlobDatabase();
+  if (!database) {
+    return;
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const transaction = database.transaction(
+      LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+      "readwrite",
+    );
+    transaction.addEventListener("complete", () => {
+      database.close();
+      resolve();
+    });
+    transaction.addEventListener("abort", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.addEventListener("error", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.objectStore(LAND_IMAGE_BLOB_INDEXEDDB_STORE).delete(storageKey);
+  });
+}
+
+export async function getAllImageBlobStorageKeys(): Promise<string[]> {
+  const database = await openImageBlobDatabase();
+  if (!database) {
+    return [];
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(
+      LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+      "readonly",
+    );
+    transaction.addEventListener("complete", () => database.close());
+    transaction.addEventListener("abort", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    transaction.addEventListener("error", () => {
+      database.close();
+      reject(transaction.error);
+    });
+    const request = transaction
+      .objectStore(LAND_IMAGE_BLOB_INDEXEDDB_STORE)
+      .getAllKeys();
+    request.addEventListener("success", () => {
+      resolve(request.result.map(String));
+    });
+    request.addEventListener("error", () => reject(request.error));
+  });
+}
+
+export function getImageAssetStorageKey(
+  editor: Editor,
+  assetId: AssetId,
+): string | null {
+  const asset = editor.getAsset(assetId);
+  const storageKey = asset
+    ? (asset.props as Record<string, unknown>).storageKey
+    : null;
+  return typeof storageKey === "string" && storageKey.length > 0
+    ? storageKey
+    : null;
+}
+
+export function getReferencedImageStorageKeys(editor: Editor): Set<string> {
+  const storageKeys = new Set<string>();
+  for (const asset of editor.getAssets()) {
+    const storageKey = (asset.props as Record<string, unknown>).storageKey;
+    if (typeof storageKey === "string" && storageKey.length > 0) {
+      storageKeys.add(storageKey);
+    }
+  }
+  return storageKeys;
+}
+
+export async function cleanupUnreferencedImageBlobs({
+  editor,
+  objectUrls,
+}: {
+  editor: Editor;
+  objectUrls?: ImageObjectUrlStore;
+}): Promise<string[]> {
+  const referencedStorageKeys = getReferencedImageStorageKeys(editor);
+  const storageKeys = await getAllImageBlobStorageKeys();
+  const removedStorageKeys: string[] = [];
+
+  for (const storageKey of storageKeys) {
+    if (referencedStorageKeys.has(storageKey)) {
+      continue;
+    }
+    objectUrls?.release(storageKey);
+    await deleteImageBlob(storageKey);
+    removedStorageKeys.push(storageKey);
+  }
+
+  return removedStorageKeys;
+}
+
+export function createImageObjectUrlStore(): ImageObjectUrlStore {
+  const urlsByStorageKey = new Map<string, string>();
+  const pendingByStorageKey = new Map<string, Promise<string | null>>();
+
+  const preload = async (storageKey: string): Promise<string | null> => {
+    const existing = urlsByStorageKey.get(storageKey);
+    if (existing) {
+      return existing;
+    }
+
+    const pending = pendingByStorageKey.get(storageKey);
+    if (pending) {
+      return pending;
+    }
+
+    const nextPending = readImageBlob(storageKey)
+      .then((blob) => {
+        if (!blob) {
+          return null;
+        }
+        const url = URL.createObjectURL(blob);
+        urlsByStorageKey.set(storageKey, url);
+        return url;
+      })
+      .finally(() => {
+        pendingByStorageKey.delete(storageKey);
+      });
+    pendingByStorageKey.set(storageKey, nextPending);
+    return nextPending;
+  };
+
+  return {
+    async preloadForEditor(currentEditor) {
+      await Promise.all(
+        Array.from(getReferencedImageStorageKeys(currentEditor)).map(
+          (storageKey) => preload(storageKey),
+        ),
+      );
+    },
+    preload,
+    resolve(storageKey) {
+      return urlsByStorageKey.get(storageKey) ?? null;
+    },
+    resolveAssetUrl(editor, assetId) {
+      const storageKey = getImageAssetStorageKey(editor, assetId);
+      return storageKey ? (urlsByStorageKey.get(storageKey) ?? null) : null;
+    },
+    release(storageKey) {
+      const url = urlsByStorageKey.get(storageKey);
+      if (url) {
+        URL.revokeObjectURL(url);
+        urlsByStorageKey.delete(storageKey);
+      }
+      pendingByStorageKey.delete(storageKey);
+    },
+    releaseAll() {
+      for (const url of urlsByStorageKey.values()) {
+        URL.revokeObjectURL(url);
+      }
+      urlsByStorageKey.clear();
+      pendingByStorageKey.clear();
+    },
+  };
+}
+
+function openImageBlobDatabase(): Promise<IDBDatabase | null> {
+  if (typeof indexedDB === "undefined") {
+    return Promise.resolve(null);
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(
+      LAND_DOCUMENT_INDEXEDDB_NAME,
+      LAND_DOCUMENT_INDEXEDDB_VERSION,
+    );
+    request.addEventListener("upgradeneeded", () => {
+      if (
+        !request.result.objectStoreNames.contains(
+          LAND_DOCUMENT_INDEXEDDB_STORE,
+        )
+      ) {
+        request.result.createObjectStore(LAND_DOCUMENT_INDEXEDDB_STORE);
+      }
+      if (
+        !request.result.objectStoreNames.contains(
+          LAND_IMAGE_BLOB_INDEXEDDB_STORE,
+        )
+      ) {
+        request.result.createObjectStore(LAND_IMAGE_BLOB_INDEXEDDB_STORE);
+      }
+    });
+    request.addEventListener("success", () => resolve(request.result));
+    request.addEventListener("error", () => reject(request.error));
+  });
+}