学习antv x6图编辑引擎

先附上x6的地址https://x6.antv.vision/zh/doc...
在附上一个基于x6的一个项目地址 https://github.com/rxdrag/rx-...(使用的技术是mobx和Material-UI, 不得不说,代码写的真好, 以类为类型,文件间的引用嵌套真的厉害. ts用的出神入化, 代码真的有种多一行少一行都不行的感觉)

公司也不知道怎么找的, 就要弄个这个东西,一开始的时候根本不知道要干什么,就放了一个原型图说要做这个, 其他的一句话没说. 扔给我这两个网址让我搞

心里纵然万般不想,也不得不做啊.
照着人家rx-models-client这个项目,一开始想着把人家的代码移植过来,再用redux重写一遍,结果就是我高估了自己,一直在用redux的思维看mobx, 结果就是一塌糊涂,根本不知道怎么改代码.
顶着崩溃的心情看了两天代码,放弃了原先的想法,借鉴rx-models-client的写法,然后自己写.
果然柳暗花明又一村, 在人家的代码中发现了一个属性叫component,可以自定义组件.(也不能怪我, 官网的文档写了之后一半的感觉,有还多api和属性都找不到),然后也在官网发现了自定义组件的例子https://x6.antv.vision/zh/exa...
铛铛铛铛铛, 原型图就复原出来了
记录一下antv x6的用法
首先, 引入 import { Graph, Shape, Addon } from '@antv/x6';
然后, 实例化 const graph = new Graph({

  container: document.getElementById('graph-container')!,
  grid: true,

})

new Graph的参数在官网中有文档的,请自行查看,不在赘述
实例化后的graph有哪些属性和方法, 官网中就没有特别介绍了,只是穿插在其他的属性介绍当中
new Graph({

connecting: {
    anchor: 'center',
    connectionPoint: 'boundary',
}

})
connecting是两个节点间连接线的属性,文档在这里(虽然写的是interaction,但里面有属性connecting)
https://x6.antv.vision/zh/doc...

Graph.registerNode(),注册节点的方法,请参照
https://x6.antv.vision/zh/doc...
请注意是大写的G,Graph, 而不是实例的graph

graph.createNode() 创建节点, 创建之后才能使用,具体参数参照文档的基类cell和节点node,
有一个文档中没出现的属性component, 用来自定义组件

graph.addNode() 添加节点, 将节点添加到graph画布当中,使用方法参照自定义节点的例子

graph.removeNode() 移除节点, 参数是节点id

graph.on() 是监听事件的, 肯定用的到,查看文档
https://x6.antv.vision/zh/doc...

graph.addEdge({source,target,}) 添加连个节点之间的连线, 写法是结构赋值的写法, 应该是({source: source, target: target})

graph.dispose() 销毁画布, 如果不止一个画布,这个方法就派上用场了,不然就会出现画布里面嵌套画布的情况

new Graph({
    autoResize: true // 是否监听容器大小改变，并自动更新画布大小
})

要这么写<div style={{width: '100%', height: '100%',display: "flex"}}>
              <div id="container" style={{flex: '1'}}></div>
            </div>
即外层容器要有宽高才行

config方法修改内置边的默认行为

Shape.Edge.config({
  attrs: {
    line: {
      stroke: '#7c68fc',
      strokeWidth: 1,
    },
  },
  zIndex: 10,
});

graph.on('edge:connected', this.addEdge);可以用来监听连线完成
graph.getCellById虽然获取到的是节点或者边,却不一定能调用节点或边的方法, 要判断一下
graph.addEdge()添加连线,连线会沿着节点的边移动
目前就只了解到这些, 等以后开发中有新的理解,再来添加