# x6-editor-vue

> 用vue开发的基于antv/x6打造的流程图编辑器，支持自定义节点，导入数据，导出数据，保存xml文件等等

Latest version **1.1.5** (published 2021-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install x6-editor-vue
pnpm add x6-editor-vue
yarn add x6-editor-vue
bun add x6-editor-vue
```

## 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.1.5 |
| Published | 2021-01-25 |
| First published | 2021-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 5.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | joker-diff |
| Maintainers | joker-diff |
| Keywords | x6, vue, antv, editor, flowable, 编辑器, 流程图, 拓扑图 |

## Links

- npm: https://www.npmjs.com/package/x6-editor-vue
- npm.io page: https://npm.io/package/x6-editor-vue

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [@antv/x6](https://npm.io/package/@antv/x6.md) ^1.11.0
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.0
- [dom-to-image](https://npm.io/package/dom-to-image.md) ^2.6.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.1.5 (latest) — 2021-01-25
- 1.1.4 — 2021-01-21
- 1.1.3 — 2021-01-20
- 1.1.2 — 2021-01-14
- 1.1.1 — 2021-01-13
- 1.1.0 — 2021-01-13
- 1.0.4 — 2021-01-13
- 1.0.3 — 2021-01-12
- 1.0.2 — 2021-01-12
- 1.0.1 — 2021-01-12
- 1.0.0 — 2021-01-12

## README

# x6-editor-vue

## 安装
```
npm install x6-editor-vue -S
```

### 快速开始
```
import Vue from 'vue'
import Element from 'element-ui'

import x6EditorVue from 'x6-editor-vue'
import 'x6-editor-vue/lib/x6-editor-vue.css'
Vue.use(x6EditorVue)
```

### 组件使用
```
<x6-editor-vue />
//or
<x6-editor-vue></x6-editor-vue>
```

### Events
| 事件名称 | 说明 | 回调参数 |
| ------------ | ------------ | ------------ |
| saveData | 保存流程数据 | data |
| exportXml | 导出流程数据 | data |
| exportImg | 导出图片base64数据,常常配合toDataUrl属性使用，如果toDataUrl为false方法无效 | data |


### Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 示例 |
| ------------ | ------------ | ------------ | ------------ | ------------ | ------------ |
| removeGroups | 移除原始分组，常常配合groups使用，如果其属性为空，该属性无效 | Boolean | - | false | - |
| groups | 新增分组节点 | Array | - | - | [{name: 'keyword', title: '组名称'}] |
| removeShapes | 移除原始图形，常常配合shapes使用，如果其属性为空，该属性无效 | Boolean | - | false | - |
| shapes | 新增图形 | object | - | - | [cell](https://x6.antv.vision/zh/docs/tutorial/intermediate/custom-node "cell") |
| toDataUrl | 导出图片为base64数据的url | Boolean | - | false | - |
| grid | 开启画布栅格，支持原生x6的[grid](https://antv-x6.gitee.io/zh/docs/api/graph/grid "grid")配置项 | Boolean/Object | - | false | - |
| background | 开启画布背景，支持原生x6的[background](https://antv-x6.gitee.io/zh/docs/api/graph/background "background")配置项 | Boolean/Object | - | false | - |
| snapline | 开启对齐线功能，支持原生x6的[snapline](https://antv-x6.gitee.io/zh/docs/api/graph/snapline "snapline")配置项 | Boolean/Object | - | false | - |

### Slot
| name | 说明 |
| ------------ | ------------ |
| StartNode | 开始节点自定义元素面板，参数为 { cell } |
| EndNode | 结束节点自定义元素面板，参数为 { cell } |
| Edge | 连接线自定义元素面板，参数为 { cell } |
| AutoNode | 自动任务节点自定义元素面板，参数为 { cell } |
| UserNode | 人工任务节点自定义元素面板，参数为 { cell } |
| Gateway | 网关节点自定义元素面板，参数为 { cell } |

```
//示例：
<x6-editor-vue>
    <template slot='StartNode' slot-scope="{cell}">
        //do something
    </template>
</x6-editor-vue>
```
### Hotkey
| hotkey | 功能说明 |
| ------------ | ------------ |
| ctrl+alt+n | 清除 |
| ctrl+s | 保存 |
| ctrl+a | 全选 |
| ctrl+z | 撤销 |
| ctrl+y | 重做 |
| ctrl+c | 复制 |
| ctrl+v | 粘贴 |
| ctrl+f | 置顶 |
| ctrl+b | 置后 |
| delete/backspace | 删除 |
| ctrl+UpArrow | 向上平移 |
| ctrl+DownArrow | 向下平移 |
| ctrl+LeftArrow | 向左平移 |
| ctrl+RightArrow | 向右平移 |

## 注意
```
1、node版本不能低于14.0.0
2、需要安装vue、vue-cli脚手架
3、需要安装element-ui
```

## 更新日志
##### 1.1.5
。移除对eslint、vue-router的依赖

##### 1.1.4 
。优化元素面板高度算法
。优化页面自适应问题
。新增配置对齐线功能

##### 1.1.3
。新增快捷键功能
。新增导出图片功能
。新增配置背景功能
。新增配置栅格功能

## 浏览器支持
Modern browsers and Internet Explorer 10+.

## LICENSE
MIT

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