react-filerobot-image-editor/lib/custom/shapes/FormattedText.js

React component version of filerobot image editor (FIE).

import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";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}function _callSuper(a,b,c){return b=_getPrototypeOf(b),_possibleConstructorReturn(a,_isNativeReflectConstruct()?Reflect.construct(b,c||[],_getPrototypeOf(a).constructor):b.apply(a,c))}function _isNativeReflectConstruct(){try{var a=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(a){}return(_isNativeReflectConstruct=function(){return!!a})()}import{Factory}from"konva/lib/Factory";import{_registerNode}from"konva/lib/Global";import{Shape}from"konva/lib/Shape";import{Util}from"konva/lib/Util";import{getNumberOrAutoValidator,getNumberValidator,getBooleanValidator}from"konva/lib/Validators";var dummyContext;function getDummyContext(){return dummyContext?dummyContext:(dummyContext=Util.createCanvasElement().getContext("2d"),dummyContext)}function normalizeFontFamily(a){return a?a.split(",").map(function(a){a=a.trim();var b=0<=a.indexOf(" "),c=0<=a.indexOf("\"")||0<=a.indexOf("'");return b&&!c&&(a="\"".concat(a,"\"")),a}).join(", "):""}var NORMAL="normal",CHANGEABLE_ATTRS=["padding","wrap","lineHeight","letterSpacing","width","height","text","fontSize","fill","fontWeight","fontStyle","fontFamily","verticalAlign","scaleFormatDimensionsBy","shrink"],NEWLINE_COUNT_CONST=1;export var FormattedTextFIE=function(a){function b(a){var c;return _classCallCheck(this,b),c=_callSuper(this,b,[a]),c._shrinkScale=1,c._isTextTruncated=!1,CHANGEABLE_ATTRS.forEach(function(a){c.on("".concat(a,"Change.konva"),c.computeTextParts)}),c.computeTextParts(),c}return _inherits(b,a),_createClass(b,[{key:"formatFont",value:function(a){var b,c=this.getDefaultTextPartFormat();return"".concat(a.style.fontStyle||c.fontStyle," ").concat(a.style.fontWeight||c.fontWeight," ").concat(a.style.fontVariant||c.fontVariant," ").concat(null!==(b=a.style.fontSize)&&void 0!==b?b:c.fontSize,"px ").concat(normalizeFontFamily(a.style.fontFamily||c.fontFamily))}},{key:"measurePart",value:function(a){var b=getDummyContext(),c=a.style.letterSpacing||0,d=c;if(b.font=this.formatFont(a),0===c)return b.measureText(a.text).width;var e=Array.from(a.text);if(1===e.length)return b.measureText(a.text).width+d;for(var f=0,g=0;g<e.length;g+=1)f+=b.measureText(e[g]).width,g<e.length-1&&(f+=d);return f}},{key:"getDefaultTextPartFormat",value:function(){var a=this._shrinkScale||1;return{fontSize:this.fontSize()*a,fill:this.fill(),fontWeight:this.fontWeight(),fontStyle:this.fontStyle(),baselineShift:0,letterSpacing:this.letterSpacing()*a,fontVariant:this.fontVariant(),fontFamily:this.fontFamily()}}},{key:"fullText",value:function(){return Array.isArray(this.text())?this.text().map(function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=a.textContent;return b}).join(""):this.text()}},{key:"_computeTextLayout",value:function(){var a,b=this;this._isTextTruncated=!1,this.textLines=[],this.visibleLinesStartIndex=0;for(var c=this.fullText(),d=c.split("\n"),e=this.attrs.width,f=this.attrs.height,g="auto"!==f&&void 0!==f,h=g&&"top"===this.verticalAlign(),j="none"!==this.wrap(),k="char"!==this.wrap()&&j,l=this.ellipsis(),m="\u2026",n=this.getDefaultTextPartFormat(),o=l?this.measurePart({text:m,style:_objectSpread(_objectSpread({},n),Array.isArray(this.text())&&(null===(a=this.text().slice(-1))||void 0===a?void 0:a.style))}):0,p=function(a,d){var e=b._shrinkScale||1;return Array.isArray(b.text())&&0<b.text().length?b.text().filter(function(){var b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.startIndex,e=void 0===c?0:c,f=b.endIndex,g=void 0===f?1/0:f;return a>=e&&a<=g||d>=e&&d<=g||e>=a&&g<=d}).map(function(){var c=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},f=c.style,g=void 0===f?{}:f,h=c.startIndex,i=void 0===h?0:h,j=c.endIndex,k=void 0===j?1/0:j,l=_objectSpread(_objectSpread({},n),g);return null!=g.fontSize&&(l.fontSize=g.fontSize*e),null!=g.letterSpacing&&(l.letterSpacing=g.letterSpacing*e),null!=g.baselineShift&&(l.baselineShift=g.baselineShift*e),{style:l,width:0,text:b.fullText().slice(Math.max(a,i),Math.min(d,k)).replaceAll("\n","")}}):[{text:c.slice(a,d).replaceAll("\n",""),style:n,width:0}]},q=function(a){return a.reduce(function(a,c){return c.width=b.measurePart(c),a+c.width},0)},r=function(a,b){return q(p(a,b))},s=function(a){return Math.max.apply(Math,_toConsumableArray(a.map(function(a){var c;return(null!==(c=a.style.fontSize)&&void 0!==c?c:b.fontSize)*b.lineHeight()})))},t=function(a){var c=Math.max.apply(Math,_toConsumableArray(a.map(function(a){var c;return null!==(c=a.style.fontSize)&&void 0!==c?c:b.fontSize()})));return .7*c},u=0,v=0,w=function(a,c,d){if(g&&u+c>f){if("top"===b.verticalAlign())return;b.visibleLinesStartIndex+=1}var e=t(d);b.textLines.push({width:a,parts:d.map(function(a,c){return a.text=0===c?a.text.replace(/^\s{1}/,""):a.text,a.width=0===a.width?b.measurePart(a):a.width,a}),totalHeight:c,trimmedHeight:e})},x=d.length,y=0;y<x;y+=1){var z=d[y],A=z,B=r(v,v+A.length),C=void 0;if("auto"!==e&&void 0!==e&&B>e)for(var D=0;0<A.length;){for(var E=0,F=A.length,G="",H=0;E<F;){var I=E+F>>>1,J=A.slice(0,I+1),K=r(v+D,v+D+I+1)+o;K<=e?(E=I+1,G=J,H=K):F=I}if(G){if(k){var L=void 0,M=A[G.length],N=" "===M||"-"===M;L=N&&H<=e?G.length:Math.max(G.lastIndexOf(" "),G.lastIndexOf("-"))+1,0<L&&(E=L,G=G.slice(0,E),H=r(v+D,v+D+E))}var O=p(v+D,v+D+E).filter(function(a){return a.text});if(C=s(O),w(q(O),C,O),u+=C,!j||h&&u+C>f){this._isTextTruncated=!0;var P=this.textLines[this.textLines.length-1];if(P&&l){var Q=P.parts[P.parts.length-1],R=this.measurePart(_objectSpread(_objectSpread({},Q),{},{text:"".concat(Q.text).concat(m)})),S=R<e;S||(Q.text=Q.text.slice(0,Q.text.length-3)),P.parts.splice(P.parts.length-1,1),P.parts.push(_objectSpread(_objectSpread({},Q),{},{width:R,text:"".concat(Q.text).concat(m)}))}break}if(A=A.slice(E),D+=E,0<A.length){var T=p(v+D,v+D+A.length);if(B=q(T),B<=e&&T){var U=s(T);w(B,U,T),u+=U;break}}}else{this._isTextTruncated=!0;break}}else{var V=p(v,v+A.length);C=s(V),w(B,C,V)}if(h&&u+C>f){this._isTextTruncated=!0;break}v+=z.length+NEWLINE_COUNT_CONST,u+=C}var W="middle"===this.verticalAlign(),X=W?this.visibleLinesStartIndex/2:this.visibleLinesStartIndex,Y=this.textLines.slice(Math.floor(X),W?this.textLines.length-Math.ceil(X):void 0);if(0===Y.length)this.linesHeight=0;else{var Z=Y[0],$=Math.max.apply(Math,_toConsumableArray(Z.parts.map(function(a){var c;return null!==(c=a.style.fontSize)&&void 0!==c?c:b.fontSize()}))),_=.7*$,aa=.02*$;if(1===Y.length)this.linesHeight=aa+_;else{var ba=Y.slice(0,-1).reduce(function(a,b){return a+b.totalHeight},0);this.linesHeight=aa+_+ba}}this.linesWidth=Math.max.apply(Math,_toConsumableArray(this.textLines.map(function(a){return a.width},0)))}},{key:"computeTextParts",value:function(){this._shrinkScale=1,this._computeTextLayout();var a=this.shrink();if(a&&!(0>=a)&&this._isTextTruncated){var b=this.fontSize();if(b){var c=1-Math.min(a,100)/100;if(this._shrinkScale=c,this._computeTextLayout(),!this._isTextTruncated){for(var d,e=c,f=1,g=0;f-e>.5/b&&20>g;)d=(e+f)/2,this._shrinkScale=d,this._computeTextLayout(),this._isTextTruncated?f=d:e=d,g+=1;this._shrinkScale!==e&&(this._shrinkScale=e,this._computeTextLayout())}}}}},{key:"getHeight",value:function(){var a="auto"===this.attrs.height||void 0===this.attrs.height;return a?this.linesHeight+2*this.padding():this.attrs.height}},{key:"getWidth",value:function(){var a="auto"===this.attrs.width||void 0===this.attrs.width;return a?this.linesWidth+2*this.padding():this.attrs.width}},{key:"_sceneFunc",value:function(a){var b,c=this;if(0!==this.text().length&&0!==(null===(b=this.textLines)||void 0===b?void 0:b.length)){var d=this.getWidth(),e=this.getHeight();a.setAttr("textBaseline","alphabetic"),a.setAttr("textAlign","left");var f="middle"===this.verticalAlign(),g=this.padding(),h=0;f?h=(e-this.linesHeight-2*g)/2:"bottom"===this.verticalAlign()&&(h=e-this.linesHeight-2*g),a.translate(g,h+g);var i=f?this.visibleLinesStartIndex/2:this.visibleLinesStartIndex,j=this.textLines.slice(Math.floor(i),f?this.textLines.length-Math.ceil(i):void 0),k=Math.max.apply(Math,_toConsumableArray(this.textLines[0].parts.map(function(a){var b;return null!==(b=a.style.fontSize)&&void 0!==b?b:c.fontSize()}))),l=.02*k+.7*k,m=0;j.forEach(function(b){var e=m===j.length-1,f=0;a.save(),"right"===c.align()?f+=d-b.width-2*g:"center"===c.align()&&(f+=(d-b.width-2*g)/2),b.parts.forEach(function(h){var i,k;if(null!==(i=h.style.textDecoration)&&void 0!==i&&i.includes("underline")){a.save(),a.beginPath(),a.moveTo(f,l+Math.round(h.style.fontSize/2)-h.style.baselineShift);var n=h.text.split(" ").length-1,o="justify"===c.align()&&e&&!(0===n)?d-2*g:h.width;a.lineTo(f+Math.round(o),l+Math.round(h.style.fontSize/2)-h.style.baselineShift),a.lineWidth=h.style.fontSize/15,a.strokeStyle=h.style.fill,a.stroke(),a.restore()}if(null!==(k=h.style.textDecoration)&&void 0!==k&&k.includes("line-through")){a.save(),a.beginPath(),a.moveTo(f,l-h.style.baselineShift);var p=h.text.split(" ").length-1,q="justify"===c.align()&&e&&!(0===p)?d-2*g:h.width;a.lineTo(f+Math.round(q),l-h.style.baselineShift),a.lineWidth=h.style.fontSize/15,a.strokeStyle=h.style.fill,a.stroke(),a.restore()}if(c.fill(h.style.fill),a.setAttr("font",c.formatFont(h)),0!==h.style.letterSpacing||"justify"===c.align()){for(var r,s=h.text.split(" ").length-1,t=Array.from(h.text),u=h.style.letterSpacing||0,v=u,w=0;w<t.length;w+=1){r=t[w]," "===r&&m!==j.length-1&&"justify"===c.align()&&(f+=(d-2*g-b.width)/s),c.drawState={x:f,y:l-h.style.baselineShift,text:r},a.fillStrokeShape(c);var x=a.measureText(r).width;f+=x,w<t.length-1&&(f+=v)}1===t.length&&(f+=v)}else c.drawState={x:f,y:l-h.style.baselineShift,text:h.text},a.fillStrokeShape(c),f+=h.width}),a.restore(),"undefined"!=typeof j[m+1]&&(l+=j[m+1].totalHeight),m+=1})}}},{key:"_fillFunc",value:function(a){a.fillText(this.drawState.text,this.drawState.x,this.drawState.y)}},{key:"_strokeFunc",value:function(a){a.strokeText(this.drawState.text,this.drawState.x,this.drawState.y,void 0)}},{key:"_hitFunc",value:function(a){a.beginPath(),a.rect(0,0,this.getWidth(),this.getHeight()),a.closePath(),a.fillStrokeShape(this)}},{key:"getStrokeScaleEnabled",value:function(){return!0}}])}(Shape);FormattedTextFIE.prototype.className="FormattedTextFIE",_registerNode(FormattedTextFIE),Factory.overWriteSetter(FormattedTextFIE,"width",getNumberOrAutoValidator()),Factory.overWriteSetter(FormattedTextFIE,"height",getNumberOrAutoValidator()),Factory.addGetterSetter(FormattedTextFIE,"padding",0,getNumberValidator()),Factory.addGetterSetter(FormattedTextFIE,"align","left"),Factory.addGetterSetter(FormattedTextFIE,"verticalAlign","top"),Factory.addGetterSetter(FormattedTextFIE,"lineHeight",1,getNumberValidator()),Factory.addGetterSetter(FormattedTextFIE,"wrap","word"),Factory.addGetterSetter(FormattedTextFIE,"ellipsis",!1,getBooleanValidator()),Factory.addGetterSetter(FormattedTextFIE,"letterSpacing",0,getNumberValidator()),Factory.addGetterSetter(FormattedTextFIE,"text"),Factory.addGetterSetter(FormattedTextFIE,"fontFamily","Arial"),Factory.addGetterSetter(FormattedTextFIE,"fontSize",16,getNumberValidator()),Factory.addGetterSetter(FormattedTextFIE,"fontVariant","normal"),Factory.addGetterSetter(FormattedTextFIE,"fontStyle","normal"),Factory.addGetterSetter(FormattedTextFIE,"fontWeight","normal"),Factory.addGetterSetter(FormattedTextFIE,"scaleFormatDimensionsBy",1),Factory.addGetterSetter(FormattedTextFIE,"shrink",0,getNumberValidator());