CN110750254A - 一种基于Angular的流程图编辑器实现方法 - Google Patents

一种基于Angular的流程图编辑器实现方法 Download PDF

Info

Publication number
CN110750254A
CN110750254A CN201910991375.1A CN201910991375A CN110750254A CN 110750254 A CN110750254 A CN 110750254A CN 201910991375 A CN201910991375 A CN 201910991375A CN 110750254 A CN110750254 A CN 110750254A
Authority
CN
China
Prior art keywords
node
flow chart
nodes
canvas
angular
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
Application number
CN201910991375.1A
Other languages
English (en)
Inventor
张凯
张东海
黄华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN201910991375.1A priority Critical patent/CN110750254A/zh
Publication of CN110750254A publication Critical patent/CN110750254A/zh
Pending legal-status Critical Current

Links

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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种基于Angular的流程图编辑器实现方法，属于计算机技术领域，本发明通过鼠标拖拽建立节点、连接流程线的实时响应的图形化流程图编辑。通过使用angular框架，利用模块化组件，实现流程图编辑器的模块拆分，降低了代码的耦合性；利用可拖拽的节点组件，实现了从工具栏拖拽到画布任一位置点创建节点，增强了流程图编辑器的交互性，优化了体验效果；利用angular的双向数据绑定，减少了dom操作，提高了流程图编辑器的响应效率；将节点信息有序化处理后保存，便于后续利用流程图数据设计流程。

Description

一种基于Angular的流程图编辑器实现方法
技术领域
本发明涉及计算机技术，尤其涉及一种基于Angular的流程图编辑器实现方法。
背景技术
基于原生javascript的方式采用ES5标准开发的流程图编辑器存在兼容性差、耦合性高、冗余高等问题，在实施、运维、复用方面存在诸多不便。Angular框架具有模块化、MVC、依赖注入、语义化标签、双向数据绑定和typescript面向对象编程等特性；依赖注入、语义化标签、面向对象编程等使其有更好的可读性，而模块化和MVC使其开发效率更高并具有良好的重构性，便于后期维护和复用。
现有系统采用点击方式创建节点，交互性差，流程图绘制过程死板，修改过程复杂；且缺少并发、分支等扩展流程图功能。
发明内容
为了解决以上技术问题，本发明提出了一种基于Angular的流程图编辑器实现方法，实现了拖拽创建节点，灵活移动节点位置，允许自定义分支表达式控制流程分支等功能。有效提高系统的交互体验，扩展了流程图的功能并降低了修改的复杂度。
本发明通过使用angular框架，利用模块化组件，实现流程图编辑器的模块拆分，降低代码的耦合性，便于后续的修改复用；利用可拖拽的节点组件，实现从工具栏拖拽到画布任一位置点创建节点，增强流程图编辑器的交互性，优化体验效果；利用angular的双向数据绑定和typescript面向对象编程，减少对dom的直接操作，提高流程图编辑器的响应效率；将节点信息有序化处理后保存，便于后续利用流程图数据设计流程。
本发明的技术方案是：
一种基于angular的流程图编辑器实现方法，
具体步骤如下：
步骤一：新增各类节点模板组件。
步骤二：新增节点信息编辑组件。
步骤三：定义校验规则，封装方法。
步骤四：集成各类节点模板组件，配置流程图编辑器的可拖拽工具栏，用户从工具栏用鼠标拖拽需要的节点到画布。
步骤五：封装连线方法，通过鼠标拖拽在节点间建立连接。
步骤六：建立画布模型。在画布模型上绘制流程图。
具体的，监听鼠标拖拽事件，在落点增加被拖拽的节点，连接有向流程线。
步骤七：对编辑的流程图进行节点数据的有序化处理。
优选的，步骤一中的节点可分为开始节点、结束节点、并行网关、汇聚网关、分支网关和任务节点等。
优选的，步骤三中，所述校验的规则包括：根据节点类型设置相应的校验方法，判断节点是否允许添加；在进行节点间连线时根据节点类型和逻辑需要判断两个节点之间是否能进行连接。
优选的，在步骤五和步骤六中使用步骤三定义的校验规则进行各项校验。
优选的，步骤二中的节点信息编辑组件采用弹窗、抽屉的展现形式，收集节点名称、步骤名称、输入参数、输出参数的信息。
在步骤五和步骤六中使用步骤三定义的校验规则进行各项校验。
优选的，所述步骤六，即监听鼠标拖拽事件，在落点增加被拖拽的节点，连接有向流程线。
优选的，所述步骤六中的画布通过监听鼠标拖拽事件，记录鼠标落点的坐标，引入节点组件的形式添加相应类型的节点，同时根据校验规则，判断节点是否允许添加，流程线是否符合连接要求。
所述的画布模型，采用通过组件化的方式，将前面几个步骤的组件集成到一起。
流程线接收删除指令，从流程图中删除；节点接收删除指令，使该节点联同连接该节点的流程线一并从流程图中删除。
本发明的有益效果是
能够通过鼠标拖拽的方式新增节点，连接流程线，具有良好的交互性。画布上的元素皆允许拖拽删除，便于对流程图进行修改；采用Angular实现，双向绑定和组件化避免了直接操作dom元素，将各个模块分离，便于扩展复用。整个过程通过工程组件化完成，实现流程图的规则校验，快速生成。
附图说明
图1是本发明的实现流程图；
图2是流程图绘制逻辑处理过程示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明通过鼠标拖拽建立节点、连接流程线的实时响应的图形化流程图编辑。通过使用angular框架，利用模块化组件，实现流程图编辑器的模块拆分，降低了代码的耦合性；利用可拖拽的节点组件，实现了从工具栏拖拽到画布任一位置点创建节点，增强了流程图编辑器的交互性，优化了体验效果；利用angular的双向数据绑定，减少了dom操作，提高了流程图编辑器的响应效率；将节点信息有序化处理后保存，便于后续利用流程图数据设计流程。
具体步骤如下：
步骤一：新增各类节点模板组件。
节点可分为开始节点、结束节点、并行网关、汇聚网关、分支网关和任务节点等。
节点模板可自定义多种节点类型，具体可包括开始节点、结束节点、并行网关、汇聚网关、分支网关和任务节点。
步骤二：新增节点信息编辑组件。
节点信息编辑组件可以采用弹窗、抽屉等多种展现形式，收集节点名称、步骤名称、输入参数、输出参数等多种信息。
步骤三：定义校验规则，封装方法。
所述校验的规则包括：根据节点类型设置相应的校验方法，判断节点是否允许添加(例如一个流程图只允许一个开始节点、一个结束节点)；在进行节点间连线时根据节点类型和逻辑需要判断两个节点之间是否能进行连接(例如并行网关、分支网关不能与结束节点相连)。
步骤四：集成各类节点模板组件，配置流程图编辑器的可拖拽工具栏，用户从工具栏用鼠标拖拽需要的节点到画布。
步骤五：封装连线方法，通过鼠标拖拽在节点间建立连接。
在步骤五和步骤六中均使用步骤三定义的校验规则进行各项校验。
步骤六：建立画布模型。在画布模型上绘制流程图。
具体的，监听鼠标拖拽事件，在落点增加被拖拽的节点，连接有向流程线。
画布通过监听鼠标拖拽事件，记录鼠标落点的坐标，引入节点组件的形式添加相应类型的节点，同时根据校验规则，判断节点是否允许添加，流程线是否符合连接要求等。
画布模型，采用通过组件化的方式，将前面几个步骤的组件集成到一起。
流程线可接收删除指令，从流程图中删除；节点也可接收删除指令，使该节点联同连接该节点的流程线一并从流程图中删除。
步骤七：对编辑的流程图进行节点数据的有序化处理。
以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (9)

1.一种基于Angular的流程图编辑器实现方法，其特征在于，
具体步骤如下：
步骤一：新增各类节点模板组件；
步骤二：新增节点信息编辑组件；
步骤三：定义校验规则，封装方法；
步骤四：集成各类节点模板组件，配置流程图编辑器的可拖拽工具栏，用户从工具栏用鼠标拖拽需要的节点到画布；
步骤五：封装连线方法，通过鼠标拖拽在节点间建立连接；
步骤六：建立画布模型；在画布模型上绘制流程图；
步骤七：对编辑的流程图进行节点数据的有序化处理。
2.根据权利要求1所述的方法，其特征在于，
步骤一中的节点分为开始节点、结束节点、并行网关、汇聚网关、分支网关和任务节点。
3.根据权利要求1所述的方法，其特征在于，
所述步骤二中的节点信息编辑组件采用弹窗、抽屉的展现形式，收集节点名称、步骤名称、输入参数、输出参数的信息。
4.根据权利要求1所述的方法，其特征在于，
步骤三中，所述校验的规则包括：根据节点类型设置相应的校验方法，判断节点是否允许添加；在进行节点间连线时根据节点类型和逻辑需要判断两个节点之间是否能进行连接。
5.根据权利要求1所述的方法，其特征在于，
在步骤五和步骤六中使用步骤三定义的校验规则进行各项校验。
6.根据权利要求1所述的方法，其特征在于，
所述步骤六，即监听鼠标拖拽事件，在落点增加被拖拽的节点，连接有向流程线。
7.根据权利要求6所述的方法，其特征在于，
所述步骤六中的画布通过监听鼠标拖拽事件，记录鼠标落点的坐标，引入节点组件的形式添加相应类型的节点，同时根据校验规则，判断节点是否允许添加，流程线是否符合连接要求。
8.根据权利要求6或7所述的方法，其特征在于，
所述步骤六中所述的画布模型，采用通过组件化的方式，将前面几个步骤的组件集成到一起。
9.根据权利要求6或7所述的方法，其特征在于，
流程线接收删除指令，从流程图中删除；节点接收删除指令，使该节点联同连接该节点的流程线一并从流程图中删除。
CN201910991375.1A 2019-10-18 2019-10-18 一种基于Angular的流程图编辑器实现方法 Pending CN110750254A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910991375.1A CN110750254A (zh) 2019-10-18 2019-10-18 一种基于Angular的流程图编辑器实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910991375.1A CN110750254A (zh) 2019-10-18 2019-10-18 一种基于Angular的流程图编辑器实现方法

Publications (1)

Publication Number Publication Date
CN110750254A true CN110750254A (zh) 2020-02-04

Family

ID=69278771

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910991375.1A Pending CN110750254A (zh) 2019-10-18 2019-10-18 一种基于Angular的流程图编辑器实现方法

Country Status (1)

Country Link
CN (1) CN110750254A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111708529A (zh) * 2020-06-23 2020-09-25 浪潮云信息技术股份公司 一种基于angular通过拖拽生成表单的实现方法
CN111930372A (zh) * 2020-08-06 2020-11-13 科大国创云网科技有限公司 一种通过可拖拽流程图实现的服务编排解决方法及系统
CN112732643A (zh) * 2021-04-01 2021-04-30 南京国睿信维软件有限公司 流程图图形文件数据与s1000d标准xml格式数据的相互转换方法
CN113448951A (zh) * 2021-09-02 2021-09-28 深圳市信润富联数字科技有限公司 数据处理方法、装置、设备及计算机可读存储介质
CN113741965A (zh) * 2021-08-30 2021-12-03 深圳壹账通智能科技有限公司 一种流程图的编排方法、装置、设备及存储介质
CN113900638A (zh) * 2021-11-23 2022-01-07 重庆允成互联网科技有限公司 可视化触发器配置方法及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101587438A (zh) * 2009-06-18 2009-11-25 南京联创科技股份有限公司 Arp框架下的图形化流程模板绘制方法
CN101727626A (zh) * 2009-12-30 2010-06-09 北京神州泰岳软件股份有限公司 电子运维流程的定制方法及系统
CN104020997A (zh) * 2014-06-13 2014-09-03 中国民航信息网络股份有限公司 可扩展图形化规则应用系统
CN105550021A (zh) * 2015-11-30 2016-05-04 用友网络科技股份有限公司 跨浏览器动态展示方法和装置
CN110232162A (zh) * 2019-05-29 2019-09-13 北京中亦安图科技股份有限公司 一种基于html5的流程定义方法及系统
CN110597586A (zh) * 2019-08-19 2019-12-20 北京邮电大学 基于拖拽的组件化布局大屏方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101587438A (zh) * 2009-06-18 2009-11-25 南京联创科技股份有限公司 Arp框架下的图形化流程模板绘制方法
CN101727626A (zh) * 2009-12-30 2010-06-09 北京神州泰岳软件股份有限公司 电子运维流程的定制方法及系统
CN104020997A (zh) * 2014-06-13 2014-09-03 中国民航信息网络股份有限公司 可扩展图形化规则应用系统
CN105550021A (zh) * 2015-11-30 2016-05-04 用友网络科技股份有限公司 跨浏览器动态展示方法和装置
CN110232162A (zh) * 2019-05-29 2019-09-13 北京中亦安图科技股份有限公司 一种基于html5的流程定义方法及系统
CN110597586A (zh) * 2019-08-19 2019-12-20 北京邮电大学 基于拖拽的组件化布局大屏方法和装置

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111708529A (zh) * 2020-06-23 2020-09-25 浪潮云信息技术股份公司 一种基于angular通过拖拽生成表单的实现方法
CN111708529B (zh) * 2020-06-23 2023-06-16 浪潮云信息技术股份公司 一种基于angular通过拖拽生成表单的实现方法
CN111930372A (zh) * 2020-08-06 2020-11-13 科大国创云网科技有限公司 一种通过可拖拽流程图实现的服务编排解决方法及系统
CN111930372B (zh) * 2020-08-06 2022-09-20 科大国创云网科技有限公司 一种通过可拖拽流程图实现的服务编排解决方法及系统
CN112732643A (zh) * 2021-04-01 2021-04-30 南京国睿信维软件有限公司 流程图图形文件数据与s1000d标准xml格式数据的相互转换方法
CN113741965A (zh) * 2021-08-30 2021-12-03 深圳壹账通智能科技有限公司 一种流程图的编排方法、装置、设备及存储介质
CN113448951A (zh) * 2021-09-02 2021-09-28 深圳市信润富联数字科技有限公司 数据处理方法、装置、设备及计算机可读存储介质
CN113900638A (zh) * 2021-11-23 2022-01-07 重庆允成互联网科技有限公司 可视化触发器配置方法及存储介质

Similar Documents

Publication Publication Date Title
CN110750254A (zh) 一种基于Angular的流程图编辑器实现方法
CN115617327A (zh) 低代码页面搭建系统、方法及计算机可读存储介质
CN105094818A (zh) 基于soa的自然资源综合应用构建方法及系统
CN104679488A (zh) 一种流程定制开发平台及流程定制开发方法
CN112433702B (zh) 一种轻量级流程设计系统及方法
CN107766042A (zh) 一种基于csar的模型文件的可视化设计方法及装置
CN104407863A (zh) 抽象控件模型编程装置和方法
CN115495069B (zh) 基于模型驱动的煤炭工业软件流程实现方法、装置及设备
CN104182494A (zh) 一种pc端和移动终端实现cms建设网站的方法与系统
CN105591803A (zh) 一种资源处理方法和设备
CN113741965A (zh) 一种流程图的编排方法、装置、设备及存储介质
CN105144091B (zh) 针对基于程序的命令行的用户界面模型生成
CN107179910A (zh) 一种在线编辑即时生效的逻辑组态方法
CN109471580A (zh) 一种可视化3d课件编辑器及课件编辑方法
CN115480810A (zh) 一种基于云原生的低代码平台
CN102521008A (zh) 程序编译装置和程序编译方法
CN103593188A (zh) 一种用于仪器所见即所得菜单的管理系统及管理方法
CN110135814A (zh) Bim与工程数据的关联方法、系统及终端设备
CN111708529B (zh) 一种基于angular通过拖拽生成表单的实现方法
CN110765610B (zh) Pdm集成方法、装置、计算机设备及存储介质
CN102411498A (zh) 一种实现数据模型的方法及图形化设计器
CN102541544A (zh) 树形控件的处理方法、装置及系统
CN114356430B (zh) 一种基于airflow调度系统的DAG依赖配置工具
CN107368557B (zh) 页面编辑方法及装置
CN111694637B (zh) 一种在线全自动多智能体控制仿真编译系统

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