Flowchart React

React.js 流程图 & 流程图设计器。

安装

npm install --save flowchart-react
# 或
yarn add flowchart-react

使用

import React, {useState} from "react";
import Flowchart from "flowchart-react";
import {ConnectionData, NodeData} from "flowchart-react/dist/schema";

const App = () => {
  const [nodes, setNodes] = useState<NodeData[]>([
    {
      type: "start",
      title: "开始",
      x: 150,
      y: 190,
      id: 1604410569920,
    },
    {
      type: "end",
      title: "结束",
      x: 500,
      y: 190,
      id: 1604410572363,
    },
    {
      x: 330,
      y: 190,
      id: 1604410575428,
      title: "Joyce",
      type: "operation",
    },
    {
      x: 330,
      y: 300,
      id: 1604410591865,
      title: () => {
        return "无审核人";
      },
      type: "operation",
    },
  ]);
  const [conns, setConns] = useState<ConnectionData[]>([
    {
      source: {id: 1604410569920, position: "right"},
      destination: {id: 1604410575428, position: "left"},
      id: 1604410587907,
      type: "success",
    },
    {
      source: {id: 1604410575428, position: "right"},
      destination: {id: 1604410572363, position: "left"},
      id: 1604410590524,
      type: "success",
    },
    {
      source: {id: 1604410569920, position: "bottom"},
      destination: {id: 1604410591865, position: "left"},
      id: 1604410596866,
      type: "success",
    },
    {
      source: {id: 1604410591865, position: "right"},
      destination: {id: 1604410572363, position: "bottom"},
      id: 1604410599205,
      type: "success",
    },
  ]);

  return (
    <Flowchart
      onChange={(nodes, connections) => {
        setNodes(nodes);
        setConns(connections);
      }}
      style={{width: 800, height: 600}}
      nodes={nodes}
      connections={conns}
    />
  );
};

export default App;

Demo

github.com/joyceworks/…

API

属性

nodes: NodeData[]

节点列表。

NodeData

属性	描述	数据类型	默认值	必须
id	唯一标识	number		true
title	节点标题	string, (node: NodeData) => string		true
type	节点类型	start, end, operation		true
x	水平坐标	number		true
y	垂直坐标	number		true
payload	自定义数据	{[key: string]: unknown}		false

connections: ConnectionData[]

连接列表。

ConnectionData

属性	描述	数据类型	默认值	必须
id	唯一标识	number		true
type	连接类型	success, fail		false
source	源	{id: number, position: 'left', 'right', 'top', 'bottom'}		true
destination	目标	{id: number, position: 'left', 'right', 'top', 'bottom'}		true

readonly: boolean

是否只读——禁用拖拽、连线和只读。

style: React.CSSProperties

svg 背景样式.

Events

onChange: (nodes: NodeData[], connections: ConnectionData[]) => void

当节点删除（点击节点按删除键）、移动、取消连线（点击连线按删除键）、连线时触发。

onNodeDoubleClick: (node: NodeData) => void

双击节点时触发。

Tip: 双击编辑节点。

onDoubleClick: (event: React.MouseEvent<SVGGElement, MouseEvent>, zoom: number) => void

svg 背景双击时触发。

Tip: 双击新建节点。

function handleDoubleClick(event: React.MouseEvent<SVGGElement, MouseEvent>, zoom: number): void {
  const point = {
    x: event.nativeEvent.offsetX / zoom,
    y: event.nativeEvent.offsetY / zoom,
    id: +new Date(),
  };
  let nodeData: NodeData;
  if (!nodes.find((item) => item.type === "start")) {
    nodeData = {
      type: "start",
      title: "Start",
      ...point,
    };
  } else if (!nodes.find((item) => item.type === "end")) {
    nodeData = {
      type: "end",
      title: "End",
      ...point,
    };
  } else {
    nodeData = {
      ...point,
      title: "New",
      type: "operation",
    };
  }
  setNodes((prevState) => [...prevState, nodeData]);
}

onConnectionDoubleClick: (connection: ConnectionData) => void

双击连接时触发。

Tip: 双击编辑连接。

onMouseUp: (event: React.MouseEvent<SVGSVGElement>, zoom: number) => void

鼠标在 svg 背景弹起时触发。

Tip: 拖放一些元素来实现节点创建功能。

License

MIT © Joyceworks