canvas-camera-2d - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

CHANGELOG.md

@@ -0,1 +1,5 @@
+**v0.5.1**
+
+- Adjust mouse coordinates by aspect ration to support typical projection view model setups.
+
 **v0.5.0**
@@ -2,0 +6,0 @@

dist/canvas-camera-2d.js

@@ -39,3 +39,3 @@ (function (global, factory) {
     var width = canvas.width / window.devicePixelRatio;
-
+    var aspectRatio = width / height;
     var isAlt = false;
@@ -62,2 +62,8 @@
 
+      var x = mousePosition[0];
+      var y = mousePosition[1];
+      var ref = mousePosition.prev;
+      var pX = ref[0];
+      var pY = ref[1];
+
       if (isPan && mousePressed.left && !isAlt) {
@@ -67,4 +73,4 @@ // To pan 1:1 we need to half the width and height because the uniform
         camera.pan([
-          ((panSpeed * (mousePosition[0] - mousePosition.prev[0])) / width) * 2,
-          ((panSpeed * (mousePosition.prev[1] - mousePosition[1])) / height) * 2
+          ((panSpeed * (x - pX)) / width) * 2 * Math.max(aspectRatio, 1),
+          (((panSpeed * (pY - y)) / height) * 2) / Math.min(aspectRatio, 1)
         ]);
@@ -78,4 +84,4 @@ isChanged = true;
         // Get normalized device coordinates (NDC)
-        var xNdc = -1 + (mousePosition[0] / width) * 2;
-        var yNdc = 1 + (mousePosition[1] / height) * -2;
+        var xNdc = (-1 + (x / width) * 2) * Math.max(aspectRatio, 1);
+        var yNdc = (1 - (y / height) * 2) / Math.min(aspectRatio, 1);
 
@@ -90,6 +96,6 @@ camera.scale(1 / dZ, [xNdc, yNdc]);
         var hh = height / 2;
-        var x1 = mousePosition.prev[0] - wh;
-        var y1 = hh - mousePosition.prev[1];
-        var x2 = mousePosition[0] - wh;
-        var y2 = hh - mousePosition[1];
+        var x1 = pX - wh;
+        var y1 = hh - pY;
+        var x2 = x - wh;
+        var y2 = hh - y;
         // Angle between the start and end mouse position with respect to the
@@ -144,2 +150,3 @@ // viewport center
       width = canvas.width / window.devicePixelRatio;
+      aspectRatio = width / height;
     };
@@ -146,0 +153,0 @@

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

@@ -1,1 +0,1 @@
-!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("camera-2d-simple"),require("gl-matrix"),require("key-pressed"),require("mouse-position"),require("mouse-pressed"),require("scroll-speed")):"function"==typeof define&&define.amd?define(["camera-2d-simple","gl-matrix","key-pressed","mouse-position","mouse-pressed","scroll-speed"],i):e.canvasCamera2d=i(e.createCamera2d,e.glMatrix,e.createKeyPressed,e.createMousePosition,e.createMousePressed,e.createScroll)}(this,function(e,i,r,o,t,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,r=r&&r.hasOwnProperty("default")?r.default:r,o=o&&o.hasOwnProperty("default")?o.default:o,t=t&&t.hasOwnProperty("default")?t.default:t,a=a&&a.hasOwnProperty("default")?a.default:a;return function(d,s){void 0===s&&(s={});var n=s.distance;void 0===n&&(n=1);var v=s.target;void 0===v&&(v=[0,0]);var u=s.rotation;void 0===u&&(u=0);var p=s.isFixed;void 0===p&&(p=!1);var l=s.isPan;void 0===l&&(l=!0);var f=s.panSpeed;void 0===f&&(f=1);var c=s.isRotate;void 0===c&&(c=!0);var m=s.rotateSpeed;void 0===m&&(m=1);var h=s.isZoom;void 0===h&&(h=!0);var w=s.zoomSpeed;void 0===w&&(w=1);var P=new Float32Array(16),x=e(v,n,u),y=!1,g=o(d),S=t(d),q=a(d,h),M=d.height/window.devicePixelRatio,R=d.width/window.devicePixelRatio,O=!1;return x.config=function(e){void 0===e&&(e={});var i=e.isFixed,r=e.isPan,o=e.isRotate,t=e.isZoom,a=e.panSpeed,d=e.rotateSpeed,s=e.zoomSpeed;p=i||p,l=r||l,c=o||c,h=t||h,f=+a>0?a:f,m=+d>0?d:m,w=+s>0?s:w},x.dispose=function(){q.dispose(),S.dispose(),g.dispose(),x=void 0,q=void 0,S=void 0,g=void 0},x.getGlPos=function(e,r,o,t){var a=[e/o*2-1,1+r/t*-2,1,1],d=i.mat4.invert(P,x.view);return i.vec4.transformMat4(a,a,d),a.slice(0,2)},x.refresh=function(){M=d.height/window.devicePixelRatio,R=d.width/window.devicePixelRatio},x.tick=function(){if(p)return!1;if(O=r("<alt>"),y=!1,l&&S.left&&!O&&(x.pan([f*(g[0]-g.prev[0])/R*2,f*(g.prev[1]-g[1])/M*2]),y=!0),h&&q[1]){var e=w*Math.exp(q[1]/M),o=g[0]/R*2-1,t=1+g[1]/M*-2;x.scale(1/e,[o,t]),y=!0}if(c&&S.left&&O){var a=R/2,d=M/2,s=g.prev[0]-a,n=d-g.prev[1],v=g[0]-a,u=d-g[1],P=i.vec2.angle([s,n],[v,u]),k=s*u-v*n;x.rotate(m*P*Math.sign(k)),y=!0}return q.flush(),g.flush(),y},x}});
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("camera-2d-simple"),require("gl-matrix"),require("key-pressed"),require("mouse-position"),require("mouse-pressed"),require("scroll-speed")):"function"==typeof define&&define.amd?define(["camera-2d-simple","gl-matrix","key-pressed","mouse-position","mouse-pressed","scroll-speed"],i):e.canvasCamera2d=i(e.createCamera2d,e.glMatrix,e.createKeyPressed,e.createMousePosition,e.createMousePressed,e.createScroll)}(this,function(e,i,t,r,o,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t,r=r&&r.hasOwnProperty("default")?r.default:r,o=o&&o.hasOwnProperty("default")?o.default:o,a=a&&a.hasOwnProperty("default")?a.default:a;return function(d,s){void 0===s&&(s={});var n=s.distance;void 0===n&&(n=1);var u=s.target;void 0===u&&(u=[0,0]);var v=s.rotation;void 0===v&&(v=0);var l=s.isFixed;void 0===l&&(l=!1);var f=s.isPan;void 0===f&&(f=!0);var p=s.panSpeed;void 0===p&&(p=1);var c=s.isRotate;void 0===c&&(c=!0);var m=s.rotateSpeed;void 0===m&&(m=1);var h=s.isZoom;void 0===h&&(h=!0);var w=s.zoomSpeed;void 0===w&&(w=1);var P=new Float32Array(16),x=e(u,n,v),y=!1,g=r(d),M=o(d),S=a(d,h),q=d.height/window.devicePixelRatio,R=d.width/window.devicePixelRatio,O=R/q,k=!1;return x.config=function(e){void 0===e&&(e={});var i=e.isFixed,t=e.isPan,r=e.isRotate,o=e.isZoom,a=e.panSpeed,d=e.rotateSpeed,s=e.zoomSpeed;l=i||l,f=t||f,c=r||c,h=o||h,p=+a>0?a:p,m=+d>0?d:m,w=+s>0?s:w},x.dispose=function(){S.dispose(),M.dispose(),g.dispose(),x=void 0,S=void 0,M=void 0,g=void 0},x.getGlPos=function(e,t,r,o){var a=[e/r*2-1,1+t/o*-2,1,1],d=i.mat4.invert(P,x.view);return i.vec4.transformMat4(a,a,d),a.slice(0,2)},x.refresh=function(){q=d.height/window.devicePixelRatio,R=d.width/window.devicePixelRatio,O=R/q},x.tick=function(){if(l)return!1;k=t("<alt>"),y=!1;var e=g[0],r=g[1],o=g.prev,a=o[0],d=o[1];if(f&&M.left&&!k&&(x.pan([p*(e-a)/R*2*Math.max(O,1),p*(d-r)/q*2/Math.min(O,1)]),y=!0),h&&S[1]){var s=w*Math.exp(S[1]/q),n=(e/R*2-1)*Math.max(O,1),u=(1-r/q*2)/Math.min(O,1);x.scale(1/s,[n,u]),y=!0}if(c&&M.left&&k){var v=R/2,P=q/2,F=a-v,z=P-d,C=e-v,Z=P-r,b=i.vec2.angle([F,z],[C,Z]),j=F*Z-C*z;x.rotate(m*b*Math.sign(j)),y=!0}return S.flush(),g.flush(),y},x}});

package.json

 {
   "name": "canvas-camera-2d",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A canvas wrapper for a 2D camera",
@@ -5,0 +5,0 @@ "author": "Fritz Lekschas",

README.md

@@ -27,3 +27,3 @@ # Canvas Warpper for 2D Camera
 ```
-npm -i canvas-camera-2d
+npm i canvas-camera-2d
 ```
@@ -30,0 +30,0 @@

src/index.js

@@ -33,3 +33,3 @@ import createCamera from "camera-2d-simple";
   let width = canvas.width / window.devicePixelRatio;
-
+  let aspectRatio = width / height;
   let isAlt = false;
@@ -56,2 +56,5 @@
 
+    const { 0: x, 1: y } = mousePosition;
+    const { 0: pX, 1: pY } = mousePosition.prev;
+
     if (isPan && mousePressed.left && !isAlt) {
@@ -61,4 +64,4 @@ // To pan 1:1 we need to half the width and height because the uniform
       camera.pan([
-        ((panSpeed * (mousePosition[0] - mousePosition.prev[0])) / width) * 2,
-        ((panSpeed * (mousePosition.prev[1] - mousePosition[1])) / height) * 2
+        ((panSpeed * (x - pX)) / width) * 2 * Math.max(aspectRatio, 1),
+        (((panSpeed * (pY - y)) / height) * 2) / Math.min(aspectRatio, 1)
       ]);
@@ -72,4 +75,4 @@ isChanged = true;
       // Get normalized device coordinates (NDC)
-      const xNdc = -1 + (mousePosition[0] / width) * 2;
-      const yNdc = 1 + (mousePosition[1] / height) * -2;
+      const xNdc = (-1 + (x / width) * 2) * Math.max(aspectRatio, 1);
+      const yNdc = (1 - (y / height) * 2) / Math.min(aspectRatio, 1);
 
@@ -84,6 +87,6 @@ camera.scale(1 / dZ, [xNdc, yNdc]);
       const hh = height / 2;
-      const x1 = mousePosition.prev[0] - wh;
-      const y1 = hh - mousePosition.prev[1];
-      const x2 = mousePosition[0] - wh;
-      const y2 = hh - mousePosition[1];
+      const x1 = pX - wh;
+      const y1 = hh - pY;
+      const x2 = x - wh;
+      const y2 = hh - y;
       // Angle between the start and end mouse position with respect to the
@@ -137,2 +140,3 @@ // viewport center
     width = canvas.width / window.devicePixelRatio;
+    aspectRatio = width / height;
   };
@@ -139,0 +143,0 @@

No alert changes

Improved metrics

Total package byte prevSize

19787

increased by2.28%

Lines of code

265

increased by4.33%

No dependency changes