Merge pull request #9 from flekschas/updated-camera

Updated camera and dev packages

Author: flekschas

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 os: osx
 node_js:
-  - "8"
+  - "12"
 addons:
   apt:
     packages:
@@ -21,7 +21,7 @@ deploy:
   - provider: releases
     skip_cleanup: true
     api_key:
-      secure: Ntp/+YWKTfEMpulXwJEdwcLMPqdU4KT5x+slcVFYhr7Z2ho+L0JpRi3RW0mheqXxMxKV0fVFI6eNfjlOoNMcEvCLDjjua6jgwdU+2yM1RDMu1EmFHv/ECKoF0g5flJiIs4UZwpX6RlYS4a75Vr3lB0kd8rX71uqw6H3OUljJqUz6apFlb2gSrp8NpgFUMpBmCrFFCiEjKN/YNenCyyO8m6WgWSPUCGZwcnyklawfuc6xzTmJmTbnIDRQer1zvs8Yhr6c8HBgge9XIotKmrwMGe7Gub+r0DHiIjjfk73+zpYZ4hm0VYbOYoDQFpeGnEVOKzSZEzHxBm004IPkrnmuZgMvv+fFNf3D6vPcmpAh6brVLPQyBb2UYET4R+dKFw0I5u4AmEGLJbOzH8B/ZJs1kvvFu+bzDql9qtwrseS5D6rQp2ojpHVTqjw2n0P2/zpUpv2uzvXdXf9k66CNV+ag0q0JzOtwsgARIqPVLgtr+90qKEcKBVEG6lpkZYpiwz71ui/zi5m8WrtZs8Arf847j1gaAGMEK4Bxmtk/riTmUtySrKDYtLja1NdpDxN7lkYkuE/eXaUTrvrvfQ5alImQA6mDcVw5Qo5tyDZrxRXyP76Ka6ygfgQhPWKOSqxAPdD2Lla2Rcw9Q0PPH6Al3pllFUXvWHuNheJfamrGi+fz6b4=
+      secure: PCL6FS8GDmgiTFhZ8rPmCgrktRYYT7QV/yyVLZk93J6WTAI5ChbtFusB+O6cyia0+G7CEmNZXwc6OGGs6iXCFAckP2lMqexfeTU35pd0feeN+gcvVdXudUo+FVVkgb2FPBUjj0RvanL6RvuoZHeUFIrTho4VK6gtlm8ErmAA/JZhhRACSI2cwV5GoJQtUl1i0D7KiA/w5AhtMGKhG2kc26MPXF3k715XcO+qpt1M6lK6uu0wonLk3EgH2YqndY4OPoffneQVbL1jwnkCoY4NRyuaQeHjNeUSvxI7QG4c95kFg6XcnCpi9Kqu2o6wZpxIIMlSjYi0C9nja+scdwjaEc/nGO0WTNC/UFbAgK36EkoxFcIaZiDq/dhtNekyDzHmJklrI6iEBMa7Fb3y1PE1dK+FBeHq3G3aVWFRYExZtpKyq16Cj7+588qalOYfgib0WT/EWg9e4vqM2vdw2ALm9gYwM9WJSgVVTRarm1nL4G/2aamCly5zxC9gKzNF6ikxG5cTYHypNZppOaZZ8+iKUYso9VOiGsW6GRXTLxY0oGF+7DU8In5CqxgP/Q6F2BWWKo1cUoFuzqQZ1ixeaq6MehS01CF5JXhrKaN1TTMFAIBizRQnE3pibyGz+Sgms8XtQ0wedS9yXr57joCC5rr6yILzmw9UhUIPdd2p/FbTYr0=
     file: dist.zip
     on:
       branch: master
@@ -31,7 +31,7 @@ deploy:
     skip_cleanup: true
     email: service@lekschas.de
     api_key:
-      secure: vLBzLaHEGGXCjvqFB5DXp8ox1qx/5wHDiLVZQ0tzYRkiizcqr/xHt9j4CB+CvOMDsqBsXV00qlYdk6lBtRffB2SYXAcMqbDO+jfmu8DC+sLTXS2NOAyy1FVRjk6VdgZqTlBa1MxK1O9ScJSxNiJrwO4zu3IIAkP2v9xqulxD9C9kAJLfRmAtxwtpm1PpGwFL7j5j+DjF/rNEfUq9BUJVwCCGgD847/q07t7zqQ3eDG7VAZKAtU3wgwfComjIiYffzibK9D8U6ILcvCBDeE36jACrmfx+KbQESENeSxotuY/I6w9dGa/gmnS35u2P6K1SuAGgj9IRkkvnhc+krETV22LQi0qfg5ZOzsC8vcWRdJhverwI1aeSz9WxSmKEtY/SlMWaQvt2lxQEJ5n4816fdj1LJuUjy7lUspTW8J/nry4YSc+z/iJtAMKzhJpp40EJEECUSPQq9i0GNBXte7aLrwRABt+oquTuougNTcGAVmULyXkF2xVVOAlvCOcdPmZg/rSR1JLTo4PaeVhMychnwJiaOp5W81MPrVak0yZ+YXoNGyohTssJ3WTxzqVSHYh9NaRnPalKOasQEarBqJav0MUc3GBPVHmfQclAzvmfAmJ5aSNdaj6SWK9Un8CKZeRcIO7XIzSY1j0UGlixE+ZDPrihU3C6UJE6o0IkT612aOI=
+      secure: o5a+jhH6XPPpa7FGEEly1gq215u5WOGx8SUr1dT/y7I+cAONACvZnYyehW35YhjqYVaMWm5x9DbfE29bpgoz78alzDrLaCqqZ0HB49J1XsLVXLL3Qvm262Irw6Yg87TuSkt2BsTKei2kynj2+b89aWhkUUC3jsxadok2YTkMNfzUcFwH8MfApxFXZ13Icw/T92Am2YERAj5kEYMFPvYutngrw3ds9jsBt7sjltF6N21MqtDN9jyKt9goxk0L7ne4AwdkUCtQQJo+VOIAuUA9W96bQxDzagFWRvUHuUmJBr3IpsGrwRR5beWDDycfjJkP/u6iqawXAuEUbK2q0qBgC4XCjz8NILBcgNZfh+UYAIc+5mVlVCGVJtQ0wgf/7gGbQScSQ+qCA5Hc+BvDWeKy2661J/L1trt/nT+PQjSNuEuT2vllQHQrZOdWkwRIzxDeaTRIqdSNBpCpJi11bpjd//LJn70cooTQVEJPozuJ4NjiAgJQQ8l1jgzn6QJwbpL+WdKNgTt4Bn9J6pHjCKw6c/dEnEj3n3gRP+tuXHR7GHd6ilunGS/00BxWEwSykKc7emVqff/eQNDf4wboiusR1fkMy7X6m1obXxISzAhtTn+x6z26BRLX84WDikvX5YXpb7DaPCg2ri70ebAfxsc5VN8F9m3h9CFaxZyITDSh0FU=
     on:
       branch: master
       tags: true

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Fix a rare glitch in the lasso selection where the lasso would be drawn with a far away point
 - Smoothify lasso by lowering the min delay and min dist
+- Update 2D camera and many dev packages
 
 **v0.7.3**
 

package-lock.json

@@ -17,6 +17,7 @@
     "dist/*"
   ],
   "scripts": {
+    "buildd": "rollup -c",
     "build": "rollup -c; webpack --config ./webpack.config.js --mode production",
     "ghp": "npm run build; rm -rf ../regl-scatterplot-ghp/*; touch ../regl-scatterplot-ghp/.nojekyll; cp -r docs/* ../regl-scatterplot-ghp/",
     "lint": "eslint src tests rollup.config.js webpack.config.js",
@@ -29,62 +30,62 @@
     "watch": "rollup -cw"
   },
   "dependencies": {
-    "camera-2d-simple": "^2.0.0-rc2",
-    "canvas-camera-2d": "^0.5.5",
-    "gl-matrix": "^2.8.1",
-    "is-key-down": "^0.1.0",
-    "kdbush": "^3.0.0",
-    "lodash-es": "^4.17.11",
-    "pub-sub-es": "^1.2.0",
-    "regl": "^1.3.9",
-    "regl-line": "^0.1.3",
+    "@flekschas/dom-2d-camera": "~1.0.0-rc.2",
+    "camera-2d-simple": "~2.0.0",
+    "gl-matrix": "~3.1.0",
+    "is-key-down": "~0.1.0",
+    "kdbush": "~3.0.0",
+    "lodash-es": "~4.17.11",
+    "pub-sub-es": "~1.2.1",
+    "regl": "~1.3.13",
+    "regl-line": "~0.1.4",
     "scroll-speed": "flekschas/scroll-speed",
-    "with-raf": "^1.0.0"
+    "with-raf": "~1.1.1"
   },
   "peerDependencies": {
-    "pub-sub-es": "^1.2.0",
-    "regl": "^1.3.9"
+    "pub-sub-es": "~1.2.1",
+    "regl": "~1.3.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/plugin-transform-regenerator": "^7.0.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-transform-regenerator": "^7.8.3",
+    "@babel/polyfill": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.0",
     "acorn": "^6.0.4",
     "babel-loader": "^8.0.4",
     "babel-plugin-lodash": "^3.3.4",
     "browser-env": "^3.2.5",
-    "eslint": "^5.9.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^v3.3.0",
-    "eslint-plugin-flowtype": "^2.50.3",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
-    "esm": "^3.0.84",
-    "gl": "^4.4.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-flowtype": "^4.6.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.2",
+    "esm": "^3.2.25",
+    "gl": "^4.4.1",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.4",
-    "lint-staged": "^8.1.0",
+    "husky": "^4.2.1",
+    "lint-staged": "^10.0.7",
     "merge": ">=1.2.1",
-    "prettier": "^1.15.2",
-    "pretty-quick": "^1.8.0",
-    "rollup": "^0.67.3",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-filesize": "^5.0.1",
-    "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-terser": "^3.0.0",
-    "rollup-plugin-visualizer": "^0.9.2",
+    "prettier": "^1.19.1",
+    "pretty-quick": "^2.0.1",
+    "rollup": "^1.31.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-filesize": "^6.2.1",
+    "rollup-plugin-terser": "^5.2.0",
+    "rollup-plugin-visualizer": "^3.3.1",
     "tap-spec": "^5.0.0",
     "tape-run": "^6.0.1",
-    "webpack": "^4.25.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.9.0",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.2",
     "webpack-tape-run": "0.0.7",
-    "zora": "^2.0.1"
+    "zora": "^3.1.8"
   },
   "homepage": "https://github.com/flekschas/regl-scatterplot",
   "repository": {

package.json

@@ -1,13 +1,14 @@
-import { terser } from 'rollup-plugin-terser';
 import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import filesize from 'rollup-plugin-filesize';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import { terser } from 'rollup-plugin-terser';
 import visualizer from 'rollup-plugin-visualizer';
 
-const VERSION = require('./version.js');
+const basePlugins = [resolve(), commonjs({ sourceMap: false }), json()];
 
-const configurator = (file, format, plugins) => ({
+const configurator = (file, format, plugins = []) => ({
   input: 'src/index.js',
   output: {
     name: 'createScatterplot',
@@ -16,41 +17,25 @@ const configurator = (file, format, plugins) => ({
     globals: {
       'pub-sub-es': 'createPubSub',
       regl: 'createREGL'
-    },
-    intro: `${format === 'es' ? 'const' : 'var'} VERSION = ${VERSION};`
+    }
   },
-  plugins,
+  plugins: [...basePlugins, ...plugins],
   external: ['pub-sub-es', 'regl']
 });
 
 const devConfig = configurator('dist/regl-scatterplot.js', 'umd', [
-  resolve(),
-  commonjs({ sourceMap: false }),
-  babel(),
-  filesize(),
-  visualizer()
-]);
-
-const devConfigEsm = configurator('dist/regl-scatterplot.esm.js', 'es', [
-  resolve(),
-  commonjs({ sourceMap: false }),
   babel(),
   filesize(),
   visualizer()
 ]);
 
 const prodConfig = configurator('dist/regl-scatterplot.min.js', 'umd', [
-  resolve(),
-  commonjs({ sourceMap: false }),
   babel(),
   terser()
 ]);
 
-const prodConfigEsm = configurator('dist/regl-scatterplot.esm.min.js', 'es', [
-  resolve(),
-  commonjs({ sourceMap: false }),
-  babel(),
-  terser()
+const esmConfig = configurator('dist/regl-scatterplot.esm.js', 'esm', [
+  filesize()
 ]);
 
-export default [devConfig, devConfigEsm, prodConfig, prodConfigEsm];
+export default [devConfig, prodConfig, esmConfig];

rollup.config.js

@@ -1,17 +1,14 @@
 import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
-import json from 'rollup-plugin-json';
-
-const VERSION = require('./version.js');
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
 
 export default {
   input: './tests/index.js',
   output: {
     name: 'test',
     format: 'iife',
-    sourcemap: 'inline',
-    intro: `var VERSION = ${VERSION};`
+    sourcemap: 'inline'
   },
   plugins: [resolve(), commonjs(), babel(), json()]
 };

rollup.test.config.js

@@ -1,4 +1,4 @@
-import canvasCamera2d from 'canvas-camera-2d';
+import createDom2dCamera from '@flekschas/dom-2d-camera';
 import KDBush from 'kdbush';
 import createPubSub from 'pub-sub-es';
 import withThrottle from 'lodash-es/throttle';
@@ -54,6 +54,8 @@ import {
   min
 } from './utils';
 
+import { version } from '../package.json';
+
 const createScatterplot = ({
   regl: initialRegl,
   background: initialBackground = DEFAULT_COLOR_BG,
@@ -609,7 +611,7 @@ const createScatterplot = ({
 
     const [x, y] = searchIndex.points[hoveredPoint].slice(0, 2);
 
-    // Normalized device coordinate of the point
+    // Homogeneous coordinates of the point
     const v = [x, y, 0, 1];
 
     // We have to calculate the model-view-projection matrix outside of the
@@ -689,7 +691,12 @@ const createScatterplot = ({
       data: createPointIndex(numPoints)
     });
 
-    searchIndex = new KDBush(newPoints, p => p[0], p => p[1], 16);
+    searchIndex = new KDBush(
+      newPoints,
+      p => p[0],
+      p => p[1],
+      16
+    );
 
     isInit = true;
   };
@@ -808,7 +815,7 @@ const createScatterplot = ({
     if (property === 'aspectRatio') return dataAspectRatio;
     if (property === 'canvas') return canvas;
     if (property === 'regl') return regl;
-    if (property === 'version') return VERSION;
+    if (property === 'version') return version;
 
     return undefined;
   };
@@ -899,7 +906,7 @@ const createScatterplot = ({
   };
 
   const initCamera = () => {
-    camera = canvasCamera2d(canvas);
+    camera = createDom2dCamera(canvas);
 
     if (initialView) camera.set(mat4.clone(initialView));
     else camera.lookAt([...initialTarget], initialDistance, initialRotation);

src/index.js

@@ -1,7 +1,9 @@
 /* eslint no-console: 1 */
 
 import '@babel/polyfill';
-import test from 'zora';
+import { test } from 'zora';
+import { version } from '../package.json';
+
 // import { mat4 } from 'gl-matrix';
 
 import createScatterplot, { createRegl, createTextureFromUrl } from '../src';
@@ -106,8 +108,8 @@ test('get("canvas"), get("regl"), and get("version")', async t => {
 
   t.equal(
     scatterplot.get('version'),
-    VERSION,
-    `version should be set to ${VERSION}`
+    version,
+    `version should be set to ${version}`
   );
 });
 
@@ -283,15 +285,25 @@ test('set({ colors })', t => {
     'should create 8 normalized RGBAs from 2 HEX'
   );
 
-  scatterplot.set({ colors: [[0, 141, 255], [255, 0, 218]] });
+  scatterplot.set({
+    colors: [
+      [0, 141, 255],
+      [255, 0, 218]
+    ]
+  });
   t.ok(
     scatterplot
       .get('colors')
       .every((color, i) => color.every((c, j) => c === rgba2[i][j])),
     'should create 8 normalized RGBAs from 2 non-normalized RGB'
   );
 
-  scatterplot.set({ colors: [[0, 141, 255, 127], [255, 0, 218, 127]] });
+  scatterplot.set({
+    colors: [
+      [0, 141, 255, 127],
+      [255, 0, 218, 127]
+    ]
+  });
   t.ok(
     scatterplot
       .get('colors')
@@ -476,7 +488,13 @@ test('click selection with publish("select")', async t => {
   const canvas = createCanvas(dim, dim);
   const scatterplot = createScatterplot({ canvas, width: dim, height: dim });
 
-  const points = [[0, 0], [1, 1], [1, -1], [-1, -1], [-1, 1]];
+  const points = [
+    [0, 0],
+    [1, 1],
+    [1, -1],
+    [-1, -1],
+    [-1, 1]
+  ];
   scatterplot.draw(points);
 
   // TODO: fix this!
@@ -521,7 +539,13 @@ test('lasso selection with publish("select")', async t => {
   const canvas = createCanvas(dim, dim);
   const scatterplot = createScatterplot({ canvas, width: dim, height: dim });
 
-  const points = [[0, 0], [1, 1], [1, -1], [-1, -1], [-1, 1]];
+  const points = [
+    [0, 0],
+    [1, 1],
+    [1, -1],
+    [-1, -1],
+    [-1, 1]
+  ];
   scatterplot.draw(points);
 
   // TODO: fix this!
@@ -577,7 +601,13 @@ test('point hover with publish("pointover") and publish("pointout")', async t =>
   const canvas = createCanvas(dim, dim);
   const scatterplot = createScatterplot({ canvas, width: dim, height: dim });
 
-  const points = [[0, 0], [1, 1], [1, -1], [-1, -1], [-1, 1]];
+  const points = [
+    [0, 0],
+    [1, 1],
+    [1, -1],
+    [-1, -1],
+    [-1, 1]
+  ];
   scatterplot.draw(points);
 
   // TODO: fix this!