FishTopo

FishTopo是通用的页面绘图、图形展示库，FishTopo能支持各种样的页面绘图功能、数据的图形展示。

介绍说明

主要采用什么技术

基于浏览器的SVG、CANVAS、VML技术，以ZRender为底层引擎。目前支持大部分主流浏览器（包括ie8+，chrome, firefox等）。

主要的技术特性

1. 易于扩展的图形节点。 支持默认节点（形状节点、BPMN节点）、自定义节点(API绘制、Path路径绘制、组合节点、图片节点)。
2. 完整的事件封装。 支持类似于dom事件模型的事件系统
3. 智能的连线及连线组。支持节点之间的直线、折线、曲线、连线组，自动计算两点之间线段的最佳连线。
4. 强大的动画支持。 提供promise式的动画接口和常用缓动函数
5. 丰富的布局算法。 支持水平、垂直、树布局、力导向布局等
6. 内置的序列化反序列化支持

目录介绍：

    dist
    ├── fish-topo-flow.js
    ├── fish-topo-flow.min.js
    ├── fish-topo-flow.min.js.map
    ├── fish-topo-bpmn.js
    ├── fish-topo-bpmn.min.js
    ├── fish-topo-bpmn.min.js.map
    ├── fish-topo-bo.js
    ├── fish-topo-bo.min.js
    ├── fish-topo-bo.min.js.map
    ├── fish-topo-link.js
    ├── fish-topo-link.min.js
    ├── fish-topo-link.min.js.map
    ├── fish-topo-network.js
    ├── fish-topo-network.min.js
    └── fish-topo-network.min.js.map

• fish-topo-flow 通用的页面绘图组件,支持各种的页面绘图与展示功能
• fish-topo-bpmn 符合BPMN规范流程引擎的绘图组件
• fish-topo-bo 用于展示BO关系与详情
• fish-topo-link 用于两个表格之间 字段映射
• fish-topo-network 用于绘制机房网络（机架，网络，集群）

引入方式

FishTopo采用UMD方式编译 支持 script标签方式引入、amd方式引入（RequireJs）、 以及react import方式引入

script标签方式引入

在index.html中加入如下script标签

<script type="text/javascript" src="../dist/fish-topo-flow.min.js"></script>

暴露全局变量fishTopoFlow

RequireJs方式引入

define([
	'hbs!./DemoTpl.html',
	'../../../../dist/fish-topo-flow.min.js'
], function(FlowExampleTpl, fishTopoFlow) {

react import方式引入

import fishTopoFlow from "../../fish-topo-flow";

componentDidMount() {
        var layout = fishTopoFlow.layout;
    var node = fishTopoFlow.node;
    var canvasDom = document.getElementById("flowIns");
    this.fishTopo = fishTopoFlow.init(canvasDom, {
      deleteShow: true,
      linkShow: true,
      linkModify: true,
      roam: false
    });
    this.fishTopo.setBackground("gridLine");
  
    self.fishTopo.on("dblclick", function(e) {
        ...
    }
}

render() {
    ...
    
    <div id="flowIns" style={{ height: 600}} />
    ...
}

安装编译

环境准备

• nodejs

安装gulp命令

npm install -g gulp

下载工程

git clone http://[email protected]/fish/fish-topo.git

安装模块

cd fish-topo/
npm install

编译输出

gulp compile

使用示例

FishTopoFlow

FishTopoBpmn

FishTopoBo

FishTopoLink

FishTopoNetwork

优秀案例

优秀案例

License

FishTopo是采用LGPLV3协议