implement top-left positioning for elements based on x and y values

[Adem-Kri]

Hello everyone,

I have recently completed a task in which I added two input fields called "x" and "y" for each element that could be drawn in my view from the tool palette. These fields represent the position of the element on the view.

However, the project owner has come up with a new demand, he wants me to modify the behavior such that when the user types x=0 and y=0, the element should be placed in the top left of the view instead of a random place. Additionally, negative values are not allowed.

I am seeking advice on how to approach this modification. What are some best practices for implementing this behavior? Any help would be greatly appreciated.

Thank you!

[tortmayr]

Hi @Adem-Kri,
to achieve your usecase you have to implement two things:

• Input validation
• Triggering of an operation on the server side after an edit

Validation

For input validation you could reuse the RequestEditValidationAction.
For this cases, we typically create a listener for the keyUp event of the input field and perform the validation there.
In the listener implementation, the RequestEditValidationAction is sent to the server. Once you received the result you have to display the validation message accordingly. Typically the message is displayed in some form of validation decorator:

 const requestAction= RequestEditValidationAction.create({ contextId: 'label-edit', modelElementId: 'yourInputId', text: '100' });
const result= await this.actionDispatcher.requestUntil<SetEditValidationResultAction>(action);
// show result in your decorator

On the server side you can then implement and bind a LabelEditValidator that checks the value and ensures that it's a postive integer.

Triggering an operation

After a successful edit (i.e. inputing a valid value) you have to dispatch the corresponding ApplyLabelEditOperation
The handler on the server side can then update the position of the model accordingly and will send the updated model back to the client.

(Note if you don't want to reuse the LabelEdit API you could also implement custom actions for this)

[Adem-Kri]

Thank you for your response, @tortmayr.
Could you kindly guide me on how to position the landmark (0, 0) at the top left corner of my view, effectively making it the edge and starting point?

[CamilleLetavernier]

Hi @Adem-Kri ,

Positioning is handled by the layout of the parent Node, taking into account properties of the child Node.

Assuming the parent Node uses a freeform layout (where child nodes simply decide of their own position), you can modify the Graph Node Factory to set the x; y properties in the generated child node, so that they match the x, y values from your model.

The parent and child nodes generated by the node factory should look like this (minimal example):

{
  "id": "parent-id-c014f2",
  "type": "parent-node-type",
  "layout": "freeform",
  "children": [
    {
      "id": "child-id-b901e4",
      "type": "child-node-type",
      "position": {
        "x": 45.0,
        "y": 18.0
      }
    }
  ]
}

Important values are:

• layout: freeform for the parent node
• position: x, y for the child node(s)

Freeform layout should typically be applied to an intermediate Compartment node, so the parent node can also have a label or other auto-layouted elements. So a typical structure would be:

• parent node (custom layout, e.g. vbox)
  • label node (e.g. hbox layout)
  • structure compartment (freeform layout)
    • child node with explicit x; y position
    • child node with explicit x; y position
    • child node with explicit x; y position
  • other children that require a different layout...

Note: it's not clear to me if the 0; 0 point you need is actually the top-left corner of the parent element (potentially overlapping the label or other content), or if it's the top-left corner of the compartment (dedicated canvas inside of the parent node, which won't overlap any other content). I assumed the latter. If there is no other content, you can skip the intermediate Compartment and directly apply the freeform layout to the parent node.

[Adem-Kri]

Thank you for the answer @CamilleLetavernier, it is very useful and helpful. 💯

yes you understood my requirement, I want the (0 , 0) landmark to be set in the top left of the canvas , we can't scroll up or to the left because it's the limit, and also only positive values are showed, for example : (-100, -20) doesn't exist

I hope you understand me more when seeing this image

[CamilleLetavernier]

Ah, I see, the 0; 0 isn't relative to an intermediate parent, but to the graph itself.

The solution in that case is very similar, except you can ignore the parent/compartment/layout issues. The Graph always places its children based on their position.x / y attribute.

So you can simply make sure these nodes derive their position.x/y attributes from your underlying model, when creating them from the GModelFactory.

The resulting graph model should look like this (minimal example):

{
  "id": "root",
  "type": "graph",
  "revision": "1",
  "children": [
    {
      "id": "child-id-b901e4",
      "type": "child-node-type",
      "position": {
        "x": 0,
        "y": 0
      }
    }
  ]
}