dom-2d-camera - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

@@ -0,1 +1,5 @@
+## v1.2.2
+
+- Fix an issue with zooming in situations with nested scroll bars. Note, this change makes `refresh()` irrelevant. You do not need to call it anymore.
+
 ## v1.2.1
@@ -2,0 +6,0 @@

dist/dom-2d-camera.esm.js

@@ -54,4 +54,2 @@ import createCamera from 'camera-2d-simple';
 
-  let top = 0;
-  let left = 0;
   let width = 1;
@@ -176,8 +174,5 @@ let height = 1;
   const refresh = () => {
-    const bBox = element.getBoundingClientRect();
-    top = bBox.top;
-    left = bBox.left;
-    width = bBox.width;
-    height = bBox.height;
-    aspectRatio = width / height;
+    console.warn(
+      "refresh() is deprecated. You do not have to call it anymore."
+    );
   };
@@ -214,5 +209,11 @@
     // Normalize mouse coordinates
-    mouseX = event.clientX - left + window.scrollX;
-    mouseY = event.clientY - top + window.scrollY;
+    const bBox = element.getBoundingClientRect();
+    mouseX = event.clientX - bBox.left;
+    mouseY = event.clientY - bBox.top;
 
+    // Since we caculated the bBox already lets update some other props too
+    width = bBox.width;
+    height = bBox.height;
+    aspectRatio = width / height;
+
     onMouseMove(event);
@@ -219,0 +220,0 @@ };

dist/dom-2d-camera.js

@@ -60,4 +60,2 @@ (function (global, factory) {
 
-    var top = 0;
-    var left = 0;
     var width = 1;
@@ -183,8 +181,5 @@ var height = 1;
     var refresh = function () {
-      var bBox = element.getBoundingClientRect();
-      top = bBox.top;
-      left = bBox.left;
-      width = bBox.width;
-      height = bBox.height;
-      aspectRatio = width / height;
+      console.warn(
+        "refresh() is deprecated. You do not have to call it anymore."
+      );
     };
@@ -221,5 +216,11 @@
       // Normalize mouse coordinates
-      mouseX = event.clientX - left + window.scrollX;
-      mouseY = event.clientY - top + window.scrollY;
+      var bBox = element.getBoundingClientRect();
+      mouseX = event.clientX - bBox.left;
+      mouseY = event.clientY - bBox.top;
 
+      // Since we caculated the bBox already lets update some other props too
+      width = bBox.width;
+      height = bBox.height;
+      aspectRatio = width / height;
+
       onMouseMove(event);
@@ -226,0 +227,0 @@ };

dist/dom-2d-camera.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("camera-2d-simple"),require("gl-matrix")):"function"==typeof define&&define.amd?define(["camera-2d-simple","gl-matrix"],n):(e=e||self).createDom2dCamera=n(e.createCamera2d,e.glMatrix)}(this,(function(e,n){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o=["pan","rotate"],i={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(t,r){void 0===r&&(r={});var v=r.distance;void 0===v&&(v=1);var a=r.target;void 0===a&&(a=[0,0]);var d=r.rotation;void 0===d&&(d=0);var u=r.isNdc;void 0===u&&(u=!0);var s=r.isFixed;void 0===s&&(s=!1);var l=r.isPan;void 0===l&&(l=!0);var c=r.panSpeed;void 0===c&&(c=1);var f=r.isRotate;void 0===f&&(f=!0);var p=r.rotateSpeed;void 0===p&&(p=1);var m=r.defaultMouseDownMoveAction;void 0===m&&(m="pan");var w=r.mouseDownMoveModKey;void 0===w&&(w="alt");var y=r.isZoom;void 0===y&&(y=!0);var M=r.zoomSpeed;void 0===M&&(M=1);var h=r.viewCenter,E=r.scaleBounds,L=r.onKeyDown;void 0===L&&(L=function(){});var g=r.onKeyUp;void 0===g&&(g=function(){});var K=r.onMouseDown;void 0===K&&(K=function(){});var x=r.onMouseUp;void 0===x&&(x=function(){});var D=r.onMouseMove;void 0===D&&(D=function(){});var k=r.onWheel;void 0===k&&(k=function(){});var S=e(a,v,d,h,E),C=!1,b=0,P=0,R=0,Y=0,j=!1,q=0,z=0,A=0,B=1,F=1,O=1,U=!1,X="pan"===m,Z=u?function(e){return e/B*2*O}:function(e){return e},N=u?function(e){return e/F*2}:function(e){return-e},W=u?function(e){return(e/B*2-1)*O}:function(e){return e},G=u?function(e){return 1-e/F*2}:function(e){return e},H=function(){var e=t.getBoundingClientRect();z=e.top,A=e.left,B=e.width,F=e.height,O=B/F},I=function(e){U=!1,g(e)},J=function(e){U=e[i[w]],L(e)},Q=function(e){j=!1,x(e)},T=function(e){j=1===e.buttons,K(e)},V=function(e){R=b,Y=P,b=e.clientX-A+window.scrollX,P=e.clientY-z+window.scrollY,D(e)},$=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;q+=n*(e.deltaY||0),k(e)};return window.addEventListener("keydown",J,{passive:!0}),window.addEventListener("keyup",I,{passive:!0}),t.addEventListener("mousedown",T,{passive:!0}),window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("mousemove",V,{passive:!0}),t.addEventListener("wheel",$,{passive:!1}),H(),S.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var t=e.isFixed;void 0===t&&(t=null);var r=e.isPan;void 0===r&&(r=null);var v=e.isRotate;void 0===v&&(v=null);var a=e.isZoom;void 0===a&&(a=null);var d=e.panSpeed;void 0===d&&(d=null);var u=e.rotateSpeed;void 0===u&&(u=null);var h=e.zoomSpeed;void 0===h&&(h=null);var E=e.mouseDownMoveModKey;void 0===E&&(E=null),m=null!==n&&o.includes(n)?n:m,X="pan"===m,s=null!==t?t:s,l=null!==r?r:l,f=null!==v?v:f,y=null!==a?a:y,c=+d>0?d:c,p=+u>0?u:p,M=+h>0?h:M,w=null!==E&&Object.keys(i).includes(E)?E:w},S.dispose=function(){S=void 0,window.removeEventListener("keydown",J),window.removeEventListener("keyup",I),t.removeEventListener("mousedown",T),window.removeEventListener("mouseup",Q),window.removeEventListener("mousemove",V),t.removeEventListener("wheel",$)},S.refresh=H,S.tick=function(){if(s)return!1;if(C=!1,l&&j&&(X&&!U||!X&&U)&&(S.pan([Z(c*(b-R)),N(c*(Y-P))]),C=!0),y&&q){var e=M*Math.exp(q/F),o=W(b),i=G(P);S.scale(1/e,[o,i]),C=!0}if(f&&j&&(X&&U||!X&&!U)){var t=B/2,r=F/2,v=R-t,a=r-Y,d=b-t,u=r-P,m=n.vec2.angle([v,a],[d,u]),w=v*u-d*a;S.rotate(p*m*Math.sign(w)),C=!0}return q=0,R=b,Y=P,C},S}}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("camera-2d-simple"),require("gl-matrix")):"function"==typeof define&&define.amd?define(["camera-2d-simple","gl-matrix"],n):(e=e||self).createDom2dCamera=n(e.createCamera2d,e.glMatrix)}(this,(function(e,n){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o=["pan","rotate"],t={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(i,r){void 0===r&&(r={});var a=r.distance;void 0===a&&(a=1);var v=r.target;void 0===v&&(v=[0,0]);var d=r.rotation;void 0===d&&(d=0);var u=r.isNdc;void 0===u&&(u=!0);var s=r.isFixed;void 0===s&&(s=!1);var l=r.isPan;void 0===l&&(l=!0);var c=r.panSpeed;void 0===c&&(c=1);var f=r.isRotate;void 0===f&&(f=!0);var p=r.rotateSpeed;void 0===p&&(p=1);var m=r.defaultMouseDownMoveAction;void 0===m&&(m="pan");var w=r.mouseDownMoveModKey;void 0===w&&(w="alt");var y=r.isZoom;void 0===y&&(y=!0);var M=r.zoomSpeed;void 0===M&&(M=1);var h=r.viewCenter,E=r.scaleBounds,L=r.onKeyDown;void 0===L&&(L=function(){});var g=r.onKeyUp;void 0===g&&(g=function(){});var K=r.onMouseDown;void 0===K&&(K=function(){});var x=r.onMouseUp;void 0===x&&(x=function(){});var D=r.onMouseMove;void 0===D&&(D=function(){});var k=r.onWheel;void 0===k&&(k=function(){});var S=e(v,a,d,h,E),C=!1,b=0,P=0,R=0,Y=0,j=!1,q=0,z=1,A=1,B=1,F=!1,O="pan"===m,U=u?function(e){return e/z*2*B}:function(e){return e},Z=u?function(e){return e/A*2}:function(e){return-e},N=u?function(e){return(e/z*2-1)*B}:function(e){return e},W=u?function(e){return 1-e/A*2}:function(e){return e},X=function(){console.warn("refresh() is deprecated. You do not have to call it anymore.")},G=function(e){F=!1,g(e)},H=function(e){F=e[t[w]],L(e)},I=function(e){j=!1,x(e)},J=function(e){j=1===e.buttons,K(e)},Q=function(e){R=b,Y=P;var n=i.getBoundingClientRect();b=e.clientX-n.left,P=e.clientY-n.top,z=n.width,A=n.height,B=z/A,D(e)},T=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;q+=n*(e.deltaY||0),k(e)};return window.addEventListener("keydown",H,{passive:!0}),window.addEventListener("keyup",G,{passive:!0}),i.addEventListener("mousedown",J,{passive:!0}),window.addEventListener("mouseup",I,{passive:!0}),window.addEventListener("mousemove",Q,{passive:!0}),i.addEventListener("wheel",T,{passive:!1}),X(),S.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var i=e.isFixed;void 0===i&&(i=null);var r=e.isPan;void 0===r&&(r=null);var a=e.isRotate;void 0===a&&(a=null);var v=e.isZoom;void 0===v&&(v=null);var d=e.panSpeed;void 0===d&&(d=null);var u=e.rotateSpeed;void 0===u&&(u=null);var h=e.zoomSpeed;void 0===h&&(h=null);var E=e.mouseDownMoveModKey;void 0===E&&(E=null),m=null!==n&&o.includes(n)?n:m,O="pan"===m,s=null!==i?i:s,l=null!==r?r:l,f=null!==a?a:f,y=null!==v?v:y,c=+d>0?d:c,p=+u>0?u:p,M=+h>0?h:M,w=null!==E&&Object.keys(t).includes(E)?E:w},S.dispose=function(){S=void 0,window.removeEventListener("keydown",H),window.removeEventListener("keyup",G),i.removeEventListener("mousedown",J),window.removeEventListener("mouseup",I),window.removeEventListener("mousemove",Q),i.removeEventListener("wheel",T)},S.refresh=X,S.tick=function(){if(s)return!1;if(C=!1,l&&j&&(O&&!F||!O&&F)&&(S.pan([U(c*(b-R)),Z(c*(Y-P))]),C=!0),y&&q){var e=M*Math.exp(q/A),o=N(b),t=W(P);S.scale(1/e,[o,t]),C=!0}if(f&&j&&(O&&F||!O&&!F)){var i=z/2,r=A/2,a=R-i,v=r-Y,d=b-i,u=r-P,m=n.vec2.angle([a,v],[d,u]),w=a*u-d*v;S.rotate(p*m*Math.sign(w)),C=!0}return q=0,R=b,Y=P,C},S}}));

package.json

 {
   "name": "dom-2d-camera",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A wrapper for attaching a 2D camera to a DOM element",
@@ -5,0 +5,0 @@ "author": "Fritz Lekschas",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30856

increased by1.12%

No dependency changes