How to add an ContextMenu to a Diagram Element in Primefaces - jsf

Question

Is it possible to add an Context Menu to an Element in an Diagram?
I was able to add the Context Menu to the whole diagram in the xhtml file, but the context menu should only be shown if the user do a right click on the elment.
I try to solve it programmatically but the context menu is not show.
Here is my code:
DefaultDiagramModel model = new DefaultDiagramModel();
model.setMaxConnections(-1);
Element element = new Element();
element.setData("someData");
element.setId("testId");
ContextMenu contextMenu = new ContextMenu();
DynamicMenuModel menuModel = new DynamicMenuModel();
DefaultMenuItem menuItem = new DefaultMenuItem("show Info");
menuModel.addElement(menuItem);
contextMenu.setModel(menuModel);
contextMenu.setFor(element.getId());
model.addElement(element);
I use Primefaces 7

Answer 1

I ran into the same needs. Instead of adding the ContextMenu in the Bean. I was able to get it working using <f:facet> in the xhtml file like the following:
Create an new Class to use as the Data
public class NodeElement implements Serializable {
private Long id;
private String title;
private String type;
//... other variables
// getter and setters and other methods
}
Example creating an Element
Element element = new Element(new NodeElement(1L, "Element Title", "type1"), "30em", "16em");
in diagram.xhtml
...
<h:form id="patent-form" enctype="multipart/form-data">
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
<p:diagram id="sample-graph" value="#{diagramBasicView.model}" styleClass="ui-widget-content" var="el">
<f:facet name="element">
<h:panelGroup layout="block" rendered="#{el.type == 'type1'}" id="type1-node" styleClass="type1-node" ps:data-id="#{el.id}">
<h:panelGroup laybout="block" styleClass="graph-node-content" ps:data-id="#{el.id}">
<h:outputText ps:title="Node Title: #{el.title}" ps:data-id="#{el.id}" value="#{el.title.length() gt 45 ? el.title.substring(0, 45) : el.title}" styleClass="graph-node-title"/>
<!-- ... OTHER data (make sure to use h:outputText or other JSF tags) -->
</h:panelGroup>
</h:panelGroup>
...
</h:panelGroup>
<f:facet>
</p:diagram>
<!-- from https://stackoverflow.com/questions/35812682/jsf-primefaces-eventing-in-diagram-elements -->
<p:remoteCommand name="elementClicked" actionListener="#{diagramBasicView.onSelection()}"/>
<p:contextMenu for="type1-node" style="width: 220px; height: 150px;">
<p:menuitem value="Show Info"
update="sample-graph"
id="show-info-menu-item"/>
<p:menuitem value="Second Menu"
update="sample-graph"
id="second-menu-item"/>
</p:contextMenu>
</h:form>
<!-- use to get the id from the element as data attribute -->
<script>
$('.ui-diagram > .ui-diagram-element').contextmenu(function(info){
// console.log($(info.target).data('id'));
elementClicked([ {
name : 'elementId',
value : $(info.target).data('id')
} ]);
});
</script>
...