# fish-topo-flow-test

> javascript topo for ztesoft

Latest version **0.0.1** (published 2019-12-03) · LGPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install fish-topo-flow-test
pnpm add fish-topo-flow-test
yarn add fish-topo-flow-test
bun add fish-topo-flow-test
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-12-03 |
| First published | 2019-12-03 |
| Weekly downloads | 0 |
| License | LGPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | whalecloud-developer |

## Links

- npm: https://www.npmjs.com/package/fish-topo-flow-test
- Repository: http://gitlab.ztesoft.com/fish/fish-topo
- Homepage: http://fish.ztesoft.com/fish-show/
- npm.io page: https://npm.io/package/fish-topo-flow-test

## Dependencies (1)

- [zrender](https://npm.io/package/zrender.md) ^3.6.3

## Recent versions

- 0.0.1 (latest) — 2019-12-03

## README

# 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标签
```js
<script type="text/javascript" src="../dist/fish-topo-flow.min.js"></script>
```
暴露全局变量`fishTopoFlow`

### RequireJs方式引入
```js
define([
	'hbs!./DemoTpl.html',
	'../../../../dist/fish-topo-flow.min.js'
], function(FlowExampleTpl, fishTopoFlow) {
```

### react import方式引入
```js
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://wang.xiaohu9@gitlab.ztesoft.com/fish/fish-topo.git

安装模块

    cd fish-topo/
    npm install

编译输出

    gulp compile


## 使用示例

[FishTopoFlow](https://fish.iwhalecloud.com/fish-topo-develop/examples/flow/index.html)

[FishTopoBpmn](http://ngweb.iwhalecloud.io/bpmn-explorer/)

[FishTopoBo](https://fish.iwhalecloud.com/fish-topo-develop/examples/bo/default.html)

[FishTopoLink](https://fish.iwhalecloud.com/fish-topo-develop/examples/link/default.html)

[FishTopoNetwork](https://fish.iwhalecloud.com/fish-topo-develop/examples/network/default.html)

## 优秀案例
[优秀案例](case.md)

## License

FishTopo是采用[LGPLV3](LICENSE)协议

---
_Source: https://npm.io/package/fish-topo-flow-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._