@arronqzy/react-view 1.0.13 → 1.0.14

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -19,6 +19,7 @@ import {
   workspaceSnapshotsEqual,
   type WorkspaceSnapshot,
 } from "../library/workspace-snapshot";
+import { runBusyTask } from "../utils/async-work";
 
 export type UseWorkspaceProjectsOptions = {
   exportPanelData: () => State;
@@ -69,6 +70,29 @@ export function useWorkspaceProjects({
   const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
   const [activeProjectName, setActiveProjectName] = useState<string | null>(null);
   const syncedSnapshotRef = useRef<WorkspaceSnapshot | null>(null);
+  const syncedPanelRevisionRef = useRef<unknown>(null);
+  const pendingRevisionSyncRef = useRef(false);
+  const previewWindowsRef = useRef(new Map<string, Window>());
+  const [previewingProjectIds, setPreviewingProjectIds] = useState<string[]>([]);
+
+  const refreshPreviewing = useCallback(() => {
+    const ids: string[] = [];
+    for (const [id, win] of previewWindowsRef.current) {
+      if (!win.closed) ids.push(id);
+      else previewWindowsRef.current.delete(id);
+    }
+    setPreviewingProjectIds((prev) => {
+      if (prev.length === ids.length && prev.every((value, index) => value === ids[index])) {
+        return prev;
+      }
+      return ids;
+    });
+  }, []);
+
+  useEffect(() => {
+    const timer = window.setInterval(refreshPreviewing, 2000);
+    return () => window.clearInterval(timer);
+  }, [refreshPreviewing]);
 
   const resolveProjectName = useCallback(() => {
     return productName.trim() || t("panel.defaults.unnamedProduct");
@@ -76,19 +100,12 @@ export function useWorkspaceProjects({
 
   const buildCurrentSnapshot = useCallback((): WorkspaceSnapshot => {
     return {
-      panelState: exportPanelData(),
       blueprintDocument,
       blueprintMeta: { ...blueprintMeta },
       productName,
       titleIconDataUrl,
     };
-  }, [
-    blueprintDocument,
-    blueprintMeta,
-    exportPanelData,
-    productName,
-    titleIconDataUrl,
-  ]);
+  }, [blueprintDocument, blueprintMeta, productName, titleIconDataUrl]);
 
   const refreshProjects = useCallback(async () => {
     const items = await listWorkspaceProjects();
@@ -99,8 +116,16 @@ export function useWorkspaceProjects({
     void refreshProjects();
   }, [refreshProjects]);
 
+  useEffect(() => {
+    if (!pendingRevisionSyncRef.current) return;
+    syncedPanelRevisionRef.current = panelRevision;
+    pendingRevisionSyncRef.current = false;
+  }, [panelRevision]);
+
   const dirty = useMemo(() => {
     if (!activeProjectId || !syncedSnapshotRef.current) return false;
+    if (pendingRevisionSyncRef.current) return false;
+    if (panelRevision !== syncedPanelRevisionRef.current) return true;
     return !workspaceSnapshotsEqual(buildCurrentSnapshot(), syncedSnapshotRef.current);
   }, [
     activeProjectId,
@@ -129,12 +154,13 @@ export function useWorkspaceProjects({
       setActiveProjectId(record.id);
       setActiveProjectName(record.name);
       syncedSnapshotRef.current = cloneWorkspaceSnapshot({
-        panelState: record.panelState,
         blueprintDocument,
         blueprintMeta,
         productName: record.productName,
         titleIconDataUrl: record.titleIconDataUrl ?? "",
       });
+      syncedPanelRevisionRef.current = panelRevision;
+      pendingRevisionSyncRef.current = true;
       onProjectApplied?.({
         ...record,
         blueprintDocument,
@@ -148,13 +174,14 @@ export function useWorkspaceProjects({
       setBlueprintMeta,
       setProductName,
       setTitleIconDataUrl,
+      panelRevision,
       t,
     ]
   );
 
   const persistProject = useCallback(
     async (options: { id?: string; name: string; createdAt?: number }) => {
-      const snapshot = buildCurrentSnapshot();
+      const snapshot = cloneWorkspaceSnapshot(buildCurrentSnapshot());
       const now = Date.now();
       const id = options.id ?? createWorkspaceProjectId();
       const createdAt = options.createdAt ?? now;
@@ -165,7 +192,7 @@ export function useWorkspaceProjects({
         name,
         createdAt,
         updatedAt: now,
-        panelState: snapshot.panelState,
+        panelState: exportPanelData(),
         blueprintDocument: snapshot.blueprintDocument,
         blueprintMeta: snapshot.blueprintMeta,
         productName: snapshot.productName,
@@ -177,92 +204,131 @@ export function useWorkspaceProjects({
       broadcastWorkspaceProjectUpdate(id, now);
       setActiveProjectId(id);
       setActiveProjectName(name);
-      syncedSnapshotRef.current = cloneWorkspaceSnapshot(snapshot);
+      syncedSnapshotRef.current = snapshot;
+      syncedPanelRevisionRef.current = panelRevision;
+      pendingRevisionSyncRef.current = false;
       await refreshProjects();
       return record;
     },
-    [buildCurrentSnapshot, resolveProjectName, refreshProjects]
+    [buildCurrentSnapshot, exportPanelData, panelRevision, resolveProjectName, refreshProjects]
   );
 
   const handleCreateProject = useCallback(async () => {
-    const name = resolveProjectName();
-    const record = await persistProject({ name });
-    return { name, id: record.id };
-  }, [persistProject, resolveProjectName]);
+    return runBusyTask(t("common.savingWorkspace"), async () => {
+      const name = resolveProjectName();
+      const record = await persistProject({ name });
+      return { name, id: record.id };
+    });
+  }, [persistProject, resolveProjectName, t]);
 
   const handleSaveProject = useCallback(async () => {
     if (!activeProjectId) {
       return handleCreateProject();
     }
-    const existing = await getWorkspaceProject(activeProjectId);
-    const name = resolveProjectName();
-    const record = await persistProject({
-      id: activeProjectId,
-      name,
-      createdAt: existing?.createdAt,
+    return runBusyTask(t("common.savingWorkspace"), async () => {
+      const existing = await getWorkspaceProject(activeProjectId);
+      const name = resolveProjectName();
+      const record = await persistProject({
+        id: activeProjectId,
+        name,
+        createdAt: existing?.createdAt,
+      });
+      return { name, id: record.id };
     });
-    return { name, id: record.id };
-  }, [activeProjectId, handleCreateProject, persistProject, resolveProjectName]);
+  }, [activeProjectId, handleCreateProject, persistProject, resolveProjectName, t]);
 
   const handleOpenProject = useCallback(
     async (id: string) => {
-      const record = await getWorkspaceProject(id);
-      if (!record) {
-        await refreshProjects();
-        throw new Error(t("panel.messages.workspaceNotFound"));
-      }
-      applyProjectRecord(record);
+      await runBusyTask(t("common.loadingWorkspace"), async () => {
+        const record = await getWorkspaceProject(id);
+        if (!record) {
+          await refreshProjects();
+          throw new Error(t("panel.messages.workspaceNotFound"));
+        }
+        applyProjectRecord(record);
+      });
     },
     [applyProjectRecord, refreshProjects, t]
   );
 
   const handleSyncProject = useCallback(async () => {
-    if (!activeProjectId) {
-      throw new Error(t("panel.messages.saveWorkspaceFirst"));
-    }
-    const existing = await getWorkspaceProject(activeProjectId);
-    if (!existing) {
-      setActiveProjectId(null);
-      setActiveProjectName(null);
-      syncedSnapshotRef.current = null;
-      await refreshProjects();
-      throw new Error(t("panel.messages.workspaceNotFound"));
-    }
-    const name = resolveProjectName() || existing.name;
-    await persistProject({
-      id: activeProjectId,
-      name,
-      createdAt: existing.createdAt,
+    return runBusyTask(t("common.syncingWorkspace"), async () => {
+      if (!activeProjectId) {
+        throw new Error(t("panel.messages.saveWorkspaceFirst"));
+      }
+      const existing = await getWorkspaceProject(activeProjectId);
+      if (!existing) {
+        setActiveProjectId(null);
+        setActiveProjectName(null);
+        syncedSnapshotRef.current = null;
+        await refreshProjects();
+        throw new Error(t("panel.messages.workspaceNotFound"));
+      }
+      const name = resolveProjectName() || existing.name;
+      await persistProject({
+        id: activeProjectId,
+        name,
+        createdAt: existing.createdAt,
+      });
+      return name;
     });
-    return name;
   }, [activeProjectId, persistProject, refreshProjects, resolveProjectName, t]);
 
   const handleDeleteProject = useCallback(
     async (id: string) => {
-      await deleteWorkspaceProject(id);
-      if (activeProjectId === id) {
-        setActiveProjectId(null);
-        setActiveProjectName(null);
-        syncedSnapshotRef.current = null;
-      }
-      await refreshProjects();
+      await runBusyTask(t("common.deletingWorkspace"), async () => {
+        await deleteWorkspaceProject(id);
+        if (activeProjectId === id) {
+          setActiveProjectId(null);
+          setActiveProjectName(null);
+          syncedSnapshotRef.current = null;
+        }
+        previewWindowsRef.current.delete(id);
+        refreshPreviewing();
+        await refreshProjects();
+      });
     },
-    [activeProjectId, refreshProjects]
+    [activeProjectId, refreshPreviewing, refreshProjects, t]
   );
 
   const handlePreviewProject = useCallback(
     async (id: string, options?: { syncFirst?: boolean }) => {
-      if (options?.syncFirst && activeProjectId === id && dirty) {
-        await handleSyncProject();
-      }
-      const record =
-        (await getWorkspaceProject(id)) ?? readWorkspacePreviewCache(id);
-      if (record) {
-        writeWorkspacePreviewCache(record);
-      }
-      window.open(buildOnlinePreviewUrl(id), "_blank", "noopener,noreferrer");
+      await runBusyTask(t("common.openingPreview"), async () => {
+        if (options?.syncFirst && activeProjectId === id && dirty) {
+          await handleSyncProject();
+        }
+        const record =
+          (await getWorkspaceProject(id)) ?? readWorkspacePreviewCache(id);
+        if (record) {
+          writeWorkspacePreviewCache(record);
+        }
+        const existing = previewWindowsRef.current.get(id);
+        if (existing && !existing.closed) {
+          try {
+            existing.focus();
+          } catch {
+            /* ignore */
+          }
+          refreshPreviewing();
+          return;
+        }
+        const win = window.open(
+          buildOnlinePreviewUrl(id),
+          `abuilder-preview-${id}`
+        );
+        if (win) {
+          previewWindowsRef.current.set(id, win);
+          try {
+            win.opener = null;
+            win.focus();
+          } catch {
+            /* ignore */
+          }
+        }
+        refreshPreviewing();
+      });
     },
-    [activeProjectId, dirty, handleSyncProject]
+    [activeProjectId, dirty, handleSyncProject, refreshPreviewing, t]
   );
 
   return {
@@ -270,6 +336,7 @@ export function useWorkspaceProjects({
     activeProjectId,
     activeProjectName,
     dirty,
+    previewingProjectIds,
     handleCreateProject,
     handleSaveProject,
     handleOpenProject,

package/src/panel/library/workspace-project-cache.ts

@@ -4,7 +4,11 @@ const CACHE_PREFIX = "arronqzy-workspace-preview:";
 
 export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void {
   try {
-    localStorage.setItem(CACHE_PREFIX + record.id, JSON.stringify(record));
+    // 只写轻量标记，避免把含 data URL 的整包再塞进 localStorage（配额小、内存翻倍）
+    localStorage.setItem(
+      CACHE_PREFIX + record.id,
+      JSON.stringify({ id: record.id, updatedAt: record.updatedAt })
+    );
   } catch {
     // ignore quota / private mode
   }
@@ -16,7 +20,9 @@ export function readWorkspacePreviewCache(
   try {
     const raw = localStorage.getItem(CACHE_PREFIX + projectId);
     if (!raw) return null;
-    return JSON.parse(raw) as WorkspaceProjectRecord;
+    const parsed = JSON.parse(raw) as Partial<WorkspaceProjectRecord> | null;
+    if (!parsed || typeof parsed !== "object" || !parsed.panelState) return null;
+    return parsed as WorkspaceProjectRecord;
   } catch {
     return null;
   }

package/src/panel/library/workspace-project-db.ts

@@ -78,17 +78,35 @@ export function createWorkspaceProjectId(): string {
 }
 
 export async function listWorkspaceProjects(): Promise<WorkspaceProjectListItem[]> {
-  const records = await runTransaction<WorkspaceProjectRecord[]>("readonly", (store) =>
-    store.getAll()
-  );
-  return records
-    .map((record) => ({
-      id: record.id,
-      name: record.name,
-      createdAt: record.createdAt,
-      updatedAt: record.updatedAt,
-    }))
-    .sort((a, b) => b.updatedAt - a.updatedAt);
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const store = tx.objectStore(STORE_NAME);
+    const request = store.openCursor();
+    const items: WorkspaceProjectListItem[] = [];
+    request.onerror = () =>
+      reject(request.error ?? new Error("indexeddb-request-failed"));
+    request.onsuccess = () => {
+      const cursor = request.result;
+      if (!cursor) return;
+      const record = cursor.value as WorkspaceProjectRecord;
+      items.push({
+        id: record.id,
+        name: record.name,
+        createdAt: record.createdAt,
+        updatedAt: record.updatedAt,
+      });
+      cursor.continue();
+    };
+    tx.oncomplete = () => {
+      db.close();
+      resolve(items.sort((a, b) => b.updatedAt - a.updatedAt));
+    };
+    tx.onerror = () => {
+      db.close();
+      reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+    };
+  });
 }
 
 export async function getWorkspaceProject(

package/src/panel/library/workspace-snapshot.ts

@@ -1,15 +1,24 @@
 import { blueprintDocumentsEqual } from "@arronqzy/react-blueprint";
 import type { BlueprintDocument, BlueprintMetaDraft } from "@arronqzy/react-blueprint";
-import type { State } from "@arronqzy/rx-store";
 
 export type WorkspaceSnapshot = {
-  panelState: State;
   blueprintDocument: BlueprintDocument;
   blueprintMeta: BlueprintMetaDraft;
   productName: string;
   titleIconDataUrl: string;
 };
 
+function cloneBlueprintDocument(document: BlueprintDocument): BlueprintDocument {
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(document);
+    } catch {
+      /* fall through */
+    }
+  }
+  return JSON.parse(JSON.stringify(document)) as BlueprintDocument;
+}
+
 export function workspaceSnapshotsEqual(
   a: WorkspaceSnapshot,
   b: WorkspaceSnapshot
@@ -19,9 +28,17 @@ export function workspaceSnapshotsEqual(
   if (a.blueprintMeta.name !== b.blueprintMeta.name) return false;
   if ((a.blueprintMeta.remark ?? "") !== (b.blueprintMeta.remark ?? "")) return false;
   if (!blueprintDocumentsEqual(a.blueprintDocument, b.blueprintDocument)) return false;
-  return JSON.stringify(a.panelState) === JSON.stringify(b.panelState);
+  return true;
 }
 
 export function cloneWorkspaceSnapshot(snapshot: WorkspaceSnapshot): WorkspaceSnapshot {
-  return JSON.parse(JSON.stringify(snapshot)) as WorkspaceSnapshot;
+  return {
+    blueprintDocument: cloneBlueprintDocument(snapshot.blueprintDocument),
+    blueprintMeta: {
+      name: snapshot.blueprintMeta.name,
+      remark: snapshot.blueprintMeta.remark ?? "",
+    },
+    productName: snapshot.productName,
+    titleIconDataUrl: snapshot.titleIconDataUrl,
+  };
 }

package/src/panel/scope/view-scope-store.ts

@@ -20,6 +20,14 @@ export function clearViewElementScopes() {
   emit();
 }
 
+export function removeViewElementScopes(elementIds: readonly string[]) {
+  let changed = false;
+  for (const id of elementIds) {
+    if (scopes.delete(id)) changed = true;
+  }
+  if (changed) emit();
+}
+
 export function setViewElementScope(elementId: string, scope: unknown) {
   scopes.set(elementId, scope);
   emit();

package/src/panel/types.ts

@@ -54,8 +54,8 @@ export type PanelElementStyle = {
 
 export type ReferenceCopyMode = "shallow" | "deep";
 
-export type { PanelTableConfig } from "@arronqzy/view-table";
 import type { PanelTableConfig } from "@arronqzy/view-table";
+import type { Scene3dConfig } from "@arronqzy/view-scene3d";
 
 export type PanelElement = {
   id: string;
@@ -75,8 +75,8 @@ export type PanelElement = {
   textFontSize?: number;
   textFontWeight?: string;
   textColor?: string;
-  textLineHeight?: number;
-  textAlign?: "left" | "center" | "right" | "justify";
+  textLineHeight?: number | "auto";
+  textAlign?: "left" | "center" | "right" | "justify" | "middle";
   gridRows?: number;
   gridCols?: number;
   gridGap?: number;
@@ -101,6 +101,7 @@ export type PanelElement = {
   geometryColor?: string;
   geometryScript?: string;
   geometrySketchDataUrl?: string;
+  scene3d?: Scene3dConfig;
   style?: PanelElementStyle;
   x: number;
   y: number;

package/src/panel/utils/async-work.ts

@@ -0,0 +1,178 @@
+import { useSyncExternalStore } from "react";
+import { resolveLocale, tForLocale } from "@arronqzy/i18n";
+
+export type MediaFileKind = "image" | "audio" | "video" | "json" | "model3d";
+
+export const FILE_SIZE_LIMITS: Record<MediaFileKind, number> = {
+  image: 8 * 1024 * 1024,
+  audio: 20 * 1024 * 1024,
+  video: 40 * 1024 * 1024,
+  json: 24 * 1024 * 1024,
+  model3d: 48 * 1024 * 1024,
+};
+
+const JSON_WORKER_THRESHOLD = 128 * 1024;
+
+let busyMessage: string | null = null;
+let busyDepth = 0;
+const busyListeners = new Set<() => void>();
+
+function emitBusy() {
+  busyListeners.forEach((listener) => listener());
+}
+
+function setBusyMessage(message: string | null) {
+  busyMessage = message;
+  emitBusy();
+}
+
+export function getBusyOverlayMessage() {
+  return busyMessage;
+}
+
+export function subscribeBusyOverlay(listener: () => void) {
+  busyListeners.add(listener);
+  return () => busyListeners.delete(listener);
+}
+
+export function useBusyOverlayMessage() {
+  return useSyncExternalStore(
+    subscribeBusyOverlay,
+    getBusyOverlayMessage,
+    () => null
+  );
+}
+
+export function yieldToPaint(): Promise<void> {
+  return new Promise((resolve) => {
+    if (typeof requestAnimationFrame === "undefined") {
+      setTimeout(resolve, 0);
+      return;
+    }
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+export async function runBusyTask<T>(
+  message: string,
+  task: () => Promise<T> | T
+): Promise<T> {
+  const previous = busyMessage;
+  busyDepth += 1;
+  setBusyMessage(message);
+  await yieldToPaint();
+  try {
+    return await task();
+  } finally {
+    busyDepth = Math.max(0, busyDepth - 1);
+    setBusyMessage(busyDepth === 0 ? null : previous);
+  }
+}
+
+function formatFileSize(bytes: number) {
+  if (bytes >= 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))} MB`;
+  return `${Math.round(bytes / 1024)} KB`;
+}
+
+export function assertFileSize(file: Blob, kind: MediaFileKind) {
+  const limit = FILE_SIZE_LIMITS[kind];
+  if (file.size <= limit) return;
+  const t = tForLocale(resolveLocale());
+  throw new Error(
+    t("common.fileTooLarge", { max: formatFileSize(limit) })
+  );
+}
+
+export function readFileAsDataUrl(
+  file: Blob,
+  errorMessage: string,
+  kind: MediaFileKind = "image"
+): Promise<string> {
+  assertFileSize(file, kind);
+  const t = tForLocale(resolveLocale());
+  return runBusyTask(t("common.uploadingFile"), () => {
+    return new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result ?? ""));
+      reader.onerror = () => reject(new Error(errorMessage));
+      reader.readAsDataURL(file);
+    });
+  });
+}
+
+let jsonWorker: Worker | null = null;
+let jsonWorkerObjectUrl: string | null = null;
+let jsonRequestId = 0;
+const jsonPending = new Map<
+  number,
+  { resolve: (value: unknown) => void; reject: (error: Error) => void }
+>();
+
+function ensureJsonWorker(): Worker | null {
+  if (typeof Worker === "undefined") return null;
+  if (jsonWorker) return jsonWorker;
+  const source = `
+    self.onmessage = (event) => {
+      const { id, text } = event.data || {};
+      try {
+        self.postMessage({ id, ok: true, value: JSON.parse(text) });
+      } catch (error) {
+        self.postMessage({
+          id,
+          ok: false,
+          error: error instanceof Error ? error.message : String(error),
+        });
+      }
+    };
+  `;
+  jsonWorkerObjectUrl = URL.createObjectURL(
+    new Blob([source], { type: "text/javascript" })
+  );
+  jsonWorker = new Worker(jsonWorkerObjectUrl);
+  jsonWorker.onmessage = (event: MessageEvent) => {
+    const { id, ok, value, error } = event.data ?? {};
+    const pending = jsonPending.get(id);
+    if (!pending) return;
+    jsonPending.delete(id);
+    if (ok) pending.resolve(value);
+    else pending.reject(new Error(String(error ?? "json-parse-failed")));
+  };
+  jsonWorker.onerror = () => {
+    jsonPending.forEach(({ reject }) => reject(new Error("json-worker-failed")));
+    jsonPending.clear();
+    disposeJsonWorker();
+  };
+  if (typeof window !== "undefined") {
+    window.addEventListener("pagehide", disposeJsonWorker, { once: true });
+  }
+  return jsonWorker;
+}
+
+function disposeJsonWorker() {
+  jsonPending.forEach(({ reject }) => reject(new Error("json-worker-disposed")));
+  jsonPending.clear();
+  jsonWorker?.terminate();
+  jsonWorker = null;
+  if (jsonWorkerObjectUrl) {
+    URL.revokeObjectURL(jsonWorkerObjectUrl);
+    jsonWorkerObjectUrl = null;
+  }
+}
+
+export async function parseJsonText<T>(text: string): Promise<T> {
+  if (text.length < JSON_WORKER_THRESHOLD) {
+    return JSON.parse(text) as T;
+  }
+  const worker = ensureJsonWorker();
+  if (!worker) return JSON.parse(text) as T;
+  const id = ++jsonRequestId;
+  return new Promise<T>((resolve, reject) => {
+    jsonPending.set(id, {
+      resolve: (value) => resolve(value as T),
+      reject,
+    });
+    worker.postMessage({ id, text });
+  });
+}

package/src/panel/utils/gridPlacement.ts

@@ -187,3 +187,32 @@ export function computeSnapPatchForNewElementOnLayer(
     height: nearest.height,
   };
 }
+
+function isGridAncestorOf(
+  ancestorId: string,
+  el: PanelElement,
+  byId: Map<string, PanelElement>
+): boolean {
+  let current: PanelElement | undefined = el;
+  const seen = new Set<string>();
+  while (current?.parentGridId && !seen.has(current.id)) {
+    if (current.parentGridId === ancestorId) return true;
+    seen.add(current.id);
+    current = byId.get(current.parentGridId);
+  }
+  return false;
+}
+
+/** 父网格先于格子内子节点绘制，避免网格占位层盖住内容 */
+export function comparePanelElementsPaintOrder(
+  a: PanelElement,
+  b: PanelElement,
+  byId: Map<string, PanelElement>
+): number {
+  if (isGridAncestorOf(a.id, b, byId)) return -1;
+  if (isGridAncestorOf(b.id, a, byId)) return 1;
+  const za = a.zIndex ?? 1;
+  const zb = b.zIndex ?? 1;
+  if (za !== zb) return za - zb;
+  return a.id.localeCompare(b.id);
+}