#ReactFlowMBT

#项目目标

• 用 MoonBit 实现可复用的流程图核心：边路径几何、图变更与查询、交互状态机。
• 提供稳定的 JSON 文本边界，让任意 JS/TS 宿主（本项目附带 React 宿主）复用同一套行为。
• 用共享场景目录和上游数值夹具约束行为，保证与 React Flow 的兼容性可验证、可回归。

#功能特性

#环境要求

• MoonBit 工具链：moonc >= 0.10.16（本项目验证使用 moon 0.1.20261028 / moonc 0.10.18）。
• Node.js 22 + npm（仅运行 React 宿主、单元测试和端到端测试时需要）。

#安装

moon add 2d5rrr333/reactflow

import {
  "2d5rrr333/reactflow@0.1.1",
}

#快速开始：MoonBit

moon run cmd/main

fn main {
  let nodes = [
    @graph.FlowNode::at("a", 0.0, 0.0),
    @graph.FlowNode::at("b", 240.0, 120.0),
  ]
  let edges = [@graph.FlowEdge::between("a", "b", "a-b")]
  let nodes = @graph.apply_node_changes(
    nodes,
    [@graph.NodeChange::Position(id="a", x=40.0, y=60.0, dragging=false)],
  )
  println("node a: (\{nodes[0].x}, \{nodes[0].y})")
  let path = @geometry.bezier_path(
    @geometry.Point::{ x: 100.0, y: 80.0 },
    @geometry.Right,
    @geometry.Point::{ x: 300.0, y: 200.0 },
    @geometry.Left,
    0.25,
  )
  println("edge path: \{path.path}")
  let editor = @interaction.Editor::fresh(nodes, edges)
  let step = @interaction.pointer_down(
    editor,
    40.0,
    60.0,
    0,
    "",
    false,
    false,
    "",
  )
  println("mode after pointer down: \{step.editor.mode}")
}

#快速开始：React 宿主

# 1. 构建 MoonBit JS 模块
moon build --target js

# 2. 安装宿主依赖并启动演示
npm ci --prefix host
npm run dev --prefix host

import { ReactFlow, Background, Controls, MiniMap } from "./host/src"

export function Editor() {
  return (
    <ReactFlow
      defaultNodes={[
        { id: "a", position: { x: 40, y: 60 }, data: { label: "Start" }, width: 100, height: 40 },
        { id: "b", position: { x: 300, y: 160 }, data: { label: "End" }, width: 100, height: 40 },
      ]}
      defaultEdges={[{ id: "a-b", source: "a", target: "b", type: "smoothstep" }]}
    >
      <Background />
      <Controls />
      <MiniMap />
    </ReactFlow>
  )
}

#测试与持续集成

moon check --deny-warn
moon test --deny-warn
moon build --target js --deny-warn

bash scripts/verify.sh

#许可证与上游来源