synergycodes/ng-diagram/ng-diagram-edge-routing

import { Component } from '@angular/core';
import { initializeModel, NgDiagramComponent, provideNgDiagram, type NgDiagramConfig } from 'ng-diagram';
@Component({
  selector: 'app-diagram',
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: `<ng-diagram [model]="model" [config]="config" />`,
})
export class DiagramComponent {
  config: NgDiagramConfig = {
    edgeRouting: {
      defaultRouting: 'orthogonal', // read once, when the diagram engine is created
      orthogonal: { firstLastSegmentLength: 30, maxCornerRadius: 8 },
      bezier: { bezierControlOffset: 150 },
    },
  };
  model = initializeModel({
    nodes: [
      { id: 'a', position: { x: 0, y: 0 }, data: {} },
      { id: 'b', position: { x: 300, y: 0 }, data: {} },
      { id: 'c', position: { x: 300, y: 200 }, data: {} },
    ],
    edges: [
      // no routing: uses the default routing
      { id: 'e1', source: 'a', sourcePort: 'port-right', target: 'b', targetPort: 'port-left', data: {} },
      { id: 'e2', source: 'a', sourcePort: 'port-right', target: 'c', targetPort: 'port-left', routing: 'bezier', data: {} },
      // fixed waypoints (first and last point at the ports): the path does not follow node moves
      {
        id: 'e3', source: 'b', sourcePort: 'port-right', target: 'c', targetPort: 'port-right',
        routing: 'polyline',
        routingMode: 'manual',
        points: [{ x: 480, y: 22 }, { x: 560, y: 22 }, { x: 560, y: 222 }, { x: 480, y: 222 }],
        data: {},
      },
    ],
  });
}

import { Component, inject } from '@angular/core';
import { NgDiagramModelService, NgDiagramService, type EdgeRoutingName } from 'ng-diagram';
@Component({ selector: 'app-routing-toolbar', template: '' })
export class RoutingToolbarComponent {
  private readonly diagramService = inject(NgDiagramService);
  private readonly modelService = inject(NgDiagramModelService);
  async useRoutingEverywhere(routing: EdgeRoutingName) {
    this.diagramService.setDefaultRouting(routing); // edges without their own `routing`, from their next routing pass
    const edges = this.modelService.getModel().getEdges();
    // a changed `routing` re-routes these edges now
    await this.modelService.updateEdges(edges.map((edge) => ({ id: edge.id, routing })));
  }
}

import { Component, computed, input } from '@angular/core';
import { NgDiagramBaseEdgeComponent, type Edge, type NgDiagramEdgeTemplate, type Point } from 'ng-diagram';
@Component({
  selector: 'app-step-edge',
  imports: [NgDiagramBaseEdgeComponent],
  template: `<ng-diagram-base-edge [edge]="routedEdge()" />`,
})
export class StepEdgeComponent implements NgDiagramEdgeTemplate {
  edge = input.required<Edge>();
  routedEdge = computed(() => {
    const edge = this.edge();
    const { sourcePosition, targetPosition } = edge;
    if (!sourcePosition || !targetPosition) {
      return edge; // ports not measured yet
    }
    return { ...edge, points: this.stepPoints(sourcePosition, targetPosition), routing: 'polyline', routingMode: 'manual' as const };
  });
  private stepPoints(from: Point, to: Point): Point[] {
    const midX = (from.x + to.x) / 2;
    return [from, { x: midX, y: from.y }, { x: midX, y: to.y }, to];
  }
}

import { Component, inject } from '@angular/core';
import {
  initializeModel, NgDiagramComponent, NgDiagramService, provideNgDiagram,
  type EdgeRouting, type EdgeRoutingConfig, type EdgeRoutingContext, type NgDiagramConfig, type Point,
} from 'ng-diagram';
export class CurveRouting implements EdgeRouting {
  name = 'curve'; // edges use routing: 'curve'
  // [start, control point, end]. The bend from the config lives in the control point,
  // because computePointOnPath gets only the points.
  computePoints({ sourcePoint: a, targetPoint: b }: EdgeRoutingContext, config?: EdgeRoutingConfig): Point[] {
    const bend = this.bend(config);
    const control = { x: (a.x + b.x) / 2 - (b.y - a.y) * bend, y: (a.y + b.y) / 2 + (b.x - a.x) * bend };
    return [{ x: a.x, y: a.y }, control, { x: b.x, y: b.y }];
  }
  computeSvgPath(points: Point[]): string {
    if (points.length !== 3) return points.map((p, i) => `${i ? 'L' : 'M'} ${p.x},${p.y}`).join(' ');
    const [a, c, b] = points;
    return `M ${a.x},${a.y} Q ${c.x},${c.y} ${b.x},${b.y}`;
  }
  // Optional: puts relative labels on the curve (the fallback uses the straight line between the ends)
  computePointOnPath(points: Point[], percentage: number): Point {
    const [a, c, b] = points.length === 3 ? points : [points[0], points[0], points[points.length - 1]];
    const t = Math.min(Math.max(percentage, 0), 1);
    const u = 1 - t;
    return { x: u * u * a.x + 2 * u * t * c.x + t * t * b.x, y: u * u * a.y + 2 * u * t * c.y + t * t * b.y };
  }
  private bend(config?: EdgeRoutingConfig): number {
    const options = config?.['curve'];
    return typeof options === 'object' && typeof options['bend'] === 'number' ? options['bend'] : 0.25;
  }
}
@Component({
  selector: 'app-diagram',
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: `<ng-diagram [model]="model" [config]="config" (diagramInit)="onDiagramInit()" />`,
})
export class DiagramComponent {
  private readonly diagramService = inject(NgDiagramService);
  config: NgDiagramConfig = { edgeRouting: { curve: { bend: 0.4 } } };
  model = initializeModel({
    nodes: [{ id: 'a', position: { x: 0, y: 0 }, data: {} }, { id: 'b', position: { x: 300, y: 0 }, data: {} }],
    edges: [{ id: 'e1', source: 'a', sourcePort: 'port-right', target: 'b', targetPort: 'port-left', routing: 'curve', data: {} }],
  });
  // Runs after every (re)initialization: a new model creates a new engine without custom routings
  onDiagramInit() {
    this.diagramService.registerRouting(new CurveRouting());
    this.diagramService.setDefaultRouting('curve'); // optional; logs a warning if 'curve' is not registered
  }
}