# 关于 graph 组件
这个东西的初始目标是 blender 中的渲染节点，在 three 的项目中，有些配置项单个更改，可能看不出更改的效果或者程序运行的不大对，比如我加大一个球的重力，那么这个球的弹跳功能可能完全不能用了 换言之，我希望做一个类似计算属性的东西，将几个互相影响的属性单独分配一个节点，进行运算，最后得到一个合并的属性连到主程序部分，当里面属性不合理时，合并属性可以制止它，从而使的暴露的东西可用
一开始我没有找到对应的库，只好用 logicflow，一款流程图的库，因为我觉得都是拖拽连线的功能，而且有自定义节点的说法，但这个主要还是支持 react，我还是打算自己做一个小型的组件库 (其实还参考了 three 官方的节点库，我样式就是用的那个，但那个转成 vue 有点难了)
在这个过程中，我关注点搞错了，其实重点是节点数据建立联系，而不是 ui 中的拖拽连线，所以上述的库其实是不能在这用的，然后我对标做的东西是这样的: 一个节点的左右连线点无区别，各连线也没有区别。(组件基于 sfc 但实际上，blender，以及我后面找到的库(对 vue3 支持有大问题，但其他都还好)，都是这样的: 左侧连线点全是注入属性，与节点中个属性对应，右侧是输出，与节点本身对应，左侧点连线只能取消和更改，不能增加，右侧则只能增加。(组件基于 js
在组件库编写中，我基本没有感觉到问题，但在这个组件运用的过程中我就明显感到不对了，假设我要做个 validator，或者限制某节点连线数目，都非常麻烦，因为连线太自由了，按理来说节点和节点关系是有限制的，比如 a 只能右连 b 等，而现在节点关系是自由的，即使我用 a 连 b，那么有可能是 a 左连 b
整个画布维护一个对象如下
当然也可以进行限制，比如 watch 每条线，获得每条线的左侧节点 id 和右侧节点 id，在到节点里面遍历获得对应节点，在去根据节点内部值去 validate，
不是复杂，是折磨
话说那个官方库也有责任的，我视图上完全是照搬它。。。
附，由于在线数据中有连线点的 dom，然后每帧 get，程序理解为线数据每时每刻都在变化，没有办法正常 watch
# 总结，
应该先考虑数据结构，再考虑 ui 实现，比如，先确定画布中整体的数据结构，再确定节点中部分的数据结构，再确定 ui 的数据结构(比如 canvas 的连线数据)，然后再视图实现
应该先考虑接口模样，哪个组件有那些数据事件是一定要有的
先考虑主体功能，先做好测试样例
不要把所有的复杂度，验证等功能交给数据，而是让 ui 交互分担掉一部分。不应该是节点随意连线，再数据验证，而是节点连线就进行限制，再数据限制。 (即视图就应该禁止掉一部分行为，或者说视图就规定了行为的模式，迫使用户进行规定行为)