Client layout of PreRenderedShape

[madamedefarge]

I am struggling with client layout of a PreRenderedShape
Here is an example based on the java-emf-theia example;-

GNodeBuilder taskNodeBuilder = new GNodeBuilder(TaskListModelTypes.TASK)
        .id(idGenerator.getOrCreateId(task))
        .addCssClass("tasklist-node")
        .add(new GCompartmentBuilder().type(DefaultTypes.COMPARTMENT).layout(GConstants.Layout.HBOX)
           .layout(GConstants.Layout.HBOX)
           .add(new GCompartmentBuilder()
              .type(TaskListModelTypes.ICON)
              .build())
           .add(new GLabelBuilder(DefaultTypes.LABEL).text(task.getName()).id(task.getId() + "_label").build())
           .add(
              new GShapePrerenderedElementBuilder(DefaultTypes.SHAPE_PRE_RENDERED).id(task.getId() + "_symbol")
                 .code(content).build())
           .build());

The icon type is borrowed from the workflow example.

This is the result;-

If I replace the PreRenderedShape with an icon type instead it gets laid out correctly;-

If I wrap the PreRenderedElement in a GCompartment I get the same result: PreRenderedShapes are not laid out but the icon type is laid out correctly.

      GNodeBuilder taskNodeBuilder = new GNodeBuilder(TaskListModelTypes.TASK)
         .id(idGenerator.getOrCreateId(task))
         .addCssClass("tasklist-node")
         .add(new GCompartmentBuilder().type(DefaultTypes.COMPARTMENT).layout(GConstants.Layout.HBOX)
            .layout(GConstants.Layout.HBOX)
            .add(new GCompartmentBuilder()
               .type(TaskListModelTypes.ICON)
               .build())
            .add(new GLabelBuilder(DefaultTypes.LABEL).text(task.getName()).id(task.getId() + "_label").build())
            .add(new GCompartmentBuilder().type(DefaultTypes.COMPARTMENT).layout(GConstants.Layout.HBOX)
               // .add(new GCompartmentBuilder()
               // .type(TaskListModelTypes.ICON)
               // .build())
               .add(
                  new GShapePrerenderedElementBuilder(DefaultTypes.SHAPE_PRE_RENDERED).id(task.getId() + "_symbol")
                     .code(content).build())
               .build())
            .build());

I'm new to GLSP and there must be something I am missing. Any help would be much appreciated.

[tortmayr]

Hi @madamedefarge,

the GShapePrerenderedElement is directly reused from sprotty. By default this element is not client layoutable. The layoutableChildFeature neetds to be configured to enable client layouting. This can be done in the diagram module on the client side with:

configureModelElement(context, DefaultTypes.SHAPE_PRE_RENDERED, GShapedPreRenderedElement, PreRenderedView, {
        enable: [layoutableChildFeature]
    });

In addition, you need to make sure that the code property (i.e. the svg content) has the right format. Nested svg elements can not be layouted properly.

For instance lets consider this icon:

Which correlates to this text representation:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931l-.493.493c1.127 1.72 3.2 3.566 6.001 3.566 2.8 0 4.872-1.846 5.999-3.566l-.493-.493zm-9.007-5.941c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5zm7 0c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5z"/></svg>

In order to use it with a GPreRenderedElement your have to remove the top-level svg element.

So the content string for the code property should look like this:

private  String content = "<path d=\"M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931l-.493.493c1.127 1.72 3.2 3.566 6.001 3.566 2.8 0 4.872-1.846 5.999-3.566l-.493-.493zm-9.007-5.941c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5zm7 0c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5z¸\"/>";

After that client layouting should work as expected:

[madamedefarge]

Thank you. I will try that out. I had already tried enabling the layoutableChildFeature. It was removing the svg element that I was missing.