react-filerobot-image-editor/lib/hooks/useTransformedImgData.js

React component version of filerobot image editor (FIE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["filter"];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 Konva from"konva";import{HIDE_LOADER,SET_SAVED}from"../actions";import{ELLIPSE_CROP,IMAGE_NODE_ID,SUPPORTED_IMAGE_TYPES,TOOLS_IDS}from"../utils/constants";import extractCurrentDesignState from"../utils/extractCurrentDesignState";import mapCropBox from"../utils/mapCropBox";import getSizeAfterRotation from"../utils/getSizeAfterRotation";import imageToBase64 from"../utils/imageToBase64";import getFileFullName from"../utils/getFileFullName";import operationsToCloudimageUrl from"../utils/operationsToCloudimageUrl";import useStore from"./useStore";var useTransformedImgData=function(){var a=useStore(),b=a.dispatch,c=a.designLayer,d=a.shownImageDimensions,e=a.originalSource,f=a.resize,g=void 0===f?{}:f,h=a.adjustments,i=void 0===h?{}:h,j=i.crop,k=void 0===j?{}:j,l=i.rotation,m=void 0===l?0:l,n=a.config,o=n.savingPixelRatio,p=n.previewPixelRatio,q=n.forceToPngInEllipticalCrop,r=n.defaultSavedImageType,s=n.useCloudimage,t=n.cloudimage,u=n[TOOLS_IDS.CROP];return s?function(){var b,c,f=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},g=extractCurrentDesignState(a),h=g.filter,i=_objectWithoutProperties(g,_excluded),j=operationsToCloudimageUrl(t,i,d,e,u),l=mapCropBox({x:k.x,y:k.y,width:k.width,height:k.height},d,e),m={cloudimageUrl:j,width:(null===f||void 0===f||null===(b=f.size)||void 0===b?void 0:b.width)||l.width,height:(null===f||void 0===f||null===(c=f.size)||void 0===c?void 0:c.height)||l.height};return{imageData:m,designState:i}}:function(){var f=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},h=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],i=!!(2<arguments.length&&void 0!==arguments[2])&&arguments[2],j=_objectSpread({size:g},f);Konva.pixelRatio=h||o;var l=c.attrs,n=l.clipWidth,s=l.clipHeight,t=l.clipX,u=l.clipY;c.setAttr("isSaving",!0);var v=c.getStage().clone({width:e.width,height:e.height,scaleX:1,scaleY:1}),w=_slicedToArray(v.children,2),x=w[0],y=w[1];v.children[2].destroy();var z=v.findOne("#".concat(IMAGE_NODE_ID));null===z||void 0===z||z.cache();var A={x:v.width()/d.width,y:v.height()/d.height},B={rotation:0,offsetX:0,offsetY:0,x:0,y:0,scaleX:A.x,scaleY:A.y};x.setAttrs(B),y.setAttrs(B);var C=_objectSpread(_objectSpread({},(!j.name||!j.extension)&&getFileFullName(e.name,q&&k.ratio===ELLIPSE_CROP?"png":SUPPORTED_IMAGE_TYPES.includes(null===r||void 0===r?void 0:r.toLowerCase())&&r)),j),D=C.name,E=C.extension,F=C.quality,G=void 0===F?92:F,H=C.size,I=void 0===H?{}:H,J=["jpeg","jpg","webp"].includes(E),K=mapCropBox(k.noEffect?{x:0,y:0}:{x:k.x||t,y:k.y||u,width:k.width||n,height:k.height||s},d,v.attrs),L=getSizeAfterRotation(K.width,K.height,m);if(v.setAttrs({offsetX:K.width/2+K.x,offsetY:K.height/2+K.y,width:L.width,height:L.height,x:L.width/2,y:L.height/2,rotation:m}),I.width){var M=I.width/v.width();v.setAttrs({scaleX:M,width:I.width,x:v.x()*Math.abs(M)})}if(I.height){var N=I.height/v.height();v.setAttrs({scaleY:N,height:I.height,y:v.y()*Math.abs(N)})}var O=_objectSpread({mimeType:"image/".concat("jpg"===E?"jpeg":E)},J?{quality:G}:{}),P=v.toCanvas(O),Q=v.toDataURL(O),R=_objectSpread(_objectSpread({},extractCurrentDesignState(a)),{},{shownImageDimensions:{width:a.shownImageDimensions.width,height:a.shownImageDimensions.height,scaledBy:a.shownImageDimensions.scaledBy}});R.filter&&(R.filter=R.filter.filterName||R.filter.name),R.finetunes=R.finetunes.map(function(a){return a.finetuneName||a.name}),Object.keys(R.annotations).forEach(function(a){var b,c=R.annotations[a],d=c.name===TOOLS_IDS.IMAGE&&(null===(b=c.image)||void 0===b?void 0:b.src);d&&d.startsWith("blob:")?R.annotations[a].image=imageToBase64(c.image):c.image instanceof HTMLImageElement&&(R.annotations[a].image=d)});var S=_objectSpread({fullName:"".concat(D,".").concat(E),name:D,extension:E,mimeType:"image/".concat(E),imageCanvas:P,imageBase64:Q,width:I.width||K.width,height:I.height||K.height},J?{quality:G}:{});c.setAttr("isSaving",!1),b({type:SET_SAVED}),null===z||void 0===z||z.clearCache(),v.destroy(),Konva.pixelRatio=p;var T=function(){b({type:HIDE_LOADER})};return i||T(),{imageData:S,designState:R,hideLoadingSpinner:T}}};export default useTransformedImgData;