gooflow设计器API说明书

1、花生米 AJAX-UI 系列之:基于 JQUERY 的 WEB 在线流程图设计器 GOOFLOW0.4版(2013-10-19)特点 跨浏览器，可兼容IE7-IE10, FireFox, Chrome, Opera等几大内核的浏览器，且不需要浏览器 再加装任何控件。 多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流 程图的 B/S 系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/ 接收能被本插件解析的 JSON 格式数据即可.所以本插件可用于不同的服务器语言建立的后台上. 跨领域:流程图设计器不止用在电信领域,在其它需要 IT 进行技术支持的领域中都有重大作用.以下从纯技术实现层面具体描述: 页面顶部栏、左边侧边栏均可自定义； 当左边的侧边栏设为不显示时,为只读状态,此时的视图区可当作是一个查看器而非编辑器。 侧边工具栏除了基本和一些流程节点按钮外,还自定义新的节点按钮,自定义节点都可以有自有的图 标、类型名称,定义后在使用可可在工作区内增加这些自定义节点。 顶部栏可显示流程图数据组的标题,也可提供一些常

2、用操作按钮。 顶部栏的按钮,除了撤销、重做按钮外,其余按钮均可自定义点击事件。 可画直线、折线；折线还可以左右/上下移动其中段。 具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。 具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。 能直接双击结点、连线、分组区域中的文字进行编辑 在对结点、连线、分组区域的各种编辑操作,如新增/删除/修改名称/重设样式或大小/移动/标注时, 均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。 具有操作事务序列控制功能,在工作区内的各种有效操作都能记录到一个栈中,然后可以进行撤销 (undo()或重做(redo()，像典型的C/S软件一样。 0.4 版中，加入了只导出在初始载入后被编辑的流程图中,只作了增删改等变更的元素，这样可用于用 户快速存储，只保存本次变更过的内容，不用重新保存整个流程。、GooFlow设计器的界面如上图所示：工作区宽度高度均为可见区的2倍，X, 丫轴的方向如图所示，于CSS样式中顶距top 和左距left是一样的；左边是流程图绘制工具

3、栏，从上至下依次为：选择指针、转换连接线、开始节点、结束节点、任务节 点、自动节点、决策节点、状态节点、扩展附加节点、分支结点、聚合结点、复合子流程结点；最后一个 不是节点，而是节点连线编辑与分组区域编辑两种工作区状态的切换开关，当切换至分组区域编辑后，只 能操作分组区域块，节点与连线都被锁定；反之即然。顶部是展示流程图标题和放置一些功能按钮的操作栏，这些按钮除了系统自带的外，还可由用户自定 义。如果初始化中设置不要左边工具栏和顶部的操作按钮，则该UI就变成了一个流程图查看/跟踪器。二GooFlow设计器的工作区元素n&wFlow 1Q E H 3 空色开始节点、结束节点为圆形，复合节点是绿色，其余结点均是淡蓝色圆角矩形，双击节点中的文字，可直 接进行编辑；转换连线和直接和中段可上下移动的折线、中段可左右移动的折线共三种样式，双击线条可直接编辑线条 的文字说明内容；分组区域需要左下角的开关被按下后才可编辑，有四种随机颜色，点击左上角的圆形图标后可改变颜色， 双击文本可直接编辑。节点被选中时的样子：Q node-3*连线被选中时的样子：分组区域变为可操作时的样子:三、GooFlow类的构

4、造函数function GooFlow(bgDiv,property)传参:bgDiv： JQUERY对象，要渲染的DOM，必须含有ID。Property 是详细的初始化参数： width： UI 的宽度;height： UI 的高度;initNum：计算默认ID值的起始SEQUENCE，默认不填时为1；haveHead： BOOL 值,是否需要展示标题及顶部按钮的顶部栏;initLabelText:初始化时标题的内容,默认不填时为newFlow_1;haveTool： BOOL 值，是否需要左边的工具栏(这决定了渲染完成后是编辑模式还是纯浏览模式) useOperStack： BOOL值，决定了是否要用事务序列管理工作区内的操作事务，选TRUE的话， 将开启正常使用撤销undo和重做redo的功能，该设定只在可编辑状态时有效。toolBtns： 一个数组，决定了左边的工具栏中，除了基本的结点连线按钮图标外，还有哪些类型 的结点；具体写法如：rtask,node,chat,state,plug。数组中每个单元就是这些结点类型的 名称，可用系统中已给的，也可自定义，但自定义一个类型nam

5、e时，需要定义其CSS样式 类.ico_name。例如：.ico_plugbackground:url(img/gooflow_icon.png) no-repeat -135px -45px headBtns :字符串数组，决定了顶部栏的按钮从左至右依次都排了哪些类型的按钮，如:new,open,save,undo,redo,reload；如果 haveHead二false，则该定义无效。注意: 除了这两个分别用来撤销操作，重做操作的按钮外，其余按钮点击时方法都需要自定义；数组中每个 单元就是这些按钮的名称，可用系统中已给的 new,open,save,reload，也可自定义，但自定 义一个类型name时，需要定义其CSS样式类.ico_name。例如：.GooFlow .ico_openbackground:url(img/gooflow_icon.png) no-repeat -19px 1pxhaveGroup： BOOL 值，决定了是否有节点连线编辑与分组区域编辑两种工作区状态的切换开 关。(注：以下加粗的内容均为使用该UI插件者最关心的部分，即组成流程图数据本身的部分！)

6、属性名称作用$id装载整个UI的DOM对象的ID。$bgDiv最父框架的DIV。$tool左侧工具栏JQ对象。属性名称作用$head顶部栏标题标签及工具栏按钮。$title载入的流程图的名称。$nodeRemark左侧工具栏中每一种结点或按钮的说明文字,JSON格式,key为按钮类型名,value 为用户自定义文字说明。$nowType当前要绘制的对象类型，开始时为“cursor”，即不绘制任何兀素，只是作为鼠 标指针进行元素选定。$lineData=转换线数据Map集，以id为key,value为详细数据JSON对象。$lineCount=0转换线数据的数量。$nodeData=节点数据Map集，以id为key,value为详细数据JSON对象。$nodeCount=0节点数据的数量。$areaData=分组区数据Map集，以id为key,value为详细数据JSON对象。$areaCount=0分组区数据的数量。$lineDom=转换线DOM展示对象Map集，以id为key,value为详细在DOM对象。$nodeDom=节点JQ展示对象Map集，以id为key,value为详细在

7、JO对象。$areaDom=分组区JQ展示对象Map集，以id为key,value为详细在JO对象。$max计算默认ID值的起始SEQUENCE，默认不填时为1。$focus当前被选定的结点/转换线ID，如果没选中或者工作区被清空，则为“。$cursor鼠标指针在工作区内的样式，初始时为default。$editable当前工作区是否可编辑，即是编辑模式还是仅浏览模式。$workArea装载结点/线条/分组区域的工作区。$draw画矢量线条的容器，处于工作区中。$group仅用来装配分组区域DOM兀素的容器，处于工作区中。$ghost专门用在移动、重置大小等操作时，给用户操作的半透明浮动区。$textArea双击操作对象后出现的浮动文本域，用来写重命名方法setName所需的新名称 传参。$lineMove操作移动折线的中段时用到的浮动DIV$lineOper选定一条转换线后出现的浮动操作栏，有改变线的样式和删除线等按钮。属性名称作用以下是当初始化的参数property.useOperStack二true且$editable二true时，才存在的属性：$undoStack=“撤销操作”

8、栈。$redoStack=重做操作栈。$isUndo事务操作标志位，内部调用$deletedltem=在流程图的编辑操作中被删除掉的兀素ID集合，兀素ID为KEY,兀素类型（node,line.area）为 VALUE五、GooFlow对象供使用者调用的方法集方法名称作用setNodeRemarks(remark)设定左侧工具栏中每一种结点或按钮的说明文字，传参是JSON格 式,key为按钮类型名,value为用户自定义文字说明。switchToolBtn(type)切换左边工具栏按钮，传参type表示切换成哪种类型的按钮addNode(id,json)增加一个结点，传参json内容结构与$nodeData的每个属性单元一 样。getItemInfo(id,type)根据id这个KEY,和要获取的数据类型type（有”node”,”line”,”area”三种取值），返回相应的结点json 数据单兀blurItem()取消所有结点/连线被选定的状态focusItem(id,bool)选定某个结点/转换线；传参bool:TRUE决定了要触发选中事件， FALSE则不触发选中事件，多用在程

9、序内部调用。moveNode(i d,l eft,top)移动一个结点到一个新的位置setName(id,name,type)设置结点/连线/分组区域的文字信息；传参id为序列，name为新 的名称，type为更名对象的数据类型（有”node”,”line”,”area”三 种取值）resizeNode(id,width,height)重新设置结点的尺寸，开始/结束类型的结点不支持该方法delNode(id)删除结点setTitle(text)设置流程图的名称loadData(data)载入一组数据JSON格式的流程图数据，传参data中有 title,nodes,lines,areas四个KEY的数据，还有一个可选属性数 据initNum： ID起始序列号最大数字+1由于绘制的新单元 的ID都是按一定序列号及规则自动生成的，为了防止新载入的方法名称作用数据的ID与编辑时新加入的ID值有重复,将给设计器对象对于 新生成单元的ID序列一个新的起始序列号;如果传参JSON中 没有这个属性，也可以在调用loadData方法前修改设计器对 象的$max属性值（其实loadData方法执行时会检查传参中 如果有initNum时，将自动给设计器对象的$max赋上此值）； nodes,lines,areas 者B为一组

《gooflow设计器API说明书》由会员cl****1分享，可在线阅读，更多相关《gooflow设计器API说明书》请在金锄头文库上搜索。