fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
3 lines (2 loc) • 4.98 kB
JavaScript
import{config as t}from"../../config.min.mjs";import{escapeXml as e}from"../../util/lang_string.min.mjs";import{colorPropToSVG as i,createSVGRect as n}from"../../util/misc/svgParsing.min.mjs";import{hasStyleChanged as o}from"../../util/misc/textStyles.min.mjs";import{toFixed as s}from"../../util/misc/toFixed.min.mjs";import{FabricObjectSVGExportMixin as r}from"../Object/FabricObjectSVGExportMixin.min.mjs";import{JUSTIFY as h}from"./constants.min.mjs";import{STROKE as c,FILL as a}from"../../constants.min.mjs";import{createRotateMatrix as l}from"../../util/misc/matrix.min.mjs";import{radiansToDegrees as g}from"../../util/misc/radiansDegreesConversion.min.mjs";import{Point as f}from"../../Point.min.mjs";import{matrixToSVG as m}from"../../util/misc/svgExport.min.mjs";const p=/ +/g,d=/"/g;function S(t,e,i,o,s){return"\t\t".concat(n(t,{left:e,top:i,width:o,height:s}),"\n")}class x extends r{_toSVG(){const t=this._getSVGLeftTopOffsets(),e=this._getSVGTextAndBg(t.textTop,t.textLeft);return this._wrapSVGTextAndBg(e)}toSVG(t){const e=this._createBaseSVGMarkup(this._toSVG(),{reviver:t,noStyle:!0,withShadow:!0}),i=this.path;return i?e+i._createBaseSVGMarkup(i._toSVG(),{reviver:t,withShadow:!0,additionalTransform:m(this.calcOwnMatrix())}):e}_getSVGLeftTopOffsets(){return{textLeft:-this.width/2,textTop:-this.height/2,lineTop:this.getHeightOfLine(0)}}_wrapSVGTextAndBg(t){let{textBgRects:e,textSpans:i}=t;const n=this.getSvgTextDecoration(this);return[e.join(""),'\t\t<text xml:space="preserve" ',this.fontFamily?'font-family="'.concat(this.fontFamily.replace(d,"'"),'" '):"",this.fontSize?'font-size="'.concat(this.fontSize,'" '):"",this.fontStyle?'font-style="'.concat(this.fontStyle,'" '):"",this.fontWeight?'font-weight="'.concat(this.fontWeight,'" '):"",n?'text-decoration="'.concat(n,'" '):"","rtl"===this.direction?'direction="'.concat(this.direction,'" '):"",'style="',this.getSvgStyles(!0),'"',this.addPaintOrder()," >",i.join(""),"</text>\n"]}_getSVGTextAndBg(t,e){const i=[],n=[];let o,s=t;this.backgroundColor&&n.push(...S(this.backgroundColor,-this.width/2,-this.height/2,this.width,this.height));for(let t=0,r=this._textLines.length;t<r;t++)o=this._getLineLeftOffset(t),"rtl"===this.direction&&(o+=this.width),(this.textBackgroundColor||this.styleHas("textBackgroundColor",t))&&this._setSVGTextLineBg(n,t,e+o,s),this._setSVGTextLineText(i,t,e+o,s),s+=this.getHeightOfLine(t);return{textSpans:i,textBgRects:n}}_createTextCharSpan(i,n,o,r,h){const c=t.NUM_FRACTION_DIGITS,a=this.getSvgSpanStyles(n,i!==i.trim()||!!i.match(p)),m=a?'style="'.concat(a,'"'):"",d=n.deltaY,S=d?' dy="'.concat(s(d,c),'" '):"",{angle:x,renderLeft:u,renderTop:_,width:y}=h;let T="";if(void 0!==u){const t=y/2;x&&(T=' rotate="'.concat(s(g(x),c),'"'));const e=l({angle:g(x)});e[4]=u,e[5]=_;const i=new f(-t,0).transform(e);o=i.x,r=i.y}return'<tspan x="'.concat(s(o,c),'" y="').concat(s(r,c),'" ').concat(S).concat(T).concat(m,">").concat(e(i),"</tspan>")}_setSVGTextLineText(t,e,i,n){const s=this.getHeightOfLine(e),r=this.textAlign.includes(h),c=this._textLines[e];let a,l,g,f,m,p="",d=0;n+=s*(1-this._fontSizeFraction)/this.lineHeight;for(let s=0,h=c.length-1;s<=h;s++)m=s===h||this.charSpacing||this.path,p+=c[s],g=this.__charBounds[e][s],0===d?(i+=g.kernedWidth-g.width,d+=g.width):d+=g.kernedWidth,r&&!m&&this._reSpaceAndTab.test(c[s])&&(m=!0),m||(a=a||this.getCompleteStyleDeclaration(e,s),l=this.getCompleteStyleDeclaration(e,s+1),m=o(a,l,!0)),m&&(f=this._getStyleDeclaration(e,s),t.push(this._createTextCharSpan(p,f,i,n,g)),p="",a=l,"rtl"===this.direction?i-=d:i+=d,d=0)}_setSVGTextLineBg(t,e,i,n){const o=this._textLines[e],s=this.getHeightOfLine(e)/this.lineHeight;let r,h=0,c=0,a=this.getValueOfPropertyAt(e,0,"textBackgroundColor");for(let l=0;l<o.length;l++){const{left:o,width:g,kernedWidth:f}=this.__charBounds[e][l];r=this.getValueOfPropertyAt(e,l,"textBackgroundColor"),r!==a?(a&&t.push(...S(a,i+c,n,h,s)),c=o,h=g,a=r):h+=f}r&&t.push(...S(a,i+c,n,h,s))}_getSVGLineTopOffset(t){let e,i=0;for(e=0;e<t;e++)i+=this.getHeightOfLine(e);const n=this.getHeightOfLine(e);return{lineTop:i,offset:(this._fontSizeMult-this._fontSizeFraction)*n/(this.lineHeight*this._fontSizeMult)}}getSvgStyles(t){return"".concat(super.getSvgStyles(t)," white-space: pre;")}getSvgSpanStyles(t,e){const{fontFamily:n,strokeWidth:o,stroke:s,fill:r,fontSize:h,fontStyle:l,fontWeight:g,deltaY:f}=t,m=this.getSvgTextDecoration(t);return[s?i(c,s):"",o?"stroke-width: ".concat(o,"; "):"",n?"font-family: ".concat(n.includes("'")||n.includes('"')?n:"'".concat(n,"'"),"; "):"",h?"font-size: ".concat(h,"px; "):"",l?"font-style: ".concat(l,"; "):"",g?"font-weight: ".concat(g,"; "):"",m?"text-decoration: ".concat(m,"; "):m,r?i(a,r):"",f?"baseline-shift: ".concat(-f,"; "):"",e?"white-space: pre; ":""].join("")}getSvgTextDecoration(t){return["overline","underline","line-through"].filter((e=>t[e.replace("-","")])).join(" ")}}export{x as TextSVGExportMixin};
//# sourceMappingURL=TextSVGExportMixin.min.mjs.map