Improve GraphFX UI editing and image previews

graphfx-ui/src/lib/imageLibrary.ts

@@ -0,0 +1,53 @@
+export type StoredImage = {
+  id: string
+  name: string
+  dataUrl: string
+  createdAt: number
+}
+
+const IMAGE_LIBRARY_KEY = 'GRAPHFX_UI_IMAGE_LIBRARY'
+
+export function loadImageLibrary(): StoredImage[] {
+  try {
+    const raw = localStorage.getItem(IMAGE_LIBRARY_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed)
+      ? parsed.filter((item) => item?.id && item?.name && item?.dataUrl)
+      : []
+  } catch {
+    return []
+  }
+}
+
+export function saveImageLibrary(images: StoredImage[]) {
+  localStorage.setItem(IMAGE_LIBRARY_KEY, JSON.stringify(images))
+}
+
+function fileToDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => reject(reader.error || new Error(`Could not read ${file.name}`))
+    reader.onload = () => resolve(String(reader.result || ''))
+    reader.readAsDataURL(file)
+  })
+}
+
+export async function filesToStoredImages(files: FileList | File[]): Promise<StoredImage[]> {
+  const imageFiles = Array.from(files).filter((file) => file.type.startsWith('image/'))
+  return Promise.all(imageFiles.map(async (file) => ({
+    id: crypto.randomUUID(),
+    name: file.name,
+    dataUrl: await fileToDataUrl(file),
+    createdAt: Date.now(),
+  })))
+}
+
+export function loadHtmlImage(dataUrl: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error('Could not decode selected image.'))
+    image.src = dataUrl
+  })
+}