@arronqzy/react-blueprint

Abuilder 的蓝图编辑器 React 包，基于 React Flow 提供节点连线编辑、调试执行与蓝图库管理。

功能概览

• 可视化蓝图：拖拽节点、连线、对齐、视口平移缩放
• 节点类型：逻辑、请求、时钟、JSON、子蓝图引用等（由 blueprint-dsl 定义行为）
• 调试执行：单步/连续调试、执行轨迹、连线信号高亮、时钟节点进度
• 蓝图库：IndexedDB 存储、导入导出、元数据编辑
• 执行日志：运行记录持久化、导出与清理策略
• 视图联动：生命周期钩子向视图节点写入 Scope

安装

pnpm add @arronqzy/react-blueprint @xyflow/react

import "@arronqzy/react-blueprint/blueprint.css";

使用

蓝图画布

import { useState } from "react";
import { BluePrintReactRoot, BlueprintGraph } from "@arronqzy/react-blueprint";
import "@arronqzy/react-blueprint/blueprint.css";

function BlueprintEditor() {
  const [graph, setGraph] = useState(() => BlueprintGraph.empty());

  return (
    <BluePrintReactRoot
      graph={graph}
      onGraphChange={setGraph}
      selectedNodeId={null}
      onSelectNode={() => {}}
    />
  );
}

文档转可执行图

import { documentToRunnableGraph } from "@arronqzy/react-blueprint";

const runnable = documentToRunnableGraph(document, { libraryNameById });

调试会话

import { useBlueprintDebugSession } from "@arronqzy/react-blueprint";

const debug = useBlueprintDebugSession({
  graph,
  blueprintId,
  blueprintName: "我的蓝图",
  resolveLibraryBlueprint,
  onViewScopeUpdate: (ids, scope) => { /* 回写视图 Scope */ },
});

页面生命周期（与视图集成）

import { useBlueprintPageLifecycle } from "@arronqzy/react-blueprint";

useBlueprintPageLifecycle({
  graph,
  active: blueprintOpen,
  onViewScopeUpdate,
  resolveLibraryBlueprint,
});

主要导出

| 模块 | 说明 | |------|------| | BluePrintReactRoot | 蓝图主画布 | | BlueprintGraph | 图数据结构（src/graph） | | documentToRunnableGraph | 文档 → 运行时图 | | useBlueprintDebugSession | 调试工具栏与会话 | | useBlueprintPageLifecycle | 挂载/卸载时启停蓝图 | | BlueprintNodeConfigSidebar | 节点配置侧栏 | | BlueprintPanelToolbar | 蓝图工具栏 | | blueprint-library-db | 蓝图库 IndexedDB API |

依赖关系

• @arronqzy/blueprint-dsl — 节点定义与执行引擎
• @arronqzy/react-rx-store — 与画布状态订阅
• @arronqzy/ui — UI 组件

许可证

ISC