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

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";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,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 LayersBackground from"../LayersBackground";var noEffectTextDimensions={width:200,height:100},CropTransformer=function(a){var b=useStore(),c=b.dispatch,d=b.theme,e=b.designLayer,f=b.originalSource,g=b.shownImageDimensions,h=b.adjustments,i=void 0===h?{}:h,j=i.crop,k=void 0===j?{}:j,l=i.isFlippedX,m=i.isFlippedY,n=b.resize,o=void 0===n?{}:n,p=b.config,q=b.t,r=useRef(),s=useRef(),t=useRef(),u=useRef(),v=p[TOOLS_IDS.CROP],w=useMemo(function(){var a;return _objectSpread(_objectSpread({},v),{},{lockCropAreaAt:null!==(a=k.lockCropAreaAt)&&void 0!==a?a:null===v||void 0===v?void 0:v.lockCropAreaAt})},[k.lockCropAreaAt,v]),z=w.lockCropAreaAt,A=k.ratio||w.ratio,B=A===CUSTOM_CROP,C=A===ELLIPSE_CROP,D=function a(){return A===ORIGINAL_CROP?f.width/f.height:A},E=function d(a,b){var e=a.width,f=a.height,g=a.x,h=a.y,i={x:g,y:h,width:e,height:f},j=k.width>=o.width&&k.height>=o.height;o.width&&o.height&&(e<o.width||f<o.height)&&j&&c({type:SET_FEEDBACK,payload:{feedback:{message:q("cropSizeLowerThanResizedWarning"),status:FEEDBACK_STATUSES.WARNING}}}),c({type:SET_CROP,payload:_objectSpread(_objectSpread(_objectSpread({},k),i),{},{dismissHistory:b})})},F=function c(a,b){var d,e,f=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{noScale:!0};s.current&&r.current&&s.current.nodes([r.current]);var g=u.current,h={width:a,height:b,x:null!==(d=k.x)&&void 0!==d?d:0,y:null!==(e=k.y)&&void 0!==e?e:0};E(boundResizing(h,h,_objectSpread(_objectSpread({},g),{},{abstractX:0,abstractY:0}),!(B||C)&&D(),_objectSpread(_objectSpread({},w),f)),!0)};if(useEffect(function(){return e&&s.current&&r.current&&(t.current&&t.current.cache(),s.current.nodes([r.current])),function(){t.current&&t.current.clearCache()}},[e,f,g]),useEffect(function(){if(g&&(u.current=g,"undefined"!=typeof g.x&&g.width)){var a,b;F(null!==(a=k.width)&&void 0!==a?a:g.width,null!==(b=k.height)&&void 0!==b?b:g.height)}},[A,g,w]),!e)return null;var G,H=(z||k.noEffect)&&[]||(B||C?void 0:["top-left","bottom-left","top-right","bottom-right"]),I=function b(a){var c=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1];a.target&&E({width:a.target.width()*a.target.scaleX(),height:a.target.height()*a.target.scaleY(),x:a.target.x(),y:a.target.y()},c)};if(!k.width&&!k.height){var J=1>g.scaledBy?g.scaledBy:1,K=_objectSpread(_objectSpread({},g),{},{width:g.width/J,height:g.height/J});G=boundResizing(K,_objectSpread(_objectSpread({},K),{},{x:0,y:0}),_objectSpread(_objectSpread({},K),{},{abstractX:0,abstractY:0}),!(B||C)&&D(),w)}else G=k;var L=G,M=L.x,N=void 0===M?0:M,x=L.y,O=void 0===x?0:x,y=L.width,P=L.height,Q={x:N,y:O,ref:r,fill:"#FFFFFF",scaleX:1,scaleY:1,globalCompositeOperation:"destination-out",onDragEnd:z?void 0:I,onDragMove:z?void 0:function b(a){var c=a.target;c.setAttrs(boundDragging(c.attrs,u.current))},onTransformEnd:z?void 0:I,draggable:!z};return React.createElement(React.Fragment,null,React.createElement(LayersBackground,{width:g.width,height:g.height,imageNodeRef:t,bgX:l?g.width/2:0,bgY:m?g.height/2:0,customFilters:[Konva.Filters.Blur,Konva.Filters.Brighten],customFinetuneProps:{blurRadius:10,brightness:-.15}}),C?React.createElement(Ellipse,_extends({},Q,{radiusX:y/2,radiusY:P/2,offset:{x:-y/2,y:-P/2}})):React.createElement(Rect,_extends({},Q,{width:k.noEffect?0:y,height:k.noEffect?0:P})),k.noEffect&&React.createElement(TextNode,{name:"Text",id:"no-preview-text-node",text:q("cropItemNoEffect"),x:g.width/2-noEffectTextDimensions.width/2,y:g.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}),React.createElement(Transformer,_extends({centeredScaling:!1,flipEnabled:!1,rotateEnabled:!1,nodes:r.current?[r.current]:[],anchorSize:14,anchorCornerRadius:7,enabledAnchors:H,ignoreStroke:!1,anchorStroke:d.palette["accent-primary"],anchorFill:d.palette["access-primary"],anchorStrokeWidth:2,borderStroke:d.palette["accent-primary"],borderStrokeWidth:2,borderDash:[4],keepRatio:!B||!C,ref:s,boundBoxFunc:function c(a,b){return boundResizing(a,b,u.current,!(B||C)&&D(),w)}},a)))};export default CropTransformer;