litecanvas 0.200.0 → 0.201.0

package/dist/dist.dev.js

@@ -115,7 +115,7 @@
   var assert = (condition, message = "Assertion failed") => {
     if (!condition) throw new Error("[litecanvas] " + message);
   };
-  var version = "0.200.0";
+  var version = "0.201.0";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -165,7 +165,6 @@
       _colorPalette = defaultPalette,
       _colorPaletteState = [],
       _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-      _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized",
       _mathFunctions =
         "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp",
       _eventListeners = {};
@@ -686,7 +685,7 @@
         if (align) _ctx.textAlign = align;
         if (baseline) _ctx.textBaseline = baseline;
       },
-      image(x, y, source2) {
+      image(x, y, source) {
         DEV: assert(
           isNumber(x),
           loggerPrefix + "image() 1st param must be a number",
@@ -695,7 +694,7 @@
           isNumber(y),
           loggerPrefix + "image() 2nd param must be a number",
         );
-        _ctx.drawImage(source2, ~~x, ~~y);
+        _ctx.drawImage(source, ~~x, ~~y);
       },
       spr(x, y, pixels) {
         DEV: assert(
@@ -916,6 +915,9 @@
         if (_initialized) {
           eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
+          if (!settings.loop && "function" === typeof root[eventName]) {
+            root[eventName](arg1, arg2, arg3, arg4);
+          }
           triggerEvent(eventName, arg1, arg2, arg3, arg4);
           triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
         }
@@ -1229,9 +1231,9 @@
       }
       _canvas = _canvas || document.createElement("canvas");
       DEV: assert(
-        "CANVAS" === _canvas.tagName,
+        _canvas instanceof HTMLElement && "CANVAS" === _canvas.tagName,
         loggerPrefix +
-          'litecanvas() option "canvas" should be a canvas element or string (CSS selector)',
+          'litecanvas() option "canvas" should be a canvas element or string (CSS selector of a canvas)',
       );
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => focus());
@@ -1284,9 +1286,10 @@
       instance.emit("resized", _canvasScale);
     }
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
-      if (!_eventListeners[eventName]) return;
-      for (const callback of _eventListeners[eventName]) {
-        callback(arg1, arg2, arg3, arg4);
+      if (_eventListeners[eventName]) {
+        for (const callback of _eventListeners[eventName]) {
+          callback(arg1, arg2, arg3, arg4);
+        }
       }
     }
     function loadPlugin(callback, config) {
@@ -1314,12 +1317,11 @@
     DEV: console.info(loggerPrefix + `version ${version} started`);
     DEV: console.debug(loggerPrefix + `litecanvas() options =`, settings);
     setupCanvas();
-    const source = settings.loop ? settings.loop : root;
-    for (const event of _coreEvents.split(",")) {
-      DEV: if (root === source && source[event]) {
-        console.info(loggerPrefix + `using window.${event}()`);
+    if (settings.loop) {
+      for (const eventName in settings.loop) {
+        if (settings.loop[eventName])
+          instance.listen(eventName, settings.loop[eventName]);
       }
-      if (source[event]) instance.listen(event, source[event]);
     }
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));

package/dist/dist.js

@@ -161,7 +161,6 @@
       _colorPalette = defaultPalette,
       _colorPaletteState = [],
       _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-      _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized",
       _mathFunctions =
         "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp",
       _eventListeners = {};
@@ -316,8 +315,8 @@
         if (align) _ctx.textAlign = align;
         if (baseline) _ctx.textBaseline = baseline;
       },
-      image(x, y, source2) {
-        _ctx.drawImage(source2, ~~x, ~~y);
+      image(x, y, source) {
+        _ctx.drawImage(source, ~~x, ~~y);
       },
       spr(x, y, pixels) {
         const rows = pixels.trim().split("\n");
@@ -424,6 +423,9 @@
         if (_initialized) {
           eventName = lowerCase(eventName);
           triggerEvent("before:" + eventName, arg1, arg2, arg3, arg4);
+          if (!settings.loop && "function" === typeof root[eventName]) {
+            root[eventName](arg1, arg2, arg3, arg4);
+          }
           triggerEvent(eventName, arg1, arg2, arg3, arg4);
           triggerEvent("after:" + eventName, arg1, arg2, arg3, arg4);
         }
@@ -702,9 +704,10 @@
       instance.emit("resized", _canvasScale);
     }
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
-      if (!_eventListeners[eventName]) return;
-      for (const callback of _eventListeners[eventName]) {
-        callback(arg1, arg2, arg3, arg4);
+      if (_eventListeners[eventName]) {
+        for (const callback of _eventListeners[eventName]) {
+          callback(arg1, arg2, arg3, arg4);
+        }
       }
     }
     function loadPlugin(callback, config) {
@@ -725,9 +728,11 @@
       root.ENGINE = instance;
     }
     setupCanvas();
-    const source = settings.loop ? settings.loop : root;
-    for (const event of _coreEvents.split(",")) {
-      if (source[event]) instance.listen(event, source[event]);
+    if (settings.loop) {
+      for (const eventName in settings.loop) {
+        if (settings.loop[eventName])
+          instance.listen(eventName, settings.loop[eventName]);
+      }
     }
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,a)=>{e.addEventListener(t,a,!1),s.push(()=>e.removeEventListener(t,a,!1))},d=(a=new AudioContext,l.zzfxV=1,(e=1,t=.05,n=220,i=0,o=0,r=.1,s=0,f=1,d=0,c=0,p=0,u=0,h=0,g=0,m=0,v=0,w=0,x=1,y=0,b=0,k=0)=>{let z=Math,E=2*z.PI,P=d*=500*E/44100/44100,T=n*=(1-t+2*t*z.random(t=[]))*E/44100,C=0,I=0,L=0,D=1,S=0,A=0,M=0,H=k<0?-1:1,N=E*H*k*2/44100,W=z.cos(N),q=z.sin,B=q(N)/4,O=1+B,V=-2*W/O,R=(1-B)/O,F=(1+H*W)/2/O,G=-(H+W)/O,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,w*=44100,c*=500*E/85766121e6,m*=E/44100,p*=E/44100,u*=44100,h=44100*h|0,e*=.3*l.zzfxV,H=i+y+o+r+w|0;L<H;t[L++]=M*e)++A%(100*v|0)||(M=s?1<s?2<s?3<s?q(C*C):z.max(z.min(z.tan(C),1),-1):1-(2*C/E%2+2)%2:1-4*z.abs(z.round(C/E)-C/E):q(C),M=(h?1-b+b*q(E*L/h):1)*(M<0?-1:1)*z.abs(M)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<H-w?(H-L-w)/r*x:0),M=w?M/2+(w>L?0:(L<H-w?1:(H-L)/w)*t[L-w|0]/2/e):M,k&&(M=j=F*X+G*(X=Y)+F*(Y=M)-R*$-V*($=j))),C+=(N=(n+=d+=c)*z.cos(m*I++))+N*g*q(L**5),D&&++D>u&&(n+=p,T+=p,D=0),!h||++S%h||(n=T,d=P,D=D||1);(e=a.createBuffer(1,H,44100)).getChannelData(0).set(t),(n=a.createBufferSource()).buffer=e,n.connect(a.destination),n.start()});t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let c=!1,p=!0,u,h=1,g,m=.5,v=1,w,x=1e3/60,y,b,k=3,z="sans-serif",E=20,P=1.2,T=Date.now(),C=e,I=[],L=[.5,0,1750,,,.3,1,,,,600,.1],D={},S={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let a=10**t;return n.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,dist:(e,t,a,l)=>n.hypot(a-e,l-t),wrap:(e,t,a)=>e-(a-t)*n.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?S.clamp(o,l,n):o},norm:(e,t,a)=>S.map(e,t,a,0,1),rand:(e=0,t=1)=>(T=(1664525*T+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~S.rand(e,t+1),rseed(e){T=~~e},cls(e){null==e?g.clearRect(0,0,S.W,S.H):S.rectfill(0,0,S.W,S.H,e)},rect(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-m,~~t-m,~~a+2*m,~~l+2*m,i),S.stroke(n)},rectfill(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),S.fill(n)},circ(e,t,a,l){g.beginPath(),g.arc(~~e,~~t,~~a,0,o),S.stroke(l)},circfill(e,t,a,l){g.beginPath(),g.arc(~~e,~~t,~~a,0,o),S.fill(l)},oval(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.stroke(n)},ovalfill(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.fill(n)},shape(e){g.beginPath();for(let t=0;t<e.length;t+=2)0===t?g.moveTo(~~e[t],~~e[t+1]):g.lineTo(~~e[t],~~e[t+1]);g.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){g.beginPath();let i=.5*(0!==m&&~~e==~~a),o=.5*(0!==m&&~~t==~~l);g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),S.stroke(n)},linewidth(e){g.lineWidth=~~e,m=.5*(0!=~~e%2)},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,a,l=k,n="normal"){g.font=`${n} ${E}px ${z}`,g.fillStyle=W(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)g.fillText(i[a],~~e,~~t+E*P*a)},textgap(e){P=e},textfont(e){z=e},textsize(e){E=e},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},image(e,t,a){g.drawImage(a,~~e,~~t)},spr(e,t,a){let l=a.trim().split("\n");for(let a=0;a<l.length;a++){let n=l[a].trim();for(let l=0;l<n.length;l++){let i=n[l];"."!==i&&" "!==i&&S.rectfill(e+l,t+a,1,1,parseInt(i,36)||0)}}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=g;return n.width=e*i,n.height=t*i,(g=n.getContext("2d")).scale(i,i),a(g),g=o,n.transferToImageBitmap()},ctx:e=>(e&&(g=e),g),push(){g.save()},pop(){g.restore()},translate(e,t){g.translate(~~e,~~t)},scale(e,t){g.scale(e,t||e)},rotate(e){g.rotate(e)},alpha(e){g.globalAlpha=S.clamp(e,0,1)},fill(e){g.fillStyle=W(e),g.fill()},stroke(e){g.strokeStyle=W(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t=0,a=1)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||L,(0!==t||1!==a)&&((e=e.slice())[0]=a*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){l.zzfxV=e},canvas:()=>u,use(e,t={}){var a=e,l=t;let n=a(S,l);for(let e in n)S.def(e,n[e])},listen:(e,t)=>{D[e=e.toLowerCase()]=D[e]||new Set,D[e].add(t)},unlisten:(e,t)=>{D[e=e.toLowerCase()]&&D[e].delete(t)},emit(e,t,a,l,n){c&&(N("before:"+(e=e.toLowerCase()),t,a,l,n),N(e,t,a,l,n),N("after:"+e,t,a,l,n))},pal(t,a=3){C=t||e,I=[],k=a},palc(e,t){null==e?I=[]:I[e]=t},def(e,a){S[e]=a,t.global&&(l[e]=a)},timescale(e){v=e},framerate(e){x=1e3/~~e},stat(e){let a={index:e,value:[t,c,x/1e3,h,D,C,L,v,l.zzfxV,T,E,z,I,P][e]};return S.emit("stat",a),a.value},pause(){p=!0,cancelAnimationFrame(b)},resume(){c&&p&&(p=!1,y=x,w=i.now(),b=r(M))},paused:()=>p,quit(){for(let e of(S.emit("quit"),S.pause(),c=!1,D={},s))e();if(t.global){for(let e in S)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=n[e];function A(){if(t.autoscale&&f(l,"resize",H),t.tapEvents){let e=e=>[(e.pageX-u.offsetLeft)/h,(e.pageY-u.offsetTop)/h],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:i.now()};return t.set(e,n),n},n=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},o=e=>e&&i.now()-e.t<=300,r=!1;f(u,"mousedown",t=>{if(0===t.button){t.preventDefault();let[l,n]=e(t);S.emit("tap",l,n,0),a(0,l,n),r=!0}}),f(u,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,i]=e(a);o(l)&&S.emit("tapped",l.xi,l.yi,0),S.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);S.def("MX",a),S.def("MY",l),r&&(S.emit("tapping",a,l,0),n(0,a,l))}),f(u,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);S.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),f(u,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a);S.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(o(l)&&S.emit("tapped",l.xi,l.yi,e),S.emit("untap",l.x,l.y,e),t.delete(e))};f(u,"touchend",s),f(u,"touchcancel",s),f(l,"blur",()=>{for(let[e,a]of(r=!1,t))S.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";f(l,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),f(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),f(l,"blur",()=>e.clear()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>a(e,t)),S.def("iskeypressed",e=>a(t,e)),S.def("lastkey",()=>n)}c=!0,S.resume(),S.emit("init",S)}function M(){b=r(M);let e=i.now(),t=0,a=e-w;for(w=e,y+=a<100?a:x;y>=x;){t++,y-=x;let e=x/1e3*v;S.emit("update",e,t),S.def("T",S.T+e)}t&&(S.emit("draw",g),t>1&&(y=0))}function H(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(S.def("W",e),S.def("H",a),u.width=e,u.height=a,t.autoscale){let l=+t.autoscale;u.style.display||(u.style.display="block",u.style.margin="auto"),h=n.min(innerWidth/e,innerHeight/a),h=l>1&&h>l?l:h,u.style.width=e*h+"px",u.style.height=a*h+"px"}g.imageSmoothingEnabled=!1,S.textalign("start","top"),S.emit("resized",h)}function N(e,t,a,l,n){if(D[e])for(let i of D[e])i(t,a,l,n)}function W(e){return C[~~(I[e]??e)%C.length]}if(t.global){if(l.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(l,S),l.ENGINE=S}g=(u=(u="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),f(u,"click",()=>focus()),H(),u.parentNode||document.body.appendChild(u),u.style.imageRendering="pixelated",u.oncontextmenu=()=>!1;let q=t.loop?t.loop:l;for(let e of"init,update,draw,tap,untap,tapping,tapped,resized".split(","))q[e]&&S.listen(e,q[e]);return"loading"===document.readyState?f(l,"DOMContentLoaded",()=>r(A)):b=r(A),S}})();
+(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,a)=>{e.addEventListener(t,a,!1),s.push(()=>e.removeEventListener(t,a,!1))},d=(a=new AudioContext,l.zzfxV=1,(e=1,t=.05,n=220,i=0,o=0,r=.1,s=0,f=1,d=0,c=0,u=0,p=0,h=0,m=0,g=0,v=0,w=0,x=1,y=0,b=0,k=0)=>{let E=Math,P=2*E.PI,T=d*=500*P/44100/44100,z=n*=(1-t+2*t*E.random(t=[]))*P/44100,C=0,I=0,L=0,D=1,S=0,A=0,M=0,H=k<0?-1:1,N=P*H*k*2/44100,W=E.cos(N),q=E.sin,B=q(N)/4,O=1+B,V=-2*W/O,R=(1-B)/O,F=(1+H*W)/2/O,G=-(H+W)/O,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,w*=44100,c*=500*P/85766121e6,g*=P/44100,u*=P/44100,p*=44100,h=44100*h|0,e*=.3*l.zzfxV,H=i+y+o+r+w|0;L<H;t[L++]=M*e)++A%(100*v|0)||(M=s?1<s?2<s?3<s?q(C*C):E.max(E.min(E.tan(C),1),-1):1-(2*C/P%2+2)%2:1-4*E.abs(E.round(C/P)-C/P):q(C),M=(h?1-b+b*q(P*L/h):1)*(M<0?-1:1)*E.abs(M)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<H-w?(H-L-w)/r*x:0),M=w?M/2+(w>L?0:(L<H-w?1:(H-L)/w)*t[L-w|0]/2/e):M,k&&(M=j=F*X+G*(X=Y)+F*(Y=M)-R*$-V*($=j))),C+=(N=(n+=d+=c)*E.cos(g*I++))+N*m*q(L**5),D&&++D>p&&(n+=u,z+=u,D=0),!h||++S%h||(n=z,d=T,D=D||1);(e=a.createBuffer(1,H,44100)).getChannelData(0).set(t),(n=a.createBufferSource()).buffer=e,n.connect(a.destination),n.start()});t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let c=!1,u=!0,p,h=1,m,g=.5,v=1,w,x=1e3/60,y,b,k=3,E="sans-serif",P=20,T=1.2,z=Date.now(),C=e,I=[],L=[.5,0,1750,,,.3,1,,,,600,.1],D={},S={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let a=10**t;return n.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,dist:(e,t,a,l)=>n.hypot(a-e,l-t),wrap:(e,t,a)=>e-(a-t)*n.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?S.clamp(o,l,n):o},norm:(e,t,a)=>S.map(e,t,a,0,1),rand:(e=0,t=1)=>(z=(1664525*z+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~S.rand(e,t+1),rseed(e){z=~~e},cls(e){null==e?m.clearRect(0,0,S.W,S.H):S.rectfill(0,0,S.W,S.H,e)},rect(e,t,a,l,n,i){m.beginPath(),m[i?"roundRect":"rect"](~~e-g,~~t-g,~~a+2*g,~~l+2*g,i),S.stroke(n)},rectfill(e,t,a,l,n,i){m.beginPath(),m[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),S.fill(n)},circ(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,o),S.stroke(l)},circfill(e,t,a,l){m.beginPath(),m.arc(~~e,~~t,~~a,0,o),S.fill(l)},oval(e,t,a,l,n){m.beginPath(),m.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.stroke(n)},ovalfill(e,t,a,l,n){m.beginPath(),m.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.fill(n)},shape(e){m.beginPath();for(let t=0;t<e.length;t+=2)0===t?m.moveTo(~~e[t],~~e[t+1]):m.lineTo(~~e[t],~~e[t+1]);m.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){m.beginPath();let i=.5*(0!==g&&~~e==~~a),o=.5*(0!==g&&~~t==~~l);m.moveTo(~~e+i,~~t+o),m.lineTo(~~a+i,~~l+o),S.stroke(n)},linewidth(e){m.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,a,l=k,n="normal"){m.font=`${n} ${P}px ${E}`,m.fillStyle=W(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)m.fillText(i[a],~~e,~~t+P*T*a)},textgap(e){T=e},textfont(e){E=e},textsize(e){P=e},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},image(e,t,a){m.drawImage(a,~~e,~~t)},spr(e,t,a){let l=a.trim().split("\n");for(let a=0;a<l.length;a++){let n=l[a].trim();for(let l=0;l<n.length;l++){let i=n[l];"."!==i&&" "!==i&&S.rectfill(e+l,t+a,1,1,parseInt(i,36)||0)}}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=m;return n.width=e*i,n.height=t*i,(m=n.getContext("2d")).scale(i,i),a(m),m=o,n.transferToImageBitmap()},ctx:e=>(e&&(m=e),m),push(){m.save()},pop(){m.restore()},translate(e,t){m.translate(~~e,~~t)},scale(e,t){m.scale(e,t||e)},rotate(e){m.rotate(e)},alpha(e){m.globalAlpha=S.clamp(e,0,1)},fill(e){m.fillStyle=W(e),m.fill()},stroke(e){m.strokeStyle=W(e),m.stroke()},clip(e){m.beginPath(),e(m),m.clip()},sfx:(e,t=0,a=1)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||L,(0!==t||1!==a)&&((e=e.slice())[0]=a*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){l.zzfxV=e},canvas:()=>p,use(e,t={}){var a=e,l=t;let n=a(S,l);for(let e in n)S.def(e,n[e])},listen:(e,t)=>{D[e=e.toLowerCase()]=D[e]||new Set,D[e].add(t)},unlisten:(e,t)=>{D[e=e.toLowerCase()]&&D[e].delete(t)},emit(e,a,n,i,o){c&&(N("before:"+(e=e.toLowerCase()),a,n,i,o),t.loop||"function"!=typeof l[e]||l[e](a,n,i,o),N(e,a,n,i,o),N("after:"+e,a,n,i,o))},pal(t,a=3){C=t||e,I=[],k=a},palc(e,t){null==e?I=[]:I[e]=t},def(e,a){S[e]=a,t.global&&(l[e]=a)},timescale(e){v=e},framerate(e){x=1e3/~~e},stat(e){let a={index:e,value:[t,c,x/1e3,h,D,C,L,v,l.zzfxV,z,P,E,I,T][e]};return S.emit("stat",a),a.value},pause(){u=!0,cancelAnimationFrame(b)},resume(){c&&u&&(u=!1,y=x,w=i.now(),b=r(M))},paused:()=>u,quit(){for(let e of(S.emit("quit"),S.pause(),c=!1,D={},s))e();if(t.global){for(let e in S)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=n[e];function A(){if(t.autoscale&&f(l,"resize",H),t.tapEvents){let e=e=>[(e.pageX-p.offsetLeft)/h,(e.pageY-p.offsetTop)/h],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:i.now()};return t.set(e,n),n},n=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},o=e=>e&&i.now()-e.t<=300,r=!1;f(p,"mousedown",t=>{if(0===t.button){t.preventDefault();let[l,n]=e(t);S.emit("tap",l,n,0),a(0,l,n),r=!0}}),f(p,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,i]=e(a);o(l)&&S.emit("tapped",l.xi,l.yi,0),S.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);S.def("MX",a),S.def("MY",l),r&&(S.emit("tapping",a,l,0),n(0,a,l))}),f(p,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);S.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),f(p,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a);S.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(o(l)&&S.emit("tapped",l.xi,l.yi,e),S.emit("untap",l.x,l.y,e),t.delete(e))};f(p,"touchend",s),f(p,"touchcancel",s),f(l,"blur",()=>{for(let[e,a]of(r=!1,t))S.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";f(l,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),f(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),f(l,"blur",()=>e.clear()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>a(e,t)),S.def("iskeypressed",e=>a(t,e)),S.def("lastkey",()=>n)}c=!0,S.resume(),S.emit("init",S)}function M(){b=r(M);let e=i.now(),t=0,a=e-w;for(w=e,y+=a<100?a:x;y>=x;){t++,y-=x;let e=x/1e3*v;S.emit("update",e,t),S.def("T",S.T+e)}t&&(S.emit("draw",m),t>1&&(y=0))}function H(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(S.def("W",e),S.def("H",a),p.width=e,p.height=a,t.autoscale){let l=+t.autoscale;p.style.display||(p.style.display="block",p.style.margin="auto"),h=n.min(innerWidth/e,innerHeight/a),h=l>1&&h>l?l:h,p.style.width=e*h+"px",p.style.height=a*h+"px"}m.imageSmoothingEnabled=!1,S.textalign("start","top"),S.emit("resized",h)}function N(e,t,a,l,n){if(D[e])for(let i of D[e])i(t,a,l,n)}function W(e){return C[~~(I[e]??e)%C.length]}if(t.global){if(l.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(l,S),l.ENGINE=S}if(m=(p=(p="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),f(p,"click",()=>focus()),H(),p.parentNode||document.body.appendChild(p),p.style.imageRendering="pixelated",p.oncontextmenu=()=>!1,t.loop)for(let e in t.loop)t.loop[e]&&S.listen(e,t.loop[e]);return"loading"===document.readyState?f(l,"DOMContentLoaded",()=>r(A)):b=r(A),S}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.200.0",
+    "version": "0.201.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

package/src/index.js

@@ -86,8 +86,6 @@ export default function litecanvas(settings = {}) {
         _colorPaletteState = [],
         /** @type {number[]} */
         _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-        /** @type {string} */
-        _coreEvents = 'init,update,draw,tap,untap,tapping,tapped,resized',
         /** @type {string} list of functions copied from `Math` module*/
         _mathFunctions =
             'PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp',
@@ -1075,7 +1073,7 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Add a game event listener
+         * Add a game event listener.
          *
          * @param {string} eventName the event type name
          * @param {Function} callback the function that is called when the event occurs
@@ -1097,7 +1095,7 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Remove a game event listener
+         * Remove a game event listener.
          *
          * @param {string} eventName the event type name
          * @param {Function} callback the function that is called when the event occurs
@@ -1120,13 +1118,17 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Call all listeners attached to a game event
+         * Call all listeners attached to a game event.
+         *
+         * Note: when the `litecanvas()` "loop" option is `null` (default),
+         * `emit()` will first call a global function matching the event name (if it exists).
+         * E.g: `emit("boom")` calls `window.boom()`.
          *
          * @param {string} eventName The event type name
-         * @param {*} [arg1] any data to be passed over the listeners
-         * @param {*} [arg2] any data to be passed over the listeners
-         * @param {*} [arg3] any data to be passed over the listeners
-         * @param {*} [arg4] any data to be passed over the listeners
+         * @param {any} [arg1] any data to be passed over the listeners
+         * @param {any} [arg2] any data to be passed over the listeners
+         * @param {any} [arg3] any data to be passed over the listeners
+         * @param {any} [arg4] any data to be passed over the listeners
          */
         emit(eventName, arg1, arg2, arg3, arg4) {
             DEV: assert(
@@ -1138,7 +1140,12 @@ export default function litecanvas(settings = {}) {
                 eventName = lowerCase(eventName)
 
                 triggerEvent('before:' + eventName, arg1, arg2, arg3, arg4)
+
+                if (!settings.loop && 'function' === typeof root[eventName]) {
+                    root[eventName](arg1, arg2, arg3, arg4)
+                }
                 triggerEvent(eventName, arg1, arg2, arg3, arg4)
+
                 triggerEvent('after:' + eventName, arg1, arg2, arg3, arg4)
             }
         },
@@ -1194,8 +1201,13 @@ export default function litecanvas(settings = {}) {
         /**
          * Define or update a instance property.
          *
-         * @param {string} key
-         * @param {*} value
+         * Note: when the `litecanvas()` option "global" is `true` (default),
+         * `def()` with set/update a global property.
+         *
+         * E.g: `def('ONE', 1)` do `window.ONE = 1`.
+         *
+         * @param {string} key the property name
+         * @param {any} value the property value
          */
         def(key, value) {
             DEV: assert('string' === typeof key, loggerPrefix + 'def() 1st param must be a string')
@@ -1682,9 +1694,9 @@ export default function litecanvas(settings = {}) {
         _canvas = _canvas || document.createElement('canvas')
 
         DEV: assert(
-            'CANVAS' === _canvas.tagName,
+            _canvas instanceof HTMLElement && 'CANVAS' === _canvas.tagName,
             loggerPrefix +
-                'litecanvas() option "canvas" should be a canvas element or string (CSS selector)'
+                'litecanvas() option "canvas" should be a canvas element or string (CSS selector of a canvas)'
         )
 
         _ctx = _canvas.getContext('2d')
@@ -1698,6 +1710,8 @@ export default function litecanvas(settings = {}) {
         }
 
         _canvas.style.imageRendering = 'pixelated'
+
+        // disable default browser's right click in canvas
         _canvas.oncontextmenu = () => false
     }
 
@@ -1752,21 +1766,22 @@ export default function litecanvas(settings = {}) {
 
     /**
      * @param {string} eventName
-     * @param {*} arg1
-     * @param {*} arg2
-     * @param {*} arg3
-     * @param {*} arg4
+     * @param {any} [arg1]
+     * @param {any} [arg2]
+     * @param {any} [arg3]
+     * @param {any} [arg4]
      */
     function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
-        if (!_eventListeners[eventName]) return
-        for (const callback of _eventListeners[eventName]) {
-            callback(arg1, arg2, arg3, arg4)
+        if (_eventListeners[eventName]) {
+            for (const callback of _eventListeners[eventName]) {
+                callback(arg1, arg2, arg3, arg4)
+            }
         }
     }
 
     /**
      * @param {pluginCallback} callback
-     * @param {*} config
+     * @param {any} config
      */
     function loadPlugin(callback, config) {
         const pluginData = callback(instance, config)
@@ -1805,12 +1820,10 @@ export default function litecanvas(settings = {}) {
     setupCanvas()
 
     // setup default event listeners
-    const source = settings.loop ? settings.loop : root
-    for (const event of _coreEvents.split(',')) {
-        DEV: if (root === source && source[event]) {
-            console.info(loggerPrefix + `using window.${event}()`)
+    if (settings.loop) {
+        for (const eventName in settings.loop) {
+            if (settings.loop[eventName]) instance.listen(eventName, settings.loop[eventName])
         }
-        if (source[event]) instance.listen(event, source[event])
     }
 
     // init the engine (async)

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.200.0'
+export const version = '0.201.0'

package/types/global.d.ts

@@ -547,21 +547,25 @@ declare global {
      */
     function use(callback: pluginCallback): void
     /**
-     * Add a game loop event listener
+     * Add a game loop event listener.
      *
      * @param event The game event type
      * @param callback the function that is called when the event occurs
      */
     function listen(event: string, callback: Function): void
     /**
-     * Remove a game loop event listener
+     * Remove a game loop event listener.
      *
      * @param event The game event type
      * @param callback the function that is called when the event occurs
      */
     function unlisten(event: string, callback: Function): void
     /**
-     * Call all listeners attached to a game event
+     * Call all listeners attached to a game event.
+     *
+     * Note: when the `litecanvas()` "loop" option is `null` (default),
+     * `emit()` will first call a global function matching the event name (if it exists).
+     * E.g: `emit("boom", 10)` calls `window.boom(10)`.
      *
      * @param event The game event type
      * @param [arg1] any data to be passed over the listeners
@@ -589,10 +593,14 @@ declare global {
      */
     function palc(a?: number, b?: number): void
     /**
-     * Define or update a instance property
+     * Define or update a instance property.
      *
-     * @param key
-     * @param value
+     * Note: when the `litecanvas()` option "global" is `true` (default),
+     * `def()` with set/update a global property.
+     * E.g: `def('ONE', 1)` also do `window.ONE = 1`.
+     *
+     * @param key the property name
+     * @param value the property value
      */
     function def(key: string, value: any): void
     /**

package/types/types.d.ts

@@ -531,21 +531,25 @@ type LitecanvasInstance = {
      */
     use(callback: pluginCallback): void
     /**
-     * Add a game loop event listener
+     * Add a game loop event listener.
      *
      * @param event The game event type
      * @param callback the function that is called when the event occurs
      */
     listen(event: string, callback: Function): void
     /**
-     * Remove a game loop event listener
+     * Remove a game loop event listener.
      *
      * @param event The game event type
      * @param callback the function that is called when the event occurs
      */
     unlisten(event: string, callback: Function): void
     /**
-     * Call all listeners attached to a game event
+     * Call all listeners attached to a game event.
+     *
+     * Note: when the `litecanvas()` "loop" option is `null` (default),
+     * `emit()` will first call a global function matching the event name (if it exists).
+     * E.g: `emit("boom", 10)` calls `window.boom(10)`.
      *
      * @param event The game event type
      * @param [arg1] any data to be passed over the listeners
@@ -555,10 +559,14 @@ type LitecanvasInstance = {
      */
     emit(event: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any): void
     /**
-     * Define or update a instance property
+     * Define or update a instance property.
      *
-     * @param key
-     * @param value
+     * Note: when the `litecanvas()` option "global" is `true` (default),
+     * `def()` with set/update a global property.
+     * E.g: `def('ONE', 1)` also do `window.ONE = 1`.
+     *
+     * @param key the property name
+     * @param value the property value
      */
     def(key: string, value: any): void
     /**
@@ -658,19 +666,13 @@ type LitecanvasOptions = {
      */
     global?: boolean
     /**
-     * Specify your game loop callbacks.
-     * By default use that global functions (if they exist):
-     * - `window.init(instance: LitecanvasInstance): void`
-     * - `window.update(dt: number): void`
-     * - `window.draw(ctx: CanvasRenderingContext2D): void`
-     * - `window.resized(scale: number): void`
-     * - `window.tap(tapX: number, tapY: number, touchId: number): void`
-     * - `window.untap(tapX: number, tapY: number, touchId: number): void`
-     * - `window.tapped(tapX: number, tapY: number, touchId: number): void`
-     * - `window.tapping(tapX: number, tapY: number, touchId: number): void`
+     * Specify your game loop listener callbacks.
+     *
+     * By default, it uses global functions with the same name as the events (if they exist).
+     *
+     * Example: `window.init`, `window.update`, `window.draw`, etc
      */
     loop?: LitecanvasGameLoop
-
     /**
      * default: `true`
      *