Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
3d134649
Z
zui
项目概览
易企天创
/
zui
大约 1 年 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3d134649
编写于
12月 24, 2019
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* improve UI of uploader.
上级
eddfa326
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
515 addition
and
347 deletion
+515
-347
docs/examples/flowchart.fbd.js
docs/examples/flowchart.fbd.js
+51
-46
docs/examples/flowchart.fsm.js
docs/examples/flowchart.fsm.js
+65
-35
docs/examples/flowchart.html
docs/examples/flowchart.html
+18
-5
docs/examples/flowchart.var.js
docs/examples/flowchart.var.js
+52
-16
src/js/flowchart.js
src/js/flowchart.js
+329
-245
未找到文件。
docs/examples/flowchart.fbd.js
浏览文件 @
3d134649
if
(
$
.
zui
.
FlowChart
)
{
var
textGenerator
=
function
(
elementType
)
{
if
(
!
elementType
.
newElementsCounter
)
{
elementType
.
newElementsCounter
=
1
;
}
return
elementType
.
name
.
substring
(
4
)
+
'
_
'
+
(
elementType
.
newElementsCounter
++
);
};
var
renderInOut
=
function
(
$node
,
elementType
,
options
)
{
var
that
=
this
;
if
(
elementType
.
hasPorts
())
{
...
...
@@ -47,6 +53,7 @@ if ($.zui.FlowChart) {
}
return
{
name
:
name
,
rest
:
name
.
indexOf
(
'
*
'
)
>
-
1
,
maxLinkCount
:
1
,
direction
:
'
in
'
,
free
:
false
...
...
@@ -61,6 +68,7 @@ if ($.zui.FlowChart) {
}
return
{
name
:
name
,
rest
:
name
.
indexOf
(
'
*
'
)
>
-
1
,
maxLinkCount
:
1
,
direction
:
'
out
'
,
free
:
false
...
...
@@ -77,54 +85,50 @@ if ($.zui.FlowChart) {
portLineLength
:
8
,
style
:
{
borderRadius
:
0
},
textStyle
:
{
padding
:
0
,
minWidth
:
120
},
text
:
function
(
elementType
)
{
if
(
!
newElementsCounter
[
elementType
.
name
])
{
newElementsCounter
[
elementType
.
name
]
=
1
;
}
return
elementType
.
displayName
.
toUpperCase
()
+
(
newElementsCounter
[
elementType
.
name
]
++
);
},
text
:
textGenerator
,
fbdModel
:
true
};
};
var
types
=
{
fbd_and
:
createModelType
(
'
AND
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_or
:
createModelType
(
'
OR
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_not
:
createModelType
(
'
NOT
'
,
'
I
'
,
'
Q
'
),
fbd_xor
:
createModelType
(
'
XOR
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_xnor
:
createModelType
(
'
XNOR
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_eq
:
createModelType
(
'
EQ
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_ne
:
createModelType
(
'
NE
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_gt
:
createModelType
(
'
GT
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_ge
:
createModelType
(
'
GE
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_lt
:
createModelType
(
'
LT
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_le
:
createModelType
(
'
LE
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_add
:
createModelType
(
'
ADD
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_sub
:
createModelType
(
'
SUB
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_mul
:
createModelType
(
'
MUL
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_div
:
createModelType
(
'
DIV
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_mod
:
createModelType
(
'
MOD
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_abs
:
createModelType
(
'
ABS
'
,
'
I
'
,
'
Q
'
),
fbd_exp
:
createModelType
(
'
EXP
'
,
'
I
'
,
'
Q
'
),
fbd_expt
:
createModelType
(
'
EXPT
'
,
'
I
'
,
'
Q
'
),
fbd_sqrt
:
createModelType
(
'
SQRT
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_ln
:
createModelType
(
'
LN
'
,
'
I
'
,
'
Q
'
),
fbd_log
:
createModelType
(
'
LOG
'
,
'
I
'
,
'
Q
'
),
fbd_max
:
createModelType
(
'
MAX
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_min
:
createModelType
(
'
MIN
'
,
'
I1,I2
'
,
'
Q
'
),
fbd_limin
:
createModelType
(
'
LIMIN
'
,
'
MI,IN,MX
'
,
'
Q
'
),
fbd_sel
:
createModelType
(
'
SEL
'
,
'
G,IN0,IN1
'
,
'
Q
'
),
fbd_ton
:
createModelType
(
'
TON
'
,
'
IN,PT
'
,
'
Q,ET
'
),
fbd_tof
:
createModelType
(
'
TOF
'
,
'
IN,PT
'
,
'
Q,ET
'
),
fbd_tp
:
createModelType
(
'
TP
'
,
'
IN,PT
'
,
'
Q,ET
'
),
fbd_rs
:
createModelType
(
'
RS
'
,
'
SET,RESET
'
,
'
Q
'
),
fbd_sr
:
createModelType
(
'
SR
'
,
'
SET,RESET
'
,
'
Q
'
),
fbd_rtrig
:
createModelType
(
'
R_TRIG
'
,
'
CLK
'
,
'
Q
'
),
fbd_ftrig
:
createModelType
(
'
F_TRIG
'
,
'
CLK
'
,
'
Q
'
),
fbd_ctu
:
createModelType
(
'
CTU
'
,
'
CU,RESET,PV
'
,
'
Q,CV
'
),
fbd_ctd
:
createModelType
(
'
CTD
'
,
'
CU,RESET,PV
'
,
'
Q,CV
'
),
fbd_ctud
:
createModelType
(
'
CTUD
'
,
'
CU,CD,RESET,LOAD,PV
'
,
'
QU,QD,CV
'
),
fbd_in
:
{
displayName
:
'
DATA_IN
'
,
FBD_AND
:
createModelType
(
'
与
'
,
'
I*
'
,
'
Q
'
),
FBD_OR
:
createModelType
(
'
或
'
,
'
I*
'
,
'
Q
'
),
FBD_NOT
:
createModelType
(
'
非
'
,
'
I
'
,
'
Q
'
),
FBD_SET
:
createModelType
(
'
设置
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_XOR
:
createModelType
(
'
异或
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_XNOR
:
createModelType
(
'
同或
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_EQ
:
createModelType
(
'
等于
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_NE
:
createModelType
(
'
不等于
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_GT
:
createModelType
(
'
大于
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_GE
:
createModelType
(
'
大于等于
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_LT
:
createModelType
(
'
小于
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_LE
:
createModelType
(
'
小于等于
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_ADD
:
createModelType
(
'
加
'
,
'
I*
'
,
'
Q
'
),
FBD_SUB
:
createModelType
(
'
减
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_MUL
:
createModelType
(
'
乘
'
,
'
I*
'
,
'
Q
'
),
FBD_DIV
:
createModelType
(
'
除
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_MOD
:
createModelType
(
'
求余
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_ABS
:
createModelType
(
'
绝对值
'
,
'
I
'
,
'
Q
'
),
FBD_EXP
:
createModelType
(
'
平方
'
,
'
I
'
,
'
Q
'
),
FBD_EXPT
:
createModelType
(
'
N次方
'
,
'
I
'
,
'
Q
'
),
FBD_SQRT
:
createModelType
(
'
根号
'
,
'
I1,I2
'
,
'
Q
'
),
FBD_LN
:
createModelType
(
'
自然对数
'
,
'
I
'
,
'
Q
'
),
FBD_LOG
:
createModelType
(
'
10对数
'
,
'
I
'
,
'
Q
'
),
FBD_MAX
:
createModelType
(
'
最大值
'
,
'
I*
'
,
'
Q
'
),
FBD_MIN
:
createModelType
(
'
最小值
'
,
'
I*
'
,
'
Q
'
),
FBD_LIMIN
:
createModelType
(
'
限制
'
,
'
MI,IN,MX
'
,
'
Q
'
),
FBD_SEL
:
createModelType
(
'
选择
'
,
'
G,IN0,IN1
'
,
'
Q
'
),
FBD_TON
:
createModelType
(
'
上升沿延时
'
,
'
IN,PT
'
,
'
Q,ET
'
),
FBD_TOF
:
createModelType
(
'
下降沿延时
'
,
'
IN,PT
'
,
'
Q,ET
'
),
FBD_TP
:
createModelType
(
'
脉冲
'
,
'
IN,PT
'
,
'
Q,ET
'
),
FBD_RS
:
createModelType
(
'
锁存器RS
'
,
'
SET,RESET
'
,
'
Q
'
),
FBD_SR
:
createModelType
(
'
锁存器SR
'
,
'
SET,RESET
'
,
'
Q
'
),
FBD_RTRIG
:
createModelType
(
'
上升沿
'
,
'
CLK
'
,
'
Q
'
),
FBD_FTRIG
:
createModelType
(
'
下降沿
'
,
'
CLK
'
,
'
Q
'
),
FBD_CTU
:
createModelType
(
'
上升沿计数
'
,
'
CU,RESET,PV
'
,
'
Q,CV
'
),
FBD_CTD
:
createModelType
(
'
下降沿计数
'
,
'
CU,RESET,PV
'
,
'
Q,CV
'
),
FBD_CTUD
:
createModelType
(
'
递增递减计数器
'
,
'
CU,CD,RESET,LOAD,PV
'
,
'
QU,QD,CV
'
),
FBD_INPUT
:
{
displayName
:
'
输入模块
'
,
ports
:
{
left
:
null
,
top
:
null
,
...
...
@@ -148,8 +152,8 @@ if ($.zui.FlowChart) {
return
elementType
.
displayName
.
toUpperCase
()
+
(
newElementsCounter
[
elementType
.
name
]
++
);
},
},
fbd_out
:
{
displayName
:
'
DATA_OUT
'
,
FBD_OUTPUT
:
{
displayName
:
'
输出模块
'
,
ports
:
{
right
:
null
,
top
:
null
,
...
...
@@ -194,6 +198,7 @@ if ($.zui.FlowChart) {
'
#{id} .flowchart-fbd-model .flowchart-text {top: -20px}
'
,
'
#{id} .flowchart-fbd-model .flowchart-port-left:before {content: attr(data-name); position: absolute; display: block; left: 100%; padding-left: 5px}
'
,
'
#{id} .flowchart-fbd-model .flowchart-port-right:before {content: attr(data-name); position: absolute; display: block; right: 100%; padding-right: 5px}
'
,
'
#{id} .flowchart-fbd-model .flowchart-port-resthoder.flowchart-port-left:before, #{id} .flowchart-fbd-model .flowchart-port-resthoder.flowchart-port-right:before {opacity: .5}
'
,
].
join
(
'
\n
'
)
});
}
docs/examples/flowchart.fsm.js
浏览文件 @
3d134649
if
(
$
.
zui
.
FlowChart
)
{
var
textGenerator
=
function
(
elementType
)
{
if
(
!
elementType
.
newElementsCounter
)
{
elementType
.
newElementsCounter
=
1
;
}
return
elementType
.
name
.
substring
(
4
)
+
'
_
'
+
(
elementType
.
newElementsCounter
++
);
};
var
types
=
{
fsm_start
:
{
FSM_InitState
:
{
width
:
32
,
height
:
32
,
type
:
'
dot
'
,
displayName
:
'
FSM
开始
'
,
text
:
'
开始
'
,
displayName
:
'
FSM
初始状态
'
,
text
:
textGenerator
,
portLineLength
:
1
,
shapeStyle
:
{
background
:
'
#888
'
}
},
fsm_stop
:
{
FSM_EndState
:
{
width
:
32
,
height
:
32
,
type
:
'
dot
'
,
shapeStyle
:
{
background
:
'
#888
'
,
boxShadow
:
'
inset 0 0 0 2px #fff
'
},
text
:
'
结束
'
,
text
:
textGenerator
,
portLineLength
:
1
,
text
:
'
结束
'
,
displayName
:
'
FSM 结束
'
,
},
fsm_actionConvert
:
{
type
:
'
relation
'
,
lineStyle
:
'
solid
'
,
text
:
'
动作转换
'
,
displayName
:
'
FSM动作转换
'
},
fsm_virtualActionConvert
:
{
type
:
'
relation
'
,
lineStyle
:
'
dashed
'
,
text
:
'
虚拟转换
'
,
displayName
:
'
FSM虚拟转换
'
,
displayName
:
'
FSM结束状态
'
,
},
fsm_simple
State
:
{
FSM_
State
:
{
type
:
'
box
'
,
portLineLength
:
1
,
text
:
'
简单状态
'
,
text
:
textGenerator
,
displayName
:
'
FSM简单状态
'
},
fsm_virtual
State
:
{
FSM_Vir
State
:
{
type
:
'
box
'
,
portLineLength
:
1
,
shapeStyle
:
{
borderStyle
:
'
dashed
'
},
text
:
'
虚拟状态
'
,
text
:
textGenerator
,
displayName
:
'
FSM虚拟状态
'
,
},
fsm_actualState
:
{
type
:
'
box
'
,
portLineLength
:
1
,
shapeStyle
:
{
paddingLeft
:
30
},
text
:
'
实际状态
'
,
displayName
:
'
FSM实际状态
'
,
// FSM_ConStates: {
// type: 'box',
// portLineLength: 1,
// shapeStyle: {borderStyle: 'dotted'},
// text: textGenerator,
// displayName: 'FSM并发组合状态',
// },
// FSM_SerStates: {
// type: 'box',
// portLineLength: 1,
// shapeStyle: {borderStyle: 'dotted'},
// text: textGenerator,
// displayName: 'FSM顺序组合状态',
// },
FSM_Action
:
{
type
:
'
relation
'
,
lineStyle
:
'
solid
'
,
text
:
textGenerator
,
displayName
:
'
FSM动作转换1
'
},
FSM_Action1
:
{
type
:
'
relation
'
,
lineStyle
:
'
solid
'
,
text
:
textGenerator
,
displayName
:
'
FSM动作转换2
'
},
FSM_VirAction
:
{
type
:
'
relation
'
,
lineStyle
:
'
dashed
'
,
text
:
textGenerator
,
displayName
:
'
FSM虚拟转换
'
,
},
fsm_s
electState
:
{
FSM_S
electState
:
{
type
:
'
diamond
'
,
portLineLength
:
1
,
text
:
'
选择状态
'
,
text
:
textGenerator
,
displayName
:
'
FSM选择状态
'
,
},
fsm_fork
:
{
FSM_ActState
:
{
type
:
'
box
'
,
portLineLength
:
1
,
shapeStyle
:
{
paddingLeft
:
30
},
text
:
textGenerator
,
displayName
:
'
FSM实际状态
'
,
},
FSM_ActionBran
:
{
type
:
'
rectangle
'
,
portLineLength
:
6
,
displayName
:
'
FSM分叉
'
,
text
:
textGenerator
,
ports
:
{
top
:
null
,
left
:
[{
...
...
@@ -126,10 +153,11 @@ if ($.zui.FlowChart) {
});
}
},
fsm_merge
:
{
FSM_ActionComb
:
{
type
:
'
rectangle
'
,
portLineLength
:
6
,
displayName
:
'
FSM合并
'
,
text
:
textGenerator
,
ports
:
{
top
:
null
,
left
:
[{
...
...
@@ -201,7 +229,9 @@ if ($.zui.FlowChart) {
};
var
defaultOptions
=
{
elementTypes
:
types
,
quickAddActionType
:
'
fsm_simpleState
'
defaultRelationType
:
'
FSM_Action
'
,
defaultActionType
:
'
FSM_State
'
,
quickAddActionType
:
'
FSM_State
'
};
$
.
zui
.
FlowChart
.
addPlugin
(
'
fsm
'
,
{
defaultOptions
:
defaultOptions
,
...
...
@@ -209,7 +239,7 @@ if ($.zui.FlowChart) {
'
.flowchart-contextmenu {min-width: 360px}
'
,
'
.flowchart-contextmenu .col-xs-4 {width: 25%}
'
,
'
#{id} .flowchart-element-fsm_fork, #{id} .flowchart-element-fsm_merge {align-items: flex-start!important;}
'
,
'
#{id} .flowchart-element-
fsm_actual
State:before {content: " "; position: absolute; width: 30px; height: 30px; top: 4px; left: 4px; background: #888; border-radius: 50%; border: 1px solid #333}
'
'
#{id} .flowchart-element-
FSM_Act
State:before {content: " "; position: absolute; width: 30px; height: 30px; top: 4px; left: 4px; background: #888; border-radius: 50%; border: 1px solid #333}
'
].
join
(
'
\n
'
)
});
}
docs/examples/flowchart.html
浏览文件 @
3d134649
...
...
@@ -32,6 +32,7 @@
<div
class=
"pull-left margin-bottom: 10px"
>
<button
type=
"button"
class=
"btn btn-danger"
id=
"resetDataBtn"
>
清空
</button>
<button
type=
"button"
class=
"btn btn-primary"
id=
"exportDataBtn"
>
导出
</button>
<button
type=
"button"
class=
"btn btn-primary"
id=
"exportTypeBtn"
>
导出类型定义
</button>
</div>
</div>
<div
class=
"row"
>
...
...
@@ -39,7 +40,7 @@
<div
class=
"panel"
>
<div
class=
"panel-heading"
>
变量
<small
class=
"text-muted"
>
(可拖放)
</small></div>
<div
class=
"panel-body"
id=
"variables"
>
<button
type=
"button"
class=
"btn btn-sm"
data-var=
"var1Name"
data-value=
"var1Value"
draggable=
"true"
>
变量1
</button>
<button
type=
"button"
class=
"btn btn-sm"
data-
id=
"test"
data-
var=
"var1Name"
data-value=
"var1Value"
draggable=
"true"
>
变量1
</button>
<button
type=
"button"
class=
"btn btn-sm"
data-var=
"var2Name"
data-value=
"var2Value"
draggable=
"true"
>
变量2
</button>
<button
type=
"button"
class=
"btn btn-sm"
data-var=
"var3Name"
data-value=
"var3Value"
draggable=
"true"
>
变量3
</button>
<button
type=
"button"
class=
"btn btn-sm"
data-var=
"var4Name"
data-value=
"var4Value"
draggable=
"true"
>
变量4
</button>
...
...
@@ -224,13 +225,15 @@
}
};
$
(
'
#flowchart
'
).
flowChart
({
plugins
:
'
fsm,fbd,var
'
,
plugins
:
'
fbd,fsm,var
'
,
initialTypes
:
false
,
readonly
:
false
,
showRelationTextOnSide
:
false
,
adsorptionGrid
:
10
,
data
:
originData
,
relationLineGap
:
3
,
portLineLength
:
1
,
quickAdd
:
false
,
addFromDrop
:
'
#toolbar
'
,
addVariablesFromDrop
:
'
#variables
'
,
showContextMenu
:
function
(
element
,
items
,
event
)
{
...
...
@@ -280,19 +283,29 @@
flowchart
.
resetData
();
});
$
(
'
#exportDataBtn
'
).
on
(
'
click
'
,
function
()
{
var
data
=
flowchart
.
exportData
();
console
.
log
(
'
FlowChart > Export data
'
,
data
);
bootbox
.
dialog
({
title
:
'
流程图数据导出
'
,
message
:
'
<pre><code>
'
+
JSON
.
stringify
(
flowchart
.
exportData
(),
null
,
4
)
+
'
</code></pre>
'
message
:
'
<textarea class="form-control code" rows="20" readonly>
'
+
JSON
.
stringify
(
data
,
null
,
4
)
+
'
</textarea>
'
});
});
$
(
'
#exportTypeBtn
'
).
on
(
'
click
'
,
function
()
{
var
types
=
flowchart
.
exportTypes
();
console
.
log
(
'
FlowChart > Export types
'
,
types
);
bootbox
.
dialog
({
title
:
'
流程图类型定义导出
'
,
message
:
'
<textarea class="form-control code" rows="20" readonly>
'
+
JSON
.
stringify
(
types
,
null
,
4
)
+
'
</textarea>
'
});
});
$
(
'
#showExampleBtn
'
).
on
(
'
click
'
,
function
()
{
flowchart
.
resetData
(
data
);
});
var
fsmData
=
[{
"
position
"
:{
"
left
"
:
20
,
"
top
"
:
50
},
"
id
"
:
"
start
"
,
"
type
"
:
"
fsm_start
"
,
"
text
"
:
"
开始
"
},{
"
position
"
:{
"
left
"
:
130
,
"
top
"
:
50
},
"
id
"
:
"
state1
"
,
"
type
"
:
"
fsm_simpleState
"
,
"
text
"
:
"
简单状态
"
},{
"
position
"
:{
"
left
"
:
290
,
"
top
"
:
50
},
"
id
"
:
"
state2
"
,
"
type
"
:
"
fsm_virtualState
"
,
"
text
"
:
"
虚拟状态
"
},{
"
position
"
:{
"
left
"
:
270
,
"
top
"
:
200
},
"
id
"
:
"
state3
"
,
"
type
"
:
"
fsm_actualState
"
,
"
text
"
:
"
实际状态
"
},{
"
position
"
:{
"
left
"
:
430
,
"
top
"
:
200
},
"
id
"
:
"
state4
"
,
"
type
"
:
"
fsm_selectState
"
,
"
text
"
:
"
选择状态
"
},{
"
position
"
:{
"
left
"
:
890
,
"
top
"
:
120
},
"
id
"
:
"
stop
"
,
"
type
"
:
"
fsm_stop
"
,
"
text
"
:
"
结束
"
},{
"
position
"
:{
"
left
"
:
460
,
"
top
"
:
40
},
"
id
"
:
"
fhznztkw9a
"
,
"
type
"
:
"
fsm_fork
"
,
"
text
"
:
"
分叉
"
},{
"
position
"
:{
"
left
"
:
560
,
"
top
"
:
10
},
"
id
"
:
"
fhzo014wp4
"
,
"
type
"
:
"
fsm_simpleState
"
,
"
text
"
:
"
简单状态
"
},{
"
position
"
:{
"
left
"
:
560
,
"
top
"
:
90
},
"
id
"
:
"
fhzo02dejt
"
,
"
type
"
:
"
fsm_simpleState
"
,
"
text
"
:
"
简单状态
"
},{
"
position
"
:{
"
left
"
:
740
,
"
top
"
:
40
},
"
id
"
:
"
fhzo0gw250
"
,
"
type
"
:
"
fsm_merge
"
,
"
text
"
:
"
合并
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
start
"
,
"
to
"
:
"
state1
"
,
"
id
"
:
"
fhznzi9quh
"
,
"
type
"
:
"
fsm_actionConvert
"
,
"
text
"
:
"
动作转换
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state1
"
,
"
to
"
:
"
state2
"
,
"
id
"
:
"
fhznzi9qui
"
,
"
type
"
:
"
fsm_virtualActionConvert
"
,
"
text
"
:
"
虚拟转换
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state1
"
,
"
to
"
:
"
state3
"
,
"
id
"
:
"
fhznzi9quj
"
,
"
type
"
:
"
fsm_actionConvert
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state3
"
,
"
to
"
:
"
state4
"
,
"
id
"
:
"
fhznzi9rmc
"
,
"
type
"
:
"
fsm_actionConvert
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state4
"
,
"
to
"
:
"
stop
"
,
"
id
"
:
"
fhznzi9rmd
"
,
"
type
"
:
"
fsm_actionConvert
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state2
"
,
"
to
"
:
"
fhznztkw9a
"
,
"
fromPort
"
:
"
right1
"
,
"
toPort
"
:
"
in
"
,
"
id
"
:
"
fhznzvsmmn
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhznztkw9a
"
,
"
to
"
:
"
fhzo014wp4
"
,
"
fromPort
"
:
"
out1
"
,
"
toPort
"
:
"
left1
"
,
"
id
"
:
"
fhzo0cii2i
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhznztkw9a
"
,
"
to
"
:
"
fhzo02dejt
"
,
"
fromPort
"
:
"
out2
"
,
"
toPort
"
:
"
left1
"
,
"
id
"
:
"
fhzo0dtwuz
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzo014wp4
"
,
"
to
"
:
"
fhzo0gw250
"
,
"
fromPort
"
:
"
right1
"
,
"
toPort
"
:
"
in1
"
,
"
id
"
:
"
fhzo0i57wt
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzo02dejt
"
,
"
to
"
:
"
fhzo0gw250
"
,
"
fromPort
"
:
"
right1
"
,
"
toPort
"
:
"
in2
"
,
"
id
"
:
"
fhzo0j7092
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzo0gw250
"
,
"
to
"
:
"
stop
"
,
"
fromPort
"
:
"
out
"
,
"
toPort
"
:
"
left1
"
,
"
id
"
:
"
fhzo0kfv7z
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
}];
var
fsmData
=
[{
"
position
"
:{
"
left
"
:
20
,
"
top
"
:
50
},
"
id
"
:
"
start
"
,
"
type
"
:
"
FSM_InitState
"
,
"
text
"
:
"
开始
"
},{
"
position
"
:{
"
left
"
:
130
,
"
top
"
:
50
},
"
id
"
:
"
state1
"
,
"
type
"
:
"
FSM_State
"
,
"
text
"
:
"
简单状态
"
},{
"
position
"
:{
"
left
"
:
290
,
"
top
"
:
50
},
"
id
"
:
"
state2
"
,
"
type
"
:
"
FSM_VirState
"
,
"
text
"
:
"
虚拟状态
"
},{
"
position
"
:{
"
left
"
:
270
,
"
top
"
:
200
},
"
id
"
:
"
state3
"
,
"
type
"
:
"
FSM_ActState
"
,
"
text
"
:
"
实际状态
"
},{
"
position
"
:{
"
left
"
:
430
,
"
top
"
:
200
},
"
id
"
:
"
state4
"
,
"
type
"
:
"
FSM_SelectState
"
,
"
text
"
:
"
选择状态
"
},{
"
position
"
:{
"
left
"
:
890
,
"
top
"
:
120
},
"
id
"
:
"
stop
"
,
"
type
"
:
"
FSM_EndState
"
,
"
text
"
:
"
结束
"
},{
"
position
"
:{
"
left
"
:
460
,
"
top
"
:
40
},
"
id
"
:
"
fhznztkw9a
"
,
"
type
"
:
"
FSM_ActionBran
"
,
"
text
"
:
"
分叉
"
},{
"
position
"
:{
"
left
"
:
560
,
"
top
"
:
10
},
"
id
"
:
"
fhzo014wp4
"
,
"
type
"
:
"
FSM_State
"
,
"
text
"
:
"
简单状态
"
},{
"
position
"
:{
"
left
"
:
560
,
"
top
"
:
90
},
"
id
"
:
"
fhzo02dejt
"
,
"
type
"
:
"
FSM_State
"
,
"
text
"
:
"
简单状态
"
},{
"
position
"
:{
"
left
"
:
740
,
"
top
"
:
40
},
"
id
"
:
"
fhzo0gw250
"
,
"
type
"
:
"
FSM_ActionComb
"
,
"
text
"
:
"
合并
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
start
"
,
"
to
"
:
"
state1
"
,
"
id
"
:
"
fhznzi9quh
"
,
"
type
"
:
"
FSM_Action1
"
,
"
text
"
:
"
动作转换
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state1
"
,
"
to
"
:
"
state2
"
,
"
id
"
:
"
fhznzi9qui
"
,
"
type
"
:
"
FSM_VirAction
"
,
"
text
"
:
"
虚拟转换
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state1
"
,
"
to
"
:
"
state3
"
,
"
id
"
:
"
fhznzi9quj
"
,
"
type
"
:
"
FSM_Action1
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state3
"
,
"
to
"
:
"
state4
"
,
"
id
"
:
"
fhznzi9rmc
"
,
"
type
"
:
"
FSM_Action1
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state4
"
,
"
to
"
:
"
stop
"
,
"
id
"
:
"
fhznzi9rmd
"
,
"
type
"
:
"
FSM_Action1
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
state2
"
,
"
to
"
:
"
fhznztkw9a
"
,
"
fromPort
"
:
"
right1
"
,
"
toPort
"
:
"
in
"
,
"
id
"
:
"
fhznzvsmmn
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhznztkw9a
"
,
"
to
"
:
"
fhzo014wp4
"
,
"
fromPort
"
:
"
out1
"
,
"
toPort
"
:
"
left1
"
,
"
id
"
:
"
fhzo0cii2i
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhznztkw9a
"
,
"
to
"
:
"
fhzo02dejt
"
,
"
fromPort
"
:
"
out2
"
,
"
toPort
"
:
"
left1
"
,
"
id
"
:
"
fhzo0dtwuz
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzo014wp4
"
,
"
to
"
:
"
fhzo0gw250
"
,
"
fromPort
"
:
"
right1
"
,
"
toPort
"
:
"
in1
"
,
"
id
"
:
"
fhzo0i57wt
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzo02dejt
"
,
"
to
"
:
"
fhzo0gw250
"
,
"
fromPort
"
:
"
right1
"
,
"
toPort
"
:
"
in2
"
,
"
id
"
:
"
fhzo0j7092
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzo0gw250
"
,
"
to
"
:
"
stop
"
,
"
fromPort
"
:
"
out
"
,
"
toPort
"
:
"
left1
"
,
"
id
"
:
"
fhzo0kfv7z
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
}];
$
(
'
#showFsmExampleBtn
'
).
on
(
'
click
'
,
function
()
{
flowchart
.
resetData
(
fsmData
);
}).
click
();
var
fbdData
=
[{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
60
},
"
id
"
:
"
fhzelyvq88
"
,
"
type
"
:
"
fbd_in
"
,
"
text
"
:
"
DATA_IN1
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
110
},
"
id
"
:
"
fhzem0258h
"
,
"
type
"
:
"
fbd_in
"
,
"
text
"
:
"
DATA_IN2
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
160
},
"
id
"
:
"
fhzem0sm62
"
,
"
type
"
:
"
fbd_in
"
,
"
text
"
:
"
DATA_IN3
"
},{
"
position
"
:{
"
left
"
:
260
,
"
top
"
:
60
},
"
id
"
:
"
fhzem7c1h7
"
,
"
type
"
:
"
fbd_add
"
,
"
text
"
:
"
ADD1
"
},{
"
position
"
:{
"
left
"
:
260
,
"
top
"
:
160
},
"
id
"
:
"
fhzemixzrz
"
,
"
type
"
:
"
fbd_ftrig
"
,
"
text
"
:
"
F_TRIG1
"
},{
"
position
"
:{
"
left
"
:
460
,
"
top
"
:
100
},
"
id
"
:
"
fhzemr4jy2
"
,
"
type
"
:
"
fbd_mul
"
,
"
text
"
:
"
MUL1
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
210
},
"
id
"
:
"
fhzen7iupy
"
,
"
type
"
:
"
fbd_in
"
,
"
text
"
:
"
DATA_IN4
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
320
},
"
id
"
:
"
fhzen973pb
"
,
"
type
"
:
"
fbd_in
"
,
"
text
"
:
"
DATA_IN5
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
370
},
"
id
"
:
"
fhzenaevbk
"
,
"
type
"
:
"
fbd_in
"
,
"
text
"
:
"
DATA_IN6
"
},{
"
position
"
:{
"
left
"
:
-
10
,
"
top
"
:
510
},
"
id
"
:
"
fhzencfdnt
"
,
"
type
"
:
"
fbd_ctd
"
,
"
text
"
:
"
CTD1
"
},{
"
position
"
:{
"
left
"
:
260
,
"
top
"
:
260
},
"
id
"
:
"
fhzend4wn6
"
,
"
type
"
:
"
fbd_ctd
"
,
"
text
"
:
"
CTD2
"
},{
"
position
"
:{
"
left
"
:
460
,
"
top
"
:
260
},
"
id
"
:
"
fhzenjwmke
"
,
"
type
"
:
"
fbd_mod
"
,
"
text
"
:
"
MOD1
"
},{
"
position
"
:{
"
left
"
:
650
,
"
top
"
:
120
},
"
id
"
:
"
fhzenpheyp
"
,
"
type
"
:
"
fbd_out
"
,
"
text
"
:
"
DATA_OUT2
"
},{
"
position
"
:{
"
left
"
:
650
,
"
top
"
:
280
},
"
id
"
:
"
fhzenssv4b
"
,
"
type
"
:
"
fbd_out
"
,
"
text
"
:
"
DATA_OUT3
"
},{
"
position
"
:{
"
left
"
:
830
,
"
top
"
:
160
},
"
id
"
:
"
fhzeojqg7q
"
,
"
type
"
:
"
fbd_ctud
"
,
"
text
"
:
"
CTUD1
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzelyvq88
"
,
"
to
"
:
"
fhzem7c1h7
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
I1
"
,
"
id
"
:
"
fhzem8rhbw
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzem0258h
"
,
"
to
"
:
"
fhzem7c1h7
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
I2
"
,
"
id
"
:
"
fhzem9zc19
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzem0sm62
"
,
"
to
"
:
"
fhzemixzrz
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
CLK
"
,
"
id
"
:
"
fhzemlpc60
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzem7c1h7
"
,
"
to
"
:
"
fhzemr4jy2
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
I1
"
,
"
id
"
:
"
fhzemsq25v
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzemixzrz
"
,
"
to
"
:
"
fhzemr4jy2
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
I2
"
,
"
id
"
:
"
fhzemtqvs4
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzen7iupy
"
,
"
to
"
:
"
fhzend4wn6
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
CU
"
,
"
id
"
:
"
fhzenf6j3v
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzen973pb
"
,
"
to
"
:
"
fhzend4wn6
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
RESET
"
,
"
id
"
:
"
fhzengjpxw
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzenaevbk
"
,
"
to
"
:
"
fhzend4wn6
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
PV
"
,
"
id
"
:
"
fhzenhtv7h
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzend4wn6
"
,
"
to
"
:
"
fhzenjwmke
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
I1
"
,
"
id
"
:
"
fhzenllovb
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzend4wn6
"
,
"
to
"
:
"
fhzenjwmke
"
,
"
fromPort
"
:
"
CV
"
,
"
toPort
"
:
"
I2
"
,
"
id
"
:
"
fhzenme05s
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzemr4jy2
"
,
"
to
"
:
"
fhzenpheyp
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
out
"
,
"
id
"
:
"
fhzenqkykq
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzenjwmke
"
,
"
to
"
:
"
fhzenssv4b
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
out
"
,
"
id
"
:
"
fhzenuqmp0
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
}];
var
fbdData
=
[{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
60
},
"
id
"
:
"
fhzelyvq88
"
,
"
type
"
:
"
FBD_INPUT
"
,
"
text
"
:
"
DATA_IN1
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
110
},
"
id
"
:
"
fhzem0258h
"
,
"
type
"
:
"
FBD_INPUT
"
,
"
text
"
:
"
DATA_IN2
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
160
},
"
id
"
:
"
fhzem0sm62
"
,
"
type
"
:
"
FBD_INPUT
"
,
"
text
"
:
"
DATA_IN3
"
},{
"
position
"
:{
"
left
"
:
260
,
"
top
"
:
60
},
"
id
"
:
"
fhzem7c1h7
"
,
"
type
"
:
"
FBD_ADD
"
,
"
text
"
:
"
ADD1
"
},{
"
position
"
:{
"
left
"
:
260
,
"
top
"
:
160
},
"
id
"
:
"
fhzemixzrz
"
,
"
type
"
:
"
FBD_FTRIG
"
,
"
text
"
:
"
F_TRIG1
"
},{
"
position
"
:{
"
left
"
:
460
,
"
top
"
:
100
},
"
id
"
:
"
fhzemr4jy2
"
,
"
type
"
:
"
FBD_MUL
"
,
"
text
"
:
"
MUL1
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
210
},
"
id
"
:
"
fhzen7iupy
"
,
"
type
"
:
"
FBD_INPUT
"
,
"
text
"
:
"
DATA_IN4
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
320
},
"
id
"
:
"
fhzen973pb
"
,
"
type
"
:
"
FBD_INPUT
"
,
"
text
"
:
"
DATA_IN5
"
},{
"
position
"
:{
"
left
"
:
40
,
"
top
"
:
370
},
"
id
"
:
"
fhzenaevbk
"
,
"
type
"
:
"
FBD_INPUT
"
,
"
text
"
:
"
DATA_IN6
"
},{
"
position
"
:{
"
left
"
:
-
10
,
"
top
"
:
510
},
"
id
"
:
"
fhzencfdnt
"
,
"
type
"
:
"
FBD_CTD
"
,
"
text
"
:
"
CTD1
"
},{
"
position
"
:{
"
left
"
:
260
,
"
top
"
:
260
},
"
id
"
:
"
fhzend4wn6
"
,
"
type
"
:
"
FBD_CTD
"
,
"
text
"
:
"
CTD2
"
},{
"
position
"
:{
"
left
"
:
460
,
"
top
"
:
260
},
"
id
"
:
"
fhzenjwmke
"
,
"
type
"
:
"
FBD_MOD
"
,
"
text
"
:
"
MOD1
"
},{
"
position
"
:{
"
left
"
:
650
,
"
top
"
:
120
},
"
id
"
:
"
fhzenpheyp
"
,
"
type
"
:
"
FBD_OUTPUT
"
,
"
text
"
:
"
DATA_OUT2
"
},{
"
position
"
:{
"
left
"
:
650
,
"
top
"
:
280
},
"
id
"
:
"
fhzenssv4b
"
,
"
type
"
:
"
FBD_OUTPUT
"
,
"
text
"
:
"
DATA_OUT3
"
},{
"
position
"
:{
"
left
"
:
830
,
"
top
"
:
160
},
"
id
"
:
"
fhzeojqg7q
"
,
"
type
"
:
"
FBD_CTUD
"
,
"
text
"
:
"
CTUD1
"
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzelyvq88
"
,
"
to
"
:
"
fhzem7c1h7
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
I1
"
,
"
id
"
:
"
fhzem8rhbw
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzem0258h
"
,
"
to
"
:
"
fhzem7c1h7
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
I2
"
,
"
id
"
:
"
fhzem9zc19
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzem0sm62
"
,
"
to
"
:
"
fhzemixzrz
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
CLK
"
,
"
id
"
:
"
fhzemlpc60
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzem7c1h7
"
,
"
to
"
:
"
fhzemr4jy2
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
I1
"
,
"
id
"
:
"
fhzemsq25v
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzemixzrz
"
,
"
to
"
:
"
fhzemr4jy2
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
I2
"
,
"
id
"
:
"
fhzemtqvs4
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzen7iupy
"
,
"
to
"
:
"
fhzend4wn6
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
CU
"
,
"
id
"
:
"
fhzenf6j3v
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzen973pb
"
,
"
to
"
:
"
fhzend4wn6
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
RESET
"
,
"
id
"
:
"
fhzengjpxw
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzenaevbk
"
,
"
to
"
:
"
fhzend4wn6
"
,
"
fromPort
"
:
"
in
"
,
"
toPort
"
:
"
PV
"
,
"
id
"
:
"
fhzenhtv7h
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzend4wn6
"
,
"
to
"
:
"
fhzenjwmke
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
I1
"
,
"
id
"
:
"
fhzenllovb
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzend4wn6
"
,
"
to
"
:
"
fhzenjwmke
"
,
"
fromPort
"
:
"
CV
"
,
"
toPort
"
:
"
I2
"
,
"
id
"
:
"
fhzenme05s
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzemr4jy2
"
,
"
to
"
:
"
fhzenpheyp
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
out
"
,
"
id
"
:
"
fhzenqkykq
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
},{
"
hideArrow
"
:
true
,
"
from
"
:
"
fhzenjwmke
"
,
"
to
"
:
"
fhzenssv4b
"
,
"
fromPort
"
:
"
Q
"
,
"
toPort
"
:
"
out
"
,
"
id
"
:
"
fhzenuqmp0
"
,
"
type
"
:
"
relation
"
,
"
text
"
:
""
}];
$
(
'
#showFbdExampleBtn
'
).
on
(
'
click
'
,
function
()
{
flowchart
.
resetData
(
fbdData
);
});
...
...
docs/examples/flowchart.var.js
浏览文件 @
3d134649
...
...
@@ -40,24 +40,51 @@ if ($.zui.FlowChart) {
if
(
this
.
flowChart
.
callCallback
(
'
beforeSetVariable
'
,
[
newVars
,
this
])
===
false
)
{
return
;
}
this
.
setData
(
'
vars
'
,
$
.
extend
(
vars
,
newVars
));
this
.
setData
(
'
vars
'
,
$
.
extend
(
true
,
vars
,
newVars
));
this
.
flowChart
.
callCallback
(
'
afterSetVariable
'
,
[
newVars
,
this
]);
};
$
.
zui
.
FlowChartElement
.
prototype
.
setVariableObject
=
function
(
varName
,
varObject
)
{
if
(
typeof
varObject
!==
'
object
'
)
{
throw
new
Error
(
'
FlowChart: The param "varObject" must be an object like "{value: 123}".
'
);
}
var
varData
=
{};
varData
[
varName
]
=
varObject
;
this
.
setVariable
(
varData
,
true
);
};
$
.
zui
.
FlowChartElement
.
prototype
.
removeVariable
=
function
(
varName
)
{
var
vars
=
this
.
getData
(
'
vars
'
);
if
(
vars
)
{
delete
vars
[
varName
];
}
};
$
.
zui
.
FlowChart
.
prototype
.
checkTypeCanAddVariable
=
function
(
typeName
,
varName
,
varData
)
{
if
(
this
.
typesCanAddVariablesFunc
)
{
return
this
.
typesCanAddVariablesFunc
(
typeName
,
varName
,
varData
);
}
else
if
(
this
.
typesCanAddVariablesMap
)
{
return
this
.
typesCanAddVariablesMap
[
typeName
];
}
return
false
;
};
$
.
zui
.
FlowChart
.
addPlugin
(
'
var
'
,
{
plugins
:
'
fsm
'
,
defaultOptions
:
{
addVariablesFromDrop
:
true
,
typesCanAddVariables
:
'
fsm_simpleState,fsm_virtualState,fsm_actualState,fsm_selectState
'
,
typesCanAddVariables
:
function
(
type
)
{
var
typeLowerCase
=
type
.
toLowerCase
();
return
typeLowerCase
.
indexOf
(
'
fsm_
'
)
===
0
||
typeLowerCase
.
indexOf
(
'
fbd_
'
)
===
0
;
},
onDrop
:
function
(
e
)
{
var
that
=
this
;
var
newVarData
=
e
.
originalEvent
.
dataTransfer
.
getData
(
'
newVar
'
);
if
(
newVarData
)
{
e
.
preventDefault
();
var
$target
=
$
(
e
.
target
).
closest
(
'
.flowchart-
node
'
);
var
$target
=
$
(
e
.
target
).
closest
(
'
.flowchart-
element
'
);
if
(
$target
.
length
)
{
var
element
=
that
.
getElement
(
$target
.
data
(
'
id
'
));
if
(
element
&&
that
.
typesCanAddVariablesMap
[
element
.
type
]
)
{
if
(
element
)
{
try
{
newVarData
=
$
.
parseJSON
(
newVarData
);
}
catch
(
e
)
{
...
...
@@ -66,14 +93,16 @@ if ($.zui.FlowChart) {
if
(
newVarData
&&
typeof
newVarData
===
'
object
'
&&
newVarData
.
var
)
{
var
varName
=
newVarData
.
var
;
delete
newVarData
.
var
;
var
varData
=
{};
varData
[
varName
]
=
newVarData
;
element
.
setVariable
(
varData
,
true
);
if
(
that
.
checkTypeCanAddVariable
(
element
.
type
,
varName
,
newVarData
))
{
element
.
setVariableObject
(
varName
,
newVarData
);
}
else
{
console
.
warn
(
'
FlowChart: Cannot add variable to the target element.
'
,
element
);
}
}
else
{
console
.
warn
(
'
FlowChart: Data format error in "newVarData" data from drop event
\'
s dataTransfer.
'
,
newVarData
);
}
}
else
{
console
.
warn
(
'
FlowChart: Cannot add variable to the target element.
'
,
element
);
console
.
warn
(
'
FlowChart: Cannot add variable to the target element
not in flowchart
.
'
,
element
);
}
}
return
false
;
...
...
@@ -81,23 +110,30 @@ if ($.zui.FlowChart) {
}
},
style
:
[
'
#{id}.flowchart-drag-var-start.flowchart-drag-over .flowchart-can-add-var {box-shadow: 0 0 4px 1px {activeColor}!important}
'
'
#{id}.flowchart-drag-var-start.flowchart-drag-over .flowchart-can-add-var
.flowchart-node
{box-shadow: 0 0 4px 1px {activeColor}!important}
'
].
join
(
'
\n
'
),
onRenderNode
:
function
(
$node
,
node
)
{
$node
.
toggleClass
(
'
flowchart-can-add-var
'
,
!!
this
.
typesCanAddVariablesMap
[
node
.
type
]);
$node
.
toggleClass
(
'
flowchart-can-add-var
'
,
!!
this
.
checkTypeCanAddVariable
(
node
.
type
));
},
onRenderRelation
:
function
(
$relation
,
relation
)
{
$relation
.
toggleClass
(
'
flowchart-can-add-var
'
,
!!
this
.
checkTypeCanAddVariable
(
relation
.
type
));
},
onCreate
:
function
()
{
var
that
=
this
;
var
options
=
that
.
options
;
var
typesCanAddVariablesMap
=
{};
var
typesCanAddVariables
=
options
.
typesCanAddVariables
;
if
(
typeof
typesCanAddVariables
===
'
string
'
)
{
typesCanAddVariables
=
typesCanAddVariables
.
split
(
'
,
'
);
}
if
(
$
.
isArray
(
typesCanAddVariables
))
{
var
typesCanAddVariablesMap
=
{};
typesCanAddVariables
.
forEach
(
function
(
type
)
{
typesCanAddVariablesMap
[
$
.
trim
(
type
)]
=
1
;
});
that
.
typesCanAddVariablesMap
=
typesCanAddVariablesMap
;
}
else
if
(
typeof
typesCanAddVariables
===
'
function
'
)
{
that
.
typesCanAddVariablesFunc
=
typesCanAddVariables
;
}
if
(
options
.
addVariablesFromDrop
)
{
if
(
typeof
options
.
addVariablesFromDrop
===
'
string
'
)
{
...
...
src/js/flowchart.js
浏览文件 @
3d134649
...
...
@@ -560,13 +560,13 @@ if (!Array.prototype.map) {
};
var
supportElementTypes
=
{
relation
:
true
,
relation
:
{
type
:
'
relation
'
}
,
action
:
{
type
:
'
rectangle
'
},
start
:
{
type
:
'
box
'
},
stop
:
{
type
:
'
box
'
},
judge
:
{
type
:
'
diamond
'
},
result
:
{
type
:
'
circle
'
},
connection
:
true
,
connection
:
{
type
:
'
connection
'
}
,
point
:
{
type
:
'
dot
'
},
};
...
...
@@ -578,7 +578,7 @@ if (!Array.prototype.map) {
*/
var
FlowChartElementPort
=
function
(
portData
,
side
,
index
)
{
if
(
typeof
portData
===
'
number
'
)
{
portData
=
{
name
:
''
,
space
:
portData
};
portData
=
{
space
:
portData
};
}
else
if
(
typeof
portData
===
'
string
'
)
{
portData
=
{
name
:
portData
};
}
...
...
@@ -614,6 +614,9 @@ if (!Array.prototype.map) {
*/
this
.
direction
=
portData
.
direction
===
'
out
'
?
'
out
'
:
portData
.
direction
===
'
in
'
?
'
in
'
:
'
in-out
'
;
/**
* @type {number}
*/
this
.
space
=
this
.
space
===
undefined
?
1
:
this
.
space
;
/**
...
...
@@ -651,15 +654,89 @@ if (!Array.prototype.map) {
*/
this
.
index
=
index
;
/**
* @type {boolean|number}
*/
this
.
rest
;
/**
* @type {number}
*/
this
.
maxLinkCount
=
this
.
rest
?
1
:
this
.
maxLinkCount
?
Math
.
max
(
1
,
this
.
maxLinkCount
)
:
1
;
/**
* @type {boolean}
*/
this
.
free
=
this
.
free
!==
false
;
this
.
free
=
!
this
.
rest
&&
this
.
free
!==
false
;
/**
* @type {number}
*/
this
.
maxLinkCount
=
this
.
maxLinkCount
?
Math
.
max
(
1
,
this
.
maxLinkCount
)
:
1
;
this
.
restMinIndex
=
this
.
restMinIndex
===
undefined
?
1
:
this
.
restMinIndex
;
};
FlowChartElementPort
.
prototype
.
getMaxRestCount
=
function
()
{
if
(
this
.
rest
===
true
)
{
return
Number
.
MAX_SAFE_INTEGER
;
}
if
(
this
.
rest
&&
typeof
this
.
rest
===
'
number
'
)
{
return
this
.
rest
;
}
return
0
;
};
FlowChartElementPort
.
prototype
.
isMatchRestName
=
function
(
name
)
{
if
(
this
.
rest
)
{
if
(
!
this
.
_restNameRegex
)
{
this
.
_restNameRegex
=
new
RegExp
(
'
^
'
+
this
.
name
.
replace
(
'
*
'
,
'
(
\\
d+)
'
)
+
'
$
'
);
}
return
this
.
_restNameRegex
.
test
(
name
);
}
return
false
;
};
FlowChartElementPort
.
prototype
.
getRestPortAt
=
function
(
index
,
restMinIndex
)
{
if
(
this
.
rest
)
{
if
(
restMinIndex
===
undefined
)
{
restMinIndex
=
this
.
restMinIndex
;
}
var
portName
=
this
.
name
.
replace
(
'
*
'
,
index
+
restMinIndex
);
return
this
.
getRestPortByName
(
portName
);
}
return
null
;
};
FlowChartElementPort
.
prototype
.
getRestPortByName
=
function
(
portName
)
{
if
(
this
.
isMatchRestName
(
portName
))
{
if
(
!
this
.
_restPorts
)
{
this
.
_restPorts
=
{};
}
var
port
=
this
.
_restPorts
[
portName
];
if
(
port
)
{
return
port
;
}
var
portData
=
this
.
exportPort
();
portData
.
name
=
portName
;
portData
.
rest
=
false
;
portData
.
_restPort
=
true
;
portData
.
maxLinkCount
=
1
;
port
=
new
FlowChartElementPort
(
portData
);
this
.
_restPorts
[
portName
]
=
port
;
return
port
;
}
return
null
;
};
FlowChartElementPort
.
prototype
.
exportPort
=
function
()
{
var
port
=
{};
var
that
=
this
;
$
.
each
(
that
,
function
(
propName
)
{
if
(
propName
[
0
]
!==
'
_
'
)
{
port
[
propName
]
=
that
[
propName
];
}
});
return
port
;
};
/**
...
...
@@ -671,7 +748,7 @@ if (!Array.prototype.map) {
if
(
!
initData
)
{
return
null
;
}
var
map
=
{
$all
:
{},
$free
:
[],
$list
:
[]};
var
map
=
{
$all
:
{},
$free
:
[],
$list
:
[]
,
$rest
:
[]
};
var
hasPort
;
$
.
each
(
SIDES
,
function
(
side
)
{
var
portsData
=
initData
[
side
];
...
...
@@ -695,6 +772,9 @@ if (!Array.prototype.map) {
if
(
port
.
free
)
{
map
.
$free
.
push
(
port
);
}
if
(
port
.
rest
)
{
map
.
$rest
.
push
(
port
);
}
}
return
port
;
});
...
...
@@ -998,11 +1078,13 @@ if (!Array.prototype.map) {
if
(
typeof
newType
===
'
string
'
)
{
newType
=
that
.
flowChart
.
types
[
newType
];
}
if
(
newType
)
{
that
.
type
=
newType
.
name
;
that
.
basicType
=
newType
.
type
;
that
.
isRelation
=
newType
.
isRelation
;
that
.
isNode
=
newType
.
isNode
;
that
.
elementType
=
newType
;
}
};
/**
...
...
@@ -1106,12 +1188,12 @@ if (!Array.prototype.map) {
}
else
{
var
fromPort
,
toPort
;
if
(
that
.
fromPort
)
{
fromPort
=
fromNode
.
elementType
.
getPortByName
(
that
.
fromPort
);
fromPort
=
fromNode
.
getPortByName
(
that
.
fromPort
);
}
if
(
that
.
toPort
)
{
toPort
=
toNode
.
elementType
.
getPortByName
(
that
.
toPort
);
toPort
=
toNode
.
getPortByName
(
that
.
toPort
);
}
if
(
!
that
.
fromPort
||
!
that
.
toPort
)
{
if
(
that
.
flowChart
.
options
.
allowFreePorts
&&
!
that
.
fromPort
||
!
that
.
toPort
)
{
var
fromBounds
=
fromNode
.
getBounds
();
var
toBounds
=
toNode
.
getBounds
();
var
centerPoint
=
{
...
...
@@ -1137,7 +1219,7 @@ if (!Array.prototype.map) {
}
if
(
minPortName
)
{
return
node
.
elementType
.
getPortByName
(
minPortName
);
return
node
.
getPortByName
(
minPortName
);
}
};
...
...
@@ -1247,7 +1329,7 @@ if (!Array.prototype.map) {
};
/**
*
*
Get actual ports, if side set then return port at given side
* @param {string} [side]
*/
FlowChartElement
.
prototype
.
getPorts
=
function
(
side
)
{
...
...
@@ -1260,11 +1342,16 @@ if (!Array.prototype.map) {
return
this
.
elementType
.
ports
.
$list
;
};
/**
* Get actual port by port name
* @return {FlowChartElementPort}
*/
FlowChartElement
.
prototype
.
getPortByName
=
function
(
name
)
{
if
(
this
.
isRelation
)
{
return
null
;
}
return
this
.
elementType
.
ports
.
$all
[
name
];
return
this
.
elementType
.
getPortByName
(
name
,
true
);
};
FlowChartElement
.
prototype
.
isActive
=
function
()
{
...
...
@@ -1370,6 +1457,7 @@ if (!Array.prototype.map) {
var
portsInfo
=
that
.
getPortsInfoOfRelation
();
var
$fromPort
=
fromNode
.
$get
(
'
.flowchart-port[data-name="
'
+
portsInfo
.
fromPort
.
name
+
'
"]
'
);
var
$toPort
=
toNode
.
$get
(
'
.flowchart-port[data-name="
'
+
portsInfo
.
toPort
.
name
+
'
"]
'
);
var
fromPortPos
=
flowChart
.
getPositionOf
(
$fromPort
);
var
toPortPos
=
flowChart
.
getPositionOf
(
$toPort
);
var
fromCenterOffset
=
$fromPort
.
data
(
'
centerOffset
'
);
...
...
@@ -1436,6 +1524,51 @@ if (!Array.prototype.map) {
return
(
text
===
undefined
||
text
===
null
)
?
''
:
String
(
text
);
};
/**
* Get rest ports
*/
FlowChartElement
.
prototype
.
getRestPorts
=
function
(
originPort
,
appendEmptyPort
)
{
if
(
originPort
.
rest
)
{
if
(
appendEmptyPort
===
undefined
)
{
appendEmptyPort
=
true
;
}
var
ports
=
this
.
getRelationOfRestPort
(
originPort
);
if
(
appendEmptyPort
)
{
var
port
=
originPort
.
getRestPortAt
(
ports
.
length
);
port
.
_restHolder
=
true
;
ports
.
push
(
port
);
}
return
ports
;
}
return
[];
};
FlowChartElement
.
prototype
.
getRelationOfRestPort
=
function
(
originPort
)
{
var
that
=
this
;
var
ports
=
[];
if
(
that
.
fromRels
&&
that
.
fromRels
.
length
)
{
that
.
fromRels
.
forEach
(
function
(
rel
)
{
if
(
rel
.
fromPort
&&
originPort
.
isMatchRestName
(
rel
.
fromPort
))
{
var
port
=
originPort
.
getRestPortAt
(
ports
.
length
);
port
.
_restHolder
=
false
;
rel
.
fromPort
=
port
.
name
;
ports
.
push
(
port
);
}
});
}
if
(
that
.
toRels
&&
that
.
toRels
.
length
)
{
that
.
toRels
.
forEach
(
function
(
rel
)
{
if
(
rel
.
toPort
&&
originPort
.
isMatchRestName
(
rel
.
toPort
))
{
var
port
=
originPort
.
getRestPortAt
(
ports
.
length
);
port
.
_restHolder
=
false
;
rel
.
toPort
=
port
.
name
;
ports
.
push
(
port
);
}
});
}
return
ports
;
};
/**
* Render ports
*/
...
...
@@ -1462,13 +1595,7 @@ if (!Array.prototype.map) {
that
.
$ports
=
$ports
;
var
sideSizes
=
{
left
:
0
,
right
:
0
,
top
:
0
,
bottom
:
0
};
var
portSize
=
options
.
portSpaceSize
||
20
;
$
.
each
(
sideSizes
,
function
(
side
)
{
var
$side
=
$ports
.
find
(
'
.flowchart-ports-
'
+
side
).
empty
();
var
sidePorts
=
ports
[
side
];
if
(
!
sidePorts
||
!
sidePorts
.
length
)
{
return
;
}
sidePorts
.
forEach
(
function
(
port
)
{
var
renderSidePort
=
function
(
$side
,
side
,
port
)
{
var
spaceSize
=
Math
.
floor
(
port
.
space
*
portSize
);
var
spaceBegin
=
Math
.
floor
(
port
.
spaceBegin
*
portSize
);
var
spaceEnd
=
Math
.
floor
(
port
.
spaceEnd
*
portSize
);
...
...
@@ -1531,7 +1658,20 @@ if (!Array.prototype.map) {
$
(
'
<div class="flowchart-port-line" style="position:absolute"></div>
'
).
css
(
portLineStyle
).
appendTo
(
$port
);
}
$port
.
addClass
(
'
flowchart-port-
'
+
side
).
data
(
'
centerOffset
'
,
portCenterOffset
).
toggleClass
(
'
flowchart-port-free
'
,
port
.
free
).
append
(
$
(
'
<div class="flowchart-port-dot" style="position:absolute"></div>
'
).
css
(
portDotStyle
));
$port
.
toggleClass
(
'
flowchart-port-resthoder
'
,
!!
port
.
_restHolder
);
$side
.
append
(
$port
);
};
$
.
each
(
sideSizes
,
function
(
side
)
{
var
$side
=
$ports
.
find
(
'
.flowchart-ports-
'
+
side
).
empty
();
var
sidePorts
=
ports
[
side
];
if
(
!
sidePorts
||
!
sidePorts
.
length
)
{
return
;
}
sidePorts
.
forEach
(
function
(
port
)
{
if
(
port
.
rest
)
{
return
that
.
getRestPorts
(
port
).
forEach
(
renderSidePort
.
bind
(
null
,
$side
,
side
));
}
renderSidePort
(
$side
,
side
,
port
);
});
$side
.
css
(
side
===
'
left
'
||
side
===
'
right
'
?
'
margin-top
'
:
'
margin-left
'
,
0
-
Math
.
floor
(
sideSizes
[
side
]
/
2
));
});
...
...
@@ -1667,15 +1807,6 @@ if (!Array.prototype.map) {
if
(
!
skipLayout
)
{
that
.
layoutNode
();
}
if
(
options
.
relationLineGap
)
{
that
.
sideRels
=
{
top
:
[],
right
:
[],
bottom
:
[],
left
:
[],
};
}
};
/**
...
...
@@ -1936,9 +2067,9 @@ if (!Array.prototype.map) {
this
.
edit
;
/**
* @type {
boolean
}
* @type {
string
}
*/
this
.
quickAdd
;
this
.
desc
;
/**
* @type {{left: FlowChartElementPort[], right: FlowChartElementPort[], top: FlowChartElementPort[], bottom: FlowChartElementPort[]}}
...
...
@@ -1946,11 +2077,22 @@ if (!Array.prototype.map) {
this
.
ports
=
FlowChartElementPort
.
createPortsMap
(
this
.
ports
);
};
FlowChartElementType
.
prototype
.
getPortByName
=
function
(
name
)
{
FlowChartElementType
.
prototype
.
getPortByName
=
function
(
name
,
tryReturnRestPort
)
{
var
that
=
this
;
var
ports
=
that
.
ports
;
if
(
ports
)
{
return
ports
.
$all
[
name
];
var
port
=
ports
.
$all
[
name
];
if
(
port
)
{
return
port
;
}
if
(
ports
.
$rest
.
length
)
{
for
(
var
i
=
0
;
i
<
ports
.
$rest
.
length
;
++
i
)
{
var
port
=
ports
.
$rest
[
i
];
if
(
port
.
isMatchRestName
(
name
))
{
return
tryReturnRestPort
?
port
.
getRestPortByName
(
name
)
:
port
;
}
}
}
}
return
null
;
};
...
...
@@ -1981,6 +2123,46 @@ if (!Array.prototype.map) {
return
element
;
};
FlowChartElementType
.
prototype
.
exportType
=
function
(
includeEmptyPorts
)
{
var
that
=
this
;
var
type
=
{
name
:
that
.
name
,
shape
:
that
.
shape
,
isRelation
:
that
.
isRelation
,
isNode
:
that
.
isNode
,
displayName
:
that
.
displayName
,
internal
:
that
.
internal
,
type
:
that
.
type
,
};
var
ports
=
that
.
ports
;
if
(
ports
)
{
var
portsToExport
=
{};
[
'
left
'
,
'
top
'
,
'
right
'
,
'
bottom
'
].
forEach
(
function
(
side
)
{
var
sidePorts
=
ports
[
side
];
if
(
sidePorts
&&
sidePorts
.
length
)
{
var
sidePOrtsToExport
=
[];
sidePorts
.
forEach
(
function
(
port
)
{
if
(
!
port
.
empty
||
includeEmptyPorts
)
{
var
portToExport
=
port
.
exportPort
();
delete
portToExport
.
empty
;
delete
portToExport
.
side
;
delete
portToExport
.
space
;
delete
portToExport
.
spaceBegin
;
delete
portToExport
.
spaceEnd
;
delete
portToExport
.
index
;
sidePOrtsToExport
.
push
(
portToExport
);
}
});
if
(
sidePOrtsToExport
.
length
)
{
portsToExport
[
side
]
=
sidePOrtsToExport
;
}
}
});
type
.
ports
=
portsToExport
;
}
return
type
;
};
/**
* The flowChart model class
* @class
...
...
@@ -2051,9 +2233,15 @@ if (!Array.prototype.map) {
// Init element types 初始化元素类型定义
var
types
=
{};
$
.
each
(
basicElementTypes
,
function
(
name
,
typeData
)
{
types
[
name
]
=
new
FlowChartElementType
([{
type
:
name
,
internal
:
name
!==
'
relation
'
,
name
:
name
,
displayName
:
that
.
lang
[
'
type.
'
+
name
]},
typeData
]);
types
[
name
]
=
new
FlowChartElementType
([{
type
:
name
,
internal
:
true
,
name
:
name
,
displayName
:
that
.
lang
[
'
type.
'
+
name
]},
typeData
]);
});
var
initialTypes
=
{};
$
.
each
(
supportElementTypes
,
function
(
name
,
typeData
)
{
initialTypes
[
name
]
=
$
.
extend
(
true
,
{},
typeData
,
{
internal
:
!
options
.
initialTypes
});
});
$
.
each
(
$
.
extend
(
true
,
{},
supportElement
Types
,
options
.
elementTypes
),
function
(
name
,
typeData
)
{
$
.
each
(
$
.
extend
(
true
,
{},
initial
Types
,
options
.
elementTypes
),
function
(
name
,
typeData
)
{
if
(
name
===
'
relation
'
)
return
;
if
(
types
[
name
])
{
var
basicType
=
types
[
name
];
...
...
@@ -2087,90 +2275,6 @@ if (!Array.prototype.map) {
$container
.
css
(
'
height
'
,
options
.
height
);
}
// Init quick add
// if (!options.readonly && options.quickAdd) {
// $canvas.on('mouseenter', '.flowchart-node:not(.flowchart-has-ports)', function() {
// that.showQuickAdd($(this).data('id'));
// }).on('mouseleave', '.flowchart-node', function() {
// if (!that.isPreventDragNode) {
// that.hideQuickAdd();
// }
// }).on('click', '.flowchart-quick-mark', function () {
// var $mark = $(this);
// that.quickAddNode($mark.closest('.flowchart-node').data('id'), $mark.data('direction'));
// });
// $canvas.droppable({
// container: '#' + canvasID,
// target: '.flowchart-node',
// selector: '.flowchart-quick-link-mark',
// mouseButton: 'left',
// before: function() {
// that.isPreventDragNode = true;
// },
// start: function(e) {
// var $node = $(e.element).closest('.flowchart-node');
// that.dragSourceNode = $node.data('id');
// that.focusElement(that.dragSourceNode);
// $(e.shadowElement).css('zIndex', 20);
// that.showQuickAdd(that.dragSourceNode, true);
// },
// drag: function(e) {
// var newDragNode = e.isIn && e.target && $(e.target).data('id');
// var lastDragNode = that.lastDragNode;
// if (lastDragNode && (!newDragNode || newDragNode !== lastDragNode)) {
// that.blurElement(lastDragNode);
// that.lastDragNode = null;
// }
// if (newDragNode && newDragNode !== lastDragNode) {
// that.lastDragNode = newDragNode;
// that.focusElement(newDragNode);
// }
// var $line = $canvas.find('.flowchart-link-line');
// var sourceNode = that.getElement(that.dragSourceNode);
// if (!$line.length) {
// $line = $('<svg class="flowchart-link-line" style="position: absolute; z-index: 30; top: 0; left: 0; right: 0; bottom: 0"><line x1="50" y1="50" x2="350" y2="350" stroke="' + options.activeColor + '" stroke-width="2" /></svg>').appendTo($canvas);
// }
// var sourcePoint = {
// left: sourceNode.bounds.right,
// top: sourceNode.bounds.bottom,
// };
// var targetPoint = {
// left: e.position.left + 8,
// top: e.position.top + 8,
// };
// $line.show().attr({
// width: $canvas.width(),
// height: $canvas.height(),
// }).find('line').attr({
// x1: sourcePoint.left,
// y1: sourcePoint.top,
// x2: targetPoint.left,
// y2: targetPoint.top,
// });
// },
// drop: function(e) {
// var toNode = e.isIn && e.target && $(e.target).data('id');
// that.addRelation(that.dragSourceNode, toNode);
// },
// always: function(e) {
// that.isPreventDragNode = false;
// if (that.dragSourceNode) {
// that.blurElement(that.dragSourceNode);
// that.dragSourceNode = null;
// }
// if (that.lastDragNode) {
// that.blurElement(that.lastDragNode);
// that.lastDragNode = null;
// }
// $canvas.find('.flowchart-link-line').hide();
// that.hideQuickAdd();
// }
// });
// }
// Init draggable event
that
.
draggableEnable
=
!!
$
.
fn
.
draggable
;
if
(
that
.
draggableEnable
)
{
...
...
@@ -2273,7 +2377,7 @@ if (!Array.prototype.map) {
$targetPort
&&
$targetPort
.
removeClass
(
'
flowchart-drop-active
'
);
$targetNode
&&
$targetNode
.
removeClass
(
'
flowchart-drop-active
'
);
$line
&&
$line
.
hide
();
if
(
!
hasDropped
&&
(
e
.
cancel
||
distanceOfTwoPoints
(
e
.
position
,
sourcePoint
)
<
20
))
{
if
(
options
.
quickAdd
&&
!
hasDropped
&&
(
e
.
cancel
||
distanceOfTwoPoints
(
e
.
position
,
sourcePoint
)
<
20
))
{
var
$target
=
$
(
e
.
event
.
target
);
var
$thisPort
=
$target
.
closest
(
'
.flowchart-port
'
);
var
$thisNode
=
(
$thisPort
.
length
?
$thisPort
:
$target
).
closest
(
'
.flowchart-node
'
);
...
...
@@ -2336,8 +2440,8 @@ if (!Array.prototype.map) {
var
canvasOffset
=
$canvas
.
offset
();
that
.
addElement
(
$
.
extend
({
position
:
{
centerLeft
:
e
.
clientX
-
canvasOffset
.
left
,
centerTop
:
e
.
clientY
-
canvasOffset
.
top
,
centerLeft
:
e
.
clientX
-
canvasOffset
.
left
+
$
(
window
).
scrollLeft
()
,
centerTop
:
e
.
clientY
-
canvasOffset
.
top
+
$
(
window
).
scrollTop
()
,
},
text
:
null
,
},
newElementData
));
...
...
@@ -2686,56 +2790,6 @@ if (!Array.prototype.map) {
that
.
_focusedElement
=
element
.
id
;
};
// Show quick add marks
// FlowChart.prototype.showQuickAdd = function(node, onlyLinkMark) {
// var that = this;
// if (typeof node === 'string') {
// node = that.getElement(node);
// }
// if (!node || node.elementType.quickAdd === false) {
// return;
// }
// var $marks = node.$ele.find('.flowchart-quick-marks');
// if (!$marks.length) {
// var activeColor = that.options.activeColor;
// $marks = $([
// '<div class="flowchart-quick-marks" style="position:absolute;left:-16px;top:-16px;right:-16px;bottom:-16px;z-index:10">',
// '<div class="flowchart-quick-mark" data-direction="top" style="position:absolute;pointer-events:auto;width:16px;height:16px;top:0;left:50%;margin-left:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-up"></i></div>',
// '<div class="flowchart-quick-mark" data-direction="right" style="position:absolute;pointer-events:auto;width:16px;height:16px;right:0;top:50%;margin-top:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-right"></i></div>',
// '<div class="flowchart-quick-mark" data-direction="bottom" style="position:absolute;pointer-events:auto;width:16px;height:16px;bottom:0;left:50%;margin-left:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-down"></i></div>',
// '<div class="flowchart-quick-mark" data-direction="left" style="position:absolute;pointer-events:auto;width:16px;height:16px;left:0;top:50%;margin-top:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-left"></i></div>',
// '<div class="flowchart-quick-link-mark" style="position:absolute;pointer-events:auto;width:16px;height:16px;right:1px;bottom:1px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + ';border-radius:50%;cursor:move"><i class="icon icon-dot-circle"></i></div>',
// '</div>'
// ].join('')).appendTo(node.$ele);
// }
// var $children = $marks.show().children().show();
// if (onlyLinkMark) {
// $children.not('.flowchart-quick-link-mark').hide();
// }
// var options = that.options;
// if (node.bounds.left < (options.padding + 80 + options.horzSpace)) {
// $marks.find('[data-direction="left"]').hide();
// }
// if (node.bounds.top < (options.padding + options.nodeHeight + options.vertSpace)) {
// $marks.find('[data-direction="top"]').hide();
// }
// that._currentQuickAddNode = node;
// };
// Hide quick add marks
// FlowChart.prototype.hideQuickAdd = function() {
// var that = this;
// var node = that._currentQuickAddNode;
// if (!node) {
// return;
// }
// node.$ele.find('.flowchart-quick-marks').hide();
// that._currentQuickAddNode = null;
// };
// Show contextmenu
FlowChart
.
prototype
.
showContextMenu
=
function
(
ele
,
event
)
{
var
that
=
this
;
...
...
@@ -2834,14 +2888,6 @@ if (!Array.prototype.map) {
};
var
addRel
=
function
(
rel
)
{
addRelToPartialMap
(
rel
);
if
(
that
.
options
.
relationLineGap
)
{
if
(
rel
.
beginSideRels
)
{
rel
.
beginSideRels
.
forEach
(
addRelToPartialMap
);
}
if
(
rel
.
endSideRels
)
{
rel
.
endSideRels
.
forEach
(
addRelToPartialMap
);
}
}
};
if
(
element
.
fromRels
.
length
)
{
element
.
fromRels
.
forEach
(
addRel
);
...
...
@@ -2849,6 +2895,13 @@ if (!Array.prototype.map) {
if
(
element
.
toRels
.
length
)
{
element
.
toRels
.
forEach
(
addRel
);
}
}
else
{
if
(
element
.
fromNode
)
{
map
[
element
.
fromNode
.
id
]
=
element
.
fromNode
;
}
if
(
element
.
toNode
)
{
map
[
element
.
toNode
.
id
]
=
element
.
toNode
;
}
}
}
});
...
...
@@ -2926,14 +2979,13 @@ if (!Array.prototype.map) {
(
element
.
isRelation
?
relationList
:
nodeList
).
push
(
element
);
});
th
is
.
nodeList
=
FlowChartElement
.
sort
(
nodeList
);
th
is
.
relationList
=
FlowChartElement
.
sort
(
relationList
);
th
at
.
nodeList
=
FlowChartElement
.
sort
(
nodeList
);
th
at
.
relationList
=
FlowChartElement
.
sort
(
relationList
);
relationList
.
forEach
(
function
(
relation
)
{
relation
.
initRelationBeforeRender
();
});
var
partialRenderMap
=
that
.
_getPartialRenderMap
(
partialIDList
);
if
(
!
partialRenderMap
.
enabled
)
{
that
.
bounds
=
{
left
:
options
.
padding
,
top
:
options
.
padding
,
width
:
0
,
height
:
0
};
...
...
@@ -3160,6 +3212,10 @@ if (!Array.prototype.map) {
return
;
}
if
(
!
that
.
options
.
allowFreePorts
&&
(
!
fromPort
&&
!
toPort
))
{
return
;
}
return
that
.
addElement
({
type
:
'
relation
'
,
text
:
text
===
undefined
?
null
:
text
,
...
...
@@ -3346,6 +3402,20 @@ if (!Array.prototype.map) {
if
(
element
.
relationLineID
)
{
$
(
'
#
'
+
element
.
relationLineID
).
remove
();
}
var
fromNode
=
element
.
fromNode
;
if
(
fromNode
&&
fromNode
.
fromRels
&&
fromNode
.
fromRels
.
length
)
{
var
relIndex
=
fromNode
.
fromRels
.
findIndex
(
x
=>
x
.
id
===
element
.
id
);
if
(
relIndex
>
-
1
)
{
fromNode
.
fromRels
.
splice
(
relIndex
,
1
);
}
}
var
toNode
=
element
.
toNode
;
if
(
toNode
&&
toNode
.
toRels
&&
toNode
.
toRels
.
length
)
{
var
relIndex
=
toNode
.
toRels
.
findIndex
(
x
=>
x
.
id
===
element
.
id
);
if
(
relIndex
>
-
1
)
{
toNode
.
toRels
.
splice
(
relIndex
,
1
);
}
}
}
delete
that
.
elements
[
id
];
if
(
that
.
_focusedElement
===
id
)
{
...
...
@@ -3389,6 +3459,17 @@ if (!Array.prototype.map) {
return
dataList
;
};
FlowChart
.
prototype
.
exportTypes
=
function
(
includeInternalTypes
)
{
var
that
=
this
;
var
typesList
=
[];
$
.
each
(
that
.
types
,
function
(
_
,
elementType
)
{
if
(
!
elementType
.
internal
||
includeInternalTypes
)
{
typesList
.
push
(
elementType
.
exportType
());
}
});
return
typesList
;
};
// Change options
FlowChart
.
prototype
.
setOptions
=
function
(
newOptions
,
skipRender
)
{
$
.
extend
(
this
.
options
,
newOptions
);
...
...
@@ -3489,6 +3570,9 @@ if (!Array.prototype.map) {
// 激活状态颜色
activeColor
:
'
#3280fc
'
,
// 允许自由端口
allowFreePorts
:
false
,
// 是否移动时自动吸附网格
// 如果设置为 true,则设置网格为 5,如果为数值则为指定的网格大小
adsorptionGrid
:
5
,
...
...
@@ -3582,9 +3666,6 @@ if (!Array.prototype.map) {
// 端口线颜色
portLineColor
:
'
#333
'
,
// 连接线间距,如果设置为 0 则会合并同一方向上的连接线,否则会使用给定的值作为间距
// relationLineGap: 2,
// 关系连接线文本样式
relationTextStyle
:
{
},
...
...
@@ -3615,6 +3696,9 @@ if (!Array.prototype.map) {
// 自定义元素类型
elementTypes
:
{},
// 是否包含默认节点类型
initialTypes
:
true
,
// 初始数据
data
:
[{
id
:
'
start
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录