Question

我已经在使用snapToPoint，因此只能在顶点约束下进行连接。但是目前我可以将多个边连接到同一连接点。是否有一种内置方法，每个连接点仅允许一个连接？

如果否，因为我是mxGraph的新手，是否有关于将代码放在何处以获得所需行为的建议，例如正在听mxEvent.CELL_CONNECTED或mxEvent.CONNECT_CELL？还是我必须覆盖/重用任何mxGraph.cellConnected之类的预定义方法？

Answer 1

有同样的问题，想要将连接数限制为连接约束。

我最终删除了已经有边缘连接的连接约束

  var graph = this.graph;
  this.graph.getAllConnectionConstraints = function (terminal) {
    if (terminal != null && this.model.isVertex(terminal.cell)) {

      // connection points: North, East, South, West
      var allConnectionConstraints = [new mxConnectionConstraint(new mxPoint(.5, 0), true),
      new mxConnectionConstraint(new mxPoint(1, .5), true),
      new mxConnectionConstraint(new mxPoint(.5, 1), true),
      new mxConnectionConstraint(new mxPoint(0, .5), true)];

      var result = [];

      // loop through all connection constraints
      allConnectionConstraints.forEach(connectionConstraint => {
        var add = true;

        // see if an edge is already connected to this constraint
        if (terminal && terminal.cell && terminal.cell.edges) {
          terminal.cell.edges.forEach(edge => {
            var edgeStyle = graph.getCellStyle(edge);
            var edgeX = -1;
            var edgeY = -1;

            // is this edge comming in or going out?
            if (edge.source.id === terminal.cell.id) {
              // going out
              edgeX = edgeStyle.exitX;
              edgeY = edgeStyle.exitY;
            } else if (edge.target.id === terminal.cell.id) {
              // comming in
              edgeX = edgeStyle.entryX;
              edgeY = edgeStyle.entryY;
            }

            if (connectionConstraint.point.x === edgeX &&
              connectionConstraint.point.y === edgeY) {
              // already a connection to this connectionConstraint, do not add to result
              add = false;
            }
          });
        }

        if (add) {
          result.push(connectionConstraint);
        }
      });

      // return all connectionConstraints for this terminal that do not already have a connection
      return result;
    }

    return null;
  };

https://codesandbox.io/s/mxgraph-react-example-4ox9f

如何每个连接点仅允许一个连接？

1 个答案: