How to use the ELK radial algorithm?

[boop5]

I'm just following the guide for angular using the autoarrange-plugin. I do want to use another arrange algorithm though. Most of them seem to work just fine (like elk.mrtree). But I cant get elk.radial working. How can I do that?

I've tried it like this

const arrange = new AutoArrangePlugin<Schemes>();
// ...
area.use(arrange)
// ...
arrange.addPreset(ArrangePresets.classic.setup());
// ...
await arrange.layout({ applier, options: {
    algorithm: 'elk.radial'
}});

Here is a simplified stackblitz of what I've tried https://stackblitz.com/edit/stackblitz-starters-3fm3cd?file=src%2Fmain.ts

This is how it looks if I don't specify an algorithm

This is the same graph but with algorithm: 'elk.radial'

This is with elk.mrtree algorithm

[Ni55aN]

the layout method returns a debugging information:

• URL to online ELK editor: https://rtsys.informatik.uni-kiel.de/elklive/json.html
• Resulting ELK JSON: source property

Based on this, it shows the scheme

I guess this algorithm doesn't support a ports. After removing _port_output/_port_input in edges, it shows this:

If this is what you need, I can find solutions to achieve this using a plugin

[boop5]

Yes, this is exactly what I'm looking for!

[Ni55aN]

@boop5 at the moment, I haven't found an elegant (or nearly) solution on how to flexibly include/exclude/modify certain fields in the ELK.js scheme

If you need it badly, there is a solution, but I'll recommend to use it carefully (at least remove ^ from "rete-auto-arrange-plugin": "^2.0.0")

// @ts-ignore
class PortlessAutoArrangePlugin extends AutoArrangePlugin<Schemes> {
  nodeToLayoutChild(...args: any[]) {
    // @ts-ignore
    const data = super.nodeToLayoutChild(...args)

    return {
      ...data,
      ports: undefined
    }
  }
  getPortId(id: string) {
    return id
  }
}

const arrange = new PortlessAutoArrangePlugin();

arrange.addPreset(ArrangePresets.classic.setup());

area.use(arrange);

console.log(await arrange.layout({
  options: {
    algorithm: 'elk.radial'
  }
}))

As you can see @ts-ignore is used here, as it breaks the interface and inheritance is tricky.

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[rete-js[bot]]

This issue was closed because it has been stalled for 10 days with no activity.