Adjust edge height/corner height?

[david-pa]

I recently did some work on my GLSP client to change the edge orientation by adding in some additional corners at the start and end points via a ManhattanEdgeRouter class extension and a custom calculateDefaultCorners implementation. I noticed that some of the corners are very high and it seems a little excessive.

A lot of times, it seems like the corners can rocket up to the top of the node, but I'm not sure where that height is being determined.

I'm using an ELKLayoutModule instance to control the layout algorithm being used:

  const launcher = appContainer.resolve(SocketServerLauncher);
  const elkLayoutModule = configureELKLayoutModule({
    algorithms: ['layered'],
    layoutConfigurator: GraphEditorLayoutConfigurator,
    elementFilter: ProjectConfigElementFilter
  });
  const serverModule = new ServerModule().configureDiagramModule(new ProjectDiagramModule(), elkLayoutModule);

  launcher.configure(serverModule);

...

@injectable()
export class GraphEditorLayoutConfigurator extends AbstractLayoutConfigurator {
  protected override graphOptions(graph: GGraph): LayoutOptions | undefined {
    return {
      'elk.algorithm': 'layered'
    };
  }
}

I am aware there are different options that can be used with these algorithms to control things like edge spacing and thickness, but my attempts to modify these sections of code with additional options like below have not yielded any changes in the diagram.

I was wondering if this is something I would need to edit my ManhattanEdgeRouter class extension to fix, or if layout algorithm options can fix this and perhaps I'm just not using them properly?

[david-pa]

@martin-fleck-at or @tortmayr, any ideas as to how I could accomplish this?

[tortmayr]

@martin-fleck-at Could you have a look at this?

[martin-fleck-at]

@david-pa So there are a couple of options that are relevant for the layouting process:

• needsClientLayout in your server diagram configuration: If we need client-side layouting, we request a RequestBoundsAction to the client which will do a hidden rendering to figure out the position and size of the elements as well as the routes by using the Manhattan edge router. The information is then sent to the server via the ComputedBoundsAction response and applied on the GModel on the server side. So you should probably have that as a true if you want your custom Manhattan router to be triggered.
• layoutKind in your server diagram configuration: Basically you have three options here - automatic (server automatically re-layouts the diagram with the layout engine on every change), manual (the server only re-layouts the diagram with the layout engine if explicitly triggered by a LayoutOperation, available in standalone under the shortcut Ctrl+Shift+L and in Theia under the menu Diagram > Layout) and none (the server simply takes the model as is). Automatic and manual are only applied if you actually have a layout engine bound on the server. This is where the elkLayoutModule comes in as it binds the GlspElkLayoutEngine as layout engine and applies the layout configurator options on all your elements when translating the GModel elements to ELK elements. Please note that in the layout configurator we distinguish between the different elements: graph, node, edge, label, and port. If you always want the layouting to be applied properly, you need to set this to automatic.

If you are experiencing troubles with the layouting, a good place to start debugging is the ComputedBoundsActionHandler on the server where you receive the position, size and routing information from the client. If something is already wrong there, it is probably your client-side Manhattan router. If things still look good here, I suggest debugging into the GlspElkLayoutEngine to see what the ELK layout algorithm returns for you and whether there are some options you can set to improve the result. At least it should give you some insight into what goes wrong and where.

Please note that we are not on the latest ELK version at the moment and there is an issue for known ELK-related improvements as well: #1406

[david-pa]

@martin-fleck-at I'll look into those options. However, in my above post I mentioned trying to set some options for the ELK layout configurator, but I wasn't sure if I was doing that properly. Does anything seem off about that to you? I wasn't seeing any difference in the edges when messing with those, so I thought I might be doing something wrong there.

[martin-fleck-at]

@david-pa Yes, I understand, nothing stands out to me in your configuration but those configurations should be applied by the Elk layout engine (if those options already existed in the version we are using). You can check the transformation in the GlspElkLayoutEngine.

[david-pa]

@martin-fleck-at do you know what version of the ELK layout engine you are currently using? I can check and see if there is any documentation related to the options available on that specific version, maybe.

[martin-fleck-at]

According to #1313, we are using elkjs 0.7.1 but you can probably do a yarn why elkjs.