modern-canvas 0.0.1 → 0.0.2

package/README.md

@@ -17,3 +17,32 @@
     <img src="https://img.shields.io/npm/l/modern-canvas.svg" alt="License">
   </a>
 </p>
+
+
+## 📦 Install
+
+```shell
+npm i modern-canvas
+```
+
+## 🦄 Usage
+
+```ts
+import { createCanvas, plugins } from 'modern-canvas'
+
+const canvas = createCanvas({
+  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' },
+  ],
+  plugins,
+})
+
+await canvas.load()
+
+canvas.startRenderLoop()
+```

package/dist/index.cjs

@@ -1 +1,48 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=1;exports.one=e;
+"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;
+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 sampler2D uSampler;
+varying vec2 vTextureCoord;
+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;

package/dist/index.js

@@ -1 +1,48 @@
-(function(e,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.modernCanvas={}))})(this,function(e){"use strict";e.one=1,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+(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;
+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 sampler2D uSampler;
+varying vec2 vTextureCoord;
+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"})});

package/dist/index.mjs

@@ -1,4 +1,672 @@
-const o = 1;
+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], g = r[2], T = r[3], d = r[4], E = r[5], m = r[6], A = r[7], x = r[8];
+    return this[0] = f * e + R * c + g * l, this[1] = f * a + R * u + g * s, this[2] = f * t + R * i + g * 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] = m * e + A * c + x * l, this[7] = m * a + A * u + x * s, this[8] = m * 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, g;
+      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 m;
+        const E = i++;
+        l[E] = d, (m = u.get("selector2d")) == null || m.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 && ((g = r.get("onHover")) == null || g(f, n));
+    }
+  };
+}), S = v(() => ({
+  name: "canvas:transform2d",
+  register(o) {
+    o.registerNodeRenderer({
+      name: "transform2d",
+      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 sampler2D uSampler;
+varying vec2 vTextureCoord;
+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))
+        };
+      }
+    });
+  }
+})), X = [
+  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((g) => !g.include && !g.exclude || g.include && g.include(n, f) || g.exclude && !g.exclude(n, f));
+    for (let g = R.length, T = 0; T < g; T++) {
+      let d = null;
+      T < g - 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 C() {
+  const o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ 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 M(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 m = E.name.replace(/\[.*?]$/, "");
+    f[m] = {
+      type: t[E.type],
+      isArray: m !== E.name,
+      location: e.getAttribLocation(n, m)
+    };
+  }
+  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 m = E.name.replace(/\[.*?]$/, "");
+    R[m] = {
+      type: t[E.type],
+      isArray: m !== E.name,
+      location: e.getUniformLocation(n, m)
+    };
+  }
+  const g = {
+    ...r,
+    program: n,
+    attributes: f,
+    uniforms: R,
+    setAttributes(T) {
+      for (const [d, E] of Object.entries(T)) {
+        const m = f[d];
+        if (!m)
+          continue;
+        const { type: A, isArray: x, location: b } = m;
+        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, m] 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, m) : e.uniform1f(h, m);
+            break;
+          case "bool":
+          case "int":
+            b ? e.uniform1iv(h, m) : e.uniform1i(h, m);
+            break;
+          case "vec2":
+            e.uniform2fv(h, m);
+            break;
+          case "vec3":
+            e.uniform3fv(h, m);
+            break;
+          case "vec4":
+            e.uniform4fv(h, m);
+            break;
+          case "mat2":
+            e.uniformMatrix2fv(h, !1, m);
+            break;
+          case "mat3":
+            e.uniformMatrix3fv(h, !1, m);
+            break;
+          case "mat4":
+            e.uniformMatrix4fv(h, !1, m);
+            break;
+          case "sampler2D":
+            e.bindTexture(
+              e.TEXTURE_2D,
+              ((d = o.resources.get(m)) == null ? void 0 : d.texture) ?? o.glDefaultTexture
+            ), e.uniform1i(h, 0);
+            break;
+        }
+      }
+    }
+  };
+  l && g.setUniforms(l), a.set(c, g);
+}
+function I(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 y(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: g } = f;
+  R.setAttributes({ aPosition: g }), c.set(u, {
+    ...r,
+    shape: s,
+    material: n,
+    render: (T, d) => {
+      var p;
+      const E = a.get(s), m = t.get(n);
+      if (!E || !m)
+        return;
+      const { program: A } = m, { mode: x, count: b } = E;
+      e.useProgram(A);
+      const h = (p = r.update) == null ? void 0 : p.call(r, T, d);
+      h && m.setUniforms(h), e.drawArrays(x, 0, b);
+    }
+  });
+}
+function w(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 O(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 = C();
+  t.set("view", r), I(t, o), t.bind("width", () => t.gl.drawingBufferWidth), t.bind("height", () => t.gl.drawingBufferHeight), t.singleton("plugins", () => {
+    const s = /* @__PURE__ */ 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", /* @__PURE__ */ new Map()), t.set("registerShape", (s) => B(t, s)), t.set("materials", /* @__PURE__ */ new Map()), t.set("registerMaterial", (s) => M(t, s)), t.set("resources", /* @__PURE__ */ new Map()), t.set("registerResource", (s) => O(t, s)), t.set("nodeRenderers", /* @__PURE__ */ new Map()), t.set("registerNodeRenderer", (s) => y(t, s)), t.set("forEachNode", (s) => w(t, s)), t.set("load", async () => {
+    t.get("plugins");
+    const s = Array.from(t.nodeRenderers.values());
+    for (t.forEachNode((n, f) => {
+      s.filter((g) => !g.include && !g.exclude || g.include && g.include(n, f) || g.exclude && !g.exclude(n, f)).forEach((g) => {
+        var T;
+        return (T = g.update) == null ? void 0 : T.call(g, 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 *= 1e-3, 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;
+}
 export {
-  o as one
+  U as basePlugin,
+  G as createCanvas,
+  F as fadePlugin,
+  D as nodeImagePlugin,
+  N as nodeTextPlugin,
+  X as plugins,
+  L as selector2dPlugin,
+  S as transform2dPlugin
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "pnpm@7.26.2",
   "description": "A data driven modern canvas library",
   "author": "wxm",
@@ -45,21 +45,24 @@
     "types"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite docs",
     "lint": "eslint src",
     "test": "vitest --no-threads --no-isolate",
     "build": "vite build && tsc --project tsconfig.build.json",
+    "build:docs": "vite build docs",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "release": "bumpp package.json --commit \"release: v%s\" --push --all --tag"
   },
   "devDependencies": {
     "@qq15725/eslint-config": "^1.1.0",
     "@types/node": "^18.14.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "bumpp": "^8.2.1",
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.34.0",
     "typescript": "^4.9.5",
     "vite": "^4.1.2",
-    "vitest": "^0.28.5"
+    "vitest": "^0.28.5",
+    "vue": "^3.2.47"
   }
 }

package/types/canvas.d.ts

@@ -0,0 +1,42 @@
+import type { InternalResource, Resource } from './resource';
+import type { InternalShape, Shape } from './shape';
+import type { GlDrawModes, GlExtensions, GlFramebuffer, GlSlTypes } from './gl';
+import type { InternalNodeRenderer, NodeRenderer } from './node-renderer';
+import type { Node } from './node';
+import type { InternalMaterial, Material } from './material';
+import type { Plugin } from './plugin';
+import type { Container } from './container';
+export interface CanvasOptions extends WebGLContextAttributes {
+    view?: HTMLCanvasElement;
+    children?: Node[];
+    plugins?: Plugin[];
+}
+export interface Canvas extends Container {
+    view: HTMLCanvasElement;
+    children: Node[];
+    gl: WebGLRenderingContext;
+    glDefaultTexture: WebGLTexture;
+    glFramebuffers: GlFramebuffer[];
+    glDrawModes: GlDrawModes;
+    glSlTypes: GlSlTypes;
+    glExtensions: GlExtensions;
+    width: number;
+    height: number;
+    plugins: Map<string, Plugin>;
+    beforeRenderPlugins: Plugin[];
+    afterRenderPlugins: Plugin[];
+    shapes: Map<string, InternalShape>;
+    registerShape(shape: Shape): void;
+    materials: Map<string, InternalMaterial>;
+    registerMaterial(options: Material): void;
+    resources: Map<string, InternalResource>;
+    registerResource(options: Resource): void;
+    nodeRenderers: Map<string, InternalNodeRenderer>;
+    registerNodeRenderer(options: NodeRenderer): void;
+    forEachNode(callbackFn: (node: Node, path: number[]) => void): void;
+    load(): Promise<void>;
+    render(time?: number): void;
+    startRenderLoop(): void;
+    destroy(): void;
+}
+export declare function createCanvas(options?: CanvasOptions): Canvas;

package/types/container.d.ts

@@ -0,0 +1,14 @@
+export interface Container {
+    instances: Map<string, any>;
+    bindings: Map<string, {
+        value: () => any;
+        shared: boolean;
+    }>;
+    get<T = any>(key: string): T;
+    has(key: string): boolean;
+    set<T = any>(key: string, value: T): void;
+    bind<T = any>(key: string, value: () => T, shared?: boolean): void;
+    singleton<T = any>(key: string, value: () => T): void;
+    [key: string]: any;
+}
+export declare function createContainer(): Container;

package/types/gl.d.ts

@@ -0,0 +1,20 @@
+import type { Canvas } from './canvas';
+export interface GlDrawModes {
+    points: GLenum;
+    linear: GLenum;
+    triangles: GLenum;
+    triangleStrip: GLenum;
+    triangleFan: GLenum;
+}
+export type GlSlType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'int' | 'ivec2' | 'ivec3' | 'ivec4' | 'uint' | 'uvec2' | 'uvec3' | 'uvec4' | 'bool' | 'bvec2' | 'bvec3' | 'bvec4' | 'mat2' | 'mat3' | 'mat4' | 'sampler2D' | 'samplerCube' | 'sampler2DArray';
+export type GlSlTypes = Record<number, GlSlType>;
+export interface GlFramebuffer {
+    buffer: WebGLFramebuffer | null;
+    depthBuffer: WebGLRenderbuffer | null;
+    texture: WebGLTexture | null;
+    resize(): void;
+}
+export interface GlExtensions {
+    loseContext: WEBGL_lose_context | null;
+}
+export declare function provideGl(canvas: Canvas, options?: WebGLContextAttributes): void;

package/types/index.d.ts

@@ -1 +1,2 @@
-export declare const one = 1;
+export * from './plugins';
+export * from './canvas';

package/types/material.d.ts

@@ -0,0 +1,26 @@
+import type { GlSlType } from './gl';
+import type { Canvas } from './canvas';
+export interface Material {
+    name: string;
+    vertexShader: string;
+    fragmentShader: string;
+    uniforms?: Record<string, any>;
+}
+export type InternalMaterial = Material & {
+    program: WebGLProgram;
+    attributes: Record<string, MaterialAttribute>;
+    uniforms: Record<string, MaterialUniform>;
+    setAttributes(attributes: Record<string, any>): void;
+    setUniforms(uniforms: Record<string, any>): void;
+};
+export interface MaterialAttribute {
+    type: GlSlType;
+    isArray: boolean;
+    location: GLint;
+}
+export interface MaterialUniform {
+    type: GlSlType;
+    isArray: boolean;
+    location: WebGLUniformLocation | null;
+}
+export declare function registerMaterial(canvas: Canvas, material: Material): void;

package/types/node-renderer.d.ts

@@ -0,0 +1,18 @@
+import type { Canvas } from './canvas';
+import type { Material } from './material';
+import type { Shape } from './shape';
+import type { Node } from './node';
+export interface NodeRenderer {
+    name: string;
+    include?: (node: Node, path: number[]) => boolean;
+    exclude?: (node: Node, path: number[]) => boolean;
+    shape: string | Omit<Shape, 'name'>;
+    material: string | Omit<Material, 'name'>;
+    update?(node: Node, time: number): undefined | Record<string, any>;
+}
+export interface InternalNodeRenderer extends NodeRenderer {
+    shape: string;
+    material: string;
+    render(node: Node, time: number): void;
+}
+export declare function registerNodeRenderer(canvas: Canvas, renderer: NodeRenderer): void;

package/types/node.d.ts

@@ -0,0 +1,10 @@
+import type { Canvas } from './canvas';
+export interface Node {
+    [key: string]: any;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    children?: Node[];
+}
+export declare function forEachNode(canvas: Canvas, callbackFn: (node: Node, path: number[]) => void): void;

package/types/plugin.d.ts

@@ -0,0 +1,8 @@
+import type { Canvas } from './canvas';
+export interface Plugin {
+    name: string;
+    register?(canvas: Canvas): void;
+    beforeRender?(canvas: Canvas): void;
+    afterRender?(canvas: Canvas): void;
+}
+export declare function definePlugin(plugin: Plugin | (() => Plugin)): Plugin;

package/types/plugins/base.d.ts

@@ -0,0 +1 @@
+export declare const basePlugin: import("../plugin").Plugin;

package/types/plugins/fade.d.ts

@@ -0,0 +1 @@
+export declare const fadePlugin: import("../plugin").Plugin;

package/types/plugins/index.d.ts

@@ -0,0 +1,7 @@
+export * from './base';
+export * from './fade';
+export * from './node-image';
+export * from './node-text';
+export * from './selector2d';
+export * from './transform2d';
+export declare const plugins: import("../plugin").Plugin[];

package/types/plugins/node-image.d.ts

@@ -0,0 +1 @@
+export declare const nodeImagePlugin: import("../plugin").Plugin;

package/types/plugins/node-text.d.ts

@@ -0,0 +1 @@
+export declare const nodeTextPlugin: import("../plugin").Plugin;

package/types/plugins/selector2d.d.ts

@@ -0,0 +1 @@
+export declare const selector2dPlugin: import("../plugin").Plugin;

package/types/plugins/transform2d.d.ts

@@ -0,0 +1 @@
+export declare const transform2dPlugin: import("../plugin").Plugin;

package/types/render.d.ts

@@ -0,0 +1,2 @@
+import type { Canvas } from './canvas';
+export declare function render(canvas: Canvas, time?: number): void;

package/types/resource.d.ts

@@ -0,0 +1,10 @@
+import type { Canvas } from './canvas';
+export interface Resource {
+    name: string;
+    data: TexImageSource;
+}
+export type InternalResource = {
+    loading: boolean;
+    texture: WebGLTexture | null;
+};
+export declare function registerResource(canvas: Canvas, resource: Resource): void;

package/types/shape.d.ts

@@ -0,0 +1,14 @@
+import type { GlDrawModes } from './gl';
+import type { Canvas } from './canvas';
+export interface Shape {
+    name: string;
+    type?: '2d' | '3d';
+    mode?: keyof GlDrawModes;
+    data?: Uint8Array | Uint8ClampedArray | Uint16Array | Uint32Array | Int8Array | Int16Array | Int32Array | BigUint64Array | BigInt64Array | Float32Array | Float64Array;
+}
+export interface InternalShape {
+    mode: GLenum;
+    count: number;
+    buffer: WebGLBuffer | null;
+}
+export declare function registerShape(canvas: Canvas, shape: Shape): void;

package/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './matrix3';

package/types/utils/matrix3.d.ts

@@ -0,0 +1,7 @@
+export declare class Matrix3 extends Float32Array {
+    static identity(): Matrix3;
+    static translation(tx: number, ty: number): Matrix3;
+    static rotation(radians: number): Matrix3;
+    static scaling(sx: number, sy: number): Matrix3;
+    multiply(matrix3: Matrix3): this;
+}