Primefaces：图元素的克隆无法正常工作

我想在primefaces中的现有图表上添加多个元素，但它会一直覆盖创建的图表。它创建了第一个元素，之后每当我在图表上放置新元素时，它就会一直覆盖。 我通过拖放使用面板向图表中添加新元素

请参见下面我的代码（diagram.xhtml）：

//

相关Bean（FormChartView.java）：

@ManagedBean（name=“diagramFlowChartView”）
@请求范围
公共类流程图{
私有图模型；
私有元素elm=新元素（“，”25em“，”10em”）；
私有列表元素=新的ArrayList（）；
公共无效OneElementDrop（DragDropEvent ddEvent）{
字符串dargId=ddEvent.getDropId（）；
System.out.println（“dargId=“+dargId”）；
Map params=FacesContext.getCurrentInstance（）.getExternalContext（）.getRequestParameterMap（）；
String left=params.get（dargId+“_left”）；
字符串top=params.get（dargId+“_top”）；
elment=新元素（“测试”，左侧，顶部）；
setId（UUID.randomuid（）.toString（））；
System.out.println（“elm.id=“+elm.getId（））；
模型.加法（elm）；
}
@施工后
公共void init（）{
模型=新的DefaultDiagramModel（）；
elm=新元素（“，”25em“，”10em“）；
model.setMaxConnections（-1）；
FlowChartConnector=新的FlowChartConnector（）；
connector.setPaintStyle（“{strokeStyle:'#C7B097'，线宽：3}”）；
model.setDefaultConnector（连接器）；
元素开始=新元素（“为梦想而战”、“20em”、“6em”）；
start.addEndPoint（新的BlankEndPoint（EndPointAnchor.BOTTOM））；
start.addEndPoint（新的BlankEndPoint（EndPointAnchor.LEFT））；
start.setDraggable（true）；
start.setStyleClass（“背景色：#98AFC7”）；
元素麻烦=新元素（“你遇到麻烦了吗？”、“20em”、“18em”）；
addEndPoint（新的BlankEndPoint（EndPointAnchor.TOP））；
addEndPoint（新的BlankEndPoint（EndPointAnchor.BOTTOM））；
addEndPoint（新的BlankEndPoint（EndPointAnchor.RIGHT））；
故障。可设置为可设置（真）；
元素放弃=新元素（“你放弃了吗？”、“20em”、“30em”）；
addEndPoint（新的BlankEndPoint（EndPointAnchor.TOP））；
addEndPoint（新的BlankEndPoint（EndPointAnchor.LEFT））；
addEndPoint（新BlankEndPoint（EndPointAnchor.RIGHT））；
元素成功=新元素（“成功”、“50em”、“18em”）；
success.addEndPoint（新的BlankEndPoint（EndPointAnchor.LEFT））；
setStyleClass（“ui图成功”）；
元素失败=新元素（“失败”、“50em”、“30em”）；
fail.addEndPoint（新的BlankEndPoint（EndPointAnchor.LEFT））；
失败。setStyleClass（“ui图失败”）；
模型。附加元素（开始）；
模型.附加元件（故障）；
模型。添加元素（放弃）；
模型.加法（SUCCESS）；
模型补遗（失败）；
元素。添加（开始）；
元素。添加（麻烦）；
元素。添加（放弃）；
元素。添加（成功）；
元素。添加（失败）；
connect（createConnection（start.getEndPoints（）.get（0），trouble.getEndPoints（）.get（0），null））；
model.connect（createConnection（trouble.getEndPoints（）.get（1），giveup.getEndPoints（）.get（0），“Yes”）；
connect（createConnection（giveup.getEndPoints（）.get（1），start.getEndPoints（）.get（1），“No”）；
model.connect（createConnection（trouble.getEndPoints（）.get（2），succeed.getEndPoints（）.get（0），“No”）；
连接（createConnection（giveup.getEndPoints（）.get（2），fail.getEndPoints（）.get（0），“Yes”）；
}
公共DefaultDiagramModel getModel（）{
收益模型；
}
公共void集合模型（DefaultDiagramModel模型）{
this.model=模型；
}
公共元素getElment（）{
返回埃尔蒙；
}
公共无效集合元素（元素元素元素）{
this.elment=elment；
}
公共列表getElements（）{
返回元素；
}
公共void集合元素（列表元素）{
这个元素=元素；
}
专用连接createConnection（端点从、端点到、字符串标签）{
连接连接=新连接（从、到）；
conn.getOverlays（）.add（新的箭头覆盖（20,20,1,1））；
如果（标签！=null）{
conn.getOverlays（）.add（新标签Overlay（标签，“流量标签”，0.5））；
}
返回连接；
}

}我的错。 这是因为每次发出（ajax）请求时都要重新初始化元素列表。这又是由bean作用域

@requestscope

---

将@RequestScoped更改为@ViewScoped解决了这个问题。

感谢@Kukeltje在primefaces论坛上解决了这个问题。：-）@Kukeltje：我如何从这里指出你的解决方案？或者最好的方法是什么？不需要；）接受你自己的答案（我编辑了一点）

<h:form id="elementForm">

    <p:panel id="epnl" header="Draggable Panel">
        <h:outputText value="New Workflow Task" />
    </p:panel>
    <p:draggable for="epnl" helper="clone" />

    <p:outputPanel id="selectedElements" style="height:600px">
        <p:diagram id="diagramV" value="#{diagramFlowChartView.model}"
            style="height:600px" styleClass="ui-widget-content" />
    </p:outputPanel>


    <p:droppable for="diagramV" widgetVar="dropWV">
        <p:ajax listener="#{diagramFlowChartView.onElementDrop}"
            update="elementForm, selectedElements, diagramV" />
    </p:droppable>
</h:form>
<script type="text/javascript">
    //<![CDATA[
    PrimeFaces.widget.Droppable.prototype.bindDropListener = function() {
        var _self = this;
        this.cfg.drop = function(event, ui) {
            if (_self.cfg.onDrop) {
                _self.cfg.onDrop.call(_self, event, ui);
            }
            if (_self.cfg.behaviors) {
                var dropBehavior = _self.cfg.behaviors['drop'];
                if (dropBehavior) {
                    var ext = {
                        params : [ {
                            name : _self.id + '_dragId',
                            value : ui.draggable.attr('id')
                        }, {
                            name : _self.id + '_dropId',
                            value : _self.cfg.target
                        }, {
                            name : ui.draggable.attr('id') + '_left',
                            value : ui.position.left
                        }, {
                            name : ui.draggable.attr('id') + '_top',
                            value : ui.position.top
                        } ]
                    };
                    console.log(ui);
                    dropBehavior.call(_self, ext);
                }
            }
        };
    }
    // ]]>
</script>   

@ManagedBean(name = "diagramFlowChartView")
@RequestScoped
public class FlowChartView {

private DefaultDiagramModel model;

private Element elm = new Element("", "25em", "10em");

private List<Element> elements = new ArrayList<Element>();

public void onElementDrop(DragDropEvent ddEvent) {
    String dargId = ddEvent.getDropId();
    System.out.println("dargId = " + dargId);
    Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    String left = params.get(dargId + "_left");
    String top = params.get(dargId + "_top");
    elment = new Element("Test", left, top);
    elment.setId(UUID.randomUUID().toString());
    System.out.println("elm.id = " + elm.getId());
    model.addElement(elm);

}


@PostConstruct
public void init() {
    model = new DefaultDiagramModel();
    elm = new Element("", "25em", "10em");
    model.setMaxConnections(-1);

    FlowChartConnector connector = new FlowChartConnector();
    connector.setPaintStyle("{strokeStyle:'#C7B097',lineWidth:3}");
    model.setDefaultConnector(connector);

    Element start = new Element("Fight for your dream", "20em", "6em");
    start.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM));
    start.addEndPoint(new BlankEndPoint(EndPointAnchor.LEFT));
    start.setDraggable(true);
    start.setStyleClass("background-color: #98AFC7");

    Element trouble = new Element("Do you meet some trouble?", "20em", "18em");
    trouble.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP));
    trouble.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM));
    trouble.addEndPoint(new BlankEndPoint(EndPointAnchor.RIGHT));
    trouble.setDraggable(true);

    Element giveup = new Element("Do you give up?", "20em", "30em");
    giveup.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP));
    giveup.addEndPoint(new BlankEndPoint(EndPointAnchor.LEFT));
    giveup.addEndPoint(new BlankEndPoint(EndPointAnchor.RIGHT));

    Element succeed = new Element("Succeed", "50em", "18em");
    succeed.addEndPoint(new BlankEndPoint(EndPointAnchor.LEFT));
    succeed.setStyleClass("ui-diagram-success");

    Element fail = new Element("Fail", "50em", "30em");
    fail.addEndPoint(new BlankEndPoint(EndPointAnchor.LEFT));
    fail.setStyleClass("ui-diagram-fail");

    model.addElement(start);
    model.addElement(trouble);
    model.addElement(giveup);
    model.addElement(succeed);
    model.addElement(fail);

    elements.add(start);
    elements.add(trouble);
    elements.add(giveup);
    elements.add(succeed);
    elements.add(fail);


    model.connect(createConnection(start.getEndPoints().get(0), trouble.getEndPoints().get(0), null));
    model.connect(createConnection(trouble.getEndPoints().get(1), giveup.getEndPoints().get(0), "Yes"));
    model.connect(createConnection(giveup.getEndPoints().get(1), start.getEndPoints().get(1), "No"));
    model.connect(createConnection(trouble.getEndPoints().get(2), succeed.getEndPoints().get(0), "No"));
    model.connect(createConnection(giveup.getEndPoints().get(2), fail.getEndPoints().get(0), "Yes"));
}

public DefaultDiagramModel getModel() {
    return model;
}

public void setModel(DefaultDiagramModel model) {
    this.model = model;
}

public Element getElment() {
    return elment;
}


public void setElment(Element elment) {
    this.elment = elment;
}


public List<Element> getElements() {
    return elements;
}


public void setElements(List<Element> elements) {
    this.elements = elements;
}


private Connection createConnection(EndPoint from, EndPoint to, String label) {
    Connection conn = new Connection(from, to);
    conn.getOverlays().add(new ArrowOverlay(20, 20, 1, 1));

    if(label != null) {
        conn.getOverlays().add(new LabelOverlay(label, "flow-label", 0.5));
    }

    return conn;
}