diff --git a/CHANGELOG.md b/CHANGELOG.md index 051b523e..23b682e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,7 +40,7 @@ Changed Added - `tabsToolsIds` ==FORM==> TABS_TOOLS -- to be added -- - `tools` ==FORM==> TOOLS_ITEMS -- to be added -- the tool id should be the tool's name and used in the tab also.(to be checked) -- `keepAnnotationEventsEnabled`, `textContentRegex` -- to be added -- +- `keepAnnotationEventsEnabled`, `textContentRegex`, `showFitCenterZoomButton` -- to be added -- - - `annotationComponents`, `moreAnnotationPreviewClasses`, -keepZoomOnSourceChange- -- to be added -- - Justify option for horizontal text alignment. - Support creating a design (noHistoryRecord -- if true, won't be considered in the history state for this change --, background color, width & height) instead of editing image only. diff --git a/packages/react-filerobot-image-editor/src/components/buttons/ZoomButtons/index.jsx b/packages/react-filerobot-image-editor/src/components/buttons/ZoomButtons/index.jsx index 29ca6876..b5ba83c0 100644 --- a/packages/react-filerobot-image-editor/src/components/buttons/ZoomButtons/index.jsx +++ b/packages/react-filerobot-image-editor/src/components/buttons/ZoomButtons/index.jsx @@ -1,15 +1,13 @@ /** External Dependencies */ -import React, { useState } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; import { MinusOutline, PlusOutline, PositionCenter } from '@scaleflex/icons'; import Menu from '@scaleflex/ui/core/menu'; import MenuItem, { MenuItemLabel } from '@scaleflex/ui/core/menu-item'; /** Internal Dependencies */ -import { ZOOM_CANVAS } from 'actions'; -import { DEFAULT_ZOOM_FACTOR, TOOLS_IDS } from 'utils/constants'; import { useStore } from 'hooks'; -import getZoomFitFactor from 'utils/getZoomFitFactor'; -import toPrecisedFloat from 'utils/toPrecisedFloat'; +import useZoom from 'hooks/useZoom'; import { StyledSmallButton, StyledZoomPercentageLabel, @@ -17,87 +15,27 @@ import { } from './ZoomButtons.styled'; import { ZOOM_FACTORS_PRESETS } from './ZoomButtons.constants'; -const MULTIPLY_ZOOM_FACTOR = 1.1; - -const ZoomButtons = (props) => { +const ZoomButtons = ({ showFitCenterButton = true, ...props }) => { const { - dispatch, - zoom = {}, - toolId, - feedback, t, - shownImageDimensions, - resize, - originalSource, - adjustments: { crop }, - config: { useZoomPresetsMenu, showBackButton }, + config: { + useZoomPresetsMenu, + showBackButton, + showFitCenterZoomButton = true, + }, } = useStore(); - const isBlockerError = feedback.duration === 0; - const [zoomingMenuAnchorEl, setZoomingMenuAnchorEl] = useState(null); - - const saveZoom = (zoomFactor, isAbsoluteZoom, zoomCustomLabel) => { - dispatch({ - type: ZOOM_CANVAS, - payload: { - factor: zoomFactor, - isAbsoluteZoom, - customLabel: zoomCustomLabel, - }, - }); - }; - - const zoomIn = () => { - saveZoom(zoom.factor * MULTIPLY_ZOOM_FACTOR); - }; - - const fitCanvas = () => { - const usedAsOrgDimens = - (resize.width && resize.height && resize) || - (crop.width && crop.height && crop) || - shownImageDimensions; - const fitCanvasFactor = getZoomFitFactor( - (crop.width && crop.height && crop) || shownImageDimensions, - usedAsOrgDimens, - ); - saveZoom(fitCanvasFactor || DEFAULT_ZOOM_FACTOR, true); - }; - - const zoomOut = () => { - saveZoom(zoom.factor / MULTIPLY_ZOOM_FACTOR); - }; - - const toggleZoomingMenu = (event) => { - setZoomingMenuAnchorEl(zoomingMenuAnchorEl || !event ? null : event.target); - }; - - const applyZoomFactorPreset = (factor, zoomCustomLabel) => { - if (factor === 'fit') { - fitCanvas(); - toggleZoomingMenu(); - return; - } - - const factorToAchieveSelected = - resize.width || resize.height - ? factor - : factor / shownImageDimensions.originalSourceInitialScale; - saveZoom(factorToAchieveSelected, true, zoomCustomLabel); - toggleZoomingMenu(); - }; - - const getPreviewedZoomLevelLabel = () => { - if (zoom.customLabel) { - return zoom.customLabel; - } - - const previewToRealImgFactor = - originalSource && !resize.width && !resize.height - ? shownImageDimensions.originalSourceInitialScale * zoom.factor - : zoom.factor; - return `${toPrecisedFloat(previewToRealImgFactor * 100, 0) || '100'}%`; - }; + const { + zoomOut, + zoomIn, + applyZoomFactorPreset, + getPreviewedZoomLevelLabel, + isZoomDisabled, + toggleZoomingMenu, + fitCanvas, + zoomingMenuAnchorEl, + } = useZoom(); - const isZoomDisabled = toolId === TOOLS_IDS.CROP || isBlockerError; + const showFitButton = showFitCenterZoomButton && showFitCenterButton; return ( @@ -135,15 +73,17 @@ const ZoomButtons = (props) => { > - applyZoomFactorPreset('fit')} - color="basic" - title={t('fitTitle')} - disabled={isZoomDisabled} - className="FIE_buttons-fit-btn" - > - - + {showFitButton && ( + applyZoomFactorPreset('fit')} + color="basic" + title={t('fitTitle')} + disabled={isZoomDisabled} + className="FIE_buttons-fit-btn" + > + + + )} { ); }; +ZoomButtons.propTypes = { + showFitCenterButton: PropTypes.bool, +}; + export default ZoomButtons; diff --git a/packages/react-filerobot-image-editor/src/context/defaultConfig.js b/packages/react-filerobot-image-editor/src/context/defaultConfig.js index 23275ab3..95cf90db 100644 --- a/packages/react-filerobot-image-editor/src/context/defaultConfig.js +++ b/packages/react-filerobot-image-editor/src/context/defaultConfig.js @@ -140,4 +140,5 @@ export default { previewBgColor: undefined, previewBgImage: undefined, keepZoomOnSourceChange: false, + showFitCenterZoomButton: true, }; diff --git a/packages/react-filerobot-image-editor/src/hooks/index.js b/packages/react-filerobot-image-editor/src/hooks/index.js index f4ed58ea..3962d098 100644 --- a/packages/react-filerobot-image-editor/src/hooks/index.js +++ b/packages/react-filerobot-image-editor/src/hooks/index.js @@ -55,3 +55,5 @@ export { default as useManageHistoryState } from './useManageHistoryState'; export { default as useAnnotationOrdering } from './useAnnotationOrdering'; export { default as useEditableTextId } from './useEditableTextId'; + +export { default as useZoom } from './useZoom'; diff --git a/packages/react-filerobot-image-editor/src/hooks/useZoom.js b/packages/react-filerobot-image-editor/src/hooks/useZoom.js new file mode 100644 index 00000000..c3b3a7b6 --- /dev/null +++ b/packages/react-filerobot-image-editor/src/hooks/useZoom.js @@ -0,0 +1,105 @@ +/** External Dependencies */ +import { useState } from 'react'; + +/** Internal Dependencies */ +import { ZOOM_CANVAS } from 'actions'; +import getZoomFitFactor from 'utils/getZoomFitFactor'; +import { DEFAULT_ZOOM_FACTOR, TOOLS_IDS } from 'utils/constants'; +import toPrecisedFloat from 'utils/toPrecisedFloat'; +import useStore from './useStore'; + +const MULTIPLY_ZOOM_FACTOR = 1.1; + +const useZoom = () => { + const { + dispatch, + zoom = {}, + toolId, + feedback, + shownImageDimensions, + resize, + originalSource, + adjustments: { crop }, + } = useStore(); + const isBlockerError = feedback.duration === 0; + const [zoomingMenuAnchorEl, setZoomingMenuAnchorEl] = useState(null); + + const saveZoom = (zoomFactor, isAbsoluteZoom, zoomCustomLabel) => { + dispatch({ + type: ZOOM_CANVAS, + payload: { + factor: zoomFactor, + isAbsoluteZoom, + customLabel: zoomCustomLabel, + }, + }); + }; + + const zoomIn = () => { + saveZoom(zoom.factor * MULTIPLY_ZOOM_FACTOR); + }; + + const fitCanvas = () => { + const usedAsOrgDimens = + (resize.width && resize.height && resize) || + (crop.width && crop.height && crop) || + shownImageDimensions; + const fitCanvasFactor = getZoomFitFactor( + (crop.width && crop.height && crop) || shownImageDimensions, + usedAsOrgDimens, + ); + saveZoom(fitCanvasFactor || DEFAULT_ZOOM_FACTOR, true); + }; + + const zoomOut = () => { + saveZoom(zoom.factor / MULTIPLY_ZOOM_FACTOR); + }; + + const toggleZoomingMenu = (event) => { + setZoomingMenuAnchorEl(zoomingMenuAnchorEl || !event ? null : event.target); + }; + + const applyZoomFactorPreset = (factor, zoomCustomLabel) => { + if (factor === 'fit') { + fitCanvas(); + toggleZoomingMenu(); + return; + } + + const factorToAchieveSelected = + resize.width || resize.height + ? factor + : factor / shownImageDimensions.originalSourceInitialScale; + saveZoom(factorToAchieveSelected, true, zoomCustomLabel); + toggleZoomingMenu(); + }; + + const getPreviewedZoomLevelLabel = () => { + if (zoom.customLabel) { + return zoom.customLabel; + } + + const previewToRealImgFactor = + originalSource && !resize.width && !resize.height + ? shownImageDimensions.originalSourceInitialScale * zoom.factor + : zoom.factor; + return `${toPrecisedFloat(previewToRealImgFactor * 100, 0) || '100'}%`; + }; + + const isZoomDisabled = toolId === TOOLS_IDS.CROP || isBlockerError; + + return { + applyZoomFactorPreset, + getPreviewedZoomLevelLabel, + isZoomDisabled, + fitCanvas, + zoomIn, + zoomOut, + saveZoom, + toggleZoomingMenu, + zoomingMenuAnchorEl, + setZoomingMenuAnchorEl, + }; +}; + +export default useZoom;