Improve: The behavior of color picker, by splitting the saved fill/st…

…roke/shadow colors (Issue #285)

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;

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>
   );
 };

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>
   );
 };

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,

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,
 };

packages/react-filerobot-image-editor/src/context/getInitialAppState.js

@@ -66,7 +66,7 @@ const getInitialAppState = (config = {}) => {
     futureDesignStates: [],
     isResetted: true,
     haveNotSavedChanges: false,
-    latestColor: undefined,
+    latestColors: {},
   };
 };