1.0.68 • Published 2 years ago

sg-dag v1.0.68

Weekly downloads
240
License
-
Repository
-
Last release
2 years ago

sg-dag

版本更新

1.0.3 固定 icon-state 的行高,以解决不同 html 行高默认值产生的样式差异
1.0.4 解决 setDagData 值为空时产生的异常
1.0.5 解决 dag 初始化特殊传值的异常
1.0.6 增加右键点击监听事件 onNodeRightClick
1.0.7 增加 defaultActions 配置,详见 api
1.0.8 节点执行状态码默认含义修改,不涉及使用变化(节点状态:0-正常(未运行),1-运行中,2-运行成功,3-运行失败,9-停用)
1.0.9 api 文档更新(events 部分有误,已修改)
1.0.10 组件属性更新,增加背景网格显隐、尺寸、颜色配置,详见 api
1.0.11 节点状态图标默认样式优化更新,增加节点各种状态图标样式、颜色配置项,详见 api
1.0.12 工具栏默认图标样式更新,增加 hover title
1.0.13 使用文档更新,组件未做修改
1.0.14 新增 findInputNodes 方法,找节点的输入节点,详见 api
1.0.18 画布 node 自增 id 会在节点删除再添加时重复出现的异常问题处理
1.0.19 findInputNodes 方法更新,返回节点及其输出口索引,详见 api
1.0.20 node 节点增加 icon_text 属性,显示于节点左侧 icon 上的文字,详见 api
1.0.21 node 节点增加双击修改节点显示名称的功能
1.0.22 解决部分 google chrome 浏览器的节点输入输出口只显示半圆的问题
1.0.23 node 节点增加 in_ports_tips & out_ports_tips 属性,节点输入输出口增加鼠标浮动出现 tooltips 的效果,详见 api
1.0.24 node 节点单击事件、双击事件冲突处理,单击事件增加延迟(200ms):error--单击事件异常
1.0.25 node 节点单击事件异常处理,readonly 为 true 时,不可编辑节点显示名称
1.0.26 node 节点增加 tooltips 显示,增加显示交互控制,详见 api
1.0.31 组件新增一个节点状态控制(state = 4,默认橙色,详见 api)
1.0.32 组件新增节点状态图标点击事件监听(onStateIconClick,详见 api)
1.0.33 组件节点删除图标更新,基于 southgisui 2.8.6
1.0.34 更新 southgisui 依赖,基于 southgisui 2.8.6
1.0.35 组件内部 sg-tree 暴露 props 属性配置,配置项为 tree-props,具体请参考 southgisui api
1.0.36 readonly 为 true 时,屏蔽所有节点的右键菜单的删除选项
1.0.37 新增一些配置项用于控制整个画布、节点、连线的样式,不配置的默认值与原先相同,详见 api
1.0.38 tooltip 改用 pre 加载,支持文本\n 换行,tree-data 默认值设置为 []
1.0.39 tooltip 支持背景、文字颜色配置,解决连线时虚拟圆点偏移问题,tree-data 默认值重新设置为 null
1.0.40 新增节点的入口端点的交互时 tooltip,详见 api
1.0.41 解决输入端点 tooltip 在中文情况下宽度显示异常的问题
1.0.42 取消鼠标移出画布的交互事件重置
1.0.43 增加 nodes-layout 属性,支持节点横版布局,默认'vertical',可选'horizontal'
1.0.44 增加 nodes-width 属性,支持节点宽度可配置,默认 180,最小 60
1.0.45 解决节点宽度可配之后节点样式显示异常问题
1.0.46 解决节点宽度可配之后在不显示节点状态图标节点样式异常的问题
1.0.47 解决节点宽度可配之后 tooltip 异常显示滚动条的问题
1.0.48 1.修正节点 default-actions 在 readonly 时仍可交互的问题; 2.增加 edgeActions 配置,为全局连线设置右键菜单事件; 3.连线数据对象新增 rightClickFunctions 可对连线定义右键事件; 4.新增 onEdgeRightClick 事件;5.完善 execUserFunction 事件说明,增加连线用户自定义事件处理
1.0.49 解决节点连线端点 tips 显示异常的问题;解决设置节点宽度后拖动节点交互显示异常问题
1.0.50 toElement & \$event.path 适配火狐浏览器
1.0.51 临时解决画布右侧节点连线右键菜单显示异常问题
1.0.52 框选批量操作交互优化,画布自动布局改用 dagre 重新实现
1.0.53 修正 readonly 逻辑,readonly=true 的状态下,可以显示节点与连线的右键菜单,但不显示删除节点、删除连线选项;新增连线右键点击监听事件,详见 api
1.0.54 修正 readonly=false 的状态下,dag 没有配置 defaultActions 配置项无法点出节点右键菜单的问题
1.0.55 增加自定义状态配置 state-list,详见 api
1.0.56 增加手动添加节点的方法 addNodeData,增加获取当前 dag 缩放比例方法 getScale,增加获取当前 dag 原点位置的方法 getLocation,详见 api
1.0.57 节点宽度样式修正,增加节点拖动时的 icon 样式交互,具体参照 sg-tree 的节点 icon 配置
1.0.58 增加子方案交互,详见 api
1.0.59 方案默认数据结构增加子方案 (subs: []),增加节点反选方法 toggleChoiceNodes
1.0.60 框选工具支持反向框选
1.0.61 节点树滚动条修改 sg-scrollbar,支持手动设置节点选中状态,详见 api
1.0.62 dag 事件暴露监听,如节点拖动、画布拖动、开启框选等,详见 api
1.0.63 节点连线时其他节点的输入口未正常显示异常处理
1.0.64 子方案标题区点击事件暴露
1.0.65 解决子方案对象自定义属性在监听事件返回参数中丢失的问题
1.0.66 优化子方案标题区点击事件暴露的条件,abs(offsetx) < 5 && abs(offsety) < 5 & offsettime < 200
1.0.67 更新组件对 southgisui 的依赖版本至 2.64.1
1.0.68 解决 1.0.67 版本 southgisui 升级后的画布节点渲染异常问题

待完善的任务记录

各个浏览器之间的兼容问题

API

props

属性说明类型默认值
dag-data初始化 dag 数据在未传入该属性时,dag 组件将展示一个空的画布Objectnull
tree-data初始化节点树数据,格式参考 【sgui -> 树组件 -> children】 在未传入该属性时,dag 组件将不显示节点树Arraynull
tree-props自定义算子树节点属性,等同于 southgisui sg-tree 中的 props 属性Objectnull
show-tree是否显示节点树,默认为 true,当为 false 时,tree-data 传入时也不显示节点树Booleantrue
svg-scale画布初始化显示比例Number1.0
svg-top画布初始化 topNumber0
svg-left画布初始化 leftNumber0
toolbar是否显示默认的工具栏,默认为 falseBooleanfalse
show-state是否显示节点状态,默认为 false 如果设置为显示,节点状态将由 node.state 属性控制并显示在节点的右侧,具体为以下 4 种状态: - 0 :未执行,显示为蓝色问号 - 1 :执行成功,显示为绿色对勾 - 2 :正在执行中,显示为灰色等待 - 3 :执行失败,显示为红色感叹号Booleanfalse
state-normal-type节点为默认状态时的状态图标样式,当 show-state 为 true 时有效,样式配置参照 sg-iconString'icon-help-fill'
state-normal-color节点为默认状态时的状态图标颜色,当 show-state 为 true 时有效String'#289DE9'
state-running-type节点为执行状态时的状态图标样式,当 show-state 为 true 时有效,样式配置参照 sg-iconString'icon-loading'
state-running-color节点为执行状态时的状态图标颜色,当 show-state 为 true 时有效String'#333'
state-success-type节点为成功状态时的状态图标样式,当 show-state 为 true 时有效,样式配置参照 sg-iconString'icon-success-fill'
state-success-color节点为成功状态时的状态图标颜色,当 show-state 为 true 时有效String'green'
state-warnning-type节点为警告状态时的状态图标样式,当 show-state 为 true 时有效,样式配置参照 sg-iconString'icon-info-fill'
state-warnning-color节点为警告状态时的状态图标颜色,当 show-state 为 true 时有效String'#F6B502'
state-failure-type节点为失败状态时的状态图标样式,当 show-state 为 true 时有效,样式配置参照 sg-iconString'icon-info-fill'
state-failure-color节点为失败状态时的状态图标颜色,当 show-state 为 true 时有效String'red'
state-other-type节点为其他状态时的状态图标样式,当 show-state 为 true 时有效,样式配置参照 sg-iconString'icon-info-fill'
state-other-color节点为其他状态时的状态图标颜色,当 show-state 为 true 时有效String'red'
show-menu是否显示节点的右键菜单, 默认为 trueBooleantrue
readonlydag 中的内容是否只读。只读状态下不可进行节点的编辑操作或连线的编辑,包括节点、连线的删除Booleanfalse
default-actions默认节点的右键菜单,全局配置到所有节点中,结构与 node rightClickFunctions 相同,与之不同的是,菜单配置信息不会出现在 dagData 中Arraynull
show-grid是否显示 dag 画布的背景网格Booleantrue
grid-sizedag 画布背景网格尺寸,在 show-grid 为 true 时有效Number25
grid-colordag 画布的网格线颜色,在 show-grid 为 true 时有效String'rgba(66, 66, 66, 0.05)'
always-show-tooltips是否始终显示节点的 tooltips,默认鼠标浮动显示Booleanfalse
bg-colordag 画布的背景颜色String'white'
style-node-color默认状态下的节点边框及内部左侧 icon 的颜色,在 tree-node 中定义了 color 属性时无效,以树节点定义的 color 为准String'#289de9'
style-node-bg-normal默认状态下的节点内部的背景颜色(未选中状态)String'hsla(0, 0%, 100%, 0.9)'
style-node-bg-selected默认状态下的节点内部的背景颜色(选中状态)String'rgba(227, 244, 255, 0.9)'
style-border-radius节点的圆角半径Number15
style-line-animation默认状态下连线的动画效果(虚线流动效果, false 时为实心线),在连线设置了 svg style 时以设置值为准Booleantrue
style-line-color默认状态下连线的颜色,在连线设置了 svg style 时以设置值为准String'#00c0ff'
style-tooltips-bg-colortooltips 背景色String'#1496bb'
style-tooltips-text-colortooltips 文字颜色String'#fff'
in-port-tooltips-type节点输入端点的 tooltip 交互模式,默认为'none':始终不提示;可选项'all':当连线时显示所有输入端点提示;可选项'hover':当连线拖拽至某一输入端点时,显示对应端点的提示String'none'
nodes-layout节点的布局(连线方向)方式,默认'vertical',即连线为竖向连线,可选'horizontal',即横向连线String'vertical'
nodes-width节点的显示宽度,默认 180,最小 60Number180
edge-actions默认连线的右键菜单,全局配置到所有连线中,结构与 edge rightClickFunctions 相同,与之不同的是,菜单配置信息不会出现在 dagData 中Arraynull
state-list节点自定义状态列表(控制节点右侧的图标显示),结构如: { state: 99, icon: 'icon-file', color: '#000'},其中,state 为节点的传入状态,icon 为 sgui 的 icon type,color 为自定义颜色,当自定义状态与 dag 所含的默认状态冲突时,以自定义状态为准显示 中Arraynull

methods

方法名说明返回参数
getDagData获取当前的 dag 数据dagData:Object--
setDagData为当前的 dag 组件设置数据--(dagData:Object)
getNodeData通过 node 的 id 获取一个 node 节点的数据nodeData:Object(nodeId:Number)
setNodeData通过 node 的 id 及 node 的数据 为一个指定的节点设置数据--(nodeId:Number, nodeData:Object)
getEdgeData通过 edge 的 id 获取一个 edge 连线的数据edgeData:Object(edgeId:Number)
setEdgeData通过 edge 的 id 及 edge 的数据 为一个指定的连线设置数据--(edgeId:Number, edgeData:Object)
getTreeData获取节点列表树的数据(sg-tree data)sgTree:Array--
setTreeData设置节点列表树的数据(sg-tree data)--Array
findInputNodes根据节点的 id 和输入口索引找该输入口的输入节点及其输出口索引{node,port}nodesInfo:Array(nodeId:Number, nodeInputIndex:Number)
fitView自动格式化画布中的节点,并将画布设置在一个合适的显示位置----
setScale设置 dag 的显示比例(scale)--(scale:Number)
setLocation设置 dag 的显示位置(top, left)--(top:Number, left:Number)
regionSelect开启节点框选,框选后可拖动所有选中的节点一次----
getScale获取 dag 的显示比例(scale)scale:Number--
getLocation获取 dag 的原点位置(距离左上角),返回值如 { top: 100, left: 100 }location:Object--
addNodeData添加一个节点,默认距屏幕左上角 100 距离,也可手动设置添加位置--(node:Object, top:Number, left:Number)
toggleChoiceNodes反向选中画布中的所有节点----
getChoiceNodes获取画布中选中的节点,返回值如{node1}, {node2}nodesData:Array--
setChoiceNodes设置画布中选中的节点并高亮显示,参数为节点 id 数组,如101, 102, 103--Array
clearChoice获取画布中选中的节点,返回值如{node1}, {node2}nodesData:Array--

events

事件名说明返回参数参数说明
onNodeAdd向 dag 画布中添加一个节点时触发nodenode 为添加的节点
onNodeClick画布中的节点点击的时候触发nodenode 为点击的节点
onNodeRgihtClick画布中的节点右键点击的时候触发nodenode 为点击的节点
onLinkStart开始一个节点的连线时触发nodenode 为开始连线的节点
onLinkEnd连线结束时触发edgeedge 为添加的连线
onNodeRemove节点删除时触发nodenode 为移除的节点
onEdgeRgihtClick画布中的连线右键点击的时候触发edgeedge 为添加的连线
onEdgeRemove连线删除时触发edgeedge 为移除的连线
onDagScaleChange画布缩放时触发from, tofrom 为比例改变前的数值,to 为比例改变后的数值
onStateIconClick节点状态图标点击时触发nodenode 为点击的节点
execUserFunction点击节点、连线右键菜单中的自定义事件触发objobj 为点击的节点(node) or 点击的连线(edge)
onEventChange画布动作事件切换时触发eventTypeeventType 为当前画布动作事件的类型,具体参考下面的 eventType 说明
onClickSubAreaTitle子方案标题区域点击时触发\$event, sub\$event 为 mouseup 事件本身,sub 为点击的子方案对象

dag data(Object)

dag (Object)

属性说明类型默认值
nodesdag 的节点数组Array[]
edgesdag 的连线数组Array[]
subsdag 的子方案信息Arraynull

node (Object)

属性说明类型默认值
id在一个 dag 组件中 nodes 的唯一 id,自动递增Number101
name节点的名称Stringnull
tooltips节点描述内容,tooltips 形式气泡显示Stringnull
in_ports节点的输入口个数Array0
in_ports_tips节点的输入口的 tooltips,与 in_ports 数组对应如'输入口 1 描述','输入口 2 描述'Arraynull
out_ports节点的输出口个数Array0
out_ports_tips节点的输入口的 tooltips,与 out_ports 数组对应如'输出口 1 描述','输出口 2 描述'Arraynull
color节点的颜色String#289de9
icon节点的左侧图标Stringnull
icon_text节点的左侧图标上的文字,中文不要超过 1 字符,数字不要超过 3 字符Stringnull
state节点的状态(0-正常(未运行),1-运行中,2-运行成功,3-运行失败,4-警告,9-停用)Number0
pos_x节点在画布中的 x 坐标Number0
pos_y节点在画布中的 x 坐标Number0
rightClickFunctions节点的自定义右键菜单项Arraynull

node rightClickFunctions (Array)

属性说明类型默认值
label菜单项名称Number--
functionName执行菜单项的方法名,需要同名注册到 dag 组件中String--
icon菜单项图标,参照 sg-iconStringicon-shezhi
color菜单向图标的颜色String#289de9

edge (Object)

属性说明类型默认值
id在一个 dag 组件中 edges 的唯一 id,自动递增Number100
src_node_id连线起点的节点 node idNumber--
src_output_idx连线起点的节点 node 输出口索引号(从左向右)Number--
dst_node_id连线终点的节点 node idNumber--
dst_input_idx连线终点的节点 node 输入口索引号(从左向右)Number--
style连线的 style,需通过 onLinkEnd 监听设置说明:连线为 svg path 标签, path 的 style 即连线的 styleObject--
edgeText连线中间的显示文字,默认不显示,需通过 onLinkEnd 监听设置String--
textStyle连线中间的显示文字的样式,需通过 onLinkEnd 监听设置说明:文字为 svg text 标签,text 的 style 即文字的 styleObject--
rightClickFunctions连线的自定义右键菜单项Arraynull

eventType (string)

说明
'none'当前画布无事件,处于准备状态
'node_drag'节点拖动
'node_link'节点连线
'graph_drag'画布移动
'ready_choose'开启框选节点
'node_choose'正在框选节点

edge rightClickFunctions : 结构同 node rightClickFunctions

sub (Object)

属性说明类型默认值
ids属于该子方案的节点 id 数组,如101,102,103,数组中的节点 id 必须在 dag.nodes 中存在并与节点 id 对应Array--
label子方案名称String--

tree data (Array)

tree

说明:tree 中节点的所有属性(包括自定义属性)在 添加节点时,均会赋值作为 node 的属性例如:可在 tree 中设置 rightClickFunctions 属性,在节点添加中会作为 node 的属性,并提供右键菜单项
!注意:tree 中只有叶子节点才可以添加到 dag 中
属性说明类型默认值
label节点名称(必要),参照 sg-tree childrenString--
in节点的输入口个数 (初始化使用),将会影响 node 的 in_ports 属性Number--
out节点的输出口个数 (初始化使用),将会影响 node 的 out_ports 属性Number--
...所有 sg-tree 节点的属性String--
1.0.68

2 years ago

1.0.67

2 years ago

1.0.66

3 years ago

1.0.65

3 years ago

1.0.64

3 years ago

1.0.62

3 years ago

1.0.61

3 years ago

1.0.60

3 years ago

1.0.63

3 years ago

1.0.59

3 years ago

1.0.58

3 years ago

1.0.57

3 years ago

1.0.56

3 years ago

1.0.55

3 years ago

1.0.54

3 years ago

1.0.53

3 years ago

1.0.52

3 years ago

1.0.51

3 years ago

1.0.50

3 years ago

1.0.49

3 years ago

1.0.48

3 years ago

1.0.47

3 years ago

1.0.46

3 years ago

1.0.45

3 years ago

1.0.44

3 years ago

1.0.43

3 years ago

1.0.42

4 years ago

1.0.40

4 years ago

1.0.41

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.20

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago