Как разрешить только одно подключение к точке подключения?

Я уже использую snapToPoint, так что соединения возможны только с ограничениями вершины. Однако в настоящее время я могу подключить несколько ребер к одной и той же точке подключения. Есть ли встроенный способ разрешить только одно подключение к точке подключения?

Если нет, и поскольку я новичок в mxGraph, есть ли какие-либо рекомендации о том, куда поместить код, чтобы получить желаемое поведение, например. слушать mxEvent.CELL_CONNECTED или mxEvent.CONNECT_CELL? Или мне нужно перезаписать/повторно использовать любой предопределенный метод, например mxGraph.cellConnected?


person LPrc    schedule 24.09.2019    source источник
comment
Вы пробовали свойство graph.multigraph = false? jgraph.github.io/mxgraph/docs/ js-api/files/view/mxGraph-js.html   -  person NickAth    schedule 05.10.2019
comment
@NickAth Спасибо за совет. Я попробовал, но с этой опцией я все еще могу иметь несколько соединений в одной и той же точке соединения (при соединении с несколькими разными вершинами). К настоящему времени я реализовал его самостоятельно, но это пока не очень хорошее решение, и с ним довольно утомительно.   -  person LPrc    schedule 11.10.2019


Ответы (1)


была та же проблема, желая ограничить количество соединений ограничением соединения.

Я закончил тем, что удалил ограничения соединения, которые уже связаны с краем

Обновление от 02.10.2021: нашел лучший способ:

graph.getAllConnectionConstraints = function (terminal) {
    if (terminal != null && this.model.isVertex(terminal.cell)) {
      // connection points: North, East, South, West
      var allConnectionConstraints = [
        new mxConnectionConstraint(new mxPoint(0.5, 0), true),
        new mxConnectionConstraint(new mxPoint(1, 0.5), true),
        new mxConnectionConstraint(new mxPoint(0.5, 1), true),
        new mxConnectionConstraint(new mxPoint(0, 0.5), true)
      ];

      let result = allConnectionConstraints;

      // Remove the ones that have an edge connected to them
      if (terminal.cell.edges) {
        terminal.cell.edges.forEach((edge) => {
          const edgeState = this.view.getState(edge);
          const source = edge.source.id === terminal.cell.id;
          const edgeConnectionConstraint = graph.getConnectionConstraint(
            edgeState,
            terminal,
            source
          );

          // edgeConnectionConstraint does not include name property
          const itemToDelete = result.find(
            (item) =>
              item.dx === edgeConnectionConstraint.dx &&
              item.dy === edgeConnectionConstraint.dy &&
              item.point.equals(edgeConnectionConstraint.point)
          );
          if (itemToDelete) {
            result = result.filter((x) => x !== itemToDelete);
          }
          result.removeAll(
            (item) =>
              item.dx === edgeConnectionConstraint.dx &&
              item.dy === edgeConnectionConstraint.dy &&
              item.point.equals(edgeConnectionConstraint.point)
          );
        });
      }

      return result;
    }

    return null;
  };

https://codesandbox.io/s/mxgraph-react-example-forked-uwru4

ниже оригинальный пост...

  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

person RSuiker    schedule 21.02.2020