entangled-worlds-orbiters-shared 1.0.0

package/src/arrow-ui/Controller.js

@@ -0,0 +1,447 @@
+/** @module Controller */
+
+/**
+ * Base class for all controllers.
+ */
+export default class Controller {
+
+	constructor( parent, object, property, className, elementType = 'div' ) {
+
+		/**
+		 * The GUI that contains this controller.
+		 * @type {GUI}
+		 */
+		this.parent = parent;
+
+		/**
+		 * The object this controller will modify.
+		 * @type {object}
+		 */
+		this.object = object;
+
+		/**
+		 * The name of the property to control.
+		 * @type {string}
+		 */
+		this.property = property;
+
+		/**
+		 * Used to determine if the controller is disabled.
+		 * Use `controller.disable( true|false )` to modify this value.
+		 * @type {boolean}
+		 */
+		this._disabled = false;
+
+		/**
+		 * Used to determine if the Controller is hidden.
+		 * Use `controller.show()` or `controller.hide()` to change this.
+		 * @type {boolean}
+		 */
+		this._hidden = false;
+
+		/**
+		 * The value of `object[ property ]` when the controller was created.
+		 * @type {any}
+		 */
+		this.initialValue = this.getValue();
+
+		/**
+		 * The outermost container DOM element for this controller.
+		 * @type {HTMLElement}
+		 */
+		this.domElement = document.createElement( elementType );
+		this.domElement.classList.add( 'controller' );
+		this.domElement.classList.add( className );
+
+		/**
+		 * The DOM element that contains the controller's name.
+		 * @type {HTMLElement}
+		 */
+		this.$name = document.createElement( 'div' );
+		this.$name.classList.add( 'name' );
+
+		Controller.nextNameID = Controller.nextNameID || 0;
+		this.$name.id = `lil-gui-name-${++Controller.nextNameID}`;
+
+		/**
+		 * The DOM element that contains the controller's "widget" (which differs by controller type).
+		 * @type {HTMLElement}
+		 */
+		this.$widget = document.createElement( 'div' );
+		this.$widget.classList.add( 'widget' );
+
+		/**
+		 * The DOM element that receives the disabled attribute when using disable().
+		 * @type {HTMLElement}
+		 */
+		this.$disable = this.$widget;
+
+		this.domElement.appendChild( this.$name );
+		this.domElement.appendChild( this.$widget );
+
+		// Don't fire global key events while typing in a controller
+		this.domElement.addEventListener( 'keydown', e => e.stopPropagation() );
+		this.domElement.addEventListener( 'keyup', e => e.stopPropagation() );
+
+		this.parent.children.push( this );
+		this.parent.controllers.push( this );
+
+		this.parent.$children.appendChild( this.domElement );
+
+		this._listenCallback = this._listenCallback.bind( this );
+
+		this.name( property );
+
+	}
+
+	/**
+	 * Sets the name of the controller and its label in the GUI.
+	 * @param {string} name
+	 * @returns {this}
+	 */
+	name( name ) {
+		/**
+		 * The controller's name. Use `controller.name( 'Name' )` to modify this value.
+		 * @type {string}
+		 */
+		this._name = name;
+		this.$name.textContent = name;
+		return this;
+	}
+
+	/**
+	 * Pass a function to be called whenever the value is modified by this controller.
+	 * The function receives the new value as its first parameter. The value of `this` will be the
+	 * controller.
+	 *
+	 * For function controllers, the `onChange` callback will be fired on click, after the function
+	 * executes.
+	 * @param {Function} callback
+	 * @returns {this}
+	 * @example
+	 * const controller = gui.add( object, 'property' );
+	 *
+	 * controller.onChange( function( v ) {
+	 * 	console.log( 'The value is now ' + v );
+	 * 	console.assert( this === controller );
+	 * } );
+	 */
+	onChange( callback ) {
+		/**
+		 * Used to access the function bound to `onChange` events. Don't modify this value directly.
+		 * Use the `controller.onChange( callback )` method instead.
+		 * @type {Function}
+		 */
+		this._onChange = callback;
+		return this;
+	}
+
+	/**
+	 * Calls the onChange methods of this controller and its parent GUI.
+	 * @protected
+	 */
+	_callOnChange() {
+
+		this.parent._callOnChange( this );
+
+		if ( this._onChange !== undefined ) {
+			this._onChange.call( this, this.getValue() );
+		}
+
+		this._changed = true;
+
+	}
+
+	/**
+	 * Pass a function to be called after this controller has been modified and loses focus.
+	 * @param {Function} callback
+	 * @returns {this}
+	 * @example
+	 * const controller = gui.add( object, 'property' );
+	 *
+	 * controller.onFinishChange( function( v ) {
+	 * 	console.log( 'Changes complete: ' + v );
+	 * 	console.assert( this === controller );
+	 * } );
+	 */
+	onFinishChange( callback ) {
+		/**
+		 * Used to access the function bound to `onFinishChange` events. Don't modify this value
+		 * directly. Use the `controller.onFinishChange( callback )` method instead.
+		 * @type {Function}
+		 */
+		this._onFinishChange = callback;
+		return this;
+	}
+
+	/**
+	 * Should be called by Controller when its widgets lose focus.
+	 * @protected
+	 */
+	_callOnFinishChange() {
+
+		if ( this._changed ) {
+
+			this.parent._callOnFinishChange( this );
+
+			if ( this._onFinishChange !== undefined ) {
+				this._onFinishChange.call( this, this.getValue() );
+			}
+
+		}
+
+		this._changed = false;
+
+	}
+
+	/**
+	 * Sets the controller back to its initial value.
+	 * @returns {this}
+	 */
+	reset() {
+		this.setValue( this.initialValue );
+		this._callOnFinishChange();
+		return this;
+	}
+
+	/**
+	 * Enables this controller.
+	 * @param {boolean} enabled
+	 * @returns {this}
+	 * @example
+	 * controller.enable();
+	 * controller.enable( false ); // disable
+	 * controller.enable( controller._disabled ); // toggle
+	 */
+	enable( enabled = true ) {
+		return this.disable( !enabled );
+	}
+
+	/**
+	 * Disables this controller.
+	 * @param {boolean} disabled
+	 * @returns {this}
+	 * @example
+	 * controller.disable();
+	 * controller.disable( false ); // enable
+	 * controller.disable( !controller._disabled ); // toggle
+	 */
+	disable( disabled = true ) {
+
+		if ( disabled === this._disabled ) return this;
+
+		this._disabled = disabled;
+
+		this.domElement.classList.toggle( 'disabled', disabled );
+		this.$disable.toggleAttribute( 'disabled', disabled );
+
+		return this;
+
+	}
+
+	/**
+	 * Shows the Controller after it's been hidden.
+	 * @param {boolean} show
+	 * @returns {this}
+	 * @example
+	 * controller.show();
+	 * controller.show( false ); // hide
+	 * controller.show( controller._hidden ); // toggle
+	 */
+	show( show = true ) {
+
+		this._hidden = !show;
+
+		this.domElement.style.display = this._hidden ? 'none' : '';
+
+		return this;
+
+	}
+
+	/**
+	 * Hides the Controller.
+	 * @returns {this}
+	 */
+	hide() {
+		return this.show( false );
+	}
+
+	/**
+	 * Changes this controller into a dropdown of options.
+	 *
+	 * Calling this method on an option controller will simply update the options. However, if this
+	 * controller was not already an option controller, old references to this controller are
+	 * destroyed, and a new controller is added to the end of the GUI.
+	 * @example
+	 * // safe usage
+	 *
+	 * gui.add( obj, 'prop1' ).options( [ 'a', 'b', 'c' ] );
+	 * gui.add( obj, 'prop2' ).options( { Big: 10, Small: 1 } );
+	 * gui.add( obj, 'prop3' );
+	 *
+	 * // danger
+	 *
+	 * const ctrl1 = gui.add( obj, 'prop1' );
+	 * gui.add( obj, 'prop2' );
+	 *
+	 * // calling options out of order adds a new controller to the end...
+	 * const ctrl2 = ctrl1.options( [ 'a', 'b', 'c' ] );
+	 *
+	 * // ...and ctrl1 now references a controller that doesn't exist
+	 * assert( ctrl2 !== ctrl1 )
+	 * @param {object|Array} options
+	 * @returns {Controller}
+	 */
+	options( options ) {
+		const controller = this.parent.add( this.object, this.property, options );
+		controller.name( this._name );
+		this.destroy();
+		return controller;
+	}
+
+	/**
+	 * Sets the minimum value. Only works on number controllers.
+	 * @param {number} min
+	 * @returns {this}
+	 */
+	// eslint-disable-next-line no-unused-vars
+	min( min ) {
+		return this;
+	}
+
+	/**
+	 * Sets the maximum value. Only works on number controllers.
+	 * @param {number} max
+	 * @returns {this}
+	 */
+	// eslint-disable-next-line no-unused-vars
+	max( max ) {
+		return this;
+	}
+
+	/**
+	 * Values set by this controller will be rounded to multiples of `step`. Only works on number
+	 * controllers.
+	 * @param {number} step
+	 * @returns {this}
+	 */
+	// eslint-disable-next-line no-unused-vars
+	step( step ) {
+		return this;
+	}
+
+	/**
+	 * Rounds the displayed value to a fixed number of decimals, without affecting the actual value
+	 * like `step()`. Only works on number controllers.
+	 * @example
+	 * gui.add( object, 'property' ).listen().decimals( 4 );
+	 * @param {number} decimals
+	 * @returns {this}
+	 */
+	// eslint-disable-next-line no-unused-vars
+	decimals( decimals ) {
+		return this;
+	}
+
+	/**
+	 * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening.
+	 * @param {boolean} listen
+	 * @returns {this}
+	 */
+	listen( listen = true ) {
+
+		/**
+		 * Used to determine if the controller is currently listening. Don't modify this value
+		 * directly. Use the `controller.listen( true|false )` method instead.
+		 * @type {boolean}
+		 */
+		this._listening = listen;
+
+		if ( this._listenCallbackID !== undefined ) {
+			cancelAnimationFrame( this._listenCallbackID );
+			this._listenCallbackID = undefined;
+		}
+
+		if ( this._listening ) {
+			this._listenCallback();
+		}
+
+		return this;
+
+	}
+
+	_listenCallback() {
+
+		this._listenCallbackID = requestAnimationFrame( this._listenCallback );
+
+		// To prevent framerate loss, make sure the value has changed before updating the display.
+		// Note: save() is used here instead of getValue() only because of ColorController. The !== operator
+		// won't work for color objects or arrays, but ColorController.save() always returns a string.
+
+		const curValue = this.save();
+
+		if ( curValue !== this._listenPrevValue ) {
+			this.updateDisplay();
+		}
+
+		this._listenPrevValue = curValue;
+
+	}
+
+	/**
+	 * Returns `object[ property ]`.
+	 * @returns {any}
+	 */
+	getValue() {
+		return this.object[ this.property ];
+	}
+
+	/**
+	 * Sets the value of `object[ property ]`, invokes any `onChange` handlers and updates the display.
+	 * @param {any} value
+	 * @returns {this}
+	 */
+	setValue( value ) {
+
+		if ( this.getValue() !== value ) {
+
+			this.object[ this.property ] = value;
+			this._callOnChange();
+			this.updateDisplay();
+
+		}
+
+		return this;
+
+	}
+
+	/**
+	 * Updates the display to keep it in sync with the current value. Useful for updating your
+	 * controllers when their values have been modified outside of the GUI.
+	 * @returns {this}
+	 */
+	updateDisplay() {
+		return this;
+	}
+
+	load( value ) {
+		this.setValue( value );
+		this._callOnFinishChange();
+		return this;
+	}
+
+	save() {
+		return this.getValue();
+	}
+
+	/**
+	 * Destroys this controller and removes it from the parent GUI.
+	 */
+	destroy() {
+		this.listen( false );
+		this.parent.children.splice( this.parent.children.indexOf( this ), 1 );
+		this.parent.controllers.splice( this.parent.controllers.indexOf( this ), 1 );
+		this.parent.$children.removeChild( this.domElement );
+	}
+
+}

package/src/arrow-ui/FunctionController.js

@@ -0,0 +1,27 @@
+import Controller from './Controller';
+
+export default class FunctionController extends Controller {
+
+	constructor( parent, object, property ) {
+
+		super( parent, object, property, 'function' );
+
+		// Buttons are the only case where widget contains name
+		this.$button = document.createElement( 'button' );
+		this.$button.appendChild( this.$name );
+		this.$widget.appendChild( this.$button );
+
+		this.$button.addEventListener( 'click', e => {
+			e.preventDefault();
+			this.getValue().call( this.object );
+			this._callOnChange();
+		} );
+
+		// enables :active pseudo class on mobile
+		this.$button.addEventListener( 'touchstart', () => {}, { passive: true } );
+
+		this.$disable = this.$button;
+
+	}
+
+}