react-filerobot-image-editor/lib/components/Layers/BaseLayer/index.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"];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,{useCallback,useEffect,useMemo,useRef}from"react";import{Layer}from"react-konva";import getDimensionsMinimalRatio from"../../../utils/getDimensionsMinimalRatio";import cropImage from"../../../utils/cropImage";import{BASE_LAYER_ID,IMAGE_NODE_ID,TOOLS_IDS}from"../../../utils/constants";import{useStore}from"../../../hooks";import getSizeAfterRotation from"../../../utils/getSizeAfterRotation";import getCenterRotatedPoint from"../../../utils/getCenterRotatedPoint";import getOriginalSourceInitialScale from"../../../utils/getOriginalSourceInitialScale";import LayersBackground from"../LayersBackground";var BaseLayer=function(a){var b,c,d,e,f=a.children,g=_objectWithoutProperties(a,_excluded),h=useRef(),i=useRef(),j=useStore(),k=j.initialCanvasWidth,l=j.initialCanvasHeight,m=j.canvasWidth,n=j.canvasHeight,o=j.toolId,p=j.canvasScale,q=j.originalSource,r=void 0===q?{}:q,s=j.shownImageDimensions,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=o===TOOLS_IDS.CROP,B=useMemo(function(){return getSizeAfterRotation(r.width,r.height,w)},[r,w]),C=useMemo(function(){return getOriginalSourceInitialScale({initialCanvasWidth:k,initialCanvasHeight:l,originalSource:r})},[r,k,l]),D=useMemo(function(){return{width:r.width*C,height:r.height*C}},[r,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*p)-D.width*E/2,H=n/(2*p)-D.height*F/2,I=m/(2*p)-D.width/2,J=n/(2*p)-D.height/2,K=useCallback(function(){null!==i&&void 0!==i&&i.current?i.current.cache():setTimeout(K,0)},[]),L=getSizeAfterRotation(s.width,s.height,w),M=A?1:getDimensionsMinimalRatio(s.width,s.height,L.width,L.height);if(useEffect(function(){return r&&K(),function(){var a;null===i||void 0===i||null===(a=i.current)||void 0===a||a.clearCache()}},[r]),!G&&0!==G||!H&&0!==H||!s)return null;var N=getCenterRotatedPoint(y.x,y.y,w),O=G+(!A&&y.width?(s.width/2-y.x-y.width/2+N.x)*E:0),P=H+(!A&&y.height?(s.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:BASE_LAYER_ID,ref:h,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=h.current)&&void 0!==b&&null!==(b=b.attrs)&&void 0!==b&&b.isSaving),d=c||y.noEffect?_objectSpread(_objectSpread({},s),{},{x:0,y:0}):{width:y.width||s.width,height:y.height||s.height,x:y.x||0,y:y.y||0};cropImage(a,_objectSpread({ratio:y.ratio},d),c),h.current&&h.current.setAttrs({clipX:d.x,clipY:d.y,clipWidth:d.width,clipHeight:d.height,originalSourceInitialScale:C})},"data-testid":"FIE-base-layer"},g),React.createElement(LayersBackground,{width:D.width,height:D.height,imageNodeRef:i,originalSourceId:IMAGE_NODE_ID}),f)};export default BaseLayer;