dom-2d-camera - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -0,4 +1,10 @@
+## v1.2.0
+
+- Change panning and rotating modification behavior:
+  - The default bahvior on mouse down + move is now defined via `defaultMouseDownMoveAction`, which is `pan` by default and can also be `rotate`
+  - To dynamically switch the behavior to `rotate` or `pan` via a modifier key, `rotateKey` is now renamed to `mouseDownMoveModKey`, which is by default `alt`
+
 ## v1.1.0
 
-- Allow changing the modofier key for rotating the camera via `rotateKey`. Valid keys are `alt`, `shift`, `ctrl`, and `cmd`
+- Allow changing the modifier key for rotating the camera via `rotateKey`. Valid keys are `alt`, `shift`, `ctrl`, and `cmd`
 
@@ -5,0 +11,0 @@ ## v1.0.2

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

 import createCamera from 'camera-2d-simple';
 import { vec2 } from 'gl-matrix';
 
-const VALID_ROTATE_KEYS = ['alt', 'shift', 'meta', 'cmd'];
+const MOUSE_DOWN_MOVE_ACTIONS = ["pan", "rotate"];
 const KEY_MAP = {
-  alt: 'altKey',
-  shift: 'shiftKey',
-  meta: 'metaKey',
-  cmd: 'metaKey',
+  alt: "altKey",
+  cmd: "metaKey",
+  ctrl: "ctrlKey",
+  meta: "metaKey",
+  shift: "shiftKey"
 };
@@ -24,5 +25,6 @@
     rotateSpeed = 1,
+    defaultMouseDownMoveAction = "pan",
+    mouseDownMoveModKey = "alt",
     isZoom = true,
     zoomSpeed = 1,
-    rotateKey = 'alt',
     viewCenter,
@@ -58,4 +60,6 @@ scaleBounds,
   let aspectRatio = 1;
-  let isAlt = false;
+  let isMouseDownMoveModActive = false;
 
+  let panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
+
   const transformPanX = isNdc
@@ -80,3 +84,7 @@ ? dX => (dX / width) * 2 * aspectRatio // to normalized device coords
 
-    if (isPan && isLeftMousePressed && !isAlt) {
+    if (
+      isPan &&
+      isLeftMousePressed &&
+      (panOnMouseDownMove || !isMouseDownMoveModActive)
+    ) {
       // To pan 1:1 we need to half the width and height because the uniform
@@ -103,3 +111,7 @@ // coordinate system goes from -1 to 1.
 
-    if (isRotate && isLeftMousePressed && isAlt) {
+    if (
+      isRotate &&
+      isLeftMousePressed &&
+      (!panOnMouseDownMove || isMouseDownMoveModActive)
+    ) {
       const wh = width / 2;
@@ -131,2 +143,3 @@ const hh = height / 2;
   const config = ({
+    defaultMouseDownMoveAction: newDefaultMouseDownMoveAction = null,
     isFixed: newIsFixed = null,
@@ -139,4 +152,12 @@ isPan: newIsPan = null,
     zoomSpeed: newZoomSpeed = null,
-    rotateKey: newRotateKey = null,
+    mouseDownMoveModKey: newMouseDownMoveModKey = null
   } = {}) => {
+    defaultMouseDownMoveAction =
+      newDefaultMouseDownMoveAction !== null &&
+      MOUSE_DOWN_MOVE_ACTIONS.includes(newDefaultMouseDownMoveAction)
+        ? newDefaultMouseDownMoveAction
+        : defaultMouseDownMoveAction;
+
+    panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
+
     isFixed = newIsFixed !== null ? newIsFixed : isFixed;
@@ -149,5 +170,8 @@ isPan = newIsPan !== null ? newIsPan : isPan;
     zoomSpeed = +newZoomSpeed > 0 ? newZoomSpeed : zoomSpeed;
-    rotateKey = newRotateKey !== null && VALID_ROTATE_KEYS.includes(newRotateKey)
-      ? newRotateKey
-      : rotateKey;
+
+    mouseDownMoveModKey =
+      newMouseDownMoveModKey !== null &&
+      Object.keys(KEY_MAP).includes(newMouseDownMoveModKey)
+        ? newMouseDownMoveModKey
+        : mouseDownMoveModKey;
   };
@@ -165,3 +189,3 @@
   const keyUpHandler = event => {
-    isAlt = false;
+    isMouseDownMoveModActive = false;
 
@@ -172,3 +196,3 @@ onKeyUp(event);
   const keyDownHandler = event => {
-    isAlt = event[KEY_MAP[rotateKey]];
+    isMouseDownMoveModActive = event[KEY_MAP[mouseDownMoveModKey]];
 
@@ -175,0 +199,0 @@ onKeyDown(event);

dist/dom-2d-camera.js

@@ -9,8 +9,9 @@ (function (global, factory) {
 
-  var VALID_ROTATE_KEYS = ['alt', 'shift', 'meta', 'cmd'];
+  var MOUSE_DOWN_MOVE_ACTIONS = ["pan", "rotate"];
   var KEY_MAP = {
-    alt: 'altKey',
-    shift: 'shiftKey',
-    meta: 'metaKey',
-    cmd: 'metaKey',
+    alt: "altKey",
+    cmd: "metaKey",
+    ctrl: "ctrlKey",
+    meta: "metaKey",
+    shift: "shiftKey"
   };
@@ -32,5 +33,6 @@
     var rotateSpeed = ref.rotateSpeed; if ( rotateSpeed === void 0 ) rotateSpeed = 1;
+    var defaultMouseDownMoveAction = ref.defaultMouseDownMoveAction; if ( defaultMouseDownMoveAction === void 0 ) defaultMouseDownMoveAction = "pan";
+    var mouseDownMoveModKey = ref.mouseDownMoveModKey; if ( mouseDownMoveModKey === void 0 ) mouseDownMoveModKey = "alt";
     var isZoom = ref.isZoom; if ( isZoom === void 0 ) isZoom = true;
     var zoomSpeed = ref.zoomSpeed; if ( zoomSpeed === void 0 ) zoomSpeed = 1;
-    var rotateKey = ref.rotateKey; if ( rotateKey === void 0 ) rotateKey = 'alt';
     var viewCenter = ref.viewCenter;
@@ -65,4 +67,6 @@ var scaleBounds = ref.scaleBounds;
     var aspectRatio = 1;
-    var isAlt = false;
+    var isMouseDownMoveModActive = false;
 
+    var panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
+
     var transformPanX = isNdc
@@ -87,3 +91,7 @@ ? function (dX) { return (dX / width) * 2 * aspectRatio; } // to normalized device coords
 
-      if (isPan && isLeftMousePressed && !isAlt) {
+      if (
+        isPan &&
+        isLeftMousePressed &&
+        (panOnMouseDownMove || !isMouseDownMoveModActive)
+      ) {
         // To pan 1:1 we need to half the width and height because the uniform
@@ -110,3 +118,7 @@ // coordinate system goes from -1 to 1.
 
-      if (isRotate && isLeftMousePressed && isAlt) {
+      if (
+        isRotate &&
+        isLeftMousePressed &&
+        (!panOnMouseDownMove || isMouseDownMoveModActive)
+      ) {
         var wh = width / 2;
@@ -139,2 +151,3 @@ var hh = height / 2;
       if ( ref === void 0 ) ref = {};
+      var newDefaultMouseDownMoveAction = ref.defaultMouseDownMoveAction; if ( newDefaultMouseDownMoveAction === void 0 ) newDefaultMouseDownMoveAction = null;
       var newIsFixed = ref.isFixed; if ( newIsFixed === void 0 ) newIsFixed = null;
@@ -147,4 +160,12 @@ var newIsPan = ref.isPan; if ( newIsPan === void 0 ) newIsPan = null;
       var newZoomSpeed = ref.zoomSpeed; if ( newZoomSpeed === void 0 ) newZoomSpeed = null;
-      var newRotateKey = ref.rotateKey; if ( newRotateKey === void 0 ) newRotateKey = null;
+      var newMouseDownMoveModKey = ref.mouseDownMoveModKey; if ( newMouseDownMoveModKey === void 0 ) newMouseDownMoveModKey = null;
 
+      defaultMouseDownMoveAction =
+        newDefaultMouseDownMoveAction !== null &&
+        MOUSE_DOWN_MOVE_ACTIONS.includes(newDefaultMouseDownMoveAction)
+          ? newDefaultMouseDownMoveAction
+          : defaultMouseDownMoveAction;
+
+      panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
+
       isFixed = newIsFixed !== null ? newIsFixed : isFixed;
@@ -157,5 +178,8 @@ isPan = newIsPan !== null ? newIsPan : isPan;
       zoomSpeed = +newZoomSpeed > 0 ? newZoomSpeed : zoomSpeed;
-      rotateKey = newRotateKey !== null && VALID_ROTATE_KEYS.includes(newRotateKey)
-        ? newRotateKey
-        : rotateKey;
+
+      mouseDownMoveModKey =
+        newMouseDownMoveModKey !== null &&
+        Object.keys(KEY_MAP).includes(newMouseDownMoveModKey)
+          ? newMouseDownMoveModKey
+          : mouseDownMoveModKey;
     };
@@ -173,3 +197,3 @@
     var keyUpHandler = function (event) {
-      isAlt = false;
+      isMouseDownMoveModActive = false;
 
@@ -180,3 +204,3 @@ onKeyUp(event);
     var keyDownHandler = function (event) {
-      isAlt = event[KEY_MAP[rotateKey]];
+      isMouseDownMoveModActive = event[KEY_MAP[mouseDownMoveModKey]];
 
@@ -183,0 +207,0 @@ onKeyDown(event);

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 t=["alt","shift","meta","cmd"],o={alt:"altKey",shift:"shiftKey",meta:"metaKey",cmd:"metaKey"};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 f=r.panSpeed;void 0===f&&(f=1);var c=r.isRotate;void 0===c&&(c=!0);var m=r.rotateSpeed;void 0===m&&(m=1);var p=r.isZoom;void 0===p&&(p=!0);var w=r.zoomSpeed;void 0===w&&(w=1);var y=r.rotateKey;void 0===y&&(y="alt");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 x=r.onMouseDown;void 0===x&&(x=function(){});var K=r.onMouseUp;void 0===K&&(K=function(){});var M=r.onMouseMove;void 0===M&&(M=function(){});var S=r.onWheel;void 0===S&&(S=function(){});var k=e(v,a,d,h,E),C=!1,D=0,P=0,R=0,b=0,q=!1,z=0,B=0,F=0,U=1,Y=1,Z=1,j=!1,N=u?function(e){return e/U*2*Z}:function(e){return e},O=u?function(e){return e/Y*2}:function(e){return-e},W=u?function(e){return(e/U*2-1)*Z}:function(e){return e},X=u?function(e){return 1-e/Y*2}:function(e){return e},A=function(){var e=i.getBoundingClientRect();B=e.top,F=e.left,U=e.width,Y=e.height,Z=U/Y},G=function(e){j=!1,g(e)},H=function(e){j=e[o[y]],L(e)},I=function(e){q=!1,K(e)},J=function(e){q=1===e.buttons,x(e)},Q=function(e){R=D,b=P,D=e.clientX-F,P=e.clientY-B,M(e)},T=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;z+=n*(e.deltaY||0),S(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}),A(),k.config=function(e){void 0===e&&(e={});var n=e.isFixed;void 0===n&&(n=null);var o=e.isPan;void 0===o&&(o=null);var i=e.isRotate;void 0===i&&(i=null);var r=e.isZoom;void 0===r&&(r=null);var a=e.panSpeed;void 0===a&&(a=null);var v=e.rotateSpeed;void 0===v&&(v=null);var d=e.zoomSpeed;void 0===d&&(d=null);var u=e.rotateKey;void 0===u&&(u=null),s=null!==n?n:s,l=null!==o?o:l,c=null!==i?i:c,p=null!==r?r:p,f=+a>0?a:f,m=+v>0?v:m,w=+d>0?d:w,y=null!==u&&t.includes(u)?u:y},k.dispose=function(){k=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)},k.refresh=A,k.tick=function(){if(s)return!1;if(C=!1,l&&q&&!j&&(k.pan([N(f*(D-R)),O(f*(b-P))]),C=!0),p&&z){var e=w*Math.exp(z/Y),t=W(D),o=X(P);k.scale(1/e,[t,o]),C=!0}if(c&&q&&j){var i=U/2,r=Y/2,a=R-i,v=r-b,d=D-i,u=r-P,y=n.vec2.angle([a,v],[d,u]),h=a*u-d*v;k.rotate(m*y*Math.sign(h)),C=!0}return z=0,R=D,b=P,C},k}}));
+!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 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,j=0,q=!1,z=0,A=0,B=0,F=1,O=1,U=1,Y=!1,Z="pan"===m,N=u?function(e){return e/F*2*U}:function(e){return e},W=u?function(e){return e/O*2}:function(e){return-e},X=u?function(e){return(e/F*2-1)*U}:function(e){return e},G=u?function(e){return 1-e/O*2}:function(e){return e},H=function(){var e=i.getBoundingClientRect();A=e.top,B=e.left,F=e.width,O=e.height,U=F/O},I=function(e){Y=!1,g(e)},J=function(e){Y=e[t[w]],L(e)},Q=function(e){q=!1,x(e)},T=function(e){q=1===e.buttons,K(e)},V=function(e){R=b,j=P,b=e.clientX-B,P=e.clientY-A,D(e)},$=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;z+=n*(e.deltaY||0),k(e)};return window.addEventListener("keydown",J,{passive:!0}),window.addEventListener("keyup",I,{passive:!0}),i.addEventListener("mousedown",T,{passive:!0}),window.addEventListener("mouseup",Q,{passive:!0}),window.addEventListener("mousemove",V,{passive:!0}),i.addEventListener("wheel",$,{passive:!1}),H(),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 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,Z="pan"===m,s=null!==i?i: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(t).includes(E)?E:w},S.dispose=function(){S=void 0,window.removeEventListener("keydown",J),window.removeEventListener("keyup",I),i.removeEventListener("mousedown",T),window.removeEventListener("mouseup",Q),window.removeEventListener("mousemove",V),i.removeEventListener("wheel",$)},S.refresh=H,S.tick=function(){if(s)return!1;if(C=!1,l&&q&&(Z||!Y)&&(S.pan([N(c*(b-R)),W(c*(j-P))]),C=!0),y&&z){var e=M*Math.exp(z/O),o=X(b),t=G(P);S.scale(1/e,[o,t]),C=!0}if(f&&q&&(!Z||Y)){var i=F/2,r=O/2,v=R-i,a=r-j,d=b-i,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 z=0,R=b,j=P,C},S}}));

package.json

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

29501

increased by8.98%

Lines of code

435

increased by10.41%

No dependency changes