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 -
👌 Print -
👌 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