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

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

An implementation method of flowchart editor based on angular

【技术实现步骤摘要】
一种基于Angular的流程图编辑器实现方法
本专利技术涉及计算机技术，尤其涉及一种基于Angular的流程图编辑器实现方法。
技术介绍
基于原生javascript的方式采用ES5标准开发的流程图编辑器存在兼容性差、耦合性高、冗余高等问题，在实施、运维、复用方面存在诸多不便。Angular框架具有模块化、MVC、依赖注入、语义化标签、双向数据绑定和typescript面向对象编程等特性；依赖注入、语义化标签、面向对象编程等使其有更好的可读性，而模块化和MVC使其开发效率更高并具有良好的重构性，便于后期维护和复用。现有系统采用点击方式创建节点，交互性差，流程图绘制过程死板，修改过程复杂；且缺少并发、分支等扩展流程图功能。
技术实现思路
为了解决以上技术问题，本专利技术提出了一种基于Angular的流程图编辑器实现方法，实现了拖拽创建节点，灵活移动节点位置，允许自定义分支表达式控制流程分支等功能。有效提高系统的交互体验，扩展了流程图的功能并降低了修改的复杂度。本专利技术通过使用angular框架，利用模块化组件本文档来自技高网...

【技术保护点】
1.一种基于Angular的流程图编辑器实现方法，其特征在于，/n具体步骤如下：/n步骤一：新增各类节点模板组件；/n步骤二：新增节点信息编辑组件；/n步骤三：定义校验规则，封装方法；/n步骤四：集成各类节点模板组件，配置流程图编辑器的可拖拽工具栏，用户从工具栏用鼠标拖拽需要的节点到画布；/n步骤五：封装连线方法，通过鼠标拖拽在节点间建立连接；/n步骤六：建立画布模型；在画布模型上绘制流程图；/n步骤七：对编辑的流程图进行节点数据的有序化处理。/n

【技术特征摘要】
1.一种基于Angular的流程图编辑器实现方法，其特征在于，
具体步骤如下：
步骤一：新增各类节点模板组件；
步骤二：新增节点信息编辑组件；
步骤三：定义校验规则，封装方法；
步骤四：集成各类节点模板组件，配置流程图编辑器的可拖拽工具栏，用户从工具栏用鼠标拖拽需要的节点到画布；
步骤五：封装连线方法，通过鼠标拖拽在节点间建立连接；
步骤六：建立画布模型；在画布模型上绘制流程图；
步骤七：对编辑的流程图进行节点数据的有序化处理。


2.根据权利要求1所述的方法，其特征在于，
步骤一中的节点分为开始节点、结束节点、并行网关、汇聚网关、分支网关和任务节点。


3.根据权利要求1所述的方法，其特征在于，
所述步骤二中的节点信息编辑组件采用弹窗、抽屉的展现形式，收集节点名称、步骤名称、输入参数、输出参数的信息。


4.根据权利要求1所述的方法，其特征在于，
步骤三中，所述校验的规则包括：根据节点类型设置相应的校验方法，...

【专利技术属性】
技术研发人员：张凯，张东海，黄华，
申请(专利权)人：浪潮云信息技术有限公司，
类型：发明
国别省市：山东;37