svelte-pan-zoom - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.js

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

package.json

 {
 	"name": "svelte-pan-zoom",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"type": "module",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -18,3 +18,3 @@ # svelte-pan-zoom
 - `width` & `height` in CSS pixels of item to render (will be centered and sized to fit canvas)
-- `render` function to draw to canvas (you don't _have_ to draw an image)
+- `render` function to render to canvas (you don't _have_ to draw an image)
 - `padding` (optional, default 0)
@@ -21,0 +21,0 @@ - `maxZoom` (optional, default 16)

No alert changes

Improved metrics

Total package byte prevSize

17090

5.84%

No dependency changes