primefaces org.primefaces.component.diagram覆盖

Question

我有org.primefaces.component.diagram的问题，我想添加一个动作，当点击任何覆盖或连接器，我使用jquery，但这个问题是没有标识符的连接，搜索后我能够获得连接的2个端点的ID，但如果有相同的点之间有很多连接，那么我无法区分它们，我试图覆盖该图并添加在连接上 “的ConnectionId” 属性，但是我有在前端的异常：

未捕获的ReferenceError：connectionId590236不是在限定的eval（EVAL在（jquery.js.xhtml LN = primefaces & v = 5.2：14 ），：1：1488） screenshot

Answer 1

最后，我发现可接受的解决方案：

- >在连接上添加一个标签覆盖，并设置在其上的标识符。

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); 

- >然后添加JS函数来处理在连接上dbclick行动，并使用类得到其相关覆盖id为 “._jsPlumb_overlay” 和 “._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> 

- >终于在豆你提取id和做任何你想做

public void onConnectionDoubleClick() { 
    Map<String, String> params = FacesContext.getCurrentInstance() 
      .getExternalContext().getRequestParameterMap(); 

    String connectionId = params.get("connectionId"); 

    if(StringUtils.isBlank(connectionId)) 
     return; 

    ......... 

Answer 2

壁橱的解决办法是为在DefaultDiagramModel创作上Element使用setId。

一个例子是，如下所示：

Element elementA = new Element("A", "20em", "6em"); 
    elementA.setId("element-a"); 

    Element elementB = new Element("B", "10em", "18em"); 
    elementB.setId("element-b"); 


    Element elementC = new Element("C", "40em", "18em"); 
    elementC.setId("element-c"); 
    ... 

因为PrimeFaces不提供您正在搜索的控制，和原来的成分来自jsPlumb，你可以依靠，要实现你是什么寻找。

首先确保<p:diagram>的值为widgetVar。 diagramWV

一个例子是以下几点：

$(document).ready(function() { 
    //timeout makes sure the component is initialized 
    setTimeout(function() { 
    for (var key in PF('diagramWV').canvas.getAllConnections()) { 

     if (PF('diagramWV').canvas.getAllConnections().hasOwnProperty(key)) { 

      //Elemenets Events 
      // on source just once 
      $(PF('diagramWV').canvas.getAllConnections()[key].source).off('click').on('click', function() { 
       console.log($(this).attr('id')) 
      }); 
      // on target just once 
      $(PF('diagramWV').canvas.getAllConnections()[key].target).off('click').on('click', function() { 
       console.log($(this).attr('id')) 
      }); 

      //Connection Event 
      PF('diagramWV').canvas.getAllConnections()[key].bind("click", function (conn) { 
       console.log("source " + conn.sourceId); 
       console.log("target " + conn.targetId); 
      }); 
     } 
    } 
    }, 500); 
}); 

注：widgetVar的canvas属性的jsPlumbInstance

当前实例下面是一个在线demo，并github小的工作示例。

Answer 3

我是能够增加点击事件通过扩展primefaces覆盖类为叠加。如果您对toJS（）类进行了更改（从Primefaces LabelOverLay中获取灵感），那么您可以使用jsplumb overlay constructor编写自己的覆盖图。这是我的ClickableLabelOverlay的实现。

public class ClickableLabelOverlay implements Overlay { 
    private String label; 
    private String styleClass; 
    private double location = 0.5; 
    private String onClick; 

    public ClickableLabelOverlay() { 
    } 

    public ClickableLabelOverlay(String label) { 
     this.label = label; 
    } 

    public ClickableLabelOverlay(String label, String styleClass, double location, String onClick) { 
     this(label); 
     this.styleClass = styleClass; 
     this.location = location; 
     this.onClick = onClick; 
    } 

    public String getLabel() { 
     return label; 
    } 

    public void setLabel(String label) { 
     this.label = label; 
    } 

    public String getStyleClass() { 
     return styleClass; 
    } 

    public void setStyleClass(String styleClass) { 
     this.styleClass = styleClass; 
    } 

    public double getLocation() { 
     return location; 
    } 

    public void setLocation(double location) { 
     this.location = location; 
    } 

    public String getOnClick() { 
     return onClick; 
    } 

    public void setOnClick(String onClick) { 
     this.onClick = onClick; 
    } 

    public String getType() { 
     return "Label"; 
    } 

    public String toJS(StringBuilder sb) { 
     sb.append("['Label',{label:'").append(label).append("'"); 

     if(styleClass != null) sb.append(",cssClass:'").append(styleClass).append("'"); 
     if(location != 0.5) sb.append(",location:").append(location); 
     if(onClick != null) sb.append(",events:{click:function(labelOverlay, originalEvent){").append(onClick).append("}}"); 

     sb.append("}]"); 

     return sb.toString(); 
    } 
} 

将任何想要在onClick变量内执行的javascript都放入，并在点击叠加层时运行。为了方便起见，我将它添加到了我的图的一组默认覆盖图中。

diagram.getDefaultConnectionOverlays().add(new ClickableLabelOverlay(...)