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

React component version of filerobot image editor (FIE).

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"];import React,{useEffect,useState}from"react";import{Image}from"react-konva";import loadImage from"../../../../utils/loadImage";import nodesCommonPropTypes from"../nodesCommonPropTypes";var ImageNode=function(a){var b=a.id,c=a.name,d=a.image,e=a.x,f=a.y,g=a.width,h=void 0===g?0:g,i=a.height,j=void 0===i?0:i,k=a.scaleX,l=void 0===k?1:k,m=a.scaleY,n=void 0===m?1:m,o=a.rotation,p=void 0===o?0:o,q=a.annotationEvents,r=a.stroke,s=a.strokeWidth,t=a.shadowOffsetX,u=a.shadowOffsetY,v=a.shadowBlur,w=a.shadowColor,x=a.shadowOpacity,y=a.opacity,z=void 0===y?1:y,A=_objectWithoutProperties(a,_excluded),B=useState(null),C=_slicedToArray(B,2),D=C[0],E=C[1];useEffect(function(){"string"==typeof d&&loadImage(d).then(E)},[d]);var F=d instanceof HTMLImageElement||d instanceof HTMLCanvasElement;if(!F&&!D)return null;var G=F?d:D;return React.createElement(Image,_extends({id:b,name:c,rotation:p,scaleX:l,scaleY:n,stroke:r,strokeWidth:s,shadowOffsetX:t,shadowOffsetY:u,shadowBlur:v,shadowColor:w,shadowOpacity:x,image:G,x:e||0,y:f||0,width:h,height:j,opacity:z||0},A,q,A))};export default ImageNode;