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