p:diagram multiline node text

[jurajjuraj]

Hello,

I'm using primefaces 5.3, JSF 2.2., and am currently modifying the primefaces showcase example: http://www.primefaces.org/showcase/ui/d ... hart.xhtml

My question is whether and how can I split text to multiple lines in a node (type Element) text label?

Code: Select all

Element my_node = new Element(" I want to insert line breaks here and there to make the label more readable.", "50em", "30em");

I know I can use word-break: break-all; in CSS to force the text to fit the node size, but I'd like to manually insert breaks where I want to.

I've tried inserting &#8203;, <br />, <wbr> into the node label, but it doesn't work.

[jurajjuraj]

I found no elegant solution to this. It seems that at some point the diagram encodes the < and > chars from node names into < and >

So the only thing I was able to come up with was to call a javascript function onload and have it replace the <br> with <br> in every class-defined element:

var node_list = document.getElementsByClassName("ui-diagram-element");
for (var i = 0; i < node_list.length; i++) {
node_list.innerHTML = node_list.innerHTML.replace('<br>',"<br>");
}

Of course, I had to correct node height in advance so the new line of text would fit.

[offroadbiker]

Have you tried adding a component(s) to the element facet of the diagram? Take a look at the diagram showcase "Editable" example e.g.

Code: Select all

<p:diagram value="#{diagramEditableView.model}" style="height:600px" styleClass="ui-widget-content" var="el">
        <f:facet name="element">
            <h:outputText value="#{el.name}" style="display:block;margin-top:1em;"/>
            <p:graphicImage name="demo/images/#{el.image}" />
        </f:facet>
        <p:ajax event="connect" listener="#{diagramEditableView.onConnect}" />
        <p:ajax event="disconnect" listener="#{diagramEditableView.onDisconnect}" />
        <p:ajax event="connectionChange" listener="#{diagramEditableView.onConnectionChange}" />
    </p:diagram>

Notice that the output text's style is display:block. Perhaps you can use two output texts, each of them displaying block?