Custom view

[NourEldin-Ali]

Hi,

Could please help me to define a new shape design in the client side?
(like this for example
)

Thank you in advance for taking the time to read my question.
Hoping for a response.

Ali

[tortmayr]

Hi @NourEldin-Ali,

sorry for the late response. I would recommend to have a look at the GLSP website documentation. The Rendering & Styling Section describes how you can configure new model elements and their rendered representation on the client side.

In a nutshell, each model element (type) gets associated with a View. The View is responsible for rendering i.e. creating the corresponding SVG element for a given model element.

For your example I would recommend to split this into three components:
A node that contains an icon and a label element.

• For the label element you should be able to reuse the default SLabel rendering
• For the icon element you could use the default PrerenderedElementView which lets you display arbitrary svg images.
• For the node you need a custom view the define its shape. I personally would probably use a SVG path to describe the shape. You could also have a look at the RouneredCornerNodeView implementation for an example.