sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 5.38 kB
JavaScript
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,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";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 a(){return z===ORIGINAL_CROP?e.width/e.height:z},D=function d(a,c){var e=a.width,f=a.height,g=a.x,h=a.y,i={x:g,y:h,width:e,height:f},k=j.x===i.x&&j.y===i.y&&j.width===i.width&&j.height===i.height;if(!k){var l=j.width>=n.width&&j.height>=n.height;n.width&&n.height&&(e<n.width||f<n.height)&&l&&b({type:SET_FEEDBACK,payload:{feedback:{message:p("cropSizeLowerThanResizedWarning"),status:FEEDBACK_STATUSES.WARNING}}}),b({type:SET_CROP,payload:_objectSpread(_objectSpread(_objectSpread({},j),i),{},{dismissHistory:c})})}},E=function c(a,b){var d,e,f=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{noScale:!0};r.current&&q.current&&r.current.nodes([q.current]);var g=t.current,h={width:a,height:b,x:null!==(d=j.x)&&void 0!==d?d:0,y:null!==(e=j.y)&&void 0!==e?e:0};D(boundResizing(h,h,_objectSpread(_objectSpread({},g),{},{abstractX:0,abstractY:0}),!(A||B)&&C(),_objectSpread(_objectSpread({},v),f)),!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 b(a){var c=!!(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()},c)};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 b(a){var c=a.target;c.setAttrs(boundDragging(c.attrs,t.current))},onTransformEnd:w?void 0:H,draggable:!w};return React.createElement(React.Fragment,null,React.createElement(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?React.createElement(Ellipse,_extends({},P,{radiusX:y/2,radiusY:O/2,offset:{x:-y/2,y:-O/2}})):React.createElement(Rect,_extends({},P,{width:j.noEffect?0:y,height:j.noEffect?0:O})),j.noEffect&&React.createElement(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}),React.createElement(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 c(a,b){return boundResizing(a,b,t.current,!(A||B)&&C(),v)}}))};export default CropTransformer;