dom-2d-camera - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+## v1.1.0
+
+- Allow changing the modofier key for rotating the camera via `rotateKey`. Valid keys are `alt`, `shift`, `ctrl`, and `cmd`
+
 ## v1.0.2
@@ -2,0 +6,0 @@

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 KEY_MAP = {
+  alt: 'altKey',
+  shift: 'shiftKey',
+  meta: 'metaKey',
+  cmd: 'metaKey',
+};
+
 const dom2dCamera = (
@@ -18,2 +26,3 @@ element,
     zoomSpeed = 1,
+    rotateKey = 'alt',
     viewCenter,
@@ -125,3 +134,4 @@ scaleBounds,
     rotateSpeed: newRotateSpeed = null,
-    zoomSpeed: newZoomSpeed = null
+    zoomSpeed: newZoomSpeed = null,
+    rotateKey: newRotateKey = null,
   } = {}) => {
@@ -135,2 +145,5 @@ isFixed = newIsFixed !== null ? newIsFixed : isFixed;
     zoomSpeed = +newZoomSpeed > 0 ? newZoomSpeed : zoomSpeed;
+    rotateKey = newRotateKey !== null && VALID_ROTATE_KEYS.includes(newRotateKey)
+      ? newRotateKey
+      : rotateKey;
   };
@@ -154,3 +167,3 @@
   const keyDownHandler = event => {
-    isAlt = event.altKey;
+    isAlt = event[KEY_MAP[rotateKey]];
 
@@ -157,0 +170,0 @@ onKeyDown(event);

dist/dom-2d-camera.js

@@ -9,2 +9,10 @@ (function (global, factory) {
 
+  var VALID_ROTATE_KEYS = ['alt', 'shift', 'meta', 'cmd'];
+  var KEY_MAP = {
+    alt: 'altKey',
+    shift: 'shiftKey',
+    meta: 'metaKey',
+    cmd: 'metaKey',
+  };
+
   var dom2dCamera = function (
@@ -26,2 +34,3 @@ element,
     var zoomSpeed = ref.zoomSpeed; if ( zoomSpeed === void 0 ) zoomSpeed = 1;
+    var rotateKey = ref.rotateKey; if ( rotateKey === void 0 ) rotateKey = 'alt';
     var viewCenter = ref.viewCenter;
@@ -134,2 +143,3 @@ var scaleBounds = ref.scaleBounds;
       var newZoomSpeed = ref.zoomSpeed; if ( newZoomSpeed === void 0 ) newZoomSpeed = null;
+      var newRotateKey = ref.rotateKey; if ( newRotateKey === void 0 ) newRotateKey = null;
 
@@ -143,2 +153,5 @@ isFixed = newIsFixed !== null ? newIsFixed : isFixed;
       zoomSpeed = +newZoomSpeed > 0 ? newZoomSpeed : zoomSpeed;
+      rotateKey = newRotateKey !== null && VALID_ROTATE_KEYS.includes(newRotateKey)
+        ? newRotateKey
+        : rotateKey;
     };
@@ -162,3 +175,3 @@
     var keyDownHandler = function (event) {
-      isAlt = event.altKey;
+      isAlt = event[KEY_MAP[rotateKey]];
 
@@ -165,0 +178,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;return function(o,i){void 0===i&&(i={});var t=i.distance;void 0===t&&(t=1);var r=i.target;void 0===r&&(r=[0,0]);var v=i.rotation;void 0===v&&(v=0);var d=i.isNdc;void 0===d&&(d=!0);var a=i.isFixed;void 0===a&&(a=!1);var u=i.isPan;void 0===u&&(u=!0);var s=i.panSpeed;void 0===s&&(s=1);var l=i.isRotate;void 0===l&&(l=!0);var f=i.rotateSpeed;void 0===f&&(f=1);var c=i.isZoom;void 0===c&&(c=!0);var p=i.zoomSpeed;void 0===p&&(p=1);var m=i.viewCenter,w=i.scaleBounds,E=i.onKeyDown;void 0===E&&(E=function(){});var L=i.onKeyUp;void 0===L&&(L=function(){});var h=i.onMouseDown;void 0===h&&(h=function(){});var y=i.onMouseUp;void 0===y&&(y=function(){});var g=i.onMouseMove;void 0===g&&(g=function(){});var x=i.onWheel;void 0===x&&(x=function(){});var M=e(r,t,v,m,w),S=!1,k=0,C=0,D=0,K=0,P=!1,R=0,b=0,q=0,z=1,B=1,F=1,U=!1,Y=d?function(e){return e/z*2*F}:function(e){return e},Z=d?function(e){return e/B*2}:function(e){return-e},j=d?function(e){return(e/z*2-1)*F}:function(e){return e},N=d?function(e){return 1-e/B*2}:function(e){return e},O=function(){var e=o.getBoundingClientRect();b=e.top,q=e.left,z=e.width,B=e.height,F=z/B},W=function(e){U=!1,L(e)},X=function(e){U=e.altKey,E(e)},A=function(e){P=!1,y(e)},G=function(e){P=1===e.buttons,h(e)},H=function(e){D=k,K=C,k=e.clientX-q,C=e.clientY-b,g(e)},I=function(e){e.preventDefault();var n=1===e.deltaMode?12:1;R+=n*(e.deltaY||0),x(e)};return window.addEventListener("keydown",X,{passive:!0}),window.addEventListener("keyup",W,{passive:!0}),o.addEventListener("mousedown",G,{passive:!0}),window.addEventListener("mouseup",A,{passive:!0}),window.addEventListener("mousemove",H,{passive:!0}),o.addEventListener("wheel",I,{passive:!1}),O(),M.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 t=e.isZoom;void 0===t&&(t=null);var r=e.panSpeed;void 0===r&&(r=null);var v=e.rotateSpeed;void 0===v&&(v=null);var d=e.zoomSpeed;void 0===d&&(d=null),a=null!==n?n:a,u=null!==o?o:u,l=null!==i?i:l,c=null!==t?t:c,s=+r>0?r:s,f=+v>0?v:f,p=+d>0?d:p},M.dispose=function(){M=void 0,window.removeEventListener("keydown",X),window.removeEventListener("keyup",W),o.removeEventListener("mousedown",G),window.removeEventListener("mouseup",A),window.removeEventListener("mousemove",H),o.removeEventListener("wheel",I)},M.refresh=O,M.tick=function(){if(a)return!1;if(S=!1,u&&P&&!U&&(M.pan([Y(s*(k-D)),Z(s*(K-C))]),S=!0),c&&R){var e=p*Math.exp(R/B),o=j(k),i=N(C);M.scale(1/e,[o,i]),S=!0}if(l&&P&&U){var t=z/2,r=B/2,v=D-t,d=r-K,m=k-t,w=r-C,E=n.vec2.angle([v,d],[m,w]),L=v*w-m*d;M.rotate(f*E*Math.sign(L)),S=!0}return R=0,D=k,K=C,S},M}}));
+!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}}));

package.json

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

README.md

 # DOM 2D Camera
 
 [![npm version](https://img.shields.io/npm/v/dom-2d-camera.svg)](https://www.npmjs.com/package/dom-2d-camera)
-[![build status](https://travis-ci.org/flekschas/dom-2d-camera.svg?branch=master)](https://travis-ci.org/flekschas/dom-2d-camera)
-[![gzipped size](http://img.badgesize.io/https://unpkg.com/dom-2d-camera/dist/dom-2d-camera.min.js?compression=gzip&style=flat-square&color=6ae3c7)](https://unpkg.com/dom-2d-camera/dist/dom-2d-camera.min.js)
+[![build status](https://img.shields.io/github/workflow/status/flekschas/dom-2d-camera/build?color=139ce9&style=flat-square)](https://github.com/flekschas/dom-2d-camera/actions?query=workflow%3Abuild)
+[![file size](http://img.badgesize.io/https://unpkg.com/dom-2d-camera/dist/dom-2d-camera.min.js?compression=gzip&color=0dacd4&style=flat-square)](https://bundlephobia.com/result?p=dom-2d-camera)
 [![code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
@@ -47,10 +47,11 @@ [![demo](https://img.shields.io/badge/demo-online-6ae3c7.svg)](https://flekschas.github.io/regl-scatterplot/)
 - `rotation`: rotation in radians around the z axis. [dtype: number, default: `0`]
-- `isNdc`: if `true` the camera operates in [normalized device coordinates](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection). This is useful when the camera is used in a WebGL program. [dtype: bool, default: `false`]
+- `isNdc`: if `true` the camera operates in [normalized device coordinates](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection). This is useful when the camera is used in a WebGL program. [dtype: bool, default: `true`]
 - `isFixed`: if `true` panning, rotating, and zooming is disabled. [dtype: bool, default: `false`]
 - `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
-- `panSpeed`: initial panning speed. [dtype: number, default: `1`]
+- `panSpeed`: panning speed. [dtype: number, default: `1`]
 - `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
-- `rotateSpeed`: initial panning speed. [dtype: number, default: `1`]
+- `rotateSpeed`: rotation speed. [dtype: number, default: `1`]
+- `rotateKey`: rotation modifier key. [dtype: string, valid: [`alt`, `shift`, `ctrl`, `cmd`, `meta`], default: `alt`]
 - `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
-- `zoomSpeed`: initial zooming speed. [dtype: number, default: `1`]
+- `zoomSpeed`: zooming speed. [dtype: number, default: `1`]
 - `scaleBounds`: see [camera-2d](https://github.com/flekschas/camera-2d#createCamera) [dtype: array, default: `null`]
@@ -96,3 +97,4 @@ - `viewCenter`: see [camera-2d](https://github.com/flekschas/camera-2d#createCamera) [dtype: array, default: `null`]
 - `rotateSpeed`: rotation speed. [dtype: float, default: `1.0`]
+- `rotateKey`: rotation modifier key. [dtype: string, valid: [`alt`, `shift`, `ctrl`, `cmd`, `meta`], default: `alt`]
 - `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
 - `zoomSpeed`: zooming speed. [dtype: float, default: `1.0`]

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

27069

increased by5.64%

Lines of code

394

increased by6.78%

Number of lines in readme file

99

increased by2.06%

No dependency changes