From 887c95f43761d774acf3c73dbdf86987ce7d751d Mon Sep 17 00:00:00 2001 From: Flowing CI Date: Fri, 21 Feb 2025 12:58:55 +0000 Subject: [PATCH 1/6] [maven-release-plugin] prepare for next development iteration --- pom.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pom.xml b/pom.xml index 77c496c..4c252fd 100644 --- a/pom.xml +++ b/pom.xml @@ -4,7 +4,7 @@ com.flowingcode.vaadin.addons image-crop-addon - 1.1.1 + 1.1.2-SNAPSHOT Image Crop Add-on Image Crop Add-on for Vaadin Flow https://www.flowingcode.com/en/open-source/ @@ -40,7 +40,7 @@ https://github.com/FlowingCode/ImageCrop scm:git:git://github.com/FlowingCode/ImageCrop.git scm:git:ssh://git@github.com:/FlowingCode/ImageCrop.git - 1.1.1 + master From 6c920d2869a59da44c32ee4cf1446c1ec7b1b97c Mon Sep 17 00:00:00 2001 From: Paola De Bartolo Date: Tue, 11 Feb 2025 17:09:18 -0300 Subject: [PATCH 2/6] fix: adjust crop size when the image size changes Close #10 --- .../resources/frontend/src/image-crop.tsx | 86 +++++++++++++++---- 1 file changed, 69 insertions(+), 17 deletions(-) diff --git a/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx b/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx index 44ed4ad..ef17c32 100644 --- a/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx +++ b/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx @@ -19,7 +19,7 @@ */ import { ReactAdapterElement, RenderHooks } from 'Frontend/generated/flow/ReactAdapter'; -import { JSXElementConstructor, ReactElement, useRef } from "react"; +import { JSXElementConstructor, ReactElement, useRef, useEffect } from "react"; import React from 'react'; import { type Crop, ReactCrop, PixelCrop, makeAspectCrop, centerCrop } from "react-image-crop"; @@ -41,30 +41,82 @@ class ImageCropElement extends ReactAdapterElement { const [maxWidth] = hooks.useState("maxWidth"); const [maxHeight] = hooks.useState("maxHeight"); const [ruleOfThirds] = hooks.useState("ruleOfThirds", false); + + // Track previous image dimensions to adjust crop proportionally when resizing + const prevImgSize = useRef<{ width: number; height: number } | null>(null); + /** + * Handles intial calculations on image load. + */ const onImageLoad = () => { - if (imgRef.current && crop) { + if (imgRef.current) { const { width, height } = imgRef.current; - const newcrop = centerCrop( - makeAspectCrop( - { - unit: crop.unit, - width: crop.width, - height: crop.height, - x: crop.x, - y: crop.y - }, - aspect, + prevImgSize.current = { width, height }; + if (crop) { + const newcrop = centerCrop( + makeAspectCrop( + { + unit: crop.unit, + width: crop.width, + height: crop.height, + x: crop.x, + y: crop.y + }, + aspect, + width, + height + ), width, height - ), - width, - height - ) - setCrop(newcrop); + ) + setCrop(newcrop); + } } }; + /** + * Adjusts the crop size proportionally when the image is resized. + */ + const resizeCrop = (newWidth: number, newHeight: number) => { + if (!crop || !prevImgSize.current) return; + const { width: oldWidth, height: oldHeight } = prevImgSize.current; + + const scaleX = newWidth / oldWidth; + const scaleY = newHeight / oldHeight; + + const resizedCrop: Crop = { + unit: crop.unit, + width: crop.width * scaleX, + height: crop.height * scaleY, + x: crop.x * scaleX, + y: crop.y * scaleY, + }; + + setCrop(resizedCrop); + prevImgSize.current = { width: newWidth, height: newHeight }; + }; + + /** + * Observes image resizing and updates crop size dynamically. + */ + useEffect(() => { + if (!imgRef.current) return; + + const resizeObserver = new ResizeObserver(() => { + if (imgRef.current && prevImgSize.current) { + const { width, height } = imgRef.current; + if (width != prevImgSize.current.width && + height != prevImgSize.current.height) { + resizeCrop(width, height); + } + } + }); + + resizeObserver.observe(imgRef.current); + + return () => resizeObserver.disconnect(); + }, [crop]); + const onChange = (c: Crop) => { setCrop(c); }; From cec972cd5d8de25a75e1b90e14074c9af17688bf Mon Sep 17 00:00:00 2001 From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com> Date: Tue, 1 Apr 2025 14:39:59 -0300 Subject: [PATCH 3/6] fix: update cropped image when crop is set from server side Close #19 --- .../vaadin/addons/imagecrop/ImageCrop.java | 3 +- .../resources/frontend/src/image-crop.tsx | 124 +++++++++--------- 2 files changed, 62 insertions(+), 65 deletions(-) diff --git a/src/main/java/com/flowingcode/vaadin/addons/imagecrop/ImageCrop.java b/src/main/java/com/flowingcode/vaadin/addons/imagecrop/ImageCrop.java index 8ec08a4..3d3e9a8 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/imagecrop/ImageCrop.java +++ b/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. @@ -139,6 +139,7 @@ public String getImageAlt() { */ public void setCrop(Crop crop) { setState("crop", crop); + getElement().executeJs("this._updateCroppedImage(this.crop)"); } /** diff --git a/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx b/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx index ef17c32..2f49170 100644 --- a/src/main/resources/META-INF/resources/frontend/src/image-crop.tsx +++ b/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 ( Date: Mon, 14 Apr 2025 16:31:07 -0300 Subject: [PATCH 4/6] ci: remove distributionManagement --- pom.xml | 7 ------- 1 file changed, 7 deletions(-) diff --git a/pom.xml b/pom.xml index 4c252fd..8f3109b 100644 --- a/pom.xml +++ b/pom.xml @@ -43,13 +43,6 @@ master - - - ossrh - https://s01.oss.sonatype.org/service/local/staging/deploy/maven2/ - - - flowingcode From 1c575c0478c0ef39d047caf47596f222eaf7af81 Mon Sep 17 00:00:00 2001 From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com> Date: Mon, 14 Apr 2025 16:30:25 -0300 Subject: [PATCH 5/6] ci: add central-publishing-maven-plugin --- pom.xml | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/pom.xml b/pom.xml index 8f3109b..1e71f7a 100644 --- a/pom.xml +++ b/pom.xml @@ -166,6 +166,7 @@ 3.0.1 @{project.version} + release @@ -492,7 +493,21 @@ - + + + release + + + + org.sonatype.central + central-publishing-maven-plugin + 0.7.0 + true + + + + + From 8d4a2cc0dd4a82aa092a5380c9251da40bcd4f59 Mon Sep 17 00:00:00 2001 From: Flowing CI Date: Wed, 16 Apr 2025 18:43:04 +0000 Subject: [PATCH 6/6] [maven-release-plugin] prepare release 1.1.2 --- pom.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pom.xml b/pom.xml index 1e71f7a..c7b772f 100644 --- a/pom.xml +++ b/pom.xml @@ -4,7 +4,7 @@ com.flowingcode.vaadin.addons image-crop-addon - 1.1.2-SNAPSHOT + 1.1.2 Image Crop Add-on Image Crop Add-on for Vaadin Flow https://www.flowingcode.com/en/open-source/ @@ -40,7 +40,7 @@ https://github.com/FlowingCode/ImageCrop scm:git:git://github.com/FlowingCode/ImageCrop.git scm:git:ssh://git@github.com:/FlowingCode/ImageCrop.git - master + 1.1.2