素数面org.primefaces.component.diagram覆盖

Question

我对org.primefaces.component.diagram有问题，我想在单击任何覆盖或连接器时添加一个操作，我使用jquery进行操作，但问题是连接没有标识符，搜索后我能够获得连接的两个端点的in，但是如果在相同的点之间有许多连接，那么我就无法区分它们，我试图覆盖图表并在连接上添加"connectionId“属性，但是在前端得到了一个异常：

Uncaught : connectionId590236在 屏幕截图中未定义( at (jquery.js.xhtml?ln=primefaces&v=5.2:14)，1:1488)

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操作，并使用"._jsPlumb_overlay“和"._jsPlumb_hover”类从其相关的覆盖层获取id。

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

最后，->在bean中提取id并做任何您想做的事情

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

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

    if(StringUtils.isBlank(connectionId))
        return;

    .........

Answer 2

壁橱解决方案是在创建setId时在Element上使用DefaultDiagramModel。

一个例子如下：

    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值es。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);
});

注意：canvas属性的widgetVar是jsPlumbInstance的当前实例

这是一个在线演示，以及一个关于github的小例子。

Answer 3

通过扩展primefaces类，我能够添加一个click事件来覆盖。如果您对toJS()类进行了更改(从Primefaces LabelOverLay获得了很大的灵感)，那么您可以使用jsplumb覆盖构造函数编写自己的覆盖。下面是我的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();
    }
}

将您想要执行的任何javascript放在onClick变量中，当您单击覆盖时，它将运行。为了方便起见，我将其添加到图表的默认覆盖集中。

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