Floating edges are connections between nodes that don’t use specific ports. Instead of connecting to fixed port positions, floating edges automatically calculate their connection points on the node borders based on the positions of the connected nodes.

How Floating Edges Work

When an edge doesn’t specify the sourcePort or targetPort, the corresponding connection point is calculated dynamically.

Declaring Floating Edges

To declare a floating edge, simply omit the sourcePort and targetPort properties when defining your edge:

import '@angular/compiler';

import { Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramComponent,
  provideNgDiagram,
  type NgDiagramConfig,
} from 'ng-diagram';

@Component({
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: `
    <div class="not-content diagram">
      <ng-diagram [model]="model" [config]="config" />
    </div>
  `,
  styles: `
    .diagram {
      display: flex;
      height: var(--ng-diagram-height);
      border: var(--ng-diagram-border);
    }
  `,
})
export class DiagramComponent {
  config = {
    zoom: {
      zoomToFit: { onInit: true },
    },
  } satisfies NgDiagramConfig;
  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: {
          x: 100,
          y: 100,
        },
        data: { label: 'Node 1' },
      },
      {
        id: '2',
        position: {
          x: 400,
          y: 200,
        },
        data: { label: 'Node 2' },
      },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        sourcePort: undefined,
        target: '2',
        targetPort: undefined,
        data: {},
      },
    ],
  });
}

Mixed Port and Floating Edges

You can mix floating and port-based connections. An edge can have a specific port on one end and float on the other by specifying only one of the ports.

edges: [
  {
    id: '1',
    source: '1',
    sourcePort: undefined,
    target: '2',
    targetPort: 'port-left',
    data: {},
  },
],

Routing Types with Floating Edges

Floating edges work seamlessly with different routing types. You can specify the routing type for floating edges just like you would for port-based edges.

edges: [
  {
    id: '1',
    source: '1',
    sourcePort: undefined,
    target: '2',
    targetPort: 'port-left',
    routing: 'bezier',
    data: {},
  },
],

Creating Floating Edges

To create floating edges by using the diagram’s linking feature you need to customize the diagram config.

For example:

import '@angular/compiler';

import { Component } from '@angular/core';
import {
  initializeModel,
  NgDiagramComponent,
  provideNgDiagram,
  type Edge,
  type NgDiagramConfig,
} from 'ng-diagram';

@Component({
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: `
    <div class="not-content diagram">
      <ng-diagram [model]="model" [config]="config" />
    </div>
  `,
  styles: `
    .diagram {
      display: flex;
      height: var(--ng-diagram-height);
      border: var(--ng-diagram-border);
    }
  `,
})
export class DiagramComponent {
  config = {
    zoom: {
      zoomToFit: { onInit: true },
    },
    linking: {
      temporaryEdgeDataBuilder: (edge: Edge) =>
        ({
          ...edge,
          sourcePort: undefined,
        }) satisfies Edge,
      finalEdgeDataBuilder: (edge: Edge) =>
        ({
          ...edge,
          sourcePort: undefined,
          targetPort: undefined,
        }) satisfies Edge,
    },
  } satisfies NgDiagramConfig;
  model = initializeModel({
    nodes: [
      {
        id: '1',
        position: {
          x: 0,
          y: 100,
        },
        data: { label: 'Node 1' },
      },
      {
        id: '2',
        position: {
          x: 300,
          y: 0,
        },
        data: { label: 'Node 2' },
      },
      {
        id: '3',
        position: {
          x: 300,
          y: 200,
        },
        data: { label: 'Node 3' },
      },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        sourcePort: undefined,
        target: '2',
        targetPort: undefined,
        data: {},
      },
    ],
  });
}

Setting sourcePort in temporaryEdgeDataBuilder ensures that the temporary edge being drawn is a floating edge.

After completing the edge creation the both ports are set to undefined in finalEdgeDataBuilder to create a floating edge on both ends of the edge.

In the example below try to connect Node 1 to Node 3:

The config can be adjusted to fit your specific requirements based on node types, starting ports, and other criteria.

Related Topics

Routing → | Ports →