diff --git a/README.md b/README.md index 9a354c0..3713f04 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,16 @@ setViewOptions({ }); ``` +### Zoom Control Direction + +You can now specify to use natural scrolling or inverted scrolling for zooming in and out using the `setViewOptions` function. Default value is `true`. + +```javascript +setViewOptions({ + useNaturalScrolling: false, +}); +``` + # Specifications Documentation for specifications can be found in [docs/specification_doc.md](https://github.com/epiviz/epiviz.gl/blob/main/docs/specification_doc.md). Documentation for the specifications can be generated with [json-schema-for-humans](https://pypi.org/project/json-schema-for-humans/): diff --git a/app/index.html b/app/index.html index 897237a..1682846 100644 --- a/app/index.html +++ b/app/index.html @@ -1,93 +1,108 @@ + + epiviz.gl demo + + + + + + - - epiviz.gl demo - - - - - - - - -
-
-
- - -
-
- Control modes: - - pan tool - Pan Tool - - box select - Selection (Box) - - - lasso select - Selection (Lasso) - - - -
+ +
+
+
+ + +
+
+ Control modes: + + pan tool + Pan Tool + + + box select + Selection (Box) + + + lasso select + Selection (Lasso) + + + +
-
- Lock pan/zoom along an axis ? - - - - - - - - +
+ Lock pan/zoom along an axis ? + + + + + + + + + + + + +
-
-
-
-
- - +
+
+
+ + +
+
- +
-
-
-
- - - - \ No newline at end of file +
+ + + diff --git a/app/scripts/index.js b/app/scripts/index.js index 4a5afc9..b995de0 100644 --- a/app/scripts/index.js +++ b/app/scripts/index.js @@ -49,7 +49,7 @@ class App { let selem = document.getElementById("specification-select"); selem.value = "tsne-10th"; - selem.dispatchEvent(new Event('change')); + selem.dispatchEvent(new Event("change")); document.getElementById("refresh-specification").click(); } diff --git a/app/scripts/reducers.js b/app/scripts/reducers.js index 56baacb..60a9c76 100644 --- a/app/scripts/reducers.js +++ b/app/scripts/reducers.js @@ -8,6 +8,7 @@ const controlsSlice = createSlice({ specification: csv10, lockedX: false, lockedY: false, + useNaturalScrolling: false, }, reducers: { setSpecification(state, action) { @@ -19,10 +20,16 @@ const controlsSlice = createSlice({ }, setScroll(state, action) { - if (action.payload.axis === "x") { - state.lockedX = action.payload.checked; - } else if (action.payload.axis === "y") { - state.lockedY = action.payload.checked; + if (action.payload.axis) { + if (action.payload.axis === "x") { + state.lockedX = action.payload.checked; + } else if (action.payload.axis === "y") { + state.lockedY = action.payload.checked; + } + } else { + for (const key in action.payload) { + state[key] = action.payload[key]; + } } }, }, diff --git a/app/scripts/toolbar.js b/app/scripts/toolbar.js index 34c7fbe..1faeb9f 100644 --- a/app/scripts/toolbar.js +++ b/app/scripts/toolbar.js @@ -70,6 +70,11 @@ class Toolbar { document.getElementById("lock-y").addEventListener("change", (event) => { this.dispatch(setScroll({ axis: "y", checked: event.target.checked })); }); + document + .getElementById("use-natural-scroll") + .addEventListener("change", (event) => { + this.dispatch(setScroll({ useNaturalScrolling: event.target.checked })); + }); document.getElementById("specification-select").value = this.specification; this.dispatch(setSpecification(exampleMap.get(this.specification))); diff --git a/package.json b/package.json index e0a548d..e4e57e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epiviz.gl", - "version": "1.0.17", + "version": "1.0.18", "repository": "https://github.com/epiviz/epiviz.gl", "homepage": "https://github.com/epiviz/epiviz.gl", "author": { @@ -12,6 +12,10 @@ { "name": "Sam Rosen", "email": "samrosen90@gmail.com" + }, + { + "name": "Ossama Rafique", + "email": "ossamarafique@gmail.com" } ], "bugs": "https://github.com/epiviz/epiviz.gl/issues", diff --git a/rollup.config.js b/rollup.config.js index a356b29..9645e51 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -3,7 +3,7 @@ import commonjs from "@rollup/plugin-commonjs"; import pkg from "./package.json"; import json from "@rollup/plugin-json"; import OMT from "@surma/rollup-plugin-off-main-thread"; -import nodePolyfills from "rollup-plugin-node-polyfills"; // <-- import here +import nodePolyfills from "rollup-plugin-node-polyfills"; export default { input: "src/index.js", diff --git a/src/epiviz.gl/mouse-reader.js b/src/epiviz.gl/mouse-reader.js index eb5bd46..1b46d07 100644 --- a/src/epiviz.gl/mouse-reader.js +++ b/src/epiviz.gl/mouse-reader.js @@ -57,6 +57,7 @@ class MouseReader { ); this.throttledUpdateSVG = throttleWithRAF(this._updateSVG.bind(this)); this.uniDirectionalSelectionEnabled = true; + this.useNaturalScrolling = false; } /** @@ -299,7 +300,9 @@ class MouseReader { let previousY = null; if (!this.lockedX) { previousX = [...this.currentXRange]; // ... to avoid aliasing - const t = -event.wheelDelta / 1000; + const t = this.useNaturalScrolling + ? event.wheelDelta / 1000 + : -event.wheelDelta / 1000; // Invert based on scrolling preference const inDataSpace = this._calculateViewportSpot( ...getLayerXandYFromEvent(event) ); @@ -315,7 +318,9 @@ class MouseReader { if (!this.lockedY) { previousY = [...this.currentYRange]; - const t = -event.wheelDelta / 1000; + const t = this.useNaturalScrolling + ? event.wheelDelta / 1000 + : -event.wheelDelta / 1000; // Invert based on scrolling preference const inDataSpace = this._calculateViewportSpot( ...getLayerXandYFromEvent(event) ); @@ -349,12 +354,17 @@ class MouseReader { } } - this.handler.dispatchEvent(event.wheelDelta < 0 ? "zoomIn" : "zoomOut", { - viewport: this.getViewport(), - zoomLevel: calculateZoomLevel(this.getViewport()), - type: this.tool, - event: cloneMouseEvent(event), - }); + this.handler.dispatchEvent( + (this.useNaturalScrolling ? event.wheelDelta < 0 : event.wheelDelta > 0) + ? "zoomIn" + : "zoomOut", + { + viewport: this.getViewport(), + zoomLevel: calculateZoomLevel(this.getViewport()), + type: this.tool, + event: cloneMouseEvent(event), + } + ); this.handler.sendDrawerState(this.getViewport()); this.throttledUpdateSVG(); diff --git a/src/epiviz.gl/webgl-vis.js b/src/epiviz.gl/webgl-vis.js index b62f3e6..4e0f26d 100644 --- a/src/epiviz.gl/webgl-vis.js +++ b/src/epiviz.gl/webgl-vis.js @@ -33,6 +33,7 @@ class WebGLVis { "currentYRange", "uniDirectionalSelectionEnabled", "maxZoomLevel", + "useNaturalScrolling", ]); } diff --git a/yarn.lock b/yarn.lock index e8d607f..1f03e33 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4238,11 +4238,6 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== -process@^0.11.10: - version "0.11.10" - resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" - integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== - proxy-from-env@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee" @@ -4266,11 +4261,6 @@ punycode@1.3.2: resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0= -punycode@^1.4.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" - integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ== - punycode@^2.1.0, punycode@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"