dom-2d-camera
Advanced tools
Comparing version 2.0.0 to 2.0.1
@@ -319,2 +319,4 @@ import { mat4, vec4, vec2 } from 'gl-matrix'; | ||
isChanged = false; | ||
const currentMouseX = mouseX; | ||
const currentMouseY = mouseY; | ||
@@ -328,7 +330,7 @@ if ( | ||
const transformedPanX = isPanX | ||
? transformPanX(panSpeed * (mouseX - prevMouseX)) | ||
? transformPanX(panSpeed * (currentMouseX - prevMouseX)) | ||
: 0; | ||
const transformedPanY = isPanY | ||
? transformPanY(panSpeed * (mouseY - prevMouseY)) | ||
? transformPanY(panSpeed * (currentMouseY - prevMouseY)) | ||
: 0; | ||
@@ -343,4 +345,4 @@ | ||
const transformedX = transformScaleX(mouseX); | ||
const transformedY = transformScaleY(mouseY); | ||
const transformedX = transformScaleX(currentMouseX); | ||
const transformedY = transformScaleY(currentMouseY); | ||
@@ -365,4 +367,4 @@ camera.scale( | ||
const y1 = hh - prevMouseY; | ||
const x2 = mouseX - wh; | ||
const y2 = hh - mouseY; | ||
const x2 = currentMouseX - wh; | ||
const y2 = hh - currentMouseY; | ||
// Angle between the start and end mouse position with respect to the | ||
@@ -381,4 +383,4 @@ // viewport center | ||
yScroll = 0; | ||
prevMouseX = mouseX; | ||
prevMouseY = mouseY; | ||
prevMouseX = currentMouseX; | ||
prevMouseY = currentMouseY; | ||
@@ -453,5 +455,2 @@ return isChanged; | ||
const mouseMoveHandler = event => { | ||
prevMouseX = mouseX; | ||
prevMouseY = mouseY; | ||
// Normalize mouse coordinates | ||
@@ -458,0 +457,0 @@ const bBox = element.getBoundingClientRect(); |
@@ -340,2 +340,4 @@ (function (global, factory) { | ||
isChanged = false; | ||
var currentMouseX = mouseX; | ||
var currentMouseY = mouseY; | ||
@@ -349,7 +351,7 @@ if ( | ||
var transformedPanX = isPanX | ||
? transformPanX(panSpeed * (mouseX - prevMouseX)) | ||
? transformPanX(panSpeed * (currentMouseX - prevMouseX)) | ||
: 0; | ||
var transformedPanY = isPanY | ||
? transformPanY(panSpeed * (mouseY - prevMouseY)) | ||
? transformPanY(panSpeed * (currentMouseY - prevMouseY)) | ||
: 0; | ||
@@ -364,4 +366,4 @@ | ||
var transformedX = transformScaleX(mouseX); | ||
var transformedY = transformScaleY(mouseY); | ||
var transformedX = transformScaleX(currentMouseX); | ||
var transformedY = transformScaleY(currentMouseY); | ||
@@ -386,4 +388,4 @@ camera.scale( | ||
var y1 = hh - prevMouseY; | ||
var x2 = mouseX - wh; | ||
var y2 = hh - mouseY; | ||
var x2 = currentMouseX - wh; | ||
var y2 = hh - currentMouseY; | ||
// Angle between the start and end mouse position with respect to the | ||
@@ -402,4 +404,4 @@ // viewport center | ||
yScroll = 0; | ||
prevMouseX = mouseX; | ||
prevMouseY = mouseY; | ||
prevMouseX = currentMouseX; | ||
prevMouseY = currentMouseY; | ||
@@ -475,5 +477,2 @@ return isChanged; | ||
var mouseMoveHandler = function (event) { | ||
prevMouseX = mouseX; | ||
prevMouseY = mouseY; | ||
// Normalize mouse coordinates | ||
@@ -480,0 +479,0 @@ var bBox = element.getBoundingClientRect(); |
@@ -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,r,a,i){void 0===n&&(n=[0,0]),void 0===t&&(t=1),void 0===o&&(o=0),void 0===r&&(r=[0,0]),void 0===a&&(a=[[0,1/0],[0,1/0]]),void 0===i&&(i=[[-1/0,1/0],[-1/0,1/0]]);var v=new Float32Array(16),u=new Float32Array(16),c=new Float32Array(16),s=e.mat4.create(),d=r.slice(0,2).concat([0],[1]),l=Array.isArray(a[0])?[].concat(a[0]):[].concat(a),f=Array.isArray(a[0])?[].concat(a[1]):[].concat(a),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,s).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 r=n[0];void 0===r&&(r=0);var a=n[1];void 0===a&&(a=0),void 0===t&&(t=1),void 0===o&&(o=0),s=e.mat4.create(),M([-r,-a]),x(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 r=e.mat4.fromTranslation(u,v);e.mat4.multiply(s,r,s)},h=function(n,t){var o=Array.isArray(n),r=o?n[0]:n,a=o?n[1]:n;if(!(r<=0||a<=0||1===r&&1===a)){var i=p(),m=i[0]*r,y=i[1]*a;if(r=Math.max(l[0],Math.min(m,l[1]))/i[0],a=Math.max(f[0],Math.min(y,f[1]))/i[1],1!==r||1!==a){v[0]=r,v[1]=a,v[2]=1;var w=e.mat4.fromScaling(u,v),g=t?t.concat([0]):d,A=e.mat4.fromTranslation(v,g);e.mat4.multiply(s,A,e.mat4.multiply(s,w,e.mat4.multiply(s,e.mat4.invert(c,A),s)))}}},x=function(n){var t=e.mat4.create();e.mat4.fromRotation(t,n,[0,0,1]),e.mat4.multiply(s,t,s)},E=function(e){!e||e.length<16||(s=e)};return A(n,t,o),{get translation(){return e.mat4.getTranslation(v,s).slice(0,2)},get target(){return e.vec4.transformMat4(v,d,e.mat4.invert(c,s)).slice(0,2)},get scaling(){return p()},get minScaling(){return w()},get maxScaling(){return g()},get scaleBounds(){return[[].concat(l),[].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(s[0]/g())},get view(){return s},get viewCenter(){return d.slice(0,2)},lookAt:A,translate:M,pan:M,rotate:x,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]);l[0]=n?e[0][0]:e[0],l[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){d=e.slice(0,2).concat([0],[1])}}},t=["pan","rotate"],o={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(r,a){void 0===a&&(a={});var i=a.distance;void 0===i&&(i=1);var v=a.target;void 0===v&&(v=[0,0]);var u=a.rotation;void 0===u&&(u=0);var c=a.isNdc;void 0===c&&(c=!0);var s=a.isFixed;void 0===s&&(s=!1);var d=a.isPan;void 0===d&&(d=!0);var l=a.panSpeed;void 0===l&&(l=1);var f=a.isRotate;void 0===f&&(f=!0);var m=a.rotateSpeed;void 0===m&&(m=1);var y=a.defaultMouseDownMoveAction;void 0===y&&(y="pan");var p=a.mouseDownMoveModKey;void 0===p&&(p="alt");var w=a.isZoom;void 0===w&&(w=!0);var g=a.zoomSpeed;void 0===g&&(g=1);var A=a.viewCenter,M=a.scaleBounds,h=a.translationBounds,x=a.onKeyDown;void 0===x&&(x=function(){});var E=a.onKeyUp;void 0===E&&(E=function(){});var L=a.onMouseDown;void 0===L&&(L=function(){});var B=a.onMouseUp;void 0===B&&(B=function(){});var S=a.onMouseMove;void 0===S&&(S=function(){});var D=a.onWheel;void 0===D&&(D=function(){});var K=n(v,i,u,A,M,h),k=0,C=0,F=0,R=0,T=!1,b=0,z=1,P=1,V=1,Y=!1,j=!1,U=Array.isArray(d)?Boolean(d[0]):d,Z=Array.isArray(d)?Boolean(d[1]):d,q=Array.isArray(w)?Boolean(w[0]):w,N=Array.isArray(w)?Boolean(w[1]):w,O="pan"===y,W=c?function(e){return e/z*2*V}:function(e){return e},X=c?function(e){return e/P*2}:function(e){return-e},G=c?function(e){return(e/z*2-1)*V}:function(e){return e},H=c?function(e){return 1-e/P*2}:function(e){return e},I=function(e){j=!1,E(e)},J=function(e){j=e[o[p]],x(e)},Q=function(e){T=!1,B(e)},$=function(e){T=1===e.buttons,L(e)},_=function(e){F=k,R=C;var n=r.getBoundingClientRect();k=e.clientX-n.left,C=e.clientY-n.top,z=n.width,P=n.height,V=z/P,S(e)},ee=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;b+=n*(e.deltaY||0),D(e)};return window.addEventListener("keydown",J,{passive:!0}),window.addEventListener("keyup",I,{passive:!0}),r.addEventListener("mousedown",$,{passive:!0}),window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("mousemove",_,{passive:!0}),r.addEventListener("wheel",ee,{passive:!1}),K.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var r=e.isFixed;void 0===r&&(r=null);var a=e.isPan;void 0===a&&(a=null);var i=e.isRotate;void 0===i&&(i=null);var v=e.isZoom;void 0===v&&(v=null);var u=e.panSpeed;void 0===u&&(u=null);var c=e.rotateSpeed;void 0===c&&(c=null);var A=e.zoomSpeed;void 0===A&&(A=null);var M=e.mouseDownMoveModKey;void 0===M&&(M=null),y=null!==n&&t.includes(n)?n:y,O="pan"===y,s=null!==r?r:s,d=null!==a?a:d,f=null!==i?i:f,w=null!==v?v:w,l=+u>0?u:l,m=+c>0?c:m,g=+A>0?A:g,p=null!==M&&Object.keys(o).includes(M)?M:p},K.dispose=function(){K=void 0,window.removeEventListener("keydown",J),window.removeEventListener("keyup",I),r.removeEventListener("mousedown",$),window.removeEventListener("mouseup",Q),window.removeEventListener("mousemove",_),r.removeEventListener("wheel",ee)},K.refresh=function(){console.warn("refresh() is deprecated. You do not have to call it anymore.")},K.tick=function(){if(s)return!1;if(Y=!1,(U||Z)&&T&&(O&&!j||!O&&j)){var n=U?W(l*(k-F)):0,t=Z?X(l*(C-R)):0;K.pan([n,t]),Y=!0}if(w&&b){var o=g*Math.exp(b/P),r=G(k),a=H(C);K.scale([q?1/o:1,N?1/o:1],[r,a]),Y=!0}if(f&&T&&(O&&j||!O&&!j)){var i=z/2,v=P/2,u=F-i,c=v-R,d=k-i,y=v-C,p=e.vec2.angle([u,c],[d,y]),A=u*y-d*c;K.rotate(m*p*Math.sign(A)),Y=!0}return b=0,F=k,R=C,Y},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,r,a,i){void 0===n&&(n=[0,0]),void 0===t&&(t=1),void 0===o&&(o=0),void 0===r&&(r=[0,0]),void 0===a&&(a=[[0,1/0],[0,1/0]]),void 0===i&&(i=[[-1/0,1/0],[-1/0,1/0]]);var v=new Float32Array(16),u=new Float32Array(16),c=new Float32Array(16),s=e.mat4.create(),d=r.slice(0,2).concat([0],[1]),l=Array.isArray(a[0])?[].concat(a[0]):[].concat(a),f=Array.isArray(a[0])?[].concat(a[1]):[].concat(a),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,s).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 r=n[0];void 0===r&&(r=0);var a=n[1];void 0===a&&(a=0),void 0===t&&(t=1),void 0===o&&(o=0),s=e.mat4.create(),M([-r,-a]),x(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 r=e.mat4.fromTranslation(u,v);e.mat4.multiply(s,r,s)},h=function(n,t){var o=Array.isArray(n),r=o?n[0]:n,a=o?n[1]:n;if(!(r<=0||a<=0||1===r&&1===a)){var i=p(),m=i[0]*r,y=i[1]*a;if(r=Math.max(l[0],Math.min(m,l[1]))/i[0],a=Math.max(f[0],Math.min(y,f[1]))/i[1],1!==r||1!==a){v[0]=r,v[1]=a,v[2]=1;var w=e.mat4.fromScaling(u,v),g=t?t.concat([0]):d,A=e.mat4.fromTranslation(v,g);e.mat4.multiply(s,A,e.mat4.multiply(s,w,e.mat4.multiply(s,e.mat4.invert(c,A),s)))}}},x=function(n){var t=e.mat4.create();e.mat4.fromRotation(t,n,[0,0,1]),e.mat4.multiply(s,t,s)},E=function(e){!e||e.length<16||(s=e)};return A(n,t,o),{get translation(){return e.mat4.getTranslation(v,s).slice(0,2)},get target(){return e.vec4.transformMat4(v,d,e.mat4.invert(c,s)).slice(0,2)},get scaling(){return p()},get minScaling(){return w()},get maxScaling(){return g()},get scaleBounds(){return[[].concat(l),[].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(s[0]/g())},get view(){return s},get viewCenter(){return d.slice(0,2)},lookAt:A,translate:M,pan:M,rotate:x,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]);l[0]=n?e[0][0]:e[0],l[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){d=e.slice(0,2).concat([0],[1])}}},t=["pan","rotate"],o={alt:"altKey",cmd:"metaKey",ctrl:"ctrlKey",meta:"metaKey",shift:"shiftKey"};return function(r,a){void 0===a&&(a={});var i=a.distance;void 0===i&&(i=1);var v=a.target;void 0===v&&(v=[0,0]);var u=a.rotation;void 0===u&&(u=0);var c=a.isNdc;void 0===c&&(c=!0);var s=a.isFixed;void 0===s&&(s=!1);var d=a.isPan;void 0===d&&(d=!0);var l=a.panSpeed;void 0===l&&(l=1);var f=a.isRotate;void 0===f&&(f=!0);var m=a.rotateSpeed;void 0===m&&(m=1);var y=a.defaultMouseDownMoveAction;void 0===y&&(y="pan");var p=a.mouseDownMoveModKey;void 0===p&&(p="alt");var w=a.isZoom;void 0===w&&(w=!0);var g=a.zoomSpeed;void 0===g&&(g=1);var A=a.viewCenter,M=a.scaleBounds,h=a.translationBounds,x=a.onKeyDown;void 0===x&&(x=function(){});var E=a.onKeyUp;void 0===E&&(E=function(){});var L=a.onMouseDown;void 0===L&&(L=function(){});var B=a.onMouseUp;void 0===B&&(B=function(){});var S=a.onMouseMove;void 0===S&&(S=function(){});var D=a.onWheel;void 0===D&&(D=function(){});var K=n(v,i,u,A,M,h),k=0,C=0,F=0,R=0,T=!1,b=0,z=1,P=1,V=1,Y=!1,j=!1,U=Array.isArray(d)?Boolean(d[0]):d,Z=Array.isArray(d)?Boolean(d[1]):d,q=Array.isArray(w)?Boolean(w[0]):w,N=Array.isArray(w)?Boolean(w[1]):w,O="pan"===y,W=c?function(e){return e/z*2*V}:function(e){return e},X=c?function(e){return e/P*2}:function(e){return-e},G=c?function(e){return(e/z*2-1)*V}:function(e){return e},H=c?function(e){return 1-e/P*2}:function(e){return e},I=function(e){j=!1,E(e)},J=function(e){j=e[o[p]],x(e)},Q=function(e){T=!1,B(e)},$=function(e){T=1===e.buttons,L(e)},_=function(e){var n=r.getBoundingClientRect();k=e.clientX-n.left,C=e.clientY-n.top,z=n.width,P=n.height,V=z/P,S(e)},ee=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;b+=n*(e.deltaY||0),D(e)};return window.addEventListener("keydown",J,{passive:!0}),window.addEventListener("keyup",I,{passive:!0}),r.addEventListener("mousedown",$,{passive:!0}),window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("mousemove",_,{passive:!0}),r.addEventListener("wheel",ee,{passive:!1}),K.config=function(e){void 0===e&&(e={});var n=e.defaultMouseDownMoveAction;void 0===n&&(n=null);var r=e.isFixed;void 0===r&&(r=null);var a=e.isPan;void 0===a&&(a=null);var i=e.isRotate;void 0===i&&(i=null);var v=e.isZoom;void 0===v&&(v=null);var u=e.panSpeed;void 0===u&&(u=null);var c=e.rotateSpeed;void 0===c&&(c=null);var A=e.zoomSpeed;void 0===A&&(A=null);var M=e.mouseDownMoveModKey;void 0===M&&(M=null),y=null!==n&&t.includes(n)?n:y,O="pan"===y,s=null!==r?r:s,d=null!==a?a:d,f=null!==i?i:f,w=null!==v?v:w,l=+u>0?u:l,m=+c>0?c:m,g=+A>0?A:g,p=null!==M&&Object.keys(o).includes(M)?M:p},K.dispose=function(){K=void 0,window.removeEventListener("keydown",J),window.removeEventListener("keyup",I),r.removeEventListener("mousedown",$),window.removeEventListener("mouseup",Q),window.removeEventListener("mousemove",_),r.removeEventListener("wheel",ee)},K.refresh=function(){console.warn("refresh() is deprecated. You do not have to call it anymore.")},K.tick=function(){if(s)return!1;Y=!1;var n=k,t=C;if((U||Z)&&T&&(O&&!j||!O&&j)){var o=U?W(l*(n-F)):0,r=Z?X(l*(t-R)):0;K.pan([o,r]),Y=!0}if(w&&b){var a=g*Math.exp(b/P),i=G(n),v=H(t);K.scale([q?1/a:1,N?1/a:1],[i,v]),Y=!0}if(f&&T&&(O&&j||!O&&!j)){var u=z/2,c=P/2,d=F-u,y=c-R,p=n-u,A=c-t,M=e.vec2.angle([d,y],[p,A]),h=d*A-p*y;K.rotate(m*M*Math.sign(h)),Y=!0}return b=0,F=n,R=t,Y},K}})); |
{ | ||
"name": "dom-2d-camera", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "A wrapper for attaching a 2D camera to a DOM element", | ||
@@ -5,0 +5,0 @@ "author": "Fritz Lekschas", |
45938