From d8f1636df70bf7fa1d19ac147ea235e037463783 Mon Sep 17 00:00:00 2001
From: Ahmed Mostafa <ahmed.mostafa1198@gmail.com>
Date: Fri, 10 Feb 2023 00:40:27 +0200
Subject: [PATCH] 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 }) => {
           />
         </StyledColumn>
       </StyledTwoColumnsContainer>
-      <ColorInput color={shadowColor} onChange={changeShadowColor} />
+      <ColorInput
+        color={shadowColor}
+        onChange={changeShadowColor}
+        colorFor="shadow"
+      />
     </StyledSpacedOptionFields>
   );
 };
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}
       />
-      <ColorInput color={stroke} onChange={changeStrokeColor} />
+      <ColorInput
+        color={stroke}
+        onChange={changeStrokeColor}
+        colorFor="stroke"
+      />
     </StyledSpacedOptionFields>
   );
 };
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 && (
-        <ColorInput color={annotation.fill} onChange={changeAnnotationFill} />
+        <ColorInput
+          color={annotation.fill}
+          onChange={changeAnnotationFill}
+          colorFor="fill"
+        />
       )}
       {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: {},
   };
 };