nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Scripting an auto layout solution using ELK and Javascript

medini_1063646795

To all,

My team and I are looking into adding some features to Medini and one such feature is being able to customize the auto layout feature to suit our needs. We are looking into creating a Javascript solution to access the Eclipse Layout Kernel (ELK) to modify/create some layout algorithms so that we can more easily and efficiently organize our models to make them easier to understand and easier to manage. And thoughts and tips that would help with getting this started would be appreciated. As I'm just starting out I'm trying to figure out how to bind the ELK API in JS so that I can access it and modify it as desired. I'm also currently trying to figure out how to access the model elements as well in order to be able to move them around as we specify with ELK.

Thanks,

Tom

Find more posts tagged with

medini

medini legacy

Accepted answers

All comments

medini_1024169437

Hi Tom,

we use ELK based layout algorithms in the RBD editor to auto-layout them so ELK is already part of medini since a few versions (I think 21.1 or 21.2). Current version included is 0.7.1 (

To generally work with the ELK Java classes you have to bind them to the JS context, similar to what many of our libraries are doing. This script snippet should be a start:

// $EXPERIMENTAL$ $STRICT_MODE$ $WARNING_AS_ERROR$
if (!bind) {
 throw "This script requires extended API";
}

// bind some ELK classes (NOT OFFICIAL API YET)
var ElkUtil = bind("org.eclipse.elk.core", "org.eclipse.elk.core.util.ElkUtil", false);

// now we can script 
alert(ElkUtil.toSafePathName("bar$-foo//<?WORD FLAGGED?>\\.txt"));

For accessing model elements (and by that you surely mean, the GMF diagram model), you may check diagram.js here in the forum. There are some helpers inside to for example see whether an element is on a certain diagram or not.

Happy Scripting

Jan

medini_1063646795

Hi Jan,

I’ve managed to identify and bind some of the java classes
from ELK that I think would be helpful for creating some auto layout algorithms
for Medini. The issue I’m running into now is figuring out how to actually use
them on the SysML elements that we pick up from the Medini Model. There are
some other questions I would like to ask as well:

How
can we use ELK to access the SysML elements from Medini
How
can we create nested viewpoints in Medini That
is we would want to be able to select an element from the model and
create a new diagram viewpoint scoped specifically by the selected
element. We
were able to do this at the root level but not able to do it on a
selected model, why is that? We used the __createDiagram function in
factory.js but it didn’t work on a selected model element.

Finally I'm not sure if other people have already posted this but is there a bit more documentation or a summary for how we can use the diagram.js library?

Thanks,

Tom

medini_1024169437

Hi Tom,

very valid questions. The first ELk related one is difficult to answer for me since my ELK knowledge is limited. As far as I can see we use the GmfDiagramLayoutConnector from ELK to implement and apply layouts to our GMF diagrams. However, this is a huge and complex code base, I am not sure you can implement or do that with scripting at all.

The second should be straight, just create the diagram normally in the sysml model, but afterwards link it to the model element (two steps) like this:

// create root diagram
var dia1 = Factory.createElement(scope, Metamodel.projectmodel.PJDiagram);
dia1.name = "My first system diagram";

// create a diagram for a part (p2 in this case)
var dia2 = Factory.createElement(scope, Metamodel.projectmodel.PJDiagram);
dia2.name = "My first nested diagram";
dia2.canvasElement = p2;
dia2.diagram.element = p2;

Happy Scripting

Jan

medini_1035261689

Hi all,

we managed to configure our own layouting. We are using ELK (https://www.eclipse.org/elk/) and the "layered" layouter.

Incomplete snippets should give you an idea:

var DiagramLayoutEngine = bind("org.eclipse.elk.core", "org.eclipse.elk.core.service.DiagramLayoutEngine", false); // "link" to the layout

var configure = params.addLayoutRun().configure(ElkGraphElement)

.setProperty(CoreOptions.ALGORITHM, "org.eclipse.elk.layered")

.setProperty(CoreOptions.PORT_LABELS_PLACEMENT, java.util.EnumSet.of(PortLabelPlacement.INSIDE, PortLabelPlacement.SPACE_EFFICIENT));

var mapping = DiagramLayoutEngine.invokeLayout(workbenchPart, children, null, params);

Regards,

Michael

medini_1035261689

Hi all,
when I try to use Factory.createElement(scope, Metamodel.projectmodel.PJDiagram) and dropObjectsToDiagram for "RequirementsDiagrams" and "Requirements" I get some failures.
Any hints what could go wrong?

Thanks a lot in advance for your help,
Michael

medini_1024169437

Michael, I have no answer here but propose to start a new thread instead of using this one here as this is more about layout.

Could you start another thread please?

Jan

medini_1040753747

@Michael, are you able to share an example of your layouting in action?