diff --git a/packages/react-filerobot-image-editor/src/actions/index.js b/packages/react-filerobot-image-editor/src/actions/index.js index 8bd1f7bf..13ae7a18 100644 --- a/packages/react-filerobot-image-editor/src/actions/index.js +++ b/packages/react-filerobot-image-editor/src/actions/index.js @@ -36,7 +36,7 @@ import enableTextContentEdit, { import setResize, { SET_RESIZE } from './setResize'; import setSaved, { SET_SAVED } from './setSaved'; import updateState, { UPDATE_STATE } from './updateState'; -import setLatestColor, { SET_LATEST_COLOR } from './setLatestColor'; +import setLatestColor, { SET_LATEST_COLOR, SET_LATEST_TEXT_COLOR, setLatestTextColor } from './setLatestColor'; import setShowTabsMenu, { SET_SHOWN_TABS_MENU } from './setShowTabsMenu'; export default { @@ -55,6 +55,7 @@ export default { [SET_SHOWN_IMAGE_DIMENSIONS]: setShownImageDimensions, [ENABLE_TEXT_CONTENT_EDIT]: enableTextContentEdit, [SET_LATEST_COLOR]: setLatestColor, + [SET_LATEST_TEXT_COLOR]: setLatestTextColor, [SET_SHOWN_TABS_MENU]: setShowTabsMenu, // Start of Design actions... [ADD_FILTER]: addFilter, @@ -90,6 +91,7 @@ export { SET_SHOWN_IMAGE_DIMENSIONS, ENABLE_TEXT_CONTENT_EDIT, SET_LATEST_COLOR, + SET_LATEST_TEXT_COLOR, SET_SHOWN_TABS_MENU, // Start of Design actions... ADD_FILTER, diff --git a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js index 667f7fe5..b50365a5 100644 --- a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js +++ b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js @@ -1,4 +1,5 @@ export const SET_LATEST_COLOR = 'SET_LATEST_COLOR'; +export const SET_LATEST_TEXT_COLOR = 'SET_LATEST_TEXT_COLOR'; const setLatestColor = (state, payload) => ({ ...state, @@ -8,4 +9,12 @@ const setLatestColor = (state, payload) => ({ }, }); +export const setLatestTextColor = (state, payload) => ({ + ...state, + latestTextColors: { + ...state.latestTextColors, + ...payload.latestTextColors, + }, +}) + export default setLatestColor; 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 10da950d..72cfbdd0 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 @@ -117,6 +117,7 @@ const AnnotationOptions = ({ > {!hideFillOption && ( { +const ColorInput = ({ onChange, color, colorFor, type }) => { const { selectionsIds = [], config: { annotationsCommon = {} }, dispatch, latestColors = {}, + latestTextColors = {}, } = useStore(); - const latestColor = latestColors[colorFor]; + let latestColor = latestColors[colorFor]; + let latestTextColor = latestTextColors[colorFor] const [anchorEl, setAnchorEl] = useState(); const [currentColor, setCurrentColor] = useState( () => latestColor || color || annotationsCommon.fill, ); + const [currentTextColor, setCurrentTextColor] = useState( + () => latestTextColor || color || annotationsCommon.fill, + ); const [pinnedColors, setPinnedColors] = useState( window?.localStorage ? JSON.parse(localStorage.getItem(pinnedColorsKey) || '[]') @@ -47,19 +52,38 @@ const ColorInput = ({ onChange, color, colorFor }) => { }; const changeColor = (_newColorHex, rgba, newPinnedColors) => { - setCurrentColor(rgba); + + if (type === 'Text') { + setCurrentTextColor(rgba); + } else { + setCurrentColor(rgba); + } + onChange(rgba); changePinnedColors(newPinnedColors); - if (latestColor !== rgba) { - dispatch({ - type: SET_LATEST_COLOR, - payload: { - latestColors: { - [colorFor]: rgba, + if (type === 'Text') { + if (latestTextColor !== rgba) { + dispatch({ + type: SET_LATEST_TEXT_COLOR, + payload: { + latestTextColors: { + [colorFor]: rgba, + }, + }, + }); + } + } else { + if (latestColor !== rgba) { + dispatch({ + type: SET_LATEST_COLOR, + payload: { + latestColors: { + [colorFor]: rgba, + }, }, - }, - }); + }); + } } }; @@ -68,9 +92,15 @@ const ColorInput = ({ onChange, color, colorFor }) => { }; useEffect(() => { - const colorToSet = (selectionsIds.length === 0 && latestColor) || color; - setCurrentColor(colorToSet); - onChange(colorToSet); + if (type === 'Text') { + const colorToSet = (selectionsIds.length === 0 && latestTextColor) || color; + setCurrentTextColor(colorToSet); + onChange(colorToSet); + } else { + const colorToSet = (selectionsIds.length === 0 && latestColor) || color; + setCurrentColor(colorToSet); + onChange(colorToSet); + } }, [color, selectionsIds]); return ( @@ -78,13 +108,13 @@ const ColorInput = ({ onChange, color, colorFor }) => { { isResetted: !hasLoadableDesignState ?? true, haveNotSavedChanges: false, latestColors: {}, + latestTextColors: {}, showTabsMenu: false, }; };