Javascript 在单击鼠标悬停图标时添加连接处理程序不工作

我正在尝试创建一个应用程序，其中单击一个单元格就会显示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);
  }
}

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