From 7f6492fdb1be193ff02da95c29e1e81eb2fb5d14 Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Wed, 2 Nov 2022 14:58:35 +0200 Subject: [PATCH 01/12] Consider ratio in image filters preview by center cropping the image --- .../components/tools/Filters/FilterItem.jsx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx b/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx index 54d8c4d8..da422c6f 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx @@ -10,8 +10,8 @@ import { FilterItemLabel, } from './Filters.styled'; -const FILTER_PREVIEW_WIDTH = 60; -const FILTER_PREVIEW_HEIGHT = 45; +const MAX_FILTER_PREVIEW_WIDTH = 60; +const MAX_FILTER_PREVIEW_HEIGHT = 45; const FilterItem = ({ filterLabel, @@ -43,6 +43,15 @@ const FilterItem = ({ }; }, [image]); + const imgRatio = image.width / image.height; + const isVerticalImg = imgRatio < 1; + const filterImgPreviewWidth = isVerticalImg + ? MAX_FILTER_PREVIEW_WIDTH + : MAX_FILTER_PREVIEW_HEIGHT * imgRatio; + const filterImgPreviewHeight = isVerticalImg + ? MAX_FILTER_PREVIEW_WIDTH / imgRatio + : MAX_FILTER_PREVIEW_HEIGHT; + return ( From cdfd80c00def4ffc988358c9a12cc36427e55e64 Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Wed, 2 Nov 2022 17:22:31 +0200 Subject: [PATCH 02/12] Fix: Move crossOrigin = 'Anonymous' before .src for avoiding sometimes CORS issue --- packages/react-filerobot-image-editor/src/utils/loadImage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-filerobot-image-editor/src/utils/loadImage.js b/packages/react-filerobot-image-editor/src/utils/loadImage.js index b4c0cac7..e8cd80c6 100644 --- a/packages/react-filerobot-image-editor/src/utils/loadImage.js +++ b/packages/react-filerobot-image-editor/src/utils/loadImage.js @@ -3,8 +3,8 @@ import extractNameFromUrl from './extractNameFromUrl'; const loadImage = (imageSrc, imageFileName) => new Promise((resolve, reject) => { const imageElement = new Image(); - imageElement.src = imageSrc; imageElement.crossOrigin = 'Anonymous'; + imageElement.src = imageSrc; imageElement.name = imageFileName ?? extractNameFromUrl(imageSrc); imageElement.onload = () => { resolve(imageElement); From 4d5256a2868a6c0eaa371e06bf298834c9140224 Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Mon, 14 Nov 2022 14:53:21 +0200 Subject: [PATCH 03/12] Fix: some filters/finetunes names are changed on saving the image in prod. code --- .../react-filerobot-image-editor/src/custom/filters/Aden.js | 2 ++ .../src/custom/filters/Amaro.js | 2 ++ .../src/custom/filters/Ashby.js | 2 ++ .../src/custom/filters/BlackAndWhite.js | 2 ++ .../src/custom/filters/Brannan.js | 2 ++ .../src/custom/filters/Brooklyn.js | 2 ++ .../src/custom/filters/Charmes.js | 2 ++ .../src/custom/filters/Clarendon.js | 2 ++ .../src/custom/filters/Crema.js | 2 ++ .../src/custom/filters/Dogpatch.js | 2 ++ .../src/custom/filters/Earlybird.js | 2 ++ .../src/custom/filters/Gingham.js | 2 ++ .../src/custom/filters/Ginza.js | 2 ++ .../react-filerobot-image-editor/src/custom/filters/Hefe.js | 2 ++ .../src/custom/filters/Helena.js | 2 ++ .../src/custom/filters/Hudson.js | 2 ++ .../react-filerobot-image-editor/src/custom/filters/Juno.js | 2 ++ .../src/custom/filters/Kelvin.js | 2 ++ .../react-filerobot-image-editor/src/custom/filters/Lark.js | 2 ++ .../react-filerobot-image-editor/src/custom/filters/LoFi.js | 2 ++ .../src/custom/filters/Ludwig.js | 2 ++ .../src/custom/filters/Maven.js | 2 ++ .../src/custom/filters/Mayfair.js | 2 ++ .../react-filerobot-image-editor/src/custom/filters/Moon.js | 2 ++ .../src/custom/filters/Nashville.js | 2 ++ .../src/custom/filters/NinteenSeventySeven.js | 2 ++ .../src/custom/filters/Perpetua.js | 2 ++ .../src/custom/filters/Reyes.js | 2 ++ .../react-filerobot-image-editor/src/custom/filters/Rise.js | 2 ++ .../src/custom/filters/Sierra.js | 2 ++ .../src/custom/filters/Skyline.js | 2 ++ .../src/custom/filters/Slumber.js | 2 ++ .../src/custom/filters/Stinson.js | 2 ++ .../src/custom/filters/Sutro.js | 2 ++ .../src/custom/filters/Toaster.js | 2 ++ .../src/custom/filters/Valencia.js | 2 ++ .../src/custom/filters/Vesper.js | 2 ++ .../src/custom/filters/Walden.js | 2 ++ .../src/custom/filters/Willow.js | 2 ++ .../src/custom/filters/XPro2.js | 2 ++ .../src/custom/finetunes/CustomThreshold.js | 2 ++ .../src/custom/finetunes/Warmth.js | 2 ++ .../src/hooks/useTransformedImgData.js | 6 ++++-- .../src/utils/operationsToCloudimageUrl.js | 3 ++- 44 files changed, 90 insertions(+), 3 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Aden.js b/packages/react-filerobot-image-editor/src/custom/filters/Aden.js index da43e910..cd27e8b8 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Aden.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Aden.js @@ -27,4 +27,6 @@ function Aden(imageData) { } } +Aden.filterName = 'Aden'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Aden; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js b/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js index 2fb6cd91..104fef3f 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js @@ -28,4 +28,6 @@ function Amaro(imageData) { } } +Amaro.filterName = 'Amaro'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Amaro; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js b/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js index 036161fe..2b177f14 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js @@ -28,4 +28,6 @@ function Ashby(imageData) { } } +Ashby.filterName = 'Ashby'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Ashby; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js b/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js index 53b2d9a7..d2ec812d 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js @@ -21,4 +21,6 @@ function BlackAndWhite(imageData) { } } +BlackAndWhite.filterName = 'BlackAndWhite'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default BlackAndWhite; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js b/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js index 9bde68f1..27b5d103 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js @@ -28,4 +28,6 @@ function Brannan(imageData) { } } +Brannan.filterName = 'Brannan'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Brannan; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js b/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js index dcdd3c31..9295e80a 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js @@ -28,4 +28,6 @@ function Brooklyn(imageData) { } } +Brooklyn.filterName = 'Brooklyn'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Brooklyn; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js b/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js index 45231a26..54945a31 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js @@ -28,4 +28,6 @@ function Charmes(imageData) { } } +Charmes.filterName = 'Charmes'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Charmes; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js b/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js index 473c2ce3..1df5ed5b 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js @@ -34,4 +34,6 @@ function Clarendon(imageData) { } } +Clarendon.filterName = 'Clarendon'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Clarendon; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Crema.js b/packages/react-filerobot-image-editor/src/custom/filters/Crema.js index 27cfb0c2..cb852ff4 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Crema.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Crema.js @@ -27,4 +27,6 @@ function Crema(imageData) { } } +Crema.filterName = 'Crema'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Crema; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js b/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js index a8ae30d4..e12d0994 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js @@ -28,4 +28,6 @@ function Dogpatch(imageData) { } } +Dogpatch.filterName = 'Dogpatch'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Dogpatch; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js b/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js index bc0f4b59..08131e84 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js @@ -22,4 +22,6 @@ function Earlybird(imageData) { } } +Earlybird.filterName = 'Earlybird'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Earlybird; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js b/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js index 5252ede6..3f196075 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js @@ -28,4 +28,6 @@ function Gingham(imageData) { } } +Gingham.filterName = 'Gingham'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Gingham; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js b/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js index cc5c0e5e..0da2494f 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js @@ -28,4 +28,6 @@ function Ginza(imageData) { } } +Ginza.filterName = 'Ginza'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Ginza; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js b/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js index bc470b7b..e8f8308d 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js @@ -28,4 +28,6 @@ function Hefe(imageData) { } } +Hefe.filterName = 'Hefe'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Hefe; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Helena.js b/packages/react-filerobot-image-editor/src/custom/filters/Helena.js index c28ebbea..ab372576 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Helena.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Helena.js @@ -28,4 +28,6 @@ function Helena(imageData) { } } +Helena.filterName = 'Helena'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Helena; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js b/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js index 38599027..22dd26ef 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js @@ -34,4 +34,6 @@ function Hudson(imageData) { } } +Hudson.filterName = 'Hudson'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Hudson; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Juno.js b/packages/react-filerobot-image-editor/src/custom/filters/Juno.js index ef700e16..45fe97c4 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Juno.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Juno.js @@ -27,4 +27,6 @@ function Juno(imageData) { } } +Juno.filterName = 'Juno'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Juno; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js b/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js index b250e042..e300eb15 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js @@ -34,4 +34,6 @@ function Kelvin(imageData) { } } +Kelvin.filterName = 'Kelvin'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Kelvin; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Lark.js b/packages/react-filerobot-image-editor/src/custom/filters/Lark.js index 616275c1..fc9ea2bf 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Lark.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Lark.js @@ -34,4 +34,6 @@ function Lark(imageData) { } } +Lark.filterName = 'Lark'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Lark; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js b/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js index 0c92cbcb..107bc2db 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js @@ -28,4 +28,6 @@ function LoFi(imageData) { } } +LoFi.filterName = 'LoFi'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default LoFi; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js b/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js index cd7fe17b..22f6e6f3 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js @@ -28,4 +28,6 @@ function Ludwig(imageData) { } } +Ludwig.filterName = 'Ludwig'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Ludwig; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Maven.js b/packages/react-filerobot-image-editor/src/custom/filters/Maven.js index 855f0bc0..04089cb4 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Maven.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Maven.js @@ -34,4 +34,6 @@ function Maven(imageData) { } } +Maven.filterName = 'Maven'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Maven; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js b/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js index 1a39af40..05072c13 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js @@ -27,4 +27,6 @@ function Mayfair(imageData) { } } +Mayfair.filterName = 'Mayfair'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Mayfair; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Moon.js b/packages/react-filerobot-image-editor/src/custom/filters/Moon.js index be6b4fea..d0e0ef43 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Moon.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Moon.js @@ -27,4 +27,6 @@ function Moon(imageData) { } } +Moon.filterName = 'Moon'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Moon; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js b/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js index 051d4c1b..dce2ebc9 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js @@ -28,4 +28,6 @@ function Nashville(imageData) { } } +Nashville.filterName = 'Nashville'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Nashville; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js b/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js index 2c50f031..86330e39 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js @@ -28,4 +28,6 @@ function NinteenSeventySeven(imageData) { } } +NinteenSeventySeven.filterName = 'NinteenSeventySeven'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default NinteenSeventySeven; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js b/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js index 938194c3..20fdcce2 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js @@ -22,4 +22,6 @@ function Perpetua(imageData) { } } +Perpetua.filterName = 'Perpetua'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Perpetua; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js b/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js index 9cc6dcfd..18369f9f 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js @@ -34,4 +34,6 @@ function Reyes(imageData) { } } +Reyes.filterName = 'Reyes'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Reyes; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Rise.js b/packages/react-filerobot-image-editor/src/custom/filters/Rise.js index 27434321..07775a78 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Rise.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Rise.js @@ -34,4 +34,6 @@ function Rise(imageData) { } } +Rise.filterName = 'Rise'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Rise; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js b/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js index 4e0f2d95..365f3482 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js @@ -28,4 +28,6 @@ function Sierra(imageData) { } } +Sierra.filterName = 'Sierra'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Sierra; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js b/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js index b618f3c0..d9c4cf4b 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js @@ -28,4 +28,6 @@ function Skyline(imageData) { } } +Skyline.filterName = 'Skyline'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Skyline; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js b/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js index 50cc75d8..7ae8a2c4 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js @@ -28,4 +28,6 @@ function Slumber(imageData) { } } +Slumber.filterName = 'Slumber'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Slumber; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js b/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js index 87914981..ba2aedc3 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js @@ -28,4 +28,6 @@ function Stinson(imageData) { } } +Stinson.filterName = 'Stinson'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Stinson; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js b/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js index ef8ea43f..812d4b20 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js @@ -28,4 +28,6 @@ function Sutro(imageData) { } } +Sutro.filterName = 'Sutro'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Sutro; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js b/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js index bd3057b3..d44afff5 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js @@ -28,4 +28,6 @@ function Toaster(imageData) { } } +Toaster.filterName = 'Toaster'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Toaster; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js b/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js index 7569b964..5dd4f59a 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js @@ -34,4 +34,6 @@ function Valencia(imageData) { } } +Valencia.filterName = 'Valencia'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Valencia; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js b/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js index d42d3ac7..3f78efb3 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js @@ -34,4 +34,6 @@ function Vesper(imageData) { } } +Vesper.filterName = 'Vesper'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Vesper; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Walden.js b/packages/react-filerobot-image-editor/src/custom/filters/Walden.js index 4e894f06..2491b238 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Walden.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Walden.js @@ -28,4 +28,6 @@ function Walden(imageData) { } } +Walden.filterName = 'Walden'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Walden; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Willow.js b/packages/react-filerobot-image-editor/src/custom/filters/Willow.js index 942d2fd3..9306bb93 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/Willow.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/Willow.js @@ -34,4 +34,6 @@ function Willow(imageData) { } } +Willow.filterName = 'Willow'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Willow; diff --git a/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js b/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js index 89ca5666..d6e9f011 100644 --- a/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js +++ b/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js @@ -34,4 +34,6 @@ function XPro2(imageData) { } } +XPro2.filterName = 'XPro2'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default XPro2; diff --git a/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js b/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js index 9bff2e32..a55e36be 100644 --- a/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js +++ b/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js @@ -27,6 +27,8 @@ function CustomThreshold(imageData) { } } +CustomThreshold.finetuneName = 'CustomThreshold'; // We assign the finetune name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default CustomThreshold; /** diff --git a/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js b/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js index 3c2a3381..097c96a9 100644 --- a/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js +++ b/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js @@ -27,6 +27,8 @@ function Warmth(imageData) { } } +Warmth.finetuneName = 'Warmth'; // We assign the finetune name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case. + export default Warmth; /** diff --git a/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js b/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js index 5519d7fd..9ca76796 100644 --- a/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js +++ b/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js @@ -185,10 +185,12 @@ const useTransformedImgData = () => { }, }; if (finalImgDesignState.filter) { - finalImgDesignState.filter = finalImgDesignState.filter.name; + finalImgDesignState.filter = + finalImgDesignState.filter.filterName || + finalImgDesignState.filter.name; } finalImgDesignState.finetunes = finalImgDesignState.finetunes.map( - (finetuneFn) => finetuneFn.name, + (finetuneFn) => finetuneFn.finetuneName || finetuneFn.name, ); Object.keys(finalImgDesignState.annotations).forEach((k) => { const annotation = finalImgDesignState.annotations[k]; diff --git a/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js b/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js index 5860fff5..470d9dee 100644 --- a/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js +++ b/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js @@ -112,7 +112,8 @@ const generateFinetuneQuery = (finetunes, finetunesProps = {}) => { const queryParams = []; finetunes.forEach((finetuneFn) => { const finetuneParamInfo = - finetuneFn.name && finetuneNameToParamInfo[finetuneFn.name]; + (finetuneFn.finetuneName || finetuneFn.name) && + finetuneNameToParamInfo[finetuneFn.finetuneName || finetuneFn.name]; if (finetuneParamInfo) { const finetuneCloudimageVal = toPrecisedFloat( mapNumber( From 0fbbf82374205a2f5e756e99967f34b90c9892ea Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Thu, 9 Feb 2023 14:00:41 +0200 Subject: [PATCH 04/12] Fix (Canvas): Issue of sometimes the canvas don't draw the image cause of the canvas dimensions are not set (Issue #251) --- .../src/components/MainCanvas/index.jsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx index c87ec1ed..2d2d16a6 100644 --- a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx +++ b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx @@ -1,5 +1,5 @@ /** External Dependencies */ -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; /** Internal Dependencies */ import { DesignLayer, TransformersLayer } from 'components/Layers'; @@ -13,6 +13,7 @@ import { CanvasContainer, StyledOrignalImage } from './MainCanvas.styled'; const MainCanvas = () => { const [observeResize] = useResizeObserver(); const providedAppContext = useStore(); + const canvasContainerRef = useRef(null); const setNewCanvasSize = useCallback( ({ width: containerWidth, height: containerHeight }) => { @@ -27,15 +28,12 @@ const MainCanvas = () => { [], ); - const observeCanvasContainerResizing = useCallback((element) => { - observeResize(element, setNewCanvasSize); + useEffect(() => { + observeResize(canvasContainerRef.current, setNewCanvasSize); }, []); return ( - + {!providedAppContext.textIdOfEditableContent && } {providedAppContext.isShowOriginalImage && ( Date: Thu, 9 Feb 2023 14:28:55 +0200 Subject: [PATCH 05/12] Fix (Canvas): 50x50 image is not working (Issue #220) --- .../src/components/Layers/DesignLayer/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx index 06a532ee..79599681 100644 --- a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx +++ b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx @@ -15,6 +15,7 @@ import AnnotationNodes from './AnnotationNodes'; import PreviewGroup from './PreviewGroup'; const CANVAS_TO_IMG_SPACING = getProperImageToCanvasSpacing(); +const MIN_SPACED_WIDTH = 10; // As sometimes the spaced width is less than that and it might be hard to view the image initially. const DesignLayer = () => { const designLayerRef = useRef(); @@ -43,7 +44,10 @@ const DesignLayer = () => { ); const spacedOriginalImg = useMemo(() => { - const spacedWidth = originalImage.width - CANVAS_TO_IMG_SPACING; + const spacedWidth = Math.max( + MIN_SPACED_WIDTH, + originalImage.width - CANVAS_TO_IMG_SPACING, + ); const imgRatio = originalImage.width / originalImage.height; return { From 2e6a0a9cd22fc3538e37c9300458ba3331b5be2d Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Thu, 9 Feb 2023 23:46:01 +0200 Subject: [PATCH 06/12] Chore: return `null` if no Annotation component found --- .../Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx index bc779114..f2d78e01 100644 --- a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx +++ b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx @@ -11,6 +11,7 @@ const MemoizedAnnotation = ({ selectionsIds, }) => { const AnnotationComponent = ANNOTATION_NAMES_TO_COMPONENT[annotation.name]; + if (!AnnotationComponent) return null; return ( Date: Fri, 10 Feb 2023 00:21:07 +0200 Subject: [PATCH 07/12] Fix: PEN as default TOOL don't work bug (Issue #288) --- .../src/components/tools/Pen/PenOptions.jsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx index f6caccdd..ee7bd8ba 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx @@ -43,7 +43,7 @@ const PenOptions = ({ t }) => { pos.offsetX - (designLayer.attrs.xPadding || 0), pos.offsetY - (designLayer.attrs.yPadding || 0), ]; - }, []); + }, [designLayer]); const handlePointerMove = useCallback(() => { if (!updatedPen.current.moved) { @@ -72,7 +72,7 @@ const PenOptions = ({ t }) => { }, }); } - }, []); + }, [getPointerPosition]); const handlePointerUp = useCallback(() => { if (updatedPen.current.id) { @@ -91,23 +91,26 @@ const PenOptions = ({ t }) => { document.removeEventListener('touchend', handlePointerUp, eventsOptions); document.removeEventListener('mouseleave', handlePointerUp, eventsOptions); document.removeEventListener('touchcancel', handlePointerUp, eventsOptions); - }, []); + }, [handlePointerMove]); - const handlePointerDown = useCallback((e) => { - if (e.target.attrs.draggable) { - return; - } - e.evt.preventDefault(); + const handlePointerDown = useCallback( + (e) => { + if (e.target.attrs.draggable) { + return; + } + e.evt.preventDefault(); - updatedPen.current = { points: getPointerPosition() }; + updatedPen.current = { points: getPointerPosition() }; - canvasRef.current.on('mousemove touchmove', handlePointerMove); - canvasRef.current.on('mouseleave touchcancel', handlePointerUp); - document.addEventListener('mouseup', handlePointerUp, eventsOptions); - document.addEventListener('touchend', handlePointerUp, eventsOptions); - document.addEventListener('mouseleave', handlePointerUp, eventsOptions); - document.addEventListener('touchcancel', handlePointerUp, eventsOptions); - }, []); + canvasRef.current.on('mousemove touchmove', handlePointerMove); + canvasRef.current.on('mouseleave touchcancel', handlePointerUp); + document.addEventListener('mouseup', handlePointerUp, eventsOptions); + document.addEventListener('touchend', handlePointerUp, eventsOptions); + document.addEventListener('mouseleave', handlePointerUp, eventsOptions); + document.addEventListener('touchcancel', handlePointerUp, eventsOptions); + }, + [getPointerPosition, handlePointerMove, handlePointerUp], + ); useEffect(() => { canvasRef.current = designLayer?.getStage(); @@ -120,7 +123,7 @@ const PenOptions = ({ t }) => { canvasRef.current.off('mousedown touchstart', handlePointerDown); } }; - }, []); + }, [designLayer]); return ( Date: Fri, 10 Feb 2023 00:40:27 +0200 Subject: [PATCH 08/12] Improve: The behavior of color picker, by splitting the saved fill/stroke/shadow colors (Issue #285) --- .../src/actions/setLatestColor.js | 14 +++++++------- .../common/AnnotationOptions/ShadowFields.jsx | 6 +++++- .../common/AnnotationOptions/StrokeFields.jsx | 6 +++++- .../components/common/AnnotationOptions/index.jsx | 10 +++++++--- .../src/components/common/ColorInput/index.jsx | 11 ++++++++--- .../src/context/getInitialAppState.js | 2 +- 6 files changed, 33 insertions(+), 16 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js index e242d130..667f7fe5 100644 --- a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js +++ b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js @@ -1,11 +1,11 @@ export const SET_LATEST_COLOR = 'SET_LATEST_COLOR'; -const setLatestColor = (state, payload) => - state.latestColor === payload.latestColor - ? state - : { - ...state, - latestColor: payload.latestColor, - }; +const setLatestColor = (state, payload) => ({ + ...state, + latestColors: { + ...state.latestColors, + ...payload.latestColors, + }, +}); export default setLatestColor; diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx index f9bbf579..5d110bdb 100644 --- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx @@ -84,7 +84,11 @@ const ShadowFields = ({ annotation, updateAnnotation, t }) => { /> - + ); }; diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx index 1f6af340..b25ff3ab 100644 --- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx @@ -37,7 +37,11 @@ const StrokeFields = ({ annotation, updateAnnotation, t }) => { onChange={changeStrokeWidth} value={strokeWidth} /> - + ); }; diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx index 231240dc..8f061101 100644 --- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx @@ -97,7 +97,11 @@ const AnnotationOptions = ({ className={`FIE_annotations-options${className ? ` ${className}` : ''}`} > {!hideFillOption && ( - + )} {children} {options.map( @@ -149,8 +153,8 @@ AnnotationOptions.propTypes = { updateAnnotation: PropTypes.func.isRequired, children: PropTypes.node, hideFillOption: PropTypes.bool, - morePoppableOptionsPrepended: PropTypes.arrayOf(PropTypes.object), - morePoppableOptionsAppended: PropTypes.arrayOf(PropTypes.object), + morePoppableOptionsPrepended: PropTypes.arrayOf(PropTypes.instanceOf(Object)), + morePoppableOptionsAppended: PropTypes.arrayOf(PropTypes.instanceOf(Object)), moreOptionsPopupComponentsObj: PropTypes.instanceOf(Object), hidePositionField: PropTypes.bool, className: PropTypes.string, diff --git a/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx b/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx index e59ce3aa..3e0d6e6c 100644 --- a/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx @@ -10,13 +10,15 @@ import { StyledColorPicker, StyledPickerTrigger } from './ColorInput.styled'; const pinnedColorsKey = 'FIE_pinnedColors'; -const ColorInput = ({ position = 'top', onChange, color }) => { +// colorFor is used to save the latest color for a specific purpose (e.g. fill/shadow/stroke) +const ColorInput = ({ position = 'top', onChange, color, colorFor }) => { const { selectionsIds = [], config: { annotationsCommon = {} }, dispatch, - latestColor, + latestColors = {}, } = useStore(); + const latestColor = latestColors[colorFor]; const [anchorEl, setAnchorEl] = useState(); const [currentColor, setCurrentColor] = useState( () => latestColor || color || annotationsCommon.fill, @@ -53,7 +55,9 @@ const ColorInput = ({ position = 'top', onChange, color }) => { dispatch({ type: SET_LATEST_COLOR, payload: { - latestColor: rgba, + latestColors: { + [colorFor]: rgba, + }, }, }); } @@ -104,6 +108,7 @@ ColorInput.defaultProps = { ColorInput.propTypes = { onChange: PropTypes.func.isRequired, + colorFor: PropTypes.string.isRequired, position: PropTypes.string, color: PropTypes.string, }; diff --git a/packages/react-filerobot-image-editor/src/context/getInitialAppState.js b/packages/react-filerobot-image-editor/src/context/getInitialAppState.js index a5cb6ab8..74f3324d 100644 --- a/packages/react-filerobot-image-editor/src/context/getInitialAppState.js +++ b/packages/react-filerobot-image-editor/src/context/getInitialAppState.js @@ -66,7 +66,7 @@ const getInitialAppState = (config = {}) => { futureDesignStates: [], isResetted: true, haveNotSavedChanges: false, - latestColor: undefined, + latestColors: {}, }; }; From 2f25a9cc00c4121f322bf8a84837f82fd6e374ee Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Fri, 10 Feb 2023 00:52:26 +0200 Subject: [PATCH 09/12] Improve: `theme` prop in README.md --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 9e7dc1b4..a4c93061 100644 --- a/README.md +++ b/README.md @@ -367,6 +367,28 @@ Theme from [@scaleflex/ui](https://github.com/scaleflex/ui/blob/1617f8b19ade7199 fontFamily: 'Roboto, Arial', }, } + +// Used properties in case you need to provide your custom colors/theme, you should customize those properties (all or any of them) with your color hex/name string values. +{ + palette: { + 'bg-secondary': '....', + 'bg-primary': : '....', + 'bg-primary-active': : '....', + 'accent-primary': : '....', + 'accent-primary-active': : '....', + 'icons-primary': : '....', + 'icons-secondary': : '....', + 'borders-secondary': : '....', + 'borders-primary': : '....', + 'borders-strong': : '....', + 'light-shadow': : '....', + 'warning': : '....', + + }, + typography: { + fontFamily: : '....', // Font family string value, you should import this font in your app. + }, +} ``` Almost you would need those 2 objects ([**palette**](https://github.com/scaleflex/ui/blob/master/packages/ui/src/utils/types/palette/color.ts#L1) _values are the possible keys for palette object_ & [**typograpghy**](https://github.com/scaleflex/ui/blob/master/packages/ui/src/theme/entity/default-theme.ts#L52)) to have the proper theme you want. From 9d4622d838b617c1b23837b9cfad2e3f3213cd11 Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Fri, 10 Feb 2023 00:53:19 +0200 Subject: [PATCH 10/12] Improve: `theme` prop in README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a4c93061..ace1dea0 100644 --- a/README.md +++ b/README.md @@ -359,6 +359,7 @@ The image url or an `HTMLImageElement` for the image which the operations/edits Theme from [@scaleflex/ui](https://github.com/scaleflex/ui/blob/1617f8b19ade7199110df6e2ceff77dacefd75bd/packages/ui/src/theme/entity/default-theme.ts#L43) deep merged with following overrides ``` +// Overrides { palette: { 'bg-primary-active': '#ECF3FF', From 781283dee018ba99e6ea1f4bc5ae2acf38e1b2d3 Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Fri, 10 Feb 2023 01:02:44 +0200 Subject: [PATCH 11/12] Improve: Update TS types for `defaultSavedImageType` --- packages/react-filerobot-image-editor/src/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-filerobot-image-editor/src/index.d.ts b/packages/react-filerobot-image-editor/src/index.d.ts index 0ddf7438..280a47a9 100644 --- a/packages/react-filerobot-image-editor/src/index.d.ts +++ b/packages/react-filerobot-image-editor/src/index.d.ts @@ -282,7 +282,7 @@ export interface FilerobotImageEditorConfig { onClose?: (closeReason: closingReasons, haveNotSavedChanges: boolean) => void; closeAfterSave?: boolean; defaultSavedImageName?: string; - defaultSavedImageType?: 'png' | 'jpeg' | 'webp'; + defaultSavedImageType?: 'png' | 'jpeg' | 'jpg' | 'webp'; forceToPngInEllipticalCrop?: boolean; useBackendTranslations?: boolean; translations?: object; From e57225c8123e022fd8953fb6b074ee75c8963c65 Mon Sep 17 00:00:00 2001 From: Ahmed Mostafa Date: Fri, 10 Feb 2023 17:06:40 +0200 Subject: [PATCH 12/12] Improve: Update @scaleflex/ui, @scaleflex/icons, konva & react-konva --- .../react-filerobot-image-editor/package.json | 10 +-- .../src/components/Topbar/SaveButton.jsx | 2 +- yarn.lock | 87 +++++++++++-------- 3 files changed, 58 insertions(+), 41 deletions(-) diff --git a/packages/react-filerobot-image-editor/package.json b/packages/react-filerobot-image-editor/package.json index 3fabed66..8213092a 100644 --- a/packages/react-filerobot-image-editor/package.json +++ b/packages/react-filerobot-image-editor/package.json @@ -29,11 +29,11 @@ ], "dependencies": { "@babel/runtime": "^7.17.2", - "@scaleflex/icons": "1.0.0-beta.80", - "@scaleflex/ui": "1.0.0-beta.80", - "konva": "8.3.2", + "@scaleflex/icons": "1.0.0-beta.99", + "@scaleflex/ui": "1.0.0-beta.99", + "konva": "8.4.2", "prop-types": "15.7.2", - "react-konva": "18.1.1" + "react-konva": "18.2.4" }, "peerDependencies": { "react": "18.2.0", @@ -43,4 +43,4 @@ "scripts": { "build:lib": "rimraf lib && cross-env BABEL_ENV=production NODE_ENV=production babel src -d lib --config-file ../../babel.config.json -D" } -} +} \ No newline at end of file diff --git a/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx b/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx index efb06791..bd3f4625 100644 --- a/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx +++ b/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx @@ -267,7 +267,7 @@ const SaveButton = () => { onChange={changeFileName} size="sm" placeholder={t('name')} - error={Boolean(imageFileInfo.name)} + error={!imageFileInfo.name} focusOnMount />