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