@arronqzy/react-view 0.0.1

package/src/core/signal.ts

@@ -0,0 +1,130 @@
+import { BehaviorSubject } from "rxjs";
+
+/**
+ * @example
+ * 
+
+// 使用示例（符合你的期望调用方式）
+const [headerName, setHeaderName] = createSignal<string | number>(123); // 支持混合类型
+
+console.log(headerName()); // 输出: 123，类型: string | number
+
+// 手动订阅（可选）
+const unsubManual = headerName.subscribe((value: string | number) => {
+  console.log("手动订阅:", value);
+});
+
+// effect：自动追踪 headerName，当变化时打印
+const disposeEffect = createEffect(() => {
+  console.log("effect: headerName =", headerName()); // 初始输出: effect: headerName = 123
+});
+
+setHeaderName("新标题"); //
+// 输出:
+// 手动订阅: 新标题
+// effect: headerName = 新标题
+
+setHeaderName(456); //
+// 输出:
+// 手动订阅: 456
+// effect: headerName = 456
+
+ */
+// 全局追踪器：当前运行的 effect
+
+// 类型定义
+type SignalGetter<T> = (() => T) & {
+  subscribe: (cb: (value: T) => void) => () => void;
+};
+
+type SignalSetter<T> = (newValue: T) => void;
+
+type Signal<T> = {
+  subject: BehaviorSubject<T>;
+  subscribers: Set<() => void>;
+  get: SignalGetter<T>;
+  set: SignalSetter<T>;
+};
+
+// 全局追踪器：当前运行的 effect
+let currentEffect: (() => void) | null = null;
+
+// createSignal 函数：返回 [getFn, setFn]，支持解构
+export function createSignal<T>(
+  initialValue: T
+): [SignalGetter<T>, SignalSetter<T>] {
+  const subject = new BehaviorSubject<T>(initialValue);
+  const subscribers = new Set<() => void>(); // 存储 effect 的 run 函数
+
+  // signal 对象：内部管理
+  const signal: Signal<T> = {
+    subject,
+    subscribers,
+    get: null as any, // 稍后赋值
+    set: null as any, // 稍后赋值
+  };
+
+  // getter 函数：调用时读取值，并在 effect 中收集依赖
+  const getFn: SignalGetter<T> = function () {
+    if (currentEffect) {
+      // 收集依赖：将当前 effect 的 run 添加到信号的 subscribers
+      signal.subscribers.add(currentEffect);
+    }
+    return subject.value;
+  };
+
+  // 附加 subscribe 方法（手动订阅）
+  getFn.subscribe = (cb: (value: T) => void) => {
+    cb(subject.value); // 立即触发当前值
+    const subscription = subject.subscribe(cb);
+    return () => subscription.unsubscribe();
+  };
+
+  signal.get = getFn;
+
+  // setter 函数：更新值，触发手动订阅者和 effect
+  const setFn: SignalSetter<T> = function (newValue: T) {
+    subject.next(newValue);
+    // 触发所有 effect subscribers
+    subscribers.forEach((run) => run());
+  };
+
+  signal.set = setFn;
+
+  // 返回 [getFn, setFn]
+  return [getFn, setFn];
+}
+
+// createEffect 函数：自动追踪依赖，并在变化时重新运行 fn
+export function createEffect(fn: () => void): () => void {
+  let disposed = false;
+  const signalDeps = new Set<Signal<any>>(); // 存储访问过的信号对象
+
+  const effect = {
+    run: () => {
+      if (disposed) return;
+
+      // 清除旧依赖
+      signalDeps.forEach((sig) => sig.subscribers.delete(effect.run));
+      signalDeps.clear();
+
+      // 运行 fn，收集新依赖
+      currentEffect = effect.run;
+      fn();
+      currentEffect = null;
+
+      // 重新订阅新依赖
+      signalDeps.forEach((sig) => sig.subscribers.add(effect.run));
+    },
+  };
+
+  // 初始运行
+  effect.run();
+
+  // 返回 dispose 函数
+  return () => {
+    disposed = true;
+    signalDeps.forEach((sig) => sig.subscribers.delete(effect.run));
+    signalDeps.clear();
+  };
+}

package/src/core/template.tsx

@@ -0,0 +1,25 @@
+import { JSX, useRef } from "react";
+import { instructions } from "./instructions";
+
+/**
+ * 事件需要补齐
+ * @param props
+ * @param children
+ * @returns
+ */
+export const Template = (
+  props: Record<string, unknown>,
+  children: JSX.Element
+) => {
+  const onHandleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (props?.id) {
+      instructions.execute(props.id + "click", { e });
+    } else {
+      if (import.meta.env.DEV) {
+        console.warn("Template 缺少 id,无法触发事件");
+      }
+    }
+  };
+
+  return <div onClick={onHandleClick}>{children}</div>;
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./core/createAction";
+export * from "./core/createView";
+export * from "./core/instructions";
+export * from "./core/nodePool";
+export * from "./core/signal";
+export * from "./core/template";
+export * from "./panel";

package/src/panel/ReactViewOnlinePreview.tsx

@@ -0,0 +1,331 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  BlueprintGraph,
+  documentToRunnableGraph,
+  getBlueprintLibraryRecord,
+  listBlueprintLibrary,
+  useBlueprintPageLifecycle,
+  type BlueprintLibraryListItem,
+} from "@arronqzy/react-blueprint";
+import type { LibraryBlueprintResolver, PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
+import type { State } from "../../../rx-store/src/types";
+import { ElementsLayer } from "./components/ElementsLayer";
+import type { PanelElement } from "./types";
+import {
+  clearViewElementScopes,
+  getViewElementScope,
+  setViewElementScopes,
+  useViewScopeStoreVersion,
+} from "./scope/view-scope-store";
+import { resolvePanelElementScope } from "./utils/scope-template";
+import {
+  getWorkspaceProject,
+  type WorkspaceProjectRecord,
+} from "./library/workspace-project-db";
+import { readWorkspacePreviewCache } from "./library/workspace-project-cache";
+import { subscribeWorkspaceProjectUpdates } from "./library/workspace-project-sync";
+import {
+  computePanelSceneBounds,
+  getActiveLayerId,
+  normalizeImportedPanelState,
+  notifyPreviewLayoutChanged,
+  parseAllPanelElements,
+  parsePanelLayers,
+  resolvePreviewLayerElements,
+} from "./utils/panelStateIO";
+
+const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
+
+export type ReactViewOnlinePreviewProps = {
+  projectId: string;
+  previewInstanceId?: string;
+};
+
+function applyTitleIcon(titleIconDataUrl?: string) {
+  if (!titleIconDataUrl) return;
+  for (const rel of ["icon", "shortcut icon"]) {
+    document.querySelector(`link[rel='${rel}']`)?.remove();
+    const link = document.createElement("link");
+    link.rel = rel;
+    link.type = "image/png";
+    link.href = titleIconDataUrl;
+    document.head.appendChild(link);
+  }
+}
+
+async function loadWorkspaceRecord(projectId: string): Promise<WorkspaceProjectRecord | null> {
+  const fromDb = await getWorkspaceProject(projectId);
+  if (fromDb) return fromDb;
+  return readWorkspacePreviewCache(projectId);
+}
+
+export function ReactViewOnlinePreview({
+  projectId,
+  previewInstanceId,
+}: ReactViewOnlinePreviewProps) {
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [panelState, setPanelState] = useState<State | null>(null);
+  const [projectRevision, setProjectRevision] = useState(0);
+  const [blueprintGraph, setBlueprintGraph] = useState(() => BlueprintGraph.empty());
+  const [blueprintLibraryItems, setBlueprintLibraryItems] = useState<
+    BlueprintLibraryListItem[]
+  >([]);
+  const [layoutRevision, setLayoutRevision] = useState(0);
+  const [layoutReady, setLayoutReady] = useState(false);
+
+  const sceneRef = useRef<HTMLDivElement | null>(null);
+
+  const layers = useMemo(
+    () => (panelState ? parsePanelLayers(panelState) : []),
+    [panelState]
+  );
+  const activeLayerId = useMemo(
+    () => (panelState ? getActiveLayerId(panelState) : "layer-1"),
+    [panelState]
+  );
+  const allElements = useMemo(
+    () => (panelState ? parseAllPanelElements(panelState) : []),
+    [panelState]
+  );
+
+  const loadProject = useCallback(async () => {
+    const record = await loadWorkspaceRecord(projectId);
+    if (!record) {
+      setLoadError("工作区不存在或已被删除");
+      setPanelState(null);
+      return;
+    }
+
+    const normalized = normalizeImportedPanelState(record.panelState);
+    if (!normalized) {
+      setLoadError("工作区数据格式无效");
+      setPanelState(null);
+      return;
+    }
+
+    setLoadError(null);
+    clearViewElementScopes();
+    setPanelState(normalized);
+    setBlueprintGraph(BlueprintGraph.fromDocument(record.blueprintDocument));
+    document.title = record.productName.trim() || record.name || "预览";
+    applyTitleIcon(record.titleIconDataUrl);
+    setProjectRevision((v) => v + 1);
+  }, [projectId]);
+
+  useEffect(() => {
+    void loadProject();
+  }, [loadProject]);
+
+  useEffect(() => {
+    return subscribeWorkspaceProjectUpdates(projectId, () => {
+      void loadProject();
+    });
+  }, [loadProject, projectId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    void listBlueprintLibrary().then((items) => {
+      if (!cancelled) setBlueprintLibraryItems(items);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectRevision]);
+
+  const blueprintLibraryNameById = useMemo(
+    () => new Map(blueprintLibraryItems.map((item) => [item.id, item.name])),
+    [blueprintLibraryItems]
+  );
+
+  const resolveLibraryBlueprint = useCallback<LibraryBlueprintResolver>(
+    async (libraryBlueprintId) => {
+      const record = await getBlueprintLibraryRecord(libraryBlueprintId);
+      if (!record) return null;
+      const items = await listBlueprintLibrary();
+      const nameById = new Map(items.map((item) => [item.id, item.name]));
+      return documentToRunnableGraph(record.document, { libraryNameById: nameById });
+    },
+    []
+  );
+
+  const handleViewScopeUpdate = useCallback(
+    (viewElementIds: string[], scope: unknown) => {
+      setViewElementScopes(viewElementIds, scope);
+    },
+    []
+  );
+
+  const layerElements = useMemo(
+    () => resolvePreviewLayerElements(allElements, layers, activeLayerId),
+    [activeLayerId, allElements, layers]
+  );
+
+  const scopeStoreVersion = useViewScopeStoreVersion();
+  const scopedLayerElements = useMemo(() => {
+    void scopeStoreVersion;
+    return layerElements.map((el) =>
+      resolvePanelElementScope(el, getViewElementScope(el.id))
+    );
+  }, [layerElements, scopeStoreVersion]);
+
+  const sceneBounds = useMemo(
+    () => computePanelSceneBounds(scopedLayerElements),
+    [scopedLayerElements]
+  );
+
+  const displayElements = useMemo(
+    () =>
+      scopedLayerElements.map((el) => ({
+        ...el,
+        x: el.x - sceneBounds.minX,
+        y: el.y - sceneBounds.minY,
+      })),
+    [sceneBounds.minX, sceneBounds.minY, scopedLayerElements]
+  );
+
+  const applySceneFit = useCallback(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const vw = window.innerWidth || 1;
+    const vh = window.innerHeight || 1;
+    const sw = Math.max(1, sceneBounds.width);
+    const sh = Math.max(1, sceneBounds.height);
+    const scaleX = vw / sw;
+    const scaleY = vh / sh;
+    if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return;
+    scene.style.transform = `scale(${scaleX}, ${scaleY})`;
+    setLayoutRevision((v) => v + 1);
+    notifyPreviewLayoutChanged();
+  }, [sceneBounds.height, sceneBounds.width]);
+
+  useLayoutEffect(() => {
+    if (!panelState || layerElements.length === 0) return;
+
+    setLayoutReady(false);
+    applySceneFit();
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      applySceneFit();
+      raf2 = requestAnimationFrame(() => {
+        notifyPreviewLayoutChanged();
+        setLayoutReady(true);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [
+    applySceneFit,
+    displayElements.length,
+    layerElements.length,
+    panelState,
+    projectRevision,
+    sceneBounds.height,
+    sceneBounds.width,
+  ]);
+
+  const lifecycleReady =
+    !!panelState && layerElements.length > 0 && layoutReady;
+
+  useBlueprintPageLifecycle({
+    graph: blueprintGraph,
+    active: true,
+    enabled: lifecycleReady,
+    bootPhases: PREVIEW_BOOT_PHASES,
+    bootKey: projectRevision,
+    waitForPageReady: true,
+    onUpdated: `${activeLayerId}|${layerElements.length}|${projectRevision}|${layoutRevision}`,
+    resolveLibraryBlueprint,
+    libraryNameById: blueprintLibraryNameById,
+    rootLibraryBlueprintId: null,
+    onViewScopeUpdate: handleViewScopeUpdate,
+  });
+
+  useEffect(() => {
+    window.addEventListener("resize", applySceneFit);
+    return () => window.removeEventListener("resize", applySceneFit);
+  }, [applySceneFit]);
+
+  const noopUpdate = useCallback((_id: string, _patch: Partial<PanelElement>) => {}, []);
+  const noopSelect = useCallback((_ids: string[]) => {}, []);
+
+  if (loadError) {
+    return (
+      <div className="flex min-h-[100vh] w-full items-center justify-center bg-white px-6 text-center text-sm text-gray-600">
+        {loadError}
+      </div>
+    );
+  }
+
+  if (!panelState) {
+    return (
+      <div className="flex min-h-[100vh] w-full items-center justify-center bg-white text-sm text-gray-600">
+        加载预览中…
+      </div>
+    );
+  }
+
+  if (layerElements.length === 0) {
+    return (
+      <div className="flex min-h-[100vh] w-full flex-col items-center justify-center gap-2 bg-white px-6 text-center text-sm text-gray-600">
+        <div>当前工作区没有可预览的视图节点</div>
+        <div className="text-xs text-gray-400">
+          请先在编辑器中点击「同步」或「创建工作区」后再预览
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="min-h-[100vh] w-full overflow-hidden bg-white text-gray-900"
+      data-preview-mode="online"
+      data-project-id={projectId}
+      data-preview-instance-id={previewInstanceId ?? ""}
+      data-preview-node-count={String(displayElements.length)}
+    >
+      <div
+        id="preview-root"
+        className="overflow-hidden"
+        style={{ width: "100vw", height: "100vh" }}
+      >
+        <div
+          ref={sceneRef}
+          id="preview-scene"
+          className="relative shrink-0 origin-top-left"
+          style={{
+            width: sceneBounds.width,
+            height: sceneBounds.height,
+            transformOrigin: "left top",
+          }}
+        >
+          <ElementsLayer
+            elements={displayElements}
+            allElements={allElements}
+            selectedIds={[]}
+            onSelectIds={noopSelect}
+            updateElement={noopUpdate}
+            layerLocked
+            previewMode
+            previewLayoutKey={layoutRevision}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function parseOnlinePreviewSearchParams(search: string): {
+  projectId: string;
+  previewInstanceId?: string;
+} | null {
+  const params = new URLSearchParams(search);
+  if (params.get("preview") !== "online") return null;
+  const projectId = params.get("projectId") ?? params.get("id");
+  if (!projectId) return null;
+  return {
+    projectId,
+    previewInstanceId: params.get("pid") ?? undefined,
+  };
+}