拓扑图功能
基于html+svg实现拓扑图编辑和展示
🔗 相关链接
分析及技术点
| 功能 | 技术点 |
|---|---|
| toolbar拖拽 | 记录鼠标位置； 拖拽物体的显示隐藏； |
| 连接关系：创建连线 | 绘制时：使用svg的 <line>，需正确获取起始和终止点；结束绘制：使用 <path>路径绘制连线形态，根据两者节点位置不同，共计4种连线形态展示； |
| 包含关系：单层嵌套 | 依据最终的位置判断是否为包含关系（这里的算法有待优化）; 重新计算父节点宽高： 父结点宽高为子节点宽高+边距 重新计算子节点的位置信息：父节点位置信息 - 边距 |
| 包含关系：多层嵌套 | 通过递归的方式完成嵌套布局 |
| 包含关系：并列嵌套 | 父节点宽高：内部子节点宽度之和 + 边距，父节点高度：最高子节点高度 + 边距； 每个子节点位置：当前节点位置 = 前一个节点位置 + 前一个节点宽度 + 间隔边距 |
| 删除：单结点 | 删除节点同时删除关联连线（source&target） |
| 删除：包含关系 | 删除包含关系同时恢复父节点的宽高同时刷新并列节点位置 |
| 删除：连线 | 刷新原本有连线的连接点样式 |
| 删除：多节点 | 使用for循环，注意i— |
| 框选 | 使用<reat>,根据鼠标移动位移的正负数，选择不同的x和y值 |
| svg的viewbox的移动功能 | 记录鼠标移动的位移，修改viewbox的视图位置 |