dom-2d-camera - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

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

@@ -289,3 +289,3 @@ import { mat4, vec4, vec2 } from 'gl-matrix';
   let isLeftMousePressed = false;
-  let yScroll = 0;
+  let scrollDist = 0;
 
@@ -369,4 +369,4 @@ let width = 1;
 
-    if (isZoom && yScroll) {
-      const dZ = zoomSpeed * Math.exp(yScroll / height);
+    if ((isZoomX || isZoomY) && scrollDist) {
+      const dZ = zoomSpeed * Math.exp(scrollDist / height);
 
@@ -411,3 +411,3 @@ const transformedX = transformScaleX(mouseRelX);
     // Reset scroll delta and mouse position
-    yScroll = 0;
+    scrollDist = 0;
     prevMouseX = currentMouseX;
@@ -518,10 +518,12 @@ prevMouseY = currentMouseY;
   const wheelHandler = event => {
-    event.preventDefault();
+    if (isZoomX || isZoomY) {
+      event.preventDefault();
 
-    updateMouseXY(event);
-    updateMouseRelXY(event);
+      updateMouseXY(event);
+      updateMouseRelXY(event);
 
-    const scale = event.deltaMode === 1 ? 12 : 1;
+      const scale = event.deltaMode === 1 ? 12 : 1;
 
-    yScroll += scale * (event.deltaY || 0);
+      scrollDist += scale * (event.deltaY || event.deltaX || 0);
+    }
 
@@ -528,0 +530,0 @@ onWheel(event);

dist/dom-2d-camera.js

@@ -310,3 +310,3 @@ (function (global, factory) {
     var isLeftMousePressed = false;
-    var yScroll = 0;
+    var scrollDist = 0;
 
@@ -390,4 +390,4 @@ var width = 1;
 
-      if (isZoom && yScroll) {
-        var dZ = zoomSpeed * Math.exp(yScroll / height);
+      if ((isZoomX || isZoomY) && scrollDist) {
+        var dZ = zoomSpeed * Math.exp(scrollDist / height);
 
@@ -432,3 +432,3 @@ var transformedX = transformScaleX(mouseRelX);
       // Reset scroll delta and mouse position
-      yScroll = 0;
+      scrollDist = 0;
       prevMouseX = currentMouseX;
@@ -540,10 +540,12 @@ prevMouseY = currentMouseY;
     var wheelHandler = function (event) {
-      event.preventDefault();
+      if (isZoomX || isZoomY) {
+        event.preventDefault();
 
-      updateMouseXY(event);
-      updateMouseRelXY(event);
+        updateMouseXY(event);
+        updateMouseRelXY(event);
 
-      var scale = event.deltaMode === 1 ? 12 : 1;
+        var scale = event.deltaMode === 1 ? 12 : 1;
 
-      yScroll += scale * (event.deltaY || 0);
+        scrollDist += scale * (event.deltaY || event.deltaX || 0);
+      }
 
@@ -550,0 +552,0 @@ onWheel(event);

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

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("gl-matrix")):"function"==typeof define&&define.amd?define(["gl-matrix"],n):(e=e||self).createDom2dCamera=n(e.glMatrix)}(this,(function(e){"use strict";var n=function(n,t,o,a,r,i){void 0===n&&(n=[0,0]),void 0===t&&(t=1),void 0===o&&(o=0),void 0===a&&(a=[0,0]),void 0===r&&(r=[[0,1/0],[0,1/0]]),void 0===i&&(i=[[-1/0,1/0],[-1/0,1/0]]);var v=new Float32Array(16),s=new Float32Array(16),u=new Float32Array(16),c=e.mat4.create(),l=a.slice(0,2).concat([0],[1]),d=Array.isArray(r[0])?[].concat(r[0]):[].concat(r),f=Array.isArray(r[0])?[].concat(r[1]):[].concat(r),m=Array.isArray(i[0])?[].concat(i[0]):[].concat(i),y=Array.isArray(i[0])?[].concat(i[1]):[].concat(i),p=function(){return e.mat4.getScaling(v,c).slice(0,2)},w=function(){var e=p();return Math.min(e[0],e[1])},g=function(){var e=p();return Math.max(e[0],e[1])},A=function(n,t,o){void 0===n&&(n=[]);var a=n[0];void 0===a&&(a=0);var r=n[1];void 0===r&&(r=0),void 0===t&&(t=1),void 0===o&&(o=0),c=e.mat4.create(),M([-a,-r]),B(o),h(1/t)},M=function(n){void 0===n&&(n=[]);var t=n[0];void 0===t&&(t=0);var o=n[1];void 0===o&&(o=0),v[0]=t,v[1]=o,v[2]=0;var a=e.mat4.fromTranslation(s,v);e.mat4.multiply(c,a,c)},h=function(n,t){var o=Array.isArray(n),a=o?n[0]:n,r=o?n[1]:n;if(!(a<=0||r<=0||1===a&&1===r)){var i=p(),m=i[0]*a,y=i[1]*r;if(a=Math.max(d[0],Math.min(m,d[1]))/i[0],r=Math.max(f[0],Math.min(y,f[1]))/i[1],1!==a||1!==r){v[0]=a,v[1]=r,v[2]=1;var w=e.mat4.fromScaling(s,v),g=t?t.concat([0]):l,A=e.mat4.fromTranslation(v,g);e.mat4.multiply(c,A,e.mat4.multiply(c,w,e.mat4.multiply(c,e.mat4.invert(u,A),c)))}}},B=function(n){var t=e.mat4.create();e.mat4.fromRotation(t,n,[0,0,1]),e.mat4.multiply(c,t,c)},E=function(e){!e||e.length<16||(c=e)};return A(n,t,o),{get translation(){return e.mat4.getTranslation(v,c).slice(0,2)},get target(){return e.vec4.transformMat4(v,l,e.mat4.invert(u,c)).slice(0,2)},get scaling(){return p()},get minScaling(){return w()},get maxScaling(){return g()},get scaleBounds(){return[[].concat(d),[].concat(f)]},get translationBounds(){return[[].concat(m),[].concat(y)]},get distance(){return[1/(e=p())[0],1/e[1]];var e},get minDistance(){return 1/w()},get maxDistance(){return 1/g()},get rotation(){return Math.acos(c[0]/g())},get view(){return c},get viewCenter(){return l.slice(0,2)},lookAt:A,translate:M,pan:M,rotate:B,scale:h,zoom:h,reset:function(){A(n,t,o)},set:function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return console.warn("`set()` is deprecated. Please use `setView()` instead."),E.apply(void 0,e)},setScaleBounds:function(e){var n=Array.isArray(e[0]);d[0]=n?e[0][0]:e[0],d[1]=n?e[0][1]:e[1],f[0]=n?e[1][0]:e[0],f[1]=n?e[1][1]:e[1]},setTranslationBounds:function(e){var n=Array.isArray(e[0]);m[0]=n?e[0][0]:e[0],m[1]=n?e[0][1]:e[1],y[0]=n?e[1][0]:e[0],y[1]=n?e[1][1]:e[1]},setView:E,setViewCenter:function(e){l=e.slice(0,2).concat([0],[1])}}},t=["pan","rotate"],o={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(a,r){void 0===r&&(r={});var i=r.distance;void 0===i&&(i=1);var v=r.target;void 0===v&&(v=[0,0]);var s=r.rotation;void 0===s&&(s=0);var u=r.isNdc;void 0===u&&(u=!0);var c=r.isFixed;void 0===c&&(c=!1);var l=r.isPan;void 0===l&&(l=!0);var d=r.isPanInverted;void 0===d&&(d=[!1,!0]);var f=r.panSpeed;void 0===f&&(f=1);var m=r.isRotate;void 0===m&&(m=!0);var y=r.rotateSpeed;void 0===y&&(y=1);var p=r.defaultMouseDownMoveAction;void 0===p&&(p="pan");var w=r.mouseDownMoveModKey;void 0===w&&(w="alt");var g=r.isZoom;void 0===g&&(g=!0);var A=r.zoomSpeed;void 0===A&&(A=1);var M=r.viewCenter,h=r.scaleBounds,B=r.translationBounds,E=r.onKeyDown;void 0===E&&(E=function(){});var x=r.onKeyUp;void 0===x&&(x=function(){});var S=r.onMouseDown;void 0===S&&(S=function(){});var L=r.onMouseUp;void 0===L&&(L=function(){});var D=r.onMouseMove;void 0===D&&(D=function(){});var k=r.onWheel;void 0===k&&(k=function(){});var K=n(v,i,s,M,h,B),C=0,V=0,T=0,b=0,z=0,F=0,P=!1,R=0,X=1,Y=1,j=1,I=!1,U=!1,Z=!1,q="pan"===p,N=l,O=l,W=d,G=d,H=g,J=g,Q=function(){N=Array.isArray(l)?Boolean(l[0]):l,O=Array.isArray(l)?Boolean(l[1]):l,W=Array.isArray(d)?Boolean(d[0]):d,G=Array.isArray(d)?Boolean(d[1]):d,H=Array.isArray(g)?Boolean(g[0]):g,J=Array.isArray(g)?Boolean(g[1]):g};Q();var $=u?function(e){return e/X*2*j}:function(e){return e},_=u?function(e){return e/Y*2}:function(e){return-e},ee=u?function(e){return(e/X*2-1)*j}:function(e){return e},ne=u?function(e){return 1-e/Y*2}:function(e){return e},te=function(){var e=a.getBoundingClientRect();X=e.width,Y=e.height,j=X/Y},oe=function(e){Z=!1,x(e)},ae=function(e){Z=e[o[w]],E(e)},re=function(e){P=!1,L(e)},ie=function(e){P=1===e.buttons,S(e)},ve=void 0!==document.createEvent("MouseEvent").offsetX?function(e){T=e.offsetX,b=e.offsetY}:function(e){var n=a.getBoundingClientRect();T=e.clientX-n.left,b=e.clientY-n.top},se=function(e){C=e.clientX,V=e.clientY},ue=function(e){se(e),D(e)},ce=function(e){e.preventDefault(),se(e),ve(e);var n=1===e.deltaMode?12:1;R+=n*(e.deltaY||0),k(e)};window.addEventListener("keydown",ae,{passive:!0}),window.addEventListener("keyup",oe,{passive:!0}),a.addEventListener("mousedown",ie,{passive:!0}),window.addEventListener("mouseup",re,{passive:!0}),window.addEventListener("mousemove",ue,{passive:!0}),a.addEventListener("wheel",ce,{passive:!1}),K.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var a=e.isFixed;void 0===a&&(a=null);var r=e.isPan;void 0===r&&(r=null);var i=e.isPanInverted;void 0===i&&(i=null);var v=e.isRotate;void 0===v&&(v=null);var s=e.isZoom;void 0===s&&(s=null);var u=e.panSpeed;void 0===u&&(u=null);var M=e.rotateSpeed;void 0===M&&(M=null);var h=e.zoomSpeed;void 0===h&&(h=null);var B=e.mouseDownMoveModKey;void 0===B&&(B=null),p=null!==n&&t.includes(n)?n:p,q="pan"===p,c=null!==a?a:c,l=null!==r?r:l,d=null!==i?i:d,m=null!==v?v:m,g=null!==s?s:g,f=+u>0?u:f,y=+M>0?M:y,A=+h>0?h:A,Q(),w=null!==B&&Object.keys(o).includes(B)?B:w},K.dispose=function(){K=void 0,window.removeEventListener("keydown",ae),window.removeEventListener("keyup",oe),a.removeEventListener("mousedown",ie),window.removeEventListener("mouseup",re),window.removeEventListener("mousemove",ue),a.removeEventListener("wheel",ce)},K.refresh=te,K.tick=function(){if(c)return!1;I=!1;var n=C,t=V;if((N||O)&&P&&(q&&!Z||!q&&Z)){var o=N?$(f*(W?z-n:n-z)):0,a=O?_(f*(G?F-t:t-F)):0;0===o&&0===a||(K.pan([o,a]),I=!0)}if(g&&R){var r=A*Math.exp(R/Y),i=ee(T),v=ne(b);K.scale([H?1/r:1,J?1/r:1],[i,v]),I=!0}if(m&&P&&(q&&Z||!q&&!Z)&&Math.abs(z-n)+Math.abs(F-t)>0){var s=X/2,u=Y/2,l=z-s,d=u-F,p=n-s,w=u-t,M=e.vec2.angle([l,d],[p,w]),h=l*w-p*d;K.rotate(y*M*Math.sign(h)),I=!0}R=0,z=n,F=t;var B=I||U;return U=!1,B};var le=function(e){return function(){e.apply(null,arguments),U=!0}};return K.lookAt=le(K.lookAt),K.translate=le(K.translate),K.pan=le(K.pan),K.rotate=le(K.rotate),K.scale=le(K.scale),K.zoom=le(K.zoom),K.reset=le(K.reset),K.set=le(K.set),K.setScaleBounds=le(K.setScaleBounds),K.setTranslationBounds=le(K.setTranslationBounds),K.setView=le(K.setView),K.setViewCenter=le(K.setViewCenter),te(),K}}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("gl-matrix")):"function"==typeof define&&define.amd?define(["gl-matrix"],n):(e=e||self).createDom2dCamera=n(e.glMatrix)}(this,(function(e){"use strict";var n=function(n,t,o,a,r,i){void 0===n&&(n=[0,0]),void 0===t&&(t=1),void 0===o&&(o=0),void 0===a&&(a=[0,0]),void 0===r&&(r=[[0,1/0],[0,1/0]]),void 0===i&&(i=[[-1/0,1/0],[-1/0,1/0]]);var v=new Float32Array(16),s=new Float32Array(16),u=new Float32Array(16),c=e.mat4.create(),l=a.slice(0,2).concat([0],[1]),d=Array.isArray(r[0])?[].concat(r[0]):[].concat(r),f=Array.isArray(r[0])?[].concat(r[1]):[].concat(r),m=Array.isArray(i[0])?[].concat(i[0]):[].concat(i),y=Array.isArray(i[0])?[].concat(i[1]):[].concat(i),p=function(){return e.mat4.getScaling(v,c).slice(0,2)},w=function(){var e=p();return Math.min(e[0],e[1])},g=function(){var e=p();return Math.max(e[0],e[1])},A=function(n,t,o){void 0===n&&(n=[]);var a=n[0];void 0===a&&(a=0);var r=n[1];void 0===r&&(r=0),void 0===t&&(t=1),void 0===o&&(o=0),c=e.mat4.create(),M([-a,-r]),B(o),h(1/t)},M=function(n){void 0===n&&(n=[]);var t=n[0];void 0===t&&(t=0);var o=n[1];void 0===o&&(o=0),v[0]=t,v[1]=o,v[2]=0;var a=e.mat4.fromTranslation(s,v);e.mat4.multiply(c,a,c)},h=function(n,t){var o=Array.isArray(n),a=o?n[0]:n,r=o?n[1]:n;if(!(a<=0||r<=0||1===a&&1===r)){var i=p(),m=i[0]*a,y=i[1]*r;if(a=Math.max(d[0],Math.min(m,d[1]))/i[0],r=Math.max(f[0],Math.min(y,f[1]))/i[1],1!==a||1!==r){v[0]=a,v[1]=r,v[2]=1;var w=e.mat4.fromScaling(s,v),g=t?t.concat([0]):l,A=e.mat4.fromTranslation(v,g);e.mat4.multiply(c,A,e.mat4.multiply(c,w,e.mat4.multiply(c,e.mat4.invert(u,A),c)))}}},B=function(n){var t=e.mat4.create();e.mat4.fromRotation(t,n,[0,0,1]),e.mat4.multiply(c,t,c)},E=function(e){!e||e.length<16||(c=e)};return A(n,t,o),{get translation(){return e.mat4.getTranslation(v,c).slice(0,2)},get target(){return e.vec4.transformMat4(v,l,e.mat4.invert(u,c)).slice(0,2)},get scaling(){return p()},get minScaling(){return w()},get maxScaling(){return g()},get scaleBounds(){return[[].concat(d),[].concat(f)]},get translationBounds(){return[[].concat(m),[].concat(y)]},get distance(){return[1/(e=p())[0],1/e[1]];var e},get minDistance(){return 1/w()},get maxDistance(){return 1/g()},get rotation(){return Math.acos(c[0]/g())},get view(){return c},get viewCenter(){return l.slice(0,2)},lookAt:A,translate:M,pan:M,rotate:B,scale:h,zoom:h,reset:function(){A(n,t,o)},set:function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];return console.warn("`set()` is deprecated. Please use `setView()` instead."),E.apply(void 0,e)},setScaleBounds:function(e){var n=Array.isArray(e[0]);d[0]=n?e[0][0]:e[0],d[1]=n?e[0][1]:e[1],f[0]=n?e[1][0]:e[0],f[1]=n?e[1][1]:e[1]},setTranslationBounds:function(e){var n=Array.isArray(e[0]);m[0]=n?e[0][0]:e[0],m[1]=n?e[0][1]:e[1],y[0]=n?e[1][0]:e[0],y[1]=n?e[1][1]:e[1]},setView:E,setViewCenter:function(e){l=e.slice(0,2).concat([0],[1])}}},t=["pan","rotate"],o={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(a,r){void 0===r&&(r={});var i=r.distance;void 0===i&&(i=1);var v=r.target;void 0===v&&(v=[0,0]);var s=r.rotation;void 0===s&&(s=0);var u=r.isNdc;void 0===u&&(u=!0);var c=r.isFixed;void 0===c&&(c=!1);var l=r.isPan;void 0===l&&(l=!0);var d=r.isPanInverted;void 0===d&&(d=[!1,!0]);var f=r.panSpeed;void 0===f&&(f=1);var m=r.isRotate;void 0===m&&(m=!0);var y=r.rotateSpeed;void 0===y&&(y=1);var p=r.defaultMouseDownMoveAction;void 0===p&&(p="pan");var w=r.mouseDownMoveModKey;void 0===w&&(w="alt");var g=r.isZoom;void 0===g&&(g=!0);var A=r.zoomSpeed;void 0===A&&(A=1);var M=r.viewCenter,h=r.scaleBounds,B=r.translationBounds,E=r.onKeyDown;void 0===E&&(E=function(){});var x=r.onKeyUp;void 0===x&&(x=function(){});var S=r.onMouseDown;void 0===S&&(S=function(){});var L=r.onMouseUp;void 0===L&&(L=function(){});var D=r.onMouseMove;void 0===D&&(D=function(){});var k=r.onWheel;void 0===k&&(k=function(){});var K=n(v,i,s,M,h,B),C=0,V=0,T=0,b=0,z=0,F=0,P=!1,R=0,X=1,Y=1,j=1,I=!1,U=!1,Z=!1,q="pan"===p,N=l,O=l,W=d,G=d,H=g,J=g,Q=function(){N=Array.isArray(l)?Boolean(l[0]):l,O=Array.isArray(l)?Boolean(l[1]):l,W=Array.isArray(d)?Boolean(d[0]):d,G=Array.isArray(d)?Boolean(d[1]):d,H=Array.isArray(g)?Boolean(g[0]):g,J=Array.isArray(g)?Boolean(g[1]):g};Q();var $=u?function(e){return e/X*2*j}:function(e){return e},_=u?function(e){return e/Y*2}:function(e){return-e},ee=u?function(e){return(e/X*2-1)*j}:function(e){return e},ne=u?function(e){return 1-e/Y*2}:function(e){return e},te=function(){var e=a.getBoundingClientRect();X=e.width,Y=e.height,j=X/Y},oe=function(e){Z=!1,x(e)},ae=function(e){Z=e[o[w]],E(e)},re=function(e){P=!1,L(e)},ie=function(e){P=1===e.buttons,S(e)},ve=void 0!==document.createEvent("MouseEvent").offsetX?function(e){T=e.offsetX,b=e.offsetY}:function(e){var n=a.getBoundingClientRect();T=e.clientX-n.left,b=e.clientY-n.top},se=function(e){C=e.clientX,V=e.clientY},ue=function(e){se(e),D(e)},ce=function(e){if(H||J){e.preventDefault(),se(e),ve(e);var n=1===e.deltaMode?12:1;R+=n*(e.deltaY||e.deltaX||0)}k(e)};window.addEventListener("keydown",ae,{passive:!0}),window.addEventListener("keyup",oe,{passive:!0}),a.addEventListener("mousedown",ie,{passive:!0}),window.addEventListener("mouseup",re,{passive:!0}),window.addEventListener("mousemove",ue,{passive:!0}),a.addEventListener("wheel",ce,{passive:!1}),K.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var a=e.isFixed;void 0===a&&(a=null);var r=e.isPan;void 0===r&&(r=null);var i=e.isPanInverted;void 0===i&&(i=null);var v=e.isRotate;void 0===v&&(v=null);var s=e.isZoom;void 0===s&&(s=null);var u=e.panSpeed;void 0===u&&(u=null);var M=e.rotateSpeed;void 0===M&&(M=null);var h=e.zoomSpeed;void 0===h&&(h=null);var B=e.mouseDownMoveModKey;void 0===B&&(B=null),p=null!==n&&t.includes(n)?n:p,q="pan"===p,c=null!==a?a:c,l=null!==r?r:l,d=null!==i?i:d,m=null!==v?v:m,g=null!==s?s:g,f=+u>0?u:f,y=+M>0?M:y,A=+h>0?h:A,Q(),w=null!==B&&Object.keys(o).includes(B)?B:w},K.dispose=function(){K=void 0,window.removeEventListener("keydown",ae),window.removeEventListener("keyup",oe),a.removeEventListener("mousedown",ie),window.removeEventListener("mouseup",re),window.removeEventListener("mousemove",ue),a.removeEventListener("wheel",ce)},K.refresh=te,K.tick=function(){if(c)return!1;I=!1;var n=C,t=V;if((N||O)&&P&&(q&&!Z||!q&&Z)){var o=N?$(f*(W?z-n:n-z)):0,a=O?_(f*(G?F-t:t-F)):0;0===o&&0===a||(K.pan([o,a]),I=!0)}if((H||J)&&R){var r=A*Math.exp(R/Y),i=ee(T),v=ne(b);K.scale([H?1/r:1,J?1/r:1],[i,v]),I=!0}if(m&&P&&(q&&Z||!q&&!Z)&&Math.abs(z-n)+Math.abs(F-t)>0){var s=X/2,u=Y/2,l=z-s,d=u-F,p=n-s,w=u-t,g=e.vec2.angle([l,d],[p,w]),M=l*w-p*d;K.rotate(y*g*Math.sign(M)),I=!0}R=0,z=n,F=t;var h=I||U;return U=!1,h};var le=function(e){return function(){e.apply(null,arguments),U=!0}};return K.lookAt=le(K.lookAt),K.translate=le(K.translate),K.pan=le(K.pan),K.rotate=le(K.rotate),K.scale=le(K.scale),K.zoom=le(K.zoom),K.reset=le(K.reset),K.set=le(K.set),K.setScaleBounds=le(K.setScaleBounds),K.setTranslationBounds=le(K.setTranslationBounds),K.setView=le(K.setView),K.setViewCenter=le(K.setViewCenter),te(),K}}));

package.json

 {
   "name": "dom-2d-camera",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "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

52292

increased by0.4%

Lines of code

1010

increased by0.4%

No dependency changes