画布是一块无边界的白板区域,是用以显示和配置计算流程的桌面,可以从节点菜单中拖拽对应的控件到画布中作为计算脚本的节点,并通过节点之间的连接线表示节点执行顺序。
用户可以点击某个控件,从控件栏中拖拽对应的控件至画布区域,待鼠标松开后,则创建拖拽的控件节点,并给当前节点生成随机的编码,随机编码由字母、数字随机任意组成。
被创建的节点表现为被选中状态,节点图形内的显示内容分别是控件icon和节点名称。
节点是用户从控件栏拖拽至画布区域生成的一个控件实例,其是由上下左右四条边、控件icon以及节点名称组成的一个圆角矩形。
:width: 150px
节点的icon即为控件icon,有系统默认生成,不可修改。
节点名称处显示节点的名称,如果名称为空则显示编码,编码为空则会显示前端UID。
其中,上下左右四条边,每一个边的中点处都有2个连接桩,每个节点一共有8个连接桩。
:width: 150px
每个节点的上下左右四条边,各有一个数据输入连接桩与数据输出连接桩,且这两个连接桩的位置重合,一共8个连接桩,但只有4个连接点位。
每个连接点位只能同时展示一个连接桩,如果该点位作为数据输出连接桩连接了另一个节点进行数据输出,则该点位不可生成数据输入连接桩。所以,一个连接点位,要么进行数据输入,要么进行数据输出,不可同时配置。
节点一共有4个表现状态,默认状态、hover状态、待连接状态和选中状态。
默认状态的节点仅显示节点边线、节点icon与节点名称。
hover状态的节点显示节点的数据输出连接桩,鼠标移至对应的连接桩点位,点击拖拽即可生成连接线。
拖拽生成的连接线触碰到另一个节点时,此时节点状态为待连接状态,待连接状态的显示其4个数据输入连接桩,鼠标拖拽连接线至其中某一个数据输入连接桩后,松开点击即可生成节点连接线。
拖拽过程中,鼠标移开节点后,节点则恢复默认状态;
必须将连接线拖拽至一个数据输入连接桩后,才可以生成连接线,中途松开点击或未拖拽到连接桩均表示操作取消,不生成任何内容。
选中状态是在点击节点图形后,节点的表现状态,选中状态下,画布右侧会浮现节点属性栏,节点右上角会出现操作浮窗,用户可以点选操作浮窗中的配置项,目前的配置项仅支持”删除”功能,点击”删除”icon即可删除当前节点。
选中状态下的节点才可以在画布中拖拽,改变位置,且该节点对应的连接线会同步移动;
选中状态下的节点可以通过DELETE键删除。
点击节点图形后,节点进入选中状态,画布右侧会浮现节点属性栏。
节点属性栏是用来显示和配置节点属性的操作面板,属性栏不挤压任何画布区域,它是浮在画布之上的一个页面内容。
用户可以在属性栏中编辑对应的属性配置项,用户所有的编辑内容即时保存,不符合校验逻辑的内容在用户编辑后直接显示报错样式,但不阻止用户操作,用户进行发布时,统一在异常信息窗口显示。
如果在打开右侧属性栏页面后,点击其他任何非属性栏的页面区域即可收起当前节点属性栏;点击其他可唤起新的属性栏的热区区域即可收起当前节点属性栏,并同时打开新的属性栏。
有时候,属性栏会存在有二级展开页面的情况,例如下图所示场景:
:width: 1000px
点击某些配置项后,会在属性栏左侧展开二级页面,用以显示更详尽的配置内容,方便用户进行操作。
二级页面的表现和属性栏页面基本一致,二级页面的配置项编辑即时保存在前端缓存内,展开即可直接编辑,编辑内容作为一个节点属性配置项内容保存在节点配置信息中。
二级页面的收起规则相对复杂一些,大概有以下项:
点击二级页面右上角的”X”即可直接收起二级页面;
点击所有非属性栏配置页面区域(包括画布区域、当前属性栏区域等)时,直接收起当前属性栏的所有页面;
点击其他可唤起新的一级属性栏配置区域(其他任何节点或脚本属性栏)时,同样收起当前属性栏的所有页面,并打开新的属性栏配置页面;
点击所有属性栏配置页面区域(仅限于一级页面区域)即可收起当前二级页面;
点击属性栏可唤起新的二级页面配置区域时,同样收起当前二级页面,并打开新的二级页面。
节点连接线无法点击,鼠标hover状态下,即可显示删除icon,鼠标移至icon后点击即可删除对应的节点连接线。
:width: 150px
回到顶部
咨询热线