1.0.0-alpha.6 • Published 4 years ago
@talkweb/editor-bpmn v1.0.0-alpha.6
EDITOR - BPMN
新的流程设计器是基于阿里Antv开源的G6前端图可视化库开发的,这个可视化库使用的是canvas,而不是以前老版本bpm基于svg的实现,新的流程设计器会使用vue进行封装成独立的组件,和老版本的编辑器相比,会提供更好的兼容性和扩展性,在提供基础的图形编辑功能上会添加很多辅助功能如自动对齐、辅助线、快捷键等方便图形绘制。
Install
npm
npm i @talkweb/editor-bpmn -S
yarn
yarn add @talkweb/editor-bpmn
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@talkweb/editor-bpmn/lib/index.css"/>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/@talkweb/editor-bpmn/lib/index.js"></script>
Usage
import Vue from 'vue';
import Editor from '@talkweb/editor-bpmn';
import '@talkweb/editor-bpmn/lib/index.css';
import App from './App.vue';
Vue.use(Editor);
new Vue({
el: '#app',
render: h => h(App)
});
<template>
<editor-bpmn />
</template>
Features
Shapes
- 👌Task
- 👌Gateway
- 👌Middle event
- 👌End event
- 👌Start event
- 👌Sub process
- 👌Rect
- 👌Circle
- 👌Diamond
- 👌Ellipse
- 👌Sub process
- 👌Cylinder
- 👌Internal storage
- 👌Parallelogram
- 👌Document
Core functions
- 👌Drag shapes
- 👌Connection shapes
- 👌Shape attribute editing
Auxiliary functions
- 👌Resize
- 👌Copy
- 👌Cut
- 👌Paste
- 👌To front
- 👌To back
- 👌Clear
- 👌zoom in
- 👌zoom out
- 👌Mini map
- 👌Quick graphics adding
- 👌Align edge
- 👌Dblclick to edit shape and edge
- 👌Edge editing
- 👌Multiple select
Animation
- 👌Edge out animation
Todo
- ❗️add shape icon
- ❗️drag edge label
- ❗️label align
- ❗️add group
- ❗️add pool
- ❗️modify canvas size
1.0.0-alpha.6
4 years ago
1.0.0-alpha.5
4 years ago
1.0.0-alpha.4
4 years ago
1.0.0-alpha.3
4 years ago
1.0.0-alpha.2
4 years ago
1.0.0-alpha.1
4 years ago