https://github.com/lkiarest/flow-chart

流程图工具
https://github.com/lkiarest/flow-chart

Last synced: 23 days ago
JSON representation

流程图工具

• Host: GitHub
• URL: https://github.com/lkiarest/flow-chart
• Owner: lkiarest
• License: mit
• Created: 2016-10-11T02:14:15.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-10-31T08:41:08.000Z (about 8 years ago)
• Last Synced: 2024-11-11T08:43:25.248Z (about 1 month ago)
• Language: JavaScript
• Size: 102 KB
• Stars: 163
• Watchers: 12
• Forks: 60
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - flow-chart

README

        
# flow-chart

流程图工具

Demo演示：[https://lkiarest.github.io/flow-chart/demo/demo.html](https://lkiarest.github.io/flow-chart/demo/demo.html)

基于 jsplumb 封装一个使用十分简单的流程图处理类。

样式使用less处理

### 引入依赖文件

```

```

### 常用操作

```

Chart.ready(() => { // 初始化

    // 创建画布

    let chart = new Chart($('#div1'), {

        onNodeClick (data) { // 点击节点时触发的事件

            console.log(data);

        }

    });

    // 添加节点

    let nodeStart = chart.addNode('开始', basicX, startY, {

        class: 'node-start', // 自定义节点样式

        data: { // 节点绑定数据，在click事件中可以获取

            name: '开始',

            nodeType: 0

        }

    });

    // 添加端口

    nodeStart.addPort({

        isSource: true

    });

    // 获取所有节点

    console.log(chart.getNodes());

    // 序列化用以保存

    console.log(JSON.stringify(chart.toJson()));

    // 删除节点 - 1

    nodeStart.dispose();

    // 删除节点 - 2

    chart.removeNode(nodeStart.getId());

});

```