0.5版本中,结点的样式不再受到原有程序的限制，所有样式均默认为淡蓝色长方形；如果要指定为圆形，可在初始化时定义结点类型为”原有类型”+” round”；如果要指定为复合结点，则可在初始化时定义结点类型为”原有类型”+” mix”。”原有类型”+” myType”中的myType可为自己写的一种特殊样式类.

 

headBtns：字符串数组,决定了顶部栏的按钮从左至右依次都排了哪些类型的按钮,如:["new","open","save","undo","redo","reload"]；如果haveHead=false，则该定义无效。注意:除了这两个分别用来撤销操作，重做操作的按钮外，其余按钮点击时方法都需要自定义；数组中每个单元就是这些按钮的名称，可用系统中已给的"new","open","save","reload"， 也可自定义，但自定义一个类型name时,需要定义其CSS样式类.ico_name。例如：

.GooFlow .ico_open{background:url(img/gooflow_icon.png) no-repeat -19px 1px}

}

haveGroup：BOOL值，决定了是否有节点连线编辑与分组区域编辑两种工作区状态的切换开关。

 

 

[四、GooFlow对象的内部属性]

（注：以下加粗的内容均为使用该UI插件者最关心的部分，即组成流程图数据本身的部分！）

属性名称 作用

$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为详细在JO对象。

$areaDom={} 分组区JQ展示对象Map集，以id为key,value为详细在JO对象。

$max 计算默认ID值的起始SEQUENCE，默认不填时为1。

$focus 当前被选定的结点/转换线ID,如果没选中或者工作区被清空,则为""。

$cursor 鼠标指针在工作区内的样式，初始时为default。

$editable 当前工作区是否可编辑，即是编辑模式还是仅浏览模式。

$workArea 装载结点/线条/分组区域的工作区。

$draw 画矢量线条的容器，处于工作区中。

$group 仅用来装配分组区域DOM元素的容器，处于工作区中。

$ghost 专门用在移动、重置大小等操作时，给用户操作的半透明浮动区。

$mpFrom 编辑模式下选中线以后，出现在起点的小框，用来移动以变更要连接的起始结点

$mpTo 编辑模式下选中线以后，出现在终点箭头处的小框，用来移动以变更要连接的到达结点

$textArea 双击操作对象后出现的浮动文本域，用来写重命名方法setName所需的新名称传参。

$lineMove 操作移动折线的中段时用到的浮动DIV

$lineOper 选定一条转换线后出现的浮动操作栏，有改变线的样式和删除线等按钮。

//以下是当初始化的参数property.useOperStack=true且$editable=true时,才存在的属性:

$undoStack=[] “撤销操作”栈。

$redoStack=[] 重做操作栈。

$isUndo 事务操作标志位，内部调用

$deletedItem={} 在流程图的编辑操作中被删除掉的元素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则不触发选中事件，多用在程序内部调用。

moveNode(id,left,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都为一组{key:value}式的Map数据，内容结构分别与GooFlow对象属性中的$nodeData,$lineData,$areaData一致.

loadDataAjax(para) 用AJAX方式，远程读取一组数据;

参数para为JSON结构，与JQUERY中$.ajax()方法的传参一样

需要后台异步返回JSON格式的msg结果,其内容格式与loadData方法的传参一样。

exportData() 把画好的结束导出到一个本函数返回的变量中(其实也可以直接访问GooFlow对象的$nodeData,$lineData,$areaData这三个JSON属性)

exportAlter() //只把本次编辑流程图中作了变更(包括增删改)的元素导出到一个变量中,以方便用户每次编辑载入的流程图后只获取变更过的数据

transNewId(oldId,newId,type) 变更元素的ID,一般用于快速保存后,将后台返回新元素的ID更新到页面中;type为元素类型(节点,连线,区块)

clearData() 清空工作区及已载入的数据

destrory() 销毁自己

addLine(id,json) 增加一条线，传参json内容结构与$lineData的每个属性单元一样。

setLineType(id,newType,M) 重新设置连线的样式. 传参newType的取值有："sl"直线, "lr"中段可左右移动型折线, "tb"中段可上下移动型折线。

M为可选传参，当newType是"lr"或者"tb"时，中段折线的Y值或X值，默认不传

setLineM(id,M) 设置折线中段的X坐标值（可左右移动时）或Y坐标值（可上下移动时）；直线不支持此方法

delLine(id) 删除转换线

markItem(id,type,mark) //用颜色标注/取消标注一个结点或转换线，常用于显示重点或流程的进度。

//这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法，实际运用中可用于跟踪流程的进度。

//传参：id是操作单元对象唯一序列号;type是操作单元类型(“node”或者”line”,分组区域不支持此方法);mark为布尔值,表示是否标注/取消标注某个ID值的数据单元对象

moveLinePoints(lineId, newStart, newEnd) //变更连线两个端点所连的结点

//参数：要变更端点的连线ID，新的开始结点ID、新的结束结点ID；如果开始/结束结点ID是传入null或者""，则表示原端点不变

addArea(id,json) 增加一个分组区域，传参json内容结构与$areaData的每个属性单元一样。

moveArea(id,left,top) 移动分组区域到新的位置上.

delArea(id) 删除分组区域

setAreaColor(id,color) 设置分组区域的颜色,传参color为颜色样式,只有”red”,”yellow”,”blue”,”green”四种取值

resizeArea(id,width,height) 重新设置区分组区域的尺寸

 

reinitSize(width,height) 重构整个流程图设计器的宽高，在浏览器窗口大小改变或者父容器宽高改变时，执行这个方法能让设计器重新适应新的宽高显示。

//以下是当初始化的参数property.useOperStack=true时,才存在的方法:

pushOper(funcName,paras) 仅供内部方法调用的方法:把对工作区内的数据单元编辑操作(增/删/改/重命名/移动/标注等)加入整条管理栈中,好进入撤销/重做的控制；

注意:将为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存。

pushExternalOper

(func,jsonPara) //将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制，一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制；

//传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参或者数据,由JSON对象或数组带入所有要传的信息；

//提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper。

undo() 撤销最近一次操作

redo() 重做最近一次被撤销的操作

[六、GooFlow对象中一些特殊的数据格式]

1、节点的数据集:

this.$nodeData={

node_1:{...},node_2:{...},

node_3:{...}

}

其中,node_1至node_3相当于ID,value{...}结构如下:

{

name:节点的显示名称

left:节点相对于工作区的左边距

top:节点相对于工作区的顶距

width:节点宽度

height:节点高度

type:节点类型

marked:布尔值,表示是否已被用橙色标注

alt:布尔值,表示在编辑模式下是否被用户变更过,默认都是undefined未变更

}

 

2、连线的数据集:

this.$lineData={

node_1:{...},node_2:{...},

node_3:{...}

}

其中,node_1至node_3相当于ID,value{...}结构如下:

{

name:连线的显示名称

from:连线的开始节点ID

to:连线的结束节点ID

type:连线类型,取值有”sl”直线,”lr”中段可左右移动的折线,”tb”中段可上下移动的折线

M:当type=”lr”时,为中段的相对于工作区的X坐标值,当type=”tb”时,为中段的相对于工作区的Y坐标值.

marked:布尔值,表示是否已被用橙色标注

alt:布尔值,表示在编辑模式下是否被用户变更过,默认都是undefined未变更

}

 

3、分组区的数据集:

this.$areaData={

node_1:{...},node_2:{...},

node_3:{...}

}

其中,node_1至node_3相当于ID,value{...}结构如下:

{

name:分组区的显示名称

left:分组区相对于工作区的左边距

top:分组区相对于工作区的顶距

width:分组区宽度

height:分组区高度

color:分组区的颜色,有”red”,”yellow”,”blue”,”green”四种

alt:布尔值,表示在编辑模式下是否被用户变更过,默认都是undefined未变更

}

 

左侧工具栏按钮注释定义例子：

nodeRemark={

cursor:"选择指针",

direct:"转换连线",

start:"开始结点",

end:"结束结点",

task:"任务结点",

node:"自动结点",

chat:"决策结点",

state:"状态结点",

plug:"附加插件",

fork:"分支结点",

"join":"联合结点",

complex:"复合结点",

group:"组织划分框编辑开

}

 

关于节点类型：