mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
New feature: modify the value of numbercontroller (both box and slider) using mouse wheel
This commit is contained in:
argon24
parent
05c85ecf7d
commit
433c1f1462
155
build/dat.gui.js
155
build/dat.gui.js
@ -1028,8 +1028,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var Controller = function () {
|
||||
function Controller(object, property) {
|
||||
@ -1192,12 +1190,11 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
/**
|
||||
* @class Provides a checkbox input to alter the boolean property of an object.
|
||||
*
|
||||
* @extends dat.controllers.Controller
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var BooleanController = function (_Controller) {
|
||||
_inherits(BooleanController, _Controller);
|
||||
@ -1592,8 +1589,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
* @param {Object|string[]} options A map of labels to acceptable values, or
|
||||
* a list of acceptable string values.
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var OptionController = function (_Controller) {
|
||||
_inherits(OptionController, _Controller);
|
||||
@ -1703,8 +1698,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var StringController = function (_Controller) {
|
||||
_inherits(StringController, _Controller);
|
||||
@ -1814,8 +1807,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* @param {Number} [params.min] Minimum allowed value
|
||||
* @param {Number} [params.max] Maximum allowed value
|
||||
* @param {Number} [params.step] Increment by which to change value
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
|
||||
var NumberController = function (_Controller) {
|
||||
@ -1872,8 +1863,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*/
|
||||
|
||||
|
||||
NumberController.prototype.min = function min(v) {
|
||||
this.__min = v;
|
||||
NumberController.prototype.min = function min(minValue) {
|
||||
this.__min = minValue;
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -1886,8 +1877,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*/
|
||||
|
||||
|
||||
NumberController.prototype.max = function max(v) {
|
||||
this.__max = v;
|
||||
NumberController.prototype.max = function max(maxValue) {
|
||||
this.__max = maxValue;
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -1903,10 +1894,10 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*/
|
||||
|
||||
|
||||
NumberController.prototype.step = function step(v) {
|
||||
this.__step = v;
|
||||
this.__impliedStep = v;
|
||||
this.__precision = numDecimals(v);
|
||||
NumberController.prototype.step = function step(stepValue) {
|
||||
this.__step = stepValue;
|
||||
this.__impliedStep = stepValue;
|
||||
this.__precision = numDecimals(stepValue);
|
||||
return this;
|
||||
};
|
||||
|
||||
@ -1973,8 +1964,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* @param {Number} [params.min] Minimum allowed value
|
||||
* @param {Number} [params.max] Maximum allowed value
|
||||
* @param {Number} [params.step] Increment by which to change value
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
|
||||
var NumberControllerBox = function (_NumberController) {
|
||||
@ -1995,6 +1984,17 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*/
|
||||
var prevY = void 0;
|
||||
|
||||
var mousewheelevt = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel';
|
||||
|
||||
function onMouseWheel(e) {
|
||||
var value = _this.getValue();
|
||||
var delta = (e.deltaY || -e.wheelDelta || e.detail) >> 10 || 1;
|
||||
e.preventDefault();
|
||||
|
||||
if (delta < 0) value += _this.__impliedStep;else value -= _this.__impliedStep;
|
||||
_this.setValue(value);
|
||||
}
|
||||
|
||||
function onChange() {
|
||||
var attempted = parseFloat(_this.__input.value);
|
||||
if (!_common2.default.isNaN(attempted)) {
|
||||
@ -2039,6 +2039,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
_dom2.default.bind(_this2.__input, 'change', onChange);
|
||||
_dom2.default.bind(_this2.__input, 'blur', onBlur);
|
||||
_dom2.default.bind(_this2.__input, 'mousedown', onMouseDown);
|
||||
_dom2.default.bind(_this2.__input, mousewheelevt, onMouseWheel);
|
||||
_dom2.default.bind(_this2.__input, 'keydown', function (e) {
|
||||
// When pressing enter, you can be as precise as you want.
|
||||
if (e.keyCode === 13) {
|
||||
@ -2120,8 +2121,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* @param {Number} minValue Minimum allowed value
|
||||
* @param {Number} maxValue Maximum allowed value
|
||||
* @param {Number} stepValue Increment by which to change value
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
|
||||
var NumberControllerSlider = function (_NumberController) {
|
||||
@ -2139,12 +2138,27 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
_dom2.default.bind(_this2.__background, 'mousedown', onMouseDown);
|
||||
|
||||
var mousewheelevt = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel';
|
||||
_dom2.default.bind(_this2.__background, mousewheelevt, onMouseWheel);
|
||||
|
||||
_dom2.default.addClass(_this2.__background, 'slider');
|
||||
_dom2.default.addClass(_this2.__foreground, 'slider-fg');
|
||||
|
||||
function onMouseWheel(e) {
|
||||
var value = _this.getValue();
|
||||
var delta = (e.deltaY || -e.wheelDelta || e.detail) >> 10 || 1;
|
||||
e.preventDefault();
|
||||
document.activeElement.blur();
|
||||
|
||||
if (delta < 0) value += _this.__impliedStep;else value -= _this.__impliedStep;
|
||||
_this.setValue(value);
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
document.activeElement.blur();
|
||||
|
||||
window.console.log('delete this line');
|
||||
|
||||
_dom2.default.bind(window, 'mousemove', onMouseDrag);
|
||||
_dom2.default.bind(window, 'mouseup', onMouseUp);
|
||||
|
||||
@ -2230,8 +2244,6 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
*
|
||||
* @member dat.controllers
|
||||
*/
|
||||
var FunctionController = function (_Controller) {
|
||||
_inherits(FunctionController, _Controller);
|
||||
@ -2321,6 +2333,11 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @class Represents a given property of an object that is a color.
|
||||
* @param {Object} object
|
||||
* @param {string} property
|
||||
*/
|
||||
var ColorController = function (_Controller) {
|
||||
_inherits(ColorController, _Controller);
|
||||
|
||||
@ -2705,12 +2722,12 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
_css2.default.inject(_style2.default);
|
||||
|
||||
/** Outer-most className for GUI's */
|
||||
/** @ignore Outer-most className for GUI's */
|
||||
var CSS_NAMESPACE = 'dg';
|
||||
|
||||
var HIDE_KEY_CODE = 72;
|
||||
|
||||
/** The only value shared between the JS and SCSS. Use caution. */
|
||||
/** @ignore The only value shared between the JS and SCSS. Use caution. */
|
||||
var CLOSE_BUTTON_HEIGHT = 20;
|
||||
|
||||
var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
|
||||
@ -2725,24 +2742,32 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
var SAVE_DIALOGUE = void 0;
|
||||
|
||||
/** Have we yet to create an autoPlace GUI? */
|
||||
/** @ignore Have we yet to create an autoPlace GUI? */
|
||||
var autoPlaceVirgin = true;
|
||||
|
||||
/** Fixed position div that auto place GUI's go inside */
|
||||
/** @ignore Fixed position div that auto place GUI's go inside */
|
||||
var autoPlaceContainer = void 0;
|
||||
|
||||
/** Are we hiding the GUI's ? */
|
||||
/** @ignore Are we hiding the GUI's ? */
|
||||
var hide = false;
|
||||
|
||||
/** GUI's which should be hidden */
|
||||
/** @private GUI's which should be hidden */
|
||||
var hideableGuis = [];
|
||||
|
||||
/**
|
||||
* A lightweight controller library for JavaScript. It allows you to easily
|
||||
* @class A lightweight controller library for JavaScript. It allows you to easily
|
||||
* manipulate variables and fire functions on the fly.
|
||||
* @class
|
||||
*
|
||||
* @member dat.gui
|
||||
* @typicalname gui
|
||||
*
|
||||
* @example
|
||||
* // Creating a GUI with options.
|
||||
* var gui = new dat.GUI({name: 'My GUI'});
|
||||
*
|
||||
* @example
|
||||
* // Creating a GUI and a subfolder.
|
||||
* var gui = new dat.GUI();
|
||||
* var folder1 = gui.addFolder('Flow Field');
|
||||
*
|
||||
* @param {Object} [params]
|
||||
* @param {String} [params.name] The name of this GUI.
|
||||
@ -2760,7 +2785,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
/**
|
||||
* Outermost DOM Element
|
||||
* @type DOMElement
|
||||
* @type {DOMElement}
|
||||
*/
|
||||
this.domElement = document.createElement('div');
|
||||
this.__ul = document.createElement('ul');
|
||||
@ -2844,7 +2869,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
var saveToLocalStorage = void 0;
|
||||
|
||||
Object.defineProperties(this,
|
||||
/** @lends dat.gui.GUI.prototype */
|
||||
/** @lends GUI.prototype */
|
||||
{
|
||||
/**
|
||||
* The parent <code>GUI</code>
|
||||
@ -3149,14 +3174,31 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
|
||||
_common2.default.extend(GUI.prototype,
|
||||
|
||||
/** @lends dat.gui.GUI */
|
||||
/** @lends GUI.prototype */
|
||||
{
|
||||
|
||||
/**
|
||||
* @param object
|
||||
* @param property
|
||||
* @returns {dat.controllers.Controller} The new controller that was added.
|
||||
* Adds a new {@link Controller} to the GUI. The type of controller created
|
||||
* is inferred from the initial value of <code>object[property]</code>. For
|
||||
* color properties, see {@link addColor}.
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {String} property The name of the property to be manipulated
|
||||
* @param {Number} [min] Minimum allowed value
|
||||
* @param {Number} [max] Maximum allowed value
|
||||
* @param {Number} [step] Increment by which to change value
|
||||
* @returns {Controller} The controller that was added to the GUI.
|
||||
* @instance
|
||||
*
|
||||
* @example
|
||||
* // Add a string controller.
|
||||
* var person = {name: 'Sam'};
|
||||
* gui.add(person, 'name');
|
||||
*
|
||||
* @example
|
||||
* // Add a number controller slider.
|
||||
* var person = {age: 45};
|
||||
* gui.add(person, 'age', 0, 100);
|
||||
*/
|
||||
add: function add(object, property) {
|
||||
return _add(this, object, property, {
|
||||
@ -3165,10 +3207,24 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds a new color controller to the GUI.
|
||||
*
|
||||
* @param object
|
||||
* @param property
|
||||
* @returns {dat.controllers.ColorController} The new controller that was added.
|
||||
* @returns {Controller} The controller that was added to the GUI.
|
||||
* @instance
|
||||
*
|
||||
* @example
|
||||
* var palette = {
|
||||
* color1: '#FF0000', // CSS string
|
||||
* color2: [ 0, 128, 255 ], // RGB array
|
||||
* color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
|
||||
* color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
|
||||
* };
|
||||
* gui.addColor(palette, 'color1');
|
||||
* gui.addColor(palette, 'color2');
|
||||
* gui.addColor(palette, 'color3');
|
||||
* gui.addColor(palette, 'color4');
|
||||
*/
|
||||
addColor: function addColor(object, property) {
|
||||
return _add(this, object, property, {
|
||||
@ -3177,7 +3233,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
},
|
||||
|
||||
/**
|
||||
* @param controller
|
||||
* Removes the given controller from the GUI.
|
||||
* @param {Controller} controller
|
||||
* @instance
|
||||
*/
|
||||
remove: function remove(controller) {
|
||||
@ -3190,6 +3247,10 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes the GUI from the document and unbinds all event listeners.
|
||||
* @instance
|
||||
*/
|
||||
destroy: function destroy() {
|
||||
if (this.autoPlace) {
|
||||
autoPlaceContainer.removeChild(this.domElement);
|
||||
@ -3204,6 +3265,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a new subfolder GUI instance.
|
||||
* @param name
|
||||
* @returns {dat.gui.GUI} The new folder.
|
||||
* @throws {Error} if this GUI already has a folder by the specified
|
||||
@ -3244,10 +3306,16 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
return gui;
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens the GUI.
|
||||
*/
|
||||
open: function open() {
|
||||
this.closed = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Closes the GUI.
|
||||
*/
|
||||
close: function close() {
|
||||
this.closed = true;
|
||||
},
|
||||
@ -3294,9 +3362,10 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* the GUI grows. When remembering new objects, append them to the end
|
||||
* of the list.
|
||||
*
|
||||
* @param {Object...} objects
|
||||
* @param {...Object} objects
|
||||
* @throws {Error} if not called on a top level GUI.
|
||||
* @instance
|
||||
* @ignore
|
||||
*/
|
||||
remember: function remember() {
|
||||
if (_common2.default.isUndefined(SAVE_DIALOGUE)) {
|
||||
@ -3436,6 +3505,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
* @param gui
|
||||
* @param [newDom] If specified, inserts the dom content in the new row
|
||||
* @param [liBefore] If specified, places the new row before another row
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
function addRow(gui, newDom, liBefore) {
|
||||
var li = document.createElement('li');
|
||||
|
||||
File diff suppressed because one or more lines are too long
4
build/dat.gui.min.js
vendored
4
build/dat.gui.min.js
vendored
File diff suppressed because one or more lines are too long
@ -59,6 +59,7 @@
|
||||
"eslint-plugin-import": "^1.15.0",
|
||||
"extend": "^3.0.0",
|
||||
"html-loader": "^0.4.4",
|
||||
"jquery-mousewheel": "^3.1.13",
|
||||
"jsdoc-to-markdown": "^3.0.2",
|
||||
"node-sass": "^3.10.0",
|
||||
"replace-between": "0.0.8",
|
||||
|
||||
@ -48,6 +48,18 @@ class NumberControllerBox extends NumberController {
|
||||
*/
|
||||
let prevY;
|
||||
|
||||
const mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';
|
||||
|
||||
function onMouseWheel(e) {
|
||||
let value = _this.getValue();
|
||||
const delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
|
||||
e.preventDefault();
|
||||
|
||||
if (delta < 0) value += _this.__impliedStep;
|
||||
else value -= _this.__impliedStep;
|
||||
_this.setValue(value);
|
||||
}
|
||||
|
||||
function onChange() {
|
||||
const attempted = parseFloat(_this.__input.value);
|
||||
if (!common.isNaN(attempted)) {
|
||||
@ -92,6 +104,7 @@ class NumberControllerBox extends NumberController {
|
||||
dom.bind(this.__input, 'change', onChange);
|
||||
dom.bind(this.__input, 'blur', onBlur);
|
||||
dom.bind(this.__input, 'mousedown', onMouseDown);
|
||||
dom.bind(this.__input, mousewheelevt, onMouseWheel);
|
||||
dom.bind(this.__input, 'keydown', function(e) {
|
||||
// When pressing enter, you can be as precise as you want.
|
||||
if (e.keyCode === 13) {
|
||||
|
||||
@ -45,12 +45,28 @@ class NumberControllerSlider extends NumberController {
|
||||
|
||||
dom.bind(this.__background, 'mousedown', onMouseDown);
|
||||
|
||||
const mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel';
|
||||
dom.bind(this.__background, mousewheelevt, onMouseWheel);
|
||||
|
||||
dom.addClass(this.__background, 'slider');
|
||||
dom.addClass(this.__foreground, 'slider-fg');
|
||||
|
||||
function onMouseWheel(e) {
|
||||
let value = _this.getValue();
|
||||
const delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
|
||||
e.preventDefault();
|
||||
document.activeElement.blur();
|
||||
|
||||
if (delta < 0) value += _this.__impliedStep;
|
||||
else value -= _this.__impliedStep;
|
||||
_this.setValue(value);
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
document.activeElement.blur();
|
||||
|
||||
window.console.log('delete this line');
|
||||
|
||||
dom.bind(window, 'mousemove', onMouseDrag);
|
||||
dom.bind(window, 'mouseup', onMouseUp);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user