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

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","x","y","width","height","scaleX","scaleY","rotation","annotationEvents","opacity","blurRadius","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","draggable"];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{useEffect,useRef,useState}from"react";import{Group,Image}from"react-konva";import{useStore}from"../../../../hooks";import{DESIGN_LAYER_ID}from"../../../../utils/constants";import nodesCommonPropTypes from"../nodesCommonPropTypes";import{jsx as _jsx}from"react/jsx-runtime";var BlurAnnotationNode=function(a){var b=a.id,c=a.name,d=a.x,e=a.y,f=a.width,g=void 0===f?100:f,h=a.height,i=void 0===h?100:h,j=a.scaleX,k=void 0===j?1:j,l=a.scaleY,m=void 0===l?1:l,n=a.rotation,o=void 0===n?0:n,p=a.annotationEvents,q=a.opacity,r=void 0===q?1:q,s=a.blurRadius,t=void 0===s?10:s,u=a.stroke,v=void 0===u?null:u,w=a.strokeWidth,x=void 0===w?0:w,y=a.shadowOffsetX,z=void 0===y?0:y,A=a.shadowOffsetY,B=void 0===A?0:A,C=a.shadowBlur,D=void 0===C?0:C,E=a.shadowColor,F=void 0===E?"#000000":E,G=a.shadowOpacity,H=void 0===G?1:G,I=a.draggable,J=void 0!==I&&I,K=_objectWithoutProperties(a,_excluded),L=useState(null),M=_slicedToArray(L,2),N=M[0],O=M[1],P=useState(!1),Q=_slicedToArray(P,2),R=Q[0],S=Q[1],T=useState(null),U=_slicedToArray(T,2),V=U[0],W=U[1],X=useState(null),Y=_slicedToArray(X,2),Z=Y[0],$=Y[1],_=useRef(),aa=useRef(),ba=useStore(),ca=ba.originalImage,da=ba.shownImageDimensions,ea=ba.adjustments,fa=void 0===ea?{}:ea,ga=fa.isFlippedX,ha=fa.isFlippedY;if(useEffect(function(){var a=function(){if(_.current){var a,b=_.current.getStage(),c=null===b||void 0===b?void 0:b.findOne("#".concat(DESIGN_LAYER_ID)),d=(null===c||void 0===c||null===(a=c.attrs)||void 0===a?void 0:a.isSaving)||!1;S(d)}};a();var b=setInterval(a,100);return function(){return clearInterval(b)}},[]),useEffect(function(){if(!(!ca||!da||0>=g||0>=i||R)){var a=g,b=i,c=JSON.stringify({blurRadius:t,isFlippedX:ga,isFlippedY:ha,imgWidth:da.width,imgHeight:da.height}),f=function(a){var b=document.createElement("canvas");b.width=da.width,b.height=da.height;var d=b.getContext("2d");d.save(),ga&&(d.scale(-1,1),d.translate(-da.width,0)),ha&&(d.scale(1,-1),d.translate(0,-da.height)),d.drawImage(ca,0,0,ca.width,ca.height,0,0,da.width,da.height),d.restore();var e=document.createElement("div");e.style.position="absolute",e.style.visibility="hidden",document.body.appendChild(e);var f=new Konva.Stage({container:e,width:da.width,height:da.height}),g=new Konva.Layer;f.add(g);var h=new window.Image;h.onload=function(){var b=new Konva.Image({image:h,x:0,y:0,width:da.width,height:da.height});b.filters([Konva.Filters.Blur]),b.blurRadius(t),b.cache(),g.add(b),g.draw();var d=f.toDataURL(),i=new window.Image;i.onload=function(){W(i),$(c),a(i),f.destroy(),e.parentNode&&document.body.removeChild(e)},i.src=d},h.src=b.toDataURL()},h=function(c){var f=document.createElement("canvas");f.width=a,f.height=b;var g=f.getContext("2d");g.drawImage(c,d,e,a,b,0,0,a,b);var h=f.toDataURL(),i=new window.Image;i.onload=function(){O(i)},i.src=h};V&&Z===c?h(V):f(h)}},[ca,da,d,e,g,i,t,ga,ha,R,V,Z]),useEffect(function(){if(R&&aa.current){aa.current.cache();var a=aa.current.getLayer();a&&a.batchDraw()}return function(){aa.current&&aa.current.clearCache()}},[R]),!ca||!da)return null;var ia=ca.width/da.width,ja=ca.height/da.height;if(!R){if(N)return _jsx(Image,_objectSpread(_objectSpread({id:b,name:c,x:d,y:e,image:N,width:g,height:i,scaleX:k,scaleY:m,rotation:0,opacity:r,draggable:J,stroke:v,strokeWidth:x,shadowOffsetX:z,shadowOffsetY:B,shadowBlur:D,shadowColor:F,shadowOpacity:H},p),K));var ka=document.createElement("canvas");ka.width=Math.max(1,g),ka.height=Math.max(1,i);var la=ka.getContext("2d");return la.fillStyle="rgba(200, 200, 200, 0.3)",la.fillRect(0,0,ka.width,ka.height),la.strokeStyle="rgba(0, 0, 0, 0.5)",la.lineWidth=2,la.setLineDash([5,5]),la.strokeRect(0,0,ka.width,ka.height),_jsx(Image,_objectSpread(_objectSpread({id:b,name:c,x:d,y:e,image:ka,width:g*k,height:i*m,scaleX:1,scaleY:1,rotation:o,opacity:r,draggable:J},p),K))}return _jsx(Group,{ref:_,id:b,name:c,x:d,y:e,width:g,height:i,scaleX:k,scaleY:m,rotation:o,opacity:r,children:_jsx(Group,{clip:{x:0,y:0,width:g,height:i},children:_jsx(Group,{x:g/2,y:i/2,offsetX:g/2,offsetY:i/2,scaleX:ga?-1:1,scaleY:ha?-1:1,children:_jsx(Image,{ref:aa,image:ca,x:-d*ia,y:-e*ja,width:ca.width,height:ca.height,scaleX:1/ia,scaleY:1/ja,filters:[Konva.Filters.Blur],blurRadius:t})})})})};export default BlurAnnotationNode;