如何创建线路连接mxGraph

Question

我试图在单击图像图标时创建线路连接，我已经使用wires.html示例尝试了相同的操作。但这是行不通的。我正在使用与mxGraph反应。如何实现这一点。有什么办法可以做到这一点。

mxEvent.addGestureListeners(
    img,
    mxUtils.bind(this, function(evt) {
      mxConnectionHandler.prototype.isStartEvent = function(me) {
        console.log("Here we have to start the line connection");
      };
    })
  );

我必须在bind事件中启动线路连接。有没有什么办法解决这一问题。我已经尝试过，但是没有一个在工作。

我真的需要帮助

在图像中，箭头连接（Multiple points are not supported. Used for directly connecting source to target）工作正常。但是需要实现Line Connection（Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection）。

请检查以下URL作为示例

演示网址：http : //jithin.com/javascript/examples/contexticons.html

源代码URL：https : //jsfiddle.net/fs1ox2kt/

在“ 演示URL”中，单击单元格时，将显示4个图标（“删除”，“调整大小”，“移动”，“连接”）。我已将Delete替换为Line Connection，将Resize替换为Arrow Connection。请看一看。

Answer 1

我不确定我是否正确理解你的问题，所以我回答一些可能的问题：

1. 我发现hello world 示例对于理解如何编写允许使用mxGraph.
2. 你的标签表明你正在使用 React。有趣的是，您没有提到Redux-Saga作为库。如果您还没有使用它，您可能想看看减速器的概念。

3. 您的问题也可能与mxGraph 线连接的具体行为有关：

   当我单击线路连接悬停图标时，它不会从单元格开始。

   查看工作流程示例时，当我想从一个任务框到另一个任务框绘制一条线或连接时，我看不到任何悬停图标。我清楚地记得，我花了一段时间才弄清楚你必须单击源框，按住并拖动到目标框上。

4. 如果您的问题更多是关于悬停图标，那么您已经有另一个（未回答的）问题：在单击悬停图标上添加连接处理程序不起作用 mxGraph

编辑：我终于明白你图中的图标是悬停图标，所以你的问题有第五种解释：

问题描述：用户单击带有微芯片图标的橙色框，然后出现一些弹出菜单（您的悬停图标），然后用户应该通过单击项目中的 来选择线条类型。相应线的端点仍应是用户最初选择的任务框。

解决方案草图：在最初的 onClick 事件中，您应该使用final_vertex包含单击坐标的微芯片图标或相应的顶点 - 您的框的框坐标填充变量。绘制所选连接时，必须确保选择它final_vertex作为端点，并将带有 lambda 图标的框作为初始顶点。换句话说，您至少需要两个事件 - 初始事件onClick和onHoverItemClick. 我不太熟悉mxGraph，但我认为您无法用单个事件处理程序解决问题。