Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
JavascriptBehaviour
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>
            
Components and more
Documentation pe:javascript
Attributes (move mouse over the names to see data types)
Name Description
execute The javascript which should be executed.
disabled Boolean value to specify the rendering of the behavior, when set to false behavior will not be rendered.
event The name of the event.
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01