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