svg-flow-ts
- typescript
系统可用节点
-
NodeAbstract 抽象节点
- NodeBegin 开始
- NodeTask 任务
- NodeAudit 审核
- NodeSign 会签
- NodeCond 条件判断(NodeCondition)
- NodeSubFlow 子流程
- NodeParallel 并行
- NodeMerge 并行
- NodeEnd 结束
- NodeLnPoly 折线
- NodeLn 直线
-
节点选择边框点
- 圆形 circle , data 参数值包括 {pcode: 节点代码, posi: 连接点位置(a-h)}
-
特征值
- boxPadding 3 内边距
NodeLn 直线
-
特殊连接点: 三点连线式
- F/from,M/middle,T/to
-
特征值
{
focusPBkg: '#990000 聚焦点底色'
}
- 属性参数
{
P1: {x, y}, // 起点
P2: {x, y}, // 终点
r: number,
}
NodeLnPoly 折线
-
特殊连接点
- F/from, T/to
-
属性参数
{
P1: {x, y}, // 起点
P2: {x, y}, // 终点
MPs: {x, y}[] // 中间对列表
r: number,
}
- hover 事件
- 起点到第二个点之间触发有效,否则无效 [BUG]
基本算法或概念
- 基于节点中心点移动算法
workerflow 配置参数
new workerflow(config)
config = {
dom: ''
w: ''
h: ''
// 工具栏相关配置
toolBar: {
title: 'string 默认: 工具栏',
hasIcon: 'default=false bool 默认为空;设置值键启用默认值'
aUpSrc: '箭头向下图片地址:默认 arrow_up.png',
aDownSrc: '箭头向上图片地址:默认 arrow_down.png',
lnSeledBkg: ' 选择颜色码'
lnDefBkg: ' 默认颜色码',
// 菜单
menu: [
// 默认
[key]: {text: '名称'},
[value]: string
]
},
noToolBar: 'bool 关闭工具栏'
data: 'obejct' // 保存的历史数据
rCodes: 'string|string[]' // 运行过的节点代码, 字符串 'A1, A2, A*' => ['A1', 'A2', 'A*']
bkg: { // 背景色
urunNd: '#CDC5BF' // 未运行节点
urunTxt: '#000000' // 未运行文本
runningNd: '#0000FF' // 正在运行节点
runningTxt: '#FFFFFF' // 正在运行标签
ranNd: '#32CD32' // 运行过的节点(仅仅用于显示,不可拖动),已经运行
ranTxt: '#FFFFFF' // 已经运行的文本
lnHover: '#FF0000' // 连续聚焦颜色
}
disEpDragble: '端点禁止拖动大小'
disDragble: '禁止拖动,包括:连线,节点等'
disConnNode: '禁止节点连线'
disSR: 'default=false 禁止状态渲染'
bindOEvts: 'bool-绑定操作事件'
onKeydown: (code) => {} // bindOEvts 绑定事件以后
// 图标, 设置 icon 时,设置空值时会自动默认
icon: {
state: { // 状态
ran : 'state_ran.png | img-src' // 已经运行节点
runing: 'state_running.png | img-src' // 正在运行
}
}
closeSize: 'default=false bool 关闭自动撑高'
closeToolTip: 'default=false 关闭选题提示'
readonly: 'true' // 只读
}
// config.data 格式
{
step: [] // 步骤信息
_srroo: {
line: {} // 连接线
}
}
readonly 只读属性
快捷配置,仅仅用户显示用过
系统保存数据格式说明
{
"step": [],
"_srroo": {
"node": {},
"line": {},
"text": {}
}
}
src/WorkerEditor.ts 编辑器
- 属性说明
- tmpNodeMap 临时字典
{ connLnIst: rSu.Node // 当前正在连接的直线/折线实例, 直线保存起点和终点 // 节点属性 Node.data => {from_code: '代码', from_posi: '连线的位置', to_code: '终点节点代码', to_posi: '连接点位置' } }
- tmpNodeMap 临时字典
NodeAbstract
- 边框选择点( rSu.Node.select() )
- 特定属性: *** {pcode, posi} ***
- 属性值
- tRElem
- 注册用户:
{ box: '边框实例', __pa: '边框节点实例 __p{key} ' mc: '磁性连接点' }
- tRElem
RaphaelJs
- 鼠标移入移出检测
- mouseover/mouseout
系统自定义样式
- .flowts-tip
- div
- 坐标悬停提示控件