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

React component version of filerobot image editor (FIE).

import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","text","fontFamily","fontSize","fontStyle","fill","x","y","width","height","scaleX","scaleY","rotation","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity","letterSpacing","lineHeight","align","verticalAlign","autoWidth","autoHeight","visible","padding","fontWeight","shrink","originalSourceInitialScale"];import React from"react";import{Group}from"react-konva";import{useEditableTextId}from"../../../../../hooks";import nodesCommonPropTypes from"../../nodesCommonPropTypes";import TextNodeContentTextarea from"./TextNodeContentTextarea";var FormattedText="FormattedTextFIE",TextNode=function(a){var b=a.id,c=a.name,d=a.text,e=void 0===d?"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet tortor quis odio facilisis, id aliquet nulla facilisis. Etiam tincidunt tempor odio nec placerat.":d,f=a.fontFamily,g=void 0===f?"Arial":f,h=a.fontSize,i=void 0===h?16:h,j=a.fontStyle,k=a.fill,l=void 0===k?"#000":k,m=a.x,n=a.y,o=a.width,p=void 0===o?0:o,q=a.height,r=void 0===q?0:q,s=a.scaleX,t=void 0===s?1:s,u=a.scaleY,v=void 0===u?1:u,w=a.rotation,x=void 0===w?0:w,y=a.annotationEvents,z=a.stroke,A=a.strokeWidth,B=a.shadowOffsetX,C=a.shadowOffsetY,D=a.shadowBlur,E=a.shadowColor,F=a.shadowOpacity,G=a.opacity,H=void 0===G?1:G,I=a.letterSpacing,J=a.lineHeight,K=a.align,L=void 0===K?"left":K,M=a.verticalAlign,N=void 0===M?"top":M,O=a.autoWidth,P=void 0!==O&&O,Q=a.autoHeight,R=void 0!==Q&&Q,S=a.visible,T=a.padding,U=a.fontWeight,V=a.shrink,W=void 0===V?0:V,X=a.originalSourceInitialScale,Y=_objectWithoutProperties(a,_excluded),Z=useEditableTextId(),$=Z===b,_=m||0,aa=n||0,ba=React.createElement(FormattedText,_extends({id:b,name:c,scaleX:t,scaleY:v,stroke:z,strokeWidth:A,shadowOffsetX:B,shadowOffsetY:C,shadowBlur:D,shadowColor:E,shadowOpacity:F,opacity:H||0,fill:l,text:e,fontFamily:g,fontStyle:j,fontWeight:U,shrink:W,fontSize:i||1,letterSpacing:I||0,lineHeight:"number"==typeof J?J:1,align:L,verticalAlign:N,x:$?0:_,y:$?0:aa,rotation:$?0:x,visible:!$&&S,width:P?void 0:p,height:R?void 0:r,autoWidth:P,autoHeight:R,scaleFormatDimensionsBy:X},y,Y));return $?React.createElement(Group,{x:_,y:aa,rotation:x},ba,React.createElement(TextNodeContentTextarea,{id:b,text:e,fill:l,opacity:H,fontFamily:g,fontSize:i,fontStyle:j,letterSpacing:I,lineHeight:J,textAlign:L,verticalAlign:N,width:p,height:r})):ba};export default TextNode;