dom-2d-camera - npm Package Compare versions

Comparing version 1.2.3 to 2.0.0

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

@@ -1,4 +0,237 @@
-import createCamera from 'camera-2d-simple';
-import { vec2 } from 'gl-matrix';
+import { mat4, vec4, vec2 } from 'gl-matrix';
 
+const createCamera = (
+  initTarget = [0, 0],
+  initDistance = 1,
+  initRotation = 0,
+  initViewCenter = [0, 0],
+  initScaleBounds = [
+    [0, Infinity],
+    [0, Infinity],
+  ],
+  initTranslationBounds = [
+    [-Infinity, Infinity],
+    [-Infinity, Infinity],
+  ]
+) => {
+  // Scratch variables
+  const scratch0 = new Float32Array(16);
+  const scratch1 = new Float32Array(16);
+  const scratch2 = new Float32Array(16);
+
+  let view = mat4.create();
+  let viewCenter = [...initViewCenter.slice(0, 2), 0, 1];
+
+  const scaleXBounds = Array.isArray(initScaleBounds[0])
+    ? [...initScaleBounds[0]]
+    : [...initScaleBounds];
+  const scaleYBounds = Array.isArray(initScaleBounds[0])
+    ? [...initScaleBounds[1]]
+    : [...initScaleBounds];
+
+  const translationXBounds = Array.isArray(initTranslationBounds[0])
+    ? [...initTranslationBounds[0]]
+    : [...initTranslationBounds];
+  const translationYBounds = Array.isArray(initTranslationBounds[0])
+    ? [...initTranslationBounds[1]]
+    : [...initTranslationBounds];
+
+  const getScaling = () => mat4.getScaling(scratch0, view).slice(0, 2);
+  const getMinScaling = () => {
+    const scaling = getScaling();
+    return Math.min(scaling[0], scaling[1]);
+  };
+  const getMaxScaling = () => {
+    const scaling = getScaling();
+    return Math.max(scaling[0], scaling[1]);
+  };
+
+  const getRotation = () => Math.acos(view[0] / getMaxScaling());
+
+  const getScaleBounds = () => [[...scaleXBounds], [...scaleYBounds]];
+  const getTranslationBounds = () => [
+    [...translationXBounds],
+    [...translationYBounds],
+  ];
+
+  const getDistance = () => {
+    const scaling = getScaling();
+    return [1 / scaling[0], 1 / scaling[1]];
+  };
+  const getMinDistance = () => 1 / getMinScaling();
+  const getMaxDistance = () => 1 / getMaxScaling();
+
+  const getTranslation = () => mat4.getTranslation(scratch0, view).slice(0, 2);
+
+  const getTarget = () =>
+    vec4
+      .transformMat4(scratch0, viewCenter, mat4.invert(scratch2, view))
+      .slice(0, 2);
+
+  const getView = () => view;
+
+  const getViewCenter = () => viewCenter.slice(0, 2);
+
+  const lookAt = ([x = 0, y = 0] = [], newDistance = 1, newRotation = 0) => {
+    // Reset the view
+    view = mat4.create();
+
+    translate([-x, -y]);
+    rotate(newRotation);
+    scale(1 / newDistance);
+  };
+
+  const translate = ([x = 0, y = 0] = []) => {
+    scratch0[0] = x;
+    scratch0[1] = y;
+    scratch0[2] = 0;
+
+    const t = mat4.fromTranslation(scratch1, scratch0);
+
+    // Translate about the viewport center
+    // This is identical to `i * t * i * view` where `i` is the identity matrix
+    mat4.multiply(view, t, view);
+  };
+
+  const scale = (d, mousePos) => {
+    const isArray = Array.isArray(d);
+    let dx = isArray ? d[0] : d;
+    let dy = isArray ? d[1] : d;
+
+    if (dx <= 0 || dy <= 0 || (dx === 1 && dy === 1)) return;
+
+    const scaling = getScaling();
+    const newXScale = scaling[0] * dx;
+    const newYScale = scaling[1] * dy;
+
+    dx =
+      Math.max(scaleXBounds[0], Math.min(newXScale, scaleXBounds[1])) /
+      scaling[0];
+    dy =
+      Math.max(scaleYBounds[0], Math.min(newYScale, scaleYBounds[1])) /
+      scaling[1];
+
+    if (dx === 1 && dy === 1) return; // There is nothing to do
+
+    scratch0[0] = dx;
+    scratch0[1] = dy;
+    scratch0[2] = 1;
+
+    const s = mat4.fromScaling(scratch1, scratch0);
+
+    const scaleCenter = mousePos ? [...mousePos, 0] : viewCenter;
+    const a = mat4.fromTranslation(scratch0, scaleCenter);
+
+    // Translate about the scale center
+    // I.e., the mouse position or the view center
+    mat4.multiply(
+      view,
+      a,
+      mat4.multiply(
+        view,
+        s,
+        mat4.multiply(view, mat4.invert(scratch2, a), view)
+      )
+    );
+  };
+
+  const rotate = (rad) => {
+    const r = mat4.create();
+    mat4.fromRotation(r, rad, [0, 0, 1]);
+
+    // Rotate about the viewport center
+    // This is identical to `i * r * i * view` where `i` is the identity matrix
+    mat4.multiply(view, r, view);
+  };
+
+  const setScaleBounds = (newBounds) => {
+    const isArray = Array.isArray(newBounds[0]);
+    scaleXBounds[0] = isArray ? newBounds[0][0] : newBounds[0];
+    scaleXBounds[1] = isArray ? newBounds[0][1] : newBounds[1];
+    scaleYBounds[0] = isArray ? newBounds[1][0] : newBounds[0];
+    scaleYBounds[1] = isArray ? newBounds[1][1] : newBounds[1];
+  };
+
+  const setTranslationBounds = (newBounds) => {
+    const isArray = Array.isArray(newBounds[0]);
+    translationXBounds[0] = isArray ? newBounds[0][0] : newBounds[0];
+    translationXBounds[1] = isArray ? newBounds[0][1] : newBounds[1];
+    translationYBounds[0] = isArray ? newBounds[1][0] : newBounds[0];
+    translationYBounds[1] = isArray ? newBounds[1][1] : newBounds[1];
+  };
+
+  const setView = (newView) => {
+    if (!newView || newView.length < 16) return;
+    view = newView;
+  };
+
+  const setViewCenter = (newViewCenter) => {
+    viewCenter = [...newViewCenter.slice(0, 2), 0, 1];
+  };
+
+  const reset = () => {
+    lookAt(initTarget, initDistance, initRotation);
+  };
+
+  // Init
+  lookAt(initTarget, initDistance, initRotation);
+
+  return {
+    get translation() {
+      return getTranslation();
+    },
+    get target() {
+      return getTarget();
+    },
+    get scaling() {
+      return getScaling();
+    },
+    get minScaling() {
+      return getMinScaling();
+    },
+    get maxScaling() {
+      return getMaxScaling();
+    },
+    get scaleBounds() {
+      return getScaleBounds();
+    },
+    get translationBounds() {
+      return getTranslationBounds();
+    },
+    get distance() {
+      return getDistance();
+    },
+    get minDistance() {
+      return getMinDistance();
+    },
+    get maxDistance() {
+      return getMaxDistance();
+    },
+    get rotation() {
+      return getRotation();
+    },
+    get view() {
+      return getView();
+    },
+    get viewCenter() {
+      return getViewCenter();
+    },
+    lookAt,
+    translate,
+    pan: translate,
+    rotate,
+    scale,
+    zoom: scale,
+    reset,
+    set: (...args) => {
+      console.warn('`set()` is deprecated. Please use `setView()` instead.');
+      return setView(...args);
+    },
+    setScaleBounds,
+    setTranslationBounds,
+    setView,
+    setViewCenter,
+  };
+};
+
 const MOUSE_DOWN_MOVE_ACTIONS = ["pan", "rotate"];
@@ -31,2 +264,3 @@ const KEY_MAP = {
     scaleBounds,
+    translationBounds,
     onKeyDown = () => {},
@@ -45,5 +279,5 @@ onKeyUp = () => {},
     viewCenter,
-    scaleBounds
+    scaleBounds,
+    translationBounds
   );
-  let isChanged = false;
   let mouseX = 0;
@@ -59,3 +293,9 @@ let mouseY = 0;
   let aspectRatio = 1;
+
+  let isChanged = false;
   let isMouseDownMoveModActive = false;
+  let isPanX = Array.isArray(isPan) ? Boolean(isPan[0]) : isPan;
+  let isPanY = Array.isArray(isPan) ? Boolean(isPan[1]) : isPan;
+  let isZoomX = Array.isArray(isZoom) ? Boolean(isZoom[0]) : isZoom;
+  let isZoomY = Array.isArray(isZoom) ? Boolean(isZoom[1]) : isZoom;
 
@@ -84,3 +324,3 @@ let panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
     if (
-      isPan &&
+      (isPanX || isPanY) &&
       isLeftMousePressed &&
@@ -90,8 +330,11 @@ ((panOnMouseDownMove && !isMouseDownMoveModActive) ||
     ) {
-      // To pan 1:1 we need to half the width and height because the uniform
-      // coordinate system goes from -1 to 1.
-      camera.pan([
-        transformPanX(panSpeed * (mouseX - prevMouseX)),
-        transformPanY(panSpeed * (prevMouseY - mouseY))
-      ]);
+      const transformedPanX = isPanX
+        ? transformPanX(panSpeed * (mouseX - prevMouseX))
+        : 0;
+
+      const transformedPanY = isPanY
+        ? transformPanY(panSpeed * (mouseY - prevMouseY))
+        : 0;
+
+      camera.pan([transformedPanX, transformedPanY]);
       isChanged = true;
@@ -103,7 +346,9 @@ }
 
-      // Get normalized device coordinates (NDC)
       const transformedX = transformScaleX(mouseX);
       const transformedY = transformScaleY(mouseY);
 
-      camera.scale(1 / dZ, [transformedX, transformedY]);
+      camera.scale(
+        [isZoomX ? 1 / dZ : 1, isZoomY ? 1 / dZ : 1],
+        [transformedX, transformedY]
+      );
 
@@ -110,0 +355,0 @@ isChanged = true;

dist/dom-2d-camera.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('camera-2d-simple'), require('gl-matrix')) :
-  typeof define === 'function' && define.amd ? define(['camera-2d-simple', 'gl-matrix'], factory) :
-  (global = global || self, global.createDom2dCamera = factory(global.createCamera2d, global.glMatrix));
-}(this, (function (createCamera, glMatrix) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('gl-matrix')) :
+  typeof define === 'function' && define.amd ? define(['gl-matrix'], factory) :
+  (global = global || self, global.createDom2dCamera = factory(global.glMatrix));
+}(this, (function (glMatrix) { 'use strict';
 
-  createCamera = createCamera && createCamera.hasOwnProperty('default') ? createCamera['default'] : createCamera;
+  var createCamera = function (
+    initTarget,
+    initDistance,
+    initRotation,
+    initViewCenter,
+    initScaleBounds,
+    initTranslationBounds
+  ) {
+    if ( initTarget === void 0 ) initTarget = [0, 0];
+    if ( initDistance === void 0 ) initDistance = 1;
+    if ( initRotation === void 0 ) initRotation = 0;
+    if ( initViewCenter === void 0 ) initViewCenter = [0, 0];
+    if ( initScaleBounds === void 0 ) initScaleBounds = [
+      [0, Infinity],
+      [0, Infinity] ];
+    if ( initTranslationBounds === void 0 ) initTranslationBounds = [
+      [-Infinity, Infinity],
+      [-Infinity, Infinity] ];
 
+    // Scratch variables
+    var scratch0 = new Float32Array(16);
+    var scratch1 = new Float32Array(16);
+    var scratch2 = new Float32Array(16);
+
+    var view = glMatrix.mat4.create();
+    var viewCenter = initViewCenter.slice(0, 2).concat( [0], [1]);
+
+    var scaleXBounds = Array.isArray(initScaleBounds[0])
+      ? [].concat( initScaleBounds[0] )
+      : [].concat( initScaleBounds );
+    var scaleYBounds = Array.isArray(initScaleBounds[0])
+      ? [].concat( initScaleBounds[1] )
+      : [].concat( initScaleBounds );
+
+    var translationXBounds = Array.isArray(initTranslationBounds[0])
+      ? [].concat( initTranslationBounds[0] )
+      : [].concat( initTranslationBounds );
+    var translationYBounds = Array.isArray(initTranslationBounds[0])
+      ? [].concat( initTranslationBounds[1] )
+      : [].concat( initTranslationBounds );
+
+    var getScaling = function () { return glMatrix.mat4.getScaling(scratch0, view).slice(0, 2); };
+    var getMinScaling = function () {
+      var scaling = getScaling();
+      return Math.min(scaling[0], scaling[1]);
+    };
+    var getMaxScaling = function () {
+      var scaling = getScaling();
+      return Math.max(scaling[0], scaling[1]);
+    };
+
+    var getRotation = function () { return Math.acos(view[0] / getMaxScaling()); };
+
+    var getScaleBounds = function () { return [[].concat( scaleXBounds ), [].concat( scaleYBounds )]; };
+    var getTranslationBounds = function () { return [
+      [].concat( translationXBounds ),
+      [].concat( translationYBounds ) ]; };
+
+    var getDistance = function () {
+      var scaling = getScaling();
+      return [1 / scaling[0], 1 / scaling[1]];
+    };
+    var getMinDistance = function () { return 1 / getMinScaling(); };
+    var getMaxDistance = function () { return 1 / getMaxScaling(); };
+
+    var getTranslation = function () { return glMatrix.mat4.getTranslation(scratch0, view).slice(0, 2); };
+
+    var getTarget = function () { return glMatrix.vec4
+        .transformMat4(scratch0, viewCenter, glMatrix.mat4.invert(scratch2, view))
+        .slice(0, 2); };
+
+    var getView = function () { return view; };
+
+    var getViewCenter = function () { return viewCenter.slice(0, 2); };
+
+    var lookAt = function (ref, newDistance, newRotation) {
+      if ( ref === void 0 ) ref = [];
+      var x = ref[0]; if ( x === void 0 ) x = 0;
+      var y = ref[1]; if ( y === void 0 ) y = 0;
+      if ( newDistance === void 0 ) newDistance = 1;
+      if ( newRotation === void 0 ) newRotation = 0;
+
+      // Reset the view
+      view = glMatrix.mat4.create();
+
+      translate([-x, -y]);
+      rotate(newRotation);
+      scale(1 / newDistance);
+    };
+
+    var translate = function (ref) {
+      if ( ref === void 0 ) ref = [];
+      var x = ref[0]; if ( x === void 0 ) x = 0;
+      var y = ref[1]; if ( y === void 0 ) y = 0;
+
+      scratch0[0] = x;
+      scratch0[1] = y;
+      scratch0[2] = 0;
+
+      var t = glMatrix.mat4.fromTranslation(scratch1, scratch0);
+
+      // Translate about the viewport center
+      // This is identical to `i * t * i * view` where `i` is the identity matrix
+      glMatrix.mat4.multiply(view, t, view);
+    };
+
+    var scale = function (d, mousePos) {
+      var isArray = Array.isArray(d);
+      var dx = isArray ? d[0] : d;
+      var dy = isArray ? d[1] : d;
+
+      if (dx <= 0 || dy <= 0 || (dx === 1 && dy === 1)) { return; }
+
+      var scaling = getScaling();
+      var newXScale = scaling[0] * dx;
+      var newYScale = scaling[1] * dy;
+
+      dx =
+        Math.max(scaleXBounds[0], Math.min(newXScale, scaleXBounds[1])) /
+        scaling[0];
+      dy =
+        Math.max(scaleYBounds[0], Math.min(newYScale, scaleYBounds[1])) /
+        scaling[1];
+
+      if (dx === 1 && dy === 1) { return; } // There is nothing to do
+
+      scratch0[0] = dx;
+      scratch0[1] = dy;
+      scratch0[2] = 1;
+
+      var s = glMatrix.mat4.fromScaling(scratch1, scratch0);
+
+      var scaleCenter = mousePos ? mousePos.concat( [0]) : viewCenter;
+      var a = glMatrix.mat4.fromTranslation(scratch0, scaleCenter);
+
+      // Translate about the scale center
+      // I.e., the mouse position or the view center
+      glMatrix.mat4.multiply(
+        view,
+        a,
+        glMatrix.mat4.multiply(
+          view,
+          s,
+          glMatrix.mat4.multiply(view, glMatrix.mat4.invert(scratch2, a), view)
+        )
+      );
+    };
+
+    var rotate = function (rad) {
+      var r = glMatrix.mat4.create();
+      glMatrix.mat4.fromRotation(r, rad, [0, 0, 1]);
+
+      // Rotate about the viewport center
+      // This is identical to `i * r * i * view` where `i` is the identity matrix
+      glMatrix.mat4.multiply(view, r, view);
+    };
+
+    var setScaleBounds = function (newBounds) {
+      var isArray = Array.isArray(newBounds[0]);
+      scaleXBounds[0] = isArray ? newBounds[0][0] : newBounds[0];
+      scaleXBounds[1] = isArray ? newBounds[0][1] : newBounds[1];
+      scaleYBounds[0] = isArray ? newBounds[1][0] : newBounds[0];
+      scaleYBounds[1] = isArray ? newBounds[1][1] : newBounds[1];
+    };
+
+    var setTranslationBounds = function (newBounds) {
+      var isArray = Array.isArray(newBounds[0]);
+      translationXBounds[0] = isArray ? newBounds[0][0] : newBounds[0];
+      translationXBounds[1] = isArray ? newBounds[0][1] : newBounds[1];
+      translationYBounds[0] = isArray ? newBounds[1][0] : newBounds[0];
+      translationYBounds[1] = isArray ? newBounds[1][1] : newBounds[1];
+    };
+
+    var setView = function (newView) {
+      if (!newView || newView.length < 16) { return; }
+      view = newView;
+    };
+
+    var setViewCenter = function (newViewCenter) {
+      viewCenter = newViewCenter.slice(0, 2).concat( [0], [1]);
+    };
+
+    var reset = function () {
+      lookAt(initTarget, initDistance, initRotation);
+    };
+
+    // Init
+    lookAt(initTarget, initDistance, initRotation);
+
+    return {
+      get translation() {
+        return getTranslation();
+      },
+      get target() {
+        return getTarget();
+      },
+      get scaling() {
+        return getScaling();
+      },
+      get minScaling() {
+        return getMinScaling();
+      },
+      get maxScaling() {
+        return getMaxScaling();
+      },
+      get scaleBounds() {
+        return getScaleBounds();
+      },
+      get translationBounds() {
+        return getTranslationBounds();
+      },
+      get distance() {
+        return getDistance();
+      },
+      get minDistance() {
+        return getMinDistance();
+      },
+      get maxDistance() {
+        return getMaxDistance();
+      },
+      get rotation() {
+        return getRotation();
+      },
+      get view() {
+        return getView();
+      },
+      get viewCenter() {
+        return getViewCenter();
+      },
+      lookAt: lookAt,
+      translate: translate,
+      pan: translate,
+      rotate: rotate,
+      scale: scale,
+      zoom: scale,
+      reset: reset,
+      set: function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        console.warn('`set()` is deprecated. Please use `setView()` instead.');
+        return setView.apply(void 0, args);
+      },
+      setScaleBounds: setScaleBounds,
+      setTranslationBounds: setTranslationBounds,
+      setView: setView,
+      setViewCenter: setViewCenter,
+    };
+  };
+
   var MOUSE_DOWN_MOVE_ACTIONS = ["pan", "rotate"];
@@ -38,2 +286,3 @@ var KEY_MAP = {
     var scaleBounds = ref.scaleBounds;
+    var translationBounds = ref.translationBounds;
     var onKeyDown = ref.onKeyDown; if ( onKeyDown === void 0 ) onKeyDown = function () {};
@@ -51,5 +300,5 @@ var onKeyUp = ref.onKeyUp; if ( onKeyUp === void 0 ) onKeyUp = function () {};
       viewCenter,
-      scaleBounds
+      scaleBounds,
+      translationBounds
     );
-    var isChanged = false;
     var mouseX = 0;
@@ -65,3 +314,9 @@ var mouseY = 0;
     var aspectRatio = 1;
+
+    var isChanged = false;
     var isMouseDownMoveModActive = false;
+    var isPanX = Array.isArray(isPan) ? Boolean(isPan[0]) : isPan;
+    var isPanY = Array.isArray(isPan) ? Boolean(isPan[1]) : isPan;
+    var isZoomX = Array.isArray(isZoom) ? Boolean(isZoom[0]) : isZoom;
+    var isZoomY = Array.isArray(isZoom) ? Boolean(isZoom[1]) : isZoom;
 
@@ -90,3 +345,3 @@ var panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
       if (
-        isPan &&
+        (isPanX || isPanY) &&
         isLeftMousePressed &&
@@ -96,8 +351,11 @@ ((panOnMouseDownMove && !isMouseDownMoveModActive) ||
       ) {
-        // To pan 1:1 we need to half the width and height because the uniform
-        // coordinate system goes from -1 to 1.
-        camera.pan([
-          transformPanX(panSpeed * (mouseX - prevMouseX)),
-          transformPanY(panSpeed * (prevMouseY - mouseY))
-        ]);
+        var transformedPanX = isPanX
+          ? transformPanX(panSpeed * (mouseX - prevMouseX))
+          : 0;
+
+        var transformedPanY = isPanY
+          ? transformPanY(panSpeed * (mouseY - prevMouseY))
+          : 0;
+
+        camera.pan([transformedPanX, transformedPanY]);
         isChanged = true;
@@ -109,7 +367,9 @@ }
 
-        // Get normalized device coordinates (NDC)
         var transformedX = transformScaleX(mouseX);
         var transformedY = transformScaleY(mouseY);
 
-        camera.scale(1 / dZ, [transformedX, transformedY]);
+        camera.scale(
+          [isZoomX ? 1 / dZ : 1, isZoomY ? 1 / dZ : 1],
+          [transformedX, transformedY]
+        );
 
@@ -116,0 +376,0 @@ isChanged = true;

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

package.json

 {
   "name": "dom-2d-camera",
-  "version": "1.2.3",
+  "version": "2.0.0",
   "description": "A wrapper for attaching a 2D camera to a DOM element",
@@ -31,12 +31,11 @@ "author": "Fritz Lekschas",
   "dependencies": {
-    "camera-2d-simple": "~2.2.0",
-    "gl-matrix": "~3.1.0"
+    "camera-2d-simple": "^3.0.0",
+    "gl-matrix": "^3.3.0"
   },
   "peerDependencies": {
-    "camera-2d-simple": "~2.2.0",
-    "gl-matrix": "~3.1.0"
+    "gl-matrix": "^3.3.0"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.0",
-    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "eslint": "^6.8.0",
@@ -43,0 +42,0 @@ "eslint-config-prettier": "^v6.10.0",

README.md

@@ -49,5 +49,5 @@ # DOM 2D Camera
 - `isFixed`: if `true` panning, rotating, and zooming is disabled. [dtype: bool, default: `false`]
-- `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
+- `isPan`: if `true` x and y panning is enabled. [dtype: bool | [bool, bool], default: `true`]
 - `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
-- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
+- `isZoom`: if `true` x and y zooming is enabled. [dtype: bool | [bool, bool], default: `true`]
 - `panSpeed`: panning speed. [dtype: number, default: `1`]
@@ -94,5 +94,5 @@ - `rotateSpeed`: rotation speed. [dtype: number, default: `1`]
 - `isFixed`: if `true` panning, rotating, and zooming is disabled. [default: `false`]
-- `isPan`: if `true` panning is enabled. [dtype: bool, default: `true`]
+- `isPan`: if `true` x and y panning is enabled. [dtype: bool | [bool, bool], default: `true`]
 - `isRotate`: if `true` rotation is enabled. [dtype: bool, default: `true`]
-- `isZoom`: if `true` zooming is enabled. [dtype: bool, default: `true`]
+- `isZoom`: if `true` x and y zooming is enabled. [dtype: bool | [bool, bool], default: `true`]
 - `panSpeed`: panning speed. [dtype: float, default: `1.0`]
@@ -99,0 +99,0 @@ - `rotateSpeed`: rotation 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

45792

increased by48.26%

Dependency count

3

decreased by-25%

Lines of code

875

increased by99.32%

Worsened metrics

Number of package files

6

decreased by-14.29%

Dependency changes

• + Addedcamera-2d-simple@3.0.0(transitive)

• + Addedgl-matrix@3.3.03.4.3(transitive)

• - Removedcamera-2d-simple@2.2.1(transitive)

• - Removedgl-matrix@3.1.0(transitive)

• Updatedcamera-2d-simple@^3.0.0

• Updatedgl-matrix@^3.3.0