一种基于制造技术

本申请涉及流程图设计的技术领域，尤其是涉及一种基于

【技术实现步骤摘要】
一种基于HTML原生表格的流程图绘制方法


[0001]本申请涉及流程图设计的
，尤其是涉及一种基于
HTML
原生表格的流程图绘制方法
。

技术介绍

[0002]在实际应用过程中，用户绘制流程图的需求比较高，例如，利用流程图进行展示高校课程体系
、
审批流程配置
、
工艺流程配置等
。
针对各种各样的需求而言，用户一般采用第三方框架或组件来完成，例如，专门针对工作流的
Activity、Flowable
框架，还有前端专门绘制工作流的各种开源组件工具
。
[0003]这些框架和组件，往往都有大而全的功能特点，可以绘制类图
、
流程图
、
泳道图
、
组织结构图等众多的图表和图形，甚至可以自定义画出任何图形，并导出
PNG、JPG
等常见格式
。
但是，对于小型的流程配置需求，上述框架或组件都太过复杂，增加了额外的学习成本，使得在绘制流程图时操作复杂
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种基于
HTML
原生表格的流程图绘制方法，其特征在于，包括：响应于流程图绘制请求，显示
HTML
原生表格，其中，所述
HTML
原生表格包括：单元格区域；当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示，以使用户能够通过所述添加节点的提示输入节点添加信息；当检测到节点添加信息时，则在所述目标单元格生成目标节点；在建立至少两个节点后，当检测到连线添加信息时，则基于所述连线添加信息中至少两个锚点进行连线绘制，以实现基于
HTML
原生表格的流程图绘制
。2.
根据权利要求1所述的基于
HTML
原生表格的流程图绘制方法，其特征在于，所述当检测到光标移动至所述单元格区域时，则控制光标所在目标单元格显示添加节点的提示同时，还包括：基于所述目标单元格进行单元格筛选，确定多个行关联单元格和多个列关联单元格；判断每一所述行关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除行的提示；判断每一所述列关联单元格内是否存在节点，当均不存在节点时，则控制光标所在目标单元格显示添加节点的提示同时，显示删除列的提示
。3.
根据权利要求1所述的基于
HTML
原生表格的流程图绘制方法，其特征在于，所述当检测到节点添加信息时，则在所述目标单元格生成目标节点之后，还包括：当检测到光标移动至所述目标节点处时，则控制所述目标节点显示多维操作的提示，其中，所述多维操作包括：移动节点
、
删除节点
、
编辑节点和调整节点大小
。4.
根据权利要求3所述的基于
HTML
原生表格的流程图绘制方法，其特征在于，所述当检测到光标移动至所述单元格区域中所述目标节点处时，则控制所述目标节点显示多维操作的提示之后，还包括：当检测到删除节点请求时，则将所述目标节点删除；当检测到调整节点大小请求时，则基于所述调整节点大小请求对所述目标节点进行初始大小调整，得到初始调整后的第一目标节点；基于所述第一目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照调整前的所述目标节点的大小进行显示；当不存在节点覆盖时，则按照所述第一目标节点的大小进行显示；当检测到移动节点请求时，则基于所述移动节点请求对所述目标节点进行初始移动，得到初始移动后的第二目标节点；基于所述第二目标节点进行节点覆盖诊断，当存在节点覆盖时，则按照移动前的所述目标节点的位置进行显示；当不存在节点覆盖时，则按照所述第二目标节点的位置进行显示；当检测到编辑节点请求时，则获取所述目标节点对应的编辑信息，基于所述编辑信息替换所述目标节点的原始内容，得到编辑节点后的第三目标节点，并按照所述第三目标节点的内容进行显示

【专利技术属性】
技术研发人员：杜鹏，刘兆峰，
申请(专利权)人：青软创新科技集团股份有限公司，
类型：发明
国别省市：