sp-image-editor
Version:
React component version of filerobot image editor (FIE).
1 lines • 6.49 kB
JavaScript
import _typeof from"@babel/runtime/helpers/typeof";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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,{memo,useCallback,useEffect,useState,useRef}from"react";import MainCanvas from"../MainCanvas";import{ROOT_CONTAINER_CLASS_NAME,TABS_IDS}from"../../utils/constants";import Topbar from"../Topbar";import Tabs from"../Tabs";import ToolsBar from"../ToolsBar";import{HIDE_LOADER,RESET,SET_FEEDBACK,SET_ORIGINAL_IMAGE,SET_SHOWN_TABS_MENU,SHOW_LOADER,UPDATE_STATE}from"../../actions";import FeedbackPopup from"../FeedbackPopup";import loadImage from"../../utils/loadImage";import{usePhoneScreen,useResizeObserver,useStore,useTransformedImgData}from"../../hooks";import Spinner from"../common/Spinner";import{getBackendTranslations}from"../../utils/translator";import cloudimageQueryToDesignState from"../../utils/cloudimageQueryToDesignState";import finetunesStrsToClasses from"../../utils/finetunesStrsToClasses";import filterStrToClass from"../../utils/filterStrToClass";import isSameImage from"../../utils/isSameImage";import useUpdateEffect from"../../hooks/useUpdateEffect";import TabsDrawer from"../TabsDrawer";import{StyledAppWrapper,StyledMainContent,StyledTabs,StyledCanvasAndTools}from"./App.styled";var App=function(){var a=useStore(),b=a.config,c=a.isLoadingGlobally,d=a.haveNotSavedChanges,e=a.dispatch,f=a.originalImage,g=a.shownImageDimensions,h=a.t,i=a.theme,j=a.feedback,k=void 0===j?{}:j,l=a.tabId,m=a.isSaving,n=b.loadableDesignState,o=b.useCloudimage,p=b.cloudimage,q=b.source,r=b.avoidChangesNotSavedAlertOnLeave,s=b.useBackendTranslations,t=b.translations,u=b.language,v=b.defaultSavedImageName,w=b.observePluginContainerSize,x=b.showCanvasOnly,y=b.getCurrentImgDataFnRef,z=b.updateStateFnRef,A=b.noCrossOrigin,B=b.resetOnImageSourceChange,C=b.Crop,D=b.customSpinner,E=window.matchMedia("(max-width: 760px)").matches,F=useResizeObserver(),G=_slicedToArray(F,2),H=G[0],I=G[1],J=useState({width:void 0,height:void 0}),K=_slicedToArray(J,2),L=K[0],M=K[1],N=usePhoneScreen(),O=useRef(null),P=useRef(!1),Q=useRef(null),R=useRef(d),S=useTransformedImgData(),T=useCallback(function(a){e({type:SET_ORIGINAL_IMAGE,payload:{originalImage:a}})},[]),U=useCallback(function(a){e({type:SET_FEEDBACK,payload:{feedback:{message:a.message||a,duration:0}}})},[]),V=function(a){return new Promise(function(b){var c=(null===a||void 0===a?void 0:a.src)||a;if(Q.current===c||!c&&f||isSameImage(c,f))return void(Q.current||b());var d=function(){Q.current=null,b()};Q.current=c,setTimeout(function(){if("string"==typeof a)loadImage(a,v,A).then(T)["catch"](U)["finally"](d);else if(a instanceof HTMLImageElement){if(!a.name&&v&&(a.name=v),!a.complete)return void a.addEventListener("load",function(){T(a),d()});T(a),d()}else U(h("invalidImageError")),d()},0)})},W=function(a){R.current&&(a.preventDefault(),a.returnValue="")},X=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:function(){return[]};return e({type:SHOW_LOADER}),Promise.all(a())["finally"](function(){e({type:HIDE_LOADER})})},Y=function(){n&&0<Object.keys(n).length&&e({type:UPDATE_STATE,payload:_objectSpread(_objectSpread({},n),{},{finetunes:finetunesStrsToClasses(null===n||void 0===n?void 0:n.finetunes),filter:filterStrToClass(null===n||void 0===n?void 0:n.filter)})})};useUpdateEffect(function(){q&&!isSameImage(q,f)&&(P.current=!1,X(function(){return[V(q)]})),B&&e({type:RESET,payload:{config:b}})},[q]),useUpdateEffect(function(){var a=null===n||void 0===n?void 0:n.imgSrc;a&&!isSameImage(a,f)?X(function(){return[V(a).then(Y)]}):Y()},[n]),useEffect(function(){0<Object.keys(g||{}).length&&!Object.keys(g).some(function(a){return!g[a]})&&f&&o&&null!==p&&void 0!==p&&p.loadableQuery&&!P.current&&(e({type:UPDATE_STATE,payload:cloudimageQueryToDesignState(p.loadableQuery,g,f)}),P.current=!0)},[g,f,o,p]),useEffect(function(){var a=!1;return w&&O.current?H(O.current.parentNode,function(a){var b=a.width,c=a.height;return M({width:b,height:c})}):L.width&&L.height&&!a&&M({width:void 0,height:void 0}),function(){w&&O.current&&I(O.current),a=!0}},[w]),useEffect(function(){return X(function(){return[V((null===n||void 0===n?void 0:n.imgSrc)||q)].concat(_toConsumableArray(s?[getBackendTranslations(u,t)]:[]))}),window&&!r&&window.addEventListener("beforeunload",W),function(){window&&!r&&window.removeEventListener("beforeunload",W)}},[]),useEffect(function(){z&&"object"===_typeof(z)&&(z.current=function(a){e({type:UPDATE_STATE,payload:a})})},[z,e]),useEffect(function(){y&&"object"===_typeof(y)&&(y.current=S)},[S]),useEffect(function(){R.current=d},[d]);var Z=function(a){e({type:SET_SHOWN_TABS_MENU,payload:{opened:a}})};return React.createElement(StyledAppWrapper,{className:ROOT_CONTAINER_CLASS_NAME,"data-phone":N,showTabsDrawer:E,ref:O,$size:L},(m||c)&&(D||React.createElement(Spinner,{theme:i})),function(){return React.createElement(React.Fragment,null,!x&&React.createElement(React.Fragment,null,E&&React.createElement(TabsDrawer,{toggleMainMenu:Z}),React.createElement(Topbar,{toggleMainMenu:Z})),f&&0!==k.duration&&React.createElement(StyledMainContent,{className:"FIE_main-container"},!x&&!E&&React.createElement(StyledTabs,{className:"FIE_tabs"},React.createElement(Tabs,{toggleMainMenu:Z})),React.createElement(StyledCanvasAndTools,{className:"FIE_editor-content",showTabsDrawer:E},(null===C||void 0===C?void 0:C.dynamicButtons)&&!x&&l===TABS_IDS.ADJUST&&React.createElement(ToolsBar,{isPhoneScreen:N,dynamicButtons:(null===C||void 0===C?void 0:C.dynamicButtons)||!1,upperToolbar:!0}),React.createElement(MainCanvas,null),!x&&React.createElement(ToolsBar,{isPhoneScreen:N,dynamicButtons:(null===C||void 0===C?void 0:C.dynamicButtons)||!1}))))}(),React.createElement(FeedbackPopup,null))};export default memo(App);