modern-canvas 0.0.2 → 0.0.3

package/README.md

@@ -28,21 +28,51 @@ npm i modern-canvas
 ## 🦄 Usage
 
 ```ts
-import { createCanvas, plugins } from 'modern-canvas'
+import { createApp, plugins } from 'modern-canvas'
 
-const canvas = createCanvas({
+const app = createApp({
   view: document.querySelector('canvas'),
   children: [
-    { x: 0, y: 0, width: 30, height: 30, rotation: 30, image: '/example.jpg' },
-    { x: 30, y: 30, width: 200, height: 200, image: '/example.png' },
-    { x: 60, y: 60, width: 120, height: 120, rotation: 50, image: '/example.jpg' },
-    { x: 200, y: 200, width: 100, height: 100, image: '/example.png' },
-    { x: 30, y: 30, width: 100, height: 100, rotation: 40, text: 'example' },
+    {
+      type: 'image',
+      style: {
+        left: 0,
+        top: 0,
+        width: 130,
+        height: 130,
+        rotation: 30,
+      },
+      src: '/example.jpg',
+    },
+    {
+      type: 'text',
+      style: {
+        left: 60,
+        top: 60,
+        width: 240,
+        height: 240,
+        rotation: 0,
+        fontSize: 40,
+        color: 'red',
+      },
+      content: 'TEXT',
+    },
+    {
+      type: 'video',
+      style: {
+        left: 60,
+        top: 60,
+        width: 30,
+        height: 30,
+        rotation: 30,
+      },
+      src: 'example.mp4',
+    },
   ],
   plugins,
 })
 
-await canvas.load()
+await app.load()
 
-canvas.startRenderLoop()
+app.start()
 ```

package/dist/index.cjs

@@ -1,37 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function v(o){return typeof o=="function"?o():o}const U=v(()=>({name:"canvas:base",register(o){o.registerShape({name:"rectangle",type:"2d",mode:"triangles",data:new Float32Array([-1,1,-1,-1,1,-1,1,-1,1,1,-1,1])}),o.registerMaterial({name:"baseMaterial",vertexShader:`attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  gl_Position = vec4(aPosition, 0, 1);
-}`,fragmentShader:`uniform sampler2D uSampler;
-varying vec2 vTextureCoord;
-void main() {
-  gl_FragColor = texture2D(uSampler, vTextureCoord);
-}`})}})),D=v(()=>({name:"canvas:node-image",register(o){o.registerNodeRenderer({name:"image",include:r=>Boolean(r.image),shape:"rectangle",material:"baseMaterial",update(r){if(!o.resources.has(r.image)){const e=new Image;e.src=r.image,o.registerResource({name:r.image,data:e})}return{uSampler:r.image}}})}})),N=v(()=>{const o=document.createElement("canvas").getContext("2d");return{name:"canvas:node-text",register(r){r.registerNodeRenderer({name:"text",include:e=>Boolean(e.text),shape:"rectangle",material:"baseMaterial",update(e){const{width:a=100,height:t=100,text:c}=e;return r.resources.has(c)||(o.canvas.width=a,o.canvas.height=t,o.font="20px monospace",o.textAlign="center",o.textBaseline="middle",o.fillStyle="black",o.clearRect(0,0,o.canvas.width,o.canvas.height),o.fillText(c,a/2,t/2),r.registerResource({name:c,data:o.canvas})),{uSampler:e.text}}})}}}),F=v(()=>({name:"canvas:fade",register(o){o.registerNodeRenderer({name:"fade",include:r=>Boolean(r.fade),shape:"rectangle",material:{vertexShader:`attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  gl_Position = vec4(aPosition, 0, 1);
-}`,fragmentShader:`uniform sampler2D uSampler;
-varying vec2 vTextureCoord;
-uniform float uTime;
-float linear(float time, float offset, float change, float duration) {
-  return change * (time / duration) + offset;
-}
-void main(void) {
-  vec4 color = texture2D(uSampler, vTextureCoord);
-  gl_FragColor = vec4(color.rgb, linear(uTime, 0.0, 1.0, 3.0));
-}`},update:(r,e)=>({uTime:e})})}}));class _ extends Float32Array{static identity(){return new _([1,0,0,0,1,0,0,0,1])}static translation(r,e){return new _([1,0,0,0,1,0,r,e,1])}static rotation(r){const e=Math.cos(r),a=Math.sin(r);return new _([e,-a,0,a,e,0,0,0,1])}static scaling(r,e){return new _([r,0,0,0,e,0,0,0,1])}multiply(r){const e=this[0],a=this[1],t=this[2],c=this[3],u=this[4],i=this[5],l=this[6],s=this[7],n=this[8],f=r[0],R=r[1],m=r[2],T=r[3],d=r[4],E=r[5],g=r[6],A=r[7],x=r[8];return this[0]=f*e+R*c+m*l,this[1]=f*a+R*u+m*s,this[2]=f*t+R*i+m*n,this[3]=T*e+d*c+E*l,this[4]=T*a+d*u+E*s,this[5]=T*t+d*i+E*n,this[6]=g*e+A*c+x*l,this[7]=g*a+A*u+x*s,this[8]=g*t+A*i+x*n,this}}const L=v(()=>{const o={x:0,y:0};return{name:"canvas:selector2d",register(r){const{view:e}=r;e.addEventListener("mousemove",a=>{const t=e.getBoundingClientRect();o.x=a.clientX-t.left,o.y=a.clientY-t.top}),e.addEventListener("click",()=>{var t;const a=r.get("hovered");a&&((t=r.get("onSelect"))==null||t(a))}),r.registerNodeRenderer({name:"selector2d",include:()=>!1,shape:"rectangle",material:{vertexShader:`attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-uniform mat3 uModelMatrix;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  vec2 position = aPosition;
-  gl_Position = vec4((uModelMatrix * vec3(position, 1)).xy, 0, 1);
-}`,fragmentShader:`uniform vec4 uColor;
-void main() {
-  gl_FragColor = uColor;
-}`},update:(a,t)=>{const{width:c,height:u}=r;let{x:i=0,y:l=0,width:s=c,height:n=u}=a;const{rotation:f=0}=a;i=i/c,l=l/u,s=s/c,n=n/u;const R=f/180*Math.PI;return{uModelMatrix:_.identity().multiply(_.translation(2*i-(1-s),1-n-2*l)).multiply(_.scaling(s,n)).multiply(_.rotation(R)),uColor:[(t>>>16&255)/255,(t>>>8&255)/255,(t&255)/255,1]}}})},beforeRender(r){var R,m;const{width:e,height:a,gl:t,children:c,nodeRenderers:u}=r;let i=0;const l={};t.bindFramebuffer(t.FRAMEBUFFER,r.glFramebuffers[0].buffer),t.viewport(0,0,e,a),t.clear(t.COLOR_BUFFER_BIT|t.DEPTH_BUFFER_BIT),t.enable(t.DEPTH_TEST),r.forEachNode((T,d)=>{var g;const E=i++;l[E]=d,(g=u.get("selector2d"))==null||g.render(T,E)});const s=new Uint8Array(4);t.readPixels(o.x,a-o.y,1,1,t.RGBA,t.UNSIGNED_BYTE,s);const n=l[(s[0]<<16)+(s[1]<<8)+s[2]];if(((R=r.get("hoveredPath"))==null?void 0:R.join(""))===(n==null?void 0:n.join("")))return;let f;n&&(f={children:c},n.forEach(T=>{var d;return f=(d=f.children)==null?void 0:d[T]})),r.set("hovered",f),r.set("hoveredPath",n),f&&((m=r.get("onHover"))==null||m(f,n))}}}),S=v(()=>({name:"canvas:transform2d",register(o){o.registerNodeRenderer({name:"transform2d",shape:"rectangle",material:{vertexShader:`attribute vec2 aPosition;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function w(o){return typeof o=="function"?o():o}class x extends Float32Array{static identity(){return new x([1,0,0,0,1,0,0,0,1])}static translation(r,c){return new x([1,0,0,0,1,0,r,c,1])}static rotation(r){const c=Math.cos(r),t=Math.sin(r);return new x([c,-t,0,t,c,0,0,0,1])}static scaling(r,c){return new x([r,0,0,0,c,0,0,0,1])}multiply(r){const c=this[0],t=this[1],n=this[2],d=this[3],m=this[4],a=this[5],s=this[6],e=this[7],i=this[8],u=r[0],f=r[1],h=r[2],E=r[3],T=r[4],l=r[5],g=r[6],R=r[7],A=r[8];return this[0]=u*c+f*d+h*s,this[1]=u*t+f*m+h*e,this[2]=u*n+f*a+h*i,this[3]=E*c+T*d+l*s,this[4]=E*t+T*m+l*e,this[5]=E*n+T*a+l*i,this[6]=g*c+R*d+A*s,this[7]=g*t+R*m+A*e,this[8]=g*n+R*a+A*i,this}}function L(o){const r=[];for(let c=o.length,t=0;t<c;t++){const n=o[t],d=~~(n/16);for(let m=0;m<=d;m++)m in r||(r[m]=0);r[d]|=1<<n%16}return r}function B(o){const r=document.createElement("video");return r.playsInline=!0,r.muted=!0,r.loop=!0,r.src=o,r}function O(o){const r=new Image;return r.decoding="sync",r.loading="eager",r.crossOrigin="anonymous",r.src=o,r}let b;const y=new Map;function X(){var o;return b||(b=document.createElement("iframe"),b.id=`__SANDBOX__${Math.random()}`,b.width="0",b.height="0",b.style.visibility="hidden",b.style.position="fixed",document.body.appendChild(b),(o=b.contentWindow)==null||o.document.write('<!DOCTYPE html><meta charset="UTF-8"><title></title><body>')),b}function P(o){switch(!0){case(o.startsWith("#")&&o.length===7):return o=o.substring(1),[parseInt(`${o[0]}${o[1]}`,16)/255,parseInt(`${o[2]}${o[3]}`,16)/255,parseInt(`${o[4]}${o[5]}`,16)/255,1];case(o.startsWith("#")&&o.length===9):return o=o.substring(1),[parseInt(`${o[0]}${o[1]}`,16)/255,parseInt(`${o[2]}${o[3]}`,16)/255,parseInt(`${o[4]}${o[5]}`,16)/255,parseInt(`${o[6]}${o[7]}`,16)/255];case o.startsWith("rgb("):return[...o.replace(/rgb\((.+?)\)/,"$1").split(",").slice(0,3).map(r=>Number(r.trim())/255),1];case o.startsWith("rgba("):return o.replace(/rgba\((.+?)\)/,"$1").split(",").slice(0,4).map(r=>Number(r.trim())/255)}}function G(o,r=[0,0,0,0]){if(y.has(o))return y.get(o);let c=P(o);if(!c){const t=X();if(t){const n=t.contentWindow;if(n){const d=n.document,m=d.createElement("div");d.body.appendChild(m),m.textContent=" ",m.style.color=o,c=P(n.getComputedStyle(m).color),d.body.removeChild(m)}}}return c&&y.set(o,c),c??r}const $=w({name:"renderer2d",register(o){o.registerShape("rectangle",{type:"2d",mode:"triangles",buffer:new Float32Array([-1,1,-1,-1,1,-1,1,-1,1,1,-1,1])}),o.registerMaterial("material2d",{vertexShader:`attribute vec2 aPosition;
 varying vec2 vTextureCoord;
 uniform mat3 uModelMatrix;
 void main() {
@@ -40,9 +7,11 @@ void main() {
   gl_Position = vec4((uModelMatrix * vec3(position, 1)).xy, 0, 1);
 }`,fragmentShader:`uniform sampler2D uSampler;
 varying vec2 vTextureCoord;
+uniform vec4 uBackgroundColor;
 void main() {
-  gl_FragColor = texture2D(uSampler, vTextureCoord);
-}`},update:r=>{const{width:e,height:a}=o;let{x:t=0,y:c=0,width:u=e,height:i=a}=r;const{rotation:l=0}=r;t=t/e,c=c/a,u=u/e,i=i/a;const s=l/180*Math.PI;return{uModelMatrix:_.identity().multiply(_.translation(2*t-(1-u),1-i-2*c)).multiply(_.scaling(u,i)).multiply(_.rotation(s))}}})}})),C=[U,D,N,F,S,L];function p(o,r=0){const{gl:e,width:a,height:t,beforeRenderPlugins:c,afterRenderPlugins:u,nodeRenderers:i,forEachNode:l}=o,s=Array.from(i.values());c.forEach(n=>{var f;return(f=n.beforeRender)==null?void 0:f.call(n,o)}),e.viewport(0,0,a,t),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),l((n,f)=>{e.bindFramebuffer(e.FRAMEBUFFER,null),e.bindTexture(e.TEXTURE_2D,null);const R=s.filter(m=>!m.include&&!m.exclude||m.include&&m.include(n,f)||m.exclude&&!m.exclude(n,f));for(let m=R.length,T=0;T<m;T++){let d=null;T<m-1&&(d=o.glFramebuffers[T%2]),e.bindFramebuffer(e.FRAMEBUFFER,(d==null?void 0:d.buffer)??null),d&&e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),R[T].render(n,r),d&&e.bindTexture(e.TEXTURE_2D,d.texture)}}),u.forEach(n=>{var f;return(f=n.afterRender)==null?void 0:f.call(n,o)}),e.flush()}function M(){const o=new Map,r=new Map;function e(i){if(o.has(i))return o.get(i);if(r.has(i)){const{value:l,shared:s}=r.get(i),n=l();return s&&t(i,n),n}}function a(i){return o.has(i)||r.has(i)}function t(i,l){o.set(i,l)}function c(i,l){u(i,l,!0)}function u(i,l,s=!1){r.set(i,{value:l,shared:s})}return new Proxy({instances:o,bindings:r,get:e,has:a,set:t,bind:u,singleton:c},{get(i,l,s){return typeof l=="symbol"||l in i?Reflect.get(i,l,s):i.get(l)},has(i,l){return typeof l=="symbol"||l in i?Reflect.has(i,l):i.has(l)},set(i,l,s,n){return typeof l=="symbol"||l in i?Reflect.set(i,l,s,n):(i.set(l,s),!0)}})}function I(o,r){const{gl:e,materials:a,glSlTypes:t}=o,{name:c,vertexShader:u,fragmentShader:i,uniforms:l}=r;if(a.has(c))return;const s=[{type:e.VERTEX_SHADER,source:u},{type:e.FRAGMENT_SHADER,source:i.includes("precision")?i:`precision mediump float;
-${i}`}].map(({type:T,source:d})=>{const E=e.createShader(T);if(!E)throw new Error("failed to create shader");if(e.shaderSource(E,d),e.compileShader(E),!e.getShaderParameter(E,e.COMPILE_STATUS))throw new Error(`failed to compiling shader:
-${d}
-${e.getShaderInfoLog(E)}`);return E}),n=e.createProgram();if(!n)throw new Error("failed to create program");if(s.forEach(T=>e.attachShader(n,T)),e.linkProgram(n),s.forEach(T=>e.deleteShader(T)),!e.getProgramParameter(n,e.LINK_STATUS))throw new Error(`failed to initing program: ${e.getProgramInfoLog(n)}`);const f={};for(let T=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES),d=0;d<T;d++){const E=e.getActiveAttrib(n,d);if(!E)continue;const g=E.name.replace(/\[.*?]$/,"");f[g]={type:t[E.type],isArray:g!==E.name,location:e.getAttribLocation(n,g)}}const R={};for(let T=e.getProgramParameter(n,e.ACTIVE_UNIFORMS),d=0;d<T;d++){const E=e.getActiveUniform(n,d);if(!E)continue;const g=E.name.replace(/\[.*?]$/,"");R[g]={type:t[E.type],isArray:g!==E.name,location:e.getUniformLocation(n,g)}}const m={...r,program:n,attributes:f,uniforms:R,setAttributes(T){for(const[d,E]of Object.entries(T)){const g=f[d];if(!g)continue;const{type:A,isArray:x,location:b}=g;if(E instanceof WebGLBuffer){e.bindBuffer(e.ARRAY_BUFFER,E);const h=e.getAttribLocation(n,d);switch(A){case"vec2":e.vertexAttribPointer(h,2,e.FLOAT,!1,0,0),e.enableVertexAttribArray(h);break;case"vec3":e.vertexAttribPointer(h,3,e.FLOAT,!1,0,0),e.enableVertexAttribArray(h);break}}else switch(A){case"float":x?e.vertexAttrib1fv(b,E):e.vertexAttrib1f(b,E);break;case"vec2":e.vertexAttrib2fv(b,E);break;case"vec3":e.vertexAttrib3fv(b,E);break;case"vec4":e.vertexAttrib4fv(b,E);break}}},setUniforms(T){var d;for(const[E,g]of Object.entries(T)){const A=R[E];if(!A)continue;const{type:x,isArray:b,location:h}=A;switch(x){case"float":b?e.uniform1fv(h,g):e.uniform1f(h,g);break;case"bool":case"int":b?e.uniform1iv(h,g):e.uniform1i(h,g);break;case"vec2":e.uniform2fv(h,g);break;case"vec3":e.uniform3fv(h,g);break;case"vec4":e.uniform4fv(h,g);break;case"mat2":e.uniformMatrix2fv(h,!1,g);break;case"mat3":e.uniformMatrix3fv(h,!1,g);break;case"mat4":e.uniformMatrix4fv(h,!1,g);break;case"sampler2D":e.bindTexture(e.TEXTURE_2D,((d=o.resources.get(g))==null?void 0:d.texture)??o.glDefaultTexture),e.uniform1i(h,0);break}}}};l&&m.setUniforms(l),a.set(c,m)}function y(o,r){o.singleton("gl",()=>{const{view:e}=o,a=e.getContext("webgl",r)||e.getContext("experimental-webgl",r);if(!a)throw new Error("failed to getContext for webgl");return a.pixelStorei(a.UNPACK_FLIP_Y_WEBGL,!0),a.pixelStorei(a.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),a.clearColor(0,0,0,0),a.enable(a.DEPTH_TEST),a.enable(a.CULL_FACE),a.enable(a.BLEND),a.blendFunc(a.SRC_ALPHA,a.ONE_MINUS_SRC_ALPHA),a}),o.singleton("glDefaultTexture",()=>{const{gl:e,width:a,height:t}=o,c=e.createTexture();return e.bindTexture(e.TEXTURE_2D,c),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,a,t,0,e.RGBA,e.UNSIGNED_BYTE,null),c}),o.singleton("glFramebuffers",()=>{const{gl:e}=o;return Array.from({length:2},()=>{const a=e.createTexture(),t=e.createFramebuffer(),c=e.createRenderbuffer();function u(){const{width:i,height:l}=o;e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,i,l,0,e.RGBA,e.UNSIGNED_BYTE,null),e.bindRenderbuffer(e.RENDERBUFFER,c),e.renderbufferStorage(e.RENDERBUFFER,e.DEPTH_COMPONENT16,i,l)}return u(),e.bindTexture(e.TEXTURE_2D,a),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindFramebuffer(e.FRAMEBUFFER,t),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,a,0),e.bindRenderbuffer(e.RENDERBUFFER,c),e.framebufferRenderbuffer(e.FRAMEBUFFER,e.DEPTH_ATTACHMENT,e.RENDERBUFFER,c),{buffer:t,depthBuffer:c,texture:a,resize:u}})}),o.singleton("glDrawModes",()=>{const{gl:e}=o;return{points:e.POINTS,linear:e.LINEAR,triangles:e.TRIANGLES,triangleStrip:e.TRIANGLE_STRIP,triangleFan:e.TRIANGLE_FAN}}),o.singleton("glSlTypes",()=>{const e=o.gl;return{[e.FLOAT]:"float",[e.FLOAT_VEC2]:"vec2",[e.FLOAT_VEC3]:"vec3",[e.FLOAT_VEC4]:"vec4",[e.INT]:"int",[e.INT_VEC2]:"ivec2",[e.INT_VEC3]:"ivec3",[e.INT_VEC4]:"ivec4",[e.UNSIGNED_INT]:"uint",[e.UNSIGNED_INT_VEC2]:"uvec2",[e.UNSIGNED_INT_VEC3]:"uvec3",[e.UNSIGNED_INT_VEC4]:"uvec4",[e.BOOL]:"bool",[e.BOOL_VEC2]:"bvec2",[e.BOOL_VEC3]:"bvec3",[e.BOOL_VEC4]:"bvec4",[e.FLOAT_MAT2]:"mat2",[e.FLOAT_MAT3]:"mat3",[e.FLOAT_MAT4]:"mat4",[e.SAMPLER_2D]:"sampler2D",[e.INT_SAMPLER_2D]:"sampler2D",[e.UNSIGNED_INT_SAMPLER_2D]:"sampler2D",[e.SAMPLER_CUBE]:"samplerCube",[e.INT_SAMPLER_CUBE]:"samplerCube",[e.UNSIGNED_INT_SAMPLER_CUBE]:"samplerCube",[e.SAMPLER_2D_ARRAY]:"sampler2DArray",[e.INT_SAMPLER_2D_ARRAY]:"sampler2DArray",[e.UNSIGNED_INT_SAMPLER_2D_ARRAY]:"sampler2DArray"}}),o.singleton("glExtensions",()=>({loseContext:o.gl.getExtension("WEBGL_lose_context")}))}function B(o,r){const{gl:e,shapes:a,glDrawModes:t}=o,{name:c,type:u="2d",mode:i="triangles",data:l=new Float32Array([])}=r,s=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,s),e.bufferData(e.ARRAY_BUFFER,l,e.STATIC_DRAW),a.set(c,{mode:t[i],count:l.byteLength/l.BYTES_PER_ELEMENT/(u==="2d"?2:3),buffer:s})}function w(o,r){const{gl:e,shapes:a,materials:t,nodeRenderers:c}=o,{name:u,shape:i,material:l}=r,s=typeof i=="string"?i:`${u}-shape`;typeof i!="string"&&o.registerShape({...i,name:s});const n=typeof l=="string"?l:`${u}-material`;typeof l!="string"&&o.registerMaterial({...l,name:n});const f=a.get(s),R=t.get(n);if(!f||!R)return;const{buffer:m}=f;R.setAttributes({aPosition:m}),c.set(u,{...r,shape:s,material:n,render:(T,d)=>{var P;const E=a.get(s),g=t.get(n);if(!E||!g)return;const{program:A}=g,{mode:x,count:b}=E;e.useProgram(A);const h=(P=r.update)==null?void 0:P.call(r,T,d);h&&g.setUniforms(h),e.drawArrays(x,0,b)}})}function O(o,r){const{children:e}=o;function a(t,c=[]){for(let u=t.length-1;u>=0;u--){const i=[...c,u],l=t[u];a(l.children??[],i),r(l,i)}}a(e)}function X(o,r){const{gl:e,resources:a}=o,{name:t,data:c}=r,u={loading:!0,texture:null};function i(){u.texture=e.createTexture(),u.texture&&(e.bindTexture(e.TEXTURE_2D,u.texture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,c)),u.loading=!1}c instanceof HTMLImageElement?c.addEventListener("load",i,{once:!0}):i(),a.set(t,u)}function G(o={}){var i,l;const{view:r=document.createElement("canvas"),children:e=[],plugins:a=[]}=o,t=M();t.set("view",r),y(t,o),t.bind("width",()=>t.gl.drawingBufferWidth),t.bind("height",()=>t.gl.drawingBufferHeight),t.singleton("plugins",()=>{const s=new Map;return a.forEach(n=>{var f;(f=n.register)==null||f.call(n,t),s.set(n.name,n)}),s}),t.singleton("beforeRenderPlugins",()=>Array.from(t.plugins.values()).filter(s=>"beforeRender"in s)),t.singleton("afterRenderPlugins",()=>Array.from(t.plugins.values()).filter(s=>"afterRender"in s)),t.set("children",e),t.set("shapes",new Map),t.set("registerShape",s=>B(t,s)),t.set("materials",new Map),t.set("registerMaterial",s=>I(t,s)),t.set("resources",new Map),t.set("registerResource",s=>X(t,s)),t.set("nodeRenderers",new Map),t.set("registerNodeRenderer",s=>w(t,s)),t.set("forEachNode",s=>O(t,s)),t.set("load",async()=>{t.get("plugins");const s=Array.from(t.nodeRenderers.values());for(t.forEachNode((n,f)=>{s.filter(m=>!m.include&&!m.exclude||m.include&&m.include(n,f)||m.exclude&&!m.exclude(n,f)).forEach(m=>{var T;return(T=m.update)==null?void 0:T.call(m,n,0)})});Array.from(t.resources.values()).some(n=>n.loading);)await new Promise(n=>setTimeout(n,100));return!0}),t.set("render",s=>p(t,s)),t.set("startRenderLoop",()=>{let s=0,n=0;f(0);function f(R){requestAnimationFrame(f),p(t,n),R*=.001,n+=R-s,s=R}});function c(s){s.preventDefault(),setTimeout(()=>{var n;t.gl.isContextLost()&&((n=t.glExtensions.loseContext)==null||n.restoreContext())},0)}function u(){}return(i=r.addEventListener)==null||i.call(r,"webglcontextlost",c,!1),(l=r.addEventListener)==null||l.call(r,"webglcontextrestored",u,!1),t.set("destroy",()=>{var s,n,f;(s=r.removeEventListener)==null||s.call(r,"webglcontextlost",c),(n=r.removeEventListener)==null||n.call(r,"webglcontextrestored",u),t.gl.useProgram(null),(f=t.glExtensions.loseContext)==null||f.loseContext()}),t}exports.basePlugin=U;exports.createCanvas=G;exports.fadePlugin=F;exports.nodeImagePlugin=D;exports.nodeTextPlugin=N;exports.plugins=C;exports.selector2dPlugin=L;exports.transform2dPlugin=S;
+  vec4 color = texture2D(uSampler, vTextureCoord);
+  gl_FragColor = mix(uBackgroundColor, color, color.a);
+}`});const r=document.createElement("canvas").getContext("2d");o.registerSystem({update(c=0){var d;const{textures:t}=o,n=o.query("type");for(let m=n.length,a=0;a<m;a++){const s=n[a],{type:e}=s;if(e==="image"&&s.src)t.has(s.id)||o.registerTexture(s.id,O(s.src));else if(e==="video")if(!t.has(s.id))o.registerTexture(s.id,B(s.src));else{const i=(d=t.get(s.id))==null?void 0:d.source;i.duration&&(i.currentTime=c%i.duration)}else if(e==="text"){const{width:i,height:u,color:f="black",fontSize:h=14,fontWeight:E=400,direction:T="inherit",fontFamily:l="monospace",fontKerning:g="normal",textAlign:R="center",textBaseline:A="middle"}=s.style??{};if(!t.has(s.id)){const _=`${E} ${h}px ${l}`;r.font=_;const p=r.measureText(s.content),I=u??p.actualBoundingBoxAscent+p.actualBoundingBoxDescent,v=i??p.width;s.style.width=v,s.style.height=I,r.canvas.width=v,r.canvas.height=I,r.fillStyle=f,r.direction=T,r.font=_,r.fontKerning=g,r.textAlign=R,r.textBaseline=A,r.clearRect(0,0,v,I),r.fillText(s.content,v/2,I/2),o.registerTexture(s.id,r.canvas)}}}}}),o.registerSystem({update(){var m;const{width:c,height:t,textures:n}=o,d=o.query();for(let a=d.length,s=0;s<a;s++){const e=d[s],{shape:i="rectangle",material:u="material2d",filters:f=[]}=e,{left:h=0,top:E=0,width:T=0,height:l=0,rotation:g=0,background:R}=e.style??{},A=h/c,_=E/t,p=T/c,I=l/t,v=g/180*Math.PI,D=R!=null&&R.color?G(R.color):[0,0,0,0];o.renderNode({shape:i,material:u,uniforms:{uSampler:(m=n.get(e.id))==null?void 0:m.value,uBackgroundColor:D,uModelMatrix:x.identity().multiply(x.translation(2*A-(1-p),1-I-2*_)).multiply(x.scaling(p,I)).multiply(x.rotation(v))},extraRenderers:f==null?void 0:f.map(N=>{const{shape:C,material:M,type:S,...F}=N;return{shape:C??i,material:M??S??u,uniforms:F}})})}}})}});function W(o,r){const{width:c,height:t,context:n,shapes:d,materials:m,framebuffers:a,lastState:s}=o,{extraRenderers:e=[]}=r,i=[r,...e].filter(u=>d.has(u.shape)&&m.has(u.material));for(let u=i.length,f=0;f<u;f++){const h=i[f],{shape:E,material:T,uniforms:l}=h,g=d.get(E),R=m.get(T);(s==null?void 0:s.material)!==T&&(s==null?void 0:s.shape)!==E&&R.setupAttributes({aPosition:g.buffer});const A=f<u-1?a[f%2]:null;n.bindFramebuffer(n.FRAMEBUFFER,(A==null?void 0:A.buffer)??null),n.viewport(0,0,c,t),A&&n.clear(n.COLOR_BUFFER_BIT|n.DEPTH_BUFFER_BIT),(s==null?void 0:s.material)!==T&&n.useProgram(R.program),l&&R.setupUniforms(l),n.drawArrays(g.mode,0,g.count),A&&n.bindTexture(n.TEXTURE_2D,A.texture),o.lastState={material:T,shape:E}}}function U(o,r=0){var d,m;const{context:c,systems:t,framebuffers:n}=o;n.forEach(a=>a.resize()),c.clear(c.COLOR_BUFFER_BIT|c.DEPTH_BUFFER_BIT);for(let a=t.length,s=0;s<a;s++)(m=(d=t[s]).update)==null||m.call(d,r);c.flush()}function V(){const o=new Map,r=new Map;function c(a){if(o.has(a))return o.get(a);if(r.has(a)){const{value:s,shared:e}=r.get(a),i=s();return e&&n(a,i),i}}function t(a){return o.has(a)||r.has(a)}function n(a,s){o.set(a,s)}function d(a,s){m(a,s,!0)}function m(a,s,e=!1){r.set(a,{value:s,shared:e})}return new Proxy({instances:o,bindings:r,get:c,has:t,set:n,bind:m,singleton:d},{get(a,s,e){return typeof s=="symbol"||s in a?Reflect.get(a,s,e):a.get(s)},has(a,s){return typeof s=="symbol"||s in a?Reflect.has(a,s):a.has(s)},set(a,s,e,i){return typeof s=="symbol"||s in a?Reflect.set(a,s,e,i):(a.set(s,e),!0)}})}function H(o,r,c){const{context:t,materials:n,slTypes:d}=o,{vertexShader:m,fragmentShader:a,uniforms:s}=c;if(n.has(r))return;const e=[{type:t.VERTEX_SHADER,source:m},{type:t.FRAGMENT_SHADER,source:a.includes("precision")?a:`precision mediump float;
+${a}`}].map(({type:E,source:T})=>{const l=t.createShader(E);if(!l)throw new Error("failed to create shader");if(t.shaderSource(l,T),t.compileShader(l),!t.getShaderParameter(l,t.COMPILE_STATUS))throw new Error(`failed to compiling shader:
+${T}
+${t.getShaderInfoLog(l)}`);return l}),i=t.createProgram();if(!i)throw new Error("failed to create program");if(e.forEach(E=>t.attachShader(i,E)),t.linkProgram(i),e.forEach(E=>t.deleteShader(E)),!t.getProgramParameter(i,t.LINK_STATUS))throw new Error(`failed to initing program: ${t.getProgramInfoLog(i)}`);const u={};for(let E=t.getProgramParameter(i,t.ACTIVE_ATTRIBUTES),T=0;T<E;T++){const l=t.getActiveAttrib(i,T);if(!l)continue;const g=l.name.replace(/\[.*?]$/,"");u[g]={type:d[l.type],isArray:g!==l.name,location:t.getAttribLocation(i,g)}}const f={};for(let E=t.getProgramParameter(i,t.ACTIVE_UNIFORMS),T=0;T<E;T++){const l=t.getActiveUniform(i,T);if(!l)continue;const g=l.name.replace(/\[.*?]$/,"");f[g]={type:d[l.type],isArray:g!==l.name,location:t.getUniformLocation(i,g)}}const h={...c,program:i,attributes:u,uniforms:f,setupAttributes(E){for(const[T,l]of Object.entries(E)){const g=u[T];if(!g)continue;const{type:R,isArray:A,location:_}=g;if(l instanceof WebGLBuffer){t.bindBuffer(t.ARRAY_BUFFER,l);const p=t.getAttribLocation(i,T);switch(R){case"vec2":t.vertexAttribPointer(p,2,t.FLOAT,!1,0,0),t.enableVertexAttribArray(p);break;case"vec3":t.vertexAttribPointer(p,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(p);break}}else switch(R){case"float":A?t.vertexAttrib1fv(_,l):t.vertexAttrib1f(_,l);break;case"vec2":t.vertexAttrib2fv(_,l);break;case"vec3":t.vertexAttrib3fv(_,l);break;case"vec4":t.vertexAttrib4fv(_,l);break}}},setupUniforms(E){for(const[T,l]of Object.entries(E)){const g=f[T];if(!g)continue;const{type:R,isArray:A,location:_}=g;switch(R){case"float":A?t.uniform1fv(_,l):t.uniform1f(_,l);break;case"bool":case"int":A?t.uniform1iv(_,l):t.uniform1i(_,l);break;case"vec2":t.uniform2fv(_,l);break;case"vec3":t.uniform3fv(_,l);break;case"vec4":t.uniform4fv(_,l);break;case"mat2":t.uniformMatrix2fv(_,!1,l);break;case"mat3":t.uniformMatrix3fv(_,!1,l);break;case"mat4":t.uniformMatrix4fv(_,!1,l);break;case"sampler2D":t.bindTexture(t.TEXTURE_2D,l??o.defaultTexture),t.uniform1i(_,0);break}}}};s&&h.setupUniforms(s),n.set(r,h)}function Y(o,r,c){const{context:t,shapes:n,drawModes:d}=o,{type:m="2d",mode:a="triangles",buffer:s=new Float32Array([])}=c,e=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,e),t.bufferData(t.ARRAY_BUFFER,s,t.STATIC_DRAW),n.set(r,{mode:d[a],count:s.byteLength/s.BYTES_PER_ELEMENT/(m==="2d"?2:3),buffer:e})}function k(o){const{entities:r,children:c,components:t,archetypes:n}=o;r.clear(),t.clear(),n.clear();const d=function(){let e=0;return()=>++e}(),m=function(){let e=0;return()=>++e}();function a(e,i){var R,A;e.id||(e.id=d());const u=e.id,f=[];for(const _ in e){let p=t.get(_);p||(p=m(),t.set(_,p)),f.push(p)}const h=L(f),E=h.map(_=>String.fromCharCode(_)).join(""),T=r.get(u);T&&((A=(R=n.get(T.archetypeId))==null?void 0:R.entityIds)==null||A.delete(u));const l=n.get(E);let g=l==null?void 0:l.entityIds;l||(g=new Set,n.set(E,{entityIds:g,codePoints:h})),g.add(u),r.set(u,{path:i,archetypeId:E})}function s(e,i){for(let u=e.length,f=0;f<u;f++){const h=e[f],E=[...i,f];a(h,E),h.children&&s(h.children,E)}}s(c,[])}function q(o,r){const{entities:c,components:t,children:n,archetypes:d}=o;if(!r)return n.flatMap(function i(u){var f;return[u,(f=u.children)==null?void 0:f.flatMap(i)].filter(Boolean)});const m=typeof r=="string"?[r]:r,a=[];for(let i=m.length,u=0;u<i;u++){const f=t.get(m[u]);f&&a.push(f)}const s=L(a),e=[];for(const[,{entityIds:i,codePoints:u}]of d.entries())if(u.some(f=>s.some(h=>h&f)))for(const[f]of i.entries()){const{path:h}=c.get(f);if(!h||!h.length)continue;let E=n[h[0]];for(let T=h.length,l=1;l<T;l++)E=E[l];e.push(E)}return e}function K(o,r,c){const{context:t,textures:n}=o,d={loading:!0,value:null,source:c};return n.set(r,d),new Promise(m=>{c instanceof HTMLImageElement?c.addEventListener("load",a,{once:!0}):c instanceof HTMLVideoElement?(c.addEventListener("canplay",a,{once:!0}),c.addEventListener("timeupdate",()=>{t.bindTexture(t.TEXTURE_2D,d.value),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,c)})):a();function a(){d.value=t.createTexture(),d.value&&(t.bindTexture(t.TEXTURE_2D,d.value),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,c)),d.loading=!1,c instanceof HTMLVideoElement&&(c.currentTime=.01),m()}})}function j(o,r){const{systems:c}=o;c.push(r)}function z(o={}){var a,s;const{view:r=document.createElement("canvas"),children:c=[],plugins:t=[]}=o,n=V();n.view=r,n.singleton("context",()=>{const{view:e}=n,i=e.getContext("webgl",o)||e.getContext("experimental-webgl",o);if(!i)throw new Error("failed to getContext for webgl");const u=i.drawingBufferWidth,f=i.drawingBufferHeight;return i.viewport(0,0,u,f),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!0),i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),i.clearColor(0,0,0,0),i.enable(i.DEPTH_TEST),i.enable(i.CULL_FACE),i.enable(i.BLEND),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.depthMask(!1),i}),n.singleton("defaultTexture",()=>{const{context:e,width:i,height:u}=n,f=e.createTexture();return e.bindTexture(e.TEXTURE_2D,f),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,i,u,0,e.RGBA,e.UNSIGNED_BYTE,null),f}),n.singleton("framebuffers",()=>{const{context:e}=n;return Array.from({length:2},()=>{const i=e.createTexture(),u=e.createFramebuffer(),f=e.createRenderbuffer();function h(){const{width:E,height:T}=n;e.bindTexture(e.TEXTURE_2D,i),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,E,T,0,e.RGBA,e.UNSIGNED_BYTE,null),e.bindRenderbuffer(e.RENDERBUFFER,f),e.renderbufferStorage(e.RENDERBUFFER,e.DEPTH_COMPONENT16,E,T)}return h(),e.bindTexture(e.TEXTURE_2D,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindFramebuffer(e.FRAMEBUFFER,u),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,i,0),e.bindRenderbuffer(e.RENDERBUFFER,f),e.framebufferRenderbuffer(e.FRAMEBUFFER,e.DEPTH_ATTACHMENT,e.RENDERBUFFER,f),{buffer:u,depthBuffer:f,texture:i,resize:h}})}),n.singleton("drawModes",()=>{const{context:e}=n;return{points:e.POINTS,linear:e.LINEAR,triangles:e.TRIANGLES,triangleStrip:e.TRIANGLE_STRIP,triangleFan:e.TRIANGLE_FAN}}),n.singleton("slTypes",()=>{const{context:e}=n;return{[e.FLOAT]:"float",[e.FLOAT_VEC2]:"vec2",[e.FLOAT_VEC3]:"vec3",[e.FLOAT_VEC4]:"vec4",[e.INT]:"int",[e.INT_VEC2]:"ivec2",[e.INT_VEC3]:"ivec3",[e.INT_VEC4]:"ivec4",[e.UNSIGNED_INT]:"uint",[e.UNSIGNED_INT_VEC2??-1]:"uvec2",[e.UNSIGNED_INT_VEC3??-1]:"uvec3",[e.UNSIGNED_INT_VEC4??-1]:"uvec4",[e.BOOL]:"bool",[e.BOOL_VEC2]:"bvec2",[e.BOOL_VEC3]:"bvec3",[e.BOOL_VEC4]:"bvec4",[e.FLOAT_MAT2]:"mat2",[e.FLOAT_MAT3]:"mat3",[e.FLOAT_MAT4]:"mat4",[e.SAMPLER_2D]:"sampler2D",[e.INT_SAMPLER_2D??-1]:"sampler2D",[e.UNSIGNED_INT_SAMPLER_2D??-1]:"sampler2D",[e.SAMPLER_CUBE]:"samplerCube",[e.INT_SAMPLER_CUBE??-1]:"samplerCube",[e.UNSIGNED_INT_SAMPLER_CUBE??-1]:"samplerCube",[e.SAMPLER_2D_ARRAY??-1]:"sampler2DArray",[e.INT_SAMPLER_2D_ARRAY??-1]:"sampler2DArray",[e.UNSIGNED_INT_SAMPLER_2D_ARRAY??-1]:"sampler2DArray"}}),n.singleton("extensions",()=>({loseContext:n.context.getExtension("WEBGL_lose_context")})),n.bind("width",()=>n.context.drawingBufferWidth),n.bind("height",()=>n.context.drawingBufferHeight),n.plugins=new Map,n.children=c,n.shapes=new Map,n.registerShape=(e,i)=>Y(n,e,i),n.materials=new Map,n.registerMaterial=(e,i)=>H(n,e,i),n.textures=new Map,n.registerTexture=(e,i)=>K(n,e,i),n.entities=new Map,n.components=new Map,n.archetypes=new Map,n.systems=[],n.registerSystem=e=>j(n,e),n.query=e=>q(n,e),n.setup=()=>k(n),n.load=async()=>{var u,f;const{systems:e,textures:i}=n;for(let h=e.length,E=0;E<h;E++)(f=(u=e[E]).update)==null||f.call(u,0);for(;Array.from(i.values()).some(h=>h.loading);)await new Promise(h=>setTimeout(h,100))},n.renderNode=e=>W(n,e),n.render=e=>U(n,e),n.start=()=>{let e=0,i=0;u(0);function u(f){requestAnimationFrame(u),U(n,i),f*=.001,i+=f-e,e=f}};function d(e){e.preventDefault(),setTimeout(()=>{var i;n.context.isContextLost()&&((i=n.extensions.loseContext)==null||i.restoreContext())},0)}function m(){}return(a=r.addEventListener)==null||a.call(r,"webglcontextlost",d,!1),(s=r.addEventListener)==null||s.call(r,"webglcontextrestored",m,!1),n.destroy=()=>{var e,i,u;(e=r.removeEventListener)==null||e.call(r,"webglcontextlost",d),(i=r.removeEventListener)==null||i.call(r,"webglcontextrestored",m),n.context.useProgram(null),(u=n.extensions.loseContext)==null||u.loseContext()},t.forEach(e=>{var i;(i=e.register)==null||i.call(e,n),n.plugins.set(e.name,e)}),n.setup(),n}exports.Renderer2d=$;exports.createApp=z;

package/dist/index.js

@@ -1,37 +1,4 @@
-(function(_,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(_=typeof globalThis<"u"?globalThis:_||self,v(_.modernCanvas={}))})(this,function(_){"use strict";function v(o){return typeof o=="function"?o():o}const p=v(()=>({name:"canvas:base",register(o){o.registerShape({name:"rectangle",type:"2d",mode:"triangles",data:new Float32Array([-1,1,-1,-1,1,-1,1,-1,1,1,-1,1])}),o.registerMaterial({name:"baseMaterial",vertexShader:`attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  gl_Position = vec4(aPosition, 0, 1);
-}`,fragmentShader:`uniform sampler2D uSampler;
-varying vec2 vTextureCoord;
-void main() {
-  gl_FragColor = texture2D(uSampler, vTextureCoord);
-}`})}})),U=v(()=>({name:"canvas:node-image",register(o){o.registerNodeRenderer({name:"image",include:r=>Boolean(r.image),shape:"rectangle",material:"baseMaterial",update(r){if(!o.resources.has(r.image)){const e=new Image;e.src=r.image,o.registerResource({name:r.image,data:e})}return{uSampler:r.image}}})}})),D=v(()=>{const o=document.createElement("canvas").getContext("2d");return{name:"canvas:node-text",register(r){r.registerNodeRenderer({name:"text",include:e=>Boolean(e.text),shape:"rectangle",material:"baseMaterial",update(e){const{width:i=100,height:t=100,text:c}=e;return r.resources.has(c)||(o.canvas.width=i,o.canvas.height=t,o.font="20px monospace",o.textAlign="center",o.textBaseline="middle",o.fillStyle="black",o.clearRect(0,0,o.canvas.width,o.canvas.height),o.fillText(c,i/2,t/2),r.registerResource({name:c,data:o.canvas})),{uSampler:e.text}}})}}}),N=v(()=>({name:"canvas:fade",register(o){o.registerNodeRenderer({name:"fade",include:r=>Boolean(r.fade),shape:"rectangle",material:{vertexShader:`attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  gl_Position = vec4(aPosition, 0, 1);
-}`,fragmentShader:`uniform sampler2D uSampler;
-varying vec2 vTextureCoord;
-uniform float uTime;
-float linear(float time, float offset, float change, float duration) {
-  return change * (time / duration) + offset;
-}
-void main(void) {
-  vec4 color = texture2D(uSampler, vTextureCoord);
-  gl_FragColor = vec4(color.rgb, linear(uTime, 0.0, 1.0, 3.0));
-}`},update:(r,e)=>({uTime:e})})}}));class A extends Float32Array{static identity(){return new A([1,0,0,0,1,0,0,0,1])}static translation(r,e){return new A([1,0,0,0,1,0,r,e,1])}static rotation(r){const e=Math.cos(r),i=Math.sin(r);return new A([e,-i,0,i,e,0,0,0,1])}static scaling(r,e){return new A([r,0,0,0,e,0,0,0,1])}multiply(r){const e=this[0],i=this[1],t=this[2],c=this[3],u=this[4],a=this[5],l=this[6],s=this[7],n=this[8],f=r[0],R=r[1],m=r[2],T=r[3],E=r[4],d=r[5],g=r[6],b=r[7],P=r[8];return this[0]=f*e+R*c+m*l,this[1]=f*i+R*u+m*s,this[2]=f*t+R*a+m*n,this[3]=T*e+E*c+d*l,this[4]=T*i+E*u+d*s,this[5]=T*t+E*a+d*n,this[6]=g*e+b*c+P*l,this[7]=g*i+b*u+P*s,this[8]=g*t+b*a+P*n,this}}const F=v(()=>{const o={x:0,y:0};return{name:"canvas:selector2d",register(r){const{view:e}=r;e.addEventListener("mousemove",i=>{const t=e.getBoundingClientRect();o.x=i.clientX-t.left,o.y=i.clientY-t.top}),e.addEventListener("click",()=>{var t;const i=r.get("hovered");i&&((t=r.get("onSelect"))==null||t(i))}),r.registerNodeRenderer({name:"selector2d",include:()=>!1,shape:"rectangle",material:{vertexShader:`attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-uniform mat3 uModelMatrix;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  vec2 position = aPosition;
-  gl_Position = vec4((uModelMatrix * vec3(position, 1)).xy, 0, 1);
-}`,fragmentShader:`uniform vec4 uColor;
-void main() {
-  gl_FragColor = uColor;
-}`},update:(i,t)=>{const{width:c,height:u}=r;let{x:a=0,y:l=0,width:s=c,height:n=u}=i;const{rotation:f=0}=i;a=a/c,l=l/u,s=s/c,n=n/u;const R=f/180*Math.PI;return{uModelMatrix:A.identity().multiply(A.translation(2*a-(1-s),1-n-2*l)).multiply(A.scaling(s,n)).multiply(A.rotation(R)),uColor:[(t>>>16&255)/255,(t>>>8&255)/255,(t&255)/255,1]}}})},beforeRender(r){var R,m;const{width:e,height:i,gl:t,children:c,nodeRenderers:u}=r;let a=0;const l={};t.bindFramebuffer(t.FRAMEBUFFER,r.glFramebuffers[0].buffer),t.viewport(0,0,e,i),t.clear(t.COLOR_BUFFER_BIT|t.DEPTH_BUFFER_BIT),t.enable(t.DEPTH_TEST),r.forEachNode((T,E)=>{var g;const d=a++;l[d]=E,(g=u.get("selector2d"))==null||g.render(T,d)});const s=new Uint8Array(4);t.readPixels(o.x,i-o.y,1,1,t.RGBA,t.UNSIGNED_BYTE,s);const n=l[(s[0]<<16)+(s[1]<<8)+s[2]];if(((R=r.get("hoveredPath"))==null?void 0:R.join(""))===(n==null?void 0:n.join("")))return;let f;n&&(f={children:c},n.forEach(T=>{var E;return f=(E=f.children)==null?void 0:E[T]})),r.set("hovered",f),r.set("hoveredPath",n),f&&((m=r.get("onHover"))==null||m(f,n))}}}),L=v(()=>({name:"canvas:transform2d",register(o){o.registerNodeRenderer({name:"transform2d",shape:"rectangle",material:{vertexShader:`attribute vec2 aPosition;
+(function(I,P){typeof exports=="object"&&typeof module<"u"?P(exports):typeof define=="function"&&define.amd?define(["exports"],P):(I=typeof globalThis<"u"?globalThis:I||self,P(I.modernCanvas={}))})(this,function(I){"use strict";function P(o){return typeof o=="function"?o():o}class x extends Float32Array{static identity(){return new x([1,0,0,0,1,0,0,0,1])}static translation(r,c){return new x([1,0,0,0,1,0,r,c,1])}static rotation(r){const c=Math.cos(r),t=Math.sin(r);return new x([c,-t,0,t,c,0,0,0,1])}static scaling(r,c){return new x([r,0,0,0,c,0,0,0,1])}multiply(r){const c=this[0],t=this[1],n=this[2],d=this[3],m=this[4],a=this[5],s=this[6],e=this[7],i=this[8],u=r[0],l=r[1],h=r[2],E=r[3],T=r[4],f=r[5],g=r[6],R=r[7],p=r[8];return this[0]=u*c+l*d+h*s,this[1]=u*t+l*m+h*e,this[2]=u*n+l*a+h*i,this[3]=E*c+T*d+f*s,this[4]=E*t+T*m+f*e,this[5]=E*n+T*a+f*i,this[6]=g*c+R*d+p*s,this[7]=g*t+R*m+p*e,this[8]=g*n+R*a+p*i,this}}function L(o){const r=[];for(let c=o.length,t=0;t<c;t++){const n=o[t],d=~~(n/16);for(let m=0;m<=d;m++)m in r||(r[m]=0);r[d]|=1<<n%16}return r}function C(o){const r=document.createElement("video");return r.playsInline=!0,r.muted=!0,r.loop=!0,r.src=o,r}function M(o){const r=new Image;return r.decoding="sync",r.loading="eager",r.crossOrigin="anonymous",r.src=o,r}let b;const U=new Map;function S(){var o;return b||(b=document.createElement("iframe"),b.id=`__SANDBOX__${Math.random()}`,b.width="0",b.height="0",b.style.visibility="hidden",b.style.position="fixed",document.body.appendChild(b),(o=b.contentWindow)==null||o.document.write('<!DOCTYPE html><meta charset="UTF-8"><title></title><body>')),b}function D(o){switch(!0){case(o.startsWith("#")&&o.length===7):return o=o.substring(1),[parseInt(`${o[0]}${o[1]}`,16)/255,parseInt(`${o[2]}${o[3]}`,16)/255,parseInt(`${o[4]}${o[5]}`,16)/255,1];case(o.startsWith("#")&&o.length===9):return o=o.substring(1),[parseInt(`${o[0]}${o[1]}`,16)/255,parseInt(`${o[2]}${o[3]}`,16)/255,parseInt(`${o[4]}${o[5]}`,16)/255,parseInt(`${o[6]}${o[7]}`,16)/255];case o.startsWith("rgb("):return[...o.replace(/rgb\((.+?)\)/,"$1").split(",").slice(0,3).map(r=>Number(r.trim())/255),1];case o.startsWith("rgba("):return o.replace(/rgba\((.+?)\)/,"$1").split(",").slice(0,4).map(r=>Number(r.trim())/255)}}function F(o,r=[0,0,0,0]){if(U.has(o))return U.get(o);let c=D(o);if(!c){const t=S();if(t){const n=t.contentWindow;if(n){const d=n.document,m=d.createElement("div");d.body.appendChild(m),m.textContent=" ",m.style.color=o,c=D(n.getComputedStyle(m).color),d.body.removeChild(m)}}}return c&&U.set(o,c),c??r}const w=P({name:"renderer2d",register(o){o.registerShape("rectangle",{type:"2d",mode:"triangles",buffer:new Float32Array([-1,1,-1,-1,1,-1,1,-1,1,1,-1,1])}),o.registerMaterial("material2d",{vertexShader:`attribute vec2 aPosition;
 varying vec2 vTextureCoord;
 uniform mat3 uModelMatrix;
 void main() {
@@ -40,9 +7,11 @@ void main() {
   gl_Position = vec4((uModelMatrix * vec3(position, 1)).xy, 0, 1);
 }`,fragmentShader:`uniform sampler2D uSampler;
 varying vec2 vTextureCoord;
+uniform vec4 uBackgroundColor;
 void main() {
-  gl_FragColor = texture2D(uSampler, vTextureCoord);
-}`},update:r=>{const{width:e,height:i}=o;let{x:t=0,y:c=0,width:u=e,height:a=i}=r;const{rotation:l=0}=r;t=t/e,c=c/i,u=u/e,a=a/i;const s=l/180*Math.PI;return{uModelMatrix:A.identity().multiply(A.translation(2*t-(1-u),1-a-2*c)).multiply(A.scaling(u,a)).multiply(A.rotation(s))}}})}})),M=[p,U,D,N,L,F];function S(o,r=0){const{gl:e,width:i,height:t,beforeRenderPlugins:c,afterRenderPlugins:u,nodeRenderers:a,forEachNode:l}=o,s=Array.from(a.values());c.forEach(n=>{var f;return(f=n.beforeRender)==null?void 0:f.call(n,o)}),e.viewport(0,0,i,t),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),l((n,f)=>{e.bindFramebuffer(e.FRAMEBUFFER,null),e.bindTexture(e.TEXTURE_2D,null);const R=s.filter(m=>!m.include&&!m.exclude||m.include&&m.include(n,f)||m.exclude&&!m.exclude(n,f));for(let m=R.length,T=0;T<m;T++){let E=null;T<m-1&&(E=o.glFramebuffers[T%2]),e.bindFramebuffer(e.FRAMEBUFFER,(E==null?void 0:E.buffer)??null),E&&e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),R[T].render(n,r),E&&e.bindTexture(e.TEXTURE_2D,E.texture)}}),u.forEach(n=>{var f;return(f=n.afterRender)==null?void 0:f.call(n,o)}),e.flush()}function I(){const o=new Map,r=new Map;function e(a){if(o.has(a))return o.get(a);if(r.has(a)){const{value:l,shared:s}=r.get(a),n=l();return s&&t(a,n),n}}function i(a){return o.has(a)||r.has(a)}function t(a,l){o.set(a,l)}function c(a,l){u(a,l,!0)}function u(a,l,s=!1){r.set(a,{value:l,shared:s})}return new Proxy({instances:o,bindings:r,get:e,has:i,set:t,bind:u,singleton:c},{get(a,l,s){return typeof l=="symbol"||l in a?Reflect.get(a,l,s):a.get(l)},has(a,l){return typeof l=="symbol"||l in a?Reflect.has(a,l):a.has(l)},set(a,l,s,n){return typeof l=="symbol"||l in a?Reflect.set(a,l,s,n):(a.set(l,s),!0)}})}function y(o,r){const{gl:e,materials:i,glSlTypes:t}=o,{name:c,vertexShader:u,fragmentShader:a,uniforms:l}=r;if(i.has(c))return;const s=[{type:e.VERTEX_SHADER,source:u},{type:e.FRAGMENT_SHADER,source:a.includes("precision")?a:`precision mediump float;
-${a}`}].map(({type:T,source:E})=>{const d=e.createShader(T);if(!d)throw new Error("failed to create shader");if(e.shaderSource(d,E),e.compileShader(d),!e.getShaderParameter(d,e.COMPILE_STATUS))throw new Error(`failed to compiling shader:
-${E}
-${e.getShaderInfoLog(d)}`);return d}),n=e.createProgram();if(!n)throw new Error("failed to create program");if(s.forEach(T=>e.attachShader(n,T)),e.linkProgram(n),s.forEach(T=>e.deleteShader(T)),!e.getProgramParameter(n,e.LINK_STATUS))throw new Error(`failed to initing program: ${e.getProgramInfoLog(n)}`);const f={};for(let T=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES),E=0;E<T;E++){const d=e.getActiveAttrib(n,E);if(!d)continue;const g=d.name.replace(/\[.*?]$/,"");f[g]={type:t[d.type],isArray:g!==d.name,location:e.getAttribLocation(n,g)}}const R={};for(let T=e.getProgramParameter(n,e.ACTIVE_UNIFORMS),E=0;E<T;E++){const d=e.getActiveUniform(n,E);if(!d)continue;const g=d.name.replace(/\[.*?]$/,"");R[g]={type:t[d.type],isArray:g!==d.name,location:e.getUniformLocation(n,g)}}const m={...r,program:n,attributes:f,uniforms:R,setAttributes(T){for(const[E,d]of Object.entries(T)){const g=f[E];if(!g)continue;const{type:b,isArray:P,location:x}=g;if(d instanceof WebGLBuffer){e.bindBuffer(e.ARRAY_BUFFER,d);const h=e.getAttribLocation(n,E);switch(b){case"vec2":e.vertexAttribPointer(h,2,e.FLOAT,!1,0,0),e.enableVertexAttribArray(h);break;case"vec3":e.vertexAttribPointer(h,3,e.FLOAT,!1,0,0),e.enableVertexAttribArray(h);break}}else switch(b){case"float":P?e.vertexAttrib1fv(x,d):e.vertexAttrib1f(x,d);break;case"vec2":e.vertexAttrib2fv(x,d);break;case"vec3":e.vertexAttrib3fv(x,d);break;case"vec4":e.vertexAttrib4fv(x,d);break}}},setUniforms(T){var E;for(const[d,g]of Object.entries(T)){const b=R[d];if(!b)continue;const{type:P,isArray:x,location:h}=b;switch(P){case"float":x?e.uniform1fv(h,g):e.uniform1f(h,g);break;case"bool":case"int":x?e.uniform1iv(h,g):e.uniform1i(h,g);break;case"vec2":e.uniform2fv(h,g);break;case"vec3":e.uniform3fv(h,g);break;case"vec4":e.uniform4fv(h,g);break;case"mat2":e.uniformMatrix2fv(h,!1,g);break;case"mat3":e.uniformMatrix3fv(h,!1,g);break;case"mat4":e.uniformMatrix4fv(h,!1,g);break;case"sampler2D":e.bindTexture(e.TEXTURE_2D,((E=o.resources.get(g))==null?void 0:E.texture)??o.glDefaultTexture),e.uniform1i(h,0);break}}}};l&&m.setUniforms(l),i.set(c,m)}function B(o,r){o.singleton("gl",()=>{const{view:e}=o,i=e.getContext("webgl",r)||e.getContext("experimental-webgl",r);if(!i)throw new Error("failed to getContext for webgl");return i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!0),i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),i.clearColor(0,0,0,0),i.enable(i.DEPTH_TEST),i.enable(i.CULL_FACE),i.enable(i.BLEND),i.blendFunc(i.SRC_ALPHA,i.ONE_MINUS_SRC_ALPHA),i}),o.singleton("glDefaultTexture",()=>{const{gl:e,width:i,height:t}=o,c=e.createTexture();return e.bindTexture(e.TEXTURE_2D,c),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,i,t,0,e.RGBA,e.UNSIGNED_BYTE,null),c}),o.singleton("glFramebuffers",()=>{const{gl:e}=o;return Array.from({length:2},()=>{const i=e.createTexture(),t=e.createFramebuffer(),c=e.createRenderbuffer();function u(){const{width:a,height:l}=o;e.bindTexture(e.TEXTURE_2D,i),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,a,l,0,e.RGBA,e.UNSIGNED_BYTE,null),e.bindRenderbuffer(e.RENDERBUFFER,c),e.renderbufferStorage(e.RENDERBUFFER,e.DEPTH_COMPONENT16,a,l)}return u(),e.bindTexture(e.TEXTURE_2D,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindFramebuffer(e.FRAMEBUFFER,t),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,i,0),e.bindRenderbuffer(e.RENDERBUFFER,c),e.framebufferRenderbuffer(e.FRAMEBUFFER,e.DEPTH_ATTACHMENT,e.RENDERBUFFER,c),{buffer:t,depthBuffer:c,texture:i,resize:u}})}),o.singleton("glDrawModes",()=>{const{gl:e}=o;return{points:e.POINTS,linear:e.LINEAR,triangles:e.TRIANGLES,triangleStrip:e.TRIANGLE_STRIP,triangleFan:e.TRIANGLE_FAN}}),o.singleton("glSlTypes",()=>{const e=o.gl;return{[e.FLOAT]:"float",[e.FLOAT_VEC2]:"vec2",[e.FLOAT_VEC3]:"vec3",[e.FLOAT_VEC4]:"vec4",[e.INT]:"int",[e.INT_VEC2]:"ivec2",[e.INT_VEC3]:"ivec3",[e.INT_VEC4]:"ivec4",[e.UNSIGNED_INT]:"uint",[e.UNSIGNED_INT_VEC2]:"uvec2",[e.UNSIGNED_INT_VEC3]:"uvec3",[e.UNSIGNED_INT_VEC4]:"uvec4",[e.BOOL]:"bool",[e.BOOL_VEC2]:"bvec2",[e.BOOL_VEC3]:"bvec3",[e.BOOL_VEC4]:"bvec4",[e.FLOAT_MAT2]:"mat2",[e.FLOAT_MAT3]:"mat3",[e.FLOAT_MAT4]:"mat4",[e.SAMPLER_2D]:"sampler2D",[e.INT_SAMPLER_2D]:"sampler2D",[e.UNSIGNED_INT_SAMPLER_2D]:"sampler2D",[e.SAMPLER_CUBE]:"samplerCube",[e.INT_SAMPLER_CUBE]:"samplerCube",[e.UNSIGNED_INT_SAMPLER_CUBE]:"samplerCube",[e.SAMPLER_2D_ARRAY]:"sampler2DArray",[e.INT_SAMPLER_2D_ARRAY]:"sampler2DArray",[e.UNSIGNED_INT_SAMPLER_2D_ARRAY]:"sampler2DArray"}}),o.singleton("glExtensions",()=>({loseContext:o.gl.getExtension("WEBGL_lose_context")}))}function w(o,r){const{gl:e,shapes:i,glDrawModes:t}=o,{name:c,type:u="2d",mode:a="triangles",data:l=new Float32Array([])}=r,s=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,s),e.bufferData(e.ARRAY_BUFFER,l,e.STATIC_DRAW),i.set(c,{mode:t[a],count:l.byteLength/l.BYTES_PER_ELEMENT/(u==="2d"?2:3),buffer:s})}function O(o,r){const{gl:e,shapes:i,materials:t,nodeRenderers:c}=o,{name:u,shape:a,material:l}=r,s=typeof a=="string"?a:`${u}-shape`;typeof a!="string"&&o.registerShape({...a,name:s});const n=typeof l=="string"?l:`${u}-material`;typeof l!="string"&&o.registerMaterial({...l,name:n});const f=i.get(s),R=t.get(n);if(!f||!R)return;const{buffer:m}=f;R.setAttributes({aPosition:m}),c.set(u,{...r,shape:s,material:n,render:(T,E)=>{var C;const d=i.get(s),g=t.get(n);if(!d||!g)return;const{program:b}=g,{mode:P,count:x}=d;e.useProgram(b);const h=(C=r.update)==null?void 0:C.call(r,T,E);h&&g.setUniforms(h),e.drawArrays(P,0,x)}})}function X(o,r){const{children:e}=o;function i(t,c=[]){for(let u=t.length-1;u>=0;u--){const a=[...c,u],l=t[u];i(l.children??[],a),r(l,a)}}i(e)}function G(o,r){const{gl:e,resources:i}=o,{name:t,data:c}=r,u={loading:!0,texture:null};function a(){u.texture=e.createTexture(),u.texture&&(e.bindTexture(e.TEXTURE_2D,u.texture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,c)),u.loading=!1}c instanceof HTMLImageElement?c.addEventListener("load",a,{once:!0}):a(),i.set(t,u)}function H(o={}){var a,l;const{view:r=document.createElement("canvas"),children:e=[],plugins:i=[]}=o,t=I();t.set("view",r),B(t,o),t.bind("width",()=>t.gl.drawingBufferWidth),t.bind("height",()=>t.gl.drawingBufferHeight),t.singleton("plugins",()=>{const s=new Map;return i.forEach(n=>{var f;(f=n.register)==null||f.call(n,t),s.set(n.name,n)}),s}),t.singleton("beforeRenderPlugins",()=>Array.from(t.plugins.values()).filter(s=>"beforeRender"in s)),t.singleton("afterRenderPlugins",()=>Array.from(t.plugins.values()).filter(s=>"afterRender"in s)),t.set("children",e),t.set("shapes",new Map),t.set("registerShape",s=>w(t,s)),t.set("materials",new Map),t.set("registerMaterial",s=>y(t,s)),t.set("resources",new Map),t.set("registerResource",s=>G(t,s)),t.set("nodeRenderers",new Map),t.set("registerNodeRenderer",s=>O(t,s)),t.set("forEachNode",s=>X(t,s)),t.set("load",async()=>{t.get("plugins");const s=Array.from(t.nodeRenderers.values());for(t.forEachNode((n,f)=>{s.filter(m=>!m.include&&!m.exclude||m.include&&m.include(n,f)||m.exclude&&!m.exclude(n,f)).forEach(m=>{var T;return(T=m.update)==null?void 0:T.call(m,n,0)})});Array.from(t.resources.values()).some(n=>n.loading);)await new Promise(n=>setTimeout(n,100));return!0}),t.set("render",s=>S(t,s)),t.set("startRenderLoop",()=>{let s=0,n=0;f(0);function f(R){requestAnimationFrame(f),S(t,n),R*=.001,n+=R-s,s=R}});function c(s){s.preventDefault(),setTimeout(()=>{var n;t.gl.isContextLost()&&((n=t.glExtensions.loseContext)==null||n.restoreContext())},0)}function u(){}return(a=r.addEventListener)==null||a.call(r,"webglcontextlost",c,!1),(l=r.addEventListener)==null||l.call(r,"webglcontextrestored",u,!1),t.set("destroy",()=>{var s,n,f;(s=r.removeEventListener)==null||s.call(r,"webglcontextlost",c),(n=r.removeEventListener)==null||n.call(r,"webglcontextrestored",u),t.gl.useProgram(null),(f=t.glExtensions.loseContext)==null||f.loseContext()}),t}_.basePlugin=p,_.createCanvas=H,_.fadePlugin=N,_.nodeImagePlugin=U,_.nodeTextPlugin=D,_.plugins=M,_.selector2dPlugin=F,_.transform2dPlugin=L,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
+  vec4 color = texture2D(uSampler, vTextureCoord);
+  gl_FragColor = mix(uBackgroundColor, color, color.a);
+}`});const r=document.createElement("canvas").getContext("2d");o.registerSystem({update(c=0){var d;const{textures:t}=o,n=o.query("type");for(let m=n.length,a=0;a<m;a++){const s=n[a],{type:e}=s;if(e==="image"&&s.src)t.has(s.id)||o.registerTexture(s.id,M(s.src));else if(e==="video")if(!t.has(s.id))o.registerTexture(s.id,C(s.src));else{const i=(d=t.get(s.id))==null?void 0:d.source;i.duration&&(i.currentTime=c%i.duration)}else if(e==="text"){const{width:i,height:u,color:l="black",fontSize:h=14,fontWeight:E=400,direction:T="inherit",fontFamily:f="monospace",fontKerning:g="normal",textAlign:R="center",textBaseline:p="middle"}=s.style??{};if(!t.has(s.id)){const _=`${E} ${h}px ${f}`;r.font=_;const A=r.measureText(s.content),v=u??A.actualBoundingBoxAscent+A.actualBoundingBoxDescent,y=i??A.width;s.style.width=y,s.style.height=v,r.canvas.width=y,r.canvas.height=v,r.fillStyle=l,r.direction=T,r.font=_,r.fontKerning=g,r.textAlign=R,r.textBaseline=p,r.clearRect(0,0,y,v),r.fillText(s.content,y/2,v/2),o.registerTexture(s.id,r.canvas)}}}}}),o.registerSystem({update(){var m;const{width:c,height:t,textures:n}=o,d=o.query();for(let a=d.length,s=0;s<a;s++){const e=d[s],{shape:i="rectangle",material:u="material2d",filters:l=[]}=e,{left:h=0,top:E=0,width:T=0,height:f=0,rotation:g=0,background:R}=e.style??{},p=h/c,_=E/t,A=T/c,v=f/t,y=g/180*Math.PI,k=R!=null&&R.color?F(R.color):[0,0,0,0];o.renderNode({shape:i,material:u,uniforms:{uSampler:(m=n.get(e.id))==null?void 0:m.value,uBackgroundColor:k,uModelMatrix:x.identity().multiply(x.translation(2*p-(1-A),1-v-2*_)).multiply(x.scaling(A,v)).multiply(x.rotation(y))},extraRenderers:l==null?void 0:l.map(j=>{const{shape:q,material:K,type:z,...J}=j;return{shape:q??i,material:K??z??u,uniforms:J}})})}}})}});function B(o,r){const{width:c,height:t,context:n,shapes:d,materials:m,framebuffers:a,lastState:s}=o,{extraRenderers:e=[]}=r,i=[r,...e].filter(u=>d.has(u.shape)&&m.has(u.material));for(let u=i.length,l=0;l<u;l++){const h=i[l],{shape:E,material:T,uniforms:f}=h,g=d.get(E),R=m.get(T);(s==null?void 0:s.material)!==T&&(s==null?void 0:s.shape)!==E&&R.setupAttributes({aPosition:g.buffer});const p=l<u-1?a[l%2]:null;n.bindFramebuffer(n.FRAMEBUFFER,(p==null?void 0:p.buffer)??null),n.viewport(0,0,c,t),p&&n.clear(n.COLOR_BUFFER_BIT|n.DEPTH_BUFFER_BIT),(s==null?void 0:s.material)!==T&&n.useProgram(R.program),f&&R.setupUniforms(f),n.drawArrays(g.mode,0,g.count),p&&n.bindTexture(n.TEXTURE_2D,p.texture),o.lastState={material:T,shape:E}}}function N(o,r=0){var d,m;const{context:c,systems:t,framebuffers:n}=o;n.forEach(a=>a.resize()),c.clear(c.COLOR_BUFFER_BIT|c.DEPTH_BUFFER_BIT);for(let a=t.length,s=0;s<a;s++)(m=(d=t[s]).update)==null||m.call(d,r);c.flush()}function O(){const o=new Map,r=new Map;function c(a){if(o.has(a))return o.get(a);if(r.has(a)){const{value:s,shared:e}=r.get(a),i=s();return e&&n(a,i),i}}function t(a){return o.has(a)||r.has(a)}function n(a,s){o.set(a,s)}function d(a,s){m(a,s,!0)}function m(a,s,e=!1){r.set(a,{value:s,shared:e})}return new Proxy({instances:o,bindings:r,get:c,has:t,set:n,bind:m,singleton:d},{get(a,s,e){return typeof s=="symbol"||s in a?Reflect.get(a,s,e):a.get(s)},has(a,s){return typeof s=="symbol"||s in a?Reflect.has(a,s):a.has(s)},set(a,s,e,i){return typeof s=="symbol"||s in a?Reflect.set(a,s,e,i):(a.set(s,e),!0)}})}function X(o,r,c){const{context:t,materials:n,slTypes:d}=o,{vertexShader:m,fragmentShader:a,uniforms:s}=c;if(n.has(r))return;const e=[{type:t.VERTEX_SHADER,source:m},{type:t.FRAGMENT_SHADER,source:a.includes("precision")?a:`precision mediump float;
+${a}`}].map(({type:E,source:T})=>{const f=t.createShader(E);if(!f)throw new Error("failed to create shader");if(t.shaderSource(f,T),t.compileShader(f),!t.getShaderParameter(f,t.COMPILE_STATUS))throw new Error(`failed to compiling shader:
+${T}
+${t.getShaderInfoLog(f)}`);return f}),i=t.createProgram();if(!i)throw new Error("failed to create program");if(e.forEach(E=>t.attachShader(i,E)),t.linkProgram(i),e.forEach(E=>t.deleteShader(E)),!t.getProgramParameter(i,t.LINK_STATUS))throw new Error(`failed to initing program: ${t.getProgramInfoLog(i)}`);const u={};for(let E=t.getProgramParameter(i,t.ACTIVE_ATTRIBUTES),T=0;T<E;T++){const f=t.getActiveAttrib(i,T);if(!f)continue;const g=f.name.replace(/\[.*?]$/,"");u[g]={type:d[f.type],isArray:g!==f.name,location:t.getAttribLocation(i,g)}}const l={};for(let E=t.getProgramParameter(i,t.ACTIVE_UNIFORMS),T=0;T<E;T++){const f=t.getActiveUniform(i,T);if(!f)continue;const g=f.name.replace(/\[.*?]$/,"");l[g]={type:d[f.type],isArray:g!==f.name,location:t.getUniformLocation(i,g)}}const h={...c,program:i,attributes:u,uniforms:l,setupAttributes(E){for(const[T,f]of Object.entries(E)){const g=u[T];if(!g)continue;const{type:R,isArray:p,location:_}=g;if(f instanceof WebGLBuffer){t.bindBuffer(t.ARRAY_BUFFER,f);const A=t.getAttribLocation(i,T);switch(R){case"vec2":t.vertexAttribPointer(A,2,t.FLOAT,!1,0,0),t.enableVertexAttribArray(A);break;case"vec3":t.vertexAttribPointer(A,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(A);break}}else switch(R){case"float":p?t.vertexAttrib1fv(_,f):t.vertexAttrib1f(_,f);break;case"vec2":t.vertexAttrib2fv(_,f);break;case"vec3":t.vertexAttrib3fv(_,f);break;case"vec4":t.vertexAttrib4fv(_,f);break}}},setupUniforms(E){for(const[T,f]of Object.entries(E)){const g=l[T];if(!g)continue;const{type:R,isArray:p,location:_}=g;switch(R){case"float":p?t.uniform1fv(_,f):t.uniform1f(_,f);break;case"bool":case"int":p?t.uniform1iv(_,f):t.uniform1i(_,f);break;case"vec2":t.uniform2fv(_,f);break;case"vec3":t.uniform3fv(_,f);break;case"vec4":t.uniform4fv(_,f);break;case"mat2":t.uniformMatrix2fv(_,!1,f);break;case"mat3":t.uniformMatrix3fv(_,!1,f);break;case"mat4":t.uniformMatrix4fv(_,!1,f);break;case"sampler2D":t.bindTexture(t.TEXTURE_2D,f??o.defaultTexture),t.uniform1i(_,0);break}}}};s&&h.setupUniforms(s),n.set(r,h)}function G(o,r,c){const{context:t,shapes:n,drawModes:d}=o,{type:m="2d",mode:a="triangles",buffer:s=new Float32Array([])}=c,e=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,e),t.bufferData(t.ARRAY_BUFFER,s,t.STATIC_DRAW),n.set(r,{mode:d[a],count:s.byteLength/s.BYTES_PER_ELEMENT/(m==="2d"?2:3),buffer:e})}function $(o){const{entities:r,children:c,components:t,archetypes:n}=o;r.clear(),t.clear(),n.clear();const d=function(){let e=0;return()=>++e}(),m=function(){let e=0;return()=>++e}();function a(e,i){var R,p;e.id||(e.id=d());const u=e.id,l=[];for(const _ in e){let A=t.get(_);A||(A=m(),t.set(_,A)),l.push(A)}const h=L(l),E=h.map(_=>String.fromCharCode(_)).join(""),T=r.get(u);T&&((p=(R=n.get(T.archetypeId))==null?void 0:R.entityIds)==null||p.delete(u));const f=n.get(E);let g=f==null?void 0:f.entityIds;f||(g=new Set,n.set(E,{entityIds:g,codePoints:h})),g.add(u),r.set(u,{path:i,archetypeId:E})}function s(e,i){for(let u=e.length,l=0;l<u;l++){const h=e[l],E=[...i,l];a(h,E),h.children&&s(h.children,E)}}s(c,[])}function W(o,r){const{entities:c,components:t,children:n,archetypes:d}=o;if(!r)return n.flatMap(function i(u){var l;return[u,(l=u.children)==null?void 0:l.flatMap(i)].filter(Boolean)});const m=typeof r=="string"?[r]:r,a=[];for(let i=m.length,u=0;u<i;u++){const l=t.get(m[u]);l&&a.push(l)}const s=L(a),e=[];for(const[,{entityIds:i,codePoints:u}]of d.entries())if(u.some(l=>s.some(h=>h&l)))for(const[l]of i.entries()){const{path:h}=c.get(l);if(!h||!h.length)continue;let E=n[h[0]];for(let T=h.length,f=1;f<T;f++)E=E[f];e.push(E)}return e}function V(o,r,c){const{context:t,textures:n}=o,d={loading:!0,value:null,source:c};return n.set(r,d),new Promise(m=>{c instanceof HTMLImageElement?c.addEventListener("load",a,{once:!0}):c instanceof HTMLVideoElement?(c.addEventListener("canplay",a,{once:!0}),c.addEventListener("timeupdate",()=>{t.bindTexture(t.TEXTURE_2D,d.value),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,c)})):a();function a(){d.value=t.createTexture(),d.value&&(t.bindTexture(t.TEXTURE_2D,d.value),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,c)),d.loading=!1,c instanceof HTMLVideoElement&&(c.currentTime=.01),m()}})}function H(o,r){const{systems:c}=o;c.push(r)}function Y(o={}){var a,s;const{view:r=document.createElement("canvas"),children:c=[],plugins:t=[]}=o,n=O();n.view=r,n.singleton("context",()=>{const{view:e}=n,i=e.getContext("webgl",o)||e.getContext("experimental-webgl",o);if(!i)throw new Error("failed to getContext for webgl");const u=i.drawingBufferWidth,l=i.drawingBufferHeight;return i.viewport(0,0,u,l),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!0),i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),i.clearColor(0,0,0,0),i.enable(i.DEPTH_TEST),i.enable(i.CULL_FACE),i.enable(i.BLEND),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.depthMask(!1),i}),n.singleton("defaultTexture",()=>{const{context:e,width:i,height:u}=n,l=e.createTexture();return e.bindTexture(e.TEXTURE_2D,l),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,i,u,0,e.RGBA,e.UNSIGNED_BYTE,null),l}),n.singleton("framebuffers",()=>{const{context:e}=n;return Array.from({length:2},()=>{const i=e.createTexture(),u=e.createFramebuffer(),l=e.createRenderbuffer();function h(){const{width:E,height:T}=n;e.bindTexture(e.TEXTURE_2D,i),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,E,T,0,e.RGBA,e.UNSIGNED_BYTE,null),e.bindRenderbuffer(e.RENDERBUFFER,l),e.renderbufferStorage(e.RENDERBUFFER,e.DEPTH_COMPONENT16,E,T)}return h(),e.bindTexture(e.TEXTURE_2D,i),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindFramebuffer(e.FRAMEBUFFER,u),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,i,0),e.bindRenderbuffer(e.RENDERBUFFER,l),e.framebufferRenderbuffer(e.FRAMEBUFFER,e.DEPTH_ATTACHMENT,e.RENDERBUFFER,l),{buffer:u,depthBuffer:l,texture:i,resize:h}})}),n.singleton("drawModes",()=>{const{context:e}=n;return{points:e.POINTS,linear:e.LINEAR,triangles:e.TRIANGLES,triangleStrip:e.TRIANGLE_STRIP,triangleFan:e.TRIANGLE_FAN}}),n.singleton("slTypes",()=>{const{context:e}=n;return{[e.FLOAT]:"float",[e.FLOAT_VEC2]:"vec2",[e.FLOAT_VEC3]:"vec3",[e.FLOAT_VEC4]:"vec4",[e.INT]:"int",[e.INT_VEC2]:"ivec2",[e.INT_VEC3]:"ivec3",[e.INT_VEC4]:"ivec4",[e.UNSIGNED_INT]:"uint",[e.UNSIGNED_INT_VEC2??-1]:"uvec2",[e.UNSIGNED_INT_VEC3??-1]:"uvec3",[e.UNSIGNED_INT_VEC4??-1]:"uvec4",[e.BOOL]:"bool",[e.BOOL_VEC2]:"bvec2",[e.BOOL_VEC3]:"bvec3",[e.BOOL_VEC4]:"bvec4",[e.FLOAT_MAT2]:"mat2",[e.FLOAT_MAT3]:"mat3",[e.FLOAT_MAT4]:"mat4",[e.SAMPLER_2D]:"sampler2D",[e.INT_SAMPLER_2D??-1]:"sampler2D",[e.UNSIGNED_INT_SAMPLER_2D??-1]:"sampler2D",[e.SAMPLER_CUBE]:"samplerCube",[e.INT_SAMPLER_CUBE??-1]:"samplerCube",[e.UNSIGNED_INT_SAMPLER_CUBE??-1]:"samplerCube",[e.SAMPLER_2D_ARRAY??-1]:"sampler2DArray",[e.INT_SAMPLER_2D_ARRAY??-1]:"sampler2DArray",[e.UNSIGNED_INT_SAMPLER_2D_ARRAY??-1]:"sampler2DArray"}}),n.singleton("extensions",()=>({loseContext:n.context.getExtension("WEBGL_lose_context")})),n.bind("width",()=>n.context.drawingBufferWidth),n.bind("height",()=>n.context.drawingBufferHeight),n.plugins=new Map,n.children=c,n.shapes=new Map,n.registerShape=(e,i)=>G(n,e,i),n.materials=new Map,n.registerMaterial=(e,i)=>X(n,e,i),n.textures=new Map,n.registerTexture=(e,i)=>V(n,e,i),n.entities=new Map,n.components=new Map,n.archetypes=new Map,n.systems=[],n.registerSystem=e=>H(n,e),n.query=e=>W(n,e),n.setup=()=>$(n),n.load=async()=>{var u,l;const{systems:e,textures:i}=n;for(let h=e.length,E=0;E<h;E++)(l=(u=e[E]).update)==null||l.call(u,0);for(;Array.from(i.values()).some(h=>h.loading);)await new Promise(h=>setTimeout(h,100))},n.renderNode=e=>B(n,e),n.render=e=>N(n,e),n.start=()=>{let e=0,i=0;u(0);function u(l){requestAnimationFrame(u),N(n,i),l*=.001,i+=l-e,e=l}};function d(e){e.preventDefault(),setTimeout(()=>{var i;n.context.isContextLost()&&((i=n.extensions.loseContext)==null||i.restoreContext())},0)}function m(){}return(a=r.addEventListener)==null||a.call(r,"webglcontextlost",d,!1),(s=r.addEventListener)==null||s.call(r,"webglcontextrestored",m,!1),n.destroy=()=>{var e,i,u;(e=r.removeEventListener)==null||e.call(r,"webglcontextlost",d),(i=r.removeEventListener)==null||i.call(r,"webglcontextrestored",m),n.context.useProgram(null),(u=n.extensions.loseContext)==null||u.loseContext()},t.forEach(e=>{var i;(i=e.register)==null||i.call(e,n),n.plugins.set(e.name,e)}),n.setup(),n}I.Renderer2d=w,I.createApp=Y,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"})});