UNPKG

rad-gui

Version:

A simple, feature-rich, and easy-to-use GUI library for better visibility into data intensive applications.

1 lines 39.7 kB
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["rad-gui"]=e():t["rad-gui"]=e()}(self,(()=>(()=>{"use strict";var t={64:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.FunctionControl=void 0;const i=n(r(722)),s=r(287);class o extends i.default{$button;constructor(t,e,r){super(t,e,r,"function"),this.$button=(0,s.el)("button",{children:[this.$name]},{click:[t=>{t.preventDefault(),this.getValue().call(this.object),this._callOnChange()}],touchstart:[()=>{},{passive:!0}]}),this.$widget.appendChild(this.$button),this.$elForDisable=this.$button}}e.default=o,e.FunctionControl=o},108:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.ColorControl=void 0;const i=n(r(722)),s=r(287),o=n(r(838)),l=n(r(683));class a extends i.default{$input;$text;$display;_format;_rgbScale;_initialValueHexString;_textFocused;constructor(t,e,r,n){super(t,e,r,"color"),this.$input=(0,s.el)("input",{type:"color",tabindex:"-1","aria-labelledby":this.$name.id},{blur:[()=>{this._callOnFinishChange()}],input:[()=>{this._setValueFromHexString(this.$input.value)}]}),this.$text=(0,s.el)("input",{type:"text",spellcheck:"false",tabindex:"-1","aria-labelledby":this.$name.id},{blur:[()=>{this._textFocused=!1,this.update(),this._callOnFinishChange()}],input:[t=>{const e=(0,l.default)(t.target.value);e&&this._setValueFromHexString(e)}],focus:[()=>{this._textFocused=!0,this.$text.select()}]}),this.$display=(0,s.el)("div",{classList:["display"],children:[this.$input]}),this.$widget.appendChild(this.$display),this.$widget.appendChild(this.$text),this._format=(0,o.default)(this.initialValue),this._rgbScale=n,this._initialValueHexString=this.save(),this._textFocused=!1,this.$elForDisable=this.$text,this.update()}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.update()}save(){return this._format.toHexString(this.getValue(),this._rgbScale)}load(t){return this._setValueFromHexString(t),this._callOnFinishChange(),this}update(){return 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,this}}e.default=a,e.ColorControl=a},156:function(t,e,r){var n,i=this&&this.__createBinding||(Object.create?function(t,e,r,n){void 0===n&&(n=r);var i=Object.getOwnPropertyDescriptor(e,r);i&&!("get"in i?!e.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,n,i)}:function(t,e,r,n){void 0===n&&(n=r),t[n]=e[r]}),s=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),o=this&&this.__importStar||(n=function(t){return n=Object.getOwnPropertyNames||function(t){var e=[];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[e.length]=r);return e},n(t)},function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r=n(t),o=0;o<r.length;o++)"default"!==r[o]&&i(e,t,r[o]);return s(e,t),e});Object.defineProperty(e,"__esModule",{value:!0}),e.hasInjectedStyles=e.injectStyles=e.el=e.RadGUI=e.GUI=void 0;const l=r(995);Object.defineProperty(e,"GUI",{enumerable:!0,get:function(){return l.GUI}}),Object.defineProperty(e,"RadGUI",{enumerable:!0,get:function(){return l.RadGUI}});const a=r(287);Object.defineProperty(e,"el",{enumerable:!0,get:function(){return a.el}});const h=o(r(158));e.injectStyles=h.default,Object.defineProperty(e,"hasInjectedStyles",{enumerable:!0,get:function(){return h.hasInjectedStyles}}),r(636),e.default=l.GUI,window.rad={GUI:l.GUI,RadGUI:l.RadGUI,el:a.el,injectStyles:h.default}},158:(t,e,r)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.injectStyles=s,e.hasInjectedStyles=function(){return i};const n=r(287);r(515);let i=!1;function s(){if(i)return;const t=(0,n.el)("style",{id:"rad-gui-styles",innerHTML:'.rad-gui {\r\n font-family: var(--font-family);\r\n font-size: var(--font-size);\r\n line-height: 1;\r\n font-weight: normal;\r\n font-style: normal;\r\n text-align: left;\r\n color: var(--text-color);\r\n user-select: none;\r\n -webkit-user-select: none;\r\n touch-action: manipulation;\r\n --background-color: #1f1f1f;\r\n --text-color: #ebebeb;\r\n --title-background-color: #111111;\r\n --title-text-color: #ebebeb;\r\n --widget-color: #424242;\r\n --hover-color: #4f4f4f;\r\n --focus-color: #595959;\r\n --number-color: #2cc9ff;\r\n --string-color: #a2db3c;\r\n --font-size: 11px;\r\n --input-font-size: 11px;\r\n --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;\r\n --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;\r\n --padding: 4px;\r\n --spacing: 4px;\r\n --widget-height: 20px;\r\n --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);\r\n --name-width: 45%;\r\n --slider-knob-width: 2px;\r\n --slider-input-width: 27%;\r\n --color-input-width: 27%;\r\n --slider-input-min-width: 45px;\r\n --color-input-min-width: 45px;\r\n --folder-indent: 7px;\r\n --widget-padding: 0 0 0 3px;\r\n --widget-border-radius: 2px;\r\n --checkbox-size: calc(0.75 * var(--widget-height));\r\n --scrollbar-width: 5px;\r\n}\r\n\r\n.rad-gui,\r\n.rad-gui * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.rad-gui.root {\r\n width: var(--width, 245px);\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--background-color);\r\n}\r\n\r\n.rad-gui.root>.title {\r\n background: var(--title-background-color);\r\n color: var(--title-text-color);\r\n}\r\n\r\n.rad-gui.root>.children {\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n}\r\n\r\n.rad-gui.root>.children::-webkit-scrollbar {\r\n width: var(--scrollbar-width);\r\n height: var(--scrollbar-width);\r\n background: var(--background-color);\r\n}\r\n\r\n.rad-gui.root>.children::-webkit-scrollbar-thumb {\r\n border-radius: var(--scrollbar-width);\r\n background: var(--focus-color);\r\n}\r\n\r\n@media (pointer: coarse) {\r\n\r\n .rad-gui.allow-touch-styles,\r\n .rad-gui.allow-touch-styles .rad-gui {\r\n --widget-height: 28px;\r\n --padding: 6px;\r\n --spacing: 6px;\r\n --font-size: 13px;\r\n --input-font-size: 16px;\r\n --folder-indent: 10px;\r\n --scrollbar-width: 7px;\r\n --slider-input-min-width: 50px;\r\n --color-input-min-width: 65px;\r\n }\r\n}\r\n\r\n.rad-gui.force-touch-styles,\r\n.rad-gui.force-touch-styles .rad-gui {\r\n --widget-height: 28px;\r\n --padding: 6px;\r\n --spacing: 6px;\r\n --font-size: 13px;\r\n --input-font-size: 16px;\r\n --folder-indent: 10px;\r\n --scrollbar-width: 7px;\r\n --slider-input-min-width: 50px;\r\n --color-input-min-width: 65px;\r\n}\r\n\r\n.rad-gui.autoPlace {\r\n max-height: 100%;\r\n position: fixed;\r\n top: 0;\r\n right: 15px;\r\n z-index: 1001;\r\n}\r\n\r\n.rad-gui .controller {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 var(--padding);\r\n margin: var(--spacing) 0;\r\n}\r\n\r\n.rad-gui .controller.disabled {\r\n opacity: 0.5;\r\n}\r\n\r\n.rad-gui .controller.disabled,\r\n.rad-gui .controller.disabled * {\r\n pointer-events: none !important;\r\n}\r\n\r\n.rad-gui .controller>.name {\r\n min-width: var(--name-width);\r\n flex-shrink: 0;\r\n white-space: pre;\r\n padding-right: var(--spacing);\r\n line-height: var(--widget-height);\r\n}\r\n\r\n.rad-gui .controller .widget {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n min-height: var(--widget-height);\r\n}\r\n\r\n.rad-gui .controller.string input {\r\n color: var(--string-color);\r\n}\r\n\r\n.rad-gui .controller.boolean {\r\n cursor: pointer;\r\n}\r\n\r\n.rad-gui .controller.color .display {\r\n width: 100%;\r\n height: var(--widget-height);\r\n border-radius: var(--widget-border-radius);\r\n position: relative;\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui .controller.color .display:hover:before {\r\n content: " ";\r\n display: block;\r\n position: absolute;\r\n border-radius: var(--widget-border-radius);\r\n border: 1px solid #fff9;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n }\r\n}\r\n\r\n.rad-gui .controller.color input[type=color] {\r\n opacity: 0;\r\n width: 100%;\r\n height: 100%;\r\n cursor: pointer;\r\n}\r\n\r\n.rad-gui .controller.color input[type=text] {\r\n margin-left: var(--spacing);\r\n font-family: var(--font-family-mono);\r\n min-width: var(--color-input-min-width);\r\n width: var(--color-input-width);\r\n flex-shrink: 0;\r\n}\r\n\r\n.rad-gui .controller.option select {\r\n opacity: 0;\r\n position: absolute;\r\n width: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n.rad-gui .controller.option .display {\r\n position: relative;\r\n pointer-events: none;\r\n border-radius: var(--widget-border-radius);\r\n height: var(--widget-height);\r\n line-height: var(--widget-height);\r\n max-width: 100%;\r\n overflow: hidden;\r\n word-break: break-all;\r\n padding-left: 0.55em;\r\n padding-right: 1.75em;\r\n background: var(--widget-color);\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui .controller.option .display.focus {\r\n background: var(--focus-color);\r\n }\r\n}\r\n\r\n.rad-gui .controller.option .display.active {\r\n background: var(--focus-color);\r\n}\r\n\r\n.rad-gui .controller.option .display:after {\r\n font-family: "rad-gui";\r\n content: "↕";\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n padding-right: 0.375em;\r\n}\r\n\r\n.rad-gui .controller.option .widget,\r\n.rad-gui .controller.option select {\r\n cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui .controller.option .widget:hover .display {\r\n background: var(--hover-color);\r\n }\r\n}\r\n\r\n.rad-gui .controller.number input {\r\n color: var(--number-color);\r\n}\r\n\r\n.rad-gui .controller.number.hasSlider input {\r\n margin-left: var(--spacing);\r\n width: var(--slider-input-width);\r\n min-width: var(--slider-input-min-width);\r\n flex-shrink: 0;\r\n}\r\n\r\n.rad-gui .controller.number .slider {\r\n width: 100%;\r\n height: var(--widget-height);\r\n background: var(--widget-color);\r\n border-radius: var(--widget-border-radius);\r\n padding-right: var(--slider-knob-width);\r\n overflow: hidden;\r\n cursor: ew-resize;\r\n touch-action: pan-y;\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui .controller.number .slider:hover {\r\n background: var(--hover-color);\r\n }\r\n}\r\n\r\n.rad-gui .controller.number .slider.active {\r\n background: var(--focus-color);\r\n}\r\n\r\n.rad-gui .controller.number .slider.active .fill {\r\n opacity: 0.95;\r\n}\r\n\r\n.rad-gui .controller.number .fill {\r\n height: 100%;\r\n border-right: var(--slider-knob-width) solid var(--number-color);\r\n box-sizing: content-box;\r\n}\r\n\r\n.rad-gui-dragging .rad-gui {\r\n --hover-color: var(--widget-color);\r\n}\r\n\r\n.rad-gui-dragging * {\r\n cursor: ew-resize !important;\r\n}\r\n\r\n.rad-gui-dragging.rad-gui-vertical * {\r\n cursor: ns-resize !important;\r\n}\r\n\r\n.rad-gui .title {\r\n height: var(--title-height);\r\n line-height: calc(var(--title-height) - 4px);\r\n font-weight: 600;\r\n padding: 0 var(--padding);\r\n -webkit-tap-highlight-color: transparent;\r\n cursor: pointer;\r\n outline: none;\r\n text-decoration-skip: objects;\r\n}\r\n\r\n.rad-gui .title:before {\r\n font-family: "rad-gui";\r\n content: "▾";\r\n padding-right: 2px;\r\n display: inline-block;\r\n}\r\n\r\n.rad-gui .title:active {\r\n background: var(--title-background-color);\r\n opacity: 0.75;\r\n}\r\n\r\n@media (hover: hover) {\r\n body:not(.rad-gui-dragging) .rad-gui .title:hover {\r\n background: var(--title-background-color);\r\n opacity: 0.85;\r\n }\r\n\r\n .rad-gui .title:focus {\r\n text-decoration: underline var(--focus-color);\r\n }\r\n}\r\n\r\n.rad-gui.root>.title:focus {\r\n text-decoration: none !important;\r\n}\r\n\r\n.rad-gui.closed>.title:before {\r\n content: "▸";\r\n}\r\n\r\n.rad-gui.closed>.children {\r\n transform: translateY(-7px);\r\n opacity: 0;\r\n}\r\n\r\n.rad-gui.closed:not(.transition)>.children {\r\n display: none;\r\n}\r\n\r\n.rad-gui.transition>.children {\r\n transition-duration: 300ms;\r\n transition-property: height, opacity, transform;\r\n transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);\r\n overflow: hidden;\r\n pointer-events: none;\r\n}\r\n\r\n.rad-gui .children:empty:before {\r\n content: "Empty";\r\n padding: 0 var(--padding);\r\n margin: var(--spacing) 0;\r\n display: block;\r\n height: var(--widget-height);\r\n font-style: italic;\r\n line-height: var(--widget-height);\r\n opacity: 0.5;\r\n}\r\n\r\n.rad-gui.root>.children>.rad-gui>.title {\r\n border: 0 solid var(--widget-color);\r\n border-width: 1px 0;\r\n transition: border-color 300ms;\r\n}\r\n\r\n.rad-gui.root>.children>.rad-gui.closed>.title {\r\n border-bottom-color: transparent;\r\n}\r\n\r\n.rad-gui+.controller {\r\n border-top: 1px solid var(--widget-color);\r\n margin-top: 0;\r\n padding-top: var(--spacing);\r\n}\r\n\r\n.rad-gui .rad-gui .rad-gui>.title {\r\n border: none;\r\n}\r\n\r\n.rad-gui .rad-gui .rad-gui>.children {\r\n border: none;\r\n margin-left: var(--folder-indent);\r\n border-left: 2px solid var(--widget-color);\r\n}\r\n\r\n.rad-gui .rad-gui .controller {\r\n border: none;\r\n}\r\n\r\n.rad-gui label,\r\n.rad-gui input,\r\n.rad-gui button {\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.rad-gui input {\r\n border: 0;\r\n outline: none;\r\n font-family: var(--font-family);\r\n font-size: var(--input-font-size);\r\n border-radius: var(--widget-border-radius);\r\n height: var(--widget-height);\r\n background: var(--widget-color);\r\n color: var(--text-color);\r\n width: 100%;\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui input:hover {\r\n background: var(--hover-color);\r\n }\r\n\r\n .rad-gui input:active {\r\n background: var(--focus-color);\r\n }\r\n}\r\n\r\n.rad-gui input:disabled {\r\n opacity: 1;\r\n}\r\n\r\n.rad-gui input[type=text],\r\n.rad-gui input[type=number] {\r\n padding: var(--widget-padding);\r\n -moz-appearance: textfield;\r\n}\r\n\r\n.rad-gui input[type=text]:focus,\r\n.rad-gui input[type=number]:focus {\r\n background: var(--focus-color);\r\n}\r\n\r\n.rad-gui input[type=checkbox] {\r\n appearance: none;\r\n width: var(--checkbox-size);\r\n height: var(--checkbox-size);\r\n border-radius: var(--widget-border-radius);\r\n text-align: center;\r\n cursor: pointer;\r\n}\r\n\r\n.rad-gui input[type=checkbox]:checked:before {\r\n font-family: "rad-gui";\r\n content: "✓";\r\n font-size: var(--checkbox-size);\r\n line-height: var(--checkbox-size);\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui input[type=checkbox]:focus {\r\n box-shadow: inset 0 0 0 1px var(--focus-color);\r\n }\r\n}\r\n\r\n.rad-gui button {\r\n outline: none;\r\n cursor: pointer;\r\n font-family: var(--font-family);\r\n font-size: var(--font-size);\r\n color: var(--text-color);\r\n width: 100%;\r\n height: var(--widget-height);\r\n text-transform: none;\r\n background: var(--widget-color);\r\n border-radius: var(--widget-border-radius);\r\n border: none;\r\n}\r\n\r\n@media (hover: hover) {\r\n .rad-gui button:hover {\r\n background: var(--hover-color);\r\n }\r\n\r\n .rad-gui button:focus {\r\n box-shadow: inset 0 0 0 1px var(--focus-color);\r\n }\r\n}\r\n\r\n.rad-gui button:active {\r\n background: var(--focus-color);\r\n}\r\n\r\n@font-face {\r\n font-family: "rad-gui";\r\n src: url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUsAAsAAAAACJwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAH4AAADAImwmYE9TLzIAAAGIAAAAPwAAAGBKqH5SY21hcAAAAcgAAAD0AAACrukyyJBnbHlmAAACvAAAAF8AAACEIZpWH2hlYWQAAAMcAAAAJwAAADZfcj2zaGhlYQAAA0QAAAAYAAAAJAC5AHhobXR4AAADXAAAABAAAABMAZAAAGxvY2EAAANsAAAAFAAAACgCEgIybWF4cAAAA4AAAAAeAAAAIAEfABJuYW1lAAADoAAAASIAAAIK9SUU/XBvc3QAAATEAAAAZgAAAJCTcMc2eJxVjbEOgjAURU+hFRBK1dGRL+ALnAiToyMLEzFpnPz/eAshwSa97517c/MwwJmeB9kwPl+0cf5+uGPZXsqPu4nvZabcSZldZ6kfyWnomFY/eScKqZNWupKJO6kXN3K9uCVoL7iInPr1X5baXs3tjuMqCtzEuagm/AAlzQgPAAB4nGNgYRBlnMDAysDAYM/gBiT5oLQBAwuDJAMDEwMrMwNWEJDmmsJwgCFeXZghBcjlZMgFCzOiKOIFAB71Bb8AeJy1kjFuwkAQRZ+DwRAwBtNQRUGKQ8OdKCAWUhAgKLhIuAsVSpWz5Bbkj3dEgYiUIszqWdpZe+Z7/wB1oCYmIoboiwiLT2WjKl/jscrHfGg/pKdMkyklC5Zs2LEfHYpjcRoPzme9MWWmk3dWbK9ObkWkikOetJ554fWyoEsmdSlt+uR0pCJR34b6t/TVg1SY3sYvdf8vuiKrpyaDXDISiegp17p7579Gp3p++y7HPAiY9pmTibljrr85qSidtlg4+l25GLCaS8e6rRxNBmsnERunKbaOObRz7N72ju5vdAjYpBXHgJylOAVsMseDAPEP8LYoUHicY2BiAAEfhiAGJgZWBgZ7RnFRdnVJELCQlBSRlATJMoLV2DK4glSYs6ubq5vbKrJLSbGrgEmovDuDJVhe3VzcXFwNLCOILB/C4IuQ1xTn5FPilBTj5FPmBAB4WwoqAHicY2BkYGAA4sk1sR/j+W2+MnAzpDBgAyEMQUCSg4EJxAEAwUgFHgB4nGNgZGBgSGFggJMhDIwMqEAYAByHATJ4nGNgAIIUNEwmAABl3AGReJxjYAACIQYlBiMGJ3wQAEcQBEV4nGNgZGBgEGZgY2BiAAEQyQWEDAz/wXwGAAsPATIAAHicXdBNSsNAHAXwl35iA0UQXYnMShfS9GPZA7T7LgIu03SSpkwzYTIt1BN4Ak/gKTyAeCxfw39jZkjymzcvAwmAW/wgwHUEGDb36+jQQ3GXGot79L24jxCP4gHzF/EIr4jEIe7wxhOC3g2TMYy4Q7+Lu/SHuEd/ivt4wJd4wPxbPEKMX3GI5+DJFGaSn4qNzk8mcbKSR6xdXdhSzaOZJGtdapd4vVPbi6rP+cL7TGXOHtXKll4bY1Xl7EGnPtp7Xy2n00zyKLVHfkHBa4IcJ2oD3cgggWvt/V/FbDrUlEUJhTn/0azVWbNTNr0Ens8de1tceK9xZmfB1CPjOmPH4kitmvOubcNpmVTN3oFJyjzCvnmrwhJTzqzVj9jiSX911FjeAAB4nG3HMRKCMBBA0f0giiKi4DU8k0V2GWbIZDOh4PoWWvq6J5V8If9NVNQcaDhyouXMhY4rPTcG7jwYmXhKq8Wz+p762aNaeYXom2n3m2dLTVgsrCgFJ7OTmIkYbwIbC6vIB7WmFfAAAA==") format("woff");\r\n}'}),e=document.querySelector("head link[rel=stylesheet], head style");e?document.head.insertBefore(t,e):document.head.appendChild(t),i=!0}e.default=s},287:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.el=void 0;const r=["classList","children","eventHandlers"];e.el=(t,e={},n={})=>{const i=document.createElement(t);return Object.entries(e).filter((([t])=>!r.includes(t))).forEach((([t,e])=>i[t]=e)),Array.isArray(e?.classList)&&e.classList.filter(Boolean).forEach((t=>i.classList.add(t))),Object.entries(n).forEach((([t,[e,r]])=>i.addEventListener(t,e,r||{}))),Array.isArray(e?.children)&&e.children.forEach((t=>i.appendChild(t))),i}},306:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.NumberControl=void 0;const i=n(r(722)),s=r(287);class o extends i.default{_decimals;_min;_max;_step;_stepExplicit;_hasSlider;_inputFocused;_wheelFinishTimeout;_sliderRect=null;_percent=0;$input;$slider;$fill;_handleInputBound;_handleKeyDownBound;_handleInputWheelBound;_handleSliderMouseDownBound;_handleSliderTouchStartBound;_handleSliderWheelBound;get _hasScrollBar(){const t=this.parent?.root?.$children;return!!t&&t.scrollHeight>t.clientHeight}get _hasMin(){return void 0!==this._min}get _hasMax(){return void 0!==this._max}max=this.setMax;min=this.setMin;step=this.setStep;decimals=this.setDecimals;constructor(t,e,r,n,i,s){super(t,e,r,"number"),this._hasSlider=!1,this._inputFocused=!1,this._step=.1,this._stepExplicit=!1,this._handleInputBound=this._handleInput.bind(this),this._handleKeyDownBound=this._handleKeyDown.bind(this),this._handleInputWheelBound=this._handleInputWheel.bind(this),this._handleSliderMouseDownBound=this._handleSliderMouseDown.bind(this),this._handleSliderTouchStartBound=this._handleSliderTouchStart.bind(this),this._handleSliderWheelBound=this._handleSliderWheel.bind(this),this._initInput(),this.setMin(n),this.setMax(i);const o=void 0!==s;this.setStep(o?s:this._getImplicitStep(),o),this.update()}setDecimals(t){return this._decimals=t,this.update(),this}setMin(t){return this._min===t||(this._min=t,this._onUpdateMinMax()),this}setMax(t){return this._max===t||(this._max=t,this._onUpdateMinMax()),this}setStep(t,e=!0){return this._step=t??.1,this._stepExplicit=e,this}update(){const t=this.getValue();return this._hasSlider&&this._hasMin&&this._hasMax&&(this._percent=Math.max(0,Math.min((t-this._min)/(this._max-this._min),1)),this.$fill.style.width=100*this._percent+"%"),this._inputFocused||(this.$input.value=void 0===this._decimals?t.toString():t.toFixed(this._decimals)),this}_getImplicitStep(){return this._hasMin&&this._hasMax?(this._max-this._min)/1e3:.1}_onUpdateMinMax(){!this._hasSlider&&this._hasMin&&this._hasMax&&(this._stepExplicit||this.setStep(this._getImplicitStep(),!1),this._initSlider(),this.update())}_setDraggingStyle(t,e="horizontal"){this.$slider&&this.$slider.classList.toggle("active",t),document.body.classList.toggle("rad-gui-dragging",t),document.body.classList.toggle(`rad-gui-${e}`,t)}_normalizeMouseWheel(t){let{deltaX:e,deltaY:r}=t;return Math.floor(t.deltaY)!==t.deltaY&&t.wheelDelta&&(e=0,r=-t.wheelDelta/120,r*=this._stepExplicit?1:10),e+-r}_arrowKeyMultiplier(t){let e=this._stepExplicit?1:10;return t.shiftKey?e*=10:t.altKey&&(e/=10),e}_snap(t){if(!this._step||0===this._step)return t;let e=0;return this._hasMin?e=this._min:this._hasMax&&(e=this._max),t-=e,t=Math.round(t/this._step)*this._step,t+=e,parseFloat(t.toPrecision(15))}_clamp(t){return this._hasMin||this._hasMax?this._hasMin&&t<this._min?this._min:this._hasMax&&t>this._max?this._max:t:t}_snapClampSetValue(t){this.setValue(this._clamp(this._snap(t)))}_initInput(){const t=window.matchMedia("(pointer: coarse)").matches;this.$input=(0,s.el)("input",{type:t?"number":"text","aria-labelledby":this.$name.id,...t?{step:"any"}:{}},{input:[this._handleInputBound],keydown:[this._handleKeyDownBound],wheel:[this._handleInputWheelBound],focus:[()=>{this._inputFocused=!0}],blur:[()=>{this._inputFocused=!1,this.update(),this._callOnFinishChange()}]}),this.$widget.appendChild(this.$input),this.$elForDisable=this.$input}_initSlider(){this._hasSlider=!0,this.$fill=(0,s.el)("div",{classList:["fill"]}),this.domElement.classList.add("hasSlider"),this.$slider=(0,s.el)("div",{classList:["slider"],children:[this.$fill]},{mousedown:[this._handleSliderMouseDownBound],touchstart:[this._handleSliderTouchStartBound,{passive:!1}],wheel:[this._handleSliderWheelBound,{passive:!1}]}),this.$widget.insertBefore(this.$slider,this.$input)}_handleInput(){const t=parseFloat(this.$input.value);isNaN(t)||(this._stepExplicit?this.setValue(this._clamp(this._snap(t))):this.setValue(this._clamp(t)))}_handleKeyDown(t){if("Enter"!==t.key){if("ArrowUp"===t.code||"ArrowDown"===t.code){t.preventDefault();const e="ArrowUp"===t.code?1:-1;this._incrementValue(this._step*this._arrowKeyMultiplier(t)*e)}}else this.$input.blur()}_handleInputWheel(t){this._inputFocused&&(t.preventDefault(),this._incrementValue(this._step*this._normalizeMouseWheel(t)))}_incrementValue(t){const e=parseFloat(this.$input.value);isNaN(e)||(this._snapClampSetValue(e+t),this.$input.value=this.getValue().toString())}_handleSliderMouseDown(t){this._setDraggingStyle(!0),this._setValueFromClientX(t.clientX);const e=t=>{this._setValueFromClientX(t.clientX)},r=()=>{this._callOnFinishChange(),this._setDraggingStyle(!1),this._sliderRect=null,window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",r)};window.addEventListener("mousemove",e),window.addEventListener("mouseup",r)}_handleSliderTouchStart(t){if(!(t.touches.length>1))if(this._hasScrollBar){const e=t.touches[0].clientX,r=t.touches[0].clientY;let n=!0;const i=t=>{if(t.touches[0])if(n){const o=t.touches[0].clientX-e,l=t.touches[0].clientY-r;Math.abs(o)>Math.abs(l)?(n=!1,this._beginTouchDrag(t)):Math.abs(l)>5&&this._cleanupTouchEvents(i,s)}else t.preventDefault(),this._setValueFromClientX(t.touches[0].clientX)},s=()=>{this._callOnFinishChange(),this._setDraggingStyle(!1),this._sliderRect=null,this._cleanupTouchEvents(i,s)};window.addEventListener("touchmove",i,{passive:!1}),window.addEventListener("touchend",s)}else this._beginTouchDrag(t)}_beginTouchDrag(t){if(!t.touches[0])return;t.preventDefault(),this._setDraggingStyle(!0),this._setValueFromClientX(t.touches[0].clientX);const e=t=>{t.touches[0]&&(t.preventDefault(),this._setValueFromClientX(t.touches[0].clientX))},r=()=>{this._callOnFinishChange(),this._setDraggingStyle(!1),this._sliderRect=null,this._cleanupTouchEvents(e,r)};window.addEventListener("touchmove",e,{passive:!1}),window.addEventListener("touchend",r)}_cleanupTouchEvents(t,e){window.removeEventListener("touchmove",t),window.removeEventListener("touchend",e)}_handleSliderWheel(t){if(Math.abs(t.deltaX)<Math.abs(t.deltaY)&&this._hasScrollBar)return;t.preventDefault();const e=this._normalizeMouseWheel(t)*this._step;this._snapClampSetValue(this.getValue()+e),this.$input.value=this.getValue().toString(),void 0!==this._wheelFinishTimeout&&window.clearTimeout(this._wheelFinishTimeout),this._wheelFinishTimeout=window.setTimeout((()=>{this._callOnFinishChange(),this._wheelFinishTimeout=void 0}),400)}_setValueFromClientX(t){this._sliderRect||(this._sliderRect=this.$slider.getBoundingClientRect());const e=this._sliderRect;if(!e||!this._hasMin||!this._hasMax)return;const r=this._mapRange(t,e.left,e.right,this._min,this._max);this._snapClampSetValue(r)}_mapRange(t,e,r,n,i){return(t-e)/(r-e)*(i-n)+n}}e.default=o,e.NumberControl=o},515:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.DEFAULT_CSS_CONTENT=void 0,e.DEFAULT_CSS_CONTENT=".rad-gui { display: block; }",e.default=e.DEFAULT_CSS_CONTENT},591:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.ToggleControl=void 0;const i=n(r(722)),s=r(287);class o extends i.default{$input;constructor(t,e,r){super(t,e,r,"boolean","label"),this.$input=(0,s.el)("input",{type:"checkbox","aria-labelledby":this.$name.id},{change:[()=>{this.setValue(this.$input.checked),this._callOnFinishChange()}]}),this.$widget.appendChild(this.$input),this.$elForDisable=this.$input,this.update()}update(){return this.$input.checked=this.getValue(),this}}e.default=o,e.ToggleControl=o},616:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.TextControl=void 0;const i=r(287),s=n(r(722));class o extends s.default{$input;constructor(t,e,r){super(t,e,r,"string"),this.$input=(0,i.el)("input",{type:"text",spellcheck:"false","aria-labelledby":this.$name.id},{input:[()=>{this.setValue(this.$input.value)}],blur:[()=>{this._callOnFinishChange()}],keydown:[t=>{"Enter"===t.code&&this.$input.blur()}]}),this.$widget.appendChild(this.$input),this.$elForDisable=this.$input,this.update()}update(){return this.$input.value=this.getValue(),this}}e.default=o,e.TextControl=o},636:(t,e,r)=>{r.r(e)},683:(t,e)=>{function r(t){const e=[{regex:/(#|0x)?([a-f0-9]{6})/i,format:t=>t[2]},{regex:/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/,format:t=>[1,2,3].map((e=>parseInt(t[e]).toString(16).padStart(2,"0"))).join("")},{regex:/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,format:t=>`${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`}];for(const r of e){const e=t.match(r.regex);if(e)return"#"+r.format(e)}return!1}Object.defineProperty(e,"__esModule",{value:!0}),e.normalizeColorString=r,e.default=r},722:(t,e,r)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.BaseControl=void 0;const n=r(287);class i{parent;object;property;initialValue;domElement;$name;static nextNameID;$widget;$elForDisable;_disabled=!1;_hidden=!1;_name;_onChange;_changed=!1;_onFinishChange;_listening=!1;_listenCallbackID;_listenPrevValue;constructor(t,e,r,s,o="div"){i.nextNameID=i.nextNameID||0,this.parent=t,this.object=e,this.property=r,this.initialValue=this.getValue(),this.$name=(0,n.el)("div",{classList:["name"]}),this.$widget=(0,n.el)("div",{classList:["widget"]}),this.$elForDisable=this.$widget,this.domElement=(0,n.el)(o,{classList:["controller",s],children:[this.$name,this.$widget]},{keydown:[t=>t.stopPropagation()],keyup:[t=>t.stopPropagation()]}),this.parent.children.push(this),this.parent.controllers.push(this),this.parent.$children.appendChild(this.domElement),this._listenCallback=this._listenCallback.bind(this),this.name(r)}name(t){return this._name=t,this.$name.textContent=t,this}onChange(t){return this._onChange=t,this}_callOnChange(){this.parent._callOnChange(this),void 0!==this._onChange&&this._onChange.call(this,this.getValue()),this._changed=!0}onFinishChange(t){return this._onFinishChange=t,this}_callOnFinishChange(){this._changed&&(this.parent._callOnFinishChange(this),void 0!==this._onFinishChange&&this._onFinishChange.call(this,this.getValue()),this._changed=!1)}reset(){return this.setValue(this.initialValue),this._callOnFinishChange(),this}enable(t=!0){return this.disable(!t)}disable(t=!0){return t===this._disabled||(this._disabled=t,this.domElement.classList.toggle("disabled",t),this.$elForDisable.toggleAttribute("disabled",t)),this}show(t=!0){return this._hidden=!t,this.domElement.style.display=this._hidden?"none":"",this}hide(){return this.show(!1)}options(t){const e=this.parent.add(this.object,this.property,t);return e.name(this._name),this.destroy(),e}setMin(t){return this}setMax(t){return this}setStep(t){return this}setDecimals(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);const t=this.save();t!==this._listenPrevValue&&this.update(),this._listenPrevValue=t}getValue(){return this.object[this.property]}setValue(t){return this.getValue()===t||(this.object[this.property]=t,this._callOnChange(),this.update()),this}update(){return this}load(t){return this.setValue(t),this._callOnFinishChange(),this}save(){return this.getValue()}destroy(){this.listen(!1),this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.controllers.splice(this.parent.controllers.indexOf(this),1),this.parent.$children.removeChild(this.domElement)}}e.default=i,e.BaseControl=i},838:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.getColorFormat=void 0;const i=n(r(683)),s=t=>{const e=parseInt(t.substring(1),16);return{r:e>>16&255,g:e>>8&255,b:255&e}},o=(t,e,r)=>(255&t)<<16|(255&e)<<8|255&r,l={isPrimitive:!0,match:t=>"string"==typeof t,fromHexString:i.default,toHexString:i.default},a={isPrimitive:!0,match:t=>"number"==typeof t,fromHexString:t=>parseInt(t.substring(1),16),toHexString:t=>"#"+t.toString(16).padStart(6,"0")},h={isPrimitive:!1,match:t=>Array.isArray(t),fromHexString(t,e,r=1){const n=s(t),i=r/255;e[0]=n.r*i,e[1]=n.g*i,e[2]=n.b*i},toHexString([t,e,r],n=1){const i=255/n,s=o(t*i,e*i,r*i);return a.toHexString(s)}},d={isPrimitive:!1,match:t=>Object(t)===t&&!Array.isArray(t),fromHexString(t,e,r=1){const n=s(t),i=r/255;e.r=n.r*i,e.g=n.g*i,e.b=n.b*i},toHexString({r:t,g:e,b:r},n=1){const i=255/n,s=o(t*i,e*i,r*i);return a.toHexString(s)}},u=[l,a,h,d];e.getColorFormat=t=>u.find((e=>e.match(t))),e.default=e.getColorFormat},906:function(t,e,r){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.OptionControl=void 0;const i=n(r(722)),s=r(287);class o extends i.default{$select;$display;_values;_names;constructor(t,e,r,n){super(t,e,r,"option"),this.$select=(0,s.el)("select",{"aria-labelledby":this.$name.id},{change:[()=>{this.setValue(this._values[this.$select.selectedIndex]),this._callOnFinishChange()}],focus:[()=>{this.$display.classList.add("focus")}],blur:[()=>{this.$display.classList.remove("focus")}]}),this.$display=(0,s.el)("div",{classList:["display"]}),this.$widget.appendChild(this.$select),this.$widget.appendChild(this.$display),this.options(n)}options(t){return this._values=Array.isArray(t)?t:Object.values(t),this._names=Array.isArray(t)?t:Object.keys(t),this.$select.replaceChildren(),this._names.forEach(((t="")=>{const e=(0,s.el)("option",{textContent:t});this.$select.appendChild(e)})),this.update(),this}update(){const t=this.getValue(),e=this._values.indexOf(t);return this.$select.selectedIndex=e,this.$display.textContent=-1===e?t:this._names[e],this}}e.default=o,e.OptionControl=o},995:function(t,e,r){var n,i=this&&this.__createBinding||(Object.create?function(t,e,r,n){void 0===n&&(n=r);var i=Object.getOwnPropertyDescriptor(e,r);i&&!("get"in i?!e.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,n,i)}:function(t,e,r,n){void 0===n&&(n=r),t[n]=e[r]}),s=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),o=this&&this.__importStar||(n=function(t){return n=Object.getOwnPropertyNames||function(t){var e=[];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[e.length]=r);return e},n(t)},function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r=n(t),o=0;o<r.length;o++)"default"!==r[o]&&i(e,t,r[o]);return s(e,t),e}),l=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.RadGUI=e.GUI=void 0;const a=l(r(591)),h=l(r(108)),d=l(r(64)),u=l(r(306)),c=l(r(906)),p=l(r(616)),g=r(287),f=o(r(158));r(636);class _{parent;autoPlace;width;closeFolders;injectStyles;touchStyles;root;children;controllers;folders;domElement;$title;$children;container;_closed;_hidden;_onChange;_onFinishChange;_onOpenClose;_title;_closeFolders;_onFinishChangeCallback;_onChangeCallback;_onOpenCloseCallback;constructor({parent:t,autoPlace:e=void 0===t,container:r,width:n,title:i="Controls",closeFolders:s=!1,injectStyles:o=!0,touchStyles:l=!0}={}){this.parent=t,this.root=t?t.root:this,this.children=[],this.controllers=[],this.folders=[],this._closed=!1,this._hidden=!1,this._onChange=void 0,this._onFinishChange=void 0,this._onOpenClose=void 0,t&&(t.children.push(this),t.folders.push(this)),this.$title=(0,g.el)("button",{"aria-expanded":"true",classList:["title"]},{click:[()=>this.openAnimated(this._closed)],touchstart:[()=>{},{passive:!0}]}),this.$children=(0,g.el)("div",{classList:["children"]}),this.domElement=(0,g.el)("div",{classList:["rad-gui","root"],children:[this.$title,this.$children]}),l&&this.domElement.classList.add("allow-touch-styles"),this.title(i),t||!o||(0,f.hasInjectedStyles)()||(0,f.default)(),r?(this.container=r,r.appendChild(this.domElement)):e&&(this.domElement.classList.add("autoPlace"),document.body.appendChild(this.domElement)),n&&this.domElement.style.setProperty("--width",n+"px"),this._closeFolders=s}add(t,e,r,n,i){if(Object(r)===r)return new c.default(this,t,e,r);const s=t[e];switch(typeof s){case"number":return new u.default(this,t,e,r,n,i);case"boolean":return new a.default(this,t,e);case"string":return new p.default(this,t,e);case"function":return new d.default(this,t,e)}console.error("gui.add failed\tproperty:",e,"\tobject:",t,"\tvalue:",s)}addColor(t,e,r=1){return new h.default(this,t,e,r)}addFolder(t){const e=new _({parent:this,title:t});return this.folders.push(e),this.$children.appendChild(e.domElement),this.root._closeFolders&&e.close(),e}load(t,e=!0){return t.controllers&&this.controllers.forEach((e=>{e instanceof d.default||e._name in t.controllers&&e.load(t.controllers[e._name])})),e&&t.folders&&this.folders.forEach((e=>{e._title in t.folders&&e.load(t.folders[e._title])})),this}remember(...t){this.save(!0)}save(t=!0){const e={controllers:{},folders:{}},r=new Set;return this.controllers.forEach((t=>{if(!(t instanceof d.default)){if(Object.prototype.hasOwnProperty.call(e.controllers,t._name))throw new Error(`Cannot save GUI with duplicate property "${t._name}"`);e.controllers[t._name]=t.save()}})),t&&this.folders.forEach((t=>{r.has(t._title)||(r.add(t._title),e.folders[t._title]=t.save())})),e}open(t=!0){return this._setClosed(!t),this.$title.setAttribute("aria-expanded",!this._closed+""),this.domElement.classList.toggle("closed",this._closed),this}close(){return this.open(!1)}_setClosed(t){this._closed!==t&&(this._closed=t,this._callOnOpenClose(this))}show(t=!0){return this._hidden=!t,this.domElement.style.display=this._hidden?"none":"",this}hide(){return this.show(!1)}openAnimated(t=!0){return this._setClosed(!t),this.$title.setAttribute("aria-expanded",!this._closed+""),requestAnimationFrame((()=>{const e=this.$children.clientHeight;this.$children.style.height=e+"px",this.domElement.classList.add("transition");const r=t=>{t.target===this.$children&&(this.$children.style.height="",this.domElement.classList.remove("transition"),this.$children.removeEventListener("transitionend",r))};this.$children.addEventListener("transitionend",r);const n=t?this.$children.scrollHeight:0;this.domElement.classList.toggle("closed",!t),requestAnimationFrame((()=>{this.$children.style.height=n+"px"}))})),this}title(t){return this._title=t,this.$title.textContent=t,this}reset(t=!0){return(t?this.controllersRecursive():this.controllers).forEach((t=>t.reset())),this}onChange(t){return this._onChange=t,this}_callOnChange(t){this.parent&&this.parent._callOnChange(t),void 0!==this._onChange&&this._onChange.call(this,{object:t.object,property:t.property,value:t.getValue(),controller:t})}onFinishChange(t){return this._onFinishChange=t,this}_callOnFinishChange(t){this.parent&&this.parent._callOnFinishChange(t),void 0!==this._onFinishChange&&this._onFinishChange.call(this,{object:t.object,property:t.property,value:t.getValue(),controller:t})}onOpenClose(t){return this._onOpenClose=t,this}_callOnOpenClose(t){this.parent&&this.parent._callOnOpenClose(t),void 0!==this._onOpenClose&&this._onOpenClose.call(this,t)}destroy(){this.parent&&(this.parent.children.splice(this.parent.children.indexOf(this),1),this.parent.folders.splice(this.parent.folders.indexOf(this),1)),this.domElement.parentElement&&this.domElement.parentElement.removeChild(this.domElement),Array.from(this.children).forEach((t=>t.destroy()))}controllersRecursive(){let t=[...this.controllers];for(const e of this.folders)t=t.concat(e.controllersRecursive());return t}foldersRecursive(){const t=(e,r=new Set)=>(e.folders.forEach((e=>{r.add(e),t(e,r)})),r),e=t(this);return Array.from(e)}}e.GUI=_;class m extends _{constructor(t){super(t)}addFolder(t){const e=new m({parent:this,title:t});return this.$children.appendChild(e.domElement),e}addButton(t,e){return new d.default(this,{[t]:e},t)}addColor(t,e,r=1){return new h.default(this,t,e,r)}addNumber(t,e,r,n,i){return new u.default(this,t,e,r,n,i)}addToggle(t,e){return new a.default(this,t,e)}addOption(t,e,r){return new c.default(this,t,e,r)}addText(t,e){return new p.default(this,t,e)}remove(t){const e=this.children.indexOf(t);-1!==e&&this.children.splice(e,1);const r=this.controllers.indexOf(t);-1!==r&&this.controllers.splice(r,1),t.domElement&&t.domElement.parentNode===this.$children&&this.$children.removeChild(t.domElement)}reset(t=!0){return(t?this.controllersRecursive():this.controllers).forEach((t=>t.reset())),this}}e.RadGUI=m,e.default=_}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var s=e[n]={exports:{}};return t[n].call(s.exports,s,s.exports,r),s.exports}return r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r(156)})()));