fix: update cropped image when crop is set from server side

Close #19

Author: javier-godoy

src/main/java/com/flowingcode/vaadin/addons/imagecrop/ImageCrop.java

@@ -2,7 +2,7 @@
  * #%L
  * Image Crop Add-on
  * %%
- * Copyright (C) 2024 Flowing Code
+ * Copyright (C) 2024-2025 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -48,7 +48,7 @@
 @CssImport("react-image-crop/dist/ReactCrop.css")
 @CssImport("./styles/image-crop-styles.css")
 public class ImageCrop extends ReactAdapterComponent {
-  
+
   private static final String IMG_FULL_HEIGHT_CLASS_NAME = "img-full-height";
 
   private String croppedImageDataUri;
@@ -59,9 +59,9 @@ public class ImageCrop extends ReactAdapterComponent {
    * @param src the URL of the image to be cropped
    */
   public ImageCrop(String src) {
-    this.setImageSrc(src);
-    this.addCroppedImageListener(this::updateCroppedImage);
-    this.croppedImageDataUri = src;
+    setImageSrc(src);
+    addCroppedImageListener(this::updateCroppedImage);
+    croppedImageDataUri = src;
   }
 
   /**
@@ -71,7 +71,7 @@ public ImageCrop(String src) {
    */
   public ImageCrop(Image image) {
     this(image.getSrc());
-    image.getAlt().ifPresent(a -> this.setImageAlt(a)); 
+    image.getAlt().ifPresent(a -> setImageAlt(a));
   }
 
   /**
@@ -93,7 +93,7 @@ protected Registration addCroppedImageListener(
    * @param event the event containing the new cropped image data URI
    */
   private void updateCroppedImage(CroppedImageEvent event) {
-    this.croppedImageDataUri = event.getCroppedImageDataUri();
+    croppedImageDataUri = event.getCroppedImageDataUri();
   }
 
   /**
@@ -134,11 +134,12 @@ public String getImageAlt() {
 
   /**
    * Defines the crop dimensions.
-   * 
+   *
    * @param crop the crop dimensions
    */
   public void setCrop(Crop crop) {
     setState("crop", crop);
+    getElement().executeJs("this._updateCroppedImage(this.crop)");
   }
 
   /**
@@ -151,7 +152,7 @@ public Crop getCrop() {
   /**
    * Sets the aspect ratio of the crop.
    * For example, 1 for a square or 16/9 for landscape.
-   * 
+   *
    * @param aspect the aspect ratio of the crop
    */
   public void setAspect(double aspect) {
@@ -171,7 +172,7 @@ public double getAspect() {
    * Sets whether the crop area should be shown as a circle.
    * If the aspect ratio is not 1, the circle will be warped into an oval shape.
    * Defaults to false.
-   * 
+   *
    * @param circularCrop true to show the crop area as a circle, false otherwise
    */
   public void setCircularCrop(boolean circularCrop) {
@@ -190,7 +191,7 @@ public boolean isCircularCrop() {
   /**
    * Sets whether the selection can't be disabled if the user clicks outside
    * the selection area. Defaults to false.
-   * 
+   *
    * @param keepSelection true so selection can't be disabled if the user clicks
    *                      outside the selection area, false otherwise.
    */
@@ -209,7 +210,7 @@ public boolean isKeepSelection() {
 
   /**
    * Sets whether the user cannot resize or draw a new crop. Defaults to false.
-   * 
+   *
    * @param disabled true to disable crop resizing and drawing, false otherwise
    */
   public void setDisabled(boolean disabled) {
@@ -228,7 +229,7 @@ public boolean isDisabled() {
   /**
    * Sets whether the user cannot create or resize a crop, but can still drag the
    * existing crop around. Defaults to false.
-   * 
+   *
    * @param locked true to lock the crop, false otherwise
    */
   public void setLocked(boolean locked) {
@@ -246,7 +247,7 @@ public boolean isLocked() {
 
   /**
    * Sets a minimum crop width, in pixels.
-   * 
+   *
    * @param minWidth the minimum crop width
    */
   public void setCropMinWidth(Integer minWidth) {
@@ -264,7 +265,7 @@ public Integer getCropMinWidth() {
 
   /**
    * Sets a minimum crop height, in pixels.
-   * 
+   *
    * @param minHeight the minimum crop height
    */
   public void setCropMinHeight(Integer minHeight) {
@@ -282,7 +283,7 @@ public Integer getCropMinHeight() {
 
   /**
    * Sets a maximum crop width, in pixels.
-   * 
+   *
    * @param maxWidth the maximum crop width
    */
   public void setCropMaxWidth(Integer maxWidth) {
@@ -300,7 +301,7 @@ public Integer getCropMaxWidth() {
 
   /**
    * Sets a maximum crop height, in pixels.
-   * 
+   *
    * @param maxHeight the maximum crop height
    */
   public void setCropMaxHeight(Integer maxHeight) {
@@ -319,7 +320,7 @@ public Integer getCropMaxHeight() {
   /**
    * Sets whether to show rule of thirds lines in the cropped area. Defaults to
    * false.
-   * 
+   *
    * @param ruleOfThirds true to show rule of thirds lines, false otherwise
    */
   public void setRuleOfThirds(boolean ruleOfThirds) {
@@ -341,7 +342,7 @@ public boolean isRuleOfThirds() {
    * @return the cropped image data URI
    */
   public String getCroppedImageDataUri() {
-    return this.croppedImageDataUri;
+    return croppedImageDataUri;
   }
 
   /**
@@ -353,26 +354,27 @@ public String getCroppedImageDataUri() {
    * @param fullHeight whether the image should fill the viewport height
    */
   public void setImageFullHeight(Boolean fullHeight) {
-    if (fullHeight)
-      this.addClassName(IMG_FULL_HEIGHT_CLASS_NAME);
-    else
-      this.removeClassName(IMG_FULL_HEIGHT_CLASS_NAME);
+    if (fullHeight) {
+      addClassName(IMG_FULL_HEIGHT_CLASS_NAME);
+    } else {
+      removeClassName(IMG_FULL_HEIGHT_CLASS_NAME);
+    }
   }
 
   /**
    * Decodes the cropped image data URI and returns it as a byte array. If the image data URI is not
    * in the format "data:image/*;base64,", it will be decoded assuming it is a Base64 encoded
    * string.
-   * 
+   *
    * <p>
    * This method incorporates work licensed under MIT. Copyright 2021-2023 David "F0rce" Dodlek
    * https://github.com/F0rce/cropper
    * </p>
-   * 
+   *
    * @return byte[] the decoded byte array of the cropped image
    */
   public byte[] getCroppedImageBase64() {
-    String croppedDataUri = this.getCroppedImageDataUri();
+    String croppedDataUri = getCroppedImageDataUri();
     if (StringUtils.isBlank(croppedDataUri)) {
       return null;
     }

src/main/resources/META-INF/resources/frontend/src/image-crop.tsx

@@ -2,7 +2,7 @@
  * #%L
  * Image Crop Add-on
  * %%
- * Copyright (C) 2024 Flowing Code
+ * Copyright (C) 2024-2025 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@
 import { ReactAdapterElement, RenderHooks } from 'Frontend/generated/flow/ReactAdapter';
 import { JSXElementConstructor, ReactElement, useRef, useEffect } from "react";
 import React from 'react';
-import { type Crop, ReactCrop, PixelCrop, makeAspectCrop, centerCrop } from "react-image-crop";
+import { type Crop, ReactCrop, PixelCrop, PercentCrop, makeAspectCrop, centerCrop, convertToPixelCrop } from "react-image-crop";
 
 class ImageCropElement extends ReactAdapterElement {
 
@@ -70,6 +70,7 @@ class ImageCropElement extends ReactAdapterElement {
 						height
 					)
 					setCrop(newcrop);
+					this._updateCroppedImage(newcrop);
 				}
 			}
 		};
@@ -122,69 +123,9 @@ class ImageCropElement extends ReactAdapterElement {
 		};
 
 		const onComplete = (c: PixelCrop) => {
-			croppedImageEncode(c);
+			this._updateCroppedImage(c);
 		};
-
-		const croppedImageEncode = (completedCrop: PixelCrop) => {
-			if (completedCrop) {
-
-				// get the image element
-				const image = imgRef.current;
-
-				// create a canvas element to draw the cropped image
-				const canvas = document.createElement("canvas");
-
-				// draw the image on the canvas
-				if (image) {
-					const ccrop = completedCrop;
-					const scaleX = image.naturalWidth / image.width;
-					const scaleY = image.naturalHeight / image.height;
-					const ctx = canvas.getContext("2d");
-					const pixelRatio = window.devicePixelRatio;
-					canvas.width = ccrop.width * pixelRatio;
-					canvas.height = ccrop.height * pixelRatio;
-
-					if (ctx) {
-						ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-						ctx.imageSmoothingQuality = "high";
-
-						ctx.save();
-
-						if (circularCrop) {
-							canvas.width = ccrop.width;
-							canvas.height = ccrop.height;
-
-							ctx.beginPath();
-
-							ctx.arc(ccrop.width / 2, ccrop.height / 2, ccrop.height / 2, 0, Math.PI * 2, true);
-							ctx.closePath();
-							ctx.clip();
-						}
-
-						ctx.drawImage(
-							image,
-							ccrop.x * scaleX,
-							ccrop.y * scaleY,
-							ccrop.width * scaleX,
-							ccrop.height * scaleY,
-							0,
-							0,
-							ccrop.width,
-							ccrop.height
-						);
-
-						ctx.restore();
-					}
-
-					// get the cropped image
-					let croppedImageDataUri = canvas.toDataURL("image/png", 1.0);
-
-					// dispatch the event containing cropped image
-					this.fireCroppedImageEvent(croppedImageDataUri);
-				}
-			}
-		}
-
+		
 		return (
 			<ReactCrop
 				crop={crop}
@@ -219,6 +160,61 @@ class ImageCropElement extends ReactAdapterElement {
 			})
 		);
 	}
+	
+	public _updateCroppedImage(crop: PixelCrop|PercentCrop) {
+			const image = this.querySelector("img");
+			if (crop && image) {
+
+				crop = convertToPixelCrop(crop, image.width, image.height);
+				
+				// create a canvas element to draw the cropped image
+				const canvas = document.createElement("canvas");
+
+				// draw the image on the canvas
+				const ccrop = crop;
+				const scaleX = image.naturalWidth / image.width;
+				const scaleY = image.naturalHeight / image.height;
+				const ctx = canvas.getContext("2d");
+				const pixelRatio = window.devicePixelRatio;
+				canvas.width = ccrop.width * pixelRatio;
+				canvas.height = ccrop.height * pixelRatio;
+
+				if (ctx) {
+					ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+					ctx.imageSmoothingQuality = "high";
+					ctx.save();
+
+					if (this.circularCrop) {
+						canvas.width = ccrop.width;
+						canvas.height = ccrop.height;
+						ctx.beginPath();
+						ctx.arc(ccrop.width / 2, ccrop.height / 2, ccrop.height / 2, 0, Math.PI * 2, true);
+						ctx.closePath();
+						ctx.clip();
+					}
+
+					ctx.drawImage(
+						image,
+						ccrop.x * scaleX,
+						ccrop.y * scaleY,
+						ccrop.width * scaleX,
+						ccrop.height * scaleY,
+						0,
+						0,
+						ccrop.width,
+						ccrop.height
+					);
+
+					ctx.restore();
+
+					// get the cropped image
+					let croppedImageDataUri = canvas.toDataURL("image/png", 1.0);
+
+					// dispatch the event containing cropped image
+					this.fireCroppedImageEvent(croppedImageDataUri);
+				}
+			}
+	}
 }
 
 customElements.define("image-crop", ImageCropElement);