Changing default router for existing graph

[GeorgiyZhuravlev]

Introduction

Hi guys!

We want to let our customers fine-tune graphs by selecting router and other related to links default paper settings (defaultRouter, defaultConnector etc).
Both for existing (sometimes pretty complex, with lots of shapes and links already) and new (empty) graphs.

We made a small tool for that and for ourselves, to explore the options and pick the right ones (draft):

The idea is simple - settings from that UI are passed to the paper:

const {defaultRouter, defaultAnchor, defaultConnector, ...} = settings;
paper.options.defaultRouter = defaultRouter;
paper.options.defaultAnchor = defaultAnchor;
...

It turned out that just assigning new values to paper.options.default* is not enough for changes to take place, and what helps is updating all LinkViews after settings are changed:

    ...
    graph.getLinks().forEach(link => {
      if (clearVertices) {
        link.vertices([]);
      }
      paper.findViewByModel(link).update();
    });

With this, links are "re-routed," but it seems not in the same way they do when we draw them with that router the first time or when we move cells they connect.
Let me show it with animation:

You see - when I move the source/target cell a little bit - the link route becomes perfect. But not right after applying.

Thus, our question is this:
What else, other than calling paper.findViewByModel(link).update() we could do to help router "re-route"?

Thank you!

Steps to reproduce

given

Restrictions & Constraints

no

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

You should use linkView.requestConnectionUpdate().

[GeorgiyZhuravlev]

Settings for manhattan are just defaults.

  'manhattan': {
    name: 'manhattan',
    args: {
      padding: 10,
      step: 10,
      maximumLoops: 2000,
    }
  },

[kumilingus]

And what are the elements in the background? Are those graph cells or just an SVG appended to the paper?
You should tell the manhattan router to ignore those elements. For that use excludeTypes option.

[GeorgiyZhuravlev]

those are Pools
bpmn2.Pool but we gave them some colors

export const Pool = shapes.bpmn2.Pool.define(
  'gluu.Pool',
  defaultInstanceProperties,
);

[kumilingus]

Then add excludeTypes: ['gluu.Pool'] manhattan option.

The manhattan router most likely always failed and the fallback route was used. If you drag the element in the embedding mode, it is first unmbedded, then moved, and embedded again on drop. The result of the manhattan could be different if the element has / has no parent.

[GeorgiyZhuravlev]

Then add excludeTypes: ['gluu.Pool'] manhattan option.

It works! 🕺 🔥 ❤️
Thank you very much, Roman!
You saved our days 😄