@arronqzy/react-blueprint 1.0.0

package/src/graph/document.ts

@@ -0,0 +1,384 @@
+import type {
+  ClockNodeConfig,
+  FetchRequestConfig,
+  JsonNodeConfig,
+  LogicNodeConfig,
+  PageLifecyclePhase,
+} from "@arronqzy/blueprint-dsl";
+import {
+  BLUEPRINT_NODE_TYPE,
+  CLOCK_NODE_TYPE,
+  AND_NODE_TYPE,
+  DEFAULT_CLOCK_NODE_CONFIG,
+  DEFAULT_FETCH_REQUEST_CONFIG,
+  DEFAULT_JSON_NODE_CONFIG,
+  DEFAULT_LOGIC_NODE_CONFIG,
+  DEFAULT_LOGIC_NODE_TYPE,
+  FETCH_NODE_TYPE,
+  JSON_NODE_TYPE,
+  LIFECYCLE_NODE_TYPE,
+  normalizeClockConfig,
+  VIEW_NODE_TYPE,
+} from "@arronqzy/blueprint-dsl";
+
+export type { FetchRequestConfig as BlueprintFetchConfig } from "@arronqzy/blueprint-dsl";
+export type { JsonNodeConfig as BlueprintJsonConfig } from "@arronqzy/blueprint-dsl";
+export type { LogicNodeConfig as BlueprintLogicConfig } from "@arronqzy/blueprint-dsl";
+export type { ClockNodeConfig as BlueprintClockConfig } from "@arronqzy/blueprint-dsl";
+
+export type BlueprintNodeRole = "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+
+/** 决定右侧配置面板展示哪类配置 */
+export type BlueprintConfigSource =
+  | "blueprint"
+  | "logic"
+  | "and"
+  | "lifecycle"
+  | "view"
+  | "fetch"
+  | "json"
+  | "clock";
+
+export type BlueprintGraphNode = {
+  id: string;
+  role: BlueprintNodeRole;
+  /** 对应 @arronqzy/blueprint-dsl NodeDefinition.type */
+  nodeType: string;
+  label: string;
+  position: { x: number; y: number };
+  /** 配置面板类型；默认由 role 推断 */
+  configSource?: BlueprintConfigSource;
+  /** @deprecated 请使用 viewElementIds；读取时由 resolveViewElementIds 兼容 */
+  viewElementId?: string;
+  /** 关联的视图画布节点 id 列表，配置类型为 view 时可一次绑定多个 */
+  viewElementIds?: string[];
+  /** logic 节点所属的蓝图节点 */
+  parentId?: string;
+  /** blueprint 节点嵌套子蓝图 id（内部标识，保留兼容） */
+  nestedBlueprintId?: string;
+  /** 引用的蓝图库记录 id，执行时会等待该蓝图完成后继续 */
+  libraryBlueprintId?: string;
+  /** lifecycle 节点监听的生命周期阶段 */
+  lifecyclePhase?: PageLifecyclePhase;
+  /** 数据源获取节点的 fetch 配置 */
+  fetchConfig?: FetchRequestConfig;
+  /** JSON 节点的 JSON 字符串配置 */
+  jsonConfig?: JsonNodeConfig;
+  /** 逻辑节点的 JavaScript 脚本配置 */
+  logicConfig?: LogicNodeConfig;
+  /** 时钟节点的间隔与时间格式配置 */
+  clockConfig?: ClockNodeConfig;
+};
+
+export function resolveViewElementIds(
+  node: Pick<BlueprintGraphNode, "viewElementId" | "viewElementIds">
+): string[] {
+  if (node.viewElementIds?.length) return [...node.viewElementIds];
+  if (node.viewElementId) return [node.viewElementId];
+  return [];
+}
+
+/** 仅保留仍存在于视图画布中的关联 id */
+export function pruneViewElementIds(
+  ids: readonly string[],
+  existingViewElementIds: ReadonlySet<string>
+): string[] {
+  return ids.filter((id) => existingViewElementIds.has(id));
+}
+
+export function resolveBlueprintConfigSource(
+  node: Pick<
+    BlueprintGraphNode,
+    "role" | "configSource" | "viewElementId" | "viewElementIds"
+  >
+): BlueprintConfigSource {
+  if (node.configSource) return node.configSource;
+  if (resolveViewElementIds(node).length > 0) return "view";
+  if (node.role === "lifecycle") return "lifecycle";
+  if (node.role === "clock") return "clock";
+  if (node.role === "and") return "and";
+  if (node.role === "fetch") return "fetch";
+  if (node.role === "json") return "json";
+  return node.role === "logic" ? "logic" : "blueprint";
+}
+
+/** 画布节点顶部（拖拽区）展示的配置类型文案 */
+export const BLUEPRINT_CONFIG_TYPE_LABELS: Record<
+  BlueprintConfigSource,
+  string
+> = {
+  blueprint: "蓝图",
+  logic: "逻辑",
+  and: "并运算",
+  lifecycle: "生命周期",
+  view: "视图",
+  fetch: "数据源获取",
+  json: "JSON 节点",
+  clock: "时钟",
+};
+
+export function resolveBlueprintNodeTypeLabel(
+  node: Pick<
+    BlueprintGraphNode,
+    "role" | "configSource" | "viewElementId" | "viewElementIds"
+  >
+): string {
+  return BLUEPRINT_CONFIG_TYPE_LABELS[resolveBlueprintConfigSource(node)];
+}
+
+/** 新建节点时的默认显示名称（与类型文案一致） */
+export function defaultBlueprintNodeLabel(
+  configSource: BlueprintConfigSource
+): string {
+  return BLUEPRINT_CONFIG_TYPE_LABELS[configSource];
+}
+
+export function resolveNodeFetchConfig(
+  node: Pick<BlueprintGraphNode, "fetchConfig">
+): FetchRequestConfig {
+  return {
+    ...DEFAULT_FETCH_REQUEST_CONFIG,
+    ...node.fetchConfig,
+    headers: {
+      ...DEFAULT_FETCH_REQUEST_CONFIG.headers,
+      ...node.fetchConfig?.headers,
+    },
+    swaggerEndpoints: node.fetchConfig?.swaggerEndpoints,
+  };
+}
+
+export function resolveNodeJsonConfig(
+  node: Pick<BlueprintGraphNode, "jsonConfig">
+): JsonNodeConfig {
+  return {
+    ...DEFAULT_JSON_NODE_CONFIG,
+    ...node.jsonConfig,
+  };
+}
+
+export function resolveNodeLogicConfig(
+  node: Pick<BlueprintGraphNode, "logicConfig">
+): LogicNodeConfig {
+  return {
+    ...DEFAULT_LOGIC_NODE_CONFIG,
+    ...node.logicConfig,
+  };
+}
+
+export function resolveNodeClockConfig(
+  node: Pick<BlueprintGraphNode, "clockConfig">
+): ClockNodeConfig {
+  return normalizeClockConfig({
+    ...DEFAULT_CLOCK_NODE_CONFIG,
+    ...node.clockConfig,
+  });
+}
+
+export type BlueprintGraphEdge = {
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
+};
+
+export type BlueprintDocument = {
+  id: string;
+  name?: string;
+  nodes: BlueprintGraphNode[];
+  edges: BlueprintGraphEdge[];
+  /** 为 true 时，假信号不阻塞任务链，会继续向下游传递 */
+  allowFalseSignalPropagation?: boolean;
+};
+
+export function createBlueprintDocument(id = "default"): BlueprintDocument {
+  return { id, nodes: [], edges: [] };
+}
+
+export function createNodeId(prefix = "node"): string {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+const noInputTargetNodeIds = (document: BlueprintDocument) =>
+  new Set(
+    document.nodes
+      .filter((node) => node.role === "lifecycle")
+      .map((node) => node.id)
+  );
+
+/** 生命周期节点无输入口：移除连入边，并修正节点配置 */
+export function sanitizeBlueprintDocument(
+  document: BlueprintDocument
+): BlueprintDocument {
+  const blockedTargets = noInputTargetNodeIds(document);
+
+  const nodes = document.nodes.map((node) => {
+    let next = node;
+    if (node.viewElementId && !node.viewElementIds?.length) {
+      next = {
+        ...next,
+        viewElementIds: [node.viewElementId],
+        viewElementId: undefined,
+      };
+    }
+    if (
+      resolveBlueprintConfigSource(next) === "view" &&
+      next.nodeType !== VIEW_NODE_TYPE
+    ) {
+      next = { ...next, nodeType: VIEW_NODE_TYPE };
+    }
+    if (next.role === "lifecycle") {
+      return { ...next, configSource: "lifecycle" as const };
+    }
+    if (next.role === "clock") {
+      return { ...next, configSource: "clock" as const };
+    }
+    if (next.configSource === "lifecycle" || next.configSource === "clock") {
+      return { ...next, configSource: undefined };
+    }
+    return next;
+  });
+
+  const edges = document.edges.filter((edge) => !blockedTargets.has(edge.target));
+
+  return { ...document, nodes, edges };
+}
+
+export function filterInvalidBlueprintEdges(
+  document: BlueprintDocument,
+  edges: BlueprintGraphEdge[]
+): BlueprintGraphEdge[] {
+  const blockedTargets = noInputTargetNodeIds(document);
+  return edges.filter((edge) => !blockedTargets.has(edge.target));
+}
+
+/** 切换配置类型时同步节点 role / nodeType，确保生命周期节点渲染为无输入口 */
+export function patchNodeConfigSource(
+  node: BlueprintGraphNode,
+  configSource: BlueprintConfigSource
+): Partial<BlueprintGraphNode> {
+  if (configSource === "lifecycle") {
+    const phase = node.lifecyclePhase ?? "mounted";
+    return {
+      role: "lifecycle",
+      nodeType: LIFECYCLE_NODE_TYPE,
+      configSource: "lifecycle",
+      lifecyclePhase: phase,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: undefined,
+      clockConfig: undefined,
+    };
+  }
+
+  if (configSource === "clock") {
+    return {
+      role: "clock",
+      nodeType: CLOCK_NODE_TYPE,
+      configSource: "clock",
+      clockConfig: resolveNodeClockConfig(node),
+      lifecyclePhase: undefined,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: undefined,
+    };
+  }
+
+  if (configSource === "fetch") {
+    return {
+      role: "fetch",
+      nodeType: FETCH_NODE_TYPE,
+      configSource: "fetch",
+      lifecyclePhase: undefined,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: resolveNodeFetchConfig(node),
+      jsonConfig: undefined,
+      logicConfig: undefined,
+      clockConfig: undefined,
+    };
+  }
+
+  if (configSource === "json") {
+    return {
+      role: "json",
+      nodeType: JSON_NODE_TYPE,
+      configSource: "json",
+      lifecyclePhase: undefined,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: resolveNodeJsonConfig(node),
+      logicConfig: undefined,
+      clockConfig: undefined,
+    };
+  }
+
+  if (configSource === "blueprint") {
+    return {
+      role: "blueprint",
+      nodeType: BLUEPRINT_NODE_TYPE,
+      configSource: "blueprint",
+      lifecyclePhase: undefined,
+      nestedBlueprintId: node.nestedBlueprintId ?? createNodeId("nested_bp"),
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: undefined,
+      clockConfig: undefined,
+    };
+  }
+
+  if (configSource === "logic") {
+    return {
+      role: "logic",
+      nodeType: DEFAULT_LOGIC_NODE_TYPE,
+      configSource: "logic",
+      lifecyclePhase: undefined,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: resolveNodeLogicConfig(node),
+      clockConfig: undefined,
+    };
+  }
+
+  if (configSource === "and") {
+    return {
+      role: "and",
+      nodeType: AND_NODE_TYPE,
+      configSource: "and",
+      lifecyclePhase: undefined,
+      viewElementId: undefined,
+      viewElementIds: undefined,
+      libraryBlueprintId: undefined,
+      fetchConfig: undefined,
+      jsonConfig: undefined,
+      logicConfig: undefined,
+      clockConfig: undefined,
+    };
+  }
+
+  return {
+    role: "blueprint",
+    nodeType: VIEW_NODE_TYPE,
+    configSource: "view",
+    lifecyclePhase: undefined,
+    libraryBlueprintId: undefined,
+    fetchConfig: undefined,
+    jsonConfig: undefined,
+    logicConfig: undefined,
+    clockConfig: undefined,
+  };
+}

package/src/graph/index.ts

@@ -0,0 +1,7 @@
+export * from "./document";
+export * from "./node-types";
+export * from "./blueprint-graph";
+export * from "./react-flow-adapter";
+export * from "./sync-edges";
+export * from "./sync-nodes";
+export * from "./node-summary";

package/src/graph/node-summary.ts

@@ -0,0 +1,88 @@
+import {
+  PAGE_LIFECYCLE_LABELS,
+  resolveFetchRequestUrl,
+} from "@arronqzy/blueprint-dsl";
+
+import {
+  resolveBlueprintConfigSource,
+  resolveNodeClockConfig,
+  resolveNodeFetchConfig,
+  resolveNodeJsonConfig,
+  resolveNodeLogicConfig,
+  resolveViewElementIds,
+} from "./document";
+import type { BlueprintFlowNodeData } from "./react-flow-adapter";
+
+function truncate(text: string, max: number): string {
+  const trimmed = text.trim();
+  if (trimmed.length <= max) return trimmed;
+  return `${trimmed.slice(0, Math.max(0, max - 1))}…`;
+}
+
+/** 画布节点正文区展示的配置摘要 */
+export function resolveBlueprintNodeSummary(
+  data: BlueprintFlowNodeData
+): string | undefined {
+  const configSource = resolveBlueprintConfigSource(data);
+
+  switch (configSource) {
+    case "fetch": {
+      const config = resolveNodeFetchConfig(data);
+      if (!config.url?.trim()) return "未配置 URL";
+      let url = config.url.trim();
+      try {
+        url = resolveFetchRequestUrl(config);
+      } catch {
+        /* 保留原始输入 */
+      }
+      const method = config.method ?? "GET";
+      return truncate(`${method} ${url}`, 44);
+    }
+    case "clock": {
+      const clock = resolveNodeClockConfig(data);
+      const parts = [
+        `${clock.outputCount} 次`,
+        clock.intervalSeconds > 0 ? `间隔 ${clock.intervalSeconds}s` : null,
+        clock.emitImmediately ? "立即首发" : "延迟首发",
+      ].filter(Boolean);
+      return parts.join(" · ");
+    }
+    case "json": {
+      const json = resolveNodeJsonConfig(data).jsonString?.trim();
+      if (!json) return "空 JSON";
+      return truncate(json.replace(/\s+/g, " "), 44);
+    }
+    case "logic": {
+      const code = resolveNodeLogicConfig(data).sourceCode?.trim();
+      if (!code) return "未配置脚本";
+      const firstLine =
+        code.split("\n").find((line) => line.trim())?.trim() ?? code;
+      return truncate(firstLine, 44);
+    }
+    case "blueprint": {
+      if (data.libraryBlueprintLabel) {
+        return truncate(data.libraryBlueprintLabel, 44);
+      }
+      if (data.libraryBlueprintId) {
+        return truncate(data.libraryBlueprintId, 44);
+      }
+      return "未选择蓝图";
+    }
+    case "lifecycle": {
+      const phase = data.lifecyclePhase ?? "mounted";
+      return PAGE_LIFECYCLE_LABELS[phase] ?? phase;
+    }
+    case "view": {
+      const ids = resolveViewElementIds(data);
+      if (ids.length === 0) return "未关联视图节点";
+      if (ids.length === 1) {
+        return truncate(`视图节点 ${ids[0]}`, 44);
+      }
+      return `已关联 ${ids.length} 个视图节点`;
+    }
+    case "and":
+      return "两路输入均为真时输出";
+    default:
+      return undefined;
+  }
+}

package/src/graph/node-types.ts

@@ -0,0 +1,9 @@
+/** 与 @arronqzy/blueprint-dsl 中 NodeDefinition.type 对齐，供执行层解析 */
+export {
+  BLUEPRINT_NODE_TYPE,
+  DEFAULT_LOGIC_NODE_TYPE,
+  LIFECYCLE_NODE_TYPE,
+  JSON_NODE_TYPE,
+  CLOCK_NODE_TYPE,
+  AND_NODE_TYPE,
+} from "@arronqzy/blueprint-dsl";

package/src/graph/react-flow-adapter.ts

@@ -0,0 +1,127 @@
+import type {
+  BlueprintDocument,
+  BlueprintGraphEdge,
+  BlueprintGraphNode,
+} from "./document";
+import { createNodeId } from "./document";
+
+export type BlueprintFlowNodeData = {
+  label: string;
+  role: BlueprintGraphNode["role"];
+  nodeType: string;
+  configSource?: BlueprintGraphNode["configSource"];
+  viewElementId?: string;
+  viewElementIds?: string[];
+  parentId?: string;
+  nestedBlueprintId?: string;
+  libraryBlueprintId?: string;
+  libraryBlueprintLabel?: string;
+  lifecyclePhase?: BlueprintGraphNode["lifecyclePhase"];
+  fetchConfig?: BlueprintGraphNode["fetchConfig"];
+  jsonConfig?: BlueprintGraphNode["jsonConfig"];
+  clockConfig?: BlueprintGraphNode["clockConfig"];
+  logicConfig?: BlueprintGraphNode["logicConfig"];
+  /** 调试执行时时钟节点已发送次数 */
+  clockEmitProgress?: { current: number; total: number } | null;
+  /** 由画布注入，勿写入图数据 */
+  isSelected?: boolean;
+  /** 调试执行时高亮当前执行到的节点 */
+  isExecutionActive?: boolean;
+  /** 调试执行时当前节点主输出信号类型 */
+  executionSignalKind?: "true" | "false" | null;
+};
+
+/** 与 BlueprintNodeCard 固定宽度一致，供 RF 在 measured 前计算连线路径 */
+export const BP_FLOW_NODE_WIDTH = 168;
+export const BP_FLOW_NODE_HEIGHT = 92;
+
+export type ReactFlowNodeView = {
+  id: string;
+  type: string;
+  position: { x: number; y: number };
+  width?: number;
+  height?: number;
+  dragHandle?: string;
+  data: BlueprintFlowNodeData;
+};
+
+export type ReactFlowEdgeView = {
+  id: string;
+  type?: string;
+  source: string;
+  target: string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+};
+
+export function toReactFlowNodes(document: BlueprintDocument): ReactFlowNodeView[] {
+  return document.nodes.map((n) => ({
+    id: n.id,
+    type:
+      n.role === "blueprint"
+        ? "blueprint"
+        : n.role === "lifecycle"
+          ? "lifecycle"
+          : n.role === "clock"
+            ? "clock"
+          : n.role === "and"
+            ? "and"
+        : n.role === "fetch"
+          ? "fetch"
+          : n.role === "json"
+            ? "json"
+            : "logic",
+    position: { ...n.position },
+    width: BP_FLOW_NODE_WIDTH,
+    height: BP_FLOW_NODE_HEIGHT,
+    zIndex: 0,
+    connectable: true,
+    dragHandle: ".bp-flow-drag-handle",
+    data: {
+      label: n.label,
+      role: n.role,
+      nodeType: n.nodeType,
+      configSource: n.configSource,
+      viewElementId: n.viewElementId,
+      viewElementIds: n.viewElementIds,
+      parentId: n.parentId,
+      nestedBlueprintId: n.nestedBlueprintId,
+      libraryBlueprintId: n.libraryBlueprintId,
+      lifecyclePhase: n.lifecyclePhase,
+      fetchConfig: n.fetchConfig,
+      jsonConfig: n.jsonConfig,
+      clockConfig: n.clockConfig,
+      logicConfig: n.logicConfig,
+    },
+  }));
+}
+
+export function toReactFlowEdges(document: BlueprintDocument): ReactFlowEdgeView[] {
+  return document.edges.map((e) => ({
+    id: e.id,
+    type: "smoothstep",
+    source: e.source,
+    target: e.target,
+    sourceHandle: e.sourceHandle ?? "out",
+    targetHandle: e.targetHandle ?? "in",
+  }));
+}
+
+export function syncEdgesFromFlow(flowEdges: ReactFlowEdgeView[]): BlueprintGraphEdge[] {
+  return flowEdges.map((e) => ({
+    id: e.id || createNodeId("edge"),
+    source: e.source,
+    target: e.target,
+    sourceHandle: e.sourceHandle ?? undefined,
+    targetHandle: e.targetHandle ?? undefined,
+  }));
+}
+
+export function collectPositionUpdates(
+  nodes: Array<{ id: string; position: { x: number; y: number } }>
+): Array<{ id: string; position: { x: number; y: number } }> {
+  return nodes.map((n) => ({
+    id: n.id,
+    position: { x: n.position.x, y: n.position.y },
+  }));
+}

package/src/graph/sync-edges.ts

@@ -0,0 +1,69 @@
+import type { Edge } from "@xyflow/react";
+
+import type { BlueprintGraphEdge } from "./document";
+import { syncEdgesFromFlow, toReactFlowEdges } from "./react-flow-adapter";
+import type { BlueprintGraph } from "./blueprint-graph";
+
+/** 边线描边（写入 edge.style；使用 hex 避免 SVG style 解析 hsl 异常） */
+export const BP_EDGE_STYLE = {
+  stroke: "#2563eb",
+  strokeWidth: 2.5,
+} as const;
+
+export const BP_FLOW_EDGE_TYPE = "blueprintSmooth" as const;
+
+export function flowEdgesToGraphEdges(flowEdges: Edge[]): BlueprintGraphEdge[] {
+  return syncEdgesFromFlow(
+    flowEdges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle ?? "out",
+      targetHandle: e.targetHandle ?? "in",
+    }))
+  );
+}
+
+export function graphToFlowEdges(graph: BlueprintGraph): Edge[] {
+  return normalizeFlowEdges(toReactFlowEdges(graph.document) as Edge[]);
+}
+
+export function edgeListSignature(edges: { id: string }[]): string {
+  return edges
+    .map((e) => e.id)
+    .sort()
+    .join(",");
+}
+
+function edgeConnectionKey(edge: {
+  source: string;
+  target: string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+}): string {
+  return `${edge.source}|${edge.sourceHandle ?? "out"}|${edge.target}|${edge.targetHandle ?? "in"}`;
+}
+
+/** 避免 onConnect 与 onEdgesChange 各加一条时重复 */
+export function dedupeFlowEdges(edges: Edge[]): Edge[] {
+  const seen = new Set<string>();
+  const out: Edge[] = [];
+  for (const e of edges) {
+    const key = edgeConnectionKey(e);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(e);
+  }
+  return out;
+}
+
+export function normalizeFlowEdges(edges: Edge[]): Edge[] {
+  return dedupeFlowEdges(edges).map((e) => ({
+    ...e,
+    type: BP_FLOW_EDGE_TYPE,
+    zIndex: 1000,
+    selectable: true,
+    deletable: true,
+    style: { ...BP_EDGE_STYLE },
+  })) as Edge[];
+}