camera-2d-simple - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+**v2.1.0**
+
+- Add support for a custom view center to allow using the camera with non normalized-device coordinates. For that I added `initViewCenter` as the forth argument to the constructor and`.setViewCenter()` for adjusting the view center.
+- Rename `.set()` to `setView()` and deprecate `.set()`
+- Ensure that `target` is a tuple to avoid confusion
+
 **v2.0.1**
@@ -2,0 +8,0 @@

dist/camera-2d.esm.js

 import { mat4, vec4 } from 'gl-matrix';
 
-const VIEW_CENTER = [0, 0, 0, 1];
-
 const createCamera = (
   initTarget = [0, 0],
   initDistance = 1,
-  initRotation = 0
+  initRotation = 0,
+  initViewCenter = [0, 0]
 ) => {
@@ -16,2 +15,3 @@ // Scratch variables
   let view = mat4.create();
+  let viewCenter = [...initViewCenter.slice(0, 2), 0, 1];
 
@@ -27,6 +27,10 @@ const getRotation = () => Math.acos(view[0]);
   const getTarget = () =>
-    vec4.transformMat4(scratch0, VIEW_CENTER, mat4.invert(scratch2, view));
+    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) => {
@@ -62,3 +66,3 @@ // Reset the view
 
-    const scaleCenter = mousePos ? [...mousePos, 0] : VIEW_CENTER;
+    const scaleCenter = mousePos ? [...mousePos, 0] : viewCenter;
     const a = mat4.fromTranslation(scratch0, scaleCenter);
@@ -88,3 +92,3 @@
 
-  const set = newView => {
+  const setView = newView => {
     if (!newView || newView.length < 16) return;
@@ -94,2 +98,6 @@ view = newView;
 
+  const setViewCenter = newViewCenter => {
+    viewCenter = [...newViewCenter.slice(0, 2), 0, 1];
+  };
+
   const reset = () => {
@@ -121,2 +129,5 @@ lookAt(initTarget, initDistance, initRotation);
     },
+    get viewCenter() {
+      return getViewCenter();
+    },
     lookAt,
@@ -129,3 +140,8 @@ translate,
     reset,
-    set
+    set: (...args) => {
+      console.warn("Deprecated. Please use `setView()` instead.");
+      return setView(...args);
+    },
+    setView,
+    setViewCenter
   };
@@ -132,0 +148,0 @@ };

dist/camera-2d.js

@@ -7,8 +7,7 @@ (function (global, factory) {
 
-  var VIEW_CENTER = [0, 0, 0, 1];
-
   var createCamera = function (
     initTarget,
     initDistance,
-    initRotation
+    initRotation,
+    initViewCenter
   ) {
@@ -18,2 +17,3 @@ if ( initTarget === void 0 ) initTarget = [0, 0];
     if ( initRotation === void 0 ) initRotation = 0;
+    if ( initViewCenter === void 0 ) initViewCenter = [0, 0];
 
@@ -26,2 +26,3 @@ // Scratch variables
     var view = glMatrix.mat4.create();
+    var viewCenter = initViewCenter.slice(0, 2).concat( [0], [1]);
 
@@ -36,6 +37,10 @@ var getRotation = function () { return Math.acos(view[0]); };
 
-    var getTarget = function () { return glMatrix.vec4.transformMat4(scratch0, VIEW_CENTER, glMatrix.mat4.invert(scratch2, view)); };
+    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) {
@@ -81,3 +86,3 @@ if ( ref === void 0 ) ref = [];
 
-      var scaleCenter = mousePos ? mousePos.concat( [0]) : VIEW_CENTER;
+      var scaleCenter = mousePos ? mousePos.concat( [0]) : viewCenter;
       var a = glMatrix.mat4.fromTranslation(scratch0, scaleCenter);
@@ -107,3 +112,3 @@
 
-    var set = function (newView) {
+    var setView = function (newView) {
       if (!newView || newView.length < 16) { return; }
@@ -113,2 +118,6 @@ view = newView;
 
+    var setViewCenter = function (newViewCenter) {
+      viewCenter = newViewCenter.slice(0, 2).concat( [0], [1]);
+    };
+
     var reset = function () {
@@ -140,2 +149,5 @@ lookAt(initTarget, initDistance, initRotation);
       },
+      get viewCenter() {
+        return getViewCenter();
+      },
       lookAt: lookAt,
@@ -148,3 +160,11 @@ translate: translate,
       reset: reset,
-      set: set
+      set: function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
+
+        console.warn("Deprecated. Please use `setView()` instead.");
+        return setView.apply(void 0, args);
+      },
+      setView: setView,
+      setViewCenter: setViewCenter
     };
@@ -151,0 +171,0 @@ };

dist/camera-2d.min.js

@@ -1,1 +0,1 @@
-!function(t,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("gl-matrix")):"function"==typeof define&&define.amd?define(["gl-matrix"],a):(t=t||self).createCamera2d=a(t.glMatrix)}(this,(function(t){"use strict";var a=[0,0,0,1];return function(e,r,n){void 0===e&&(e=[0,0]),void 0===r&&(r=1),void 0===n&&(n=0);var o=new Float32Array(16),i=new Float32Array(16),m=new Float32Array(16),l=t.mat4.create(),u=function(){return t.mat4.getScaling(o,l)[0]},c=function(a,e,r){void 0===a&&(a=[]);var n=a[0];void 0===n&&(n=0);var o=a[1];void 0===o&&(o=0),void 0===e&&(e=1),void 0===r&&(r=0),l=t.mat4.create(),f([-n,-o]),d(r),v(1/e)},f=function(a){void 0===a&&(a=[]);var e=a[0];void 0===e&&(e=0);var r=a[1];void 0===r&&(r=0),o[0]=e,o[1]=r,o[2]=0;var n=t.mat4.fromTranslation(i,o);t.mat4.multiply(l,n,l)},v=function(e,r){if(!(e<=0)){o[0]=e,o[1]=e,o[2]=1;var n=t.mat4.fromScaling(i,o),u=r?r.concat([0]):a,c=t.mat4.fromTranslation(o,u);t.mat4.multiply(l,c,t.mat4.multiply(l,n,t.mat4.multiply(l,t.mat4.invert(m,c),l)))}},d=function(a){var e=t.mat4.create();t.mat4.fromRotation(e,a,[0,0,1]),t.mat4.multiply(l,e,l)};return c(e,r,n),{get translation(){return t.mat4.getTranslation(o,l).slice(0,2)},get target(){return t.vec4.transformMat4(o,a,t.mat4.invert(m,l))},get scaling(){return u()},get distance(){return 1/u()},get rotation(){return Math.acos(l[0])},get view(){return l},lookAt:c,translate:f,pan:f,rotate:d,scale:v,zoom:v,reset:function(){c(e,r,n)},set:function(t){!t||t.length<16||(l=t)}}}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("gl-matrix")):"function"==typeof define&&define.amd?define(["gl-matrix"],e):(t=t||self).createCamera2d=e(t.glMatrix)}(this,(function(t){"use strict";return function(e,n,a,r){void 0===e&&(e=[0,0]),void 0===n&&(n=1),void 0===a&&(a=0),void 0===r&&(r=[0,0]);var i=new Float32Array(16),o=new Float32Array(16),c=new Float32Array(16),l=t.mat4.create(),u=r.slice(0,2).concat([0],[1]),m=function(){return t.mat4.getScaling(i,l)[0]},s=function(e,n,a){void 0===e&&(e=[]);var r=e[0];void 0===r&&(r=0);var i=e[1];void 0===i&&(i=0),void 0===n&&(n=1),void 0===a&&(a=0),l=t.mat4.create(),f([-r,-i]),d(a),v(1/n)},f=function(e){void 0===e&&(e=[]);var n=e[0];void 0===n&&(n=0);var a=e[1];void 0===a&&(a=0),i[0]=n,i[1]=a,i[2]=0;var r=t.mat4.fromTranslation(o,i);t.mat4.multiply(l,r,l)},v=function(e,n){if(!(e<=0)){i[0]=e,i[1]=e,i[2]=1;var a=t.mat4.fromScaling(o,i),r=n?n.concat([0]):u,m=t.mat4.fromTranslation(i,r);t.mat4.multiply(l,m,t.mat4.multiply(l,a,t.mat4.multiply(l,t.mat4.invert(c,m),l)))}},d=function(e){var n=t.mat4.create();t.mat4.fromRotation(n,e,[0,0,1]),t.mat4.multiply(l,n,l)},g=function(t){!t||t.length<16||(l=t)};return s(e,n,a),{get translation(){return t.mat4.getTranslation(i,l).slice(0,2)},get target(){return t.vec4.transformMat4(i,u,t.mat4.invert(c,l)).slice(0,2)},get scaling(){return m()},get distance(){return 1/m()},get rotation(){return Math.acos(l[0])},get view(){return l},get viewCenter(){return u.slice(0,2)},lookAt:s,translate:f,pan:f,rotate:d,scale:v,zoom:v,reset:function(){s(e,n,a)},set:function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return console.warn("Deprecated. Please use `setView()` instead."),g.apply(void 0,t)},setView:g,setViewCenter:function(t){u=t.slice(0,2).concat([0],[1])}}}}));

package.json

 {
   "name": "camera-2d-simple",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "2D camera for WebGL",
@@ -5,0 +5,0 @@ "author": "Fritz Lekschas",

README.md

@@ -29,4 +29,6 @@ # 2D Camera
 
-#### `const camera = createCamera(target = [0,0], distance = 1, rotation = 0)`
+### Constructor
 
+<a name="createCamera" href="#createCamera">#</a> <b>createCamera</b>(<i>target = [0,0]</i>, <i>distance = 1</i>, <i>rotation = 0</i>, <i>viewCenter = [0,0]</i>)
+
 Creates a 2d camera looking at `target` from a certain `distance`.
@@ -37,51 +39,72 @@
 - `rotation` is angle in radiance around the z axis with respect to the viewport center.
+- `viewCenter` is the center point of the canvas w.r.t the view coordinates. When operating in normalized-device coordinates this must be `[0,0]` but the center can differ when operating in pixel coordinates.
 
 **Returns** A new 2d camera object
 
-#### `camera.lookAt(target = [0,0], distance = 1, rotation = 0)`
+### Properties
 
-Move the camera to look at .
+<a name="camera.view" href="#camera.view">#</a> camera.<b>view</b>
 
-#### `camera.pan([x,y])` or `camera.translate([x,y])`
+The current view matrix (`mat4`) of the camera.
 
-Moves the center of the camera by `x` and `y` pixel.
+<a name="camera.viewCenter" href="#camera.viewCenter">#</a> camera.<b>viewCenter</b>
 
-#### `camera.zoom(delta, scaleCenter)` or `camera.scale(delta, scaleCenter)`
+The current view center.
 
-Zooms in or out by `delta` with respect to `scaleCenter` in `[x,y]`. The new distance will be `distance * delta`.
+<a name="camera.translation" href="#camera.translation">#</a> camera.<b>translation</b>
 
-#### `camera.rotate(angle)`
+The camera translation needed to look at the `target`.
 
-Rotate the camera by `angle` (in radians) around the z axis with respect to the viewport center.
+<a name="camera.target" href="#camera.target">#</a> camera.<b>target</b>
 
-#### `camera.set(view)`
+The camera center in normalized device coordinates. This is a shorthand for inverseOf(`camera.view`) \* `[0,0,0,1]`.
 
-Set the camera to the `view` matrix (`mat4`).
+<a name="camera.scaling" href="#camera.scaling">#</a> camera.<b>scaling</b>
 
-#### `camera.reset()`
+The camera scaling. Larger scaling means the camera is closer to the target. This is the inverse of [`distance`](#camera.distance), i.e., `1 / distance`.
 
-Reset the camera to the initial target, distance, and rotation.
+<a name="camera.distance" href="#camera.distance">#</a> camera.<b>distance</b>
 
-#### `camera.view`
+Distance of the camera to the target. This is the inverse of [`scaling`](#camera.scaling), i.e., `1 / scaling`.
 
-The current view matrix (`mat4`) of the camera.
+<a name="camera.rotation" href="#camera.rotation">#</a> camera.<b>rotation</b>
 
-#### `camera.translation`
+Rotation in radians around the z axis.
 
-The camera translation needed to look at the `target`.
+### Methods
 
-#### `camera.target`
+<a name="camera.lookAt" href="#camera.lookAt">#</a> camera.<b>lookAt</b>(<i>target = [0,0]</i>, <i>distance = 1</i>, <i>rotation = 0</i>)
 
-The camera center in normalized device coordinates. This is a shorthand for inverseOf(`camera.view`) \* `[0,0,0,1]`.
+Move the camera center to `target` given the `distance` and `rotation`.
 
-#### `camera.scaling`
+<a name="camera.translate" href="#camera.translate">#</a> camera.<b>translate</b>(<i>[x,y]</i>)
 
-The camera scaling. Larger scaling means the camera is closer to the target. This is the inverse of [`distance`](#cameradistance), i.e., `1 / distance`.
+Moves the center of the camera by `x` and `y` pixel.
 
-#### `camera.distance`
+<a name="camera.pan" href="#camera.pan">#</a> camera.<b>pan</b>(<i>[x,y]</i>)
 
-Distance of the camera to the target. This is the inverse of [`scaling`](#camerascaling), i.e., `1 / scaling`.
+Same as [`camera.translate()`](#camera.translate)
 
-#### `camera.rotation`
+<a name="camera.scale" href="#camera.scale">#</a> camera.<b>scale</b>(<i>delta</i>, <i>scaleCenter</i>)
 
-Rotation in radians around the z axis.
+Zooms in or out by `delta` with respect to `scaleCenter` in `[x,y]`. The new distance will be `distance * delta`.
+
+<a name="camera.zoom" href="#camera.zoom">#</a> camera.<b>zoom</b>(<i>delta</i>, <i>scaleCenter</i>)
+
+Same as [`camera.scale()`](#camera.scale)
+
+<a name="camera.rotate" href="#camera.rotate">#</a> camera.<b>rotate</b>(<i>angle</i>)
+
+Rotate the camera by `angle` (in radians) around the z axis with respect to the viewport center.
+
+<a name="camera.setView" href="#camera.setView">#</a> camera.<b>setView</b>(<i>view</i>)
+
+Set the camera to the `view` matrix (`mat4`).
+
+<a name="camera.setViewCenter" href="#camera.setViewCenter">#</a> camera.<b>setViewCenter</b>(<i>viewCenter</i>)
+
+Set `viewCenter` w.r.t. the canvas.
+
+<a name="camera.reset" href="#camera.reset">#</a> camera.<b>reset</b>()
+
+Reset the camera to the initial `target`, `distance`, and `rotation`.

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

18183

increased by22.9%

Lines of code

257

increased by15.25%

Number of lines in readme file

109

increased by26.74%

No dependency changes