基于canvas的流程编辑器
今年由于项目上需要给客户的流程管理系统进行升级，其中包含流程的可视化。于是在网上找一些可以用的轮子，考察了D3,js、GooFlow.js、G6-Editor等工具后，发现D3,js学习成本太高，G6-Editor功能基本够用，但是不能放大缩小图形和移动连接线是硬伤，而且GooFlow.js和G6-Editor目前已经闭源，于是就决定自己试着写一个流程编辑器。
由于之前画流程图基本使用的都是Visio，所以编辑器的操作风格基本和Visio一致，也吸收了一些G6-Editor的操作风格。
HTML内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="assets/img/favicon.jpg">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/editor.css" type="text/css" />
</head>
<body>
<div style="width:99%">
<div id="toolbar" class="toolbar">
<i data-command="undo" class="fa fa-mail-reply" title="撤销"></i>
<i data-command="redo" class="fa fa-mail-forward" title="重做"></i>
<i data-command="delete" class="fa fa-trash-o" title="删除"></i>
<i data-command="save" class="fa fa-save" title="保存"></i>
</div>
<div class="row" style="width:99%">
<div class="col-md-2">
<div id="itempannel" class="itempannel">
<div class="node" data-type="node" data-shape="capsule" data-size="80*40" data-label="开始" data-color="rgba(200,255,200,1)" data-edgecolor="rgb(10,255,10,1)" >
<img draggable="false" src="assets/img/start.svg" alt="" scrset="">
</div>
<div class="node" data-type="node" data-shape="rect" data-size="100*50" data-label="常规节点" data-color="#E6F7FF" data-edgecolor="#1890FF" >
<img draggable="false" src="assets/img/normal.svg" alt="" scrset="">
</div>
<div class="node" data-type="node" data-shape="rhomb" data-size="100*80" data-label="判断" data-color="#E6FFFB" data-edgecolor="#5CDBD3" >
<img draggable="false" src="assets/img/judge.svg" alt="" scrset="">
</div>
<div class="node" data-type="node" data-shape="capsule" data-size="80*40" data-label="结束" data-color="rgba(255,200,200,1)" data-edgecolor="rgb(255,50,50,1)" >
<img draggable="false" src="assets/img/end.svg" alt="" scrset="">
</div>
</div>
</div>
<div class="col-md-7">
<div id="canvas"></div>
</div>
<div class="col-md-3">
<div id="detailpannel" class="detailpannel">
<div><b>属性详情</b></div>
<div id="nodedetail" style="display:none">
<div class="row">
<label class="col-sm-4 control-label">
节点名称
</label>
<div class="col-sm-8">
<input id="nodename" type="text" class="form-control" />
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label">
字体大小
</label>
<div class="col-sm-8">
<input id="fontsize_node" type="text" class="form-control" />
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label">
自定义属性
</label>
<div class="col-sm-8">
<input id="nodecustom" type="text" class="form-control" />
</div>
</div>
</div>
<div id="linedetail" style="display:none">
<div class="row">
<label class="col-sm-4 control-label">
线条名称
</label>
<div class="col-sm-8">
<input id="linename" type="text" class="form-control" />
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label">
字体大小
</label>
<div class="col-sm-8">
<input id="fontsize_line" type="text" class="form-control" />
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label">
自定义属性
</label>
<div class="col-sm-8">
<input id="linecustom" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets\js\popper.min.js"></script>
<script type="text/javascript" src="assets\js\jquery.min.js"></script>
<script type="text/javascript" src="assets\js\bootstrap.min.js"></script>
<script type="text/javascript" src="assets\js\graphEditor.js"></script>
<script type="text/javascript" src="assets\js\index.js"></script>
</body>
</html>
其中graphEditor.js就是编辑器的js文件，编辑器的画布加载在id为canvas的容器中。
index.js文件内容如下：
const data = {};
//节点格式
data.nodes = [
{
color:"rgba(200,200,255,1)",
customProperties: {
nodestyle: "11"
},
edgeColor:"#1890FF",
id: "9471a484-7a2e-4ca9-949d-6ec4b495a1a2",
index: 1,
label: "测试加载节点",
shape: "rect",
size: "100*50",
type: "node",
x: 282,
y: 222
},
{
color:"rgba(200,200,255,1)",
customProperties: {
nodestyle: "22"
},
edgeColor:"#1890FF",
id: "9471a484-7a2e-4ca9-949d-6ec4b495a1a3",
index: 2,
label: "测试加载判断",
shape: "rhomb",
size: "100*80",
type: "node",
x: 282,
y: 422,
fontSize: "12px"
}
]
//线条格式
data.lines = [
{
color:"rgba(0,0,0,1)",
customProperties: {
btnstyle: "test"
},
index: 3,
label: "测试线条1",
fontSize: "12px",
fromConOrder: 3,
source: "9471a484-7a2e-4ca9-949d-6ec4b495a1a2",
type: "line",
endPoint: { x: 81, y: 210 },
inflexionPoint: [
{ x: 282, y: 272 },
{ x: 81, y: 272 }
]
},
{
color:"rgba(0,0,0,1)",
customProperties: {
btnstyle: "test"
},
index: 4,
label: "测试线条2",
fontSize: "14px",
toConOrder: 1,
startPoint: { x: 555, y: 447 },
target: "9471a484-7a2e-4ca9-949d-6ec4b495a1a3",
type: "line",
inflexionPoint: [
{ x: 555, y: 357 },
{ x: 282, y: 357 }
]
}
]
//创建编辑器
const editor = new GraphEditor();
//编辑器加载数据
//editor.load(data);
//绑定元素容器
editor.itemPannel = 'itempannel';
//绑定详细属性栏
editor.detailPannel = 'detailpannel';
//绑定工具栏
editor.toolbar = 'toolbar';
const nodeDetail = $('#nodedetail');
const lineDetail = $('#linedetail');
const nodeName = $('#nodename');
const lineName = $('#linename');
const nodeCustom = $('#nodecustom');
const lineCustom = $('#linecustom');
const nodeFontSize = $('#fontsize_node');
const lineFontSize = $('#fontsize_line');
//选择元素事件
editor.on('selectedElement', function(e) {
if(e.element.isNode){
lineDetail.hide();
nodeDetail.show();
nodeName.val(e.element.label);
nodeFontSize.val(e.element.fontSize);
nodeCustom.val(e.element.customProperties.nodestyle);
} else if (e.element.isLine){
nodeDetail.hide();
lineDetail.show();
lineName.val(e.element.label);
lineFontSize.val(e.element.fontSize);
lineCustom.val(e.element.customProperties.btnstyle);
}
});
//点击画布事件
editor.on('click', function(e) {
if(!e.element){
nodeDetail.hide();
lineDetail.hide();
}
});
//撤销事件
editor.on('undo', function(e) {
nodeDetail.hide();
lineDetail.hide();
//console.log(e.data);
});
//重做事件
editor.on('redo', function(e) {
nodeDetail.hide();
lineDetail.hide();
//console.log(e.data);
});
//保存事件
editor.on('save', function(e) {console.log(e.data)});
nodeName.change(function(e){
updateEditor(e, 'label');
});
lineName.change(function(e){
updateEditor(e, 'label');
});
nodeFontSize.change(function(e){
updateEditor(e, 'fontSize');
});
lineFontSize.change(function(e){
updateEditor(e, 'fontSize');
});
nodeCustom.change(function(e){
updateEditor(e, 'nodestyle');
});
lineCustom.change(function(e){
updateEditor(e, 'btnstyle');
});
function updateEditor(e, name){
const property = {};
property.name = name;
property.value = $('#' +e.target.id).val();
if (editor.selectedElement){
editor.update(editor.selectedElement.id, property);
};
}
GraphEditor方法列表：
- load(data)：用于加载数据，data的结构参考index.js。
node节点的属性如下：
- update(id,property)
id：元素的编号
property：{ name: 要更新的属性名称, value：更新的值 }
GraphEditor事件列表：
- selectedElement：选中任何canvas元素触发，事件对象的element属性存放选中的元素
- click：点击canvas容器触发
- undo：撤销操作触发
- redo：重做操作触发
- save：保存操作触发，事件对象的data属性存放画布中所有的元素，编辑器对象的data属性也包含画布所有元素
GraphEditor快捷键列表：
- Delete：删除画布上的元素
- Ctrl+z：撤销
- Ctrl+y：重做
- Ctrl+s：保存
Demo下载地址：https://files.cnblogs.com/files/lixincloud/GraphEditorDemo.rar
基于canvas的流程编辑器的更多相关文章
- 最好用的流程编辑器bpmn-js系列之基本使用
最好用的流程编辑器bpmn-js系列文章 BPMN(Business Process Modeling Notation)是由业务流程管理倡议组织BPMI(The Business Process M ...
- 基于canvas的二维码邀请函生成插件
去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...
- 基于NoCode构建简历编辑器
基于NoCode构建简历编辑器 基于NoCode构建简历编辑器,要参加秋招了,因为各种模版用起来细节上并不是很满意,所以尝试做个简单的拖拽简历编辑器. 描述 Github | Resume DEMO ...
- Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 基于Activiti的流程应用开发平台JSAAS-WF V5.3
第1章 产品概述及体系架构 1.1.概述 红迅JSAAS-WF工作流平台V5是广州红迅软件有限公司面向合作伙伴以及有IT运维团队中大型企业提供新一代的流程管理产品,它基于流行的JAVA开源技术上构建, ...
- 7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
- 微信小程序-基于canvas画画涂鸦
代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- N个富文本编辑器/基于Web的HTML编辑器
转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...
随机推荐
- 前端之CSS基础及使用方法
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- ssm配置文件
mybatis配置文件SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8"?> <!DO ...
- BT面板安装php报错configure: error: C preprocessor “/lib/cpp” fails sanity check
使用宝塔面板安装扩展时已经显示添加安装成功了,待我刷新浏览器之后没有安装成功.看了一下执行日志. 缺少必要的C++库,如下命令重装解决. yum reinstall glibc-headers gcc ...
- C++学习笔记-预备知识
1.1 C++简介 C++融合3种不同的编程方式:C语言代表的过程性语言.C++在C语言基础上添加的类代表的面向对象语言.C++模板支持的广泛编程. 1.2 C++简史 1.2.1 C语言 Ritch ...
- 用到的Dos命令总结 持续更新
1.xcopy命令:复制的扩展命令 常用参数:/s:复制空文件夹 不使用可能会造成文件混乱 /y忽略覆盖提示 使用/y会直接覆盖全部 例子:xcopy lark-UI\dist C:\U ...
- Vue中插槽指令
08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...
- phpstudy后门rce批量利用脚本
写两个 一个批量检测的 一个交互式shell的 暂时py 图形化的qt写出来..有点问题 后门包 : GET / HTTP/1.1Host: 127.0.0.1User-Agent: Mozill ...
- 02 【PMP】项目管理系统、PMIS、工作授权系统、配置管理系统、变更管理
PMBOK融会贯通:盘点八大系统<项目管理系统.PMIS.工作授权系统.配置管理系统.变更管理> 一. PMBOK相关系统: 工作系统作为事业环境因素,提高或限制项目管理的灵活性,并 ...
- B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...