Manhattan With Ports

Dynamically define the `startDirections` and `endDirections` of the Manhattan router.

by Roman Bruckner

HTML

<!-- content -->
<div id="paper"></div>

<!-- dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>

JavaScript

const graph = new joint.dia.Graph({}, {
  cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 900,
  model: graph,
  cellViewNamespace: joint.shapes,
  async: true,
  gridSize: 10,
  linkPinning: false,
  sorting: joint.dia.Paper.sorting.APPROX,
  defaultLink: () => new joint.shapes.standard.Link(),
  snapLinks: { radius: 20 },
  defaultRouter: (vertices, _, linkView) => {
    const {
      model: link,
      paper
    } = linkView;
    const opt = {
      step: paper.options.gridSize,
      padding: 10,
      fallbackRouter: joint.routers.rightAngle
    };
    const {
      port: sourcePort
    } = link.source();
    if (sourcePort) {
      opt.startDirections = [sourcePort];
    }
    const {
      port: targetPort,
      id: targetId,
    } = link.target();
    if (targetPort) {
      opt.endDirections = [targetPort];
    }
    if (!targetId) return [];
    return joint.routers.manhattan(vertices, opt, linkView);
  }
});

const portOffset = 0;
const rect = new joint.shapes.standard.Rectangle({
  position: {
    x: 50,
    y: 50
  },
  attrs: {
    root: {
      magnet: false
    },
    body: {

    }
  },
  size: {
    width: 100,
    height: 100
  },
  portMarkup: [{
    tagName: 'circle',
    selector: 'portBody',
    attributes: {
      'r': 10,
      'fill': '#31d0c6',
      'stroke': '#333',
      'stroke-width': 2
    }
  }],
  ports: {
    groups: {
      main: {
        position: 'absolute',
        attrs: {
          portBody: {
            magnet: true
          }
        }
      },
    },
    items: [{
      id: 'top',
      args: {
        x: '50%',
        dx: 100
      },
      attrs: {
        portBody: {
          cy: -portOffset
        }
      },
      group: 'main'
    }, {
      id: 'left',
      args: {
        y: '50%'
      },
      attrs: {
        portBody:...