Search code examples
primefacesjsplumb

primefaces org.primefaces.component.diagram override


I have a problem with org.primefaces.component.diagram, i want to add an action when click on any overlay or connector, i make this using jquery, but the problem is that there is no identifier for the connection, after search i was able to get the ids of the 2 end points of the connection but if there is many connection between the same points then i cannot distinguish between them, i tried to override the diagram and add "connectionId" attribute on the connection but i got an exception in the front end :

Uncaught ReferenceError: connectionId590236 is not defined at eval (eval at (jquery.js.xhtml?ln=primefaces&v=5.2:14), :1:1488) screenshot


Solution

  • finally i found an acceptable solution :

    -> add an label overlay on the connection and set the identifier on it.

    org.primefaces.model.diagram.Connection conn = new org.primefaces.model.diagram.Connection(
                EndPointA, EndPointB);
    
    LabelOverlay labelOverlay = new LabelOverlay(connection.getId(), "labelOverlayClass", 0.3);
        conn.getOverlays().add(labelOverlay);
    

    -> then add JS function to handle on dbclick action on the connection and get the id from its related overlay using the classes "._jsPlumb_overlay" and "._jsPlumb_hover"

    <p:remoteCommand name="connectionClicked"
        actionListener="#{yourBean.onConnectionDoubleClick}" />
    
    <script type="text/javascript">
        var connectionId;
    
        $('._jsPlumb_connector').on('dblclick', function(e) {
    
            $('._jsPlumb_overlay._jsPlumb_hover').each(function() {
                connectionId =  $(this).text();
            });
    
            connectionClicked([ { name : 'connectionId', value : connectionId } ]);
        });
        });
    </script>
    

    -> finally in the bean you extract the id and do whatever you want

    public void onConnectionDoubleClick() {
        Map<String, String> params = FacesContext.getCurrentInstance()
                .getExternalContext().getRequestParameterMap();
    
        String connectionId = params.get("connectionId");
    
        if(StringUtils.isBlank(connectionId))
            return;
    
        .........