1

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

pmueller
  • 143
  • 1
  • 19
  • 1
    Not directly. See if you can get a sort of javascript event in the original component that PrimeFaces uses for the diagram. If that works, you can (sort of) get a PrimeFaces context menu menu working. If you cannot find a solution for the underlying component, it becomes hard and a lot of work. – Kukeltje Feb 05 '20 at 13:33

1 Answers1

0

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>
...
shokulei
  • 85
  • 7