react-filerobot-image-editor/lib/components/Topbar/CanvasZooming.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useState}from"react";import{MinusOutline,PlusOutline}from"@scaleflex/icons";import Menu from"@scaleflex/ui/core/menu";import MenuItem,{MenuItemLabel}from"@scaleflex/ui/core/menu-item";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{StyledSmallButton,StyledZoomPercentageLabel,StyledZoomingWrapper}from"./Topbar.styled";import{ZOOM_FACTORS_PRESETS}from"./Topbar.constants";var MULTIPLY_ZOOM_FACTOR=1.1,CanvasZooming=function(a){var b=a.showBackButton,c=useStore(),d=c.dispatch,e=c.zoom,f=void 0===e?{}:e,g=c.toolId,h=c.feedback,i=c.t,j=c.shownImageDimensions,k=c.resize,l=c.originalImage,m=c.adjustments.crop,n=c.config.useZoomPresetsMenu,o=0===h.duration,p=useState(null),q=_slicedToArray(p,2),r=q[0],s=q[1],t=function(a,b){d({type:ZOOM_CANVAS,payload:{factor:a,isAbsoluteZoom:b}})},u=function(){var a=k.width&&k.height&&k||m.width&&m.height&&m||j,b=getZoomFitFactor(m.width&&m.height&&m||j,a);t(b||DEFAULT_ZOOM_FACTOR,!0)},v=function(a){s(r?null:a.target)},w=function(a){if("fit"===a)return u(),void v();var b=k.width||k.height?a:Math.min(a*l.width/j.width,a*l.height/j.height);t(b,!0),v()},x=g===TOOLS_IDS.CROP||o,y=!l||k.width||k.height?f.factor:Math.min(j.width*f.factor/l.width,j.height*f.factor/l.height);return React.createElement(StyledZoomingWrapper,null,React.createElement(StyledSmallButton,{onClick:function zoomOut(){t(f.factor/MULTIPLY_ZOOM_FACTOR)},color:"basic",title:i("zoomOutTitle"),disabled:x,showBackButton:b,className:"FIE_topbar-zoom-out-btn"},React.createElement(MinusOutline,null)),React.createElement(StyledZoomPercentageLabel,{title:i("toggleZoomMenuTitle"),onClick:x?void 0:n&&v||u,"aria-disabled":x,className:"FIE_topbar-zoom-label"},"".concat(toPrecisedFloat(100*y,0),"%")),React.createElement(StyledSmallButton,{onClick:function zoomIn(){t(f.factor*MULTIPLY_ZOOM_FACTOR)},color:"basic",title:i("zoomInTitle"),disabled:x,showBackButton:b,className:"FIE_topbar-zoom-in-btn"},React.createElement(PlusOutline,null)),React.createElement(Menu,{anchorEl:r,onClose:v,open:!!r,position:"bottom",className:"FIE_topbar-zoom-menu"},ZOOM_FACTORS_PRESETS.map(function(a){var b=a.factor,c=a.labelKey,d=a.label;return React.createElement(MenuItem,{key:d||c,onClick:function onClick(){return w(b)}},React.createElement(MenuItemLabel,null,null!==d&&void 0!==d?d:i(c)))})))};CanvasZooming.defaultProps={showBackButton:!1};export default CanvasZooming;