# canvas-flows

> A Vue component to canvas-flows

Latest version **1.0.7** (published 2018-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvas-flows
pnpm add canvas-flows
yarn add canvas-flows
bun add canvas-flows
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-12-03 |
| First published | 2018-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | lizhili |
| Maintainers | blry |

## Links

- npm: https://www.npmjs.com/package/canvas-flows
- Repository: https://github.com/blryli/canvas-flows
- Homepage: https://github.com/blryli/canvas-flows#readme
- Issues: https://github.com/blryli/canvas-flows/issues
- npm.io page: https://npm.io/package/canvas-flows

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.11

## Recent versions

- 1.0.7 (latest) — 2018-12-03
- 1.0.6 — 2018-12-03
- 1.0.5 — 2018-11-29
- 1.0.4 — 2018-11-28
- 1.0.3 — 2018-11-22
- 1.0.2 — 2018-11-22
- 1.0.1 — 2018-11-22
- 1.0.0 — 2018-11-20

## README

# canvas-flows

> A canvas flows project

## 项目演示

[演示地址](https://blryli.github.io/canvas-flows/)

## 安装

``` Bash
npm install canvas-flows -S
```

## 使用

```js
//ES6
import canvasFlows from 'canvas-flows'
Vue.use(canvasFlows)

// require
var canvasFlows = require('canvasFlows')


// 或者直接使用script导入
<script src="https://unpkg.com/canvas-flows/dist/canvas-flows.js"></script>
```

```html
<flows v-model="config"></flows>
```

```js
<script>
export default {
  data () {
    return {
      config: {
        nodes: [
          { id: -1, name: "NEW 1" },
          { id: -2, name: "NEW 2" },
          { id: -3, name: "NEW 3" },
          { id: -4, name: "NEW 4" },
          { id: -5, name: "NEW 5" },
          { id: -6, name: "NEW 6" },
          { id: -7, name: "NEW 7" }
        ],
        sequenceFlows: [
          { sourceRef: 3, targetRef: -1 },
          { sourceRef: -1, targetRef: -2 },
          { sourceRef: -1, targetRef: -3 },
          { sourceRef: -1, targetRef: -4 },
          { sourceRef: -1, targetRef: -6 },
          { sourceRef: -2, targetRef: -5 },
          { sourceRef: -3, targetRef: -5 },
          { sourceRef: -4, targetRef: -5 },
          { sourceRef: -6, targetRef: -5 }
        ]
      }
    }
  }
}
</script>
```

### Props

|    name    |    Description   |   type   |default|
| -----------------  | ---------------- | :--------: | :----------: |
| value       | 数据 |Object| {}
| nodeWidth        | 节点默认宽度 |Number | 100
| nodeHeight        | 节点默高度 |Number | 30
| offsetX        | 节点间横向间隔 |Number | 12
| offsetY        | 节点间纵向间隔 |Number | 80
| useInputaEdit        | 是否启用编辑框 |Boolean | true
| fristNodeOnly        | 首节点唯一，即首节点不可被连接或删除 |Boolean | true
| readonly        | 展示模式(不可编辑) |Boolean | false
| finishNodes        | 已完成节点(展示模式可用) |Array | []

### Methods

|  事件名 |    说明           |   参数      |
|--------|------             |------       |
|add     |不传参数默认添加到顶级节点，传入id则从此id处向下添加节点       |    id   |
|next    |从id处向下添加子节点 |id           |
|deleteDot|删除点             |id           |
|deleteLine|删除线            |id           |

### Events

|  事件名 |    说明           |   回调参数      |
|--------|------             |------          |
|check  |单击节点时触发        |-- 节点ID       |
|link  |连接节点时触发        |-- {form: name, to: name}       |
|edit    |双击节点时触发       |   节点对象          |
|delete|删除节点时触发         |  节点ID           |

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