entangled-worlds-orbiters-shared 1.0.0

package/src/arrow-ui/NumberController.js

@@ -0,0 +1,567 @@
+import Controller from './Controller';
+
+export default class NumberController extends Controller {
+
+	constructor( parent, object, property, min, max, step ) {
+
+		super( parent, object, property, 'number' );
+
+		this._initInput();
+
+		this.min( min );
+		this.max( max );
+
+		const stepExplicit = step !== undefined;
+		this.step( stepExplicit ? step : this._getImplicitStep(), stepExplicit );
+
+		this.updateDisplay();
+
+	}
+
+	decimals( decimals ) {
+		this._decimals = decimals;
+		this.updateDisplay();
+		return this;
+	}
+
+	min( min ) {
+		this._min = min;
+		this._onUpdateMinMax();
+		return this;
+	}
+
+	max( max ) {
+		this._max = max;
+		this._onUpdateMinMax();
+		return this;
+	}
+
+	step( step, explicit = true ) {
+		this._step = step;
+		this._stepExplicit = explicit;
+		return this;
+	}
+
+	updateDisplay() {
+
+        const value = this.getValue();
+
+        if ( this._hasSlider ) {
+
+            let percent = ( value - this._min ) / ( this._max - this._min );
+            percent = Math.max( 0, Math.min( percent, 1 ) );
+
+            if ( this.$slider ) {
+                const rect = this.$slider.getBoundingClientRect();
+                const trackWidth = Math.max( 0, rect.width );
+                
+                // Set fill width
+                this.$fill.style.width = ( percent * trackWidth ) + 'px';
+
+                // Position arrow
+                if ( this.$pointer ) {
+                    const arrowX = percent * trackWidth;
+                    this.$pointer.style.left = arrowX + 'px';
+                }
+            }
+        }
+
+        if ( !this._inputFocused ) {
+            this.$input.value = this._decimals === undefined ? value : value.toFixed( this._decimals );
+        }
+
+        return this;
+    }
+
+	_initInput() {
+
+		this.$input = document.createElement( 'input' );
+		this.$input.setAttribute( 'type', 'text' );
+		this.$input.setAttribute( 'aria-labelledby', this.$name.id );
+
+		// On touch devices only, use input[type=number] to force a numeric keyboard.
+		// Ideally we could use one input type everywhere, but [type=number] has quirks
+		// on desktop, and [inputmode=decimal] has quirks on iOS.
+		// See https://github.com/georgealways/lil-gui/pull/16
+
+		const isTouch = window.matchMedia( '(pointer: coarse)' ).matches;
+
+		if ( isTouch ) {
+			this.$input.setAttribute( 'type', 'number' );
+			this.$input.setAttribute( 'step', 'any' );
+		}
+
+		this.$widget.appendChild( this.$input );
+
+		this.$disable = this.$input;
+
+		const onInput = () => {
+
+			let value = parseFloat( this.$input.value );
+
+			if ( isNaN( value ) ) return;
+
+			if ( this._stepExplicit ) {
+				value = this._snap( value );
+			}
+
+			this.setValue( this._clamp( value ) );
+
+		};
+
+		// Keys & mouse wheel
+		// ---------------------------------------------------------------------
+
+		const increment = delta => {
+
+			const value = parseFloat( this.$input.value );
+
+			if ( isNaN( value ) ) return;
+
+			this._snapClampSetValue( value + delta );
+
+			// Force the input to updateDisplay when it's focused
+			this.$input.value = this.getValue();
+
+		};
+
+		const onKeyDown = e => {
+			// Using `e.key` instead of `e.code` also catches NumpadEnter
+			if ( e.key === 'Enter' ) {
+				this.$input.blur();
+			}
+			if ( e.code === 'ArrowUp' ) {
+				e.preventDefault();
+				increment( this._step * this._arrowKeyMultiplier( e ) );
+			}
+			if ( e.code === 'ArrowDown' ) {
+				e.preventDefault();
+				increment( this._step * this._arrowKeyMultiplier( e ) * -1 );
+			}
+		};
+
+		const onWheel = e => {
+			if ( this._inputFocused ) {
+				e.preventDefault();
+				increment( this._step * this._normalizeMouseWheel( e ) );
+			}
+		};
+
+		// Vertical drag
+		// ---------------------------------------------------------------------
+
+		let testingForVerticalDrag = false,
+			initClientX,
+			initClientY,
+			prevClientY,
+			initValue,
+			dragDelta;
+
+		// Once the mouse is dragged more than DRAG_THRESH px on any axis, we decide
+		// on the user's intent: horizontal means highlight, vertical means drag.
+		const DRAG_THRESH = 5;
+
+		const onMouseDown = e => {
+
+			initClientX = e.clientX;
+			initClientY = prevClientY = e.clientY;
+			testingForVerticalDrag = true;
+
+			initValue = this.getValue();
+			dragDelta = 0;
+
+			window.addEventListener( 'mousemove', onMouseMove );
+			window.addEventListener( 'mouseup', onMouseUp );
+
+		};
+
+		const onMouseMove = e => {
+
+			if ( testingForVerticalDrag ) {
+
+				const dx = e.clientX - initClientX;
+				const dy = e.clientY - initClientY;
+
+				if ( Math.abs( dy ) > DRAG_THRESH ) {
+
+					e.preventDefault();
+					this.$input.blur();
+					testingForVerticalDrag = false;
+					this._setDraggingStyle( true, 'vertical' );
+
+				} else if ( Math.abs( dx ) > DRAG_THRESH ) {
+
+					onMouseUp();
+
+				}
+
+			}
+
+			// This isn't an else so that the first move counts towards dragDelta
+			if ( !testingForVerticalDrag ) {
+
+				const dy = e.clientY - prevClientY;
+
+				dragDelta -= dy * this._step * this._arrowKeyMultiplier( e );
+
+				// Clamp dragDelta so we don't have 'dead space' after dragging past bounds.
+				// We're okay with the fact that bounds can be undefined here.
+				if ( initValue + dragDelta > this._max ) {
+					dragDelta = this._max - initValue;
+				} else if ( initValue + dragDelta < this._min ) {
+					dragDelta = this._min - initValue;
+				}
+
+				this._snapClampSetValue( initValue + dragDelta );
+
+			}
+
+			prevClientY = e.clientY;
+
+		};
+
+		const onMouseUp = () => {
+			this._setDraggingStyle( false, 'vertical' );
+			this._callOnFinishChange();
+			window.removeEventListener( 'mousemove', onMouseMove );
+			window.removeEventListener( 'mouseup', onMouseUp );
+		};
+
+		// Focus state & onFinishChange
+		// ---------------------------------------------------------------------
+
+		const onFocus = () => {
+			this._inputFocused = true;
+		};
+
+		const onBlur = () => {
+			this._inputFocused = false;
+			this.updateDisplay();
+			this._callOnFinishChange();
+		};
+
+		this.$input.addEventListener( 'input', onInput );
+		this.$input.addEventListener( 'keydown', onKeyDown );
+		this.$input.addEventListener( 'wheel', onWheel, { passive: false } );
+		this.$input.addEventListener( 'mousedown', onMouseDown );
+		this.$input.addEventListener( 'focus', onFocus );
+		this.$input.addEventListener( 'blur', onBlur );
+
+	}
+
+	_initSlider() {
+
+		this._hasSlider = true;
+
+		// Build DOM
+		// ---------------------------------------------------------------------
+
+		this.$slider = document.createElement( 'div' );
+		this.$slider.classList.add( 'slider' );
+
+		this.$fill = document.createElement( 'div' );
+		this.$fill.classList.add( 'fill' );
+		this.$slider.appendChild( this.$fill );
+
+		// Triangle arrow pointer element
+		this.$pointer = document.createElement( 'div' );
+		this.$pointer.classList.add( 'valueArrow' );
+		this.$slider.appendChild( this.$pointer );
+
+		this.$widget.insertBefore( this.$slider, this.$input );
+		this.domElement.classList.add( 'hasSlider' );
+
+		this._injectArrowStyles();
+
+		// Map clientX to value
+		// ---------------------------------------------------------------------
+
+		const map = ( v, a, b, c, d ) => ( v - a ) / ( b - a ) * ( d - c ) + c;
+		const setValueFromX = clientX => {
+			const rect = this.$slider.getBoundingClientRect();
+			const x = Math.max( rect.left, Math.min( clientX, rect.right ) );
+			let value = map( x, rect.left, rect.right, this._min, this._max );
+			this._snapClampSetValue( value );
+		};
+
+		// Mouse drag
+		// ---------------------------------------------------------------------
+
+		const mouseDown = e => {
+			this._setDraggingStyle( true );
+			setValueFromX( e.clientX );
+			window.addEventListener( 'mousemove', mouseMove );
+			window.addEventListener( 'mouseup', mouseUp );
+		};
+
+		const mouseMove = e => {
+			setValueFromX( e.clientX );
+		};
+
+		const mouseUp = () => {
+			this._callOnFinishChange();
+			this._setDraggingStyle( false );
+			window.removeEventListener( 'mousemove', mouseMove );
+			window.removeEventListener( 'mouseup', mouseUp );
+		};
+
+		// Touch drag
+		// ---------------------------------------------------------------------
+
+		let testingForScroll = false, prevClientX, prevClientY;
+
+		const beginTouchDrag = e => {
+			e.preventDefault();
+			this._setDraggingStyle( true );
+			setValueFromX( e.touches[ 0 ].clientX );
+			testingForScroll = false;
+		};
+
+		const onTouchStart = e => {
+
+			if ( e.touches.length > 1 ) return;
+
+			// If we're in a scrollable container, we should wait for the first
+			// touchmove to see if the user is trying to slide or scroll.
+			if ( this._hasScrollBar ) {
+
+				prevClientX = e.touches[ 0 ].clientX;
+				prevClientY = e.touches[ 0 ].clientY;
+				testingForScroll = true;
+
+			} else {
+
+				// Otherwise, we can set the value straight away on touchstart.
+				beginTouchDrag( e );
+
+			}
+
+			window.addEventListener( 'touchmove', onTouchMove, { passive: false } );
+			window.addEventListener( 'touchend', onTouchEnd );
+
+		};
+
+		const onTouchMove = e => {
+
+			if ( testingForScroll ) {
+
+				const dx = e.touches[ 0 ].clientX - prevClientX;
+				const dy = e.touches[ 0 ].clientY - prevClientY;
+
+				if ( Math.abs( dx ) > Math.abs( dy ) ) {
+
+					// We moved horizontally, set the value and stop checking.
+					beginTouchDrag( e );
+
+				} else {
+
+					// This was, in fact, an attempt to scroll. Abort.
+					window.removeEventListener( 'touchmove', onTouchMove );
+					window.removeEventListener( 'touchend', onTouchEnd );
+
+				}
+
+			} else {
+
+				e.preventDefault();
+				setValueFromX( e.touches[ 0 ].clientX );
+
+			}
+
+		};
+
+		const onTouchEnd = () => {
+			this._callOnFinishChange();
+			this._setDraggingStyle( false );
+			window.removeEventListener( 'touchmove', onTouchMove );
+			window.removeEventListener( 'touchend', onTouchEnd );
+		};
+
+		// Mouse wheel
+		// ---------------------------------------------------------------------
+
+		// We have to use a debounced function to call onFinishChange because
+		// there's no way to tell when the user is "done" mouse-wheeling.
+		const callOnFinishChange = this._callOnFinishChange.bind( this );
+		const WHEEL_DEBOUNCE_TIME = 400;
+		let wheelFinishChangeTimeout;
+
+		const onWheel = e => {
+
+			// ignore vertical wheels if there's a scrollbar
+			const isVertical = Math.abs( e.deltaX ) < Math.abs( e.deltaY );
+			if ( isVertical && this._hasScrollBar ) return;
+
+			e.preventDefault();
+
+			// set value
+			const delta = this._normalizeMouseWheel( e ) * this._step;
+			this._snapClampSetValue( this.getValue() + delta );
+
+			// force the input to updateDisplay when it's focused
+			this.$input.value = this.getValue();
+
+			// debounce onFinishChange
+			clearTimeout( wheelFinishChangeTimeout );
+			wheelFinishChangeTimeout = setTimeout( callOnFinishChange, WHEEL_DEBOUNCE_TIME );
+
+		};
+
+		this.$slider.addEventListener( 'mousedown', mouseDown );
+		this.$slider.addEventListener( 'touchstart', onTouchStart, { passive: false } );
+		this.$slider.addEventListener( 'wheel', onWheel, { passive: false } );
+
+	}
+
+	_injectArrowStyles() {
+        // Styling is now handled in external CSS file (lil-gui.css)
+        // This method is kept for compatibility but doesn't inject styles
+        return;
+    }
+
+	_setDraggingStyle( active, axis = 'horizontal' ) {
+		if ( this.$slider ) {
+			this.$slider.classList.toggle( 'active', active );
+		}
+		document.body.classList.toggle( 'lil-gui-dragging', active );
+		document.body.classList.toggle( `lil-gui-${axis}`, active );
+	}
+
+	_getImplicitStep() {
+
+		if ( this._hasMin && this._hasMax ) {
+			return ( this._max - this._min ) / 1000;
+		}
+
+		return 0.1;
+
+	}
+
+	_onUpdateMinMax() {
+
+		if ( !this._hasSlider && this._hasMin && this._hasMax ) {
+
+			// If this is the first time we're hearing about min and max
+			// and we haven't explicitly stated what our step is, let's
+			// update that too.
+			if ( !this._stepExplicit ) {
+				this.step( this._getImplicitStep(), false );
+			}
+
+			this._initSlider();
+			this.updateDisplay();
+
+		}
+
+	}
+
+	_normalizeMouseWheel( e ) {
+
+		let { deltaX, deltaY } = e;
+
+		// Safari and Chrome report weird non-integral values for a notched wheel,
+		// but still expose actual lines scrolled via wheelDelta. Notched wheels
+		// should behave the same way as arrow keys.
+		if ( Math.floor( e.deltaY ) !== e.deltaY && e.wheelDelta ) {
+			deltaX = 0;
+			deltaY = -e.wheelDelta / 120;
+			deltaY *= this._stepExplicit ? 1 : 10;
+		}
+
+		const wheel = deltaX + -deltaY;
+
+		return wheel;
+
+	}
+
+	_arrowKeyMultiplier( e ) {
+
+		let mult = this._stepExplicit ? 1 : 10;
+
+		if ( e.shiftKey ) {
+			mult *= 10;
+		} else if ( e.altKey ) {
+			mult /= 10;
+		}
+
+		return mult;
+
+	}
+
+	_snap( value ) {
+
+		// Make the steps "start" at min or max.
+		let offset = 0;
+		if ( this._hasMin ) {
+			offset = this._min;
+		} else if ( this._hasMax ) {
+			offset = this._max;
+		}
+
+		value -= offset;
+
+		value = Math.round( value / this._step ) * this._step;
+
+		value += offset;
+
+		// Used to prevent "flyaway" decimals like 1.00000000000001
+		value = parseFloat( value.toPrecision( 15 ) );
+
+		return value;
+
+	}
+
+	_clamp( value ) {
+		// either condition is false if min or max is undefined
+		if ( value < this._min ) value = this._min;
+		if ( value > this._max ) value = this._max;
+		return value;
+	}
+
+	_snapClampSetValue( value ) {
+		this.setValue( this._clamp( this._snap( value ) ) );
+	}
+
+	get _hasScrollBar() {
+		const root = this.parent.root.$children;
+		return root.scrollHeight > root.clientHeight;
+	}
+
+	get _hasMin() {
+		return this._min !== undefined;
+	}
+
+	get _hasMax() {
+		return this._max !== undefined;
+	}
+
+	// Public API: set the arrow size used for the left visor (in px)
+	arrowSize( px ) {
+		this._arrowSize = px;
+		if ( this.$slider ) this._updateSliderPadding();
+		this.updateDisplay();
+		return this;
+	}
+
+	// Apply left padding to the slider equal to the arrow size
+	_updateSliderPadding() {
+		const size = this._getArrowSize();
+		if ( this.$slider ) {
+			this.$slider.style.paddingLeft = size + 'px';
+			this.$slider.style.setProperty( '--nc-arrow-size', size + 'px' );
+		}
+	}
+
+	// Read computed left padding in pixels
+	_getSliderLeftPadding() {
+		if ( !this.$slider ) return 0;
+		const cs = getComputedStyle( this.$slider );
+		return parseFloat( cs.paddingLeft ) || 0;
+	}
+
+	// Resolve arrow size with a sensible default
+	_getArrowSize() {
+		return ( this._arrowSize !== undefined ) ? this._arrowSize : 12; // default 12px
+	}
+
+}

package/src/arrow-ui/OptionController.js

@@ -0,0 +1,64 @@
+import Controller from './Controller';
+
+export default class OptionController extends Controller {
+
+	constructor( parent, object, property, options ) {
+
+		super( parent, object, property, 'option' );
+
+		this.$select = document.createElement( 'select' );
+		this.$select.setAttribute( 'aria-labelledby', this.$name.id );
+
+		this.$display = document.createElement( 'div' );
+		this.$display.classList.add( 'display' );
+
+		this.$select.addEventListener( 'change', () => {
+			this.setValue( this._values[ this.$select.selectedIndex ] );
+			this._callOnFinishChange();
+		} );
+
+		this.$select.addEventListener( 'focus', () => {
+			this.$display.classList.add( 'focus' );
+		} );
+
+		this.$select.addEventListener( 'blur', () => {
+			this.$display.classList.remove( 'focus' );
+		} );
+
+		this.$widget.appendChild( this.$select );
+		this.$widget.appendChild( this.$display );
+
+		this.$disable = this.$select;
+
+		this.options( options );
+
+	}
+
+	options( options ) {
+
+		this._values = Array.isArray( options ) ? options : Object.values( options );
+		this._names = Array.isArray( options ) ? options : Object.keys( options );
+
+		this.$select.replaceChildren();
+
+		this._names.forEach( name => {
+			const $option = document.createElement( 'option' );
+			$option.textContent = name;
+			this.$select.appendChild( $option );
+		} );
+
+		this.updateDisplay();
+
+		return this;
+
+	}
+
+	updateDisplay() {
+		const value = this.getValue();
+		const index = this._values.indexOf( value );
+		this.$select.selectedIndex = index;
+		this.$display.textContent = index === -1 ? value : this._names[ index ];
+		return this;
+	}
+
+}

package/src/arrow-ui/StringController.js

@@ -0,0 +1,41 @@
+import Controller from './Controller';
+
+export default class StringController extends Controller {
+
+	constructor( parent, object, property ) {
+
+		super( parent, object, property, 'string' );
+
+		this.$input = document.createElement( 'input' );
+		this.$input.setAttribute( 'type', 'text' );
+		this.$input.setAttribute( 'spellcheck', 'false' );
+		this.$input.setAttribute( 'aria-labelledby', this.$name.id );
+
+		this.$input.addEventListener( 'input', () => {
+			this.setValue( this.$input.value );
+		} );
+
+		this.$input.addEventListener( 'keydown', e => {
+			if ( e.code === 'Enter' ) {
+				this.$input.blur();
+			}
+		} );
+
+		this.$input.addEventListener( 'blur', () => {
+			this._callOnFinishChange();
+		} );
+
+		this.$widget.appendChild( this.$input );
+
+		this.$disable = this.$input;
+
+		this.updateDisplay();
+
+	}
+
+	updateDisplay() {
+		this.$input.value = this.getValue();
+		return this;
+	}
+
+}

package/src/arrow-ui/index.js

@@ -0,0 +1,13 @@
+export { default as default } from './GUI';
+
+export { default as GUI } from './GUI';
+export { default as Controller } from './Controller';
+
+export { default as BooleanController } from './BooleanController';
+export { default as ColorController } from './ColorController';
+export { default as FunctionController } from './FunctionController';
+export { default as NumberController } from './NumberController';
+export { default as OptionController } from './OptionController';
+export { default as StringController } from './StringController';
+
+export { ensureLilGui } from './lilGuiLoader.js';

package/src/arrow-ui/lilGuiLoader.js

@@ -0,0 +1,10 @@
+// Minimal lilGuiLoader: directly import local ESM GUI. No CSS handling or UMD/CDN fallback.
+export async function ensureLilGui() {
+  if (window.lil && window.lil.GUI) return window.lil.GUI;
+  const mod = await import('./GUI.js');
+  const GUIClass = mod.GUI || mod.default;
+  if (!GUIClass) throw new Error('[lilGuiLoader] GUI class not found in ./GUI.js');
+  window.lil = window.lil || {};
+  window.lil.GUI = GUIClass;
+  return window.lil.GUI;
+}