p:diagram doesn't update element locations

[smutchler]

I'm using JSF 2.2.9 with Primefaces 6.1.3 on Apache Tomcat.

When you move diagram elements around, the X and Y values are not updated (getX(), getY()). If you programatically, add a new element and re-render the diagram, the "new" positions of elements (set using the mouse) are wiped out and the original locations restored. Is there a way to make the moved to (via mouse) positions updated/persisted? Maybe a hack work around?

I need a way to make the diagram mouse interactive and ultimately persistent.

Thanks!

[kukeltje]

Tried a more recent PF version?

[smutchler]

It has the same behavior in 6.2. Without the ability for x, y to be updated this becomes useless for creating an interactive diagram. Any ideas on what I might try?

[smutchler]

I found a work around for this. If you capture the x, y of the diagram element in JavaScript and call a remote event handler and pass the new x, y and call the setters on the diagram element.

<p:remoteCommand name="nodeClicked" actionListener="#{flowBean.onElementClicked}" />
<script type="text/javascript">
$(document).on('click', '.ui-diagram > .ui-diagram-element',
function(info) {
//alert(info.target.parentElement.id);
//alert(info.pageX);
y = info.target.parentElement.getBoundingClientRect().top - 180.0;
x = info.target.parentElement.getBoundingClientRect().left - 341.0;
//alert(x + "," + y);
nodeClicked([ {
name : 'nodeId',
value : info.target.parentElement.id
}, {
name: 'x',
value: x
}, {
name: 'y',
value: y
} ]);
});
</script>

In backing bean:

public void onElementClicked() {
String fullNodeId = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap()
.get("nodeId");
String nodeId = fullNodeId.split("-")[1];

// this is a work around to have the X, Y updated on the node (omission in
// PrimeFaces: https://github.com/primefaces/primefaces/issues/3411)
String x = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("x");
String y = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("y");
x = String.valueOf((int)Double.parseDouble(x));
y = String.valueOf((int)Double.parseDouble(y));
System.out.println("x,y: " + x + "," + y);

// find the diagram element
Element element = getElementByID(nodeId);
element.setX(x + "px");
element.setY(y + "px");

I used a naming convention for my nodes so that I can map between node id in html and my diagram ids.

[kukeltje]

Thanks for the feedback. Can you edit your answer and put the code in [ code ] .... [ /code ] tags (without the spaces) and format it so it is better readable? Thanks