sprotty icon indicating copy to clipboard operation
sprotty copied to clipboard

org.eclipse.elk.core.options.CoreOptions.PORT_LABELS_PLACEMENT not working

Open sathya-1994 opened this issue 3 years ago • 5 comments

ELK: 0.7.1 Sprotty: 0.11.0-next.ef11ae9 at client side

I have added below properties to ELK ports but sprotty is not recognizing them(properties added to port).

elkPort.setProperty(CoreOptions.PORT_LABELS_PLACEMENT, PortLabelPlacement.fixed()); elkPort.setProperty(CoreOptions.PORT_LABELS_PLACEMENT, PortLabelPlacement.outside());

My requirement is to place port labels out side the port Client side: configureModelElement(context, 'port', RectangularPort, RectangularNodeView);

Screenshot: image

In the above case I have assigned size as 10.0,10.0 . But if I won't assign size then port will be scaled based on label length. Screenshot: image

My requirement: Display port labels outside the port and port size should be 10 x 10 irrespective of label length

I need elk properties for my requirements.

sathya-1994 avatar Apr 20 '22 14:04 sathya-1994

I have a similar issue and I am interested in how you solve your problem. Do you use GLSP or are you working on Sprotty only? Have you a feature to edit the label inline?

Do you have an example how you construct your Element with a Port ? I wonder from where you have this PortLabelPlacement ?

rsoika avatar Apr 21 '22 08:04 rsoika

@rsoika

At client side I have 2 different editors based on sprotty and GLSP. At server side(common server for both clients) I am creating graph object using GLSP's graph model (GGraph > GNode > GPort > GLabel) instead of parsing json content present in the file.

In GLSP server, ELK elements(ElkNode,ELKPort,ELKEdge...) will be created in the class org.eclipse.glsp.layout.ElkLayoutEngine. We have to extended this class and bind the extended class. In the extended class we can override createNode,createEdge,... functions.

e.x: protected ElkPort createPort(final GPort gport) { ElkPort elkPort = super.createPort(gport); elkPort.setProperty(CoreOptions.PORT_LABELS_PLACEMENT, PortLabelPlacement.outside()); }

sathya-1994 avatar Apr 21 '22 12:04 sathya-1994

Sorry, I am unable to follow your example. In my own current GLSP server code I do the following to add a GPort to a GLSP GNode:

 GPort createBPMNPort(final GNode node, final Double x, final Double y, final Double widht,
            final Double height) {
        
        GPort gport= new GPortBuilder(ModelTypes.EVENT_PORT) //
                .id(node.getId() + "bpmn-port") //
                .position(x, y) //
                .size(widht, height) //
                .addCssClass("bpmn-port").build();

        return gport;
}

So I am using the org.eclipse.glsp.graph.builder.impl.GPortBuilder to get an instance of a GPort.

How do you apply the behavior of a ElkPort to this?

a GPort and a ElkPort seems to be two incompatible classes. On the other hand, I can see that ELK is somehow included in GLSP......

Can you explain me how I can adda label to a GPort

rsoika avatar Apr 21 '22 16:04 rsoika

"Can you explain me how I can adda label to a GPort" : Create a GLabel with GPort as parent(we can set the text of GLabel).

For layout generation using ELK, GModelElements(GNode,GPort,etc) has to be converted into corresponding ELK elements(ELKNode, ELKPort etc).This conversion takes place in the GLSP's class org.eclipse.glsp.layout.ElkLayoutEngine(GPort will be mapped to ELKPort). While ELK elements creation we can assign elk properties.

We can extend ElkLayoutEngine class and we can assign ELK properties to ELK elements while creation. e.x.: protected ElkPort createPort(final GPort gport) { ElkPort elkPort = super.createPort(gport); elkPort.setProperty(CoreOptions.PORT_LABELS_PLACEMENT, PortLabelPlacement.outside()); }

sathya-1994 avatar Apr 22 '22 05:04 sathya-1994

  1. I think the option needs to be added to the parent Node (at least this is the case in elkjs). See also: https://www.eclipse.org/elk/reference/options/org-eclipse-elk-portLabels-placement.html

  2. There is a problem (client side) with the port size, see here: https://github.com/eclipse/sprotty/issues/165 for possible workarounds

we use this class client side:

//added layoutContainerFeature since we want to set resizeContainer to false to prevent the resizing of the port based on its label
export class MyPort extends RectangularPort {
  static readonly DEFAULT_FEATURES = [
    connectableFeature,
    selectFeature,
    boundsFeature,
    fadeFeature,
    hoverFeedbackFeature,
    layoutContainerFeature,
  ];
  //stack layout without resizing and a given port size
  //This will prevent a resize in HiddenBoundsUpdater based on the nested label
  //see also https://github.com/eclipse/sprotty-server/issues/43
  readonly layout = 'stack';
  readonly layoutOptions = {
    resizeContainer: false,
  };
  size = {
    width: 14,
    height: 14,
  };
}

and this as option in the parent node: 'elk.portLabels.placement': '[OUTSIDE, ALWAYS_SAME_SIDE]'

BjBe82 avatar Jun 01 '22 12:06 BjBe82