gw-canvas/dist/gw-canvas.min.js

Library for rendering colorized bitmap fonts. Very fast, suitable for applications where the whole canvas needs frequent redrawing.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).GWC={})}(this,(function(t){"use strict";const e="\n#version 300 es\n\nin vec2 position;\nin uvec2 offset;\nin uint fg;\nin uint bg;\nin uint glyph;\n\nout vec2 fsOffset;\nout vec4 fgRgb;\nout vec4 bgRgb;\nflat out uvec2 fontPos;\n\nuniform int depth;\n\nvoid main() {\n\tfloat fdepth = float(depth) / 255.0;\n\tgl_Position = vec4(position, fdepth, 1.0);\n\n\tfloat fgr = float((fg & uint(0xF000)) >> 12);\n\tfloat fgg = float((fg & uint(0x0F00)) >> 8);\n\tfloat fgb = float((fg & uint(0x00F0)) >> 4);\n\tfloat fga = float((fg & uint(0x000F)) >> 0);\n\tfgRgb = vec4(fgr, fgg, fgb, fga) / 15.0;\n  \n\tfloat bgr = float((bg & uint(0xF000)) >> 12);\n\tfloat bgg = float((bg & uint(0x0F00)) >> 8);\n\tfloat bgb = float((bg & uint(0x00F0)) >> 4);\n\tfloat bga = float((bg & uint(0x000F)) >> 0);\n\tbgRgb = vec4(bgr, bgg, bgb, bga) / 15.0;\n\n\tuint glyphX = (glyph & uint(0xF));\n\tuint glyphY = (glyph >> 4);\n\tfontPos = uvec2(glyphX, glyphY);\n\n\tfsOffset = vec2(offset);\n}".trim(),i="\n#version 300 es\nprecision highp float;\n\nin vec2 fsOffset;\nin vec4 fgRgb;\nin vec4 bgRgb;\nflat in uvec2 fontPos;\n\nout vec4 fragColor;\n\nuniform sampler2D font;\nuniform uvec2 tileSize;\n\nvoid main() {\n\tuvec2 fontPx = (tileSize * fontPos) + uvec2(vec2(tileSize) * fsOffset);\n\tvec4 texel = texelFetch(font, ivec2(fontPx), 0).rgba;\n\n\tfragColor = vec4(mix(bgRgb.rgb, fgRgb.rgb, texel.rgb), mix(bgRgb.a, fgRgb.a, texel.r));\n}".trim();class h{constructor(t={}){this._tileWidth=12,this._tileHeight=16,this.needsUpdate=!0,this._map={},t.font=t.font||"monospace",this._node=document.createElement("canvas"),this._ctx=this.node.getContext("2d"),this._configure(t)}static fromImage(t){if("string"==typeof t){if(t.startsWith("data:"))throw new Error("Glyph: You must load a data string into an image element and use that.");const e=document.getElementById(t);if(!e)throw new Error("Glyph: Failed to find image element with id:"+t);t=e}const e=new this({tileWidth:t.width/16,tileHeight:t.height/16});return e._ctx.drawImage(t,0,0),e}static fromFont(t){"string"==typeof t&&(t={font:t});const e=new this(t),i=t.basicOnly||t.basic||!1;return e._initGlyphs(i),e}get node(){return this._node}get ctx(){return this._ctx}get tileWidth(){return this._tileWidth}get tileHeight(){return this._tileHeight}get pxWidth(){return this._node.width}get pxHeight(){return this._node.height}forChar(t){return null==t?-1:this._map[t]||-1}_configure(t){this._tileWidth=t.tileWidth||this.tileWidth,this._tileHeight=t.tileHeight||this.tileHeight,this.node.width=16*this.tileWidth,this.node.height=16*this.tileHeight,this._ctx.fillStyle="black",this._ctx.fillRect(0,0,this.pxWidth,this.pxHeight);const e=t.fontSize||t.size||Math.max(this.tileWidth,this.tileHeight);this._ctx.font=e+"px "+t.font,this._ctx.textAlign="center",this._ctx.textBaseline="middle",this._ctx.fillStyle="white"}draw(t,e){if(t>256)throw new Error("Cannot draw more than 256 glyphs.");const i=t%16*this.tileWidth,h=Math.floor(t/16)*this.tileHeight,r=i+Math.floor(this.tileWidth/2),s=h+Math.floor(this.tileHeight/2);this._ctx.save(),this._ctx.beginPath(),this._ctx.rect(i,h,this.tileWidth,this.tileHeight),this._ctx.clip(),"function"==typeof e?e(this._ctx,i,h,this.tileWidth,this.tileHeight):(void 0===this._map[e]&&(this._map[e]=t),this._ctx.fillText(e,r,s)),this._ctx.restore(),this.needsUpdate=!0}_initGlyphs(t=!1){for(let t=32;t<127;++t)this.draw(t,String.fromCharCode(t));t||([" ","☺","☻","♥","♦","♣","♠","☼","☀","★","☆","♂","♀","♪","♫","☸","▶","◀","↕","‼","⁋","☯","⌘","☖","↑","↓","→","←","Ω","↔","▲","▼"].forEach(((t,e)=>{this.draw(e,t)})),["⌂","Ç","ü","é","â","ä","à","å","ç","ê","ë","è","ï","î","ì","Ä","Å","É","æ","Æ","ô","ö","ò","û","ù","ÿ","Ö","Ü","¢","£","¥","₧","ƒ","á","í","ó","ú","ñ","Ñ","ª","º","¿","⌐","¬","½","¼","¡","«","»","░","▒","▓","│","┤","╡","╢","╖","╕","╣","║","╗","╝","╜","╛","┐","└","┴","┬","├","─","┼","╞","╟","╚","╔","╩","╦","╠","═","╬","╧","╨","╤","╥","╙","╘","╒","╓","╫","╪","┘","┌","█","▄","▌","▐","▀","α","ß","Γ","π","Σ","σ","µ","τ","Φ","Θ","Ω","δ","∞","φ","ε","∩","≡","±","≥","≤","⌠","⌡","÷","≈","°","∙","·","√","ⁿ","²","■"," "].forEach(((t,e)=>{this.draw(e+127,t)})))}}const r={};function s(t,e,i){return Math.max(e,Math.min(i,t))}class n{constructor(t=-1,e=0,i=0,h=100){t<0&&(h=0,t=0),this.r=t,this.g=e,this.b=i,this.a=h}rgb(){return[this.r,this.g,this.b]}rgba(){return[this.r,this.g,this.b,this.a]}isNull(){return 0===this.a}alpha(t){return new n(this.r,this.g,this.b,s(t,0,100))}get l(){return Math.round(.5*(Math.min(this.r,this.g,this.b)+Math.max(this.r,this.g,this.b)))}get s(){return this.l>=100?0:Math.round((Math.max(this.r,this.g,this.b)-Math.min(this.r,this.g,this.b))*(100-Math.abs(2*this.l-100))/100)}get h(){let t=0,e=this.r,i=this.g,h=this.b;return t=e>=i&&i>=h?(i-h)/(e-h)*60:i>e&&e>=h?60*(2-(e-h)/(i-h)):i>=h&&h>e?60*(2+(h-e)/(i-e)):h>i&&i>e?60*(4-(i-e)/(h-e)):h>e&&e>=i?60*(4+(e-i)/(h-i)):60*(6-(h-i)/(e-i)),Math.round(t)}equals(t){if("string"==typeof t){if(t.startsWith("#")&&4==t.length)return this.css()===t;if(this.name&&this.name===t)return!0}else if("number"==typeof t){const e=f(t);return this.css()===e.css()}const e=f(t);return this.isNull()?e.isNull():!e.isNull()&&(this.r===e.r&&this.g===e.g&&this.b===e.b&&this.a===e.a)}toInt(){return(Math.max(0,Math.min(15,Math.round(this.r/100*15)))<<12)+(Math.max(0,Math.min(15,Math.round(this.g/100*15)))<<8)+(Math.max(0,Math.min(15,Math.round(this.b/100*15)))<<4)+Math.max(0,Math.min(15,Math.round(this.a/100*15)))}toLight(){return this.rgb()}clamp(){return this.isNull()?this:u([s(this.r,0,100),s(this.g,0,100),s(this.b,0,100),s(this.a,0,100)])}blend(t){const e=f(t);if(e.isNull())return this;if(100===e.a)return e;const i=e.a/100,h=1-i;return u(Math.round(this.r*h+e.r*i),Math.round(this.g*h+e.g*i),Math.round(this.b*h+e.b*i),Math.round(e.a+this.a*h))}mix(t,e){const i=f(t);if(i.isNull())return this;if(e>=100)return i;const h=s(e,0,100)/100,r=1-h;return u(Math.round(this.r*r+i.r*h),Math.round(this.g*r+i.g*h),Math.round(this.b*r+i.b*h),(this.isNull()?100:this.a)*r+i.a*h)}lighten(t){if(this.isNull())return this;if(t<=0)return this;const e=s(t,0,100)/100,i=1-e;return u(Math.round(this.r*i+100*e),Math.round(this.g*i+100*e),Math.round(this.b*i+100*e),this.a)}darken(t){if(this.isNull())return this;const e=s(t,0,100)/100,i=1-e;return u(Math.round(this.r*i+0*e),Math.round(this.g*i+0*e),Math.round(this.b*i+0*e),this.a)}bake(t=!1){return this}add(t,e=100){const i=f(t);if(i.isNull())return this;const h=i.a/100*(e/100);return new n(Math.round(this.r+i.r*h),Math.round(this.g+i.g*h),Math.round(this.b+i.b*h),s(Math.round(this.a+100*h),0,100))}scale(t){if(this.isNull()||100==t)return this;const e=Math.max(0,t)/100;return u(Math.round(this.r*e),Math.round(this.g*e),Math.round(this.b*e),this.a)}multiply(t){if(this.isNull())return this;let e;if(Array.isArray(t)){if(t.length<3)throw new Error("requires at least r,g,b values.");e=t}else{if(t.isNull())return this;e=t.rgb()}const i=(e[3]||100)/100;return u(Math.round(this.r*(e[0]/100)*i),Math.round(this.g*(e[1]/100)*i),Math.round(this.b*(e[2]/100)*i),100)}normalize(){if(this.isNull())return this;const t=Math.max(this.r,this.g,this.b);return t<=100?this:u(Math.round(100*this.r/t),Math.round(100*this.g/t),Math.round(100*this.b/t),100)}css(){if(100!==this.a){return"#"+this.toInt().toString(16).padStart(4,"0")}return"#"+this.toInt().toString(16).padStart(4,"0").substring(0,3)}toString(){return this.name?this.name:this.css()}}function a(t,e=!1){for(;t.length<3;)t.push(0);if(e)for(let e=0;e<3;++e)t[e]=Math.round(100*(t[e]||0)/255);return new n(...t)}function o(t){if(!t.startsWith("#"))throw new Error('Color CSS strings must be of form "#abc" or "#abcdef" - received: ['+t+"]");const e=Number.parseInt(t.substring(1),16);let i,h,r;return 4==t.length?(i=Math.round((e>>8)/15*100),h=Math.round(((240&e)>>4)/15*100),r=Math.round((15&e)/15*100)):(i=Math.round((e>>16)/255*100),h=Math.round(((65280&e)>>8)/255*100),r=Math.round((255&e)/255*100)),new n(i,h,r)}function g(t){const e=r[t];if(!e)throw new Error("Unknown color name: "+t);return e}function l(t,e=!1){return t<0?new n:e||t>4095?new n(Math.round(100*((16711680&t)>>16)/255),Math.round(100*((65280&t)>>8)/255),Math.round(100*(255&t)/255),100):new n(Math.round(100*((3840&t)>>8)/15),Math.round(100*((240&t)>>4)/15),Math.round(100*(15&t)/15),100)}function u(...t){let e=t[0],i=t[1];if(0==t.length)return new n;if(t.length>2&&(e=t,i=!1),null==e)return new n(-1);if(e instanceof n)return e;if("string"==typeof e)return e.startsWith("#")?o(e):g(e);if(Array.isArray(e))return a(e,i);if("number"==typeof e)return l(e,i);throw new Error("Failed to make color - unknown argument: "+JSON.stringify(e))}function f(...t){const e=t[0];return e instanceof n?e:void 0===e?new n(-1):"string"!=typeof e||e.startsWith("#")?u(e,t[1]):g(e)}function c(t,e){if(t.isNull()||e.isNull())return[t,e];const i=t.clamp(),h=e.clamp();let r=Math.abs(i.h-h.h);if(r>180&&(r=360-r),r>45)return[i,h];if(Math.abs(i.l-h.l)>=40)return[i,h];const s=[i,h],n=i.s<=h.s?0:1,a=1-n;for(;s[a].l-s[n].l<40;)s[a]=s[a].mix(m,5),s[n]=s[n].mix(p,5);return s}function d(t,...e){let i=e;1==e.length&&(i=e[0]);const h=i instanceof n?i:u(i);return h._const=!0,r[t]=h,h.name=t,h}function _(t,...e){let i;return i=1==e.length?d(t,e[0]):d(t,...e),d("light_"+t,i.lighten(25)),d("lighter_"+t,i.lighten(50)),d("lightest_"+t,i.lighten(75)),d("dark_"+t,i.darken(25)),d("darker_"+t,i.darken(50)),d("darkest_"+t,i.darken(75)),i}const b=d("NONE",-1),p=d("black",0),m=d("white",4095);_("teal",[30,100,100]),_("brown",[60,40,0]),_("tan",[80,70,55]),_("pink",[100,60,66]),_("gray",[50,50,50]),_("yellow",[100,100,0]),_("purple",[100,0,100]),_("green",[0,100,0]),_("orange",[100,50,0]),_("blue",[0,0,100]),_("red",[100,0,0]),_("amber",[100,75,0]),_("flame",[100,25,0]),_("fuchsia",[100,0,100]),_("magenta",[100,0,75]),_("crimson",[100,0,25]),_("lime",[75,100,0]),_("chartreuse",[50,100,0]),_("sepia",[50,40,25]),_("violet",[50,0,100]),_("han",[25,0,100]),_("cyan",[0,100,100]),_("turquoise",[0,100,75]),_("sea",[0,100,50]),_("sky",[0,75,100]),_("azure",[0,50,100]),_("silver",[75,75,75]),_("gold",[100,85,0]);var y=Object.freeze({__proto__:null,colors:r,Color:n,fromArray:a,fromCss:o,fromName:g,fromNumber:l,make:u,from:f,separate:c,relativeLuminance:function(t,e){return Math.round(100*((t.r-e.r)*(t.r-e.r)*.2126+(t.g-e.g)*(t.g-e.g)*.7152+(t.b-e.b)*(t.b-e.b)*.0722)/1e4)},distance:function(t,e){return Math.round(100*((t.r-e.r)*(t.r-e.r)*.3333+(t.g-e.g)*(t.g-e.g)*.3333+(t.b-e.b)*(t.b-e.b)*.3333)/1e4)},smoothScalar:function(t,e=100){return Math.floor(100*Math.sin(Math.PI*t/e))},install:d,installSpread:_,NONE:b,BLACK:p,WHITE:m});class w{constructor(t,e=0){this._empty=!0,this.canvas=t,this.resize(t.width,t.height),this._depth=e}get width(){return this.canvas.width}get height(){return this.canvas.height}get depth(){return this._depth}get empty(){return this._empty}detach(){this.canvas=null}resize(t,e){const i=t*e*E;this.fg&&this.fg.length===i||(this.fg=new Uint16Array(i),this.bg=new Uint16Array(i),this.glyph=new Uint8Array(i))}clear(){this.fg.fill(0),this.bg.fill(0),this.glyph.fill(0),this._empty=!0}draw(t,e,i,h=4095,r=-1){const s=t+e*this.canvas.width;"string"==typeof i&&(i=this.canvas.glyphs.forChar(i)),h=f(h).toInt(),r=f(r).toInt(),this.set(s,i,h,r),(i||r||h)&&(this._empty=!1,this.canvas._requestRender())}set(t,e,i,h){t*=E,e&=255,h&=65535,i&=65535;for(let r=0;r<E;++r)this.glyph[t+r]=e,this.fg[t+r]=i,this.bg[t+r]=h}copy(t){if(t.width===this.width&&t.height===this.height||(console.log("auto resizing buffer"),t.resize(this.width,this.height)),!this.canvas)throw new Error("Layer is detached.  Did you resize the canvas?");t._data.forEach(((t,e)=>{let i=t.ch;"string"==typeof i&&(i=this.canvas.glyphs.forChar(i)),this.set(e,i,t.fg.toInt(),t.bg.toInt())})),this._empty=!1,this.canvas._requestRender()}copyTo(t){t.resize(this.width,this.height);for(let e=0;e<this.height;++e)for(let i=0;i<this.width;++i){const h=(i+e*this.width)*E;t.draw(i,e,this.glyph[h],this.fg[h],this.bg[h])}}}const E=6;class R extends Error{constructor(...t){super(...t),Error.captureStackTrace&&Error.captureStackTrace(this,R),this.name="NotSupportedError"}}class M{constructor(t){if(this._renderRequested=!1,this._autoRender=!0,this._width=50,this._height=25,this._layers=[],!t.glyphs)throw new Error("You must supply glyphs for the canvas.");this._node=this._createNode(),this._createContext(),this._configure(t)}get node(){return this._node}get width(){return this._width}get height(){return this._height}get tileWidth(){return this._glyphs.tileWidth}get tileHeight(){return this._glyphs.tileHeight}get pxWidth(){return this.node.clientWidth}get pxHeight(){return this.node.clientHeight}get glyphs(){return this._glyphs}set glyphs(t){this._setGlyphs(t)}layer(t=0){let e=this._layers.find((e=>e.depth===t));return e||(e=new w(this,t),this._layers.push(e),this._layers.sort(((t,e)=>t.depth-e.depth)),e)}clearLayer(t=0){const e=this._layers.find((e=>e.depth===t));e&&e.clear()}removeLayer(t=0){const e=this._layers.findIndex((e=>e.depth===t));e>-1&&this._layers.splice(e,1)}_createNode(){return document.createElement("canvas")}_configure(t){if(this._width=t.width||this._width,this._height=t.height||this._height,this._autoRender=!1!==t.render,this._setGlyphs(t.glyphs),this.bg=f(t.bg||p),t.div){let e;"string"==typeof t.div?(e=document.getElementById(t.div),e||console.warn("Failed to find parent element by ID: "+t.div)):e=t.div,e&&e.appendChild&&e.appendChild(this.node)}}_setGlyphs(t){if(t===this._glyphs)return!1;this._glyphs=t,this.resize(this._width,this._height);const e=this._gl,i=this._uniforms;return e.uniform2uiv(i.tileSize,[this.tileWidth,this.tileHeight]),this._uploadGlyphs(),!0}resize(t,e){this._width=t,this._height=e;const i=this.node;i.width=this._width*this.tileWidth,i.height=this._height*this.tileHeight;this._gl.viewport(0,0,this.node.width,this.node.height),this._createGeometry(),this._createData()}_requestRender(){this._renderRequested||(this._renderRequested=!0,this._autoRender&&requestAnimationFrame((()=>this.render())))}hasXY(t,e){return t>=0&&e>=0&&t<this.width&&e<this.height}toX(t){return Math.floor(this.width*t/this.node.clientWidth)}toY(t){return Math.floor(this.height*t/this.node.clientHeight)}_createContext(){let t=this.node.getContext("webgl2");if(!t)throw new R("WebGL 2 not supported");this._gl=t,this._buffers={},this._attribs={},this._uniforms={};const h=function(t,...e){const i=t.createProgram();if([t.VERTEX_SHADER,t.FRAGMENT_SHADER].forEach(((h,r)=>{const s=t.createShader(h);if(t.shaderSource(s,e[r]),t.compileShader(s),!t.getShaderParameter(s,t.COMPILE_STATUS))throw new Error(t.getShaderInfoLog(s));t.attachShader(i,s)})),t.linkProgram(i),!t.getProgramParameter(i,t.LINK_STATUS))throw new Error(t.getProgramInfoLog(i));return i}(t,e,i);t.useProgram(h);const r=t.getProgramParameter(h,t.ACTIVE_ATTRIBUTES);for(let e=0;e<r;e++){t.enableVertexAttribArray(e);let i=t.getActiveAttrib(h,e);this._attribs[i.name]=e}const s=t.getProgramParameter(h,t.ACTIVE_UNIFORMS);for(let e=0;e<s;e++){let i=t.getActiveUniform(h,e);this._uniforms[i.name]=t.getUniformLocation(h,i.name)}t.uniform1i(this._uniforms.font,0),this._texture=function(t){let e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),e}(t)}_createGeometry(){const t=this._gl;this._buffers.position&&t.deleteBuffer(this._buffers.position),this._buffers.uv&&t.deleteBuffer(this._buffers.uv);let e=function(t,e,i,h){let r=i*h,s=new Float32Array(r*x.length),n=new Uint8Array(r*x.length);for(let t=0;t<h;t++)for(let e=0;e<i;e++){const r=(e+t*i)*x.length;s.set(x.map(((r,s)=>s%2?1-2*(t+r)/h:2*(e+r)/i-1)),r),n.set(x,r)}const a=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,a),t.vertexAttribPointer(e.position,2,t.FLOAT,!1,0,0),t.bufferData(t.ARRAY_BUFFER,s,t.STATIC_DRAW);const o=t.createBuffer();return t.bindBuffer(t.ARRAY_BUFFER,o),t.vertexAttribIPointer(e.offset,2,t.UNSIGNED_BYTE,0,0),t.bufferData(t.ARRAY_BUFFER,n,t.STATIC_DRAW),{position:a,uv:o}}(t,this._attribs,this.width,this.height);Object.assign(this._buffers,e)}_createData(){const t=this._gl,e=this._attribs;this._buffers.fg&&t.deleteBuffer(this._buffers.fg),this._buffers.bg&&t.deleteBuffer(this._buffers.bg),this._buffers.glyph&&t.deleteBuffer(this._buffers.glyph),this._layers.length&&(this._layers.forEach((t=>t.detach())),this._layers.length=0);const i=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,i),t.vertexAttribIPointer(e.fg,1,t.UNSIGNED_SHORT,0,0);const h=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,h),t.vertexAttribIPointer(e.bg,1,t.UNSIGNED_SHORT,0,0);const r=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,r),t.vertexAttribIPointer(e.glyph,1,t.UNSIGNED_BYTE,0,0),Object.assign(this._buffers,{fg:i,bg:h,glyph:r})}_uploadGlyphs(){if(!this._glyphs.needsUpdate)return;const t=this._gl;t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this._texture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,this._glyphs.node),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),this._requestRender(),this._glyphs.needsUpdate=!1}draw(t,e,i,h,r){this.layer(0).draw(t,e,i,h,r)}render(){const t=this._gl;if(this._glyphs.needsUpdate)this._uploadGlyphs();else if(!this._renderRequested)return;this._renderRequested=!1,t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.clearColor(this.bg.r/100,this.bg.g/100,this.bg.b/100,this.bg.a/100),t.clear(t.COLOR_BUFFER_BIT),this._layers.forEach((e=>{e.empty||(t.uniform1i(this._uniforms.depth,e.depth),t.bindBuffer(t.ARRAY_BUFFER,this._buffers.fg),t.bufferData(t.ARRAY_BUFFER,e.fg,t.DYNAMIC_DRAW),t.bindBuffer(t.ARRAY_BUFFER,this._buffers.bg),t.bufferData(t.ARRAY_BUFFER,e.bg,t.DYNAMIC_DRAW),t.bindBuffer(t.ARRAY_BUFFER,this._buffers.glyph),t.bufferData(t.ARRAY_BUFFER,e.glyph,t.DYNAMIC_DRAW),t.drawArrays(t.TRIANGLES,0,this._width*this._height*E))}))}}const x=[0,0,1,0,0,1,0,1,1,0,1,1];class A{constructor(t={}){this.ch=t.ch||0,this.fg=u(t.fg),this.bg=u(t.bg)}_changed(){return this}copy(t){return this.ch=t.ch||-1,this.fg=f(t.fg),this.bg=f(t.bg),this._changed()}clone(){const t=new A;return t.copy(this),t}equals(t){return this.ch==t.ch&&this.fg.equals(t.fg)&&this.bg.equals(t.bg)}nullify(){return this.ch=-1,this.fg=b,this.bg=b,this._changed()}blackOut(){return this.ch=-1,this.fg=p,this.bg=p,this._changed()}draw(t=-1,e=-1,i=-1){return t&&-1!==t&&(this.ch=t),-1!==e&&null!==e&&(e=f(e),this.fg=this.fg.blend(e)),-1!==i&&null!==i&&(i=f(i),this.bg=this.bg.blend(i)),this._changed()}drawSprite(t,e){return t===this?this:(void 0===e&&(e=t.opacity),void 0===e&&(e=100),e<=0?void 0:(t.ch&&(this.ch=t.ch),(t.fg&&-1!==t.fg||0===t.fg)&&(this.fg=this.fg.mix(t.fg,e)),(t.bg&&-1!==t.bg||0===t.bg)&&(this.bg=this.bg.mix(t.bg,e)),this._changed()))}invert(){return[this.bg,this.fg]=[this.fg,this.bg],this._changed()}multiply(t,e=!0,i=!0){return t=f(t),e&&(this.fg=this.fg.multiply(t)),i&&(this.bg=this.bg.multiply(t)),this._changed()}scale(t,e=!0,i=!0){return e&&(this.fg=this.fg.scale(t)),i&&(this.bg=this.bg.scale(t)),this._changed()}mix(t,e=50,i=e){return t=f(t),e>0&&(this.fg=this.fg.mix(t,e)),i>0&&(this.bg=this.bg.mix(t,i)),this._changed()}add(t,e=100,i=e){return t=f(t),e>0&&(this.fg=this.fg.add(t,e)),i>0&&(this.bg=this.bg.add(t,i)),this._changed()}separate(){return[this.fg,this.bg]=c(this.fg,this.bg),this._changed()}bake(t=!1){return this.fg=this.fg.bake(t),this.bg=this.bg.bake(t),this._changed(),{ch:this.ch,fg:this.fg.toInt(),bg:this.bg.toInt()}}toString(){return`{ ch: ${this.ch}, fg: ${this.fg.toString()}, bg: ${this.bg.toString()} }`}}class v{constructor(t,e){this._data=[],this.resize(t,e)}get width(){return this._width}get height(){return this._height}resize(t,e){if(this._width!==t||this._height!==e){for(this._width=t,this._height=e;this._data.length<t*e;)this._data.push(new A);this._data.length=t*e}}get(t,e){let i=e*this.width+t;return this._data[i]}_toGlyph(t){return null==t?-1:t.charCodeAt(0)}draw(t,e,i=-1,h=-1,r=-1){let s=e*this.width+t;return this._data[s].draw(i,h,r),this}drawSprite(t,e,i){let h=i.ch?i.ch:void 0!==i.glyph?i.glyph:-1;return this.draw(t,e,h,i.fg,i.bg)}blackOut(t,e){return 0==arguments.length?this.fill(0,0,0):this.draw(t,e,0,0,0)}fill(t=0,e=4095,i=0){return this._data.forEach((h=>h.draw(t,e,i))),this}copy(t){return this._data.forEach(((e,i)=>{e.copy(t._data[i])})),this}}var T={random:Math.random.bind(Math)};class S{constructor(t,e,i,h=100){var r,s,n;t||(t=null),this.ch=t,this.fg=f(e),this.bg=f(i),this.opacity=(r=h,s=0,n=100,Math.min(n,Math.max(s,r)))}clone(){return new S(this.ch,this.fg,this.bg,this.opacity)}toString(){const t=[];return this.ch&&t.push("ch: "+this.ch),this.fg.isNull()||t.push("fg: "+this.fg.toString()),this.bg.isNull()||t.push("bg: "+this.bg.toString()),100!==this.opacity&&t.push("opacity: "+this.opacity),"{ "+t.join(", ")+" }"}}t.Buffer=class extends v{constructor(t){super(t.width,t.height),this._layer=t,t.copyTo(this)}_toGlyph(t){return this._layer.canvas.glyphs.forChar(t)}render(){return this._layer.copy(this),this}copyFromLayer(){return this._layer.copyTo(this),this}},t.Canvas=M,t.DataBuffer=v,t.Glyphs=h,t.Layer=w,t.Mixer=A,t.NotSupportedError=R,t.Sprite=S,t.color=y,t.configure=function(t={}){Object.assign(T,t)},t.withFont=function(t){return"string"==typeof t&&(t={font:t}),t.glyphs=h.fromFont(t),new M(t)},t.withImage=function(t){let e={};if("string"==typeof t)e.glyphs=h.fromImage(t);else if(t instanceof HTMLImageElement)e.glyphs=h.fromImage(t);else{if(!t.image)throw new Error("You must supply the image.");Object.assign(e,t),e.glyphs=h.fromImage(t.image)}return new M(e)},Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=gw-canvas.min.js.map