仿流程图的波形模拟页面开发 - 03 -元素联动的小demo
对zrender了解到一定程度后就开始尝试着写具有基础功能的demo，为将来构架框架做准备和预研。demo的目标是实现三个节点用贝塞尔曲线连接，而且当节点移动时连接线应当随动。下图是最终成果的示意：
首先是解决元素联动，在这个项目里主要是连接线和节点之间的互动，如在节点之间添加连接线，节点移动时连接线联动之类的。主要的难点是zrender官方推荐使用 handler 和 事件 进行绑定和脱绑，绑定时通过上下文进行传参。这意味着你可能需要先去写基础逻辑，并将其封装成function代用，包括将要使用的变量名等等。
这就很麻烦了啊，在写代码之前就得有点全局性质的考虑，即便是一个小的demo。
首先要确定如何构建和管理单个节点。如之前的文章所说，从zrender官方的文档来看似乎是推荐使用Group实现元素管理，而且Group可以逐层嵌套。至于下一级的子元素，我们需要三个，输入（白色），输出（橘色），和背景（绿色）。综合下我们画出单个节点的内部管理关系。
之所以要将输入输出端口和节点拖动分开，是因为本案例下若要给同一个元素绑定多种不同鼠标事件的操作难度很大。demo没必要整那么详细，而且写的过程中我发现这几乎算是个坑，而我不想踩上去。
在写这段代码之前，先确定好节点的样式，demo中规定input和output都是一个宽高24px的正方形矩形框，bgc是一个宽100px高24px的长条。规定好这些参数，在规定出入口的位置在节点的左右两侧中间，就可以方便的换算出入口的坐标，只需要获取节点的position属性，就可以换算出出入口坐标。
代码如下：
通过简单地for循环就可以重复的创造出三个节点来，ele代表每个节点的位置。
接着处理逻辑，首先是节点的拖动，这个之前有介绍过，方法多样。demo中使用了比较简单的那种，不需要过多的对zr动刀。只需要设置bgc的draggable属性为true，接着设置ondrag事件即可。
不能忘记的是当拖动之后，节点出入接口的绝对坐标也会改变。因此需要同步刷新出入口的位置，在ondrag里加上下面的内容。
考虑到节点如果有线连接着的话，需要同步联动。而这些连接线如果有的话回报存在节点下ash里的getIn 和getOut里。所以循环就够了。同样在ondrag里添加;
这样基本的拖动就处理OK了。拖动过程中顺道还刷新了连接线。
而连接线的出现和描绘是绑定在out中的，在out里设置鼠标按下事件 => 新建贝塞尔曲线 => 鼠标移动事件 =>鼠标抬起事件。
其中要注意的是mouseup事件
在事件结束后应当也必须连自己一起解绑，否则会陷入一个逻辑怪圈。为这个我卡了很久。
demo中没解决的事有，如果节点之间已经有了线，那么在连接就不应该再出现新线，所以在上面的连接注入过程中需要设置检索，如果已有既不添加。
下一个demo我会尝试构建更加复杂的节点，测试这套方案是否仍旧可行。