@arronqzy/vue-view 0.1.6 → 0.1.7

package/src/panel/hooks/usePanelElements.ts

@@ -10,12 +10,14 @@ import type {
   ReferenceCopyMode,
 } from "../types";
 import { getPanelMessages } from "../constants/messages";
+import { removeViewElementScopes } from "../scope/view-scope-store";
 import {
   DEFAULT_LAYER,
   DEFAULT_LAYER_ID,
   getDefaultChartConfig,
   getDefaultGridConfig,
   getDefaultNodeName,
+  getDefaultScene3dConfigForMaterial,
   getDefaultSizeByMaterial,
   getDefaultTableConfig,
   getDefaultTextContent,
@@ -385,6 +387,7 @@ export function usePanelElements() {
     });
     const idSet = new Set(unlockedIds);
     if (idSet.size === 0) return;
+    const familyIds = new Set<string>();
     store.update(
       (draft) => {
         const deletedSourceIds = new Set<string>();
@@ -394,7 +397,7 @@ export function usePanelElements() {
           const props = n.props as PanelElement;
           deletedSourceIds.add(props.mappingSourceNodeId ?? props.id);
         });
-        const familyIds = new Set<string>();
+        familyIds.clear();
         (draft.root.children ?? []).forEach((n) => {
           if (!isPanelElementNode(n) || !n.props) return;
           const props = n.props as PanelElement;
@@ -407,6 +410,7 @@ export function usePanelElements() {
       },
       { meta: { type: "node.batch-delete", ids: Array.from(idSet) } }
     );
+    removeViewElementScopes([...familyIds]);
   }
 
   function bringElementsToFront(ids: string[]) {
@@ -613,6 +617,7 @@ export function usePanelElements() {
       geometryShape: materialType === "geometry" ? "rect" : undefined,
       geometryColor: materialType === "geometry" ? "#3b82f6" : undefined,
       geometryScript: undefined,
+      ...getDefaultScene3dConfigForMaterial(materialType),
       x: Math.round(x - size.width / 2),
       y: Math.round(y - size.height / 2),
       width: size.width,
@@ -1029,6 +1034,13 @@ export function usePanelElements() {
 
   function exportPanelData() {
     const current = store.getState();
+    if (typeof structuredClone === "function") {
+      try {
+        return structuredClone(current) as State;
+      } catch {
+        /* fall through */
+      }
+    }
     return JSON.parse(JSON.stringify(current)) as State;
   }
 

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref, shallowRef, toValue, type MaybeRefOrGetter } from "vue";
+import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch, type MaybeRefOrGetter } from "vue";
 import {
   BlueprintGraph,
   type BlueprintDocument,
@@ -22,6 +22,7 @@ import {
   workspaceSnapshotsEqual,
   type WorkspaceSnapshot,
 } from "../library/workspace-snapshot";
+import { runBusyTask } from "../utils/async-work";
 
 export type UseWorkspaceProjectsOptions = {
   exportPanelData: () => State;
@@ -59,6 +60,20 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
   const activeProjectId = ref<string | null>(null);
   const activeProjectName = ref<string | null>(null);
   const syncedSnapshotRef = shallowRef<WorkspaceSnapshot | null>(null);
+  let syncedPanelRevision: unknown = null;
+  let pendingRevisionSync = false;
+  const previewWindows = new Map<string, Window>();
+  const previewingProjectIds = ref<string[]>([]);
+  let previewPollTimer: number | undefined;
+
+  function refreshPreviewing() {
+    const ids: string[] = [];
+    for (const [id, win] of previewWindows) {
+      if (!win.closed) ids.push(id);
+      else previewWindows.delete(id);
+    }
+    previewingProjectIds.value = ids;
+  }
 
   function resolveProjectName() {
     void locale.value;
@@ -67,7 +82,6 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
 
   function buildCurrentSnapshot(): WorkspaceSnapshot {
     return {
-      panelState: options.exportPanelData(),
       blueprintDocument: toValue(options.blueprintDocument),
       blueprintMeta: { ...toValue(options.blueprintMeta) },
       productName: toValue(options.productName),
@@ -81,15 +95,30 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
 
   onMounted(() => {
     void refreshProjects();
+    previewPollTimer = window.setInterval(refreshPreviewing, 2000);
   });
 
+  onUnmounted(() => {
+    if (previewPollTimer !== undefined) window.clearInterval(previewPollTimer);
+  });
+
+  watch(
+    () => toValue(options.panelRevision),
+    (revision) => {
+      if (!pendingRevisionSync) return;
+      syncedPanelRevision = revision;
+      pendingRevisionSync = false;
+    }
+  );
+
   const dirty = computed(() => {
     if (!activeProjectId.value || !syncedSnapshotRef.value) return false;
-    void toValue(options.panelRevision);
+    if (pendingRevisionSync) return false;
     void toValue(options.blueprintDocument);
     void toValue(options.blueprintMeta);
     void toValue(options.productName);
     void toValue(options.titleIconDataUrl);
+    if (toValue(options.panelRevision) !== syncedPanelRevision) return true;
     return !workspaceSnapshotsEqual(buildCurrentSnapshot(), syncedSnapshotRef.value);
   });
 
@@ -109,12 +138,13 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     activeProjectId.value = record.id;
     activeProjectName.value = record.name;
     syncedSnapshotRef.value = cloneWorkspaceSnapshot({
-      panelState: record.panelState,
       blueprintDocument,
       blueprintMeta,
       productName: record.productName,
       titleIconDataUrl: record.titleIconDataUrl ?? "",
     });
+    syncedPanelRevision = toValue(options.panelRevision);
+    pendingRevisionSync = true;
     options.onProjectApplied?.({
       ...record,
       blueprintDocument,
@@ -127,7 +157,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     name: string;
     createdAt?: number;
   }) {
-    const snapshot = buildCurrentSnapshot();
+    const snapshot = cloneWorkspaceSnapshot(buildCurrentSnapshot());
     const now = Date.now();
     const id = persistOptions.id ?? createWorkspaceProjectId();
     const createdAt = persistOptions.createdAt ?? now;
@@ -138,7 +168,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
       name,
       createdAt,
       updatedAt: now,
-      panelState: snapshot.panelState,
+      panelState: options.exportPanelData(),
       blueprintDocument: snapshot.blueprintDocument,
       blueprintMeta: snapshot.blueprintMeta,
       productName: snapshot.productName,
@@ -150,81 +180,121 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     broadcastWorkspaceProjectUpdate(id, now);
     activeProjectId.value = id;
     activeProjectName.value = name;
-    syncedSnapshotRef.value = cloneWorkspaceSnapshot(snapshot);
+    syncedSnapshotRef.value = snapshot;
+    syncedPanelRevision = toValue(options.panelRevision);
+    pendingRevisionSync = false;
     await refreshProjects();
     return record;
   }
 
   async function handleCreateProject() {
-    const name = resolveProjectName();
-    const record = await persistProject({ name });
-    return { name, id: record.id };
+    return runBusyTask(t("common.savingWorkspace"), async () => {
+      const name = resolveProjectName();
+      const record = await persistProject({ name });
+      return { name, id: record.id };
+    });
   }
 
   async function handleSaveProject() {
-    if (!activeProjectId.value) {
+    const projectId = activeProjectId.value;
+    if (!projectId) {
       return handleCreateProject();
     }
-    const existing = await getWorkspaceProject(activeProjectId.value);
-    const name = resolveProjectName();
-    const record = await persistProject({
-      id: activeProjectId.value,
-      name,
-      createdAt: existing?.createdAt,
+    return runBusyTask(t("common.savingWorkspace"), async () => {
+      const existing = await getWorkspaceProject(projectId);
+      const name = resolveProjectName();
+      const record = await persistProject({
+        id: projectId,
+        name,
+        createdAt: existing?.createdAt,
+      });
+      return { name, id: record.id };
     });
-    return { name, id: record.id };
   }
 
   async function handleOpenProject(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);
+    });
   }
 
   async function handleSyncProject() {
-    if (!activeProjectId.value) {
-      throw new Error(t("panel.messages.saveWorkspaceFirst"));
-    }
-    const existing = await getWorkspaceProject(activeProjectId.value);
-    if (!existing) {
-      activeProjectId.value = null;
-      activeProjectName.value = null;
-      syncedSnapshotRef.value = null;
-      await refreshProjects();
-      throw new Error(t("panel.messages.workspaceNotFound"));
-    }
-    const name = resolveProjectName() || existing.name;
-    await persistProject({
-      id: activeProjectId.value,
-      name,
-      createdAt: existing.createdAt,
+    return runBusyTask(t("common.syncingWorkspace"), async () => {
+      if (!activeProjectId.value) {
+        throw new Error(t("panel.messages.saveWorkspaceFirst"));
+      }
+      const existing = await getWorkspaceProject(activeProjectId.value);
+      if (!existing) {
+        activeProjectId.value = null;
+        activeProjectName.value = null;
+        syncedSnapshotRef.value = null;
+        await refreshProjects();
+        throw new Error(t("panel.messages.workspaceNotFound"));
+      }
+      const name = resolveProjectName() || existing.name;
+      await persistProject({
+        id: activeProjectId.value,
+        name,
+        createdAt: existing.createdAt,
+      });
+      return name;
     });
-    return name;
   }
 
   async function handleDeleteProject(id: string) {
-    await deleteWorkspaceProject(id);
-    if (activeProjectId.value === id) {
-      activeProjectId.value = null;
-      activeProjectName.value = null;
-      syncedSnapshotRef.value = null;
-    }
-    await refreshProjects();
+    await runBusyTask(t("common.deletingWorkspace"), async () => {
+      await deleteWorkspaceProject(id);
+      if (activeProjectId.value === id) {
+        activeProjectId.value = null;
+        activeProjectName.value = null;
+        syncedSnapshotRef.value = null;
+      }
+      previewWindows.delete(id);
+      refreshPreviewing();
+      await refreshProjects();
+    });
   }
 
   async function handlePreviewProject(id: string, previewOptions?: { syncFirst?: boolean }) {
-    if (previewOptions?.syncFirst && activeProjectId.value === id && dirty.value) {
-      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 (previewOptions?.syncFirst && activeProjectId.value === id && dirty.value) {
+        await handleSyncProject();
+      }
+      const record =
+        (await getWorkspaceProject(id)) ?? readWorkspacePreviewCache(id);
+      if (record) {
+        writeWorkspacePreviewCache(record);
+      }
+      const existing = previewWindows.get(id);
+      if (existing && !existing.closed) {
+        try {
+          existing.focus();
+        } catch {
+          /* ignore */
+        }
+        refreshPreviewing();
+        return;
+      }
+      const win = window.open(
+        buildOnlinePreviewUrl(id),
+        `abuilder-preview-${id}`
+      );
+      if (win) {
+        previewWindows.set(id, win);
+        try {
+          win.opener = null;
+          win.focus();
+        } catch {
+          /* ignore */
+        }
+      }
+      refreshPreviewing();
+    });
   }
 
   return {
@@ -232,6 +302,7 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     activeProjectId,
     activeProjectName,
     dirty,
+    previewingProjectIds,
     handleCreateProject,
     handleSaveProject,
     handleOpenProject,

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

@@ -4,7 +4,10 @@ const CACHE_PREFIX = "arronqzy-workspace-preview:";
 
 export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void {
   try {
-    localStorage.setItem(CACHE_PREFIX + record.id, JSON.stringify(record));
+    localStorage.setItem(
+      CACHE_PREFIX + record.id,
+      JSON.stringify({ id: record.id, updatedAt: record.updatedAt })
+    );
   } catch {
     // ignore quota / private mode
   }
@@ -16,7 +19,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

@@ -77,17 +77,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

@@ -3,16 +3,25 @@ import {
   type BlueprintDocument,
   type BlueprintMetaDraft,
 } from "@arronqzy/vue-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
@@ -22,9 +31,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

@@ -28,6 +28,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

@@ -56,6 +56,7 @@ 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 +76,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 +102,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,153 @@
+import { shallowRef } from "vue";
+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;
+
+export const busyOverlayMessage = shallowRef<string | null>(null);
+let busyDepth = 0;
+
+function setBusyMessage(message: string | null) {
+  busyOverlayMessage.value = message;
+}
+
+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 = busyOverlayMessage.value;
+  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 });
+  });
+}