sp-image-editor/lib/components/Layers/DesignLayer/AnnotationNodes/ImageNode.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _extends from"@babel/runtime/helpers/extends";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","image","x","y","width","height","scaleX","scaleY","rotation","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity"];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,{useEffect,useState}from"react";import{Image}from"react-konva";import loadImage from"../../../../utils/loadImage";import nodesCommonPropTypes from"../nodesCommonPropTypes";import KonvaSpinner from"./ImageSpinner";var ImageNode=function(a){var b=a.id,c=a.name,d=a.image,e=a.x,f=a.y,g=a.width,h=a.height,i=a.scaleX,j=a.scaleY,k=a.rotation,l=a.annotationEvents,m=a.stroke,n=a.strokeWidth,o=a.shadowOffsetX,p=a.shadowOffsetY,q=a.shadowBlur,r=a.shadowColor,s=a.shadowOpacity,t=a.opacity,u=_objectWithoutProperties(a,_excluded),v=useState(null),w=_slicedToArray(v,2),x=w[0],y=w[1],z=useState(!0),A=_slicedToArray(z,2),B=A[0],C=A[1];useEffect(function(){var a=!0;return"string"==typeof d?loadImage(d).then(function(b){a&&(y(b),C(!1))}):C(!1),function(){a=!1}},[d]);var D=d instanceof HTMLImageElement,E=D?d:x,F=Math.max(10,.1*Math.min(g,h));return B?React.createElement(KonvaSpinner,{x:e+g/2,y:f+h/2,radius:F,strokeWidth:.1*F,color:"#555",speed:5}):E?React.createElement(Image,_extends({id:b,name:c,rotation:k,scaleX:i,scaleY:j,stroke:m,strokeWidth:n,shadowOffsetX:o,shadowOffsetY:p,shadowBlur:q,shadowColor:r,shadowOpacity:s,image:E,x:e,y:f,width:g,height:h,opacity:t},u,l)):null};ImageNode.defaultProps=_objectSpread(_objectSpread({},nodesCommonPropTypes.defaults),{},{width:0,height:0});export default ImageNode;