If you don't need a server-side listener for the resize or rotate event in the ImageRotateAndResize example, you could use pe:javascript to reload the ImageAreaSelect widget.
In this example the resize event is also catched with pe:javascript.
Source
<p:outputPanel id="example">
<p:commandLink update="example">
<f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage1.png" />
<p:graphicImage value="/resources/images/testImage1.png" width="150" height="100"/>
</p:commandLink>
<p:commandLink update="example">
<f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage2.png" />
<p:graphicImage value="/resources/images/testImage2.png" width="150" height="100"/>
</p:commandLink>
<p:commandLink update="example">
<f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage3.png" />
<p:graphicImage value="/resources/images/testImage3.png" width="150" height="100"/>
</p:commandLink>
<p:growl id="growl" showDetail="true" sticky="true" />
<div id="imageWrapper" style="width:600px; height:400px; margin:auto; overflow:scroll; position:relative;">
<p:graphicImage id="myImage" value="#{imageController.imageUrl}" />
</div>
<pe:imageAreaSelect id="areaSelect"
for="myImage"
widgetVar="areaSelectWidget"
autoHide="true"
handles="false"
movable="false"
persistent="false"
resizable="false"
parentSelector="#imageWrapper">
<p:ajax event="selectEnd" listener="#{imageController.selectEndListener}" update="growl"/>
</pe:imageAreaSelect>
<pe:imageRotateAndResize id="rotateAndResize" for="myImage" widgetVar="rotateAndResizeWidget">
<p:ajax event="rotate" listener="#{imageController.rotateListener}"
update="growl" oncomplete="PF('areaSelectWidget').reload();"/>
<pe:javascript event="resize" execute="PF('areaSelectWidget').reload();"/>
</pe:imageRotateAndResize>
<p:commandButton icon="ui-icon-arrowreturnthick-1-w" value="Rotate Left"
onclick="PF('rotateAndResizeWidget').rotateLeft(90);return false;"/>
<p:commandButton icon="ui-icon-arrowreturnthick-1-e" value="Rotate Right"
onclick="PF('rotateAndResizeWidget').rotateRight(90);return false;"/>
<p:commandButton icon="ui-icon-zoomin" value="Scale +"
onclick="PF('rotateAndResizeWidget').scale(1.05);return false;"/>
<p:commandButton icon="ui-icon-zoomout" value="Scale -"
onclick="PF('rotateAndResizeWidget').scale(0.95);return false;"/>
</p:outputPanel>
@Named
@ViewScoped
public class ImageController implements Serializable {
private static final long serialVersionUID = 20111020L;
private String imageUrl;
public ImageController() {
imageUrl = "/resources/images/testImage1.png";
}
public void selectEndListener(final ImageAreaSelectEvent e) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Area selected",
"X1: " + e.getX1() + ", X2: " + e.getX2() + ", Y1: " + e.getY1() + ", Y2: " + e.getY2()
+ ", Image width: " + e.getImgWidth() + ", Image height: " + e.getImgHeight());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void rotateListener(final RotateEvent e) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Image rotated",
"Degree:" + e.getDegree());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void resizeListener(final ResizeEvent e) {
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Image resized",
"Width:" + e.getWidth() + ", Height: " + e.getHeight());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public String getImageUrl() {
return imageUrl;
}
public void setImageUrl(final String imageUrl) {
this.imageUrl = imageUrl;
}
}