需求背景
为页面编辑器实现可以自由布局，并能完成组件模块绑定。
体验使用
vue-page-editor => 自定义布局按钮
思路整理
思考思考一下。
一、边界与热区
二、布局数据结构
三、边界落点与修复
1.热区落点
- 监听点击事件、拿到offsetX、offsetY.
- 根据x、y进行是否存在热区数组内（热区数组由初始化递归布局树获取）
- 如果不在、判断为选中区域（后续完成）
- 如果在则根据存在热区在布局树查找出所有可能存在的热区。根据落点判断具体存在哪个热区。
- 获取热区后，拿到热区存在当前树节点的数组的位置进行起始落点修复，拿到修复后下标并存储他所在的直线。
- 根据上右下左原则、获取到对应热区原顶点位置。即 【下标, 下标+1】（末尾下标需要赋值为0下标）
- 根据拿到坐标位置。判断坐标相同点。即可确定具体落点并修复到具体线段上。
- 根据具体落点绘制落点，生成临时Canvas，并开始监听鼠标移动（同时根据鼠标落点绘制线段）
- 监听结束落点。
2.落点的连线与落点的确定
1.由1可知、落点确定后开始监听鼠标移动。根据移动绘制线段。
2.再次监听落点、如果落点后在之前被记录了落点、那么完成该落点。
3.落点情况分为：未在热区、在热区、在热区但是和之前落点的热区重合。
4.未再热区、在热区但是和之前落点的热区重合: 落点失败 销毁临时Canvas、重置为落点前的点。逻辑中止。
5.在热区且落下起点对边落点，完成连线。并根据连线进行区域划分
三、落点后的区域划分
核心规则: 交线一定会划分到最小矩形。
1.划分新区域
规则: 始终起点到终点依次划分
2.重新计算每块的占比与树的结构
规则: 根据交叉块、进行计算子节点、当前热区、子线段。
