react-filerobot-image-editor/lib/components/tools/ObjectRemoval/ObjectRemovalOptions.js

React component version of filerobot image editor (FIE).

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["onSubmitDraw"];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,useRef,useState,useMemo}from"react";import{createPortal}from"react-dom";import Konva from"konva";import{Shine}from"@scaleflex/icons";import{useDispatch,useDrawPreviewByPointer,useStore,useSetOriginalSource}from"../../../hooks";import{TOOLS_IDS}from"../../../utils/constants";import randomId from"../../../utils/randomId";import isFunction from"../../../utils/isFunction";import{HIDE_LOADER,SHOW_LOADER}from"../../../actions";import getElementOffsetPosition from"../../../utils/getElementOffsetPosition";import constructMaskImage from"../../../utils/constructMaskImage";import getFileFullName from"../../../utils/getFileFullName";import{StyledApplyButton,StyledBrushCursor,StyledRemoveObjectOptionsWrapper}from"./ObjectRemoval.styled";import ObjectRemovalBrushType from"./ObjectRemovalBrushType";import ObjectRemovalBrushMode from"./ObjectRemovalBrushMode";import ObjectRemovalBrushSize from"./ObjectRemovalBrushSize";var cursorTimeout=null,getObjectPathPoints=function(a){var b=a.attrs,c=a.position,d=a.strokeWidth;return{points:(b.points||[]).concat(c),strokeWidth:d||b.strokeWidth}},MASK_STROKE="rgba(104, 121, 235)",UNMASK_STROKE="#000000",DEFAULT_OPACITY=.7,getDrawInstance=function(a){var b=a.toolConfig,c=a.drawInstanceConfig,d=a.isHighlightMode,e=a.isSquareBrushType;return new Konva.Line(_objectSpread(_objectSpread(_objectSpread({},b),c),{},{lineJoin:e?"bevel":"round",lineCap:e?"square":"round",tension:e?0:b.tension||1,bezier:!e&&(b.bezier||!0),id:randomId(TOOLS_IDS.OBJECT_REMOVAL),name:TOOLS_IDS.OBJECT_REMOVAL,points:[],stroke:d?MASK_STROKE:UNMASK_STROKE,opacity:d?(null===b||void 0===b?void 0:b.opacity)||DEFAULT_OPACITY:1,globalCompositeOperation:d?"source-over":"destination-out",listening:!1}))},ObjectRemovalOptions=function(a){var b=a.t,c=a.renderCustomOptionsChildren,d=a.onSubmitDraw,e=a.minSize,f=void 0===e?1:e,g=a.maxSize,h=void 0===g?300:g,i=a.drawInstanceConfig,j=void 0===i?{}:i,k=useDispatch(),l=useStore(),m=l.designLayer,n=l.config,o=l.zoom,p=void 0===o?{}:o,q=p.factor,r=l.shownImageDimensions,s=void 0===r?{}:r,t=s.originalSourceInitialScale,u=l.originalSource,v=n||{},w=v.defaultSavedImageName,x=v[TOOLS_IDS.OBJECT_REMOVAL],y=void 0===x?{}:x,z=y.onSubmitDraw,A=_objectWithoutProperties(y,_excluded),B=useState(!0),C=_slicedToArray(B,2),D=C[0],E=C[1],F=useState([]),G=_slicedToArray(F,2),H=G[0],I=G[1],J=useState(A.strokeWidth||f),K=_slicedToArray(J,2),L=K[0],M=K[1],N=useState(!1),O=_slicedToArray(N,2),P=O[0],Q=O[1],R=0<H.length,S=useSetOriginalSource({resetOnSourceChange:!1,keepZoomOnSourceChange:!0}),T=useRef(null),U=useState({x:0,y:0,display:"none"}),V=_slicedToArray(U,2),W=V[0],X=V[1],Y=useMemo(function(){var a;return null===m||void 0===m||null===(a=m.getStage())||void 0===a?void 0:a.getContainer()},[m]),Z=d||z,$=function(){X(function(a){return _objectSpread(_objectSpread({},a),{},{display:"none"})})},_=useCallback(function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.x,c=a.y;clearTimeout(cursorTimeout);var d={display:"block"};b&&c&&![b,c].includes(0)&&(d.x=b,d.y=c),X(function(a){return _objectSpread(_objectSpread({},a),d)})},[]),aa=useCallback(function(a){var b=a.event;if(b.evt){var c=getElementOffsetPosition(b,Y),d=c.offsetX,e=c.offsetY,f=d-parseInt(T.current.style.width,10)/2,g=e-parseInt(T.current.style.height,10)/2;_({x:f,y:g})}},[_]),ba=useDrawPreviewByPointer({createNewDrawInstance:function(a){return getDrawInstance({toolConfig:A,drawInstanceConfig:_objectSpread(_objectSpread({},j),a),isHighlightMode:D,isSquareBrushType:P})},onPointerMove:aa,onPointerStart:function(a){return getObjectPathPoints(_objectSpread(_objectSpread({},a),{},{strokeWidth:L}))},onHoldPointerMove:getObjectPathPoints,onPointerReleased:function(a){var b=a.attrs;0<b.points.length&&I(function(a){return[].concat(_toConsumableArray(a),[b])})},onPointerLeaveCanvas:$,dontResetPreview:!0}),ca=ba.tmpDrawAttrs,da=ba.setIsDisabled,ea=ba.resetTmpDrawInstance,fa=function(a){var b=+a;if(0==b)return void M("");if(!(Number.isNaN(b)||b>h)){M(b);var c=Y.offsetWidth,d=Y.offsetHeight;_({x:c/2-b/2,y:d/2-b/2}),cursorTimeout=setTimeout(function(){$()},1e3)}},ga=function(){if(R){var a=isFunction(Z),c=new AbortController,d=getFileFullName(w||u.name),e=d.name;k({type:SHOW_LOADER,payload:{text:b("objectRemovalApplyingText"),cancelFn:a?function(){return c.abort("ui-cancelled")}:null,useCancelConfirmationModal:!0,confirmationTitle:b("objectRemovalCancelConfirmationTitle"),confirmationHint:"".concat(b("objectRemovalCancelConfirmationHint")," ").concat(e?"\u201C".concat(e,"\u201D"):b("theKeyword")," ").concat(b("objectRemovalCancelConfirmationHintCompletion"))}}),da(!0),$(),a?Promise.resolve(Z({attrs:_objectSpread({},ca),updateOriginalSourceFns:S,appStore:l,setIsDisabled:da,resetTmpDrawInstance:ea,objectPathsAttrs:H,originalSource:u,cancellationSignal:c.signal,cancelFn:function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:void 0;return c.abort(a)},getMaskedImage:function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:"toBlob";return constructMaskImage(u,H,a)}}))["finally"](function(){da(!1),k({type:HIDE_LOADER}),_(),ea(_objectSpread(_objectSpread({},H[H.length-1]),{},{points:[]})),I([])}):(da(!1),k({type:HIDE_LOADER}),_(),ea(_objectSpread(_objectSpread({},H[H.length-1]),{},{points:[]})),I([]))}};return React.createElement(React.Fragment,null,Y&&createPortal(React.createElement(StyledBrushCursor,{$size:L,$zoom:q*t,$display:W.display,$x:W.x,$y:W.y,$isSquareBrushType:P,$isHighlightMode:D,ref:T,"data-testid":"FIE-object-removal-tool-brush-cursor"}),Y),function(){return isFunction(c)?c(_objectSpread(_objectSpread({},ba),{},{changeBrushSize:fa})):React.createElement(StyledRemoveObjectOptionsWrapper,{"data-testid":"FIE-object-removal-brush-mode-toggle"},React.createElement(ObjectRemovalBrushMode,{isHighlightMode:D,setIsHighlightMode:E,t:b}),React.createElement(ObjectRemovalBrushType,{isSquareBrushType:P,setIsSquareBrushType:Q,t:b}),React.createElement(ObjectRemovalBrushSize,{t:b,minSize:f,maxSize:h,brushSize:L,changeBrushSize:fa}),React.createElement(StyledApplyButton,{onClick:ga,size:"sm","data-testid":"FIE-object-removal-tool-apply-button",startIcon:React.createElement(Shine,null),disabled:!R,color:"secondary"},b("objectRemovalApplyButton")))}())};export default ObjectRemovalOptions;