[发明专利]一种拓扑图编辑器代码可视化生成方法、装置及存储介质

权利要求书

1.一种拓扑图编辑器代码可视化生成方法，其特征在于，包括：配置用于校验拓扑图编辑器的配置相关Json数据的Jsonschema；通过可视化的编辑界面配置所需的拓扑图编辑器支持的各类网络节点及属性、自定义工具、画布大小和网络节点连接规则，Json数据生成器按照自定义的拓扑图编辑器的配置生成相关Json数据；利用所述Jsonschema对得到的拓扑图编辑器的配置相关Json数据进行校验，若校验有格式或参数问题，则产生相应的提示警示用户，若校验无误，则保存Json数据并通过预设的代码生成器将得到的Json数据转化为拓扑图编辑器运行的实际代码。

2.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，可视化的编辑界面基于拓扑图编辑器效果模板构建，拓扑图编辑器效果模板包含：拓扑图节点区域、画布区域、工具栏区域和配置区域，所述配置区域针对拓扑图节点区域的网络节点、画布区域的画布、工具栏区域的自定义工具的详细属性提供配置接口；

所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性；所述画布区域和配置区域结合供用户配置画布及画布详细属性；所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性。

3.根据权利要求2所述的拓扑图编辑器代码可视化生成方法，其特征在于，可视化的编辑界面包括用于触发保存所构建拓扑图编辑器配置Json数据的保存按钮，用于触发取消所构建拓扑图编辑器的取消按钮，用于触发导出所构建拓扑图编辑器实际代码的导出代码按钮。

4.根据权利要求2所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述拓扑图节点区域和配置区域结合供用户配置拓扑图编辑器中涉及到的各类网络节点及网络节点详细属性包括：单击拓扑图节点区域的新增节点按钮触发配置区域提供自定义的网络节点的详细属性配置接口，自定义网络节点的详细属性配置接口包括节点名称配置接口、节点大小配置接口、节点流入规则配置接口、节点流出规则配置接口、节点图标上传接口和节点悬浮提示接口。

5.根据权利要求2所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述画布区域和配置区域结合供用户配置画布及画布详细属性包括：选中画布触发配置区域提供画布详细属性配置接口，画布详细属性配置接口包括画布背景配置接口、画布网格配置接口、画布大小配置接口。

6.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述工具栏区域和配置区域结合供用户配置自定义工具及自定义工具详细属性包括：单击工具栏区域的新增自定义工具按钮触发提供自定义工具栏列表，用户选择自义定工具栏列表中待添加的自定义工具后触发将自定义工具图标配置到自定义工具栏且触发配置区域提供所选自定义工具的详细属性配置接口；针对不同的自定义工具提供相应的自定义工具配置接口。

7.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述Jsonschema配置各详细属性数据类型、详细属性中数据类型为数值型属性的取值范围、自定义工具的功能范围。

8.根据权利要求1所述的拓扑图编辑器代码可视化生成方法，其特征在于，所述代码生成器预置将Json数据转化为拓扑图编辑器实际代码的生成规则；所述代码生成器支持包括：html和javascript框架的代码、Vue框架的代码和React框架的代码。

9.一种拓扑图编辑器代码可视化生成装置，其特征在于，包括：至少一处理单元，总线单元和存储单元，其中，所述总线单元连接存储单元、处理单元，所述存储单元存储计算机程序，计算机程序被处理单元执行时实现如权利要求1-8任一所述的拓扑图编辑器代码可视化生成方法。

10.一种实现拓扑图编辑器代码可视化生成方法的存储介质，所述存储介质存储计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8任一所述的拓扑图编辑器代码可视化生成方法。