一棵树由传入组件的数据，节点（父节点:type='parent'，子节点:type="child"，以及另一种特殊节点，双击编辑文案时，出现的输入框），边，以及连接器组成（数据模式已修改成只需要配置父节点类型，子节点不需要设置type字段）
//节点注册//nodeName:节点名称，对应节点类型exportconstcreatHtmlDom=(nodeName)=>{if(nodeNameinShape.HTML.shapeMaps){return;}Shape.HTML.register({shape:nodeName,//propsData:组件传入的所有属性，相当于this.$props//data:mindData,传入组件的节点数据effect:["data","propsData"],html:(cell)=>{const{nodeData,propsData}=cell.getData();if(nodeName=="edit"){//创建编辑节点输入框，设置样式returneditDom(nodeData,propsData);}elseif(nodeName=="child"){//子节点样式returndomChildContent(nodeData,propsData);}elseif(nodeName=="parent"){//父节点样式returndomParentContent(nodeData,propsData);}},});};mounted中使用（节点名称可以加组件前缀优化，暂时先这样）
creatHtmlDom("parent");creatHtmlDom("child");creatHtmlDom("edit");3.边注意：边要加key，key唯一，不然当你更改子组件布局方向时（比如横向布局改成纵向布局），由于你首次注册的是横向的布局，当你更改成纵向时，没有对应的连接器，会导致边的走向出现问题！！
exportconstregisterEdge=(params,key)=>{const{lineStroke,strokeWidth,connector}=params;if(connector=="orgEdge"){Graph.registerEdge("mindmap-org-edge",{zIndex:-1,attrs:{line:{sourceMarker:null,targetMarker:null,stroke:lineStroke,strokeWidth:strokeWidth,},},},true);}else{Graph.registerEdge("mindmap-edge-"+key,{inherit:"edge",connector:{name:"mindmap-"+key,},attrs:{line:{targetMarker:"",stroke:lineStroke,strokeWidth:strokeWidth,},},zIndex:0,},true);}};mounted中使用：
registerEdge(this.$props,this.key);4.连接器x6中其实有现成的连接器，但是因为需求需要的线条跟提供的不太一致，所以只能自己写，哭可以自己去学习一下path
我定义的连接器类型：compact：紧凑连接器（默认），loose：疏松连接器，orgEdge：组织结构连接器（这个用的x6现成的，所以不需要自定义）
其实X6是支持拖拽节点的，所以我原先的想法是想利用x6的节点拖拽，直接将节点拖到目标节点后，给目标节点添加对应的类名，设置对应的样式，但是这方案被老大否了，要求是要跟processOn一样的交互
仔细观察processOn的交互，鼠标按下选中节点，会产生一个透明度不高的节点,即幽灵节点（图一），并随着鼠标的移动而移动，如果拖动到目标节点的上部，节点上边会产生指示器，拖到下面会产生指示器，拖到目标节点中间，只是边框变色（图二）。
图一：
思路就是：用拖动节点跟目标节点的x还有y的位置做判断，得到想要的类型before，after，inner，有一个值得注意的地方，x越往右数值越大，y越往上数值越小，越往下数据越大此部分不贴代码了