@arronqzy/react-view 0.0.1

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -0,0 +1,278 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BlueprintGraph } from "@arronqzy/react-blueprint";
+import type { BlueprintDocument, BlueprintMetaDraft } from "@arronqzy/react-blueprint";
+import type { State } from "../../../../rx-store/src/types";
+import {
+  createWorkspaceProjectId,
+  deleteWorkspaceProject,
+  getWorkspaceProject,
+  listWorkspaceProjects,
+  putWorkspaceProject,
+  type WorkspaceProjectListItem,
+  type WorkspaceProjectRecord,
+} from "../library/workspace-project-db";
+import { broadcastWorkspaceProjectUpdate } from "../library/workspace-project-sync";
+import { writeWorkspacePreviewCache, readWorkspacePreviewCache } from "../library/workspace-project-cache";
+import {
+  cloneWorkspaceSnapshot,
+  workspaceSnapshotsEqual,
+  type WorkspaceSnapshot,
+} from "../library/workspace-snapshot";
+
+export type UseWorkspaceProjectsOptions = {
+  exportPanelData: () => State;
+  importPanelData: (state: State) => boolean;
+  blueprintDocument: BlueprintDocument;
+  blueprintMeta: BlueprintMetaDraft;
+  setBlueprintGraph: (graph: ReturnType<typeof BlueprintGraph.fromDocument>) => void;
+  setBlueprintMeta: (meta: BlueprintMetaDraft) => void;
+  productName: string;
+  setProductName: (name: string) => void;
+  titleIconDataUrl: string;
+  setTitleIconDataUrl: (url: string) => void;
+  /** 视图面板修订号，用于检测未同步修改 */
+  panelRevision: unknown;
+  /** 工作区记录应用到编辑器后的回调（用于恢复蓝图面板等 UI 状态） */
+  onProjectApplied?: (record: WorkspaceProjectRecord) => void;
+};
+
+export function buildOnlinePreviewUrl(projectId: string): string {
+  const url = new URL(window.location.href);
+  url.search = "";
+  url.searchParams.set("preview", "online");
+  url.searchParams.set("projectId", projectId);
+  const previewInstanceId =
+    typeof crypto !== "undefined" && "randomUUID" in crypto
+      ? crypto.randomUUID()
+      : `pv-${Date.now()}`;
+  url.searchParams.set("pid", previewInstanceId);
+  return url.toString();
+}
+
+export function useWorkspaceProjects({
+  exportPanelData,
+  importPanelData,
+  blueprintDocument,
+  blueprintMeta,
+  setBlueprintGraph,
+  setBlueprintMeta,
+  productName,
+  setProductName,
+  titleIconDataUrl,
+  setTitleIconDataUrl,
+  panelRevision,
+  onProjectApplied,
+}: UseWorkspaceProjectsOptions) {
+  const [projects, setProjects] = useState<WorkspaceProjectListItem[]>([]);
+  const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
+  const [activeProjectName, setActiveProjectName] = useState<string | null>(null);
+  const syncedSnapshotRef = useRef<WorkspaceSnapshot | null>(null);
+
+  const resolveProjectName = useCallback(() => {
+    return productName.trim() || "未命名产物";
+  }, [productName]);
+
+  const buildCurrentSnapshot = useCallback((): WorkspaceSnapshot => {
+    return {
+      panelState: exportPanelData(),
+      blueprintDocument,
+      blueprintMeta: { ...blueprintMeta },
+      productName,
+      titleIconDataUrl,
+    };
+  }, [
+    blueprintDocument,
+    blueprintMeta,
+    exportPanelData,
+    productName,
+    titleIconDataUrl,
+  ]);
+
+  const refreshProjects = useCallback(async () => {
+    const items = await listWorkspaceProjects();
+    setProjects(items);
+  }, []);
+
+  useEffect(() => {
+    void refreshProjects();
+  }, [refreshProjects]);
+
+  const dirty = useMemo(() => {
+    if (!activeProjectId || !syncedSnapshotRef.current) return false;
+    return !workspaceSnapshotsEqual(buildCurrentSnapshot(), syncedSnapshotRef.current);
+  }, [
+    activeProjectId,
+    blueprintDocument,
+    blueprintMeta,
+    productName,
+    titleIconDataUrl,
+    panelRevision,
+    buildCurrentSnapshot,
+  ]);
+
+  const applyProjectRecord = useCallback(
+    (record: WorkspaceProjectRecord) => {
+      const blueprintDocument =
+        record.blueprintDocument ?? BlueprintGraph.empty().document;
+      const blueprintMeta: BlueprintMetaDraft = {
+        name: record.blueprintMeta?.name ?? "未命名蓝图",
+        remark: record.blueprintMeta?.remark ?? "",
+      };
+
+      importPanelData(record.panelState);
+      setBlueprintGraph(BlueprintGraph.fromDocument(blueprintDocument));
+      setBlueprintMeta(blueprintMeta);
+      setProductName(record.productName);
+      setTitleIconDataUrl(record.titleIconDataUrl ?? "");
+      setActiveProjectId(record.id);
+      setActiveProjectName(record.name);
+      syncedSnapshotRef.current = cloneWorkspaceSnapshot({
+        panelState: record.panelState,
+        blueprintDocument,
+        blueprintMeta,
+        productName: record.productName,
+        titleIconDataUrl: record.titleIconDataUrl ?? "",
+      });
+      onProjectApplied?.({
+        ...record,
+        blueprintDocument,
+        blueprintMeta,
+      });
+    },
+    [
+      importPanelData,
+      onProjectApplied,
+      setBlueprintGraph,
+      setBlueprintMeta,
+      setProductName,
+      setTitleIconDataUrl,
+    ]
+  );
+
+  const persistProject = useCallback(
+    async (options: { id?: string; name: string; createdAt?: number }) => {
+      const snapshot = buildCurrentSnapshot();
+      const now = Date.now();
+      const id = options.id ?? createWorkspaceProjectId();
+      const createdAt = options.createdAt ?? now;
+      const name = options.name.trim() || resolveProjectName();
+
+      const record: WorkspaceProjectRecord = {
+        id,
+        name,
+        createdAt,
+        updatedAt: now,
+        panelState: snapshot.panelState,
+        blueprintDocument: snapshot.blueprintDocument,
+        blueprintMeta: snapshot.blueprintMeta,
+        productName: snapshot.productName,
+        titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
+      };
+
+      await putWorkspaceProject(record);
+      writeWorkspacePreviewCache(record);
+      broadcastWorkspaceProjectUpdate(id, now);
+      setActiveProjectId(id);
+      setActiveProjectName(name);
+      syncedSnapshotRef.current = cloneWorkspaceSnapshot(snapshot);
+      await refreshProjects();
+      return record;
+    },
+    [buildCurrentSnapshot, resolveProjectName, refreshProjects]
+  );
+
+  const handleCreateProject = useCallback(async () => {
+    const name = resolveProjectName();
+    const record = await persistProject({ name });
+    return { name, id: record.id };
+  }, [persistProject, resolveProjectName]);
+
+  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 { name, id: record.id };
+  }, [activeProjectId, handleCreateProject, persistProject, resolveProjectName]);
+
+  const handleOpenProject = useCallback(
+    async (id: string) => {
+      const record = await getWorkspaceProject(id);
+      if (!record) {
+        await refreshProjects();
+        throw new Error("工作区不存在或已被删除");
+      }
+      applyProjectRecord(record);
+    },
+    [applyProjectRecord, refreshProjects]
+  );
+
+  const handleSyncProject = useCallback(async () => {
+    if (!activeProjectId) {
+      throw new Error("请先保存工作区");
+    }
+    const existing = await getWorkspaceProject(activeProjectId);
+    if (!existing) {
+      setActiveProjectId(null);
+      setActiveProjectName(null);
+      syncedSnapshotRef.current = null;
+      await refreshProjects();
+      throw new Error("工作区不存在或已被删除");
+    }
+    const name = resolveProjectName() || existing.name;
+    await persistProject({
+      id: activeProjectId,
+      name,
+      createdAt: existing.createdAt,
+    });
+    return name;
+  }, [activeProjectId, persistProject, refreshProjects, resolveProjectName]);
+
+  const handleDeleteProject = useCallback(
+    async (id: string) => {
+      await deleteWorkspaceProject(id);
+      if (activeProjectId === id) {
+        setActiveProjectId(null);
+        setActiveProjectName(null);
+        syncedSnapshotRef.current = null;
+      }
+      await refreshProjects();
+    },
+    [activeProjectId, refreshProjects]
+  );
+
+  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");
+    },
+    [activeProjectId, dirty, handleSyncProject]
+  );
+
+  return {
+    projects,
+    activeProjectId,
+    activeProjectName,
+    dirty,
+    handleCreateProject,
+    handleSaveProject,
+    handleOpenProject,
+    handleSyncProject,
+    handleDeleteProject,
+    handlePreviewProject,
+    refreshProjects,
+  };
+}

package/src/panel/index.tsx

@@ -0,0 +1,3 @@
+export * from "./ReactViewPanel";
+export * from "./ReactViewOnlinePreview";
+export type * from "./types";

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

@@ -0,0 +1,23 @@
+import type { WorkspaceProjectRecord } from "./workspace-project-db";
+
+const CACHE_PREFIX = "arronqzy-workspace-preview:";
+
+export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void {
+  try {
+    localStorage.setItem(CACHE_PREFIX + record.id, JSON.stringify(record));
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+export function readWorkspacePreviewCache(
+  projectId: string
+): WorkspaceProjectRecord | null {
+  try {
+    const raw = localStorage.getItem(CACHE_PREFIX + projectId);
+    if (!raw) return null;
+    return JSON.parse(raw) as WorkspaceProjectRecord;
+  } catch {
+    return null;
+  }
+}

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

@@ -0,0 +1,112 @@
+import type { BlueprintDocument } from "@arronqzy/react-blueprint";
+import type { BlueprintMetaDraft } from "@arronqzy/react-blueprint";
+import type { State } from "../../../../rx-store/src/types";
+
+const DB_NAME = "arronqzy-workspace-projects";
+const DB_VERSION = 1;
+const STORE_NAME = "projects";
+
+export type WorkspaceProjectListItem = {
+  id: string;
+  name: string;
+  updatedAt: number;
+  createdAt: number;
+};
+
+export type WorkspaceProjectRecord = {
+  id: string;
+  name: string;
+  createdAt: number;
+  updatedAt: number;
+  panelState: State;
+  blueprintDocument: BlueprintDocument;
+  blueprintMeta: BlueprintMetaDraft;
+  productName: string;
+  titleIconDataUrl?: string;
+};
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+        store.createIndex("updatedAt", "updatedAt", { unique: false });
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+function runTransaction<T>(
+  mode: IDBTransactionMode,
+  runner: (store: IDBObjectStore) => IDBRequest<T>
+): Promise<T> {
+  return openDb().then(
+    (db) =>
+      new Promise<T>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, mode);
+        const store = tx.objectStore(STORE_NAME);
+        const request = runner(store);
+        let result!: T;
+
+        request.onerror = () =>
+          reject(request.error ?? new Error("indexeddb-request-failed"));
+        request.onsuccess = () => {
+          result = request.result as T;
+        };
+
+        tx.oncomplete = () => {
+          db.close();
+          resolve(result);
+        };
+        tx.onerror = () => {
+          db.close();
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        };
+      })
+  );
+}
+
+export function createWorkspaceProjectId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `ws-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+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);
+}
+
+export async function getWorkspaceProject(
+  id: string
+): Promise<WorkspaceProjectRecord | null> {
+  const record = await runTransaction<WorkspaceProjectRecord | undefined>("readonly", (store) =>
+    store.get(id)
+  );
+  return record ?? null;
+}
+
+export async function putWorkspaceProject(
+  record: WorkspaceProjectRecord
+): Promise<WorkspaceProjectRecord> {
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  return record;
+}
+
+export async function deleteWorkspaceProject(id: string): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(id));
+}

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

@@ -0,0 +1,41 @@
+const CHANNEL_PREFIX = "arronqzy-workspace-project";
+
+export type WorkspaceProjectSyncMessage = {
+  type: "updated";
+  projectId: string;
+  updatedAt: number;
+};
+
+export function getWorkspaceProjectChannelName(projectId: string): string {
+  return `${CHANNEL_PREFIX}:${projectId}`;
+}
+
+export function broadcastWorkspaceProjectUpdate(
+  projectId: string,
+  updatedAt: number
+): void {
+  if (typeof BroadcastChannel === "undefined") return;
+  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  channel.postMessage({
+    type: "updated",
+    projectId,
+    updatedAt,
+  } satisfies WorkspaceProjectSyncMessage);
+  channel.close();
+}
+
+export function subscribeWorkspaceProjectUpdates(
+  projectId: string,
+  onUpdate: (message: WorkspaceProjectSyncMessage) => void
+): () => void {
+  if (typeof BroadcastChannel === "undefined") {
+    return () => {};
+  }
+  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  channel.onmessage = (event: MessageEvent<WorkspaceProjectSyncMessage>) => {
+    const data = event.data;
+    if (!data || data.type !== "updated" || data.projectId !== projectId) return;
+    onUpdate(data);
+  };
+  return () => channel.close();
+}

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

@@ -0,0 +1,27 @@
+import { blueprintDocumentsEqual } from "@arronqzy/react-blueprint";
+import type { BlueprintDocument, BlueprintMetaDraft } from "@arronqzy/react-blueprint";
+import type { State } from "../../../../rx-store/src/types";
+
+export type WorkspaceSnapshot = {
+  panelState: State;
+  blueprintDocument: BlueprintDocument;
+  blueprintMeta: BlueprintMetaDraft;
+  productName: string;
+  titleIconDataUrl: string;
+};
+
+export function workspaceSnapshotsEqual(
+  a: WorkspaceSnapshot,
+  b: WorkspaceSnapshot
+): boolean {
+  if (a.productName !== b.productName) return false;
+  if (a.titleIconDataUrl !== b.titleIconDataUrl) return false;
+  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);
+}
+
+export function cloneWorkspaceSnapshot(snapshot: WorkspaceSnapshot): WorkspaceSnapshot {
+  return JSON.parse(JSON.stringify(snapshot)) as WorkspaceSnapshot;
+}

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

@@ -0,0 +1,55 @@
+import { useSyncExternalStore } from "react";
+
+const scopes = new Map<string, unknown>();
+let version = 0;
+const listeners = new Set<() => void>();
+
+function emit() {
+  version += 1;
+  listeners.forEach((listener) => listener());
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function clearViewElementScopes() {
+  if (scopes.size === 0) return;
+  scopes.clear();
+  emit();
+}
+
+export function setViewElementScope(elementId: string, scope: unknown) {
+  scopes.set(elementId, scope);
+  emit();
+}
+
+export function setViewElementScopes(
+  elementIds: string[],
+  scope: unknown
+) {
+  if (elementIds.length === 0) return;
+  elementIds.forEach((id) => scopes.set(id, scope));
+  emit();
+}
+
+export function getViewElementScope(elementId: string): unknown | undefined {
+  return scopes.get(elementId);
+}
+
+export function hasViewElementScope(elementId: string): boolean {
+  return scopes.has(elementId);
+}
+
+export function useViewElementScope(elementId: string | null | undefined) {
+  return useSyncExternalStore(
+    subscribe,
+    () => (elementId ? scopes.get(elementId) : undefined),
+    () => undefined
+  );
+}
+
+export function useViewScopeStoreVersion() {
+  return useSyncExternalStore(subscribe, () => version, () => 0);
+}

package/src/panel/types.ts

@@ -0,0 +1,125 @@
+export type PanelChartConfig = {
+  title?: string;
+  color?: string;
+  colorMode?: "solid" | "gradient";
+  gradientFrom?: string;
+  gradientTo?: string;
+  gradientDirection?: "to-right" | "to-bottom" | "to-bottom-right" | "to-top-right";
+  renderMode?: "canvas" | "svg";
+  xAxisName?: string;
+  yAxisName?: string;
+  xAxisTickShow?: boolean;
+  yAxisTickShow?: boolean;
+  xAxisTickColor?: string;
+  yAxisTickColor?: string;
+  xAxisSplitLineShow?: boolean;
+  yAxisSplitLineShow?: boolean;
+  xAxisSplitLineColor?: string;
+  yAxisSplitLineColor?: string;
+  xAxisLabelColor?: string;
+  yAxisLabelColor?: string;
+  xAxisLabelFontSize?: number;
+  yAxisLabelFontSize?: number;
+  xAxisLabelAutoEllipsis?: boolean;
+  yAxisLabelAutoEllipsis?: boolean;
+  tooltipShow?: boolean;
+  tooltipTrigger?: "axis" | "item";
+  tooltipBackgroundColor?: string;
+  tooltipTextColor?: string;
+  tooltipFormatter?: string;
+  labels?: string[];
+  values?: number[];
+  /** 逗号分隔的原始数值文本，支持 scope 模版；存在时优先于 values */
+  valuesText?: string;
+  smooth?: boolean;
+  barWidth?: number;
+  pieInnerRadius?: number;
+  pieOuterRadius?: number;
+  option?: Record<string, unknown>;
+};
+
+export type PanelElementStyle = {
+  backgroundColor?: string;
+  backgroundImage?: string;
+  backgroundImageRemoteUrl?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  borderWidth?: number;
+  borderStyle?: "none" | "solid" | "dashed" | "dotted" | "double";
+  borderColor?: string;
+  borderRadius?: number;
+};
+
+export type ReferenceCopyMode = "shallow" | "deep";
+
+export type PanelElement = {
+  id: string;
+  layerId: string;
+  zIndex?: number;
+  name?: string;
+  locked?: boolean;
+  materialType?: string;
+  refLayerId?: string;
+  refCopyMode?: ReferenceCopyMode;
+  refSnapshot?: PanelElement[];
+  chart?: PanelChartConfig;
+  textHtml?: string;
+  textAllowInput?: boolean;
+  textFontFamily?: string;
+  textFontSize?: number;
+  textFontWeight?: string;
+  textColor?: string;
+  textLineHeight?: number;
+  textAlign?: "left" | "center" | "right" | "justify";
+  gridRows?: number;
+  gridCols?: number;
+  gridGap?: number;
+  gridPadding?: number;
+  gridSnapThreshold?: number;
+  parentGridId?: string;
+  gridSlotIndex?: number;
+  gridColSpan?: number;
+  gridRowSpan?: number;
+  mappingSourceNodeId?: string;
+  mappingSourceLayerId?: string;
+  audioSrc?: string;
+  audioRemoteUrl?: string;
+  audioPosterImage?: string;
+  audioIconPreset?: "speaker" | "music" | "headphone" | "wave";
+  audioVisualEffect?: "none" | "pulse" | "ripple";
+  audioVisualSpeed?: "slow" | "normal" | "fast";
+  mediaAutoPauseOnEdit?: boolean;
+  videoSrc?: string;
+  videoRemoteUrl?: string;
+  geometryShape?: "rect" | "circle" | "triangle" | "diamond" | "hexagon" | "star" | "heart";
+  geometryColor?: string;
+  geometryScript?: string;
+  geometrySketchDataUrl?: string;
+  style?: PanelElementStyle;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotate?: number;
+};
+
+export type PanelLayer = {
+  id: string;
+  name: string;
+  locked: boolean;
+  editable: boolean;
+  isPrimary?: boolean;
+  isMapping?: boolean;
+  mappingBaseLayerId?: string;
+  mergeSelected?: boolean;
+};
+
+export type PanelHistoryItem = {
+  index: number;
+  timestamp: number;
+  label: string;
+  active: boolean;
+};
+
+export type PanelActionResult = { ok: true } | { ok: false; reason: string };
+