litecanvas 0.209.0 → 0.301.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/dist/dist.dev.js +174 -160
- package/dist/dist.js +18 -14
- package/dist/dist.min.js +1 -1
- package/package.json +4 -4
- package/src/index.js +190 -172
- package/src/version.js +1 -1
- package/types/global.d.ts +11 -11
- package/types/types.d.ts +11 -11
package/dist/dist.js
CHANGED
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
const root = window,
|
|
117
117
|
math = Math,
|
|
118
118
|
perf = performance,
|
|
119
|
-
|
|
119
|
+
TAU = math.PI * 2,
|
|
120
120
|
raf = requestAnimationFrame,
|
|
121
121
|
isNumber = Number.isFinite,
|
|
122
122
|
_browserEventListeners = [],
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
};
|
|
143
143
|
settings = Object.assign(defaults, settings);
|
|
144
144
|
let _loop = settings.loop,
|
|
145
|
-
_initialized
|
|
145
|
+
_initialized,
|
|
146
146
|
_paused,
|
|
147
147
|
_canvas,
|
|
148
148
|
_canvasScale = 1,
|
|
@@ -168,8 +168,7 @@
|
|
|
168
168
|
T: 0,
|
|
169
169
|
MX: -1,
|
|
170
170
|
MY: -1,
|
|
171
|
-
|
|
172
|
-
HALF_PI: TWO_PI / 4,
|
|
171
|
+
TAU,
|
|
173
172
|
lerp: (start, end, t) => {
|
|
174
173
|
return start + t * (end - start);
|
|
175
174
|
},
|
|
@@ -246,12 +245,12 @@
|
|
|
246
245
|
},
|
|
247
246
|
oval(x, y, radiusX, radiusY, color) {
|
|
248
247
|
beginPath(_ctx);
|
|
249
|
-
_ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0,
|
|
248
|
+
_ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TAU);
|
|
250
249
|
instance.stroke(color);
|
|
251
250
|
},
|
|
252
251
|
ovalfill(x, y, radiusX, radiusY, color) {
|
|
253
252
|
beginPath(_ctx);
|
|
254
|
-
_ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0,
|
|
253
|
+
_ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TAU);
|
|
255
254
|
instance.fill(color);
|
|
256
255
|
},
|
|
257
256
|
circ(x, y, radius, color) {
|
|
@@ -415,6 +414,11 @@
|
|
|
415
414
|
use(callback, config = {}) {
|
|
416
415
|
loadPlugin(callback, config);
|
|
417
416
|
},
|
|
417
|
+
resize(width, height = width, autoscale) {
|
|
418
|
+
settings.height = height;
|
|
419
|
+
settings.autoscale = null == autoscale ? settings.autoscale : autoscale;
|
|
420
|
+
resizeCanvas();
|
|
421
|
+
},
|
|
418
422
|
listen: (eventName, callback) => {
|
|
419
423
|
eventName = lowerCase(eventName);
|
|
420
424
|
_eventListeners[eventName] = _eventListeners[eventName] || new Set();
|
|
@@ -486,6 +490,9 @@
|
|
|
486
490
|
];
|
|
487
491
|
return internals[index];
|
|
488
492
|
},
|
|
493
|
+
ispaused() {
|
|
494
|
+
return _paused;
|
|
495
|
+
},
|
|
489
496
|
pause() {
|
|
490
497
|
if (!_paused) {
|
|
491
498
|
_paused = true;
|
|
@@ -500,9 +507,6 @@
|
|
|
500
507
|
instance.emit("resumed");
|
|
501
508
|
}
|
|
502
509
|
},
|
|
503
|
-
ispaused() {
|
|
504
|
-
return _paused;
|
|
505
|
-
},
|
|
506
510
|
quit() {
|
|
507
511
|
instance.emit("quit");
|
|
508
512
|
instance.pause();
|
|
@@ -632,9 +636,9 @@
|
|
|
632
636
|
const _keysPress = new Set();
|
|
633
637
|
const keyCheck = (keySet, key = "") => {
|
|
634
638
|
key = lowerCase(key);
|
|
635
|
-
return
|
|
636
|
-
? keySet.
|
|
637
|
-
: keySet.
|
|
639
|
+
return key
|
|
640
|
+
? keySet.has("space" === key ? " " : key)
|
|
641
|
+
: keySet.size > 0;
|
|
638
642
|
};
|
|
639
643
|
let _lastKey = "";
|
|
640
644
|
on(root, "keydown", (event) => {
|
|
@@ -695,11 +699,9 @@
|
|
|
695
699
|
_canvas = _canvas || d.createElement("canvas");
|
|
696
700
|
_ctx = _canvas.getContext("2d");
|
|
697
701
|
on(_canvas, "click", () => focus());
|
|
698
|
-
resizeCanvas();
|
|
699
702
|
if (!_canvas.parentNode) {
|
|
700
703
|
d.body.appendChild(_canvas);
|
|
701
704
|
}
|
|
702
|
-
_canvas.style.imageRendering = "pixelated";
|
|
703
705
|
_canvas.oncontextmenu = () => false;
|
|
704
706
|
}
|
|
705
707
|
function resizeCanvas() {
|
|
@@ -710,6 +712,7 @@
|
|
|
710
712
|
instance.def("H", height);
|
|
711
713
|
_canvas.width = width;
|
|
712
714
|
_canvas.height = height;
|
|
715
|
+
_canvas.style = "image-rendering:pixelated";
|
|
713
716
|
if (settings.autoscale) {
|
|
714
717
|
let maxScale = +settings.autoscale;
|
|
715
718
|
if (!_canvas.style.display) {
|
|
@@ -751,6 +754,7 @@
|
|
|
751
754
|
root.ENGINE = instance;
|
|
752
755
|
}
|
|
753
756
|
setupCanvas();
|
|
757
|
+
resizeCanvas();
|
|
754
758
|
if (_loop) {
|
|
755
759
|
for (const eventName in _loop) {
|
|
756
760
|
if (_loop[eventName]) instance.listen(eventName, _loop[eventName]);
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +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))},
|
|
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))},c=(l.zzfxX=new AudioContext,l.zzfxV=1,(e=1,t=.05,a=220,l=0,n=0,i=.1,o=0,r=1,s=0,f=0,c=0,d=0,u=0,p=0,h=0,m=0,g=0,v=1,w=0,x=0,y=0)=>{let b=Math,z=2*b.PI,k=s*=500*z/44100/44100,E=a*=(1-t+2*t*b.random(t=[]))*z/44100,T=0,C=0,P=0,I=1,D=0,L=0,S=0,A=y<0?-1:1,M=z*A*y*2/44100,N=b.cos(M),W=b.sin,X=W(M)/4,H=1+X,q=-2*N/H,B=(1-X)/H,V=(1+A*N)/2/H,O=-(A+N)/H,G=0,R=0,Y=0,$=0;for(l=44100*l+9,w*=44100,n*=44100,i*=44100,g*=44100,f*=500*z/85766121e6,h*=z/44100,c*=z/44100,d*=44100,u=44100*u|0,e*=.3*zzfxV,A=l+w+n+i+g|0;P<A;t[P++]=S*e)++L%(100*m|0)||(S=o?1<o?2<o?3<o?W(T*T):b.max(b.min(b.tan(T),1),-1):1-(2*T/z%2+2)%2:1-4*b.abs(b.round(T/z)-T/z):W(T),S=(u?1-x+x*W(z*P/u):1)*(S<0?-1:1)*b.abs(S)**r*(P<l?P/l:P<l+w?1-(P-l)/w*(1-v):P<l+w+n?v:P<A-g?(A-P-g)/i*v:0),S=g?S/2+(g>P?0:(P<A-g?1:(A-P)/g)*t[P-g|0]/2/e):S,y&&(S=$=V*G+O*(G=R)+V*(R=S)-B*Y-q*(Y=$))),T+=(M=(a+=s+=f)*b.cos(h*C++))+M*p*W(P**5),I&&++I>d&&(a+=c,E+=c,I=0),!u||++D%u||(a=E,s=k,I=I||1);(e=zzfxX.createBuffer(1,A,44100)).getChannelData(0).set(t),(a=zzfxX.createBufferSource()).buffer=e,a.connect(zzfxX.destination),a.start()}),d=(t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t)).loop,u,p,h,m=1,g,v=.5,w=1,x,y=1e3/60,b,z=0,k=3,E="sans-serif",T=20,C=1.2,P=Date.now(),I=e,D=[],L=[.5,0,1750,,,.3,1,,,,600,.1],S={},A={W:0,H:0,T:0,MX:-1,MY:-1,TAU:o,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,mod:(e,t)=>(e%t+t)%t||0,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?A.clamp(o,l,n):o},norm:(e,t,a)=>A.map(e,t,a,0,1),rand:(e=0,t=1)=>(P=(1664525*P+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~A.rand(e,t+1),rseed(e){P=~~e},cls(e){null==e?g.clearRect(0,0,A.W,A.H):A.rectfill(0,0,A.W,A.H,e)},rect(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),A.stroke(n)},rectfill(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),A.fill(n)},oval(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),A.stroke(n)},ovalfill(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),A.fill(n)},circ(e,t,a,l){A.oval(e,t,a,a,l)},circfill(e,t,a,l){A.ovalfill(e,t,a,a,l)},shape(e){g.beginPath();for(let t=0;t<e.length;t+=2)t?g.lineTo(~~e[t],~~e[t+1]):g.moveTo(~~e[t],~~e[t+1]);g.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){g.beginPath();let i=v&&~~e==~~a?.5:0,o=v&&~~t==~~l?.5:0;g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),A.stroke(n)},linewidth(e){g.lineWidth=~~e,v=~~e%2?.5:0},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,a,l=k,n="normal"){g.font=`${n} ${T}px ${E}`,g.fillStyle=H(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)g.fillText(i[a],~~e,~~t+T*C*a)},textgap(e){C=e},textfont(e){E=e},textsize(e){T=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.replace(/[^\w.\n]/g,"").split("\n").filter(e=>e);for(let a=0;a<l.length;a++)for(let n=0;n<l[a].length;n++)"."!==l[a][n]&&A.rectfill(e+n,t+a,1,1,parseInt(l[a][n],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(e=0,t=e,a=0,l=1,n=l){g.save(),A.translate(e,t),A.rotate(a),A.scale(l,n)},pop(){g.restore()},translate(e,t){g.translate(~~e,~~t)},scale(e,t=e){g.scale(e,t)},rotate(e){g.rotate(e)},alpha(e){g.globalAlpha=A.clamp(e,0,1)},fill(e){g.fillStyle=H(e),g.fill()},stroke(e){g.strokeStyle=H(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t,a)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=L,(t||a>=0)&&((e=e.slice())[0]=a*(e[0]||1),e[10]=~~e[10]+t),c.apply(0,e),e),volume(e){l.zzfxV=e},canvas:()=>h,use(e,t={}){var a=e,l=t;let n=a(A,l);for(let e in n)A.def(e,n[e])},resize(e,a=e,l){t.height=a,t.autoscale=null==l?t.autoscale:l,W()},listen:(e,t)=>{S[e=e.toLowerCase()]=S[e]||new Set,S[e].add(t)},unlisten:(e,t)=>{S[e=e.toLowerCase()]&&S[e].delete(t)},emit:(e,t,a,n,i)=>(u&&(X("before:"+(e=e.toLowerCase()),t,a,n,i),d||l[e]===A[e]||"function"!=typeof l[e]||l[e](t,a,n,i),X(e,t,a,n,i),X("after:"+e,t,a,n,i)),t),pal(t,a=3){I=t||e,D=[],k=a,A.emit("pal",I,k)},palc(e,t){null==e?D=[]:D[e]=t},def(e,a){A[e]=a,t.global&&(l[e]=a)},timescale(e){w=e},framerate(e){y=1e3/~~e},stat:e=>[t,u,y/1e3,m,S,I,L,w,l.zzfxV,P,T,E,D,C][e],ispaused:()=>p,pause(){p||(p=!0,z=~~cancelAnimationFrame(z),A.emit("paused"))},resume(){u&&p&&(M(),p=!1,A.emit("resumed"))},quit(){for(let e of(A.emit("quit"),A.pause(),u=!1,S={},s))e();if(t.global){for(let e in A)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(","))A[e]=n[e];function M(){z||(b=0,x=i.now(),z=r(N))}function N(){z=r(N);let e=i.now(),t=0,a=e-x;for(x=e,b+=a<100?a:y;b>=y;){t++,b-=y;let e=y/1e3*w;A.emit("update",e,t),A.def("T",A.T+e)}t&&(A.emit("draw",g),t>1&&(b=0))}function W(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(A.def("W",e),A.def("H",a),h.width=e,h.height=a,h.style="image-rendering:pixelated",t.autoscale){let l=+t.autoscale;h.style.display||(h.style.display="block",h.style.margin="auto"),m=n.min(innerWidth/e,innerHeight/a),m=l>1&&m>l?l:m,h.style.width=e*m+"px",h.style.height=a*m+"px"}g.imageSmoothingEnabled=!1,A.textalign("start","top"),A.emit("resized",m)}function X(e,t,a,l,n){if(S[e])for(let i of S[e])i(t,a,l,n)}function H(e){return I[~~(D[e]??e)%I.length]}if(t.global){if(l.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(l,A),l.ENGINE=A}if(a=document,g=(h=(h="string"==typeof t.canvas?a.querySelector(t.canvas):t.canvas)||a.createElement("canvas")).getContext("2d"),f(h,"click",()=>focus()),h.parentNode||a.body.appendChild(h),h.oncontextmenu=()=>!1,W(),d)for(let e in d)d[e]&&A.listen(e,d[e]);return r(function(){if(t.autoscale&&f(l,"resize",W),t.tapEvents){let e=e=>[(e.pageX-h.offsetLeft)/m,(e.pageY-h.offsetTop)/m],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(h,"mousedown",t=>{if(!t.button){t.preventDefault();let[l,n]=e(t);A.emit("tap",l,n,0),a(0,l,n),r=!0}}),f(h,"mouseup",a=>{if(!a.button){a.preventDefault();let l=t.get(0),[n,i]=e(a);o(l)&&A.emit("tapped",l.xi,l.yi,0),A.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);A.def("MX",a),A.def("MY",l),r&&(A.emit("tapping",a,l,0),n(0,a,l))}),f(h,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);A.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),f(h,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a);A.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(o(l)&&A.emit("tapped",l.xi,l.yi,e),A.emit("untap",l.x,l.y,e),t.delete(e))};f(h,"touchend",s),f(h,"touchcancel",s),f(l,"blur",()=>{for(let[e,a]of(r=!1,t))A.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()),A.listen("after:update",()=>t.clear()),A.def("iskeydown",t=>a(e,t)),A.def("iskeypressed",e=>a(t,e)),A.def("lastkey",()=>n)}u=!0,A.emit("init",A),p||M()}),A}})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "litecanvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.301.0",
|
|
4
4
|
"description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Luiz Bills <luizbills@pm.me>",
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@happy-dom/global-registrator": "^20.9.0",
|
|
36
36
|
"@size-limit/preset-small-lib": "^12.1.0",
|
|
37
|
-
"@swc/core": "^1.15.
|
|
38
|
-
"ava": "^
|
|
37
|
+
"@swc/core": "^1.15.40",
|
|
38
|
+
"ava": "^8.0.1",
|
|
39
39
|
"esbuild": "^0.28.0",
|
|
40
40
|
"genversion": "^3.2.0",
|
|
41
41
|
"gzip-size": "^7.0.0",
|
|
42
42
|
"prettier": "^3.8.3",
|
|
43
|
-
"sinon": "^
|
|
43
|
+
"sinon": "^22.0.0",
|
|
44
44
|
"size-limit": "^12.1.0",
|
|
45
45
|
"tap-min": "^3.0.0"
|
|
46
46
|
},
|