mxGraph / draw.io：连接到形状时更改边颜色

Question

我开始致力于将 draw.io 编辑器集成到我的项目中 https://github.com/jgraph/drawio/tree/dev/src/main/webapp

我的目标是在连接到形状（两侧）时更改边缘（箭头）颜色

所以我签到https://github.com/jgraph/drawio/blob/dev/src/main/webapp/js/grapheditor/Graph.js 对于负责使用 console.log 连接但未成功的方法

知道如何检测与顶点锚点的边连接吗？

我很喜欢graph.connectCell 但我没有在代码中找到它 我发现的只是dropAndConnect用于itemClicked

Sidebar.js https://github.com/jgraph/drawio/blob/dev/src/main/webapp/js/grapheditor/Sidebar.js#L3485

谢谢

Answer 1

您可以尝试这种方法：

图.net ➜Demo

描述：

1. 我们希望所有边都具有相同的样式定义。

   strokeColor 应根据目标形状进行更改。为了继承颜色，将形状包裹到表现得像“组”的泳道中。从形状创建的形状和边现在可以从最近的父泳道继承它们的颜色定义。

   边缘样式：

   strokeColor=indicated;indicatorColor=swimlane;
   

2. 从形状创建的新边（蓝色箭头）要么具有 default diagram styles，要么从源形状获取样式（如果有 newEdgeStyle={....} 的定义）

   newEdgeStyle={"edgeStyle":"orthogonalEdgeStyle","html":1,"strokeColor":"indicated","indicatorColor":"swimlane"};
   

   基本概念

   自定义样式

   • 航路点可以与真实的形状或其他形状可以添加到泳道。
   • 可以为用户隐藏泳道，因为他们只持有 fillColor 和 strokeColor 配置。