react-filerobot-image-editor/lib/components/Layers/DesignLayer/DesignLayerWrapper.js

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","previewGroupRef"];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,useMemo,useRef}from"react";import{Group,Layer}from"react-konva";import getDimensionsMinimalRatio from"../../../utils/getDimensionsMinimalRatio";import cropImage from"../../../utils/cropImage";import{DESIGN_LAYER_ID,TOOLS_IDS}from"../../../utils/constants";import{SET_SHOWN_IMAGE_DIMENSIONS}from"../../../actions";import{useStore}from"../../../hooks";import getSizeAfterRotation from"../../../utils/getSizeAfterRotation";import getCenterRotatedPoint from"../../../utils/getCenterRotatedPoint";import getOriginalSourceInitialScale from"../../../utils/getOriginalSourceInitialScale";var DesignLayerWrapper=function(a){var b,c,d,e,f=a.children,g=a.previewGroupRef,h=_objectWithoutProperties(a,_excluded),i=useRef(),j=useStore(),k=j.initialCanvasWidth,l=j.initialCanvasHeight,m=j.canvasWidth,n=j.canvasHeight,o=j.dispatch,p=j.toolId,q=j.canvasScale,r=j.originalSource,s=void 0===r?{}:r,t=j.adjustments,u=void 0===t?{}:t,v=u.rotation,w=void 0===v?0:v,x=u.crop,y=void 0===x?{}:x,z=j.resize,A=p===TOOLS_IDS.CROP,B=useMemo(function(){return getSizeAfterRotation(s.width,s.height,w)},[s,w]),C=useMemo(function(){return getOriginalSourceInitialScale({initialCanvasWidth:k,initialCanvasHeight:l,originalSource:s})},[s,k,l]),D=useMemo(function(){return{width:s.width*C,height:s.height*C}},[s,C]),E=z.width&&!A?z.width/(null!==(b=null!==(c=y.width)&&void 0!==c?c:D.width)&&void 0!==b?b:B.width):1,F=z.height&&!A?z.height/(null!==(d=null!==(e=y.height)&&void 0!==e?e:D.height)&&void 0!==d?d:B.height):1,G=m/(2*q)-D.width*E/2,H=n/(2*q)-D.height*F/2,I=m/(2*q)-D.width/2,J=n/(2*q)-D.height/2,K=useMemo(function(){return{x:Math.round(G),y:Math.round(H),abstractX:Math.round(I),abstractY:Math.round(J),width:D.width,height:D.height,scaledBy:q,originalSourceInitialScale:C}},[q,G,H,I,J,D,C]),L=getSizeAfterRotation(K.width,K.height,w),M=A?1:getDimensionsMinimalRatio(K.width,K.height,L.width,L.height);if(useEffect(function(){K&&o({type:SET_SHOWN_IMAGE_DIMENSIONS,payload:{shownImageDimensions:K,designLayer:i.current,previewGroup:g.current}})},[K]),!G&&0!==G||!H&&0!==H||!K)return null;var N=getCenterRotatedPoint(y.x,y.y,w),O=G+(!A&&y.width?(K.width/2-y.x-y.width/2+N.x)*E:0),P=H+(!A&&y.height?(K.height/2-y.y-y.height/2+N.y)*F:0),Q=A?I:O,R=A?J:P,S=(A?1:E)*M,T=(A?1:F)*M;return React.createElement(Layer,_extends({id:DESIGN_LAYER_ID,ref:i,xPadding:Q,yPadding:R,offsetX:D.width/2,offsetY:D.height/2,x:D.width*E/2+Q,y:D.height*F/2+R,scaleX:S,scaleY:T,rotation:A?0:w,clipFunc:function(a){var b,c=A&&!(null!==(b=i.current)&&void 0!==b&&null!==(b=b.attrs)&&void 0!==b&&b.isSaving),d=c||y.noEffect?_objectSpread(_objectSpread({},K),{},{x:0,y:0}):{width:y.width||K.width,height:y.height||K.height,x:y.x||0,y:y.y||0};cropImage(a,_objectSpread({ratio:y.ratio},d),c),i.current&&i.current.setAttrs({clipX:d.x,clipY:d.y,clipWidth:d.width,clipHeight:d.height,originalSourceInitialScale:C})},"data-testid":"FIE-design-layer"},h),f&&React.createElement(Group,{xPadding:Q,yPadding:R,scaleX:C,scaleY:C},f))};export default DesignLayerWrapper;