@zergo0/react-filerobot-image-editor/lib/components/Layers/TransformersLayer/CropTransformer.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useRef,useMemo}from"react";import{Ellipse,Image,Rect,Transformer}from"react-konva";import Konva from"konva";import{useStore}from"../../../hooks";import{SET_CROP,SET_FEEDBACK}from"../../../actions";import{CUSTOM_CROP,ELLIPSE_CROP,FEEDBACK_STATUSES,ORIGINAL_CROP,TOOLS_IDS}from"../../../utils/constants";import{boundDragging,boundResizing}from"./TransformersLayer.utils";import TextNode from"../DesignLayer/AnnotationNodes/TextNode";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";var noEffectTextDimensions={width:200,height:100},CropTransformer=function(){var a=useStore(),b=a.dispatch,c=a.theme,d=a.designLayer,e=a.originalImage,f=a.shownImageDimensions,g=a.adjustments,h=void 0===g?{}:g,i=h.crop,j=void 0===i?{}:i,k=h.isFlippedX,l=h.isFlippedY,m=a.resize,n=void 0===m?{}:m,o=a.config,p=a.t,q=useRef(),r=useRef(),s=useRef(),t=useRef(),u=o[TOOLS_IDS.CROP],v=useMemo(function(){var a;return _objectSpread(_objectSpread({},u),{},{lockCropAreaAt:null!==(a=j.lockCropAreaAt)&&void 0!==a?a:null===u||void 0===u?void 0:u.lockCropAreaAt})},[j.lockCropAreaAt,u]),w=v.lockCropAreaAt,z=j.ratio||v.ratio,A=z===CUSTOM_CROP,B=z===ELLIPSE_CROP,C=function getProperCropRatio(){return z===ORIGINAL_CROP?e.width/e.height:z},D=function saveCrop(a,c){var d=a.width,e=a.height,f=a.x,g=a.y,h={x:f,y:g,width:d,height:e},i=j.width>=n.width&&j.height>=n.height;n.width&&n.height&&(d<n.width||e<n.height)&&i&&b({type:SET_FEEDBACK,payload:{feedback:{message:p("cropSizeLowerThanResizedWarning"),status:FEEDBACK_STATUSES.WARNING}}}),b({type:SET_CROP,payload:_objectSpread(_objectSpread(_objectSpread({},j),h),{},{dismissHistory:c})})},E=function saveBoundedCropWithLatestConfig(a,b){var c,d,e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{noScale:!0};r.current&&q.current&&r.current.nodes([q.current]);var f=t.current,g={width:a,height:b,x:null!==(c=j.x)&&void 0!==c?c:0,y:null!==(d=j.y)&&void 0!==d?d:0};D(boundResizing(g,g,_objectSpread(_objectSpread({},f),{},{abstractX:0,abstractY:0}),!(A||B)&&C(),_objectSpread(_objectSpread({},v),e)),!0)};if(useEffect(function(){return d&&r.current&&q.current&&(s.current&&s.current.cache(),r.current.nodes([q.current])),function(){s.current&&s.current.clearCache()}},[d,e,f]),useEffect(function(){if(f&&(t.current=f,"undefined"!=typeof f.x&&f.width)){var a,b;E(null!==(a=j.width)&&void 0!==a?a:f.width,null!==(b=j.height)&&void 0!==b?b:f.height)}},[z,f,v]),!d)return null;var F,G=(w||j.noEffect)&&[]||(A||B?void 0:["top-left","bottom-left","top-right","bottom-right"]),H=function saveCropFromEvent(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1];a.target&&D({width:a.target.width()*a.target.scaleX(),height:a.target.height()*a.target.scaleY(),x:a.target.x(),y:a.target.y()},b)};if(!j.width&&!j.height){var I=1>f.scaledBy?f.scaledBy:1,J=_objectSpread(_objectSpread({},f),{},{width:f.width/I,height:f.height/I});F=boundResizing(J,_objectSpread(_objectSpread({},J),{},{x:0,y:0}),_objectSpread(_objectSpread({},J),{},{abstractX:0,abstractY:0}),!(A||B)&&C(),v)}else F=j;var K=F,L=K.x,M=void 0===L?0:L,x=K.y,N=void 0===x?0:x,y=K.width,O=K.height,P={x:M,y:N,ref:q,fill:"#FFFFFF",scaleX:1,scaleY:1,globalCompositeOperation:"destination-out",onDragEnd:w?void 0:H,onDragMove:w?void 0:function limitDragging(a){var b=a.target;b.setAttrs(boundDragging(b.attrs,t.current))},onTransformEnd:w?void 0:H,draggable:!w};return _jsxs(_Fragment,{children:[_jsx(Image,{image:e,x:k?f.width:0,y:l?f.height:0,width:f.width,height:f.height,filters:[Konva.Filters.Blur,Konva.Filters.Brighten],blurRadius:10,brightness:-.3,scaleX:k?-1:1,scaleY:l?-1:1,ref:s}),B?_jsx(Ellipse,_objectSpread(_objectSpread({},P),{},{radiusX:y/2,radiusY:O/2,offset:{x:-y/2,y:-O/2}})):_jsx(Rect,_objectSpread(_objectSpread({},P),{},{width:j.noEffect?0:y,height:j.noEffect?0:O})),j.noEffect&&_jsx(TextNode,{name:"Text",id:"no-preview-text-node",text:p("cropItemNoEffect"),x:f.width/2-noEffectTextDimensions.width/2,y:f.height/2-noEffectTextDimensions.height/2,fontSize:20,fill:"#ffffff",stroke:"#ff0000",strokeWidth:.2,shadowColor:"#ff0000",shadowBlur:10,annotationEvents:{},align:"center",width:noEffectTextDimensions.width,height:noEffectTextDimensions.height}),_jsx(Transformer,{centeredScaling:!1,flipEnabled:!1,rotateEnabled:!1,nodes:q.current?[q.current]:[],anchorSize:14,anchorCornerRadius:7,enabledAnchors:G,ignoreStroke:!1,anchorStroke:c.palette["accent-primary"],anchorFill:c.palette["access-primary"],anchorStrokeWidth:2,borderStroke:c.palette["accent-primary"],borderStrokeWidth:2,borderDash:[4],keepRatio:!A||!B,ref:r,boundBoxFunc:function boundBoxFunc(a,b){return boundResizing(a,b,t.current,!(A||B)&&C(),v)}})]})};export default CropTransformer;