draw.io/mxGraph：连接线连接形状时修改箭头颜色的实现方法

核心判断逻辑 #

draw.io 底层基于mxGraph封装，所有边（连接线/箭头）的连接状态不需要深入锚点计算逻辑检测，直接读取边实例的两个终端属性即可：

• 每个边实例都持有源端、目标端两个终端引用
• 当且仅当源端、目标端都为非空的顶点（形状）实例时，代表该连接线两端已成功连接到形状

全局检索graph.connectCell找不到定义是正常的，这个方法是mxGraph的内部底层方法，draw.io做了二次封装后没有直接暴露在业务层Graph.js文件里；侧边栏逻辑里的dropAndConnect仅处理侧边栏元素拖入画布的连线场景，覆盖不全手动拉连接线、拖动端点重连、移动形状触发连接变更的场景，在该位置打日志无法捕获所有连接行为。

无侵入实现代码 #

不需要修改draw.io源码，在自有项目初始化完draw.io编辑器实例后，直接给graph实例绑定事件监听即可，后续同步官方版本更新也不会产生冲突：

// 从已初始化的编辑器实例拿到graph对象
const graph = editor.graph;

// 边状态检测+样式更新通用方法
const refreshEdgeStrokeColor = (edgeCell) => {
  const model = graph.getModel();
  // 非边类型直接跳过
  if (!model.isEdge(edgeCell)) return;

  // 获取两端连接的cell：true代表源端，false代表目标端
  const sourceCell = edgeCell.getTerminal(true);
  const targetCell = edgeCell.getTerminal(false);

  // 判断两端是否都连接到顶点形状
  const isBothConnected = sourceCell 
    && targetCell 
    && model.isVertex(sourceCell) 
    && model.isVertex(targetCell);

  // 两端连通时设置为目标色，否则恢复默认黑色，可按需调整色值
  const strokeColor = isBothConnected ? '#2563eb' : '#000000';
  graph.setCellStyles(mxConstants.STYLE_STROKECOLOR, strokeColor, [edgeCell]);
  // 如需同步修改箭头填充色，放开下一行注释即可
  // graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, strokeColor, [edgeCell]);
};

// 监听主动连线、拖动端点重连事件
graph.addListener(mxEvent.CELL_CONNECTED, (_, evt) => {
  const changedEdge = evt.getProperty('cell');
  refreshEdgeStrokeColor(changedEdge);
});

// 监听形状拖动、边属性变更导致的终端变化场景
graph.getModel().addListener(mxEvent.CHANGE, (_, evt) => {
  const editChanges = evt.getProperty('edit').changes;
  editChanges.forEach(change => {
    if (change instanceof mxTerminalChange && change.cell) {
      refreshEdgeStrokeColor(change.cell);
    }
  });
});

覆盖场景说明 #

上述逻辑可覆盖所有连接状态变更的场景：

• 手动从形状锚点拉出连接线连接到另一个形状
• 拖动已有连接线的端点重新连接到其他形状
• 拖动形状位置导致连接线终端关联关系变化
• 从侧边栏拖拽连接线元素连接到形状
• 删除连接线一端连接、断开连接时自动恢复默认颜色

自定义扩展提示 #

如果需要排除特殊类型的连接线（比如自环连线、辅助标注线），直接在refreshEdgeStrokeColor方法里添加自定义判断规则即可，不需要修改事件监听逻辑。

内容的提问来源于stack exchange，提问作者Rissay1998