@zergo0/react-filerobot-image-editor/lib/components/Layers/DesignLayer/index.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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{Image,Layer,Rect}from"react-konva";import getDimensionsMinimalRatio from"../../../utils/getDimensionsMinimalRatio";import cropImage from"../../../utils/cropImage";import{DESIGN_LAYER_ID,IMAGE_NODE_ID,TOOLS_IDS}from"../../../utils/constants";import{SET_SHOWN_IMAGE_DIMENSIONS}from"../../../actions";import getProperImageToCanvasSpacing from"../../../utils/getProperImageToCanvasSpacing";import{useStore}from"../../../hooks";import getSizeAfterRotation from"../../../utils/getSizeAfterRotation";import getCenterRotatedPoint from"../../../utils/getCenterRotatedPoint";import AnnotationNodes from"./AnnotationNodes";import PreviewGroup from"./PreviewGroup";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var CANVAS_TO_IMG_SPACING=getProperImageToCanvasSpacing(),MIN_SPACED_WIDTH=10,DesignLayer=function(){var a,b,c,d,e=useRef(),f=useStore(),g=f.initialCanvasWidth,h=f.initialCanvasHeight,i=f.canvasWidth,j=f.canvasHeight,k=f.dispatch,l=f.toolId,m=f.canvasScale,n=f.originalImage,o=void 0===n?{}:n,p=f.finetunes,q=void 0===p?[]:p,r=f.finetunesProps,s=void 0===r?{}:r,t=f.filter,u=void 0===t?null:t,v=f.adjustments,w=void 0===v?{}:v,x=w.rotation,y=void 0===x?0:x,z=w.crop,A=void 0===z?{}:z,B=w.isFlippedX,C=w.isFlippedY,D=f.resize,E=f.isSaving,F=f.config,G=void 0===F?{}:F,H=G.backgroundColor,I=G.backgroundImage,J=useRef(),K=useRef(),L=l===TOOLS_IDS.CROP,M=useMemo(function(){return u?[].concat(_toConsumableArray(q),[u]):q},[q,u]),N=useMemo(function(){var a=Math.max(MIN_SPACED_WIDTH,o.width-CANVAS_TO_IMG_SPACING),b=o.width/o.height;return{width:a,height:a/b}},[o]),O=useMemo(function(){return getSizeAfterRotation(o.width,o.height,y)},[o,y]),P=useMemo(function(){return getDimensionsMinimalRatio(g,h,o.width,o.height)},[o,g,h]),Q=useMemo(function(){return{width:N.width*P,height:N.height*P}},[N,P]),R=D.width&&!L?D.width/(null!==(a=null!==(b=A.width)&&void 0!==b?b:Q.width)&&void 0!==a?a:O.width):1,S=D.height&&!L?D.height/(null!==(c=null!==(d=A.height)&&void 0!==d?d:Q.height)&&void 0!==c?c:O.height):1,T=i/(2*m)-Q.width*R/2,U=j/(2*m)-Q.height*S/2,V=i/(2*m)-Q.width/2,W=j/(2*m)-Q.height/2,X=useMemo(function(){return{x:Math.round(T),y:Math.round(U),abstractX:Math.round(V),abstractY:Math.round(W),width:Q.width,height:Q.height,scaledBy:m}},[m,T,U,V,W,Q]),Y=useCallback(function(){J.current?J.current.cache():setTimeout(Y,0)},[]),Z=getSizeAfterRotation(X.width,X.height,y),$=L?1:getDimensionsMinimalRatio(X.width,X.height,Z.width,Z.height);if(useEffect(function(){return o&&Y(),function(){var a;null===(a=J.current)||void 0===a||a.clearCache()}},[o]),useEffect(function(){X&&k({type:SET_SHOWN_IMAGE_DIMENSIONS,payload:{shownImageDimensions:X,designLayer:e.current,previewGroup:K.current}})},[X]),!T||!U||!X)return null;var _=getCenterRotatedPoint(A.x,A.y,y),aa=T+(!L&&A.width?(X.width/2-A.x-A.width/2+_.x)*R:0),ba=U+(!L&&A.height?(X.height/2-A.y-A.height/2+_.y)*S:0),ca=L?V:aa,da=L?W:ba,ea=(L?1:R)*$,fa=(L?1:S)*$;return _jsxs(Layer,{id:DESIGN_LAYER_ID,ref:e,xPadding:ca,yPadding:da,offsetX:Q.width/2,offsetY:Q.height/2,x:Q.width*R/2+ca,y:Q.height*S/2+da,scaleX:ea,scaleY:fa,rotation:L?0:y,clipFunc:function clipFunc(a){var b,c=L&&!(null!==(b=e.current)&&void 0!==b&&null!==(b=b.attrs)&&void 0!==b&&b.isSaving),d=c||A.noEffect?_objectSpread(_objectSpread({},X),{},{x:0,y:0}):{width:A.width||X.width,height:A.height||X.height,x:A.x||0,y:A.y||0};cropImage(a,_objectSpread({ratio:A.ratio},d),c),e.current&&e.current.setAttrs({clipX:d.x,clipY:d.y,clipWidth:d.width,clipHeight:d.height})},children:[!E&&_jsx(Rect,{x:B?Q.width:0,y:C?Q.height:0,fill:H,fillPatternImage:I,fillPatternRepeat:"repeat",width:Q.width,height:Q.height,listening:!1,scaleX:B?-1:1,scaleY:C?-1:1}),_jsx(Image,_objectSpread({id:IMAGE_NODE_ID,image:o,width:Q.width,height:Q.height,offsetX:Q.width/2,offsetY:Q.height/2,x:Q.width/2,y:Q.height/2,listening:!1,filters:M,ref:J,scaleX:B?-1:1,scaleY:C?-1:1},s)),_jsx(AnnotationNodes,{}),_jsx(PreviewGroup,{ref:K})]})};export default DesignLayer;