单击鼠标悬停图标上添加连接处理程序不起作用mxGraph

Question

我正在尝试创建一个应用程序，在该应用程序上单击时将显示3个图标的单元格。单击该图标之一时，我需要从所选单元格创建一个连接处理程序，并需要指向某个目标。

在单击箭头连接按钮时，连接处理程序将启动，并在单击鼠标时结束。

我尝试创建，但问题是该行未显示。正在显示连接线，但是单击后未显示箭头线。

// Defines a new class for all icons
function mxIconSet(state) {
  this.images = [];
  var graph = state.view.graph;

  // Arrow Connection
  if (graph.getSelectionCount() === 1) {
    var img = mxUtils.createImage(arrowConnectionIcon);
    img.setAttribute("title", "Arrow Connection");
    img.style.position = "absolute";
    img.style.cursor = "pointer";
    img.style.width = "20px";
    img.style.height = "20px";
    img.style.background = "#3b48cc";
    img.style.padding = "5px";
    img.style.borderRadius = "50%";
    img.style.marginLeft = "5px";
    img.style.left = state.x + state.width + "px";
    img.style.top = state.y - 30 + "px";

    mxEvent.addGestureListeners(
      img,
      mxUtils.bind(this, function(evt) {
        var pt = mxUtils.convertPoint(
          graph.container,
          mxEvent.getClientX(evt),
          mxEvent.getClientY(evt)
        );

        graph.connectionHandler.start(state, pt.x, pt.y);
        graph.isMouseClick = true;
        graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
        mxEvent.consume(evt);
      })
    );

    graph.container.appendChild(img);
    this.images.push(img);
  }
}

如何解决问题，有没有解决的办法。我是mxGraph的新手。任何帮助将不胜感激。