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

React component version of filerobot video editor (FVE).

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"];export var FormattedText=function(a){function b(a){var c;return _classCallCheck(this,b),c=_callSuper(this,b,[a]),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;b.save(),b.font=this.formatFont(a),b.letterSpacing="".concat(c,"em");var d=b.measureText(a.text),e=d.width;return b.restore(),e}},{key:"getDefaultTextPartFormat",value:function(){return{fontSize:this.fontSize(),fill:this.fill(),fontWeight:this.fontWeight(),fontStyle:this.fontStyle(),baselineShift:0,letterSpacing:this.letterSpacing(),fontVariant:this.fontVariant(),fontFamily:this.fontFamily()}}},{key:"computeTextParts",value:function(){var a,b=this;this.textLines=[],this.visibleLinesStartIndex=0;for(var c=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(),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){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 b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},c=b.textContent,e=b.style,f=void 0===e?{}:e,g=b.startIndex,h=void 0===g?0:g;return{style:_objectSpread(_objectSpread({},n),f),width:0,text:c.replaceAll("\n","").substring(a-h,d-h)}}):[{text:c.replaceAll("\n","").slice(a,d),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=0,u=0,v=function(a,c,d){if(g&&t+c>f){if("top"===b.verticalAlign())return;b.visibleLinesStartIndex+=1}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})},w=d.length,x=0;x<w;x+=1){var y=d[x],z=y,A=r(u,u+z.length),B=void 0;if("auto"!==e&&void 0!==e&&A>e)for(var C=0;0<z.length;){for(var D=0,E=z.length,F="",G=0;D<E;){var H=D+E>>>1,I=z.slice(0,H+1),J=r(u+C,u+C+H+1)+o;J<=e?(D=H+1,F=I,G=J):E=H}if(F){if(k){var K=void 0,L=z[F.length],M=" "===L||"-"===L;K=M&&G<=e?F.length:Math.max(F.lastIndexOf(" "),F.lastIndexOf("-"))+1,0<K&&(D=K,F=F.slice(0,D),G=r(u+C,u+C+D))}var N=p(u+C,u+C+D).filter(function(a){return a.text});if(B=s(N),v(q(N),B,N),t+=B,!j||h&&t+B>f){var O=this.textLines[this.textLines.length-1];if(O&&l){var P=O.parts[O.parts.length-1],Q=this.measurePart(_objectSpread(_objectSpread({},P),{},{text:"".concat(P.text).concat(m)})),R=Q<e;R||(P.text=P.text.slice(0,P.text.length-3)),O.parts.splice(O.parts.length-1,1),O.parts.push(_objectSpread(_objectSpread({},P),{},{width:Q,text:"".concat(P.text).concat(m)}))}break}if(z=z.slice(D),C+=D,0<z.length){var S=p(u+C,u+C+z.length);if(A=q(S),A<=e&&S){var T=s(S);v(A,T,S),t+=T;break}}}else break}else{var U=p(u,u+z.length);B=s(U),v(A,B,U)}if(h&&t+B>f)break;u+=y.length,t+=B}var V="middle"===this.verticalAlign(),W=V?this.visibleLinesStartIndex/2:this.visibleLinesStartIndex;this.linesHeight=this.textLines.slice(Math.floor(W),V?this.textLines.length-Math.ceil(W):void 0).reduce(function(a,b){return a+b.totalHeight},0),this.linesWidth=Math.max.apply(Math,_toConsumableArray(this.textLines.map(function(a){return a.width},0)))}},{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.textLines[0].totalHeight/2-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=this.textLines[0].totalHeight,l=0;j.forEach(function(b){var e=l===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,m;if(null!==(i=h.style.textDecoration)&&void 0!==i&&i.includes("underline")){a.save(),a.beginPath(),a.moveTo(f,k+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),k+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!==(m=h.style.textDecoration)&&void 0!==m&&m.includes("line-through")){a.save(),a.beginPath(),a.moveTo(f,k-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),k-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=0;u<t.length;u+=1)r=t[u]," "===r&&l!==j.length-1&&"justify"===c.align()&&(f+=(d-2*g-b.width)/s),c.drawState={x:f,y:k-h.style.baselineShift,text:r},a.fillStrokeShape(c),f+=c.measurePart(_objectSpread(_objectSpread({},h),{},{text:r}));else c.drawState={x:f,y:k-h.style.baselineShift,text:h.text},a.fillStrokeShape(c),f+=h.width}),a.restore(),"undefined"!=typeof j[l+1]&&(k+=j[l+1].totalHeight),l+=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);FormattedText.prototype.className="FormattedText",_registerNode(FormattedText),Factory.overWriteSetter(FormattedText,"width",getNumberOrAutoValidator()),Factory.overWriteSetter(FormattedText,"height",getNumberOrAutoValidator()),Factory.addGetterSetter(FormattedText,"padding",0,getNumberValidator()),Factory.addGetterSetter(FormattedText,"align","left"),Factory.addGetterSetter(FormattedText,"verticalAlign","top"),Factory.addGetterSetter(FormattedText,"lineHeight",1,getNumberValidator()),Factory.addGetterSetter(FormattedText,"wrap","word"),Factory.addGetterSetter(FormattedText,"ellipsis",!1,getBooleanValidator()),Factory.addGetterSetter(FormattedText,"letterSpacing",0,getNumberValidator()),Factory.addGetterSetter(FormattedText,"text"),Factory.addGetterSetter(FormattedText,"fontFamily","Arial"),Factory.addGetterSetter(FormattedText,"fontSize",16,getNumberValidator()),Factory.addGetterSetter(FormattedText,"fontVariant","normal"),Factory.addGetterSetter(FormattedText,"fontStyle","normal"),Factory.addGetterSetter(FormattedText,"fontWeight","normal"),Factory.addGetterSetter(FormattedText,"scaleFormatDimensionsBy",1);