Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
lil-gui - npm Package Compare versions
Comparing version 0.8.11 to 0.8.14
| /** | ||
| * lil-gui | ||
| * @version 0.8.11 | ||
| * @version 0.8.14 | ||
| * @author George Michael Brower | ||
@@ -28,3 +28,3 @@ * @license MIT | ||
| /** | ||
| * Name of the property to control. | ||
| * The name of the property to control. | ||
| * @type {string} | ||
@@ -106,5 +106,6 @@ */ | ||
| * | ||
| * const controller = gui.add( object, 'property' ).onChange(function() { | ||
| * console.assert(this === controller); | ||
| * } ); | ||
| * const controller = gui.add( object, 'property' ) | ||
| * .onChange( function() { | ||
| * console.assert(this === controller); | ||
| * } ); | ||
| */ | ||
@@ -127,28 +128,2 @@ onChange( callback ) { | ||
| /** | ||
| * Sets `object[ property ]` to `value`, calls `_onChange()` and then `updateDisplay()`. | ||
| * @param {any} value | ||
| * @returns {this} | ||
| */ | ||
| setValue( value ) { | ||
| this.object[ this.property ] = value; | ||
| this._callOnChange(); | ||
| this.updateDisplay(); | ||
| return this; | ||
| } | ||
| _callOnChange() { | ||
| if ( this._onChange !== undefined ) { | ||
| this._onChange.call( this, this.getValue() ); | ||
| } | ||
| } | ||
| /** | ||
| * Returns `object[ property ]`. | ||
| * @returns {any} | ||
| */ | ||
| getValue() { | ||
| return this.object[ this.property ]; | ||
| } | ||
| /** | ||
| * Sets the controller back to its initial value. | ||
@@ -193,10 +168,2 @@ * @returns {this} | ||
| /** | ||
| * Destroys this controller and removes it from the parent GUI. | ||
| */ | ||
| destroy() { | ||
| this.parent.children.splice( this.parent.children.indexOf( this ), 1 ); | ||
| this.parent.$children.removeChild( this.domElement ); | ||
| } | ||
| /** | ||
| * Destroys this controller and adds a new option controller. | ||
@@ -241,20 +208,2 @@ * @param {object|Array} options | ||
| /** | ||
| * Updates the display to keep it in sync with `getValue()`. Useful for updating your | ||
| * controllers when their values have been modified outside of the GUI. | ||
| * @returns {this} | ||
| */ | ||
| updateDisplay() { | ||
| return this; | ||
| } | ||
| export() { | ||
| return this.getValue(); | ||
| } | ||
| import( value ) { | ||
| this.setValue( value ); | ||
| return this; | ||
| } | ||
| /** | ||
| * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening, and use | ||
@@ -292,2 +241,54 @@ * `controller._listening` to access the listening state. | ||
| /** | ||
| * Returns `object[ property ]`. | ||
| * @returns {any} | ||
| */ | ||
| getValue() { | ||
| return this.object[ this.property ]; | ||
| } | ||
| /** | ||
| * todoc | ||
| * @param {any} value | ||
| * @returns {this} | ||
| */ | ||
| setValue( value ) { | ||
| this.object[ this.property ] = value; | ||
| this._callOnChange(); | ||
| this.updateDisplay(); | ||
| return this; | ||
| } | ||
| _callOnChange() { | ||
| if ( this._onChange !== undefined ) { | ||
| this._onChange.call( this, this.getValue() ); | ||
| } | ||
| } | ||
| /** | ||
| * 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; | ||
| } | ||
| import( value ) { | ||
| this.setValue( value ); | ||
| return this; | ||
| } | ||
| export() { | ||
| return this.getValue(); | ||
| } | ||
| /** | ||
| * Destroys this controller and removes it from the parent GUI. | ||
| */ | ||
| destroy() { | ||
| this.parent.children.splice( this.parent.children.indexOf( this ), 1 ); | ||
| this.parent.$children.removeChild( this.domElement ); | ||
| } | ||
| } | ||
@@ -1015,6 +1016,4 @@ | ||
| --checkbox-size:calc(0.75 * var(--widget-height)); | ||
| --width: 250px; | ||
| --title-height: calc(var(--widget-height) + var(--spacing)); | ||
| --scrollbar-width: 5px; | ||
| --mobile-max-height: 200px; | ||
| --title-height: calc(var(--widget-height) + var(--spacing)); | ||
| } | ||
@@ -1026,3 +1025,3 @@ .lil-gui, .lil-gui * { | ||
| .lil-gui.root { | ||
| width: var(--width); | ||
| width: var(--width, 250px); | ||
| } | ||
@@ -1056,2 +1055,14 @@ .lil-gui.root > .title { | ||
| } | ||
| .lil-gui.mobile { | ||
| --widget-height: 32px; | ||
| --padding: 8px; | ||
| --spacing: 8px; | ||
| --font-size: 15px; | ||
| --folder-indent: 12px; | ||
| --widget-padding: 0 0 0 5px; | ||
| --scrollbar-width: 7px; | ||
| --slider-input-min-width: 65px; | ||
| --color-input-min-width: 65px; | ||
| width: 100%; | ||
| } | ||
| .lil-gui.autoPlace { | ||
@@ -1064,21 +1075,10 @@ position: fixed; | ||
| .lil-gui.autoPlace > .children { | ||
| max-height: calc(var(--window-height) - var(--title-height)); | ||
| max-height: calc(var(--max-height) - var(--title-height)); | ||
| } | ||
| .lil-gui.autoPlace.mobile { | ||
| --widget-height: 32px; | ||
| --padding: 8px; | ||
| --spacing: 8px; | ||
| --font-size: 16px; | ||
| --folder-indent: 12px; | ||
| --widget-padding: 0 0 0 5px; | ||
| --scrollbar-width: 7px; | ||
| top: auto; | ||
| right: auto; | ||
| top: auto; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| } | ||
| .lil-gui.autoPlace.mobile > .children { | ||
| max-height: calc(var(--mobile-max-height) - var(--title-height)); | ||
| } | ||
@@ -1357,4 +1357,4 @@ .lil-gui .controller { | ||
| * | ||
| * @param {string} [options.title=Controls] | ||
| * Name to display in the title bar. | ||
| * @param {string|false} [options.title=Controls] | ||
| * Name to display in the title bar. Pass `false` to hide the title bar. | ||
| * | ||
@@ -1461,17 +1461,24 @@ * @param {number} [options.width] todoc | ||
| // Allows you to change the height on mobile by dragging the title | ||
| this._initTitleDrag(); | ||
| } | ||
| this.mobileMaxHeight = mobileMaxHeight; | ||
| this._initMobileMaxHeight(); | ||
| } | ||
| this._onResize = () => { | ||
| this.domElement.style.setProperty( '--window-height', window.innerHeight + 'px' ); | ||
| this.domElement.classList.toggle( 'mobile', window.innerWidth <= mobileBreakpoint ); | ||
| }; | ||
| this._onResize(); | ||
| this._onResize = () => { | ||
| window.addEventListener( 'resize', this._onResize ); | ||
| // Toggles mobile class via JS (as opposed to media query) to make the breakpoint | ||
| // configurable via constructor | ||
| const mobile = window.innerWidth <= mobileBreakpoint; | ||
| this.domElement.classList.toggle( 'mobile', mobile ); | ||
| } | ||
| // Adds a scrollbar to an autoPlace GUI | ||
| this._setMaxHeight( mobile ? mobileMaxHeight : window.innerHeight ); | ||
| }; | ||
| window.addEventListener( 'resize', this._onResize ); | ||
| this._onResize(); | ||
| if ( queryKey && !new RegExp( `\\b${queryKey}\\b` ).test( location.search ) ) { | ||
@@ -1579,12 +1586,9 @@ this.domElement.style.display = 'none'; | ||
| /** | ||
| * Returns an object mapping controller names to values. | ||
| * Resets all controllers. | ||
| * @param {boolean} recursive | ||
| * @returns {object} | ||
| * @returns {this} | ||
| */ | ||
| export( recursive = true ) { | ||
| const obj = {}; | ||
| this.getControllers( recursive ).forEach( c => { | ||
| obj[ c._name ] = c.export(); | ||
| } ); | ||
| return obj; | ||
| reset( recursive = true ) { | ||
| this.getControllers( recursive ).forEach( c => c.reset() ); | ||
| return this; | ||
| } | ||
@@ -1608,27 +1612,15 @@ | ||
| /** | ||
| * Resets all controllers. | ||
| * Returns an object mapping controller names to values. | ||
| * @param {boolean} recursive | ||
| * @returns {this} | ||
| * @returns {object} | ||
| */ | ||
| reset( recursive = true ) { | ||
| this.getControllers( recursive ).forEach( c => c.reset() ); | ||
| return this; | ||
| export( recursive = true ) { | ||
| const obj = {}; | ||
| this.getControllers( recursive ).forEach( c => { | ||
| obj[ c._name ] = c.export(); | ||
| } ); | ||
| return obj; | ||
| } | ||
| /** | ||
| * todoc | ||
| * @param {string} title | ||
| * @returns {this} | ||
| */ | ||
| title( title ) { | ||
| /** | ||
| * todoc | ||
| * @type {string} | ||
| */ | ||
| this._title = title; | ||
| this.$title.innerHTML = title; | ||
| return this; | ||
| } | ||
| /** | ||
| * Opens a GUI or folder. GUI and folders are open by default. | ||
@@ -1660,3 +1652,23 @@ * @param {boolean} open Pass false to close | ||
| * todoc | ||
| * @param {string|false} title | ||
| * @returns {this} | ||
| */ | ||
| title( title ) { | ||
| /** | ||
| * todoc | ||
| * @type {string|false} | ||
| */ | ||
| this._title = title; | ||
| if ( title === false ) { | ||
| this.$title.style.display = 'none'; | ||
| } else { | ||
| this.$title.style.display = ''; | ||
| this.$title.innerHTML = title; | ||
| } | ||
| return this; | ||
| } | ||
| /** | ||
| * todoc | ||
| */ | ||
| destroy() { | ||
@@ -1680,3 +1692,3 @@ | ||
| _initMobileMaxHeight() { | ||
| _initTitleDrag() { | ||
@@ -1686,6 +1698,13 @@ let prevClientY; | ||
| const onTouchStart = e => { | ||
| if ( e.touches.length > 1 ) return; | ||
| const resize = this.domElement.classList.contains( 'mobile' ) && | ||
| !this.domElement.classList.contains( 'closed' ); | ||
| if ( !resize || e.touches.length > 1 ) return; | ||
| prevClientY = e.touches[ 0 ].clientY; | ||
| window.addEventListener( 'touchmove', onTouchMove, { passive: false } ); | ||
| window.addEventListener( 'touchend', onTouchEnd ); | ||
| }; | ||
@@ -1697,3 +1716,3 @@ | ||
| prevClientY = e.touches[ 0 ].clientY; | ||
| this.mobileMaxHeight -= deltaY; | ||
| this._setMaxHeight( this._maxHeight - deltaY ); | ||
| }; | ||
@@ -1710,11 +1729,7 @@ | ||
| get mobileMaxHeight() { | ||
| return this._mobileMaxHeight; | ||
| _setMaxHeight( v ) { | ||
| this._maxHeight = Math.min( v, window.innerHeight ); | ||
| this.domElement.style.setProperty( '--max-height', v + 'px' ); | ||
| } | ||
| set mobileMaxHeight( v ) { | ||
| this._mobileMaxHeight = v; | ||
| this.domElement.style.setProperty( '--mobile-max-height', v + 'px' ); | ||
| } | ||
| } | ||
@@ -1721,0 +1736,0 @@ |
| /** | ||
| * lil-gui | ||
| * @version 0.8.11 | ||
| * @version 0.8.14 | ||
| * @author George Michael Brower | ||
| * @license MIT | ||
| */ | ||
| class Controller{constructor(t,e,i,n,s="div"){this.parent=t,this.object=e,this.property=i,this._disabled=!1,this.initialValue=this.getValue(),this.domElement=document.createElement(s),this.domElement.classList.add("controller"),this.domElement.classList.add(n),this.$name=document.createElement("div"),this.$name.classList.add("name"),this.$widget=document.createElement("div"),this.$widget.classList.add("widget"),this.domElement.appendChild(this.$name),this.domElement.appendChild(this.$widget),this.parent.children.push(this),this.parent.$children.appendChild(this.domElement),this._listenCallback=this._listenCallback.bind(this),this.name(i)}name(t){return this._name=t,this.$name.innerHTML=t,this}onChange(t){return this._onChange=t,this}onFinishChange(t){return this.onChange(t)}setValue(t){return this.object[this.property]=t,this._callOnChange(),this.updateDisplay(),this}_callOnChange(){void 0!==this._onChange&&this._onChange.call(this,this.getValue())}getValue(){return this.object[this.property]}reset(){return this.setValue(this.initialValue),this}enable(t=!0){return this._disabled=!t,this.domElement.classList.toggle("disabled",this._disabled),this}disable(t=!0){return this._disabled=t,this.domElement.classList.toggle("disabled",this._disabled),this}destroy(){this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.$children.removeChild(this.domElement)}options(t){const e=this.parent.add(this.object,this.property,t);return e.name(this._name),this.destroy(),e}min(t){return this}max(t){return this}step(t){return this}updateDisplay(){return this}export(){return this.getValue()}import(t){return this.setValue(t),this}listen(t=!0){return this._listening=t,void 0!==this._listenCallbackID&&(cancelAnimationFrame(this._listenCallbackID),this._listenCallbackID=void 0),this._listening&&this._listenCallback(),this}_listenCallback(){this._listenCallbackID=requestAnimationFrame(this._listenCallback),this.updateDisplay()}}class BooleanController extends Controller{constructor(t,e,i){super(t,e,i,"boolean","label"),this.$input=document.createElement("input"),this.$input.setAttribute("type","checkbox"),this.$widget.appendChild(this.$input),this.$input.addEventListener("change",()=>{this.setValue(this.$input.checked)}),this.updateDisplay()}updateDisplay(){return this.$input.checked=this.getValue(),this}}function normalizeColorString(t){let e,i;return(e=t.match(/(#|0x)?([a-f0-9]{6})/i))?i=e[2]:(e=t.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/))?i=parseInt(e[1]).toString(16).padStart(2,0)+parseInt(e[2]).toString(16).padStart(2,0)+parseInt(e[3]).toString(16).padStart(2,0):(e=t.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i))&&(i=e[1]+e[1]+e[2]+e[2]+e[3]+e[3]),!!i&&"#"+i}const STRING={isPrimitive:!0,match:t=>"string"==typeof t,fromHexString:normalizeColorString,toHexString:normalizeColorString},INT={isPrimitive:!0,match:t=>"number"==typeof t,fromHexString:t=>parseInt(t.substring(1),16),toHexString:t=>"#"+t.toString(16).padStart(6,0)},ARRAY={isPrimitive:!1,match:Array.isArray,fromHexString(t,e,i=1){const n=INT.fromHexString(t);e[0]=(n>>16&255)/255*i,e[1]=(n>>8&255)/255*i,e[2]=(255&n)/255*i},toHexString:([t,e,i],n=1)=>INT.toHexString(t*(n=255/n)<<16^e*n<<8^i*n<<0)},OBJECT={isPrimitive:!1,match:t=>Object(t)===t,fromHexString(t,e,i=1){const n=INT.fromHexString(t);e.r=(n>>16&255)/255*i,e.g=(n>>8&255)/255*i,e.b=(255&n)/255*i},toHexString:({r:t,g:e,b:i},n=1)=>INT.toHexString(t*(n=255/n)<<16^e*n<<8^i*n<<0)},FORMATS=[STRING,INT,ARRAY,OBJECT];function getColorFormat(t){return FORMATS.find(e=>e.match(t))}class ColorController extends Controller{constructor(t,e,i,n){super(t,e,i,"color"),this.$input=document.createElement("input"),this.$input.setAttribute("type","color"),this.$input.setAttribute("tabindex",-1),this.$text=document.createElement("input"),this.$text.setAttribute("type","text"),this.$text.setAttribute("spellcheck","false"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this.$display.appendChild(this.$input),this.$widget.appendChild(this.$display),this.$widget.appendChild(this.$text),this._format=getColorFormat(this.initialValue),this._rgbScale=n,this._initialValueHexString=this.export(),this._textFocused=!1,this.$input.addEventListener("change",()=>{this._setValueFromHexString(this.$input.value)}),this.$input.addEventListener("focus",()=>{this.$display.classList.add("focus")}),this.$input.addEventListener("blur",()=>{this.$display.classList.remove("focus")}),this.$text.addEventListener("input",()=>{const t=normalizeColorString(this.$text.value);t&&this._setValueFromHexString(t)}),this.$text.addEventListener("focus",()=>{this._textFocused=!0,this.$text.select()}),this.$text.addEventListener("blur",()=>{this._textFocused=!1,this.updateDisplay()}),this.updateDisplay()}reset(){return this._setValueFromHexString(this._initialValueHexString),this}_setValueFromHexString(t){if(this._format.isPrimitive){const e=this._format.fromHexString(t);this.setValue(e)}else this._format.fromHexString(t,this.getValue(),this._rgbScale),this._callOnChange(),this.updateDisplay()}export(){return this._format.toHexString(this.getValue(),this._rgbScale)}import(t){return this._setValueFromHexString(t),this}updateDisplay(){this.$input.value=this._format.toHexString(this.getValue(),this._rgbScale),this._textFocused||(this.$text.value=this.$input.value.substring(1)),this.$display.style.backgroundColor=this.$input.value}}class FunctionController extends Controller{constructor(t,e,i){super(t,e,i,"function","button"),this.domElement.addEventListener("click",()=>{this.getValue().call(this.object)})}}class NumberController extends Controller{constructor(t,e,i,n,s,r){super(t,e,i,"number"),this._initInput(),this.min(n),this.max(s);const l=void 0!==r;this.step(l?r:this._getImplicitStep(),l),this.updateDisplay()}min(t){return this._min=t,this._onUpdateMinMax(),this}max(t){return this._max=t,this._onUpdateMinMax(),this}step(t,e=!0){return this._step=t,this._stepExplicit=e,this}updateDisplay(){const t=this.getValue();if(this._hasSlider){const e=(t-this._min)/(this._max-this._min);this.$fill.style.setProperty("width",100*e+"%")}return this._inputFocused||(this.$input.value=t),this}_initInput(){this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.setAttribute("inputmode","numeric"),this.$widget.appendChild(this.$input);const t=t=>{const e=parseFloat(this.$input.value);isNaN(e)||(this._snapClampSetValue(e+t),this.$input.value=this.getValue())};this.$input.addEventListener("focus",()=>{this._inputFocused=!0}),this.$input.addEventListener("input",()=>{const t=parseFloat(this.$input.value);isNaN(t)||this.setValue(this._clamp(t))}),this.$input.addEventListener("blur",()=>{this._inputFocused=!1,this.updateDisplay()}),this.$input.addEventListener("keydown",e=>{13===e.keyCode&&this.$input.blur(),38===e.keyCode&&(e.preventDefault(),t(this._step*this._arrowKeyMultiplier(e))),40===e.keyCode&&(e.preventDefault(),t(-1*this._step*this._arrowKeyMultiplier(e)))}),this.$input.addEventListener("wheel",e=>{this._inputFocused&&(e.preventDefault(),t(this._normalizeMouseWheel(e)*this._step))},{passive:!1})}_initSlider(){this._hasSlider=!0,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),this.$widget.insertBefore(this.$slider,this.$input),this.domElement.classList.add("hasSlider");const t=t=>{const e=this.$slider.getBoundingClientRect();let i=((t,e,i,n,s)=>(t-e)/(i-e)*(s-n)+n)(t,e.left,e.right,this._min,this._max);this._snapClampSetValue(i)},e=e=>{t(e.clientX)},i=()=>{this.$slider.classList.remove("active"),window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",i)};this.$slider.addEventListener("mousedown",n=>{t(n.clientX),this.$slider.classList.add("active"),window.addEventListener("mousemove",e),window.addEventListener("mouseup",i)});let n,s,r=!1;const l=e=>{if(r){const i=e.touches[0].clientX-n,a=e.touches[0].clientY-s;Math.abs(i)>Math.abs(a)?(t(e.touches[0].clientX),this.$slider.classList.add("active"),r=!1):(window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o))}else e.preventDefault(),t(e.touches[0].clientX)},o=()=>{this.$slider.classList.remove("active"),window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o)};this.$slider.addEventListener("touchstart",e=>{e.touches.length>1||(this._hasScrollBar?(n=e.touches[0].clientX,s=e.touches[0].clientY,r=!0):(t(e.touches[0].clientX),this.$slider.classList.add("active"),r=!1),window.addEventListener("touchmove",l,{passive:!1}),window.addEventListener("touchend",o))});this.$slider.addEventListener("wheel",t=>{if(this._hasScrollBar)return;t.preventDefault();const e=this._normalizeMouseWheel(t)*this._step;this._snapClampSetValue(this.getValue()+e)},{passive:!1})}_getImplicitStep(){return this._hasMin&&this._hasMax?(this._max-this._min)/1e3:.1}_onUpdateMinMax(){!this._hasSlider&&this._hasMin&&this._hasMax&&(this._stepExplicit||this.step(this._getImplicitStep(),!1),this._initSlider(),this.updateDisplay())}_normalizeMouseWheel(t){let{deltaX:e,deltaY:i}=t;return Math.floor(t.deltaY)!==t.deltaY&&t.wheelDelta&&(e=0,i=-t.wheelDelta/120),e+-i}_arrowKeyMultiplier(t){return this._stepExplicit?t.shiftKey?10:1:t.shiftKey?100:t.altKey?1:10}_snap(t){const e=Math.round(t/this._step)*this._step;return parseFloat(e.toPrecision(15))}_clamp(t){const e=this._hasMin?this._min:-1/0,i=this._hasMax?this._max:1/0;return Math.max(e,Math.min(i,t))}_snapClampSetValue(t){this.setValue(this._clamp(this._snap(t)))}get _hasScrollBar(){const t=this.parent.root.$children;return t.scrollHeight>t.clientHeight}get _hasMin(){return void 0!==this._min}get _hasMax(){return void 0!==this._max}}class OptionController extends Controller{constructor(t,e,i,n){super(t,e,i,"option"),this.$select=document.createElement("select"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this._values=Array.isArray(n)?n:Object.values(n),this._names=Array.isArray(n)?n:Object.keys(n),this._names.forEach(t=>{const e=document.createElement("option");e.innerHTML=t,this.$select.appendChild(e)}),this.$select.addEventListener("change",()=>{this.setValue(this._values[this.$select.selectedIndex])}),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.updateDisplay()}updateDisplay(){const t=this.getValue(),e=this._values.indexOf(t);return this.$select.selectedIndex=e,this.$display.innerHTML=-1===e?t:this._names[e],this}}class StringController extends Controller{constructor(t,e,i){super(t,e,i,"string"),this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.addEventListener("input",()=>{this.setValue(this.$input.value)}),this.$input.addEventListener("keydown",t=>{13===t.keyCode&&this.$input.blur()}),this.$widget.appendChild(this.$input),this.updateDisplay()}updateDisplay(){return this.$input.value=this.getValue(),this}}const stylesheet='.lil-gui{font-family:var(--font-family);font-size:var(--font-size);line-height:1;font-weight:normal;font-style:normal;text-align:left;background-color:var(--background-color);color:var(--text-color);user-select:none;-webkit-user-select:none;--background-color:#1f1f1f;--text-color:#ebebeb;--title-background-color:#111;--widget-color:#424242;--highlight-color:#525151;--number-color:#2cc9ff;--string-color:#a2db3c;--font-size:11px;--font-family:-apple-system,BlinkMacSystemFont,"Lucida Grande","Segoe UI",Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-mono:Menlo,Monaco,Consolas,"Droid Sans Mono",monospace,"Droid Sans Fallback";--padding:4px;--spacing:4px;--widget-height:20px;--name-width:45%;--slider-input-width:27%;--color-input-width:27%;--slider-input-min-width:45px;--color-input-min-width:45px;--folder-indent:7px;--widget-padding:0 0 0 3px;--widget-border-radius:2px;--checkbox-size:calc(0.75 * var(--widget-height));--width: 250px;--scrollbar-width: 5px;--mobile-max-height: 200px;--title-height: calc(var(--widget-height) + var(--spacing))}.lil-gui,.lil-gui *{box-sizing:border-box;margin:0}.lil-gui.root{width:var(--width)}.lil-gui.root>.title{background:var(--title-background-color)}.lil-gui .lil-gui{--background-color:inherit;--text-color:inherit;--title-background-color:inherit;--widget-color:inherit;--highlight-color:inherit;--number-color:inherit;--string-color:inherit;--font-size:inherit;--font-family:inherit;--font-family-mono:inherit;--padding:inherit;--spacing:inherit;--widget-height:inherit;--name-width:inherit;--slider-input-width:inherit;--color-input-width:inherit;--slider-input-min-width:inherit;--color-input-min-width:inherit;--folder-indent:inherit;--widget-padding:inherit;--widget-border-radius:inherit;--checkbox-size:inherit}.lil-gui.autoPlace{position:fixed;top:0;right:15px;z-index:1001}.lil-gui.autoPlace>.children{max-height:calc(var(--window-height) - var(--title-height))}.lil-gui.autoPlace.mobile{--widget-height: 32px;--padding: 8px;--spacing: 8px;--font-size: 16px;--folder-indent: 12px;--widget-padding: 0 0 0 5px;--scrollbar-width: 7px;right:auto;top:auto;bottom:0;left:0;width:100%}.lil-gui.autoPlace.mobile>.children{max-height:calc(var(--mobile-max-height) - var(--title-height))}.lil-gui .controller{display:flex;align-items:center;padding:0 var(--padding);margin:var(--spacing) 0}.lil-gui .controller.disabled{opacity:.5;pointer-events:none}.lil-gui .controller .name{min-width:var(--name-width);flex-shrink:0;white-space:pre;padding-right:var(--spacing)}.lil-gui .controller .widget{position:relative;display:flex;align-items:center;width:100%;min-height:var(--widget-height)}.lil-gui .controller.number input{color:var(--number-color)}.lil-gui .controller.number.hasSlider input{margin-left:var(--spacing);width:var(--slider-input-width);min-width:var(--slider-input-min-width);flex-shrink:0}.lil-gui .controller.number .slider{width:100%;height:var(--widget-height);background-color:var(--widget-color);border-radius:var(--widget-border-radius);overflow:hidden}.lil-gui .controller.number .slider.active{background-color:var(--highlight-color)}.lil-gui .controller.number .slider.active .fill{opacity:.95}.lil-gui .controller.number .fill{height:100%;border-right:2px solid var(--number-color)}.lil-gui .controller.string input{color:var(--string-color)}.lil-gui .controller.color .display{width:100%;height:var(--widget-height);border-radius:var(--widget-border-radius)}.lil-gui .controller.color input[type=color]{opacity:0;width:100%;height:100%;cursor:pointer}.lil-gui .controller.color input[type=text]{margin-left:var(--spacing);font-family:var(--font-family-mono);min-width:var(--color-input-min-width);width:var(--color-input-width);flex-shrink:0}.lil-gui .controller.option select{opacity:0;position:absolute;width:100%;max-width:100%}.lil-gui .controller.option .display{pointer-events:none;border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height);position:relative;max-width:100%;overflow:hidden;word-break:break-all;padding-left:.55em;padding-right:1.75em}.lil-gui .controller.option .display:after{font-family:"lil-gui";content:"↕";position:absolute;top:0;right:0;bottom:0;padding-right:.375em}.lil-gui .controller.function{background:none}@media(hover: hover){.lil-gui .controller.function:hover .name{background:var(--highlight-color)}}.lil-gui .controller.function:active .name{background:var(--text-color);color:var(--background-color)}.lil-gui .controller.function .name{display:block;padding:0;text-align:center;width:100%;background:var(--widget-color);border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height)}.lil-gui .controller.function .widget{display:none}.lil-gui .title{height:var(--title-height);font-weight:600;padding:0 var(--padding);line-height:calc(var(--title-height) - 2px);-webkit-tap-highlight-color:transparent;cursor:pointer}.lil-gui .title:before{font-family:"lil-gui";content:"▾"}.lil-gui.closed .children{display:none}.lil-gui.closed .title:before{content:"▸"}.lil-gui>.children{overflow:auto}.lil-gui>.children::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width);background:var(--background-color)}.lil-gui>.children::-webkit-scrollbar-corner{display:none}.lil-gui>.children::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-width);background:var(--highlight-color)}.lil-gui .children:empty:before{content:"Empty";padding:0 var(--padding);margin:var(--spacing) 0;display:block;height:var(--widget-height);font-style:italic;line-height:var(--widget-height);opacity:.5}.lil-gui .lil-gui:not(.closed)>.title{border-bottom:1px solid var(--widget-color)}.lil-gui:not(.closed)+.controller{border-top:1px solid var(--widget-color);margin-top:0;padding-top:var(--spacing)}.lil-gui .lil-gui .controller{border:none}.lil-gui .lil-gui .lil-gui>.title{border:none}.lil-gui .lil-gui .lil-gui>.children{border:none;margin-left:var(--folder-indent);border-left:2px solid var(--widget-color)}.lil-gui input{border:0;outline:none;font-family:var(--font-family);font-size:var(--font-size);border-radius:var(--widget-border-radius);height:var(--widget-height);background:var(--widget-color);color:var(--text-color);width:100%}.lil-gui input[type=text]{padding:var(--widget-padding)}.lil-gui input:focus,.lil-gui input:active{background:var(--highlight-color)}.lil-gui input[type=checkbox]{appearance:none;-webkit-appearance:none;height:var(--checkbox-size);width:var(--checkbox-size);border-radius:var(--widget-border-radius);text-align:center}.lil-gui input[type=checkbox]:checked:before{font-family:"lil-gui";content:"✓";font-size:var(--checkbox-size);line-height:var(--checkbox-size)}.lil-gui button{-webkit-tap-highlight-color:transparent;outline:none;cursor:pointer;border:0;font-family:var(--font-family);font-size:var(--font-size);color:var(--text-color);text-align:left;width:100%;text-transform:none}.lil-gui .display{background:var(--widget-color)}.lil-gui .display.focus,.lil-gui .display.active{background:var(--highlight-color)}@font-face{font-family:"lil-gui";src:url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAABqAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPQAAAFZr2333Y21hcAAAAYQAAABuAAABssJQk9tnbHlmAAAB9AAAAF8AAACEIZ5WI2hlYWQAAAJUAAAAJwAAADZfcj23aGhlYQAAAnwAAAAYAAAAJAC5AGpobXR4AAAClAAAAA4AAAAUAZAAAGxvY2EAAAKkAAAADAAAAAwARABkbWF4cAAAArAAAAAeAAAAIAERABJuYW1lAAAC0AAAASIAAAIK9SUU/XBvc3QAAAP0AAAAQgAAAFiCDrX0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQIYJzAwMrAwGDP4AYk+aC0AQMLgyQDAxMDKzMDVhCQ5prC4KA4VV2YIQXI5QSTDAyMIAIA82gFuAAAAHic7ZGxDYAwDAQvISCE6JiAIkrDEBmIil3YJVVWAztOwRC8dZH9ily8gREYhEMI4C4cqlNc1/yBpfmBLPPCjMfvdyyxpu154Nt3Oflnpb2XHbp74tfa3tynoOkZmnYshiRGrIZeJ20G4QWoQBFzAAB4nGNgYgABH4YwBiYGVgYGe0ZxUXZ1SRCwkZQUkZQEyTKC1dgyuIJUmLOrm6ub2yqyS0mxq4BJqLw7gyVYXt1c3FxcDSwjiCwfwuCLkNcU5+RT4pQU4+RT5gQAe+sKMgB4nGNgZGBgAOKTAv9nx/PbfGXgZkhhwAZCGMKAJAcDE4gDAMWSBTgAeJxjYGRgYEhhYICTIQyMDKiAFQAceQEkeJxjYACCFFQMAA4kAZEAAAAAAAAAEgAiADIAQnicY2BkYGBgZWBjYGIAARDJBYQMDP/BfAYACZUBJAAAeJxd0E1Kw0AcBfCXfmIDRRBdicxKF9L0Y9kDtPsuAi7TdJKmTDNhMi3UE3gCT+ApPIB4LF/Df2NmSPKbNy8DCYBb/CDAdQQYNvfr6NBDcZcai3v0vbiPEI/iAfMX8QiviMQh7vDGE4LeDZMxjLhDv4u79Ie4R3+K+3jAl3jA/Fs8QoxfcYjn4MkUZpKfio3OTyZxspJHrF1d2FLNo5kka11ql3i9U9uLqs/5wvtMZc4e1cqWXhtjVeXsQac+2ntfLafTTPIotUd+QcFrghwnagPdyCCBa+39X8VsOtSURQmFOf/RrNVZs1M2vQSezx17W1x4r3FmZ8HUI+M6Y8fiSK2a865tw2mZVM3egUnKPMK+eavCElPOrNWP2OJJf3XUWN4AAHicY2BigABGBuyAlZGJkZmRhZGVkY2BI6UovyAlvzyPNy0/JyW1SDc5J784NYUbyssvSM1jTc5ITc5mYAAAYLAPMAAA") format("woff")}';function _injectStyles(t){const e=document.createElement("style");e.innerHTML=t;const i=document.querySelector("head link[rel=stylesheet], head style");i?document.head.insertBefore(e,i):document.head.appendChild(e)}let stylesInjected=!1;class GUI{constructor({parent:t,autoPlace:e=void 0===t,mobileBreakpoint:i=500,mobileMaxHeight:n=200,container:s,injectStyles:r=!0,title:l="Controls",width:o,queryKey:a}={}){this.parent=t,this.root=t?t.root:this,this.children=[],this._closed=!1,this.domElement=document.createElement("div"),this.domElement.classList.add("lil-gui"),this.$title=document.createElement("div"),this.$title.classList.add("title"),this.$title.addEventListener("click",()=>{this.open(this._closed)}),this.$children=document.createElement("div"),this.$children.classList.add("children"),this.domElement.appendChild(this.$title),this.domElement.appendChild(this.$children),this.parent?(this.parent.children.push(this),this.parent.$children.appendChild(this.domElement)):(this.domElement.classList.add("root"),o&&this.domElement.style.setProperty("--width",o+"px"),!stylesInjected&&r&&(_injectStyles(stylesheet),stylesInjected=!0),s?s.appendChild(this.domElement):e&&(this.domElement.classList.add("autoPlace"),document.body.appendChild(this.domElement)),this.mobileMaxHeight=n,this._initMobileMaxHeight(),this._onResize=()=>{this.domElement.style.setProperty("--window-height",window.innerHeight+"px"),this.domElement.classList.toggle("mobile",window.innerWidth<=i)},this._onResize(),window.addEventListener("resize",this._onResize)),a&&!new RegExp(`\\b${a}\\b`).test(location.search)&&(this.domElement.style.display="none"),this.title(l)}add(t,e,i,n,s){if(Object(i)===i)return new OptionController(this,t,e,i);const r=t[e];switch(typeof r){case"number":return new NumberController(this,t,e,i,n,s);case"boolean":return new BooleanController(this,t,e);case"string":return new StringController(this,t,e);case"function":return new FunctionController(this,t,e)}console.error(`Failed to add controller for "${e}"`,r,t)}addColor(t,e,i=1){return new ColorController(this,t,e,i)}addFolder(t){return new GUI({parent:this,title:t})}getControllers(t=!0){let e=this.children.filter(t=>t instanceof Controller);return t?(this.getFolders(!0).forEach(t=>{e=e.concat(t.getControllers(!1))}),e):e}getFolders(t=!0){const e=this.children.filter(t=>t instanceof GUI);if(!t)return e;let i=Array.from(e);return e.forEach(t=>{i=i.concat(t.getFolders(!0))}),i}export(t=!0){const e={};return this.getControllers(t).forEach(t=>{e[t._name]=t.export()}),e}import(t,e=!0){return this.getControllers(e).forEach(e=>{e._name in t&&e.import(t[e._name])}),this}reset(t=!0){return this.getControllers(t).forEach(t=>t.reset()),this}title(t){return this._title=t,this.$title.innerHTML=t,this}open(t=!0){return this._closed=!t,this.domElement.classList.toggle("closed",this._closed),this}close(){return this._closed=!0,this.domElement.classList.add("closed"),this}destroy(){this.parent&&this.parent.children.splice(this.parent.children.indexOf(this),1),this.domElement.parentElement&&this.domElement.parentElement.removeChild(this.domElement),Array.from(this.children).forEach(t=>t.destroy()),this._onResize&&window.removeEventListener("resize",this._onResize)}_initMobileMaxHeight(){let t;const e=e=>{e.preventDefault();const i=e.touches[0].clientY-t;t=e.touches[0].clientY,this.mobileMaxHeight-=i},i=()=>{window.removeEventListener("touchmove",e),window.removeEventListener("touchend",i)};this.$title.addEventListener("touchstart",n=>{n.touches.length>1||(t=n.touches[0].clientY,window.addEventListener("touchmove",e,{passive:!1}),window.addEventListener("touchend",i))})}get mobileMaxHeight(){return this._mobileMaxHeight}set mobileMaxHeight(t){this._mobileMaxHeight=t,this.domElement.style.setProperty("--mobile-max-height",t+"px")}}export default GUI;export{BooleanController,ColorController,Controller,FunctionController,GUI,NumberController,OptionController,StringController}; | ||
| class t{constructor(t,i,e,s,n="div"){this.parent=t,this.object=i,this.property=e,this._disabled=!1,this.initialValue=this.getValue(),this.domElement=document.createElement(n),this.domElement.classList.add("controller"),this.domElement.classList.add(s),this.$name=document.createElement("div"),this.$name.classList.add("name"),this.$widget=document.createElement("div"),this.$widget.classList.add("widget"),this.domElement.appendChild(this.$name),this.domElement.appendChild(this.$widget),this.parent.children.push(this),this.parent.$children.appendChild(this.domElement),this._listenCallback=this._listenCallback.bind(this),this.name(e)}name(t){return this._name=t,this.$name.innerHTML=t,this}onChange(t){return this._onChange=t,this}onFinishChange(t){return this.onChange(t)}reset(){return this.setValue(this.initialValue),this}enable(t=!0){return this._disabled=!t,this.domElement.classList.toggle("disabled",this._disabled),this}disable(t=!0){return this._disabled=t,this.domElement.classList.toggle("disabled",this._disabled),this}options(t){const i=this.parent.add(this.object,this.property,t);return i.name(this._name),this.destroy(),i}min(t){return this}max(t){return this}step(t){return this}listen(t=!0){return this._listening=t,void 0!==this._listenCallbackID&&(cancelAnimationFrame(this._listenCallbackID),this._listenCallbackID=void 0),this._listening&&this._listenCallback(),this}_listenCallback(){this._listenCallbackID=requestAnimationFrame(this._listenCallback),this.updateDisplay()}getValue(){return this.object[this.property]}setValue(t){return this.object[this.property]=t,this._callOnChange(),this.updateDisplay(),this}_callOnChange(){void 0!==this._onChange&&this._onChange.call(this,this.getValue())}updateDisplay(){return this}import(t){return this.setValue(t),this}export(){return this.getValue()}destroy(){this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.$children.removeChild(this.domElement)}}class i extends t{constructor(t,i,e){super(t,i,e,"boolean","label"),this.$input=document.createElement("input"),this.$input.setAttribute("type","checkbox"),this.$widget.appendChild(this.$input),this.$input.addEventListener("change",()=>{this.setValue(this.$input.checked)}),this.updateDisplay()}updateDisplay(){return this.$input.checked=this.getValue(),this}}function e(t){let i,e;return(i=t.match(/(#|0x)?([a-f0-9]{6})/i))?e=i[2]:(i=t.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/))?e=parseInt(i[1]).toString(16).padStart(2,0)+parseInt(i[2]).toString(16).padStart(2,0)+parseInt(i[3]).toString(16).padStart(2,0):(i=t.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i))&&(e=i[1]+i[1]+i[2]+i[2]+i[3]+i[3]),!!e&&"#"+e}const s={isPrimitive:!0,match:t=>"string"==typeof t,fromHexString:e,toHexString:e},n={isPrimitive:!0,match:t=>"number"==typeof t,fromHexString:t=>parseInt(t.substring(1),16),toHexString:t=>"#"+t.toString(16).padStart(6,0)},r={isPrimitive:!1,match:Array.isArray,fromHexString(t,i,e=1){const s=n.fromHexString(t);i[0]=(s>>16&255)/255*e,i[1]=(s>>8&255)/255*e,i[2]=(255&s)/255*e},toHexString:([t,i,e],s=1)=>n.toHexString(t*(s=255/s)<<16^i*s<<8^e*s<<0)},l={isPrimitive:!1,match:t=>Object(t)===t,fromHexString(t,i,e=1){const s=n.fromHexString(t);i.r=(s>>16&255)/255*e,i.g=(s>>8&255)/255*e,i.b=(255&s)/255*e},toHexString:({r:t,g:i,b:e},s=1)=>n.toHexString(t*(s=255/s)<<16^i*s<<8^e*s<<0)},o=[s,n,r,l];class a extends t{constructor(t,i,s,n){var r;super(t,i,s,"color"),this.$input=document.createElement("input"),this.$input.setAttribute("type","color"),this.$input.setAttribute("tabindex",-1),this.$text=document.createElement("input"),this.$text.setAttribute("type","text"),this.$text.setAttribute("spellcheck","false"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this.$display.appendChild(this.$input),this.$widget.appendChild(this.$display),this.$widget.appendChild(this.$text),this._format=(r=this.initialValue,o.find(t=>t.match(r))),this._rgbScale=n,this._initialValueHexString=this.export(),this._textFocused=!1,this.$input.addEventListener("change",()=>{this._setValueFromHexString(this.$input.value)}),this.$input.addEventListener("focus",()=>{this.$display.classList.add("focus")}),this.$input.addEventListener("blur",()=>{this.$display.classList.remove("focus")}),this.$text.addEventListener("input",()=>{const t=e(this.$text.value);t&&this._setValueFromHexString(t)}),this.$text.addEventListener("focus",()=>{this._textFocused=!0,this.$text.select()}),this.$text.addEventListener("blur",()=>{this._textFocused=!1,this.updateDisplay()}),this.updateDisplay()}reset(){return this._setValueFromHexString(this._initialValueHexString),this}_setValueFromHexString(t){if(this._format.isPrimitive){const i=this._format.fromHexString(t);this.setValue(i)}else this._format.fromHexString(t,this.getValue(),this._rgbScale),this._callOnChange(),this.updateDisplay()}export(){return this._format.toHexString(this.getValue(),this._rgbScale)}import(t){return this._setValueFromHexString(t),this}updateDisplay(){this.$input.value=this._format.toHexString(this.getValue(),this._rgbScale),this._textFocused||(this.$text.value=this.$input.value.substring(1)),this.$display.style.backgroundColor=this.$input.value}}class h extends t{constructor(t,i,e){super(t,i,e,"function","button"),this.domElement.addEventListener("click",()=>{this.getValue().call(this.object)})}}class d extends t{constructor(t,i,e,s,n,r){super(t,i,e,"number"),this._initInput(),this.min(s),this.max(n);const l=void 0!==r;this.step(l?r:this._getImplicitStep(),l),this.updateDisplay()}min(t){return this._min=t,this._onUpdateMinMax(),this}max(t){return this._max=t,this._onUpdateMinMax(),this}step(t,i=!0){return this._step=t,this._stepExplicit=i,this}updateDisplay(){const t=this.getValue();if(this._hasSlider){const i=(t-this._min)/(this._max-this._min);this.$fill.style.setProperty("width",100*i+"%")}return this._inputFocused||(this.$input.value=t),this}_initInput(){this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.setAttribute("inputmode","numeric"),this.$widget.appendChild(this.$input);const t=t=>{const i=parseFloat(this.$input.value);isNaN(i)||(this._snapClampSetValue(i+t),this.$input.value=this.getValue())};this.$input.addEventListener("focus",()=>{this._inputFocused=!0}),this.$input.addEventListener("input",()=>{const t=parseFloat(this.$input.value);isNaN(t)||this.setValue(this._clamp(t))}),this.$input.addEventListener("blur",()=>{this._inputFocused=!1,this.updateDisplay()}),this.$input.addEventListener("keydown",i=>{13===i.keyCode&&this.$input.blur(),38===i.keyCode&&(i.preventDefault(),t(this._step*this._arrowKeyMultiplier(i))),40===i.keyCode&&(i.preventDefault(),t(-1*this._step*this._arrowKeyMultiplier(i)))}),this.$input.addEventListener("wheel",i=>{this._inputFocused&&(i.preventDefault(),t(this._normalizeMouseWheel(i)*this._step))},{passive:!1})}_initSlider(){this._hasSlider=!0,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),this.$widget.insertBefore(this.$slider,this.$input),this.domElement.classList.add("hasSlider");const t=t=>{const i=this.$slider.getBoundingClientRect();let e=((t,i,e,s,n)=>(t-i)/(e-i)*(n-s)+s)(t,i.left,i.right,this._min,this._max);this._snapClampSetValue(e)},i=i=>{t(i.clientX)},e=()=>{this.$slider.classList.remove("active"),window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",e)};this.$slider.addEventListener("mousedown",s=>{t(s.clientX),this.$slider.classList.add("active"),window.addEventListener("mousemove",i),window.addEventListener("mouseup",e)});let s,n,r=!1;const l=i=>{if(r){const e=i.touches[0].clientX-s,a=i.touches[0].clientY-n;Math.abs(e)>Math.abs(a)?(t(i.touches[0].clientX),this.$slider.classList.add("active"),r=!1):(window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o))}else i.preventDefault(),t(i.touches[0].clientX)},o=()=>{this.$slider.classList.remove("active"),window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o)};this.$slider.addEventListener("touchstart",i=>{i.touches.length>1||(this._hasScrollBar?(s=i.touches[0].clientX,n=i.touches[0].clientY,r=!0):(t(i.touches[0].clientX),this.$slider.classList.add("active"),r=!1),window.addEventListener("touchmove",l,{passive:!1}),window.addEventListener("touchend",o))});this.$slider.addEventListener("wheel",t=>{if(this._hasScrollBar)return;t.preventDefault();const i=this._normalizeMouseWheel(t)*this._step;this._snapClampSetValue(this.getValue()+i)},{passive:!1})}_getImplicitStep(){return this._hasMin&&this._hasMax?(this._max-this._min)/1e3:.1}_onUpdateMinMax(){!this._hasSlider&&this._hasMin&&this._hasMax&&(this._stepExplicit||this.step(this._getImplicitStep(),!1),this._initSlider(),this.updateDisplay())}_normalizeMouseWheel(t){let{deltaX:i,deltaY:e}=t;return Math.floor(t.deltaY)!==t.deltaY&&t.wheelDelta&&(i=0,e=-t.wheelDelta/120),i+-e}_arrowKeyMultiplier(t){return this._stepExplicit?t.shiftKey?10:1:t.shiftKey?100:t.altKey?1:10}_snap(t){const i=Math.round(t/this._step)*this._step;return parseFloat(i.toPrecision(15))}_clamp(t){const i=this._hasMin?this._min:-1/0,e=this._hasMax?this._max:1/0;return Math.max(i,Math.min(e,t))}_snapClampSetValue(t){this.setValue(this._clamp(this._snap(t)))}get _hasScrollBar(){const t=this.parent.root.$children;return t.scrollHeight>t.clientHeight}get _hasMin(){return void 0!==this._min}get _hasMax(){return void 0!==this._max}}class c extends t{constructor(t,i,e,s){super(t,i,e,"option"),this.$select=document.createElement("select"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this._values=Array.isArray(s)?s:Object.values(s),this._names=Array.isArray(s)?s:Object.keys(s),this._names.forEach(t=>{const i=document.createElement("option");i.innerHTML=t,this.$select.appendChild(i)}),this.$select.addEventListener("change",()=>{this.setValue(this._values[this.$select.selectedIndex])}),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.updateDisplay()}updateDisplay(){const t=this.getValue(),i=this._values.indexOf(t);return this.$select.selectedIndex=i,this.$display.innerHTML=-1===i?t:this._names[i],this}}class u extends t{constructor(t,i,e){super(t,i,e,"string"),this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.addEventListener("input",()=>{this.setValue(this.$input.value)}),this.$input.addEventListener("keydown",t=>{13===t.keyCode&&this.$input.blur()}),this.$widget.appendChild(this.$input),this.updateDisplay()}updateDisplay(){return this.$input.value=this.getValue(),this}}const p='.lil-gui{font-family:var(--font-family);font-size:var(--font-size);line-height:1;font-weight:normal;font-style:normal;text-align:left;background-color:var(--background-color);color:var(--text-color);user-select:none;-webkit-user-select:none;--background-color:#1f1f1f;--text-color:#ebebeb;--title-background-color:#111;--widget-color:#424242;--highlight-color:#525151;--number-color:#2cc9ff;--string-color:#a2db3c;--font-size:11px;--font-family:-apple-system,BlinkMacSystemFont,"Lucida Grande","Segoe UI",Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-mono:Menlo,Monaco,Consolas,"Droid Sans Mono",monospace,"Droid Sans Fallback";--padding:4px;--spacing:4px;--widget-height:20px;--name-width:45%;--slider-input-width:27%;--color-input-width:27%;--slider-input-min-width:45px;--color-input-min-width:45px;--folder-indent:7px;--widget-padding:0 0 0 3px;--widget-border-radius:2px;--checkbox-size:calc(0.75 * var(--widget-height));--title-height: calc(var(--widget-height) + var(--spacing));--scrollbar-width: 5px}.lil-gui,.lil-gui *{box-sizing:border-box;margin:0}.lil-gui.root{width:var(--width, 250px)}.lil-gui.root>.title{background:var(--title-background-color)}.lil-gui .lil-gui{--background-color:inherit;--text-color:inherit;--title-background-color:inherit;--widget-color:inherit;--highlight-color:inherit;--number-color:inherit;--string-color:inherit;--font-size:inherit;--font-family:inherit;--font-family-mono:inherit;--padding:inherit;--spacing:inherit;--widget-height:inherit;--name-width:inherit;--slider-input-width:inherit;--color-input-width:inherit;--slider-input-min-width:inherit;--color-input-min-width:inherit;--folder-indent:inherit;--widget-padding:inherit;--widget-border-radius:inherit;--checkbox-size:inherit}.lil-gui.mobile{--widget-height: 32px;--padding: 8px;--spacing: 8px;--font-size: 15px;--folder-indent: 12px;--widget-padding: 0 0 0 5px;--scrollbar-width: 7px;--slider-input-min-width: 65px;--color-input-min-width: 65px;width:100%}.lil-gui.autoPlace{position:fixed;top:0;right:15px;z-index:1001}.lil-gui.autoPlace>.children{max-height:calc(var(--max-height) - var(--title-height))}.lil-gui.autoPlace.mobile{top:auto;right:auto;bottom:0;left:0}.lil-gui .controller{display:flex;align-items:center;padding:0 var(--padding);margin:var(--spacing) 0}.lil-gui .controller.disabled{opacity:.5;pointer-events:none}.lil-gui .controller .name{min-width:var(--name-width);flex-shrink:0;white-space:pre;padding-right:var(--spacing)}.lil-gui .controller .widget{position:relative;display:flex;align-items:center;width:100%;min-height:var(--widget-height)}.lil-gui .controller.number input{color:var(--number-color)}.lil-gui .controller.number.hasSlider input{margin-left:var(--spacing);width:var(--slider-input-width);min-width:var(--slider-input-min-width);flex-shrink:0}.lil-gui .controller.number .slider{width:100%;height:var(--widget-height);background-color:var(--widget-color);border-radius:var(--widget-border-radius);overflow:hidden}.lil-gui .controller.number .slider.active{background-color:var(--highlight-color)}.lil-gui .controller.number .slider.active .fill{opacity:.95}.lil-gui .controller.number .fill{height:100%;border-right:2px solid var(--number-color)}.lil-gui .controller.string input{color:var(--string-color)}.lil-gui .controller.color .display{width:100%;height:var(--widget-height);border-radius:var(--widget-border-radius)}.lil-gui .controller.color input[type=color]{opacity:0;width:100%;height:100%;cursor:pointer}.lil-gui .controller.color input[type=text]{margin-left:var(--spacing);font-family:var(--font-family-mono);min-width:var(--color-input-min-width);width:var(--color-input-width);flex-shrink:0}.lil-gui .controller.option select{opacity:0;position:absolute;width:100%;max-width:100%}.lil-gui .controller.option .display{pointer-events:none;border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height);position:relative;max-width:100%;overflow:hidden;word-break:break-all;padding-left:.55em;padding-right:1.75em}.lil-gui .controller.option .display:after{font-family:"lil-gui";content:"↕";position:absolute;top:0;right:0;bottom:0;padding-right:.375em}.lil-gui .controller.function{background:none}@media(hover: hover){.lil-gui .controller.function:hover .name{background:var(--highlight-color)}}.lil-gui .controller.function:active .name{background:var(--text-color);color:var(--background-color)}.lil-gui .controller.function .name{display:block;padding:0;text-align:center;width:100%;background:var(--widget-color);border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height)}.lil-gui .controller.function .widget{display:none}.lil-gui .title{height:var(--title-height);font-weight:600;padding:0 var(--padding);line-height:calc(var(--title-height) - 2px);-webkit-tap-highlight-color:transparent;cursor:pointer}.lil-gui .title:before{font-family:"lil-gui";content:"▾"}.lil-gui.closed .children{display:none}.lil-gui.closed .title:before{content:"▸"}.lil-gui>.children{overflow:auto}.lil-gui>.children::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width);background:var(--background-color)}.lil-gui>.children::-webkit-scrollbar-corner{display:none}.lil-gui>.children::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-width);background:var(--highlight-color)}.lil-gui .children:empty:before{content:"Empty";padding:0 var(--padding);margin:var(--spacing) 0;display:block;height:var(--widget-height);font-style:italic;line-height:var(--widget-height);opacity:.5}.lil-gui .lil-gui:not(.closed)>.title{border-bottom:1px solid var(--widget-color)}.lil-gui:not(.closed)+.controller{border-top:1px solid var(--widget-color);margin-top:0;padding-top:var(--spacing)}.lil-gui .lil-gui .controller{border:none}.lil-gui .lil-gui .lil-gui>.title{border:none}.lil-gui .lil-gui .lil-gui>.children{border:none;margin-left:var(--folder-indent);border-left:2px solid var(--widget-color)}.lil-gui input{border:0;outline:none;font-family:var(--font-family);font-size:var(--font-size);border-radius:var(--widget-border-radius);height:var(--widget-height);background:var(--widget-color);color:var(--text-color);width:100%}.lil-gui input[type=text]{padding:var(--widget-padding)}.lil-gui input:focus,.lil-gui input:active{background:var(--highlight-color)}.lil-gui input[type=checkbox]{appearance:none;-webkit-appearance:none;height:var(--checkbox-size);width:var(--checkbox-size);border-radius:var(--widget-border-radius);text-align:center}.lil-gui input[type=checkbox]:checked:before{font-family:"lil-gui";content:"✓";font-size:var(--checkbox-size);line-height:var(--checkbox-size)}.lil-gui button{-webkit-tap-highlight-color:transparent;outline:none;cursor:pointer;border:0;font-family:var(--font-family);font-size:var(--font-size);color:var(--text-color);text-align:left;width:100%;text-transform:none}.lil-gui .display{background:var(--widget-color)}.lil-gui .display.focus,.lil-gui .display.active{background:var(--highlight-color)}@font-face{font-family:"lil-gui";src:url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAABqAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPQAAAFZr2333Y21hcAAAAYQAAABuAAABssJQk9tnbHlmAAAB9AAAAF8AAACEIZ5WI2hlYWQAAAJUAAAAJwAAADZfcj23aGhlYQAAAnwAAAAYAAAAJAC5AGpobXR4AAAClAAAAA4AAAAUAZAAAGxvY2EAAAKkAAAADAAAAAwARABkbWF4cAAAArAAAAAeAAAAIAERABJuYW1lAAAC0AAAASIAAAIK9SUU/XBvc3QAAAP0AAAAQgAAAFiCDrX0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQIYJzAwMrAwGDP4AYk+aC0AQMLgyQDAxMDKzMDVhCQ5prC4KA4VV2YIQXI5QSTDAyMIAIA82gFuAAAAHic7ZGxDYAwDAQvISCE6JiAIkrDEBmIil3YJVVWAztOwRC8dZH9ily8gREYhEMI4C4cqlNc1/yBpfmBLPPCjMfvdyyxpu154Nt3Oflnpb2XHbp74tfa3tynoOkZmnYshiRGrIZeJ20G4QWoQBFzAAB4nGNgYgABH4YwBiYGVgYGe0ZxUXZ1SRCwkZQUkZQEyTKC1dgyuIJUmLOrm6ub2yqyS0mxq4BJqLw7gyVYXt1c3FxcDSwjiCwfwuCLkNcU5+RT4pQU4+RT5gQAe+sKMgB4nGNgZGBgAOKTAv9nx/PbfGXgZkhhwAZCGMKAJAcDE4gDAMWSBTgAeJxjYGRgYEhhYICTIQyMDKiAFQAceQEkeJxjYACCFFQMAA4kAZEAAAAAAAAAEgAiADIAQnicY2BkYGBgZWBjYGIAARDJBYQMDP/BfAYACZUBJAAAeJxd0E1Kw0AcBfCXfmIDRRBdicxKF9L0Y9kDtPsuAi7TdJKmTDNhMi3UE3gCT+ApPIB4LF/Df2NmSPKbNy8DCYBb/CDAdQQYNvfr6NBDcZcai3v0vbiPEI/iAfMX8QiviMQh7vDGE4LeDZMxjLhDv4u79Ie4R3+K+3jAl3jA/Fs8QoxfcYjn4MkUZpKfio3OTyZxspJHrF1d2FLNo5kka11ql3i9U9uLqs/5wvtMZc4e1cqWXhtjVeXsQac+2ntfLafTTPIotUd+QcFrghwnagPdyCCBa+39X8VsOtSURQmFOf/RrNVZs1M2vQSezx17W1x4r3FmZ8HUI+M6Y8fiSK2a865tw2mZVM3egUnKPMK+eavCElPOrNWP2OJJf3XUWN4AAHicY2BigABGBuyAlZGJkZmRhZGVkY2BI6UovyAlvzyPNy0/JyW1SDc5J784NYUbyssvSM1jTc5ITc5mYAAAYLAPMAAA") format("woff")}';let g=!1;class m{constructor({parent:t,autoPlace:i=void 0===t,mobileBreakpoint:e=500,mobileMaxHeight:s=200,container:n,injectStyles:r=!0,title:l="Controls",width:o,queryKey:a}={}){this.parent=t,this.root=t?t.root:this,this.children=[],this._closed=!1,this.domElement=document.createElement("div"),this.domElement.classList.add("lil-gui"),this.$title=document.createElement("div"),this.$title.classList.add("title"),this.$title.addEventListener("click",()=>{this.open(this._closed)}),this.$children=document.createElement("div"),this.$children.classList.add("children"),this.domElement.appendChild(this.$title),this.domElement.appendChild(this.$children),this.parent?(this.parent.children.push(this),this.parent.$children.appendChild(this.domElement)):(this.domElement.classList.add("root"),o&&this.domElement.style.setProperty("--width",o+"px"),!g&&r&&(!function(t){const i=document.createElement("style");i.innerHTML=t;const e=document.querySelector("head link[rel=stylesheet], head style");e?document.head.insertBefore(i,e):document.head.appendChild(i)}(p),g=!0),n?n.appendChild(this.domElement):i&&(this.domElement.classList.add("autoPlace"),document.body.appendChild(this.domElement),this._initTitleDrag())),this._onResize=()=>{const t=window.innerWidth<=e;this.domElement.classList.toggle("mobile",t),this._setMaxHeight(t?s:window.innerHeight)},window.addEventListener("resize",this._onResize),this._onResize(),a&&!new RegExp(`\\b${a}\\b`).test(location.search)&&(this.domElement.style.display="none"),this.title(l)}add(t,e,s,n,r){if(Object(s)===s)return new c(this,t,e,s);const l=t[e];switch(typeof l){case"number":return new d(this,t,e,s,n,r);case"boolean":return new i(this,t,e);case"string":return new u(this,t,e);case"function":return new h(this,t,e)}console.error(`Failed to add controller for "${e}"`,l,t)}addColor(t,i,e=1){return new a(this,t,i,e)}addFolder(t){return new m({parent:this,title:t})}getControllers(i=!0){let e=this.children.filter(i=>i instanceof t);return i?(this.getFolders(!0).forEach(t=>{e=e.concat(t.getControllers(!1))}),e):e}getFolders(t=!0){const i=this.children.filter(t=>t instanceof m);if(!t)return i;let e=Array.from(i);return i.forEach(t=>{e=e.concat(t.getFolders(!0))}),e}reset(t=!0){return this.getControllers(t).forEach(t=>t.reset()),this}import(t,i=!0){return this.getControllers(i).forEach(i=>{i._name in t&&i.import(t[i._name])}),this}export(t=!0){const i={};return this.getControllers(t).forEach(t=>{i[t._name]=t.export()}),i}open(t=!0){return this._closed=!t,this.domElement.classList.toggle("closed",this._closed),this}close(){return this._closed=!0,this.domElement.classList.add("closed"),this}title(t){return this._title=t,!1===t?this.$title.style.display="none":(this.$title.style.display="",this.$title.innerHTML=t),this}destroy(){this.parent&&this.parent.children.splice(this.parent.children.indexOf(this),1),this.domElement.parentElement&&this.domElement.parentElement.removeChild(this.domElement),Array.from(this.children).forEach(t=>t.destroy()),this._onResize&&window.removeEventListener("resize",this._onResize)}_initTitleDrag(){let t;const i=i=>{i.preventDefault();const e=i.touches[0].clientY-t;t=i.touches[0].clientY,this._setMaxHeight(this._maxHeight-e)},e=()=>{window.removeEventListener("touchmove",i),window.removeEventListener("touchend",e)};this.$title.addEventListener("touchstart",s=>{!this.domElement.classList.contains("mobile")||this.domElement.classList.contains("closed")||s.touches.length>1||(t=s.touches[0].clientY,window.addEventListener("touchmove",i,{passive:!1}),window.addEventListener("touchend",e))})}_setMaxHeight(t){this._maxHeight=Math.min(t,window.innerHeight),this.domElement.style.setProperty("--max-height",t+"px")}}export default m;export{i as BooleanController,a as ColorController,t as Controller,h as FunctionController,m as GUI,d as NumberController,c as OptionController,u as StringController}; |
| /** | ||
| * lil-gui | ||
| * @version 0.8.11 | ||
| * @version 0.8.14 | ||
| * @author George Michael Brower | ||
@@ -33,3 +33,3 @@ * @license MIT | ||
| /** | ||
| * Name of the property to control. | ||
| * The name of the property to control. | ||
| * @type {string} | ||
@@ -111,5 +111,6 @@ */ | ||
| * | ||
| * const controller = gui.add( object, 'property' ).onChange(function() { | ||
| * console.assert(this === controller); | ||
| * } ); | ||
| * const controller = gui.add( object, 'property' ) | ||
| * .onChange( function() { | ||
| * console.assert(this === controller); | ||
| * } ); | ||
| */ | ||
@@ -132,28 +133,2 @@ onChange( callback ) { | ||
| /** | ||
| * Sets `object[ property ]` to `value`, calls `_onChange()` and then `updateDisplay()`. | ||
| * @param {any} value | ||
| * @returns {this} | ||
| */ | ||
| setValue( value ) { | ||
| this.object[ this.property ] = value; | ||
| this._callOnChange(); | ||
| this.updateDisplay(); | ||
| return this; | ||
| } | ||
| _callOnChange() { | ||
| if ( this._onChange !== undefined ) { | ||
| this._onChange.call( this, this.getValue() ); | ||
| } | ||
| } | ||
| /** | ||
| * Returns `object[ property ]`. | ||
| * @returns {any} | ||
| */ | ||
| getValue() { | ||
| return this.object[ this.property ]; | ||
| } | ||
| /** | ||
| * Sets the controller back to its initial value. | ||
@@ -198,10 +173,2 @@ * @returns {this} | ||
| /** | ||
| * Destroys this controller and removes it from the parent GUI. | ||
| */ | ||
| destroy() { | ||
| this.parent.children.splice( this.parent.children.indexOf( this ), 1 ); | ||
| this.parent.$children.removeChild( this.domElement ); | ||
| } | ||
| /** | ||
| * Destroys this controller and adds a new option controller. | ||
@@ -246,20 +213,2 @@ * @param {object|Array} options | ||
| /** | ||
| * Updates the display to keep it in sync with `getValue()`. Useful for updating your | ||
| * controllers when their values have been modified outside of the GUI. | ||
| * @returns {this} | ||
| */ | ||
| updateDisplay() { | ||
| return this; | ||
| } | ||
| export() { | ||
| return this.getValue(); | ||
| } | ||
| import( value ) { | ||
| this.setValue( value ); | ||
| return this; | ||
| } | ||
| /** | ||
| * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening, and use | ||
@@ -297,2 +246,54 @@ * `controller._listening` to access the listening state. | ||
| /** | ||
| * Returns `object[ property ]`. | ||
| * @returns {any} | ||
| */ | ||
| getValue() { | ||
| return this.object[ this.property ]; | ||
| } | ||
| /** | ||
| * todoc | ||
| * @param {any} value | ||
| * @returns {this} | ||
| */ | ||
| setValue( value ) { | ||
| this.object[ this.property ] = value; | ||
| this._callOnChange(); | ||
| this.updateDisplay(); | ||
| return this; | ||
| } | ||
| _callOnChange() { | ||
| if ( this._onChange !== undefined ) { | ||
| this._onChange.call( this, this.getValue() ); | ||
| } | ||
| } | ||
| /** | ||
| * 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; | ||
| } | ||
| import( value ) { | ||
| this.setValue( value ); | ||
| return this; | ||
| } | ||
| export() { | ||
| return this.getValue(); | ||
| } | ||
| /** | ||
| * Destroys this controller and removes it from the parent GUI. | ||
| */ | ||
| destroy() { | ||
| this.parent.children.splice( this.parent.children.indexOf( this ), 1 ); | ||
| this.parent.$children.removeChild( this.domElement ); | ||
| } | ||
| } | ||
@@ -1020,6 +1021,4 @@ | ||
| --checkbox-size:calc(0.75 * var(--widget-height)); | ||
| --width: 250px; | ||
| --title-height: calc(var(--widget-height) + var(--spacing)); | ||
| --scrollbar-width: 5px; | ||
| --mobile-max-height: 200px; | ||
| --title-height: calc(var(--widget-height) + var(--spacing)); | ||
| } | ||
@@ -1031,3 +1030,3 @@ .lil-gui, .lil-gui * { | ||
| .lil-gui.root { | ||
| width: var(--width); | ||
| width: var(--width, 250px); | ||
| } | ||
@@ -1061,2 +1060,14 @@ .lil-gui.root > .title { | ||
| } | ||
| .lil-gui.mobile { | ||
| --widget-height: 32px; | ||
| --padding: 8px; | ||
| --spacing: 8px; | ||
| --font-size: 15px; | ||
| --folder-indent: 12px; | ||
| --widget-padding: 0 0 0 5px; | ||
| --scrollbar-width: 7px; | ||
| --slider-input-min-width: 65px; | ||
| --color-input-min-width: 65px; | ||
| width: 100%; | ||
| } | ||
| .lil-gui.autoPlace { | ||
@@ -1069,21 +1080,10 @@ position: fixed; | ||
| .lil-gui.autoPlace > .children { | ||
| max-height: calc(var(--window-height) - var(--title-height)); | ||
| max-height: calc(var(--max-height) - var(--title-height)); | ||
| } | ||
| .lil-gui.autoPlace.mobile { | ||
| --widget-height: 32px; | ||
| --padding: 8px; | ||
| --spacing: 8px; | ||
| --font-size: 16px; | ||
| --folder-indent: 12px; | ||
| --widget-padding: 0 0 0 5px; | ||
| --scrollbar-width: 7px; | ||
| top: auto; | ||
| right: auto; | ||
| top: auto; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| } | ||
| .lil-gui.autoPlace.mobile > .children { | ||
| max-height: calc(var(--mobile-max-height) - var(--title-height)); | ||
| } | ||
@@ -1362,4 +1362,4 @@ .lil-gui .controller { | ||
| * | ||
| * @param {string} [options.title=Controls] | ||
| * Name to display in the title bar. | ||
| * @param {string|false} [options.title=Controls] | ||
| * Name to display in the title bar. Pass `false` to hide the title bar. | ||
| * | ||
@@ -1466,17 +1466,24 @@ * @param {number} [options.width] todoc | ||
| // Allows you to change the height on mobile by dragging the title | ||
| this._initTitleDrag(); | ||
| } | ||
| this.mobileMaxHeight = mobileMaxHeight; | ||
| this._initMobileMaxHeight(); | ||
| } | ||
| this._onResize = () => { | ||
| this.domElement.style.setProperty( '--window-height', window.innerHeight + 'px' ); | ||
| this.domElement.classList.toggle( 'mobile', window.innerWidth <= mobileBreakpoint ); | ||
| }; | ||
| this._onResize(); | ||
| this._onResize = () => { | ||
| window.addEventListener( 'resize', this._onResize ); | ||
| // Toggles mobile class via JS (as opposed to media query) to make the breakpoint | ||
| // configurable via constructor | ||
| const mobile = window.innerWidth <= mobileBreakpoint; | ||
| this.domElement.classList.toggle( 'mobile', mobile ); | ||
| } | ||
| // Adds a scrollbar to an autoPlace GUI | ||
| this._setMaxHeight( mobile ? mobileMaxHeight : window.innerHeight ); | ||
| }; | ||
| window.addEventListener( 'resize', this._onResize ); | ||
| this._onResize(); | ||
| if ( queryKey && !new RegExp( `\\b${queryKey}\\b` ).test( location.search ) ) { | ||
@@ -1584,12 +1591,9 @@ this.domElement.style.display = 'none'; | ||
| /** | ||
| * Returns an object mapping controller names to values. | ||
| * Resets all controllers. | ||
| * @param {boolean} recursive | ||
| * @returns {object} | ||
| * @returns {this} | ||
| */ | ||
| export( recursive = true ) { | ||
| const obj = {}; | ||
| this.getControllers( recursive ).forEach( c => { | ||
| obj[ c._name ] = c.export(); | ||
| } ); | ||
| return obj; | ||
| reset( recursive = true ) { | ||
| this.getControllers( recursive ).forEach( c => c.reset() ); | ||
| return this; | ||
| } | ||
@@ -1613,27 +1617,15 @@ | ||
| /** | ||
| * Resets all controllers. | ||
| * Returns an object mapping controller names to values. | ||
| * @param {boolean} recursive | ||
| * @returns {this} | ||
| * @returns {object} | ||
| */ | ||
| reset( recursive = true ) { | ||
| this.getControllers( recursive ).forEach( c => c.reset() ); | ||
| return this; | ||
| export( recursive = true ) { | ||
| const obj = {}; | ||
| this.getControllers( recursive ).forEach( c => { | ||
| obj[ c._name ] = c.export(); | ||
| } ); | ||
| return obj; | ||
| } | ||
| /** | ||
| * todoc | ||
| * @param {string} title | ||
| * @returns {this} | ||
| */ | ||
| title( title ) { | ||
| /** | ||
| * todoc | ||
| * @type {string} | ||
| */ | ||
| this._title = title; | ||
| this.$title.innerHTML = title; | ||
| return this; | ||
| } | ||
| /** | ||
| * Opens a GUI or folder. GUI and folders are open by default. | ||
@@ -1665,3 +1657,23 @@ * @param {boolean} open Pass false to close | ||
| * todoc | ||
| * @param {string|false} title | ||
| * @returns {this} | ||
| */ | ||
| title( title ) { | ||
| /** | ||
| * todoc | ||
| * @type {string|false} | ||
| */ | ||
| this._title = title; | ||
| if ( title === false ) { | ||
| this.$title.style.display = 'none'; | ||
| } else { | ||
| this.$title.style.display = ''; | ||
| this.$title.innerHTML = title; | ||
| } | ||
| return this; | ||
| } | ||
| /** | ||
| * todoc | ||
| */ | ||
| destroy() { | ||
@@ -1685,3 +1697,3 @@ | ||
| _initMobileMaxHeight() { | ||
| _initTitleDrag() { | ||
@@ -1691,6 +1703,13 @@ let prevClientY; | ||
| const onTouchStart = e => { | ||
| if ( e.touches.length > 1 ) return; | ||
| const resize = this.domElement.classList.contains( 'mobile' ) && | ||
| !this.domElement.classList.contains( 'closed' ); | ||
| if ( !resize || e.touches.length > 1 ) return; | ||
| prevClientY = e.touches[ 0 ].clientY; | ||
| window.addEventListener( 'touchmove', onTouchMove, { passive: false } ); | ||
| window.addEventListener( 'touchend', onTouchEnd ); | ||
| }; | ||
@@ -1702,3 +1721,3 @@ | ||
| prevClientY = e.touches[ 0 ].clientY; | ||
| this.mobileMaxHeight -= deltaY; | ||
| this._setMaxHeight( this._maxHeight - deltaY ); | ||
| }; | ||
@@ -1715,11 +1734,7 @@ | ||
| get mobileMaxHeight() { | ||
| return this._mobileMaxHeight; | ||
| _setMaxHeight( v ) { | ||
| this._maxHeight = Math.min( v, window.innerHeight ); | ||
| this.domElement.style.setProperty( '--max-height', v + 'px' ); | ||
| } | ||
| set mobileMaxHeight( v ) { | ||
| this._mobileMaxHeight = v; | ||
| this.domElement.style.setProperty( '--mobile-max-height', v + 'px' ); | ||
| } | ||
| } | ||
@@ -1726,0 +1741,0 @@ |
| /** | ||
| * lil-gui | ||
| * @version 0.8.11 | ||
| * @version 0.8.14 | ||
| * @author George Michael Brower | ||
| * @license MIT | ||
| */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).lil={})}(this,(function(t){"use strict";class e{constructor(t,e,i,s,n="div"){this.parent=t,this.object=e,this.property=i,this._disabled=!1,this.initialValue=this.getValue(),this.domElement=document.createElement(n),this.domElement.classList.add("controller"),this.domElement.classList.add(s),this.$name=document.createElement("div"),this.$name.classList.add("name"),this.$widget=document.createElement("div"),this.$widget.classList.add("widget"),this.domElement.appendChild(this.$name),this.domElement.appendChild(this.$widget),this.parent.children.push(this),this.parent.$children.appendChild(this.domElement),this._listenCallback=this._listenCallback.bind(this),this.name(i)}name(t){return this._name=t,this.$name.innerHTML=t,this}onChange(t){return this._onChange=t,this}onFinishChange(t){return this.onChange(t)}setValue(t){return this.object[this.property]=t,this._callOnChange(),this.updateDisplay(),this}_callOnChange(){void 0!==this._onChange&&this._onChange.call(this,this.getValue())}getValue(){return this.object[this.property]}reset(){return this.setValue(this.initialValue),this}enable(t=!0){return this._disabled=!t,this.domElement.classList.toggle("disabled",this._disabled),this}disable(t=!0){return this._disabled=t,this.domElement.classList.toggle("disabled",this._disabled),this}destroy(){this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.$children.removeChild(this.domElement)}options(t){const e=this.parent.add(this.object,this.property,t);return e.name(this._name),this.destroy(),e}min(t){return this}max(t){return this}step(t){return this}updateDisplay(){return this}export(){return this.getValue()}import(t){return this.setValue(t),this}listen(t=!0){return this._listening=t,void 0!==this._listenCallbackID&&(cancelAnimationFrame(this._listenCallbackID),this._listenCallbackID=void 0),this._listening&&this._listenCallback(),this}_listenCallback(){this._listenCallbackID=requestAnimationFrame(this._listenCallback),this.updateDisplay()}}class i extends e{constructor(t,e,i){super(t,e,i,"boolean","label"),this.$input=document.createElement("input"),this.$input.setAttribute("type","checkbox"),this.$widget.appendChild(this.$input),this.$input.addEventListener("change",()=>{this.setValue(this.$input.checked)}),this.updateDisplay()}updateDisplay(){return this.$input.checked=this.getValue(),this}}function s(t){let e,i;return(e=t.match(/(#|0x)?([a-f0-9]{6})/i))?i=e[2]:(e=t.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/))?i=parseInt(e[1]).toString(16).padStart(2,0)+parseInt(e[2]).toString(16).padStart(2,0)+parseInt(e[3]).toString(16).padStart(2,0):(e=t.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i))&&(i=e[1]+e[1]+e[2]+e[2]+e[3]+e[3]),!!i&&"#"+i}const n={isPrimitive:!0,match:t=>"string"==typeof t,fromHexString:s,toHexString:s},r={isPrimitive:!0,match:t=>"number"==typeof t,fromHexString:t=>parseInt(t.substring(1),16),toHexString:t=>"#"+t.toString(16).padStart(6,0)},l={isPrimitive:!1,match:Array.isArray,fromHexString(t,e,i=1){const s=r.fromHexString(t);e[0]=(s>>16&255)/255*i,e[1]=(s>>8&255)/255*i,e[2]=(255&s)/255*i},toHexString:([t,e,i],s=1)=>r.toHexString(t*(s=255/s)<<16^e*s<<8^i*s<<0)},o={isPrimitive:!1,match:t=>Object(t)===t,fromHexString(t,e,i=1){const s=r.fromHexString(t);e.r=(s>>16&255)/255*i,e.g=(s>>8&255)/255*i,e.b=(255&s)/255*i},toHexString:({r:t,g:e,b:i},s=1)=>r.toHexString(t*(s=255/s)<<16^e*s<<8^i*s<<0)},a=[n,r,l,o];class h extends e{constructor(t,e,i,n){var r;super(t,e,i,"color"),this.$input=document.createElement("input"),this.$input.setAttribute("type","color"),this.$input.setAttribute("tabindex",-1),this.$text=document.createElement("input"),this.$text.setAttribute("type","text"),this.$text.setAttribute("spellcheck","false"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this.$display.appendChild(this.$input),this.$widget.appendChild(this.$display),this.$widget.appendChild(this.$text),this._format=(r=this.initialValue,a.find(t=>t.match(r))),this._rgbScale=n,this._initialValueHexString=this.export(),this._textFocused=!1,this.$input.addEventListener("change",()=>{this._setValueFromHexString(this.$input.value)}),this.$input.addEventListener("focus",()=>{this.$display.classList.add("focus")}),this.$input.addEventListener("blur",()=>{this.$display.classList.remove("focus")}),this.$text.addEventListener("input",()=>{const t=s(this.$text.value);t&&this._setValueFromHexString(t)}),this.$text.addEventListener("focus",()=>{this._textFocused=!0,this.$text.select()}),this.$text.addEventListener("blur",()=>{this._textFocused=!1,this.updateDisplay()}),this.updateDisplay()}reset(){return this._setValueFromHexString(this._initialValueHexString),this}_setValueFromHexString(t){if(this._format.isPrimitive){const e=this._format.fromHexString(t);this.setValue(e)}else this._format.fromHexString(t,this.getValue(),this._rgbScale),this._callOnChange(),this.updateDisplay()}export(){return this._format.toHexString(this.getValue(),this._rgbScale)}import(t){return this._setValueFromHexString(t),this}updateDisplay(){this.$input.value=this._format.toHexString(this.getValue(),this._rgbScale),this._textFocused||(this.$text.value=this.$input.value.substring(1)),this.$display.style.backgroundColor=this.$input.value}}class d extends e{constructor(t,e,i){super(t,e,i,"function","button"),this.domElement.addEventListener("click",()=>{this.getValue().call(this.object)})}}class c extends e{constructor(t,e,i,s,n,r){super(t,e,i,"number"),this._initInput(),this.min(s),this.max(n);const l=void 0!==r;this.step(l?r:this._getImplicitStep(),l),this.updateDisplay()}min(t){return this._min=t,this._onUpdateMinMax(),this}max(t){return this._max=t,this._onUpdateMinMax(),this}step(t,e=!0){return this._step=t,this._stepExplicit=e,this}updateDisplay(){const t=this.getValue();if(this._hasSlider){const e=(t-this._min)/(this._max-this._min);this.$fill.style.setProperty("width",100*e+"%")}return this._inputFocused||(this.$input.value=t),this}_initInput(){this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.setAttribute("inputmode","numeric"),this.$widget.appendChild(this.$input);const t=t=>{const e=parseFloat(this.$input.value);isNaN(e)||(this._snapClampSetValue(e+t),this.$input.value=this.getValue())};this.$input.addEventListener("focus",()=>{this._inputFocused=!0}),this.$input.addEventListener("input",()=>{const t=parseFloat(this.$input.value);isNaN(t)||this.setValue(this._clamp(t))}),this.$input.addEventListener("blur",()=>{this._inputFocused=!1,this.updateDisplay()}),this.$input.addEventListener("keydown",e=>{13===e.keyCode&&this.$input.blur(),38===e.keyCode&&(e.preventDefault(),t(this._step*this._arrowKeyMultiplier(e))),40===e.keyCode&&(e.preventDefault(),t(-1*this._step*this._arrowKeyMultiplier(e)))}),this.$input.addEventListener("wheel",e=>{this._inputFocused&&(e.preventDefault(),t(this._normalizeMouseWheel(e)*this._step))},{passive:!1})}_initSlider(){this._hasSlider=!0,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),this.$widget.insertBefore(this.$slider,this.$input),this.domElement.classList.add("hasSlider");const t=t=>{const e=this.$slider.getBoundingClientRect();let i=((t,e,i,s,n)=>(t-e)/(i-e)*(n-s)+s)(t,e.left,e.right,this._min,this._max);this._snapClampSetValue(i)},e=e=>{t(e.clientX)},i=()=>{this.$slider.classList.remove("active"),window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",i)};this.$slider.addEventListener("mousedown",s=>{t(s.clientX),this.$slider.classList.add("active"),window.addEventListener("mousemove",e),window.addEventListener("mouseup",i)});let s,n,r=!1;const l=e=>{if(r){const i=e.touches[0].clientX-s,a=e.touches[0].clientY-n;Math.abs(i)>Math.abs(a)?(t(e.touches[0].clientX),this.$slider.classList.add("active"),r=!1):(window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o))}else e.preventDefault(),t(e.touches[0].clientX)},o=()=>{this.$slider.classList.remove("active"),window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o)};this.$slider.addEventListener("touchstart",e=>{e.touches.length>1||(this._hasScrollBar?(s=e.touches[0].clientX,n=e.touches[0].clientY,r=!0):(t(e.touches[0].clientX),this.$slider.classList.add("active"),r=!1),window.addEventListener("touchmove",l,{passive:!1}),window.addEventListener("touchend",o))});this.$slider.addEventListener("wheel",t=>{if(this._hasScrollBar)return;t.preventDefault();const e=this._normalizeMouseWheel(t)*this._step;this._snapClampSetValue(this.getValue()+e)},{passive:!1})}_getImplicitStep(){return this._hasMin&&this._hasMax?(this._max-this._min)/1e3:.1}_onUpdateMinMax(){!this._hasSlider&&this._hasMin&&this._hasMax&&(this._stepExplicit||this.step(this._getImplicitStep(),!1),this._initSlider(),this.updateDisplay())}_normalizeMouseWheel(t){let{deltaX:e,deltaY:i}=t;return Math.floor(t.deltaY)!==t.deltaY&&t.wheelDelta&&(e=0,i=-t.wheelDelta/120),e+-i}_arrowKeyMultiplier(t){return this._stepExplicit?t.shiftKey?10:1:t.shiftKey?100:t.altKey?1:10}_snap(t){const e=Math.round(t/this._step)*this._step;return parseFloat(e.toPrecision(15))}_clamp(t){const e=this._hasMin?this._min:-1/0,i=this._hasMax?this._max:1/0;return Math.max(e,Math.min(i,t))}_snapClampSetValue(t){this.setValue(this._clamp(this._snap(t)))}get _hasScrollBar(){const t=this.parent.root.$children;return t.scrollHeight>t.clientHeight}get _hasMin(){return void 0!==this._min}get _hasMax(){return void 0!==this._max}}class u extends e{constructor(t,e,i,s){super(t,e,i,"option"),this.$select=document.createElement("select"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this._values=Array.isArray(s)?s:Object.values(s),this._names=Array.isArray(s)?s:Object.keys(s),this._names.forEach(t=>{const e=document.createElement("option");e.innerHTML=t,this.$select.appendChild(e)}),this.$select.addEventListener("change",()=>{this.setValue(this._values[this.$select.selectedIndex])}),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.updateDisplay()}updateDisplay(){const t=this.getValue(),e=this._values.indexOf(t);return this.$select.selectedIndex=e,this.$display.innerHTML=-1===e?t:this._names[e],this}}class p extends e{constructor(t,e,i){super(t,e,i,"string"),this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.addEventListener("input",()=>{this.setValue(this.$input.value)}),this.$input.addEventListener("keydown",t=>{13===t.keyCode&&this.$input.blur()}),this.$widget.appendChild(this.$input),this.updateDisplay()}updateDisplay(){return this.$input.value=this.getValue(),this}}var g='.lil-gui{font-family:var(--font-family);font-size:var(--font-size);line-height:1;font-weight:normal;font-style:normal;text-align:left;background-color:var(--background-color);color:var(--text-color);user-select:none;-webkit-user-select:none;--background-color:#1f1f1f;--text-color:#ebebeb;--title-background-color:#111;--widget-color:#424242;--highlight-color:#525151;--number-color:#2cc9ff;--string-color:#a2db3c;--font-size:11px;--font-family:-apple-system,BlinkMacSystemFont,"Lucida Grande","Segoe UI",Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-mono:Menlo,Monaco,Consolas,"Droid Sans Mono",monospace,"Droid Sans Fallback";--padding:4px;--spacing:4px;--widget-height:20px;--name-width:45%;--slider-input-width:27%;--color-input-width:27%;--slider-input-min-width:45px;--color-input-min-width:45px;--folder-indent:7px;--widget-padding:0 0 0 3px;--widget-border-radius:2px;--checkbox-size:calc(0.75 * var(--widget-height));--width: 250px;--scrollbar-width: 5px;--mobile-max-height: 200px;--title-height: calc(var(--widget-height) + var(--spacing))}.lil-gui,.lil-gui *{box-sizing:border-box;margin:0}.lil-gui.root{width:var(--width)}.lil-gui.root>.title{background:var(--title-background-color)}.lil-gui .lil-gui{--background-color:inherit;--text-color:inherit;--title-background-color:inherit;--widget-color:inherit;--highlight-color:inherit;--number-color:inherit;--string-color:inherit;--font-size:inherit;--font-family:inherit;--font-family-mono:inherit;--padding:inherit;--spacing:inherit;--widget-height:inherit;--name-width:inherit;--slider-input-width:inherit;--color-input-width:inherit;--slider-input-min-width:inherit;--color-input-min-width:inherit;--folder-indent:inherit;--widget-padding:inherit;--widget-border-radius:inherit;--checkbox-size:inherit}.lil-gui.autoPlace{position:fixed;top:0;right:15px;z-index:1001}.lil-gui.autoPlace>.children{max-height:calc(var(--window-height) - var(--title-height))}.lil-gui.autoPlace.mobile{--widget-height: 32px;--padding: 8px;--spacing: 8px;--font-size: 16px;--folder-indent: 12px;--widget-padding: 0 0 0 5px;--scrollbar-width: 7px;right:auto;top:auto;bottom:0;left:0;width:100%}.lil-gui.autoPlace.mobile>.children{max-height:calc(var(--mobile-max-height) - var(--title-height))}.lil-gui .controller{display:flex;align-items:center;padding:0 var(--padding);margin:var(--spacing) 0}.lil-gui .controller.disabled{opacity:.5;pointer-events:none}.lil-gui .controller .name{min-width:var(--name-width);flex-shrink:0;white-space:pre;padding-right:var(--spacing)}.lil-gui .controller .widget{position:relative;display:flex;align-items:center;width:100%;min-height:var(--widget-height)}.lil-gui .controller.number input{color:var(--number-color)}.lil-gui .controller.number.hasSlider input{margin-left:var(--spacing);width:var(--slider-input-width);min-width:var(--slider-input-min-width);flex-shrink:0}.lil-gui .controller.number .slider{width:100%;height:var(--widget-height);background-color:var(--widget-color);border-radius:var(--widget-border-radius);overflow:hidden}.lil-gui .controller.number .slider.active{background-color:var(--highlight-color)}.lil-gui .controller.number .slider.active .fill{opacity:.95}.lil-gui .controller.number .fill{height:100%;border-right:2px solid var(--number-color)}.lil-gui .controller.string input{color:var(--string-color)}.lil-gui .controller.color .display{width:100%;height:var(--widget-height);border-radius:var(--widget-border-radius)}.lil-gui .controller.color input[type=color]{opacity:0;width:100%;height:100%;cursor:pointer}.lil-gui .controller.color input[type=text]{margin-left:var(--spacing);font-family:var(--font-family-mono);min-width:var(--color-input-min-width);width:var(--color-input-width);flex-shrink:0}.lil-gui .controller.option select{opacity:0;position:absolute;width:100%;max-width:100%}.lil-gui .controller.option .display{pointer-events:none;border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height);position:relative;max-width:100%;overflow:hidden;word-break:break-all;padding-left:.55em;padding-right:1.75em}.lil-gui .controller.option .display:after{font-family:"lil-gui";content:"↕";position:absolute;top:0;right:0;bottom:0;padding-right:.375em}.lil-gui .controller.function{background:none}@media(hover: hover){.lil-gui .controller.function:hover .name{background:var(--highlight-color)}}.lil-gui .controller.function:active .name{background:var(--text-color);color:var(--background-color)}.lil-gui .controller.function .name{display:block;padding:0;text-align:center;width:100%;background:var(--widget-color);border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height)}.lil-gui .controller.function .widget{display:none}.lil-gui .title{height:var(--title-height);font-weight:600;padding:0 var(--padding);line-height:calc(var(--title-height) - 2px);-webkit-tap-highlight-color:transparent;cursor:pointer}.lil-gui .title:before{font-family:"lil-gui";content:"▾"}.lil-gui.closed .children{display:none}.lil-gui.closed .title:before{content:"▸"}.lil-gui>.children{overflow:auto}.lil-gui>.children::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width);background:var(--background-color)}.lil-gui>.children::-webkit-scrollbar-corner{display:none}.lil-gui>.children::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-width);background:var(--highlight-color)}.lil-gui .children:empty:before{content:"Empty";padding:0 var(--padding);margin:var(--spacing) 0;display:block;height:var(--widget-height);font-style:italic;line-height:var(--widget-height);opacity:.5}.lil-gui .lil-gui:not(.closed)>.title{border-bottom:1px solid var(--widget-color)}.lil-gui:not(.closed)+.controller{border-top:1px solid var(--widget-color);margin-top:0;padding-top:var(--spacing)}.lil-gui .lil-gui .controller{border:none}.lil-gui .lil-gui .lil-gui>.title{border:none}.lil-gui .lil-gui .lil-gui>.children{border:none;margin-left:var(--folder-indent);border-left:2px solid var(--widget-color)}.lil-gui input{border:0;outline:none;font-family:var(--font-family);font-size:var(--font-size);border-radius:var(--widget-border-radius);height:var(--widget-height);background:var(--widget-color);color:var(--text-color);width:100%}.lil-gui input[type=text]{padding:var(--widget-padding)}.lil-gui input:focus,.lil-gui input:active{background:var(--highlight-color)}.lil-gui input[type=checkbox]{appearance:none;-webkit-appearance:none;height:var(--checkbox-size);width:var(--checkbox-size);border-radius:var(--widget-border-radius);text-align:center}.lil-gui input[type=checkbox]:checked:before{font-family:"lil-gui";content:"✓";font-size:var(--checkbox-size);line-height:var(--checkbox-size)}.lil-gui button{-webkit-tap-highlight-color:transparent;outline:none;cursor:pointer;border:0;font-family:var(--font-family);font-size:var(--font-size);color:var(--text-color);text-align:left;width:100%;text-transform:none}.lil-gui .display{background:var(--widget-color)}.lil-gui .display.focus,.lil-gui .display.active{background:var(--highlight-color)}@font-face{font-family:"lil-gui";src:url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAABqAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPQAAAFZr2333Y21hcAAAAYQAAABuAAABssJQk9tnbHlmAAAB9AAAAF8AAACEIZ5WI2hlYWQAAAJUAAAAJwAAADZfcj23aGhlYQAAAnwAAAAYAAAAJAC5AGpobXR4AAAClAAAAA4AAAAUAZAAAGxvY2EAAAKkAAAADAAAAAwARABkbWF4cAAAArAAAAAeAAAAIAERABJuYW1lAAAC0AAAASIAAAIK9SUU/XBvc3QAAAP0AAAAQgAAAFiCDrX0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQIYJzAwMrAwGDP4AYk+aC0AQMLgyQDAxMDKzMDVhCQ5prC4KA4VV2YIQXI5QSTDAyMIAIA82gFuAAAAHic7ZGxDYAwDAQvISCE6JiAIkrDEBmIil3YJVVWAztOwRC8dZH9ily8gREYhEMI4C4cqlNc1/yBpfmBLPPCjMfvdyyxpu154Nt3Oflnpb2XHbp74tfa3tynoOkZmnYshiRGrIZeJ20G4QWoQBFzAAB4nGNgYgABH4YwBiYGVgYGe0ZxUXZ1SRCwkZQUkZQEyTKC1dgyuIJUmLOrm6ub2yqyS0mxq4BJqLw7gyVYXt1c3FxcDSwjiCwfwuCLkNcU5+RT4pQU4+RT5gQAe+sKMgB4nGNgZGBgAOKTAv9nx/PbfGXgZkhhwAZCGMKAJAcDE4gDAMWSBTgAeJxjYGRgYEhhYICTIQyMDKiAFQAceQEkeJxjYACCFFQMAA4kAZEAAAAAAAAAEgAiADIAQnicY2BkYGBgZWBjYGIAARDJBYQMDP/BfAYACZUBJAAAeJxd0E1Kw0AcBfCXfmIDRRBdicxKF9L0Y9kDtPsuAi7TdJKmTDNhMi3UE3gCT+ApPIB4LF/Df2NmSPKbNy8DCYBb/CDAdQQYNvfr6NBDcZcai3v0vbiPEI/iAfMX8QiviMQh7vDGE4LeDZMxjLhDv4u79Ie4R3+K+3jAl3jA/Fs8QoxfcYjn4MkUZpKfio3OTyZxspJHrF1d2FLNo5kka11ql3i9U9uLqs/5wvtMZc4e1cqWXhtjVeXsQac+2ntfLafTTPIotUd+QcFrghwnagPdyCCBa+39X8VsOtSURQmFOf/RrNVZs1M2vQSezx17W1x4r3FmZ8HUI+M6Y8fiSK2a865tw2mZVM3egUnKPMK+eavCElPOrNWP2OJJf3XUWN4AAHicY2BigABGBuyAlZGJkZmRhZGVkY2BI6UovyAlvzyPNy0/JyW1SDc5J784NYUbyssvSM1jTc5ITc5mYAAAYLAPMAAA") format("woff")}';let m=!1;class A{constructor({parent:t,autoPlace:e=void 0===t,mobileBreakpoint:i=500,mobileMaxHeight:s=200,container:n,injectStyles:r=!0,title:l="Controls",width:o,queryKey:a}={}){this.parent=t,this.root=t?t.root:this,this.children=[],this._closed=!1,this.domElement=document.createElement("div"),this.domElement.classList.add("lil-gui"),this.$title=document.createElement("div"),this.$title.classList.add("title"),this.$title.addEventListener("click",()=>{this.open(this._closed)}),this.$children=document.createElement("div"),this.$children.classList.add("children"),this.domElement.appendChild(this.$title),this.domElement.appendChild(this.$children),this.parent?(this.parent.children.push(this),this.parent.$children.appendChild(this.domElement)):(this.domElement.classList.add("root"),o&&this.domElement.style.setProperty("--width",o+"px"),!m&&r&&(!function(t){const e=document.createElement("style");e.innerHTML=t;const i=document.querySelector("head link[rel=stylesheet], head style");i?document.head.insertBefore(e,i):document.head.appendChild(e)}(g),m=!0),n?n.appendChild(this.domElement):e&&(this.domElement.classList.add("autoPlace"),document.body.appendChild(this.domElement)),this.mobileMaxHeight=s,this._initMobileMaxHeight(),this._onResize=()=>{this.domElement.style.setProperty("--window-height",window.innerHeight+"px"),this.domElement.classList.toggle("mobile",window.innerWidth<=i)},this._onResize(),window.addEventListener("resize",this._onResize)),a&&!new RegExp(`\\b${a}\\b`).test(location.search)&&(this.domElement.style.display="none"),this.title(l)}add(t,e,s,n,r){if(Object(s)===s)return new u(this,t,e,s);const l=t[e];switch(typeof l){case"number":return new c(this,t,e,s,n,r);case"boolean":return new i(this,t,e);case"string":return new p(this,t,e);case"function":return new d(this,t,e)}console.error(`Failed to add controller for "${e}"`,l,t)}addColor(t,e,i=1){return new h(this,t,e,i)}addFolder(t){return new A({parent:this,title:t})}getControllers(t=!0){let i=this.children.filter(t=>t instanceof e);return t?(this.getFolders(!0).forEach(t=>{i=i.concat(t.getControllers(!1))}),i):i}getFolders(t=!0){const e=this.children.filter(t=>t instanceof A);if(!t)return e;let i=Array.from(e);return e.forEach(t=>{i=i.concat(t.getFolders(!0))}),i}export(t=!0){const e={};return this.getControllers(t).forEach(t=>{e[t._name]=t.export()}),e}import(t,e=!0){return this.getControllers(e).forEach(e=>{e._name in t&&e.import(t[e._name])}),this}reset(t=!0){return this.getControllers(t).forEach(t=>t.reset()),this}title(t){return this._title=t,this.$title.innerHTML=t,this}open(t=!0){return this._closed=!t,this.domElement.classList.toggle("closed",this._closed),this}close(){return this._closed=!0,this.domElement.classList.add("closed"),this}destroy(){this.parent&&this.parent.children.splice(this.parent.children.indexOf(this),1),this.domElement.parentElement&&this.domElement.parentElement.removeChild(this.domElement),Array.from(this.children).forEach(t=>t.destroy()),this._onResize&&window.removeEventListener("resize",this._onResize)}_initMobileMaxHeight(){let t;const e=e=>{e.preventDefault();const i=e.touches[0].clientY-t;t=e.touches[0].clientY,this.mobileMaxHeight-=i},i=()=>{window.removeEventListener("touchmove",e),window.removeEventListener("touchend",i)};this.$title.addEventListener("touchstart",s=>{s.touches.length>1||(t=s.touches[0].clientY,window.addEventListener("touchmove",e,{passive:!1}),window.addEventListener("touchend",i))})}get mobileMaxHeight(){return this._mobileMaxHeight}set mobileMaxHeight(t){this._mobileMaxHeight=t,this.domElement.style.setProperty("--mobile-max-height",t+"px")}}t.BooleanController=i,t.ColorController=h,t.Controller=e,t.FunctionController=d,t.GUI=A,t.NumberController=c,t.OptionController=u,t.StringController=p,t.default=A,Object.defineProperty(t,"__esModule",{value:!0})})); | ||
| !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).lil={})}(this,(function(t){"use strict";class i{constructor(t,i,e,s,n="div"){this.parent=t,this.object=i,this.property=e,this._disabled=!1,this.initialValue=this.getValue(),this.domElement=document.createElement(n),this.domElement.classList.add("controller"),this.domElement.classList.add(s),this.$name=document.createElement("div"),this.$name.classList.add("name"),this.$widget=document.createElement("div"),this.$widget.classList.add("widget"),this.domElement.appendChild(this.$name),this.domElement.appendChild(this.$widget),this.parent.children.push(this),this.parent.$children.appendChild(this.domElement),this._listenCallback=this._listenCallback.bind(this),this.name(e)}name(t){return this._name=t,this.$name.innerHTML=t,this}onChange(t){return this._onChange=t,this}onFinishChange(t){return this.onChange(t)}reset(){return this.setValue(this.initialValue),this}enable(t=!0){return this._disabled=!t,this.domElement.classList.toggle("disabled",this._disabled),this}disable(t=!0){return this._disabled=t,this.domElement.classList.toggle("disabled",this._disabled),this}options(t){const i=this.parent.add(this.object,this.property,t);return i.name(this._name),this.destroy(),i}min(t){return this}max(t){return this}step(t){return this}listen(t=!0){return this._listening=t,void 0!==this._listenCallbackID&&(cancelAnimationFrame(this._listenCallbackID),this._listenCallbackID=void 0),this._listening&&this._listenCallback(),this}_listenCallback(){this._listenCallbackID=requestAnimationFrame(this._listenCallback),this.updateDisplay()}getValue(){return this.object[this.property]}setValue(t){return this.object[this.property]=t,this._callOnChange(),this.updateDisplay(),this}_callOnChange(){void 0!==this._onChange&&this._onChange.call(this,this.getValue())}updateDisplay(){return this}import(t){return this.setValue(t),this}export(){return this.getValue()}destroy(){this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.$children.removeChild(this.domElement)}}class e extends i{constructor(t,i,e){super(t,i,e,"boolean","label"),this.$input=document.createElement("input"),this.$input.setAttribute("type","checkbox"),this.$widget.appendChild(this.$input),this.$input.addEventListener("change",()=>{this.setValue(this.$input.checked)}),this.updateDisplay()}updateDisplay(){return this.$input.checked=this.getValue(),this}}function s(t){let i,e;return(i=t.match(/(#|0x)?([a-f0-9]{6})/i))?e=i[2]:(i=t.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/))?e=parseInt(i[1]).toString(16).padStart(2,0)+parseInt(i[2]).toString(16).padStart(2,0)+parseInt(i[3]).toString(16).padStart(2,0):(i=t.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i))&&(e=i[1]+i[1]+i[2]+i[2]+i[3]+i[3]),!!e&&"#"+e}const n={isPrimitive:!0,match:t=>"string"==typeof t,fromHexString:s,toHexString:s},r={isPrimitive:!0,match:t=>"number"==typeof t,fromHexString:t=>parseInt(t.substring(1),16),toHexString:t=>"#"+t.toString(16).padStart(6,0)},l={isPrimitive:!1,match:Array.isArray,fromHexString(t,i,e=1){const s=r.fromHexString(t);i[0]=(s>>16&255)/255*e,i[1]=(s>>8&255)/255*e,i[2]=(255&s)/255*e},toHexString:([t,i,e],s=1)=>r.toHexString(t*(s=255/s)<<16^i*s<<8^e*s<<0)},o={isPrimitive:!1,match:t=>Object(t)===t,fromHexString(t,i,e=1){const s=r.fromHexString(t);i.r=(s>>16&255)/255*e,i.g=(s>>8&255)/255*e,i.b=(255&s)/255*e},toHexString:({r:t,g:i,b:e},s=1)=>r.toHexString(t*(s=255/s)<<16^i*s<<8^e*s<<0)},a=[n,r,l,o];class h extends i{constructor(t,i,e,n){var r;super(t,i,e,"color"),this.$input=document.createElement("input"),this.$input.setAttribute("type","color"),this.$input.setAttribute("tabindex",-1),this.$text=document.createElement("input"),this.$text.setAttribute("type","text"),this.$text.setAttribute("spellcheck","false"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this.$display.appendChild(this.$input),this.$widget.appendChild(this.$display),this.$widget.appendChild(this.$text),this._format=(r=this.initialValue,a.find(t=>t.match(r))),this._rgbScale=n,this._initialValueHexString=this.export(),this._textFocused=!1,this.$input.addEventListener("change",()=>{this._setValueFromHexString(this.$input.value)}),this.$input.addEventListener("focus",()=>{this.$display.classList.add("focus")}),this.$input.addEventListener("blur",()=>{this.$display.classList.remove("focus")}),this.$text.addEventListener("input",()=>{const t=s(this.$text.value);t&&this._setValueFromHexString(t)}),this.$text.addEventListener("focus",()=>{this._textFocused=!0,this.$text.select()}),this.$text.addEventListener("blur",()=>{this._textFocused=!1,this.updateDisplay()}),this.updateDisplay()}reset(){return this._setValueFromHexString(this._initialValueHexString),this}_setValueFromHexString(t){if(this._format.isPrimitive){const i=this._format.fromHexString(t);this.setValue(i)}else this._format.fromHexString(t,this.getValue(),this._rgbScale),this._callOnChange(),this.updateDisplay()}export(){return this._format.toHexString(this.getValue(),this._rgbScale)}import(t){return this._setValueFromHexString(t),this}updateDisplay(){this.$input.value=this._format.toHexString(this.getValue(),this._rgbScale),this._textFocused||(this.$text.value=this.$input.value.substring(1)),this.$display.style.backgroundColor=this.$input.value}}class d extends i{constructor(t,i,e){super(t,i,e,"function","button"),this.domElement.addEventListener("click",()=>{this.getValue().call(this.object)})}}class c extends i{constructor(t,i,e,s,n,r){super(t,i,e,"number"),this._initInput(),this.min(s),this.max(n);const l=void 0!==r;this.step(l?r:this._getImplicitStep(),l),this.updateDisplay()}min(t){return this._min=t,this._onUpdateMinMax(),this}max(t){return this._max=t,this._onUpdateMinMax(),this}step(t,i=!0){return this._step=t,this._stepExplicit=i,this}updateDisplay(){const t=this.getValue();if(this._hasSlider){const i=(t-this._min)/(this._max-this._min);this.$fill.style.setProperty("width",100*i+"%")}return this._inputFocused||(this.$input.value=t),this}_initInput(){this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.setAttribute("inputmode","numeric"),this.$widget.appendChild(this.$input);const t=t=>{const i=parseFloat(this.$input.value);isNaN(i)||(this._snapClampSetValue(i+t),this.$input.value=this.getValue())};this.$input.addEventListener("focus",()=>{this._inputFocused=!0}),this.$input.addEventListener("input",()=>{const t=parseFloat(this.$input.value);isNaN(t)||this.setValue(this._clamp(t))}),this.$input.addEventListener("blur",()=>{this._inputFocused=!1,this.updateDisplay()}),this.$input.addEventListener("keydown",i=>{13===i.keyCode&&this.$input.blur(),38===i.keyCode&&(i.preventDefault(),t(this._step*this._arrowKeyMultiplier(i))),40===i.keyCode&&(i.preventDefault(),t(-1*this._step*this._arrowKeyMultiplier(i)))}),this.$input.addEventListener("wheel",i=>{this._inputFocused&&(i.preventDefault(),t(this._normalizeMouseWheel(i)*this._step))},{passive:!1})}_initSlider(){this._hasSlider=!0,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),this.$widget.insertBefore(this.$slider,this.$input),this.domElement.classList.add("hasSlider");const t=t=>{const i=this.$slider.getBoundingClientRect();let e=((t,i,e,s,n)=>(t-i)/(e-i)*(n-s)+s)(t,i.left,i.right,this._min,this._max);this._snapClampSetValue(e)},i=i=>{t(i.clientX)},e=()=>{this.$slider.classList.remove("active"),window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",e)};this.$slider.addEventListener("mousedown",s=>{t(s.clientX),this.$slider.classList.add("active"),window.addEventListener("mousemove",i),window.addEventListener("mouseup",e)});let s,n,r=!1;const l=i=>{if(r){const e=i.touches[0].clientX-s,a=i.touches[0].clientY-n;Math.abs(e)>Math.abs(a)?(t(i.touches[0].clientX),this.$slider.classList.add("active"),r=!1):(window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o))}else i.preventDefault(),t(i.touches[0].clientX)},o=()=>{this.$slider.classList.remove("active"),window.removeEventListener("touchmove",l),window.removeEventListener("touchend",o)};this.$slider.addEventListener("touchstart",i=>{i.touches.length>1||(this._hasScrollBar?(s=i.touches[0].clientX,n=i.touches[0].clientY,r=!0):(t(i.touches[0].clientX),this.$slider.classList.add("active"),r=!1),window.addEventListener("touchmove",l,{passive:!1}),window.addEventListener("touchend",o))});this.$slider.addEventListener("wheel",t=>{if(this._hasScrollBar)return;t.preventDefault();const i=this._normalizeMouseWheel(t)*this._step;this._snapClampSetValue(this.getValue()+i)},{passive:!1})}_getImplicitStep(){return this._hasMin&&this._hasMax?(this._max-this._min)/1e3:.1}_onUpdateMinMax(){!this._hasSlider&&this._hasMin&&this._hasMax&&(this._stepExplicit||this.step(this._getImplicitStep(),!1),this._initSlider(),this.updateDisplay())}_normalizeMouseWheel(t){let{deltaX:i,deltaY:e}=t;return Math.floor(t.deltaY)!==t.deltaY&&t.wheelDelta&&(i=0,e=-t.wheelDelta/120),i+-e}_arrowKeyMultiplier(t){return this._stepExplicit?t.shiftKey?10:1:t.shiftKey?100:t.altKey?1:10}_snap(t){const i=Math.round(t/this._step)*this._step;return parseFloat(i.toPrecision(15))}_clamp(t){const i=this._hasMin?this._min:-1/0,e=this._hasMax?this._max:1/0;return Math.max(i,Math.min(e,t))}_snapClampSetValue(t){this.setValue(this._clamp(this._snap(t)))}get _hasScrollBar(){const t=this.parent.root.$children;return t.scrollHeight>t.clientHeight}get _hasMin(){return void 0!==this._min}get _hasMax(){return void 0!==this._max}}class u extends i{constructor(t,i,e,s){super(t,i,e,"option"),this.$select=document.createElement("select"),this.$display=document.createElement("div"),this.$display.classList.add("display"),this._values=Array.isArray(s)?s:Object.values(s),this._names=Array.isArray(s)?s:Object.keys(s),this._names.forEach(t=>{const i=document.createElement("option");i.innerHTML=t,this.$select.appendChild(i)}),this.$select.addEventListener("change",()=>{this.setValue(this._values[this.$select.selectedIndex])}),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.updateDisplay()}updateDisplay(){const t=this.getValue(),i=this._values.indexOf(t);return this.$select.selectedIndex=i,this.$display.innerHTML=-1===i?t:this._names[i],this}}class p extends i{constructor(t,i,e){super(t,i,e,"string"),this.$input=document.createElement("input"),this.$input.setAttribute("type","text"),this.$input.addEventListener("input",()=>{this.setValue(this.$input.value)}),this.$input.addEventListener("keydown",t=>{13===t.keyCode&&this.$input.blur()}),this.$widget.appendChild(this.$input),this.updateDisplay()}updateDisplay(){return this.$input.value=this.getValue(),this}}var g='.lil-gui{font-family:var(--font-family);font-size:var(--font-size);line-height:1;font-weight:normal;font-style:normal;text-align:left;background-color:var(--background-color);color:var(--text-color);user-select:none;-webkit-user-select:none;--background-color:#1f1f1f;--text-color:#ebebeb;--title-background-color:#111;--widget-color:#424242;--highlight-color:#525151;--number-color:#2cc9ff;--string-color:#a2db3c;--font-size:11px;--font-family:-apple-system,BlinkMacSystemFont,"Lucida Grande","Segoe UI",Roboto,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-mono:Menlo,Monaco,Consolas,"Droid Sans Mono",monospace,"Droid Sans Fallback";--padding:4px;--spacing:4px;--widget-height:20px;--name-width:45%;--slider-input-width:27%;--color-input-width:27%;--slider-input-min-width:45px;--color-input-min-width:45px;--folder-indent:7px;--widget-padding:0 0 0 3px;--widget-border-radius:2px;--checkbox-size:calc(0.75 * var(--widget-height));--title-height: calc(var(--widget-height) + var(--spacing));--scrollbar-width: 5px}.lil-gui,.lil-gui *{box-sizing:border-box;margin:0}.lil-gui.root{width:var(--width, 250px)}.lil-gui.root>.title{background:var(--title-background-color)}.lil-gui .lil-gui{--background-color:inherit;--text-color:inherit;--title-background-color:inherit;--widget-color:inherit;--highlight-color:inherit;--number-color:inherit;--string-color:inherit;--font-size:inherit;--font-family:inherit;--font-family-mono:inherit;--padding:inherit;--spacing:inherit;--widget-height:inherit;--name-width:inherit;--slider-input-width:inherit;--color-input-width:inherit;--slider-input-min-width:inherit;--color-input-min-width:inherit;--folder-indent:inherit;--widget-padding:inherit;--widget-border-radius:inherit;--checkbox-size:inherit}.lil-gui.mobile{--widget-height: 32px;--padding: 8px;--spacing: 8px;--font-size: 15px;--folder-indent: 12px;--widget-padding: 0 0 0 5px;--scrollbar-width: 7px;--slider-input-min-width: 65px;--color-input-min-width: 65px;width:100%}.lil-gui.autoPlace{position:fixed;top:0;right:15px;z-index:1001}.lil-gui.autoPlace>.children{max-height:calc(var(--max-height) - var(--title-height))}.lil-gui.autoPlace.mobile{top:auto;right:auto;bottom:0;left:0}.lil-gui .controller{display:flex;align-items:center;padding:0 var(--padding);margin:var(--spacing) 0}.lil-gui .controller.disabled{opacity:.5;pointer-events:none}.lil-gui .controller .name{min-width:var(--name-width);flex-shrink:0;white-space:pre;padding-right:var(--spacing)}.lil-gui .controller .widget{position:relative;display:flex;align-items:center;width:100%;min-height:var(--widget-height)}.lil-gui .controller.number input{color:var(--number-color)}.lil-gui .controller.number.hasSlider input{margin-left:var(--spacing);width:var(--slider-input-width);min-width:var(--slider-input-min-width);flex-shrink:0}.lil-gui .controller.number .slider{width:100%;height:var(--widget-height);background-color:var(--widget-color);border-radius:var(--widget-border-radius);overflow:hidden}.lil-gui .controller.number .slider.active{background-color:var(--highlight-color)}.lil-gui .controller.number .slider.active .fill{opacity:.95}.lil-gui .controller.number .fill{height:100%;border-right:2px solid var(--number-color)}.lil-gui .controller.string input{color:var(--string-color)}.lil-gui .controller.color .display{width:100%;height:var(--widget-height);border-radius:var(--widget-border-radius)}.lil-gui .controller.color input[type=color]{opacity:0;width:100%;height:100%;cursor:pointer}.lil-gui .controller.color input[type=text]{margin-left:var(--spacing);font-family:var(--font-family-mono);min-width:var(--color-input-min-width);width:var(--color-input-width);flex-shrink:0}.lil-gui .controller.option select{opacity:0;position:absolute;width:100%;max-width:100%}.lil-gui .controller.option .display{pointer-events:none;border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height);position:relative;max-width:100%;overflow:hidden;word-break:break-all;padding-left:.55em;padding-right:1.75em}.lil-gui .controller.option .display:after{font-family:"lil-gui";content:"↕";position:absolute;top:0;right:0;bottom:0;padding-right:.375em}.lil-gui .controller.function{background:none}@media(hover: hover){.lil-gui .controller.function:hover .name{background:var(--highlight-color)}}.lil-gui .controller.function:active .name{background:var(--text-color);color:var(--background-color)}.lil-gui .controller.function .name{display:block;padding:0;text-align:center;width:100%;background:var(--widget-color);border-radius:var(--widget-border-radius);height:var(--widget-height);line-height:var(--widget-height)}.lil-gui .controller.function .widget{display:none}.lil-gui .title{height:var(--title-height);font-weight:600;padding:0 var(--padding);line-height:calc(var(--title-height) - 2px);-webkit-tap-highlight-color:transparent;cursor:pointer}.lil-gui .title:before{font-family:"lil-gui";content:"▾"}.lil-gui.closed .children{display:none}.lil-gui.closed .title:before{content:"▸"}.lil-gui>.children{overflow:auto}.lil-gui>.children::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width);background:var(--background-color)}.lil-gui>.children::-webkit-scrollbar-corner{display:none}.lil-gui>.children::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-width);background:var(--highlight-color)}.lil-gui .children:empty:before{content:"Empty";padding:0 var(--padding);margin:var(--spacing) 0;display:block;height:var(--widget-height);font-style:italic;line-height:var(--widget-height);opacity:.5}.lil-gui .lil-gui:not(.closed)>.title{border-bottom:1px solid var(--widget-color)}.lil-gui:not(.closed)+.controller{border-top:1px solid var(--widget-color);margin-top:0;padding-top:var(--spacing)}.lil-gui .lil-gui .controller{border:none}.lil-gui .lil-gui .lil-gui>.title{border:none}.lil-gui .lil-gui .lil-gui>.children{border:none;margin-left:var(--folder-indent);border-left:2px solid var(--widget-color)}.lil-gui input{border:0;outline:none;font-family:var(--font-family);font-size:var(--font-size);border-radius:var(--widget-border-radius);height:var(--widget-height);background:var(--widget-color);color:var(--text-color);width:100%}.lil-gui input[type=text]{padding:var(--widget-padding)}.lil-gui input:focus,.lil-gui input:active{background:var(--highlight-color)}.lil-gui input[type=checkbox]{appearance:none;-webkit-appearance:none;height:var(--checkbox-size);width:var(--checkbox-size);border-radius:var(--widget-border-radius);text-align:center}.lil-gui input[type=checkbox]:checked:before{font-family:"lil-gui";content:"✓";font-size:var(--checkbox-size);line-height:var(--checkbox-size)}.lil-gui button{-webkit-tap-highlight-color:transparent;outline:none;cursor:pointer;border:0;font-family:var(--font-family);font-size:var(--font-size);color:var(--text-color);text-align:left;width:100%;text-transform:none}.lil-gui .display{background:var(--widget-color)}.lil-gui .display.focus,.lil-gui .display.active{background:var(--highlight-color)}@font-face{font-family:"lil-gui";src:url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAABqAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPQAAAFZr2333Y21hcAAAAYQAAABuAAABssJQk9tnbHlmAAAB9AAAAF8AAACEIZ5WI2hlYWQAAAJUAAAAJwAAADZfcj23aGhlYQAAAnwAAAAYAAAAJAC5AGpobXR4AAAClAAAAA4AAAAUAZAAAGxvY2EAAAKkAAAADAAAAAwARABkbWF4cAAAArAAAAAeAAAAIAERABJuYW1lAAAC0AAAASIAAAIK9SUU/XBvc3QAAAP0AAAAQgAAAFiCDrX0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQIYJzAwMrAwGDP4AYk+aC0AQMLgyQDAxMDKzMDVhCQ5prC4KA4VV2YIQXI5QSTDAyMIAIA82gFuAAAAHic7ZGxDYAwDAQvISCE6JiAIkrDEBmIil3YJVVWAztOwRC8dZH9ily8gREYhEMI4C4cqlNc1/yBpfmBLPPCjMfvdyyxpu154Nt3Oflnpb2XHbp74tfa3tynoOkZmnYshiRGrIZeJ20G4QWoQBFzAAB4nGNgYgABH4YwBiYGVgYGe0ZxUXZ1SRCwkZQUkZQEyTKC1dgyuIJUmLOrm6ub2yqyS0mxq4BJqLw7gyVYXt1c3FxcDSwjiCwfwuCLkNcU5+RT4pQU4+RT5gQAe+sKMgB4nGNgZGBgAOKTAv9nx/PbfGXgZkhhwAZCGMKAJAcDE4gDAMWSBTgAeJxjYGRgYEhhYICTIQyMDKiAFQAceQEkeJxjYACCFFQMAA4kAZEAAAAAAAAAEgAiADIAQnicY2BkYGBgZWBjYGIAARDJBYQMDP/BfAYACZUBJAAAeJxd0E1Kw0AcBfCXfmIDRRBdicxKF9L0Y9kDtPsuAi7TdJKmTDNhMi3UE3gCT+ApPIB4LF/Df2NmSPKbNy8DCYBb/CDAdQQYNvfr6NBDcZcai3v0vbiPEI/iAfMX8QiviMQh7vDGE4LeDZMxjLhDv4u79Ie4R3+K+3jAl3jA/Fs8QoxfcYjn4MkUZpKfio3OTyZxspJHrF1d2FLNo5kka11ql3i9U9uLqs/5wvtMZc4e1cqWXhtjVeXsQac+2ntfLafTTPIotUd+QcFrghwnagPdyCCBa+39X8VsOtSURQmFOf/RrNVZs1M2vQSezx17W1x4r3FmZ8HUI+M6Y8fiSK2a865tw2mZVM3egUnKPMK+eavCElPOrNWP2OJJf3XUWN4AAHicY2BigABGBuyAlZGJkZmRhZGVkY2BI6UovyAlvzyPNy0/JyW1SDc5J784NYUbyssvSM1jTc5ITc5mYAAAYLAPMAAA") format("woff")}';let m=!1;class A{constructor({parent:t,autoPlace:i=void 0===t,mobileBreakpoint:e=500,mobileMaxHeight:s=200,container:n,injectStyles:r=!0,title:l="Controls",width:o,queryKey:a}={}){this.parent=t,this.root=t?t.root:this,this.children=[],this._closed=!1,this.domElement=document.createElement("div"),this.domElement.classList.add("lil-gui"),this.$title=document.createElement("div"),this.$title.classList.add("title"),this.$title.addEventListener("click",()=>{this.open(this._closed)}),this.$children=document.createElement("div"),this.$children.classList.add("children"),this.domElement.appendChild(this.$title),this.domElement.appendChild(this.$children),this.parent?(this.parent.children.push(this),this.parent.$children.appendChild(this.domElement)):(this.domElement.classList.add("root"),o&&this.domElement.style.setProperty("--width",o+"px"),!m&&r&&(!function(t){const i=document.createElement("style");i.innerHTML=t;const e=document.querySelector("head link[rel=stylesheet], head style");e?document.head.insertBefore(i,e):document.head.appendChild(i)}(g),m=!0),n?n.appendChild(this.domElement):i&&(this.domElement.classList.add("autoPlace"),document.body.appendChild(this.domElement),this._initTitleDrag())),this._onResize=()=>{const t=window.innerWidth<=e;this.domElement.classList.toggle("mobile",t),this._setMaxHeight(t?s:window.innerHeight)},window.addEventListener("resize",this._onResize),this._onResize(),a&&!new RegExp(`\\b${a}\\b`).test(location.search)&&(this.domElement.style.display="none"),this.title(l)}add(t,i,s,n,r){if(Object(s)===s)return new u(this,t,i,s);const l=t[i];switch(typeof l){case"number":return new c(this,t,i,s,n,r);case"boolean":return new e(this,t,i);case"string":return new p(this,t,i);case"function":return new d(this,t,i)}console.error(`Failed to add controller for "${i}"`,l,t)}addColor(t,i,e=1){return new h(this,t,i,e)}addFolder(t){return new A({parent:this,title:t})}getControllers(t=!0){let e=this.children.filter(t=>t instanceof i);return t?(this.getFolders(!0).forEach(t=>{e=e.concat(t.getControllers(!1))}),e):e}getFolders(t=!0){const i=this.children.filter(t=>t instanceof A);if(!t)return i;let e=Array.from(i);return i.forEach(t=>{e=e.concat(t.getFolders(!0))}),e}reset(t=!0){return this.getControllers(t).forEach(t=>t.reset()),this}import(t,i=!0){return this.getControllers(i).forEach(i=>{i._name in t&&i.import(t[i._name])}),this}export(t=!0){const i={};return this.getControllers(t).forEach(t=>{i[t._name]=t.export()}),i}open(t=!0){return this._closed=!t,this.domElement.classList.toggle("closed",this._closed),this}close(){return this._closed=!0,this.domElement.classList.add("closed"),this}title(t){return this._title=t,!1===t?this.$title.style.display="none":(this.$title.style.display="",this.$title.innerHTML=t),this}destroy(){this.parent&&this.parent.children.splice(this.parent.children.indexOf(this),1),this.domElement.parentElement&&this.domElement.parentElement.removeChild(this.domElement),Array.from(this.children).forEach(t=>t.destroy()),this._onResize&&window.removeEventListener("resize",this._onResize)}_initTitleDrag(){let t;const i=i=>{i.preventDefault();const e=i.touches[0].clientY-t;t=i.touches[0].clientY,this._setMaxHeight(this._maxHeight-e)},e=()=>{window.removeEventListener("touchmove",i),window.removeEventListener("touchend",e)};this.$title.addEventListener("touchstart",s=>{!this.domElement.classList.contains("mobile")||this.domElement.classList.contains("closed")||s.touches.length>1||(t=s.touches[0].clientY,window.addEventListener("touchmove",i,{passive:!1}),window.addEventListener("touchend",e))})}_setMaxHeight(t){this._maxHeight=Math.min(t,window.innerHeight),this.domElement.style.setProperty("--max-height",t+"px")}}t.BooleanController=e,t.ColorController=h,t.Controller=i,t.FunctionController=d,t.GUI=A,t.NumberController=c,t.OptionController=u,t.StringController=p,t.default=A,Object.defineProperty(t,"__esModule",{value:!0})})); |
| { | ||
| "name": "lil-gui", | ||
| "version": "0.8.11", | ||
| "version": "0.8.14", | ||
| "author": { | ||
@@ -26,5 +26,4 @@ "name": "George Michael Brower" | ||
| "server": "live-server --watch=$npm_package_main,index.html,examples --no-browser", | ||
| "preversion": "npm run build:all && npm test", | ||
| "version": "npm run build:all && git add -A dist style/icons.scss", | ||
| "postversion": "git push --tags", | ||
| "preversion": "npm run build && npm test", | ||
| "version": "npm run build:all && git add -A dist style/icons.scss API.md index.html", | ||
| "dev": "npm run build && node -r esm scripts/dev.js" | ||
@@ -31,0 +30,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.06%
153552
- Lines of code
- increased by0.42%
3340
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes