svelte-pan-zoom - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.d.ts

@@ -1,2 +0,2 @@
-type Render = (ctx: CanvasRenderingContext2D) => void;
+type Render = (ctx: CanvasRenderingContext2D, t: number) => void | boolean;
 interface Options {
@@ -8,2 +8,3 @@ width: number;
     maxZoom?: number;
+    friction?: number;
 }
@@ -10,0 +11,0 @@ declare function panzoom(canvas: HTMLCanvasElement, options: Options): {

dist/index.js

@@ -1,2 +0,2 @@
-var E=new WeakMap,a;function O(e,r){return a=a||new ResizeObserver(d=>{for(let n of d){let m=E.get(n.target);m&&m(n)}}),E.set(e,r),a.observe(e),{destroy(){a.unobserve(e),E.delete(e)}}}var W=(e,r)=>Math.hypot(e.x-r.x,e.y-r.y),Z=(e,r)=>({x:(e.x+r.x)/2,y:(e.y+r.y)/2}),_=(e,r)=>({x:e.x-r.x,y:e.y-r.y});function X(e,r){let d=window.devicePixelRatio,n=e.getContext("2d"),m,x,g,L,l,P,w=e.width=e.clientWidth*d,y=e.height=e.clientHeight*d;function z(t){({width:x,height:g,render:L,padding:l,maxZoom:P}={padding:0,maxZoom:16,...t}),m=Math.min(e.width/(x+l*d),e.height/(g+l*d)),n.resetTransform(),n.translate(e.width/2,e.height/2),n.scale(m,m),n.translate(-x/2,-g/2),c()}z(r);let k=O(e,t=>{let s=t.contentRect,o=u({x:w/2,y:y/2}),i=n.getTransform();w=s.width*d,y=s.height*d,e.width=w,e.height=y,m=Math.min(e.width/(r.width+l*d),e.height/(r.height+l*d)),n.setTransform(i);let p=u({x:e.width/2,y:e.height/2});n.translate(p.x-o.x,p.y-o.y),c()}),h=new Map;function I(t){t.stopPropagation(),e.setPointerCapture(t.pointerId);let s=b(t);h.set(t.pointerId,s)}function f(t){t.stopPropagation(),e.releasePointerCapture(t.pointerId),h.delete(t.pointerId)}function R(t){if(t.stopPropagation(),!h.has(t.pointerId))return;let s=b(t);switch(h.size){case 1:{let o=h.get(t.pointerId),i=_(u(s),u(o));M(i),c(),h.set(t.pointerId,s);break}case 2:{let o=[...h.values()],i=u(o[0]),p=u(o[1]),D=Z(i,p),H=W(i,p);h.set(t.pointerId,s),o=[...h.values()],i=u(o[0]),p=u(o[1]);let C=Z(i,p),Y=W(i,p),A=_(C,D);M(A);let B=Y/H;T(C,B);break}}}function v(t){t.preventDefault(),t.stopPropagation();let s=b(t),o=Math.exp(-t.deltaY/512);T(u(s),o)}function M(t){n.translate(t.x,t.y)}function T(t,s){function o(p){n.translate(t.x,t.y),n.scale(p,p),n.translate(-t.x,-t.y)}o(s);let i=n.getTransform();i.a<m&&o(m/i.a),i.a>P&&o(P/i.a),c()}function b(t){return{x:t.offsetX*d,y:t.offsetY*d}}function u(t){return n.getTransform().inverse().transformPoint(t)}function c(){n.save(),n.resetTransform(),n.clearRect(0,0,e.width,e.height),n.restore(),L(n)}return e.addEventListener("pointerdown",I,{passive:!0}),e.addEventListener("pointerup",f,{passive:!0}),e.addEventListener("pointercancel",f,{passive:!0}),e.addEventListener("pointermove",R,{passive:!0}),e.addEventListener("wheel",v),{update(t){z(t)},destroy(){k.destroy(),e.removeEventListener("pointerdown",I),e.removeEventListener("pointerup",f),e.removeEventListener("pointercancel",f),e.removeEventListener("pointermove",R),e.removeEventListener("wheel",v)}}}export{X as panzoom};
+var C=new WeakMap,E;function B(e,c){return E=E||new ResizeObserver(m=>{for(let o of m){let x=C.get(o.target);x&&x(o)}}),C.set(e,c),E.observe(e),{destroy(){E.unobserve(e),C.delete(e)}}}var H=(e,c)=>Math.hypot(e.x-c.x,e.y-c.y),N=(e,c)=>({x:(e.x+c.x)/2,y:(e.y+c.y)/2}),q=(e,c)=>({x:e.x-c.x,y:e.y-c.y}),K=.02,$=120;function nt(e,c){let m=window.devicePixelRatio,o=e.getContext("2d"),x=requestAnimationFrame,u,y,g,O,b,I,L,T=e.width=e.clientWidth*m,z=e.height=e.clientHeight*m,h=0,r={vx:0,vy:0,ts:0},f=new Map,l=[];function A(t){({width:y,height:g,render:O,padding:b,maxZoom:I,friction:L}={padding:0,maxZoom:16,friction:.97,...t}),u=Math.min(e.width/(y+b*m),e.height/(g+b*m)),o.resetTransform(),o.translate(e.width/2,e.height/2),o.scale(u,u),o.translate(-y/2,-g/2),F(),P()}A(c);let S=B(e,t=>{let n=t.contentRect,i=p({x:T/2,y:z/2}),s=o.getTransform();T=n.width*m,z=n.height*m,e.width=T,e.height=z,u=Math.min(e.width/(c.width+b*m),e.height/(c.height+b*m)),o.setTransform(s);let d=p({x:e.width/2,y:e.height/2});o.translate(d.x-i.x,d.y-i.y),h||k(performance.now())});function _(t){for(;l.length&&t-l[0].t>$;)l.shift()}function U(t){let n=performance.now();_(n),l.push({point:t,t:n})}function F(){h&&(cancelAnimationFrame(h),h=0),r.vx=0,r.vy=0,l.length=0}function X(){let t=p({x:0,y:0}),n=p({x:e.width,y:e.height});t.x>y&&(o.translate(t.x-y,0),r.vx=-r.vx),t.y>g&&(o.translate(0,t.y-g),r.vy=-r.vy),n.x<0&&(o.translate(n.x,0),r.vx=-r.vx),n.y<0&&(o.translate(0,n.y),r.vy=-r.vy)}function D(t){t.stopPropagation(),e.setPointerCapture(t.pointerId);let n=R(t);f.set(t.pointerId,n),F()}function w(t){if(t.stopPropagation(),e.releasePointerCapture(t.pointerId),f.delete(t.pointerId),f.size===0&&(_(performance.now()),l.length>1)){let n=l[0],i=l[l.length-1],s=i.point.x-n.point.x,d=i.point.y-n.point.y,a=i.t-n.t;r={vx:s/a,vy:d/a,ts:performance.now()},P()}}function W(t){if(t.stopPropagation(),!f.has(t.pointerId))return;let n=R(t);switch(f.size){case 1:{U(p(n));let i=f.get(t.pointerId),s=q(p(n),p(i));M(s),P(),f.set(t.pointerId,n);break}case 2:{let i=[...f.values()],s=p(i[0]),d=p(i[1]),a=N(s,d),j=H(s,d);f.set(t.pointerId,n),i=[...f.values()],s=p(i[0]),d=p(i[1]);let Y=N(s,d),G=H(s,d),J=q(Y,a);M(J);let Q=G/j;V(Y,Q);break}}}function Z(t){t.preventDefault(),t.stopPropagation();let n=R(t),i=Math.exp(-t.deltaY/512);V(p(n),i)}function M(t){o.translate(t.x,t.y),X()}function V(t,n){function i(d){o.translate(t.x,t.y),o.scale(d,d),o.translate(-t.x,-t.y)}i(n);let s=o.getTransform();s.a<u&&i(u/s.a),s.a>I&&i(I/s.a),P()}function R(t){return{x:t.offsetX*m,y:t.offsetY*m}}function p(t){return o.getTransform().inverse().transformPoint(t)}function P(){h||(h=x(k))}function k(t){o.save(),o.resetTransform(),o.clearRect(0,0,e.width,e.height),o.restore();let n=O(o,t),i=Math.abs(r.vx)>K||Math.abs(r.vy)>K;if(i){let s=t-r.ts,d=r.vx*s,a=r.vy*s;M({x:d,y:a}),r.vx*=L,r.vy*=L,r.ts=t}i||n?h=x(k):h=0}let v={passive:!0};return e.addEventListener("pointerdown",D,v),e.addEventListener("pointerup",w,v),e.addEventListener("pointercancel",w,v),e.addEventListener("pointermove",W,v),e.addEventListener("wheel",Z),{update(t){A(t)},destroy(){S.destroy(),e.removeEventListener("pointerdown",D),e.removeEventListener("pointerup",w),e.removeEventListener("pointercancel",w),e.removeEventListener("pointermove",W),e.removeEventListener("wheel",Z)}}}export{nt as panzoom};
 //# sourceMappingURL=index.js.map

package.json

 {
 	"name": "svelte-pan-zoom",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"type": "module",
@@ -21,4 +21,4 @@ "keywords": [
 	},
-	"main": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
 	"homepage": "https://captaincodeman.github.io/svelte-pan-zoom/",
@@ -43,6 +43,6 @@ "repository": {
 	"devDependencies": {
-		"@sveltejs/adapter-static": "1.0.0",
-		"@sveltejs/kit": "1.0.1",
-		"svelte": "^3.55.0",
-		"svelte-check": "^3.0.1",
+		"@sveltejs/adapter-static": "^1.0.5",
+		"@sveltejs/kit": "^1.2.5",
+		"svelte": "^3.55.1",
+		"svelte-check": "^3.0.2",
 		"svelte-resize-observer-action": "^0.0.2",
@@ -52,4 +52,4 @@ "tslib": "^2.4.1",
 		"typescript": "^4.9.4",
-		"vite": "^4.0.3"
+		"vite": "^4.0.4"
 	}
 }

README.md

@@ -21,3 +21,8 @@ # svelte-pan-zoom
 - `maxZoom` (optional, default 16)
+- `friction` how much momentum will be continues (optional, default to 0.97)
 
+NOTE: if you set friction to 1, any movement will never stop, so you'll have re-invented the DVD screen saver!
+
+Your render funcion will be passed the canvas 2d render context _and_ the animation timer. It can return true if you want to reschedule another animation frame to be rendered. This is useful if what you are rendering is also itself being animated.
+
 ## Example
@@ -40,3 +45,3 @@
 
-    function render(ctx: CanvasRenderingContext2D) {
+    function render(ctx: CanvasRenderingContext2D, t: number) {
       ctx.drawImage(image, 0, 0)
@@ -43,0 +48,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

23907

36.42%

Lines of code

27

17.39%

Number of lines in readme file

68

7.94%

No dependency changes