How to layout GPort properly

[dattran96]

Hi,

I am trying to make diagram with input ports on the left and output ports on the right as follow:

As we can see in the picture the GPort is not aligned correctly. All the Gport, which i marked in green box, are supposed to be moved at the edge of the box like this:

I tried many times to layout the GPort but it just does not work. Could you please help me out on this? I put my gmodel factory code and my source model below. Thank you so much!

gmodel factory code (Note that i have the function createLeftConnectionPointCompartment to create input ports and labels and the function createRightConnectionPointCompartment to create output ports and labels )

import { GCompartment, GEdge, GGraph, GLabel, GModelFactory, GNode, GPort } from '@eclipse-glsp/server';
import { inject, injectable } from 'inversify';
import { Connection, Input, Output, UnitNode } from './model';
import { UnitModelState } from './model-state';

@injectable()
export class UnitGModelFactory implements GModelFactory {
    @inject(UnitModelState)
    protected modelState: UnitModelState;

    createModel(): void {
        const rootNode = this.modelState.sourceModel;
        this.modelState.index.indexUnit(rootNode);
        const childNodes = rootNode.nodes.map(UnitNode => this.createNode(UnitNode));
        const childEdges = rootNode.connections.map(Connection => this.createTransitionEdge(Connection));
        const newRoot = GGraph.builder()
            .addChildren(childNodes)
            .addChildren(childEdges)
            .build();
        this.modelState.updateRoot(newRoot);
    }

    protected createLeftConnectionPointCompartment(inputs: Input[]) : GCompartment{
        let compartmentBuilder = GCompartment.builder().type('comp').layout('vbox')
        inputs.forEach(input => {
            let subCompartment = GCompartment.builder()
                .type('comp')
                .layout('hbox')
                .add(GPort.builder().id(input.id).size(5,5).position(-10,10).build())
                .add(GLabel.builder().text(input.name).build())
                .build()
                
            // Add the subCompartment to the compartmentBuilder
            compartmentBuilder.add(subCompartment);
        });

        return compartmentBuilder.build()
    }

    protected createRightConnectionPointCompartment(outputs: Output[]) : GCompartment{
        let compartmentBuilder = GCompartment.builder().type('comp').layout('vbox')
                                .addLayoutOption("hAlign", "left")
                                .addLayoutOption("hGrab", true)
        outputs.forEach(output => {
            let subCompartment = GCompartment.builder()
                .add(GPort.builder().id(output.id).size(5,5).build())
                .add(GLabel.builder().text(output.name).build())
                .type('comp')
                .layout('hbox')
                .addLayoutOption("hAlign", "right")
                .build();                
            // Add the subCompartment to the compartmentBuilder
            compartmentBuilder.add(subCompartment);
        });

        return compartmentBuilder.build()
    }

    protected createNode(unitNode: UnitNode): GCompartment {
        const headerBox = GCompartment.builder()
            .add(GLabel.builder().text(unitNode.name).build())
            .addLayoutOption("hAlign", "center")
            .type('comp')
            .layout('hbox')
            .build();
        const valuesBox = GCompartment.builder()
            .type('comp')
            .layout('MyCustomHBoxLayouter')
            .addLayoutOption("hGrab", true)

        if (unitNode.inputs) {
            // Create connection point compartment
            const leftBox = this.createLeftConnectionPointCompartment(unitNode.inputs);
            // Define leftbox
            valuesBox.add(leftBox)
        }

        if (unitNode.outputs) {
            // Create connection point compartment
            const rightBox = this.createRightConnectionPointCompartment(unitNode.outputs);
            // Define rightbox
             valuesBox.add(rightBox)
        }    
    
        const parentNode = GNode.builder()
        .id(unitNode.id)
        .addCssClass('tasklist-node')
        .layout('MyCustomVBoxLayouter')
        .addLayoutOption('hGrab', true)
        .add(headerBox)
        .add(valuesBox.build());

        return parentNode.build();
    }
    
    protected createTransitionEdge(connection: Connection): GEdge {
        return GEdge.builder() //
            .id(connection.id)
            .sourceId(connection.from)
            .targetId(connection.to)
            .build();
    }
}

My source model with 5 Units and 4 Connections:

{
  "nodes": [
    {
      "id": "01",
      "name": "Unit 1",
      "type": "unit.dummyUnit",
      "inputs": [
        {
          "id" : "Unit1.Input1",
          "name": "Input",
          "materialTypes": [
            "g.dummyMaterial",
            "g.dummyMaterial.stones",
            "g.dummyMaterial.sand"
          ],
          "rangeMin": 0,
          "rangeMax": -1
        }
      ],
      "outputs": [
        {
          "id" : "Unit1.Output1",
          "name": "Output1",
          "materialType": "g.dummyMaterial.stones",
          "rangeMin": 0,
          "rangeMax": 1
        },
        {
          "id" : "Unit1.Output2",
          "name": "Output22",
          "materialType": "g.dummyMaterial.stones",
          "rangeMin": 0,
          "rangeMax": 1
        },
        {
          "id" : "Unit1.Output3",
          "name": "Output333",
          "materialType": "g.dummyMaterial.sand",
          "rangeMin": 0,
          "rangeMax": 1
        },
        {
          "id" : "Unit1.Output4",
          "name": "Output4444",
          "materialType": "g.dummyMaterial.sand",
          "rangeMin": 0,
          "rangeMax": 1
        }
      ]
    },
    {
      "id": "02",
      "name": "Unit 2",
      "type": "unit.dummyUnit2",
      "inputs": [
        {
          "id" : "Unit2.Input1",
          "name": "Input",
          "materialTypes": [
            "g.dummyMaterial",
            "g.dummyMaterial.stones",
            "g.dummyMaterial.sand"
          ],
          "rangeMin": 0,
          "rangeMax": -1
        }
      ]
    },
    {
      "id": "03",
      "name": "Unit 3",
      "type": "unit.dummyUnit3",
      "inputs": [
        {
          "id" : "Unit3.Input1",
          "name": "Input",
          "materialTypes": [
            "g.dummyMaterial",
            "g.dummyMaterial.stones",
            "g.dummyMaterial.sand"
          ],
          "rangeMin": 0,
          "rangeMax": -1
        }
      ]
    },
    {
      "id": "04",
      "name": "Unit 4",
      "type": "unit.dummyUnit4",
      "inputs": [
        {
          "id":"Unit4.Input1",
          "name": "Input",
          "materialTypes": [
            "g.dummyMaterial",
            "g.dummyMaterial.stones",
            "g.dummyMaterial.sand"
          ],
          "rangeMin": 0,
          "rangeMax": -1
        }
      ]
    },
    {
      "id": "05",
      "name": "Unit 5",
      "type": "unit.dummyUnit5",
      "inputs": [
        {
          "id":"Unit5.Input1",
          "name": "Input",
          "materialTypes": [
            "g.dummyMaterial",
            "g.dummyMaterial.stones",
            "g.dummyMaterial.sand"
          ],
          "rangeMin": 0,
          "rangeMax": -1
        }
      ]
    }
  ],
  "connections": [
    {
      "id": "connect1",
      "from": "Unit1.Output1",
      "to": "Unit2.Input1"
    },
    {
      "id": "connect2",
      "from": "Unit1.Output2",
      "to": "Unit3.Input1"
    },
    {
      "id": "connect3",
      "from": "Unit1.Output3",
      "to": "Unit4.Input1"
    },
    {
      "id": "connect4",
      "from": "Unit1.Output4",
      "to": "Unit5.Input1"
    }
  ]
}