之前会存在很多选项,但是由于开发原因都舍弃了,最后用Activiti这个来开发,为什么呢,这个可以直接生产XML内容,功能也有很多,但是这个工具集成的东西很多,使用的是angularjs开发的,由于我对angularjs的开发,我认为还是可以的,目前正在修改里面的代码,针对目前的交互和功能进行修改。

前端的一些插件是可以画流程图,但是太简单,而且即使能开发的很复杂,但是时间不允许。

这个控件需要前后端的开发都得按照要求来。

关于流程图的开发

本来是在这个样子,现在要求是下面这个样子:

 

1、从最简单的入手,画布的背景改成点点的

在css中 找到 ORYX_Editor,然后添加样式:

background: linear-gradient(white 14px, transparent 0px) 0% 0% / 15px 15px, linear-gradient(90deg, rgb(151, 151, 151) 1px, transparent 0px) 0% 0% / 15px 15px white;

2、画布的缩小与方法

 

我把原来的逻辑进行修改了

关于流程图的开发

根据传的值进行修改大小。

3、鼠标在画布区域鼠标滚动,进行方法和缩小

关于流程图的开发

最后这个方法return false,是为了滚动的时候,不让滚动条进行移动。

4、编辑器的配置,我准备放在前端做,因为这个都是固定的,不需要去储存在后端,而且不会去修改,所以放在前端,后面需要做定制化功能的时候,是需要放在后端的。目前先放在前端。

配置中的:

关于流程图的开发

如果说需要替换图标,可以在这替换,在html中吧SVG的内容的path进行替换,这样就可以替换,但是工程量较大,交互的工程量也大,所以没有去这么做,图标还是按照老的一套去用。

 

目前是修改了这些,后续会继续开发,尽量跟交互保持一致,目前先这么多。

分类:

技术点:

相关文章: