CN115509503A - 自动化流程的编辑方法、装置、电子设备和存储介质 - Google Patents
自动化流程的编辑方法、装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN115509503A CN115509503A CN202211193391.4A CN202211193391A CN115509503A CN 115509503 A CN115509503 A CN 115509503A CN 202211193391 A CN202211193391 A CN 202211193391A CN 115509503 A CN115509503 A CN 115509503A
- Authority
- CN
- China
- Prior art keywords
- grid
- node
- flow
- nodes
- editing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 318
- 230000008569 process Effects 0.000 title claims abstract description 254
- 238000003860 storage Methods 0.000 title claims abstract description 17
- 238000010586 diagram Methods 0.000 claims description 26
- 230000006870 function Effects 0.000 claims description 22
- 230000004044 response Effects 0.000 claims description 17
- 238000012545 processing Methods 0.000 claims description 16
- 230000006698 induction Effects 0.000 claims description 15
- 230000009471 action Effects 0.000 claims description 14
- 238000009877 rendering Methods 0.000 claims description 13
- 238000006243 chemical reaction Methods 0.000 claims description 12
- 230000002829 reductive effect Effects 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 8
- 238000013461 design Methods 0.000 abstract description 9
- 238000004891 communication Methods 0.000 description 6
- 238000004422 calculation algorithm Methods 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 4
- 238000003491 array Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 3
- 230000002457 bidirectional effect Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000000670 limiting effect Effects 0.000 description 2
- 238000003825 pressing Methods 0.000 description 2
- 238000004801 process automation Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000013519 translation Methods 0.000 description 2
- 238000013473 artificial intelligence Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 238000009432 framing Methods 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 230000036961 partial effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提出一种自动化流程的编辑方法、装置、电子设备和存储介质,自动化流程的编辑方法包括获取用户在流程编辑画布中执行的流程节点的操作信息;以及,基于流程节点的操作信息,对流程编辑画布中的流程图进行调整;其中,流程节点为由功能组件组成的流程图中的功能组件节点,流程编辑画布为网格画布,网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中。本申请能够规范各个功能组件的显示位置,提高自动化流程设计的可视性。
Description
技术领域
本申请涉及计算机软件技术领域,尤其涉及一种自动化流程的编辑方法、装置、电子设备和存储介质。
背景技术
机器人流程自动化(RoboticProcessAutomation,RPA),是以软件机器人及人工智能为基础的业务过程自动化技术,可以在计算机设备中模拟人工执行指令完成大量重复性工作,从而使员工从枯燥的工作中释放出来,提高工作效率。
如何设计和编排自动化流程是RPA技术的重点,目前的设计软件主要是通过列表式布局的方式编辑自动化流程,对于业务复杂的流程设计,存在可视性差的问题。
发明内容
基于上述需求,本申请提出一种交互界面可视性好且用户操作简易灵活的自动化流程的生成方法、装置、电子设备和存储介质,该方案能够用于克服现有技术中的自动化流程设计方案存在的可视性差的问题。
本申请提出的技术方案具体如下
第一方面,本申请提供一种自动化流程的编辑方法,包括:
获取用户在流程编辑画布中执行的流程节点的操作信息;其中,所述流程节点为由功能组件组成的流程图中的功能组件节点,所述流程编辑画布为网格画布,所述网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中;
基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整。
第二方面,本申请提供一种自动化流程的编辑装置,其包括:
获取模块,用于获取用户在流程编辑画布中执行的流程节点的操作信息;其中,所述流程节点为由功能组件组成的流程图中的功能组件节点,所述流程编辑画布为网格画布,所述网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中;
调整模块,用于基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整。
第三方面,本申请提供一种电子设备,其包括:
存储器和处理器;
其中,所述存储器用于存储程序;
所述处理器,用于通过运行所述存储器中的程序,实现如权利要求1至18中任意一项所述的自动化流程的编辑方法。
第四方面,本申请提供一种存储介质,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时,实现如第一方面所述的自动化流程的编辑方法的各个步骤。
本申请的自动化流程的编辑方法、装置、电子设备和存储介质,首先设置流程编辑画布为网格画布,且设置为网格画布中的每一流程节点均居中显示于对应网格中,如此,通过获取用户在流程编辑画布中执行的流程节点的操作信息;以及基于流程节点操作信息,对流程编辑画布中的流程图进行调整,从而能够实现自动化流程的生成和可视化编辑。如此设置,通过对流程编辑画布进行网格化设计,并将功能组件生成的流程节点居中显示于网格中,从而能够规范各个功能组件的显示位置,提高自动化流程设计的可视性。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据提供的附图获得其他的附图。
图1是本申请实施例提供的一种自动化流程的编辑方法的流程示意图;
图2是用户可在本申请实施例提供的流程编辑软件中执行的操作示意图;
图3是图1所示自动化流程的编辑方法的步骤S102的具体实现方法的流程示意图;
图4是本申请实施例提供的流程编辑画布中的网格感应区的位置结构示意图;
图5是本申请实施例提供的一种已编辑完成的自动化流程的结构示意图;
图6是对图5所示自动化流程进行调整后的自动化流程的结构示意图;
图7是本申请实施例提供的另一种自动化流程的编辑方法的流程示意图;
图8是本申请实施例提供的一种高亮边框线和单侧高亮线的结构示意图;
图9是本申请实施例提供的一种泳道区域的结构示意图;
图10是本申请实施例提供的一种扩大泳道区域的方法的原理示意图;
图11是在图10的基础上扩大后的泳道区域的结构示意图;
图12是本申请实施例提供的一种分组节点的结构示意图;
图13是本申请实施例提供的一种分组节点处于折叠状态下的结构示意图;
图14是本申请实施例提供的一种调整分组节点的关联流程节点的方法的原理示意图;
图15是本申请实施例提供的一种自动化流程的编辑装置的结构示意图;
图16本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合本发明的实施例,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。在不冲突的情况下,下述的实施例及实施例中的特征可以相互组合。
申请概述
为了使得本发明实施例的方案更容易理解。首先对相关现有技术进行简要说明。
如背景技术部分所述,相关技术中,目前的设计软件主要是通过列表式布局的方式编辑自动化流程,运用可视化流程拖曳设计技术实现无代码编辑。列表式布局的方案本质相当于一个列表容器,通过将功能组件编按照自上而下的积木式堆积来生成自动化流程。不过,随着业务场景的需求增多和逻辑越来越复杂,需要的功能组件越来越多,从而出现大量的功能组件紧凑密集地铺排整个界面的情况,导致极大地降低了流程的可视性、易读性和可维护性,增加了普通用户制作流程的难度和出错率。
针对上述问题,本发明提出一种。因此,本发明提出一种网格式的界面布局,通过限制功能组件的放置位置,来增加所编辑的自动化流程的可视性,同时也提高画布的空间利用率。以下通过多个实施例或示例对具体实现方案进行非限制性说明。
示例性方法
参照图1,本实施例提出一种自动化流程的生成方法。如图1所示,该方法至少包括以下步骤:
步骤S101:获取用户在流程编辑画布中执行的流程节点的操作信息。其中,流程节点为由功能组件组成的流程图中的功能组件节点,流程编辑画布为网格画布,网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中。
具体地,流程编辑画布,指的是本实施例方案中用于编辑自动化流程的可视化的画布模式界面,其中显示有多个规则排列的网格。网格的形状可以为矩形或其它形状,考虑可视性和易于编辑等因素时,优选为正方形网格。本发明的后续各实施例中,均以正方形网格为例进行说明。
编辑界面至少包括菜单区域、功能组件区域和流程编辑画布。菜单区域包括实现各种功能的菜单选项,比如打开已创建的自动化流程、新建流程编辑画布等等。功能组件区域展示有多种不同的功能组件,每种功能组件代表一种可添加至自动化流程中的可执行动作,比如打开浏览器、点击网页元素和输入特定信息,等等;用户可通过鼠标点击功能组件区域展示的功能组件并拖动至流程编辑画布的方式,将所选择的功能组件添加至流程编辑画布的某个网格中,被拖动的功能组件将自动在该网格中居中显示,形成流程节点。如此,可保证美观的同时,省去用户将多个流程节点对齐的步骤,简化用户操作;并且,当流程编辑画布中的流程节点的数量较多时,由于每个流程节点均在对应的网格中居中显示,因此可大大提高流程节点的可视性。
此外,用户还可以在不同网格中的流程节点之间添加带有指向箭头的连接线,该连接线可以指示自动化流程的动作执行顺序,从而进一步提高自动化流程在编辑生成过程和后续维护过程中的可视性。
此外,在RPA自动化流程的编辑场景下,添加连接线时,需要验证连接线的合法性,若待添加的连接合法,则允许添加,否则不允许添加。合法性包括:①不允许源流程节点和目标流程节点为同一节点,也即不允许连接线形成闭环;其中,源流程节点指的是连接线的起始端对应的流程节点,目标流程节点指的是连接线的末尾端对应的流程节点。②同一对源流程节点和目标流程节点之间只允许创建一条连接线。③限制开始节点的出度为1,入度为0;并限制结束节点的出度为0。其中,开始节点指的是由表示流程开始的功能组件形成的流程节点,相应地,结束节点指的是由表示流程结束的功能组件形成的流程节点。入度指的是终止于该流程节点的连接线的数目,出度指的是起始于该流程节点的连接线的数目。
其中需要说明的是,本实施例的实现流程编辑的软件可以但不限于是基于AntvX6等图编辑引擎开发的。以AntvX6图编辑引擎为例,在应用前,需要使用AntvX6图编辑引擎提供的Graph类初始化流程编辑画布,且用户可对流程编辑画布的部分配置项进行自定义,以实现视觉上和操作上的个性化设置。自定义配置项比如可以包括:背景色,也即用户可以自定义画布的背景颜色;画布平移,包括画布平移的方式和动画效果等;网格的大小和样式(包括形状和颜色等);选择框的样式;滚轮的样式;缩略地图的样式;连接线的样式,等等。
步骤S102:基于流程节点的操作信息,对流程编辑画布中的流程图进行调整。
具体地,流程编辑画布中的流程图也即上述的自动化流程。用户可以对正在编辑或已编辑好的流程图进行进一步调整,以生成或修改自动化流程。参照图2,用户可对流程图进行的操作包括但不限于创建连接线、新增流程节点和改变已生成的流程节点的位置等等。以下分别通过多个实施例对用户可执行的操作进行说明。
如图2所示,一些实施例中,用户执行的操作可以为在流程节点之间创建连接线。则步骤S101中获取的操作信息包括连接源流程节点和目标流程节点的操作对应的操作信息;相应地,步骤S102具体可以包括:响应于该操作信息,生成从源流程节点指向目标流程节点的连接线。
具体地,实际上,流程编辑过程中的流程节点和连接线等对应的数据信息均采用特定的格式(比如数组)进行存储。流程节点相关的数据信息可以包括:每个流程节点的唯一标识ID字段,用于标识不同的流程节点;每个流程节点所在的网格的行列索引,用于标识流程节点所在的网格位于流程编辑画布的第几行和第几列;组件图标标识符,用于标识形成流程节点的功能组件当前采用的图标样式;key字段,用于标识后端服务器的请求接口;以及接口函数所需的参数,等等。
基于此,当用户执行创建连接线的操作时,编辑软件获取到的操作信息可以包括创建连接线的操作指令以及源流程节点的唯一标识ID和目标流程节点的唯一标识ID等。当获取到相关信息后,即可在流程编辑画布中的对应流程节点之间生成连接线。通过连接线,用户可以更直观地看到流程动作的执行顺序。
继续参照图2,一些实施例中,用户执行的操作可以为新建流程节点,也即在流程编辑画布中新增流程节点。则步骤S101中获取的操作信息可以包括拖动功能组件的操作对应的操作信息;相应地,如图3所示,步骤S102具体可以包括:
步骤S1021:响应于将功能组件拖入流程编辑画布的拖动操作,确定拖动操作结束位置所在的网格。
具体地,本实施例中,用户可以根据需要,通过将功能组件区域中的某一个功能组件拖动至流程编辑画布的某一个网格中的方式,生成新的流程节点。其中,拖动操作结束位置,指的是用户释放鼠标按键的时刻,鼠标光标所在的实际位置。拖动操作结束后,被拖动的功能组件将被释放。
一些实施例中,步骤S1021具体可以包括:基于拖动操作结束位置以及预设的网格宽度和网格高度,确定拖动操作结束位置所在网格的行列索引;基于拖动操作结束位置所在网格的行列索引,确定拖动操作结束位置所在的网格的坐标。
具体地,可以预先根据需要,将流程编辑画布的某一个网格的行列索引均定义为一,也即定义某一个网格为第一行第一列,则其右侧的网格的行索引也为一,列索引为二;其下侧的网格的行索引为二,列索引为一,以此类推。如此,通过网格的行列索引,即可定位到唯一的网格。
考虑实际应用时,优选地,一般将流程编辑画布的最左上角的网格定义为第一行第一列,本发明的后续实施例中均以此为例进行说明。但可以理解,也可以将其他网格定义为第一行第一列,对此并不进行限制。
在确定拖动操作结束位置所在网格的行列索引之后,再结合网格宽度和网格高度,即可计算的得到该网格的坐标。其中,可采用网格边框的某个顶点的坐标来表示该网格的坐标,比如可以以网格左上角的坐标来表示网格的坐标。
举例来说,假设定义最左上角的网格为第一行第一列,且该网格的左上角顶点的坐标为(0,0),并假设网格的宽高均为1000,则通过计算可以得到第三行第四列的网格的坐标为(3000,4000)。
步骤S1022:基于拖动操作结束位置所在的网格,确定目标网格。
具体地,当用户结束对功能组件的拖动后,被拖动的功能组件将被释放并居中显示在目标网格中,本步骤的目的在于确定该目标网格。
进一步地,一些实施例中,步骤S1022具体可以包括:
①若拖动操作结束位置所在的网格中不存在流程节点,则确定拖动操作结束位置所在的网格为目标网格;②若拖动操作结束位置所在的网格中存在流程节点,则根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格,或者,确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中。
也即,根据拖动操作结束位置所在的网格,实际中存在两种情况,第一种情况是该网格中不存在流程节点,这种情况下直接确定拖动操作结束位置所在的网格为目标网格即可。第二种情况是该网格中存在流程节点,这种情况下,可以有两种处理方式,一是将当前拖动并释放的功能组件在该网格的相邻网格中进行显示;二是将该网格中的流程组件移至其他网格中,并将当前拖动并释放的功能组件在该网格中进行显示(通俗来说,相当于使该网格中原有的流程节点“让出位置”)。
针对上述的第二种情况,一些可行的实施例中,两种处理方式的具体实现过程如下:
首先,预先设定流程编辑画布中的各个网格中均包含多个对应于不同相邻网格的感应区,其中感应区包括第一类感应区和第二类感应区。如图4所示,感应区可以包括位于网格的四个侧边的四个感应区,也即上侧感应区、下侧感应区、左侧感应区和右侧感应区。感应区实质上类似于盒子模型(Box Model)的内边距区域(Padding)。需要说明的是,图4示出的4个感应区中,相邻两个感应区存在部分重叠,对于重叠部分,可预先设定其属于哪一个感应区。
根据实际需要可以将多个感应区的一部分定位第一类感应区,其余部分定位为第二类感应区。比如,可以将右侧感应区和下侧感应区定义为第一类感应区,将左侧感应区和上侧感应区定义为第二类感应区。
则基于此,根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格(也即上述的第二种情况的第一种处理方式)的步骤具体可以包括:
1)若拖动操作结束位置位于所在的网格的第一类感应区内,则确定拖动操作结束位置所在的第一类感应区对应的相邻网格为目标网格;
2)若拖动操作结束位置不位于所在的网格的任一感应区内,则按照预设优先级从拖动操作结束位置所在的网格的相邻网格中确定出目标网格;其中,预设优先级包括不同侧的相邻网格对应的不同优先级。
具体地,一些实施例中,如果将右侧感应区和下侧感应区定义为第一类感应区,也即当用户将功能组件放置到已存在流程节点的某个网格的右侧感应区或下侧感应区时,则可以根据所在的感应区,确定该网格的右侧网格或下侧网格为目标网格。
而若用户将功能组件放置到已存在流程节点的某个网格中的所有感应区之外的位置(比如放置到图4所示的四个感应区中间的位置),则按照预设优先级从该网格的相邻网格中确定出目标网格,也即,优先确定优先级最高且不存在流程节点的相邻网格为目标网格。比如,可以预先设定右侧网格、下侧网格、上侧网格和左侧网格的优先级依次降低,那么,当右侧网格中不存在流程节点时,最优先确定右侧网格为目标网格;当右侧网格中也存在流程节点时,次优先确定下侧网格为目标网格,以此类推。
此外,确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中(也即上述的第二种情况的第二种处理方式)的步骤具体可以包括:若拖动操作结束位置位于拖动操作结束位置所在的网格的第二类感应区内,则确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中。
具体地,一些实施例中,如果将左侧感应区和上侧感应区定义为第二类感应区,也即当用户将功能组件放置到已存在流程节点的某个网格的左侧感应区或上侧感应区时,则可以根据所在的感应区,确定该网格为目标网格,并确定该网格中已存在的流程节点待移至右侧网格或下侧网格中。
综上,当用户拖动并释放功能组件后,可以根据实际情况,采用不同的处理策略,确定该功能组件的最终显示位置。
步骤S1023:将被拖动的功能组件显示于目标网格中,得到流程节点。
具体地,在确定目标网格后,即可将被拖动的功能组件显示于目标网格的中心,从而得到流程节点。
进一步地,一些实施例中,若确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中,则上述方法还可以包括:将拖动操作结束位置所在的网格中的流程节点移至相邻网格中,并调整当前网格的关联网格中的各个流程节点的位置,以及更新各个流程节点之间的连接线。
具体地,实际中,在已编辑得到多个流程节点并创建连接线之后,若某个流程节点的位置发生了改变,则可同步调整该流程节点的关联流程节点的位置和连接线,以使保证整个流程图的流畅。
此外,如图2所示,一些实施例中,用户执行的操作还可以为移动流程节点,也即将流程编辑画布网格的流程节点移动至其他网格中。则步骤S101中获取的操作信息可以包括拖动功能组件的操作对应的操作信息;相应地,步骤S102还可以包括:
响应于将流程编辑画布的第一网格中的流程节点对应的功能组件拖动至第二网格的拖动操作,将被拖动的功能组件显示于第二网格中,并删除第一网格中的流程节点。
也即,用户除了可以从功能组件区域拖动功能组件至流程编辑画布中,从而新建流程节点之外,也可以在编辑或维护自动化流程的过程中,将之前生成的流程节点对应的功能组件从所在网格(第一网格)中拖动至另一个网格(第二网格)中,从而对流程进行重新编辑。移动过程中的具体处理与生成新的流程几节点时的处理类似,主要区别在于,移动过程实际可以看作两部分处理,也即,一是在第二网格中添加流程节点,这部分与新建流程节点的处理过程一致;二是删除第一网格中的原有的流程节点。
并且,在移动流程节点之后,也可同步调整被移动的流程节点的关联流程节点的位置和连接线,以使保证整个流程图的流畅。
为了更容易理解,进行如下举例说明:参照图5,某个已编辑完成的流程包括四个流程节点,分别为:开始、打开浏览器、点击网页元素和结束,且这四个流程节点从左向右依次排列。基于此,当想要在“打开浏览器”和“点击网页元素”这两个流程节点之间增加一个新的流程节点“指定网页元素输出”时,用户可将新的流程节点对应的功能组件,拖动至“点击网页元素”这一流程节点的左侧感应区内,则“点击网页元素”这一流程节点将被移动至右侧网格中,但由于“点击网页元素”右侧的网格中也存在流程节点(也即存在“结束”这一流程节点),因此右侧的网格中的流程节点也需要适应性调整,也即将其同步向右侧网格移动。并且,在添加“指定网页元素输出”流程节点之后,还可以自动将这一流程节点与前一流程节点和后一流程节点之间生成连接线,从而省去用户操作。调整后的流程节点如图6所示。
一些实施例中,当前网格的关联网格包括:行索引大于或等于当前网格的行索引的网格,或者,列索引大于或等于当前网格的列索引的网格。也即,当前网格的关联网格可以是位于当前网格同一列以及右侧的网格,或者是位于当前网格同一行以及下侧的网格。
那么相应地,一些实施例中,调整当前网格的关联网格中的各个流程节点的位置,具体可以包括:
若根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格,且相邻网格的行索引大于当前网格的行索引,则将行索引大于当前网格的行索引的所有网格中的流程节点移至行索引增加一的网格中;
若确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中,且相邻网格的行索引大于当前网格的行索引,则将行索引大于或等于当前网格的行索引的所有网格中的流程节点移至行索引增加一的网格中;
若根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格,且相邻网格的列索引大于当前网格的列索引,则将列索引大于当前网格的列索引的所有网格中的流程节点移至列索引增加一的网格中;
若确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中,且相邻网格的列索引大于当前网格的列索引,则将列索引大于或等于当前网格的列索引的所有网格中的流程节点移至列索引增加一的网格中。
也即,如果将被拖动的功能组件布置到当前网格的右侧或下侧,则当前网格以及同一行或同一列中原有的流程节点都不移动,仅对当前网格的右侧或下侧的流程节点进行移动;而如果将被拖动的功能组件布置到当前网格,且将当前网格原有的流程节点移动至右侧或下侧,则当前网格右侧或下侧的流程节点同步进行移动。如此,可以保证整个流程图的步骤顺序与移动前一致。
为了使上述方案更容易理解,以将第一网格中的流程节点移动至第二网格的过程为例,对流程节点布局调整算法进行举例说明如下:
步骤一:判断第二网格中是否存在流程节点,如果第二网格不存在流程节点,则在第二网格中添加流程节点时,必定不会影响关联网格中的其他流程节点,因此执行步骤四。如果第二网格中存在流程节点,则在用户将功能组件拖动至某一感应区并释放时,确定具体位于哪一个感应区,如果位于上侧感应区或下侧感应区,则执行步骤二;如果位于左侧感应区或右侧感应区,则执行步骤三。
步骤二:假设第二网格的行索引为x,则遍历流程编辑画布中所有的流程节点,如果在上侧感应区释放功能组件,则行索引大于或等于x的流程节点都向下移动一格,新增流程节点的行索引为x。如果在下侧感应区释放功能组件,则行索引大于x的节点都向下移动一格,新增流程节点的行索引为x+1。之后执行步骤四。
步骤三:假设第二网格的列索引为y,则遍历流程编辑画布中所有的流程节点,如果在左侧感应区释放功能组件,则列索引大于或等于y的流程节点都向右移动一格,新增流程节点的列索引为y。如果在右侧感应区释放功能组件,则列索引大于y的流程节点都向下移动一格,新增流程节点的列索引为x+1。之后执行步骤四。
步骤四:将流程编辑画布中的流程节点分为三类:第二网格上侧的流程节点,存放在数组A,这些流程节点不需要移动;第二网格同行的流程节点,除被移动的流程节点自身之外,存放在数组B;第二网格下侧的流程节点,存放在数组C。当数组B中没有流程节点时,将数组C中的所有流程节点都向上移动一格。之后输出三类数组即得到移动后的流程节点。
通过上述算法,即实现了流程节点的移动和删除,同时也移除了不包含流程节点的空行。
此外,用户也可以主动删除一个已生成的流程节点或批量删除多个已生成的流程节点,具体不再详述。
此外,参照图7,一些实施例中,上述自动化流程的编辑方法还包括:
步骤S201:响应于对功能组件的拖动操作,确定拖动操作对应的实时位置。
步骤S202:基于拖动操作对应的实时位置,展示指示线;指示线包括高亮边框线,高亮边框线用于指示拖动操作对应的实时位置所在的当前网格。
具体地,功能组件被拖动过程中,可能会依次经过不同的网格,基于此,可实时展示高亮边框线,也即高亮显示功能组件当前对应的网格的边框,从而使用户能够更好地观察到当前释放功能组件时,功能组件当前对应的网格,提高可视性,进而辅助用户更准确地将功能组件放置到特定的网格中。
其中,具体实现时,可在流程编辑画布进行初始化时预先绘制高亮边框线,并将其放置到流程编辑画步中用户不可见的位置,当需要显示高亮边框线时,再将其移入流程编辑画步中的可视区即可。高亮边框线的具体表现形式比如可以是相对于网格的边框线的线宽更大,和/或,颜色不同,和/或,线条类型不同,等等。
在上一实施例的基础上,当用户拖动功能组件经过不同的网格时,高亮边框线实际上不是平滑移动的,而是每次以单个网格的宽度(或高度)为步长进行“跳跃”的,这会给用户视觉上带来顿挫感。针对此问题,一些实施例中,在流程编辑画布中,可以在用于形成多个网格的多条交叉的主网格线之间,等间距地设置多条次网格线(比如可以是64条),次网格线相对于主网格线的线宽可适当缩小,以便更好地区分二者。当设置次网格线后,在用户拖动功能组件时,可在显示高亮边框线时,可以对应于次网格线形成的网格进行显示,也即减小高亮边框线每次“跳跃”的步长,从而可以减小顿挫感。相邻主网格线之间的次网格线的数量越多,则用户视觉上感觉到越平滑。
此外,一些实施例中,若流程编辑画布中的各个网格中均包含多个对应于不同相邻网格的感应区,则指示线还包括单侧高亮线;单侧高亮线用于在拖动操作对应的实时位置所在的当前网格中存在节点时,指示实时位置当前所在的感应区。
具体地,本实施例中,若网格中包括前述实施例所述的感应区,则可以通过单侧高亮线指示拖动操作对应的实时位置所在的感应区,以便用户能够更准确地将功能组件拖动到指定的网格中。高亮边框线的具体表现形式,比如可以是在网格的靠近边框线的附近设置的、颜色不同和/或线条类型不同的一条线段,等等。
为了更直观地理解,图8示出了高亮边框线和单侧高亮线的一种形式。其中,高亮边框线采用更大线宽(相对于网格的边框线)的虚线表示,单侧高亮线也采用虚线表示。
此外,在一些实施例中,参照图9所示,流程编辑画布中还展示有多个沿第一方向延伸的泳道区域,各个泳道区域中均包括多个网格;泳道区域用于提示将实现同一功能的功能组件放置于同一泳道区域内。
如图9所示,示出了3个泳道区域(也即泳道1、泳道2和泳道3),用户可以在不同的泳道区域内编辑不同的流程,并且,还可以为泳道区域重新命名或者添加备注,比如可以根据当前泳道区域中的流程所实现的功能进行命名或添加备注,以便于后续调整、维护时,能够更直观地了解到该泳道区域中的流程的功能。重新命名或者添加备注的具体操作,可以是修改图9中右上角的“泳道1”字样处的内容,修改后的内容将会显示在对应的位置,以便用户查看。
其中需要说明的是,图9中示出的泳道区域的延伸方向为从左向右延伸,也即第一方向为从左向右。为了统一,本发明后续各实施例中均以第一方向为从左向右为例进行说明。但可以理解,另一些实施例中,第一方向也可以为其他方向,比如从上向下等,对此并不进行限制。
一些实施例中,在流程编辑画布中展示有泳道区域的基础上,如图2所示,用户可执行的操作还可以包括调整泳道区域大小,具体地,上述自动化流程的编辑方法还可以包括:
在响应于对功能组件的拖动操作将功能组件显示于目标网格中时,若目标网格不包含于拖动操作结束位置所在的泳道区域,则扩大拖动操作结束位置所在的泳道区域的大小,以使目标网格包含于扩大后的泳道区域;和/或,
在响应于对功能组件的拖动操作将第一网格中的流程节点移出后,若目标区域中的所有网格中均不存在流程节点,则缩小泳道区域的大小,以使目标区域不包含于缩小后的泳道区域;其中,目标区域为与第一网格同在第一方向上排列的所有网格所在的区域。
也即是说,用户在泳道区域中新增流程节点或移动流程节点时,可以根据对应的操作扩大或缩小泳道区域的面积。具体地,一种可行的实现方案如下:
参照图10,当需要扩大泳道区域时,用户可以将功能组件拖动至已存在流程节点的网格的下侧(或上侧)感应区并释放,则当前拖动的功能组件(或当前网格中的流程节点对应的功能组件)将会被放置到下侧网格中,同时泳道区域也会扩大,结果如图11所示。
而当用户将某一行中的所有流程节点都移至其他行(或删除)之后,由于该行的所有网格都不包括流程节点,因此可以将该行网格从泳道区域中删除,即实现了泳道区域的缩小(缩小了一行)。
实际中,泳道区域本质上也是流程编辑画布中的一类节点,且由于可以纵向拓高(扩大)或收缩(缩小),因此泳道区域节点占据的行数是变化的,因而需要存储泳道区域的数据信息,包括泳道ID、泳道描述(也即泳道的名称和备注)、泳道所在的最小行数和泳道所在的最大行数等。泳道区域的更新(也即扩大和缩小),主要是通过流程编辑画布中流程节点的数据的更新来实现,流程节点数据维护了其所在泳道ID和行列索引,根据此数据便可计算出每个泳道区域的最小行和最大行,进而更新泳道区域占据的行数,过程如下:
(1)根据流程节点数据生成新的泳道区域对象,对象的属性名表示泳道ID,对象的属性值为位于该泳道区域的流程节点数组。流程节点数组例如可以表示为:{泳道ID1:[节点11,节点12,…],泳道ID2:[节点21,节点22,…]}
(2)遍历同一泳道区域的流程节点,记录流程节点数组中最大和最小的行索引值,即为该泳道区域覆盖的所有区域。
(3)存储新的泳道区域数据,并重新渲染流程编辑画布中的泳道区域节点。
上述实施例中,通过设置泳道区域,可以提高可视性,便于用户在编辑和维护流程图时,更快地了解到每个流程的功能和布局等信息,提高用户的使用体验。
此外,如图2所示,一些实施例中,用户执行的操作还可以为创建分组操作,也即将多个流程节点划分为同一组。则步骤S101中获取的操作信息可以包括分组操作对应的操作信息;相应地,步骤S102具体可以包括:
响应于分组操作,将用户所选择的至少两个相邻流程节点划分为同一分组,得到分组节点,并显示分组节点对应的分组标识;分组标识包括分组框线,分组框线用于指示包含于分组节点的所有流程节点。
具体地,参照图12,图中的“打开浏览器”、“指定网页元素输出”和“点击网页元素”三个流程节点被划分为同一组,分组框线即所述三个流程节点外侧的框线。在编辑流程图时,用户可以将部分在功能上相互关联的流程节点划分为同一分组,从而便于后续编辑和维护。
实际中,可配置为:用户能够通过按下键盘按键(单个按键或组合按键,比如同时按住ctrl键和shift键),并框选想要划分为同一分组的流程节点,来实现分组操作。并且,在实现时,需规定开始节点、结束节点、泳道节点、分组节点及分组节点内的流程节点不能被选中,也即不能被分组。此外,对框选的节点进行分组后,可绘制分组节点的分组框线,并将选中的流程节点嵌套在分组节点中,即作为分组节点的子节点。分组节点的坐标和宽高的计算,可通过遍历其包含的所有子节点并获取最左上角和最右下角的流程节点的行列索引得到。
此外,如图2所示,一些实施例中,用户执行的操作还可以为折叠分组和展开分组操作,也即将分组节点中的多个流程进行折叠,以及将折叠的节点展开。则步骤S101中获取的操作信息可以包括对分组节点的折叠操作对应的操作信息;相应地,步骤S102具体还可以包括:
响应于对分组节点的折叠操作,将分组节点切换为折叠状态,并调整分组节点的关联流程节点的位置,以及更新各个流程节点之间的连接线;其中,在折叠状态下,包含于分组节点中的所有节点被替换为占位节点,占位节点占用一个网格;以及,响应于对分组节点的展开操作,将分组节点切换为展开状态,并更新各个节点之间的连接线。
具体地,参照图12,分组标识还可以包括折叠标识,也即图12中分组节点右上角的图标,当点击该折叠标识时,可以将分组节点切换为图13所示的折叠状态。折叠状态下,分组节点的坐标不变,但大小只占一个网格(也即图13中的“浏览器操作分组”这一节点,其也即占位节点,占位节点并不具有可执行的功能,仅用于占据一个网格的位置),此时流程编辑画布中不展示分组节点内的子节点。并且,在折叠状态下,当点击折叠标识时,可以重新将分组节点切换为图12所示的展开状态,展示分组节点包括的所有子节点。
此外,如图13所示,将分组节点切换为折叠状态时,由于分组节点由占据多个网格变为仅占据一个网格,因此可调整关联节点的位置,并调整节点间的连接线,以使整个流程图更紧凑。
因此,通过分组操作可以对功能进行分类,而通过对分组节点的折叠操作,可以降低流程图的复杂度,同时也可以节省流程编辑画布的空间。
实际中,由于分组节点折叠状态下只占一个网格,也即占位节点的所在的网格,因此切换为折叠状态时,需要调整其他的流程节点的位置,在图12和13对应的实施例中,也即使流程节点整体向左上方向收缩。同理,分组节点切换为展开状态时,其他节点需往右下方向扩展,以便留出足够的网格空间,用以展示分组节点包括的各个子节点。
也即,一些实施例中,若占位节点的行索引为分组节点包括的所有流程节点对应的最小行索引,且占位节点的列索引为分组节点包括的所有流程节点对应的最小列索引,则关联流程节点包括:第一类流程节点和第二类流程节点;其中,第一类流程节点为:行索引等于分组节点包括的任一流程节点的行索引且列索引大于分组节点包括的所有流程节点的最大列索引的所有流程节点;第二类流程节点为:行索引大于占位节点的行索引且列索引小于占位节点的列索引的所有节点,以及,行索引大于分组节点包括的所有流程节点的最大行索引且列索引大于或等于占位节点的列索引的所有节点。
则相应地,调整分组节点的关联流程节点的位置的步骤具体可以包括:将各第一类流程节点向列索引减小的方向平移;将各第二类流程节点向行索引减小的方向平移。通过前述的移动方式,即可在将分组节点切换为折叠状态后,对关联流程节点进行对应的调整,使整个流程图更紧凑。
为了更容易理解,结合附图对调整分组节点的关联流程节点的位置的过程进行举例说明:
参照图14,分组节点处于展开状态时,将流程编辑画布中的流程节点分成四类,节点G表示分组节点内的子节点,在折叠后此类节点将不在流程编辑画布中展示;节点N表示分组节点内的最左上角的子节点的左侧和分组节点上侧的多行节点,此类节点必定不会移动;节点F表示在分组节点的行区间内右侧的节点,此类节点最先调整位置;节点S表示分组节点的第二行至末行区间内的左侧和分组节点的下侧的节点,此类节点可能需要调整;节点E代表该位置不存在节点,用于还原真实场景。各类节点的分布如图14的场景一所示。
假设分组节点的左上角的子节点所在网格的行列索引分别为minRow和minCol;右下角的子节点所在网格的行列索引分别为maxRow和maxCol。在具体调整时,首先移动节点F,因为折叠状态也需占一个网格,所以行索引等于minRow的节点向左移动(maxCol–minCol)格,其余的向左移动(maxCol–minCol+1)格。此时分组可以顺利折叠,且节省了空间,如图14的场景二所示。
然后处理可能存在的空行的情况。分组节点的第二行至末行可能不存在除分组子节点外的节点,那么折叠后就会产生空行。具体包括:首先将移动后的节点F中,除了处于minRow行的节点外,其余的都转换为节点S,之后遍历处于分组节点第二行至末行的节点S,对于行索引不存在节点S的行,即为空行。因此,删除空行实际就是遍历所有节点S,根据节点S的上方所含的空行数,将节点S向上移动相应格数。得到的调整结果如图14中的最终结果所示。
最后,创建一个虚拟节点数据,存储展开分组所需的必要信息,包括空行的相对行索引数组、所有子节点的相对行列索引数组、以及其余被移动的流程节点的相对行列索引数组等。其中,相对行列索引指的是相对于分组节点左上角网格的行列索引的相对值。
此外,将折叠状态的分组节点切换为展开状态时,展开前,分组节点只占一个网格,行列索引为minRow和minCol。行索引小于minRow和分组节点左方的节点必定不会移动。根据分组节点还原上述存储的空行的相对行索引的绝对位置,然后遍历行索引大于minRow的节点,如果该节点大于等于某空行的行索引,说明该节点在折叠过程中进行了上移操作,所以需要还原向下移动一格。同理,处理空行数组中下一个空行索引。最终将节点的行索引还原。最后,检索处于展开状态时分组区域的行区间内右方的节点,向右移动(maxCol–minCol)格即可。
可以理解的是,以上是以分组节点整体向左上角折叠为例进行的说明,但实际中,分组节点也可以是向其他方向折叠,其原理类似,具体不在详述。
此外,当涉及分组节点时,节点相关的数据信息还可以包括分组节点的相关信息,具体包括:每个分组节点的唯一标识ID字段,用于标识不同的分组节点;每个分组节点所在的网格的行列索引,用于标识分组节点所在的网格位于流程编辑画布的第几行和第几列;status字段,用于表示分组节点处于折叠状态或展开状态。
此外需要说明的是,以上各实施例所述的功能组件包括用于实现单个动作的基础功能组件和用于实现动作流的子流程功能组件。基础功能组件也即对应于某个单独的步骤,比如点击网页元素;而子流程功能组件是由多个基础功能组件按照一定的执行顺序构成,其表示一个完整可执行的动作流。用户使用时,可首先按照以上各实施例的方法编辑完成一个完整的自动化流程,然后将其定义为子流程,之后可通过拖动“运行子流程”的子流程功能组件至主流程的某个网格中的方式,实现对子流程的调用,如此,可避免主流程的流程节点过多,从而提高可视性。
此外,一些实施例中,上述的自动化流程的编辑方法还可以包括:在生成节点与连接线的过程中,进行数据转换处理;数据转换处理包括:将流程数据转换为节点数据以及将节点数据转换为渲染数据,以及,将渲染数据转换为节点数据以及将节点数据转换为流程数据;其中,流程数据包括节点的基本信息数据,节点数据包括待生成的各个节点的基本信息数据,渲染数据包括各个连接线的基本信息数据。
具体地,继续以X6图编辑引擎为例,其在隐藏分组节点中的子节点的同时,会把原有的连接线也清除,也即无法处理分组节点折叠状态下的连接线。所以本实施例提出上述的三层数据转换方法,第一次转换为由流程数据结合分组数据生成X6图编辑引擎支持的应用于绘制节点(包括功能组件生成流程节点、分组节点和占位节点)的数据结构(也即节点数据),即由flowData数据层转成X6数据层;而第二次转换则由X6节点数据生成最终画布渲染元素时所需数据格式(所有要展示的节点和连接线信息),即由X6数据层转成renderData数据层。
其中,flowData数据层转X6数据层的目的是生成节点的基本信息,步骤包括:
(1)通过特定的markup(标记形式)字段和attrs(样式)字段控制节点的结构和样式,功能组件节点由背景区域、组件图标、组件标题和提示图标等组成。对于分组节点,还可以包括控制展开和折叠状态的按钮。
(2)由行列索引计算出以像素为单位的节点坐标,对于展开状态的分组节点,遍历其子节点来计算分组节点的宽高大小。
(3)将子节点作为分组节点的属性值,形成树状数据格式,即子节点作为分组节点的分支。转换后的X6数据层,包括分组节点和不属于任何分组的流程节点。
X6流程编辑画布依据children字段判断父、子节点的关系,且所有要绘制的节点属于同一个层级,即最终发送一个一维数组nodeList至流程编辑画布进行渲染。由X6数据层转换为renderData数据层的任务是处理分组的展开状态和折叠状态的切换情况,用于扁平化X6数据层的树状格式,以及生成连接线数据。连接线数据主要包括source字段和target字段,source字段用于标识连接线的源流程节点(起始端),target字段用于标识连线的目标流程节点(末尾端)。所有连接线对应的连接线数据存储在数组edges,并发送至流程编辑画布进行渲染。
X6数据层转换为renderData数据层的步骤包括:
(1)初始化最终渲染到流程编辑画布上的节点数组nodeList、连接线数组edges。遍历X6数据层的节点,如果是不属于任何分组的流程节点则直接存储到nodeList;如果是分组节点,则再根据折叠和展开的状态分别执行步骤(2)或步骤(3)的处理。
(2)若分组节点为折叠状态,则修改children字段为占位节点,并将分组节点及占位节点存储到nodeList数组中;由于分组内的所有连接线都变成以占位节点为源流程节点,因此,遍历分组里的流程节点,并将分组里的所有流程节点的source字段替换为占位节点。
(3)若分组节点为展开状态,则修改分组节点的children字段为所有流程节点,并存储到nodeList数组中;遍历分组里的流程节点,设置source字段为每个流程节点自身。
(4)绘制连接线,绘制连接线时还需设置target字段。当连接线连接的目标流程节点在分组中时,如果分组为折叠状态,则将target字段设置为分组的占位节点;否则target字段设置为原来的目标流程节点。
(5)最后过滤掉重复的连接线。其中,出现重复的连接线的原因是:折叠状态下,分组内的多个流程节点被一个占位节点所代替,因此可能存在多条以占位节点为源流程节点或目标流程节点的连接线。
并且,需要说明的是,上述的三层数据转换是可逆的,具体应用在流程数据和画布渲染的双向更新。其中,流程数据和分组数据,即flowData数据层可以存储在vuex中(vue前端框架的一个集中式管理状态数据工具)。初始化流程编辑画布时,从vuex中读取flowData数据层的数据,转换为renderData数据层后,流程编辑画布即可渲染元素(也即节点和连接线)。操作改变流程编辑画布中的元素后,可通过调用以上所述的流程节点布局调整算法得到调整后的节点坐标,更新renderData数据层并反向转换为flowData数据层,也即更新存储在vuex中的旧数据。Vue框架可监听vuex数据的变化,如果数据改变,则又从flowData数据层转换为renderData数据层,进而更新流程编辑画布。基于此,不断重复数据的转换,从而实现流程数据与流程编辑画布的双向更新。
示例性装置
与上述自动化流程的编辑方法相对应地,本申请实施例还公开了一种自动化流程的编辑装置,参见图15所示,该装置包括:获取模块100和调整模块110;其中,
获取模块100用于,获取用户在流程编辑画布中执行的流程节点的操作信息;其中,流程节点为由功能组件组成的流程图中的功能组件节点,流程编辑画布为网格画布,网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中;
调整模块110用于,基于流程节点的操作信息,对流程编辑画布中的流程图进行调整。
本实施例的自动化流程的编辑装置,首先设置流程编辑画布为网格画布,且设置为网格画布中的每一流程节点均居中显示于对应网格中,如此通过获取模块100获取用户在流程编辑画布中执行的流程节点的操作信息;以及,调整模块110基于流程节点操作信息,对流程编辑画布中的流程图进行调整,从而能够实现自动化流程的生成和可视化编辑。如此设置,通过对流程编辑画布进行网格化设计,并将功能组件生成的流程节点居中显示于网格中,从而能够规范各个功能组件的显示位置,提高自动化流程设计的可视性。
一些实施例中,操作信息包括连接源流程节点和目标流程节点的操作对应的操作信息,调整模块110在基于流程节点的操作信息,对流程编辑画布中的流程图进行调整时,具体用于:响应于操作信息,生成从源流程节点指向目标流程节点的连接线。
一些实施例中,操作信息包括拖动功能组件的操作对应的操作信息,调整模块110在基于流程节点的操作信息,对流程编辑画布中的流程图进行调整时,具体用于:响应于将功能组件拖入流程编辑画布的拖动操作,确定拖动操作结束位置所在的网格;基于拖动操作结束位置所在的网格,确定目标网格;将被拖动的功能组件显示于目标网格中,得到流程节点。
一些实施例中,调整模块110基于流程节点的操作信息,对流程编辑画布中的流程图进行调整时,还用于:响应于将流程编辑画布的第一网格中的流程节点对应的功能组件拖动至第二网格的拖动操作,将被拖动的功能组件显示于第二网格中,并删除第一网格中的流程节点。
一些实施例中,调整模块110在确定拖动操作结束位置所在的网格时,具体用于:基于拖动操作结束位置以及预设的网格宽度和网格高度,确定拖动操作结束位置所在网格的行列索引;基于拖动操作结束位置所在网格的行列索引,确定拖动操作结束位置所在的网格的坐标。
一些实施例中,调整模块110在基于拖动操作结束位置所在的网格,确定目标网格时,具体用于:若拖动操作结束位置所在的网格中不存在流程节点,则确定拖动操作结束位置所在的网格为目标网格;若拖动操作结束位置所在的网格中存在流程节点,则根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格,或者,确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中。
一些实施例中,流程编辑画布中的各个网格中均包含多个对应于不同相邻网格的感应区,感应区包括第一类感应区和第二类感应区;调整模块110在根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格时,具体用于:若拖动操作结束位置位于所在的网格的第一类感应区内,则确定拖动操作结束位置所在的第一类感应区对应的相邻网格为目标网格;若拖动操作结束位置不位于所在的网格的任一感应区内,则按照预设优先级从拖动操作结束位置所在的网格的相邻网格中确定出目标网格;其中,预设优先级包括不同侧的相邻网格对应的不同优先级。
一些实施例中,调整模块110在确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中时,具体用于:若拖动操作结束位置位于拖动操作结束位置所在的网格的第二类感应区内,则确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中。
一些实施例中,若确定拖动操作结束位置所在的网格为目标网格,并确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中,则调整模块110还用于:将拖动操作结束位置所在的网格中的流程节点移至相邻网格中,并调整当前网格的关联网格中的各个流程节点的位置,以及更新各个流程节点之间的连接线。
一些实施例中,关联网格包括:行索引大于或等于当前网格的行索引的网格,或者,列索引大于或等于当前网格的列索引的网格;
调整模块110在调整当前网格的关联网格中的各个流程节点的位置时,具体用于:
若根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格,且相邻网格的行索引大于当前网格的行索引,则将行索引大于当前网格的行索引的所有网格中的流程节点移至行索引增加一的网格中;
若确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中,且相邻网格的行索引大于当前网格的行索引,则将行索引大于或等于当前网格的行索引的所有网格中的流程节点移至行索引增加一的网格中;
若根据预设规则从拖动操作结束位置所在的网格的相邻网格中确定出目标网格,且相邻网格的列索引大于当前网格的列索引,则将列索引大于当前网格的列索引的所有网格中的流程节点移至列索引增加一的网格中;
若确定拖动操作结束位置所在的网格中的流程节点待移至相邻网格中,且相邻网格的列索引大于当前网格的列索引,则将列索引大于或等于当前网格的列索引的所有网格中的流程节点移至列索引增加一的网格中。
一些实施例中,调整模块110还用于:响应于对功能组件的拖动操作,确定拖动操作对应的实时位置;基于拖动操作对应的实时位置,展示指示线;指示线包括高亮边框线,高亮边框线用于指示拖动操作对应的实时位置所在的当前网格。
一些实施例中,流程编辑画布中的各个网格中均包含多个对应于不同相邻网格的感应区,指示线还包括单侧高亮线;单侧高亮线用于在实时位置所在的当前网格中存在节点时,指示实时位置当前所在的感应区。
一些实施例中,流程编辑画布中还展示有多个沿第一方向延伸的泳道区域,各个泳道区域中均包括多个网格;泳道区域用于提示将实现同一功能的功能组件放置于同一泳道区域内;调整模块110还用于:在响应于对功能组件的拖动操作将功能组件显示于目标网格中时,若目标网格不包含于拖动操作结束位置所在的泳道区域,则扩大拖动操作结束位置所在的泳道区域的大小,以使目标网格包含于扩大后的泳道区域;和/或,在响应于对功能组件的拖动操作将第一网格中的流程节点移出后,若目标区域中的所有网格中均不存在流程节点,则缩小泳道区域的大小,以使目标区域不包含于缩小后的泳道区域;其中,目标区域为与第一网格同在第一方向上排列的所有网格所在的区域。
一些实施例中,操作信息包括分组操作对应的操作信息,调整模块110在基于流程节点的操作信息,对流程编辑画布中的流程图进行调整时,具体用于:响应于分组操作,将用户所选择的至少两个相邻流程节点划分为同一分组,得到分组节点,并显示分组节点对应的分组标识;分组标识包括分组框线,分组框线用于指示包含于分组节点的所有流程节点。
一些实施例中,操作信息还包括对分组节点的折叠操作对应的操作信息,调整模块110在基于流程节点的操作信息,对流程编辑画布中的流程图进行调整时,还用于:响应于对分组节点的折叠操作,将分组节点切换为折叠状态,并调整分组节点的关联流程节点的位置,以及更新各个流程节点之间的连接线;其中,在折叠状态下,包含于分组节点中的所有节点被替换为占位节点,占位节点占用一个网格;以及,响应于对分组节点的展开操作,将分组节点切换为展开状态,并更新各个节点之间的连接线。
一些实施例中,占位节点的行索引为分组节点包括的所有流程节点对应的最小行索引,占位节点的列索引为分组节点包括的所有流程节点对应的最小列索引,关联流程节点包括:第一类流程节点和第二类流程节点;第一类流程节点为:行索引等于分组节点包括的任一流程节点的行索引且列索引大于分组节点包括的所有流程节点的最大列索引的所有流程节点;第二类流程节点为:行索引大于占位节点的行索引且列索引小于占位节点的列索引的所有节点,以及,行索引大于分组节点包括的所有流程节点的最大行索引且列索引大于或等于占位节点的列索引的所有节点;调整模块110在调整分组节点的关联流程节点的位置时,具体用于:将各第一类流程节点向列索引减小的方向平移;将各第二类流程节点向行索引减小的方向平移。
一些实施例中,功能组件包括用于实现单个动作的基础功能组件和用于实现动作流的子流程功能组件。
一些实施例中,调整模块100还用于:在生成节点与连接线的过程中,进行数据转换处理;数据转换处理包括:将流程数据转换为节点数据以及将节点数据转换为渲染数据,以及,将渲染数据转换为节点数据以及将节点数据转换为流程数据;其中,流程数据包括节点的基本信息数据,节点数据包括待生成的各个节点的基本信息数据,渲染数据包括各个连接线的基本信息数据。
具体地,上述的自动化流程的编辑装置的各个模块的用途的具体实现方式,请参见上述方法实施例的内容,此处不再赘述。
示例性电子设备及存储介质
本申请一个实施例还提出一种电子设备,参见图16所示,该电子设备包括:
存储器200和处理器210;
其中,存储器200与处理器210连接,用于存储程序;
处理器210,用于通过运行存储器200中存储的程序,实现上述任一实施例公开的电子自动化流程的编辑方法。
具体地,上述电子设备还可以包括:总线、通信接口220、输入设备230和输出设备240。
处理器210、存储器200、通信接口220、输入设备230和输出设备240通过总线相互连接。其中:
总线可包括一通路,在计算机系统各个部件之间传送信息。
处理器210可以是通用处理器,例如通用中央处理器(CPU)、微处理器等,也可以是特定应用集成电路(application-specificintegratedcircuit,ASIC),或一个或多个用于控制本申请方案程序执行的集成电路。还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
处理器210可包括主处理器,还可包括基带芯片、调制解调器等。
存储器200中保存有执行本申请技术方案的程序,还可以保存有操作系统和其他关键业务。具体地,程序可以包括程序代码,程序代码包括计算机操作指令。更具体的,存储器200可以包括只读存储器(read-onlymemory,ROM)、可存储静态信息和指令的其他类型的静态存储设备、随机存取存储器(random accessmemory,RAM)、可存储信息和指令的其他类型的动态存储设备、磁盘存储器、flash等等。
输入设备230可包括接收用户输入的数据和信息的装置,例如键盘、鼠标、摄像头、扫描仪、光笔、语音输入装置、触摸屏、计步器或重力感应器等。
输出设备240可包括允许输出信息给用户的装置,例如显示屏、打印机、扬声器等。
通信接口220可包括使用任何收发器一类的装置,以便与其他设备或通信网络通信,如以太网,无线接入网(RAN),无线局域网(WLAN)等。
处理器210执行存储器200中所存放的程序,以及调用其他设备,可用于实现本申请上述实施例所提供的电子自动化流程的编辑方法的各个步骤。
本申请另一实施例还提供了一种存储介质,该存储介质上存储有计算机程序,该计算机程序被处理器运行时,实现上述任一实施例提供的电子自动化流程的编辑方法的各个步骤。
具体地,上述的电子设备以及上述的存储介质上的计算机程序被处理器运行时的具体处理内容,均可以参见上述的电子自动化流程的编辑方法的各个实施例的内容,此处不再赘述。
对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
需要说明的是,本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本申请各实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减,各实施例中记载的技术特征可以进行替换或者组合。
本申请各实施例种装置及终端中的模块和子模块可以根据实际需要进行合并、划分和删减。
本申请所提供的几个实施例中,应该理解到,所揭露的终端,装置和方法,可以通过其它的方式实现。例如,以上所描述的终端实施例仅仅是示意性的,例如,模块或子模块的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个子模块或模块可以结合或者可以集成到另一个模块,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或模块的间接耦合或通信连接,可以是电性,机械或其它的形式。
作为分离部件说明的模块或子模块可以是或者也可以不是物理上分开的,作为模块或子模块的部件可以是或者也可以不是物理模块或子模块,即可以位于一个地方,或者也可以分布到多个网络模块或子模块上。可以根据实际的需要选择其中的部分或者全部模块或子模块来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能模块或子模块可以集成在一个处理模块中,也可以是各个模块或子模块单独物理存在,也可以两个或两个以上模块或子模块集成在一个模块中。上述集成的模块或子模块既可以采用硬件的形式实现,也可以采用软件功能模块或子模块的形式实现。
专业人员还可以进一步意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、计算机软件或者二者的结合来实现,为了清楚地说明硬件和软件的可互换性,在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件单元,或者二者的结合来实施。软件单元可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
对所公开的实施例的上述说明,使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下,在其它实施例中实现。因此,本申请将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
Claims (13)
1.一种自动化流程的编辑方法,其特征在于,包括:
获取用户在流程编辑画布中执行的流程节点的操作信息;其中,所述流程节点为由功能组件组成的流程图中的功能组件节点,所述流程编辑画布为网格画布,所述网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中;
基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整。
2.根据权利要求1所述的方法,其特征在于,所述操作信息包括连接源流程节点和目标流程节点的操作对应的操作信息,所述基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整,包括:
响应于所述操作信息,生成从源流程节点指向目标流程节点的连接线。
3.根据权利要求1所述的方法,其特征在于,所述操作信息包括拖动功能组件的操作对应的操作信息,所述基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整,包括:
响应于将功能组件拖入所述流程编辑画布的拖动操作,确定拖动操作结束位置所在的网格;
基于所述拖动操作结束位置所在的网格,确定目标网格;
将被拖动的功能组件显示于所述目标网格中,得到流程节点。
4.根据权利要求3所述的方法,其特征在于,所述基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整,还包括:
响应于将所述流程编辑画布的第一网格中的流程节点对应的功能组件拖动至第二网格的拖动操作,将被拖动的功能组件显示于所述第二网格中,并删除所述第一网格中的流程节点。
5.根据权利要求3所述的方法,其特征在于,所述基于所述拖动操作结束位置所在的网格,确定目标网格,包括:
若所述拖动操作结束位置所在的网格中不存在流程节点,则确定所述拖动操作结束位置所在的网格为所述目标网格;
若所述拖动操作结束位置所在的网格中存在流程节点,则根据预设规则从所述拖动操作结束位置所在的网格的相邻网格中确定出所述目标网格,或者,确定所述拖动操作结束位置所在的网格为所述目标网格,并确定所述拖动操作结束位置所在的网格中的流程节点待移至相邻网格中。
6.根据权利要求5所述的方法,其特征在于,所述流程编辑画布中的各个网格中均包含多个对应于不同相邻网格的感应区,所述感应区包括第一类感应区和第二类感应区;所述根据预设规则从所述拖动操作结束位置所在的网格的相邻网格中确定出所述目标网格,包括:
若所述拖动操作结束位置位于所在的网格的第一类感应区内,则确定所述拖动操作结束位置所在的第一类感应区对应的相邻网格为所述目标网格;
若所述拖动操作结束位置不位于所在的网格的任一感应区内,则按照预设优先级从所述拖动操作结束位置所在的网格的相邻网格中确定出所述目标网格;其中,所述预设优先级包括不同侧的相邻网格对应的不同优先级。
7.根据权利要求4所述的方法,其特征在于,所述流程编辑画布中还展示有多个沿第一方向延伸的泳道区域,各个所述泳道区域中均包括多个网格;所述泳道区域用于提示将实现同一功能的功能组件放置于同一泳道区域内;所述方法还包括:
在响应于对功能组件的拖动操作将功能组件显示于所述目标网格中时,若所述目标网格不包含于所述拖动操作结束位置所在的泳道区域,则扩大所述拖动操作结束位置所在的泳道区域的大小,以使所述目标网格包含于扩大后的泳道区域;和/或,
在响应于对功能组件的拖动操作将第一网格中的流程节点移出后,若目标区域中的所有网格中均不存在流程节点,则缩小所述泳道区域的大小,以使所述目标区域不包含于缩小后的泳道区域;其中,所述目标区域为与所述第一网格同在所述第一方向上排列的所有网格所在的区域。
8.根据权利要求1所述的方法,其特征在于,所述操作信息包括分组操作对应的操作信息,所述基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整,包括:
响应于所述分组操作,将用户所选择的至少两个相邻流程节点划分为同一分组,得到分组节点,并显示所述分组节点对应的分组标识;所述分组标识包括分组框线,所述分组框线用于指示包含于所述分组节点的所有流程节点。
9.根据权利要求1所述的方法,其特征在于,所述功能组件包括用于实现单个动作的基础功能组件和用于实现动作流的子流程功能组件。
10.根据权利要求1所述的方法,其特征在于,还包括:
在生成节点与连接线的过程中,进行数据转换处理;所述数据转换处理包括:将流程数据转换为节点数据以及将所述节点数据转换为渲染数据,以及,将所述渲染数据转换为所述节点数据以及将所述节点数据转换为所述流程数据;其中,所述流程数据包括节点的基本信息数据,所述节点数据包括待生成的各个节点的基本信息数据,所述渲染数据包括各个连接线的基本信息数据。
11.一种自动化流程的编辑装置,其特征在于,包括:
获取模块,用于获取用户在流程编辑画布中执行的流程节点的操作信息;其中,所述流程节点为由功能组件组成的流程图中的功能组件节点,所述流程编辑画布为网格画布,所述网格画布中的每一流程节点均居中显示于由用户选择的任意一个网格中;
调整模块,用于基于所述流程节点的操作信息,对所述流程编辑画布中的流程图进行调整。
12.一种电子设备,其特征在于,包括:
存储器和处理器;
其中,所述存储器用于存储程序;
所述处理器,用于通过运行所述存储器中的程序,实现如权利要求1至10中任意一项所述的自动化流程的编辑方法。
13.一种存储介质,其特征在于,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时,实现如权利要求1至10中任意一项所述的自动化流程的编辑方法的各个步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211193391.4A CN115509503A (zh) | 2022-09-28 | 2022-09-28 | 自动化流程的编辑方法、装置、电子设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211193391.4A CN115509503A (zh) | 2022-09-28 | 2022-09-28 | 自动化流程的编辑方法、装置、电子设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115509503A true CN115509503A (zh) | 2022-12-23 |
Family
ID=84508810
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202211193391.4A Pending CN115509503A (zh) | 2022-09-28 | 2022-09-28 | 自动化流程的编辑方法、装置、电子设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115509503A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117632334A (zh) * | 2023-10-27 | 2024-03-01 | 青木数字技术股份有限公司 | 一种在流程画布上共享属性的方法、系统和计算机设备 |
CN117742690A (zh) * | 2023-12-22 | 2024-03-22 | 北京领雁科技股份有限公司 | 节点自适应流程编排方法及系统 |
-
2022
- 2022-09-28 CN CN202211193391.4A patent/CN115509503A/zh active Pending
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117632334A (zh) * | 2023-10-27 | 2024-03-01 | 青木数字技术股份有限公司 | 一种在流程画布上共享属性的方法、系统和计算机设备 |
CN117742690A (zh) * | 2023-12-22 | 2024-03-22 | 北京领雁科技股份有限公司 | 节点自适应流程编排方法及系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN115509503A (zh) | 自动化流程的编辑方法、装置、电子设备和存储介质 | |
JP5095847B2 (ja) | 階層リストを介した任意グラフィックのテキストの編集 | |
US9275479B2 (en) | Method, system and computer program product for creating collages that visually resemble a particular shape or group of shapes | |
US7661071B2 (en) | Creation of three-dimensional user interface | |
JP3599360B2 (ja) | 形状モデリング装置及び形状モデリング方法 | |
US11227105B1 (en) | Method and apparatus for structured documents | |
CN114742981A (zh) | 后处理特效的制作系统、方法、ar特效渲染方法及装置 | |
EP1640920A1 (en) | Process animation automatic generation method and system | |
US8427502B2 (en) | Context-aware non-linear graphic editing | |
CN112838937B (zh) | 一种自定义网络拓扑的处理方法及系统 | |
CN113254006B (zh) | 机器人交互的方法、系统、装置、电子设备以及存储介质 | |
CN113468261B (zh) | 基于图形编辑引擎构建物联网实体关系的方法和系统 | |
CN105740543A (zh) | 基于qml图形化的电力系统建模方法及建模系统 | |
JPH1186024A (ja) | マルチメディア・オブジェクトの運動経路を定義する方法およびシステム | |
CN108647026B (zh) | 基于动态网格的可视化界面集成方法及系统 | |
CN106228586A (zh) | 一种将党建数据图形化显示的方法及装置 | |
JP4582701B2 (ja) | 画面作成方法及び装置並びにプログラム | |
CN116088844A (zh) | 一种特效制作方法、装置、设备及存储介质 | |
JP3701127B2 (ja) | データ管理装置、およびデータ管理プログラムを記録したコンピュータで読取り可能な記録媒体 | |
CN113076160A (zh) | 显示界面的信息显示方法及相关装置 | |
CN108509554B (zh) | 一种基于wpf技术和excel快速生成组织架构图的方法 | |
CN113268189B (zh) | 图集管理方法、装置、存储介质以及计算机设备 | |
WO2024041023A9 (zh) | 应用卡片调整方法、装置、终端设备和存储介质 | |
JP2014048693A (ja) | 階層型グルーピング装置 | |
JP3679751B2 (ja) | 貼り絵シミュレーション装置、方法、及びプログラム |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |