mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
2809f53af8
* Uses `pixi-multistyle-text` * Add standalone example * Update the Yarn Dialogue example
3 lines
13 KiB
JavaScript
3 lines
13 KiB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.MultiStyleText=e()}(this,function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};var e=["pointerover","pointerenter","pointerdown","pointermove","pointerup","pointercancel","pointerout","pointerleave","gotpointercapture","lostpointercapture","mouseover","mouseenter","mousedown","mousemove","mouseup","mousecancel","mouseout","mouseleave","touchover","touchenter","touchdown","touchmove","touchup","touchcancel","touchout","touchleave"],n="bbcode",o={bbcode:["[","]"],xml:["<",">"]};return function(i){function s(t,n){var o=i.call(this,t)||this;return o.styles=n,e.forEach(function(t){o.on(t,function(t){return o.handleInteraction(t)})}),o}return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(s,i),s.prototype.handleInteraction=function(t){var e=t,n=t.data.getLocalPosition(this),o=this.hitboxes.reduce(function(t,e){return void 0!==t?t:e.hitbox.contains(n.x,n.y)?e:void 0},void 0);e.targetTag=void 0===o?void 0:o.tag},Object.defineProperty(s.prototype,"styles",{set:function(t){for(var e in this.textStyles={},this.textStyles.default=this.assign({},s.DEFAULT_TAG_STYLE),t)"default"===e?this.assign(this.textStyles.default,t[e]):this.textStyles[e]=this.assign({},t[e]);this.textStyles.default.tagStyle===n&&(this.textStyles.b=this.assign({},{fontStyle:"bold"}),this.textStyles.i=this.assign({},{fontStyle:"italic"}),this.textStyles.color=this.assign({},{fill:""}),this.textStyles.outline=this.assign({},{stroke:"",strokeThickness:6}),this.textStyles.font=this.assign({},{fontFamily:""}),this.textStyles.shadow=this.assign({},{dropShadowColor:"",dropShadow:!0,dropShadowBlur:3,dropShadowDistance:3,dropShadowAngle:2}),this.textStyles.size=this.assign({},{fontSize:"px"}),this.textStyles.spacing=this.assign({},{letterSpacing:""}),this.textStyles.align=this.assign({},{align:""})),this._style=new PIXI.TextStyle(this.textStyles.default),this.dirty=!0},enumerable:!0,configurable:!0}),s.prototype.setTagStyle=function(t,e){t in this.textStyles?this.assign(this.textStyles[t],e):this.textStyles[t]=this.assign({},e),this._style=new PIXI.TextStyle(this.textStyles.default),this.dirty=!0},s.prototype.deleteTagStyle=function(t){"default"===t?this.textStyles.default=this.assign({},s.DEFAULT_TAG_STYLE):delete this.textStyles[t],this._style=new PIXI.TextStyle(this.textStyles.default),this.dirty=!0},s.prototype.getTagRegex=function(t,e){var i=Object.keys(this.textStyles).join("|");i=t?"("+i+")":"(?:"+i+")";var s=this.textStyles.default.tagStyle===n?"\\"+o.bbcode[0]+i+"(?:\\=(?:[A-Za-z0-9_\\-\\#]+|'(?:[^']+|\\\\')*'))*\\s*\\"+o.bbcode[1]+"|\\"+o.bbcode[0]+"\\/"+i+"\\s*\\"+o.bbcode[1]:"\\"+o.xml[0]+i+"(?:\\s+[A-Za-z0-9_\\-]+=(?:\"(?:[^\"]+|\\\\\")*\"|'(?:[^']+|\\\\')*'))*\\s*\\"+o.xml[1]+"|\\"+o.xml[0]+"\\/"+i+"\\s*\\"+o.xml[1];return e&&(s="("+s+")"),new RegExp(s,"g")},s.prototype.getPropertyRegex=function(){return new RegExp("([A-Za-z0-9_\\-]+)=(?:\"((?:[^\"]+|\\\\\")*)\"|'((?:[^']+|\\\\')*)')","g")},s.prototype.getBBcodePropertyRegex=function(){return new RegExp("[A-Za-z0-9_\\-]+=([A-Za-z0-9_\\-\\#]+)","g")},s.prototype._getTextDataPerLine=function(t){for(var e=[],i=this.getTagRegex(!0,!1),s=[this.assign({},this.textStyles.default)],r=[{name:"default",properties:{}}],a=0;a<t.length;a++){for(var h=[],l=[],c=void 0;c=i.exec(t[a]);)l.push(c);if(0===l.length)h.push(this.createTextData(t[a],s[s.length-1],r[r.length-1]));else{for(var x=0,d=function(e){if(l[e].index>x&&h.push(g.createTextData(t[a].substring(x,l[e].index),s[s.length-1],r[r.length-1])),"/"===l[e][0][1])s.length>1&&(s.pop(),r.pop());else{for(var o={},i=g.getPropertyRegex(),c=void 0;c=i.exec(l[e][0]);)o[c[1]]=c[2]||c[3];if(r.push({name:l[e][1],properties:o}),g.textStyles.default.tagStyle===n&&l[e][0].includes("=")&&g.textStyles[l[e][1]]){var d=g.getBBcodePropertyRegex().exec(l[e][0]),u={};Object.entries(g.textStyles[l[e][1]]).forEach(function(t){u[t[0]]="string"!=typeof t[1]?t[1]:d[1]+t[1]}),s.push(g.assign({},s[s.length-1],u))}else s.push(g.assign({},s[s.length-1],g.textStyles[l[e][1]]))}x=l[e].index+l[e][0].length},g=this,u=0;u<l.length;u++)d(u);if(x<t[a].length){var p=this.createTextData(x?t[a].substring(x):t[a],s[s.length-1],r[r.length-1]);h.push(p)}}e.push(h)}var f=this.textStyles.default.tagStyle;return e[e.length-1].map(function(t){t.text.includes(o[f][0])&&(t.text=t.text.match(f===n?/^(.*)\[/:/^(.*)\</)[1])}),e},s.prototype.getFontString=function(t){return new PIXI.TextStyle(t).toFontString()},s.prototype.createTextData=function(t,e,n){return{text:t,style:e,width:0,height:0,fontProperties:void 0,tag:n}},s.prototype.getDropShadowPadding=function(){var t=this,e=0,n=0;return Object.keys(this.textStyles).forEach(function(o){var i=t.textStyles[o],s=i.dropShadowBlur;e=Math.max(e,i.dropShadowDistance||0),n=Math.max(n,s||0)}),e+n},s.prototype.updateText=function(){var t=this;if(this.dirty){this.hitboxes=[],this.texture.baseTexture.resolution=this.resolution;var e=this.textStyles,n=this.text;this._style.wordWrap&&(n=this.wordWrap(this.text));for(var o=n.split(/(?:\r\n|\r|\n)/),i=this._getTextDataPerLine(o),r=[],a=[],h=[],l=0,c=0;c<o.length;c++){for(var x=0,d=0,g=0,u=0;u<i[c].length;u++){var p=i[c][u].style;this.context.font=this.getFontString(p),i[c][u].width=this.context.measureText(i[c][u].text).width,0!==i[c][u].text.length&&(i[c][u].width+=(i[c][u].text.length-1)*p.letterSpacing,u>0&&(x+=p.letterSpacing/2),u<i[c].length-1&&(x+=p.letterSpacing/2)),x+=i[c][u].width,i[c][u].fontProperties=PIXI.TextMetrics.measureFont(this.context.font),i[c][u].height=i[c][u].fontProperties.fontSize,"number"==typeof p.valign?(d=Math.min(d,p.valign-i[c][u].fontProperties.descent),g=Math.max(g,p.valign+i[c][u].fontProperties.ascent)):(d=Math.min(d,-i[c][u].fontProperties.descent),g=Math.max(g,i[c][u].fontProperties.ascent))}r[c]=x,a[c]=d,h[c]=g,l=Math.max(l,x)}var f=Object.keys(e).map(function(t){return e[t]}).reduce(function(t,e){return Math.max(t,e.strokeThickness||0)},0),y=this.getDropShadowPadding(),S=l+2*f+2*y,b=h.reduce(function(t,e){return t+e},0)-a.reduce(function(t,e){return t+e},0)+2*f+2*y;this.canvas.width=S*this.resolution,this.canvas.height=b*this.resolution,this.context.scale(this.resolution,this.resolution),this.context.textBaseline="alphabetic",this.context.lineJoin="round";var v=y+f,m=[];for(c=0;c<i.length;c++){var w=i[c],T=void 0;switch(this._style.align){case"left":T=y+f;break;case"center":T=y+f+(l-r[c])/2;break;case"right":T=y+f+l-r[c]}for(u=0;u<w.length;u++){var k=w[u],P=k.style,_=k.text,I=k.fontProperties,O=k.width,A=k.tag,F=v+I.ascent;switch(P.valign){case"top":break;case"baseline":F+=h[c]-I.ascent;break;case"middle":F+=(h[c]-a[c]-I.ascent-I.descent)/2;break;case"bottom":F+=h[c]-a[c]-I.ascent-I.descent;break;default:F+=h[c]-I.ascent-P.valign}if(0===P.letterSpacing)m.push({text:_,style:P,x:T,y:F,width:O,ascent:I.ascent,descent:I.descent,tag:A}),T+=w[u].width;else{this.context.font=this.getFontString(w[u].style);for(var E=0;E<_.length;E++){(E>0||u>0)&&(T+=P.letterSpacing/2);var D=this.context.measureText(_.charAt(E)).width;m.push({text:_.charAt(E),style:P,x:T,y:F,width:D,ascent:I.ascent,descent:I.descent,tag:A}),T+=D,(E<_.length-1||u<w.length-1)&&(T+=P.letterSpacing/2)}}}v+=h[c]-a[c]}this.context.save(),m.forEach(function(e){var n=e.style,o=e.text,i=e.x,s=e.y;if(n.dropShadow){t.context.font=t.getFontString(n);var r=n.dropShadowColor;"number"==typeof r&&(r=PIXI.utils.hex2string(r)),t.context.shadowColor=r,t.context.shadowBlur=n.dropShadowBlur,t.context.shadowOffsetX=Math.cos(n.dropShadowAngle)*n.dropShadowDistance*t.resolution,t.context.shadowOffsetY=Math.sin(n.dropShadowAngle)*n.dropShadowDistance*t.resolution,t.context.fillText(o,i,s)}}),this.context.restore(),m.forEach(function(e){var n=e.style,o=e.text,i=e.x,s=e.y;if(void 0!==n.stroke&&n.strokeThickness){t.context.font=t.getFontString(n);var r=n.stroke;"number"==typeof r&&(r=PIXI.utils.hex2string(r)),t.context.strokeStyle=r,t.context.lineWidth=n.strokeThickness,t.context.strokeText(o,i,s)}}),m.forEach(function(e){var n=e.style,o=e.text,i=e.x,s=e.y;if(void 0!==n.fill){t.context.font=t.getFontString(n);var r=n.fill;if("number"==typeof r)r=PIXI.utils.hex2string(r);else if(Array.isArray(r))for(var a=0;a<r.length;a++){var h=r[a];"number"==typeof h&&(r[a]=PIXI.utils.hex2string(h))}t.context.fillStyle=t._generateFillStyle(new PIXI.TextStyle(n),[o]),t.context.fillText(o,i,s)}}),m.forEach(function(e){var n=e.style,o=e.x,i=e.y,r=e.width,a=e.ascent,h=e.descent,l=e.tag,c=-t._style.padding-t.getDropShadowPadding();t.hitboxes.push({tag:l,hitbox:new PIXI.Rectangle(o+c,i-a+c,r,a+h)}),(void 0===n.debug?s.debugOptions.spans.enabled:n.debug)&&(t.context.lineWidth=1,s.debugOptions.spans.bounding&&(t.context.fillStyle=s.debugOptions.spans.bounding,t.context.strokeStyle=s.debugOptions.spans.bounding,t.context.beginPath(),t.context.rect(o,i-a,r,a+h),t.context.fill(),t.context.stroke(),t.context.stroke()),s.debugOptions.spans.baseline&&(t.context.strokeStyle=s.debugOptions.spans.baseline,t.context.beginPath(),t.context.moveTo(o,i),t.context.lineTo(o+r,i),t.context.closePath(),t.context.stroke()),s.debugOptions.spans.top&&(t.context.strokeStyle=s.debugOptions.spans.top,t.context.beginPath(),t.context.moveTo(o,i-a),t.context.lineTo(o+r,i-a),t.context.closePath(),t.context.stroke()),s.debugOptions.spans.bottom&&(t.context.strokeStyle=s.debugOptions.spans.bottom,t.context.beginPath(),t.context.moveTo(o,i+h),t.context.lineTo(o+r,i+h),t.context.closePath(),t.context.stroke()),s.debugOptions.spans.text&&(t.context.fillStyle="#ffffff",t.context.strokeStyle="#000000",t.context.lineWidth=2,t.context.font="8px monospace",t.context.strokeText(l.name,o,i-a+8),t.context.fillText(l.name,o,i-a+8),t.context.strokeText(r.toFixed(2)+"x"+(a+h).toFixed(2),o,i-a+16),t.context.fillText(r.toFixed(2)+"x"+(a+h).toFixed(2),o,i-a+16)))}),s.debugOptions.objects.enabled&&(s.debugOptions.objects.bounding&&(this.context.fillStyle=s.debugOptions.objects.bounding,this.context.beginPath(),this.context.rect(0,0,S,b),this.context.fill()),s.debugOptions.objects.text&&(this.context.fillStyle="#ffffff",this.context.strokeStyle="#000000",this.context.lineWidth=2,this.context.font="8px monospace",this.context.strokeText(S.toFixed(2)+"x"+b.toFixed(2),0,8,S),this.context.fillText(S.toFixed(2)+"x"+b.toFixed(2),0,8,S))),this.updateTexture()}},s.prototype.wordWrap=function(t){var e="",n=this.getTagRegex(!0,!0),o=t.split("\n"),i=this._style.wordWrapWidth,s=[this.assign({},this.textStyles.default)];this.context.font=this.getFontString(this.textStyles.default);for(var r=0;r<o.length;r++){for(var a=i,h=o[r].split(n),l=!0,c=0;c<h.length;c++)if(n.test(h[c]))e+=h[c],"/"===h[c][1]?(c+=2,s.pop()):(s.push(this.assign({},s[s.length-1],this.textStyles[h[++c]])),c++),this.context.font=this.getFontString(s[s.length-1]);else for(var x=h[c].split(" "),d=0;d<x.length;d++){var g=this.context.measureText(x[d]).width;if(this._style.breakWords&&g>a){var u=x[d].split("");d>0&&(e+=" ",a-=this.context.measureText(" ").width);for(var p=0;p<u.length;p++){var f=this.context.measureText(u[p]).width;f>a?(e+="\n"+u[p],a=i-f):(e+=u[p],a-=f)}}else if(this._style.breakWords)e+=x[d],a-=g;else{var y=g+(d>0?this.context.measureText(" ").width:0);y>a?(l||(e+="\n"),e+=x[d],a=i-g):(a-=y,d>0&&(e+=" "),e+=x[d])}l=!1}r<o.length-1&&(e+="\n")}return e},s.prototype.updateTexture=function(){var t=this._texture,e=this.getDropShadowPadding();t.baseTexture.hasLoaded=!0,t.baseTexture.resolution=this.resolution,t.baseTexture.realWidth=this.canvas.width,t.baseTexture.realHeight=this.canvas.height,t.baseTexture.width=this.canvas.width/this.resolution,t.baseTexture.height=this.canvas.height/this.resolution,t.trim.width=t.frame.width=this.canvas.width/this.resolution,t.trim.height=t.frame.height=this.canvas.height/this.resolution,t.trim.x=-this._style.padding-e,t.trim.y=-this._style.padding-e,t.orig.width=t.frame.width-2*(this._style.padding+e),t.orig.height=t.frame.height-2*(this._style.padding+e),this._onTextureUpdate(),t.baseTexture.emit("update",t.baseTexture),this.dirty=!1},s.prototype.assign=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];for(var o=0,i=e;o<i.length;o++){var s=i[o];for(var r in s)t[r]=s[r]}return t},s.DEFAULT_TAG_STYLE={align:"left",breakWords:!1,dropShadow:!1,dropShadowAngle:Math.PI/6,dropShadowBlur:0,dropShadowColor:"#000000",dropShadowDistance:5,fill:"black",fillGradientType:PIXI.TEXT_GRADIENT.LINEAR_VERTICAL,fontFamily:"Arial",fontSize:26,fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",letterSpacing:0,lineHeight:0,lineJoin:"miter",miterLimit:10,padding:0,stroke:"black",strokeThickness:0,textBaseline:"alphabetic",valign:"baseline",wordWrap:!1,wordWrapWidth:100,tagStyle:"xml"},s.debugOptions={spans:{enabled:!1,baseline:"#44BB44",top:"#BB4444",bottom:"#4444BB",bounding:"rgba(255, 255, 255, 0.1)",text:!0},objects:{enabled:!1,bounding:"rgba(255, 255, 255, 0.05)",text:!0}},s}(PIXI.Text)});
|
|
//# sourceMappingURL=pixi-multistyle-text.umd.js.map
|