Canvas交互式拖拽节点本质是将图论结构映射为可操作视觉对象，需同步维护节点位置、边连接关系与布局约束，核心在于状态管理、坐标精准与关系保持。
Canvas 实现交互式拖拽节点，本质是把图论结构（如顶点、边、邻接关系）映射为可感知、可操作的视觉对象，并赋予其响应式行为。它不是简单地“移动一个圆”，而是维护节点位置、边连接关系、布局约束与用户意图之间的同步。关键在于：状态管理 + 坐标精准 + 关系保持。
节点与边的数据建模
图结构需分离数据层与视图层。每个节点应包含：id、x/y 坐标、label、metadata；每条边记录 sourceId、targetId、style（如曲线/直线、箭头）。避免直接在 Canvas 上绘制后丢失逻辑关联——边不能只是两点间的一条线，而应实时根据两端节点坐标重算路径。
- 用数组或 Map 存储节点，用邻接表或边列表维护连接关系
- 节点拖拽时只更新其 x/y，边自动重绘，不手动固定端点坐标
- 支持带权重、方向、标签的边，渲染时调用独立 drawEdge(ctx, nodeA, nodeB) 方法
拖拽状态与拾取逻辑
Canvas 没有内置事件委托，必须主动判断鼠标是否落在某个节点上。对圆形节点，用距离公式 Math.hypot(mouseX - node.x, mouseY - node.y) ≤ radius；对矩形或自定义形状，可用路径检测 ctx.isPointInPath()（需在 draw 时构建临时 Path2D）。
- mousedown 阶段遍历所有节点，找到最上层命中的节点，设为 draggingNode 并记录偏移量（offsetX = mouseX - node.x）
- mousemove 中更新 node.x = mouseX - offsetX，node.y = mouseY - offsetY
- mouseup 后触发 layoutUpdate 或 forceSimulation.tick()（若接入力导向算法）
- 注意：拖拽中应禁用默认文本选中，加 css canvas { user-select: none; }
边的动态重连与视觉反馈
拖拽节点时，相连的边必须实时跟随，但不能出现“拉扯抖动”或断连。推荐两种策略：
- 硬连接：边完全由节点坐标驱动，每次 redraw 全量重绘所有边（适合节点数 ≤ 200）
- 缓存+增量：仅重绘受影响边（即 source 或 target 发生变化的边），并用 requestAnimationFrame 节流重绘频率
- 悬停时高亮节点及关联边，可用临时 ctx.globalAlpha 或描边加粗实现，提升可发现性
嵌套与编组支持图结构分组
图论中常有子图、聚类、模块化结构。Canvas 本身不支持分组，需用 Group 类模拟：创建 Group 实例，add(node1, node2, edge1)，Group 维护自身 transform（x/y/rotation/scale），子节点保存本地坐标。拖拽 Group 时，内部所有节点和边统一变换；点击 Group 内部仍能命中具体节点（需做逆变换拾取）。
- Group 的包围盒（bounding box）用于快速剔除未命中区域，减少拾取计算量
- 嵌套 Group 支持层级折叠/展开，对应图的抽象-细化操作（如点击集群显示内部节点）
- 隐藏 Group 时，跳过其子项绘制，但保留数据结构，不影响后续布局计算
