Text Wrapping in Label Node

[noman-khan1224]

We're working on incorporating text wrapping into our labelNode, using the GLabelView to create it, which typically produces a tag. Given that our text content might exceed the fixed size of the RectangularNode in our setup, is there a method to enable text wrapping for nodes with longer text content?

[planger]

SVG has no builtin support for line wrapping. As a workaround you can use a ForeignObjectElement (see example in docs) and re-use the text wrapping capability of the browser. Note that the rendering will then only work in browsers though.

I believe @rsoika has a SVG-native implementation for a similar requirement though.

[rsoika]

Hi @noman-khan1224 , yes we have implemented a custom view on the client, that splits up a longer label into multiple lines. We use <tspan> tags as these tags are also supported in a SVG export. We compute the layout completely on the client view. So the server just set the element type.

Find the implementation here: https://github.com/imixs/open-bpmn/blob/48a21aeebc511a39a69b55e8d02eeba8d5605528/open-bpmn.glsp-client/open-bpmn-glsp/src/bpmn-element-views.tsx#L538

And you can try it out in our online demo here:

https://open-bpmn.imixs.org/#/usr/src/app/open-bpmn.glsp-client/workspace

The labels of an event node and the Text Annotation are supporting this feature.

[noman-khan1224]

Hi @rsoika,

I have tried your approach. It's working fine until the length of word is less than than the width of node. Here what I am aiming to achieve is to wrap the text according to node-width similar to TextArea in Html.

[rsoika]

Hi @noman-khan1224 , ok than take a look at the method textLineSplitter https://github.com/imixs/open-bpmn/blob/48a21aeebc511a39a69b55e8d02eeba8d5605528/open-bpmn.glsp-client/open-bpmn-glsp/src/bpmn-element-views.tsx#L579C10-L579C26
You can adapt this method to your needs.