NGX-Graph: пути привязки в центре узлов

Question

Возникла проблема с ngx-graph. Можно ли указать начало и конец соединительного пути к центру узла? Мои узлы svg больше, чем подэлемент, например:

Я попытался реализовать настраиваемую кривую, реализовать настраиваемый макет и попытался переопределить дочерний (GraphComponent) метод "generateLine()". Ничто не ведет к успеху, каждый раз появляются артефакты и новые проблемы. У вас есть простое решение этой проблемы?

Answer 1

Для всех, кто хочет получить "простой" ответ на этот вопрос. Не так-то просто заставить что-то работать, но вы можете переопределить два конкретных метода для достижения результатов. Сначала переопределите расчет конечных точек при перетаскивании, это делается в updateEdge. Затем переопределите метод, который рисует линии на графике, и добавьте только другие значения в положение, если оно не было перемещено (начальное рисование). После этого начального рисования вы вычисляете свое движение в методе updateEdge и пропускаете дополнительные значения в методе generateLine, потому что вы уже вычислили правильные начальные / конечные точки (больше нечего делать). Мы должны сделать это в методе generateLine, потому что начальное вычисление положения ребер выполняется не авторами библиотеки, а библиотекой под названием "dagre" (поиск этого в npm). Так,мы можем изменять только начальные конечные точки отрисовки при отрисовке в первый раз (метод generateLine). Если у вас есть какая-либо другая возможность без повторной реализации всей части Layout и GraphComponent, поделитесь здесь своим решением, пожалуйста.:)

@ViewChild(GraphComponent) child: GraphComponent;

ngAfterViewInit(): void {

    /* Recalculate Positions of endpoints while moving / dragging, added i as an identifier that it was moved */

    // tslint:disable-next-line:only-arrow-functions
    (this.child.layout as Layout).updateEdge = function(graph: Graph, edge: Edge): Graph {

      const sourceNode = graph.nodes.find(n => n.id === edge.source);
      const targetNode = graph.nodes.find(n => n.id === edge.target);

      // centered so i do not bother if its up oder downwards bot -1
      const dir = sourceNode.position.y <= targetNode.position.y ? -1 : -1;
      // Compute positions while dragging here
      const startingPoint = {
        x: sourceNode.position.x - dir * (sourceNode.dimension.height / 2),
        i: true,
        y: sourceNode.position.y,

      };
      const endingPoint = {
        x: targetNode.position.x - dir * (targetNode.dimension.height / 2),
        i: true,
        y: targetNode.position.y,

      };

      // generate new points
      edge.points = [startingPoint,  endingPoint ];
      return graph;
    };

    /* Calculate Initial position of the Arrows, on first draw and add only amount of x if not modified or not dragged*/
    this.child.generateLine = function(points: any): any {

      const lineFunction = shape
        .line<any>()
        .x(d => {
          let addVal = 0;
          if (d.i === undefined){
             addVal = 60;
          }
          const xval =  d.x + addVal;
          return xval;
        })
        .y(d => d.y)
        .curve(this.curve);
      return lineFunction(points);
    };

}