版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。

“神笔马良”（英文名：DrawDocker）是基于开源图形化技术和容器平台的IT架构。利用DrawDocker，可以通过图形界面，在k8s集群环境内进行helm应用的安装和删除并输出设计视图。项目已经开源在GitHub。我们从代码级别大略地分析一下项目的设计引擎/设计试图视角功能，以便于后续的开发。文章中所参考的代码是基于Nov 11, 2020 master分支来进行分析的，可能会和最新的代码有出入，读者需要按照实际情况判别。​

 

侧栏

侧栏部分包括搜索图形栏、便笺本、自定义Kubeapps组件栏、图形栏和更多图形按钮，这块代码主要在\src\main\webapp\js\app.min.js中Sidebar对象和EditorUi对象部分。

 

其中搜索图形功能由关键字确定并显示图形组件，实现于Sidebar.prototype.addSearchPalette方法中。便笺本功能可以保存临时图形模板，自定义Kubeapps组件栏除了保存临时模板外还可以生成自定义应用组件，这两个功能实现于EditorUi.prototype.libraryLoaded方法，如果后续要完善自定义组件功能，需要在这部分进行修改。Kubeapps应用组件栏可以展示所有应用组件模板，实现于Sidebar.prototype.addKubeappsPalette方法，通过读取\src\main\webapp\js\kubeappsPalette.json内数据，创建包含图形、应用名、chart名和chart地址等信息的应用组件。

 

 

要想创建新的组件栏，需要新建添加面板的方法并在初始化时调用。更多图形方法实现于MoreShapesDialog方法，新建的组件栏需要添加至条目中才能在“更多图形”中显示。想要创建特有属性或者使用画布格式的图形作为模板，需要在\src\main\webapp\shapes\目录和\src\main\webapp\stencils\目录下创建相应的文件。

画布

画布部分的功能主要实现于mxGraph对象部分，可能在后续开发用到的方法包括选中获得选中的图形mxGraph.prototype.getSelectionCell、获得样式mxGraph.prototype.getModel等。

 

右侧格式栏

右侧格式栏部分在画布中未选中内容时提供绘图栏和样式栏，在选中图形时提供样式栏、文本栏、调整图形栏和安装参数栏，在选中文本文字时提供文本栏。这些功能实现于Format.prototype.refresh方法。

 

在选中图形时显示的样式栏中，显示选中图形的所有可显示的属性以及对应的值。如果选中的是一个Kubeapps图形，显示的属性包括应用名、安装状态、chart名、release名和release的外部地址。想要增加、删除或者修改属性，请在Editor.commonProperties或Editor.commonVertexProperties对象部分修改所有图形或非箭头图形的公共属性，或者在\src\main\webapp\shapes\mxKubeapps.js中修改特有属性。

 

在选中图形时显示的安装参数栏中，显示对于选中的Kubeapps图形的安装或删除按钮等。若优化安装过程，可在其中增加相应的内容。

工具栏

上方工具栏部分提供菜单、撤销、重做、删除、重命名、保存、语言等功能，实现于toolbar，App，Actions，EditorUi，Editor等对象中。在Actions.prototype.init方法中定义各种动作函数，可以在其他地方调用。其中"installKubeapps"和"deleteKubeapps"动作的作用为安装、删除应用。

 

 

如欲进一步完善安装功能，可以在其中修改，或者在\src\main\java\com\digitalchina\bitnami\controller\AppController.java中修改，再或者定义新的动作或方法。

 

 

 

项目地址

https://github.com/JamesDimon/DrawDocker