@xviewer.js/debug 1.0.0-alpha.0

package/dist/module.js

@@ -0,0 +1,2805 @@
+import { MeshBasicMaterial, MeshStandardMaterial, ShaderMaterial, Material } from 'three';
+import { property, Plugin, PropertyManager, Component, ObjectInstance } from '@xviewer/core';
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = "@charset \"UTF-8\";\n.lil-gui {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  text-align: left;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n  --background-color: #1f1f1f;\n  --text-color: #ebebeb;\n  --title-background-color: #111111;\n  --title-text-color: #ebebeb;\n  --widget-color: #424242;\n  --hover-color: #4f4f4f;\n  --focus-color: #595959;\n  --number-color: #2cc9ff;\n  --string-color: #a2db3c;\n  --font-size: 11px;\n  --input-font-size: 11px;\n  --font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n  --font-family-mono: Menlo, Monaco, Consolas, \"Droid Sans Mono\", monospace;\n  --padding: 4px;\n  --spacing: 4px;\n  --widget-height: 20px;\n  --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);\n  --name-width: 40%;\n  --slider-knob-width: 2px;\n  --slider-input-width: 27%;\n  --color-input-width: 27%;\n  --slider-input-min-width: 45px;\n  --color-input-min-width: 45px;\n  --folder-indent: 7px;\n  --widget-padding: 0 0 0 3px;\n  --widget-border-radius: 2px;\n  --checkbox-size: calc(0.75 * var(--widget-height));\n  --scrollbar-width: 5px;\n}\n.lil-gui, .lil-gui * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.lil-gui.root {\n  width: var(--width, 245px);\n  display: flex;\n  flex-direction: column;\n}\n.lil-gui.root > .title {\n  background: var(--title-background-color);\n  color: var(--title-text-color);\n}\n.lil-gui.root > .children {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.lil-gui.root > .children::-webkit-scrollbar {\n  width: var(--scrollbar-width);\n  height: var(--scrollbar-width);\n  background: var(--background-color);\n}\n.lil-gui.root > .children::-webkit-scrollbar-thumb {\n  border-radius: var(--scrollbar-width);\n  background: var(--focus-color);\n}\n@media (pointer: coarse) {\n  .lil-gui.allow-touch-styles, .lil-gui.allow-touch-styles .lil-gui {\n    --widget-height: 28px;\n    --padding: 6px;\n    --spacing: 6px;\n    --font-size: 13px;\n    --input-font-size: 16px;\n    --folder-indent: 10px;\n    --scrollbar-width: 7px;\n    --slider-input-min-width: 50px;\n    --color-input-min-width: 65px;\n  }\n}\n.lil-gui.force-touch-styles, .lil-gui.force-touch-styles .lil-gui {\n  --widget-height: 28px;\n  --padding: 6px;\n  --spacing: 6px;\n  --font-size: 13px;\n  --input-font-size: 16px;\n  --folder-indent: 10px;\n  --scrollbar-width: 7px;\n  --slider-input-min-width: 50px;\n  --color-input-min-width: 65px;\n}\n.lil-gui.autoPlace {\n  max-height: 100%;\n  position: fixed;\n  top: 0;\n  right: 15px;\n  z-index: 1001;\n}\n\n.lil-gui .controller {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n}\n.lil-gui .controller.disabled {\n  opacity: 0.5;\n}\n.lil-gui .controller.disabled, .lil-gui .controller.disabled * {\n  pointer-events: none !important;\n}\n.lil-gui .controller > .name {\n  min-width: var(--name-width);\n  flex-shrink: 0;\n  white-space: pre;\n  padding-right: var(--spacing);\n  line-height: var(--widget-height);\n}\n.lil-gui .controller .widget {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--widget-height);\n}\n.lil-gui .controller.string input {\n  color: var(--string-color);\n}\n.lil-gui .controller.boolean .widget {\n  cursor: pointer;\n}\n.lil-gui .controller.color .display {\n  width: 100%;\n  height: var(--widget-height);\n  border-radius: var(--widget-border-radius);\n  position: relative;\n}\n@media (hover: hover) {\n  .lil-gui .controller.color .display:hover:before {\n    content: \" \";\n    display: block;\n    position: absolute;\n    border-radius: var(--widget-border-radius);\n    border: 1px solid rgba(255, 255, 255, 0.6);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n.lil-gui .controller.color input[type=color] {\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n.lil-gui .controller.color input[type=text] {\n  margin-left: var(--spacing);\n  font-family: var(--font-family-mono);\n  min-width: var(--color-input-min-width);\n  width: var(--color-input-width);\n  flex-shrink: 0;\n}\n.lil-gui .controller.option select {\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n  max-width: 100%;\n}\n.lil-gui .controller.option .display {\n  position: relative;\n  pointer-events: none;\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  line-height: var(--widget-height);\n  max-width: 100%;\n  overflow: hidden;\n  word-break: break-all;\n  padding-left: 0.55em;\n  padding-right: 1.75em;\n  background: var(--widget-color);\n}\n@media (hover: hover) {\n  .lil-gui .controller.option .display.focus {\n    background: var(--focus-color);\n  }\n}\n.lil-gui .controller.option .display.active {\n  background: var(--focus-color);\n}\n.lil-gui .controller.option .display:after {\n  font-family: \"lil-gui\";\n  content: \"↕\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding-right: 0.375em;\n}\n.lil-gui .controller.option .widget,\n.lil-gui .controller.option select {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .lil-gui .controller.option .widget:hover .display {\n    background: var(--hover-color);\n  }\n}\n.lil-gui .controller.number input {\n  color: var(--number-color);\n}\n.lil-gui .controller.number.hasSlider input {\n  margin-left: var(--spacing);\n  width: var(--slider-input-width);\n  min-width: var(--slider-input-min-width);\n  flex-shrink: 0;\n}\n.lil-gui .controller.number .slider {\n  width: 100%;\n  height: var(--widget-height);\n  background-color: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  padding-right: var(--slider-knob-width);\n  overflow: hidden;\n  cursor: ew-resize;\n  touch-action: pan-y;\n}\n@media (hover: hover) {\n  .lil-gui .controller.number .slider:hover {\n    background-color: var(--hover-color);\n  }\n}\n.lil-gui .controller.number .slider.active {\n  background-color: var(--focus-color);\n}\n.lil-gui .controller.number .slider.active .fill {\n  opacity: 0.95;\n}\n.lil-gui .controller.number .fill {\n  height: 100%;\n  border-right: var(--slider-knob-width) solid var(--number-color);\n  box-sizing: content-box;\n}\n.lil-gui .controller.image img {\n  max-width: 100%;\n}\n.lil-gui .controller.image canvas {\n  max-width: 100%;\n  min-height: 1px;\n}\n.lil-gui .controller.vector input {\n  color: var(--number-color);\n}\n.lil-gui .controller.vector .fill {\n  height: 100%;\n  margin-left: var(--spacing);\n  box-sizing: content-box;\n}\n\n.lil-gui-dragging .lil-gui {\n  --hover-color: var(--widget-color);\n}\n.lil-gui-dragging * {\n  cursor: ew-resize !important;\n}\n\n.lil-gui-dragging.lil-gui-vertical * {\n  cursor: ns-resize !important;\n}\n\n.lil-gui .title {\n  height: var(--title-height);\n  line-height: calc(var(--title-height) - 4px);\n  font-weight: 600;\n  padding: 0 var(--padding);\n  -webkit-tap-highlight-color: transparent;\n  cursor: pointer;\n  outline: none;\n  text-decoration-skip: objects;\n}\n.lil-gui .title:before {\n  font-family: \"lil-gui\";\n  content: \"▾\";\n  padding-right: 2px;\n  display: inline-block;\n}\n.lil-gui .title:active {\n  background: var(--title-background-color);\n  opacity: 0.75;\n}\n@media (hover: hover) {\n  body:not(.lil-gui-dragging) .lil-gui .title:hover {\n    background: var(--title-background-color);\n    opacity: 0.85;\n  }\n  .lil-gui .title:focus {\n    text-decoration: underline var(--focus-color);\n  }\n}\n.lil-gui.root > .title:focus {\n  text-decoration: none !important;\n}\n.lil-gui.closed > .title:before {\n  content: \"▸\";\n}\n.lil-gui.closed > .children {\n  transform: translateY(-7px);\n  opacity: 0;\n}\n.lil-gui.closed:not(.transition) > .children {\n  display: none;\n}\n.lil-gui.transition > .children {\n  transition-duration: 300ms;\n  transition-property: height, opacity, transform;\n  transition-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);\n  overflow: hidden;\n  pointer-events: none;\n}\n.lil-gui .children:empty:before {\n  content: \"Empty\";\n  padding: 0 var(--padding);\n  margin: var(--spacing) 0;\n  display: block;\n  height: var(--widget-height);\n  font-style: italic;\n  line-height: var(--widget-height);\n  opacity: 0.5;\n}\n.lil-gui.root > .children > .lil-gui > .title {\n  border: 0 solid var(--widget-color);\n  border-width: 1px 0;\n  transition: border-color 300ms;\n}\n.lil-gui.root > .children > .lil-gui.closed > .title {\n  border-bottom-color: transparent;\n}\n.lil-gui + .controller {\n  border-top: 1px solid var(--widget-color);\n  margin-top: 0;\n  padding-top: var(--spacing);\n}\n.lil-gui .lil-gui .lil-gui > .title {\n  border: none;\n}\n.lil-gui .lil-gui .lil-gui > .children {\n  border: none;\n  margin-left: var(--folder-indent);\n  border-left: 2px solid var(--widget-color);\n}\n.lil-gui .lil-gui .controller {\n  border: none;\n}\n\n.lil-gui input {\n  -webkit-tap-highlight-color: transparent;\n  border: 0;\n  outline: none;\n  font-family: var(--font-family);\n  font-size: var(--input-font-size);\n  border-radius: var(--widget-border-radius);\n  height: var(--widget-height);\n  background: var(--widget-color);\n  color: var(--text-color);\n  width: 100%;\n}\n@media (hover: hover) {\n  .lil-gui input:hover {\n    background: var(--hover-color);\n  }\n  .lil-gui input:active {\n    background: var(--focus-color);\n  }\n}\n.lil-gui input:disabled {\n  opacity: 1;\n}\n.lil-gui input[type=text],\n.lil-gui input[type=number] {\n  padding: var(--widget-padding);\n}\n.lil-gui input[type=text]:focus,\n.lil-gui input[type=number]:focus {\n  background: var(--focus-color);\n}\n.lil-gui input::-webkit-outer-spin-button,\n.lil-gui input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.lil-gui input[type=number] {\n  -moz-appearance: textfield;\n}\n.lil-gui input[type=checkbox] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: var(--checkbox-size);\n  width: var(--checkbox-size);\n  border-radius: var(--widget-border-radius);\n  text-align: center;\n  cursor: pointer;\n}\n.lil-gui input[type=checkbox]:checked:before {\n  font-family: \"lil-gui\";\n  content: \"✓\";\n  font-size: var(--checkbox-size);\n  line-height: var(--checkbox-size);\n}\n@media (hover: hover) {\n  .lil-gui input[type=checkbox]:focus {\n    box-shadow: inset 0 0 0 1px var(--focus-color);\n  }\n}\n.lil-gui button {\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  cursor: pointer;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--text-color);\n  width: 100%;\n  height: var(--widget-height);\n  text-transform: none;\n  background: var(--widget-color);\n  border-radius: var(--widget-border-radius);\n  border: 1px solid var(--widget-color);\n  text-align: center;\n  line-height: calc(var(--widget-height) - 4px);\n}\n@media (hover: hover) {\n  .lil-gui button:hover {\n    background: var(--hover-color);\n    border-color: var(--hover-color);\n  }\n  .lil-gui button:focus {\n    border-color: var(--focus-color);\n  }\n}\n.lil-gui button:active {\n  background: var(--focus-color);\n}\n\n@font-face {\n  font-family: \"lil-gui\";\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\");\n}\n.curve-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  background-color: #303030;\n  outline: 1px solid #000000;\n  padding: 5px;\n  width: 100%;\n}\n.curve-editor .button-medium {\n  background-color: #545454;\n  min-width: var(--widget-height);\n  min-height: var(--widget-height);\n  height: 100%;\n  outline: 1px solid #3c3c3c;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  font-size: var(--input-font-size, 11px);\n}\n.curve-editor .button-medium.selected {\n  background-color: #4772b3;\n  pointer-events: none;\n}\n.curve-editor .button-medium:hover {\n  background-color: #656565;\n  cursor: default;\n}\n.curve-editor .curve-top {\n  display: flex;\n  width: 100%;\n}\n.curve-editor .curve-panel {\n  width: 100%;\n  height: 90px;\n  outline: 1px solid #646464;\n}\n.curve-editor .curve-point-panel {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: var(--widget-height);\n}\n.curve-editor .curve-point-panel input {\n  background-color: #545454;\n  height: 100%;\n  width: 100%;\n  color: #fff;\n  border: 0;\n  outline: 1px solid #3c3c3c;\n  text-align: center;\n  font-size: var(--input-font-size, 11px);\n}";
+n(css,{});
+
+class Controller {
+    /**
+     * Sets the name of the controller and its label in the GUI.
+     * @param {string} name
+     * @returns {this}
+     */ name(name) {
+        this._name = name;
+        this.$name.innerHTML = name;
+        return this;
+    }
+    /**
+     * Pass a function to be called whenever the value is modified by this controller.
+     * The function receives the new value as its first parameter. The value of `this` will be the
+     * controller.
+     *
+     * For function controllers, the `onChange` callback will be fired on click, after the function
+     * executes.
+     * @param {Function} callback
+     * @returns {this}
+     * @example
+     * const controller = gui.add( object, 'property' );
+     *
+     * controller.onChange( function( v ) {
+     * 	console.log( 'The value is now ' + v );
+     * 	console.assert( this === controller );
+     * } );
+     */ onChange(callback) {
+        this._onChange = callback;
+        return this;
+    }
+    /**
+     * Calls the onChange methods of this controller and its parent GUI.
+     */ _callOnChange() {
+        this.parent._callOnChange(this);
+        if (this._onChange !== undefined) {
+            this._onChange.call(this, this.getValue());
+        }
+        this._changed = true;
+    }
+    /**
+     * Pass a function to be called after this controller has been modified and loses focus.
+     * @param {Function} callback
+     * @returns {this}
+     * @example
+     * const controller = gui.add( object, 'property' );
+     *
+     * controller.onFinishChange( function( v ) {
+     * 	console.log( 'Changes complete: ' + v );
+     * 	console.assert( this === controller );
+     * } );
+     */ onFinishChange(callback) {
+        this._onFinishChange = callback;
+        return this;
+    }
+    /**
+     * Should be called by Controller when its widgets lose focus.
+     */ _callOnFinishChange() {
+        if (this._changed) {
+            this.parent._callOnFinishChange(this);
+            if (this._onFinishChange !== undefined) {
+                this._onFinishChange.call(this, this.getValue());
+            }
+        }
+        this._changed = false;
+    }
+    /**
+     * Sets the controller back to its initial value.
+     * @returns {this}
+     */ reset() {
+        this.setValue(this.initialValue);
+        this._callOnFinishChange();
+        return this;
+    }
+    /**
+     * Enables this controller.
+     * @param {boolean} enabled
+     * @returns {this}
+     * @example
+     * controller.enable();
+     * controller.enable( false ); // disable
+     * controller.enable( controller._disabled ); // toggle
+     */ enable(enabled = true) {
+        return this.disable(!enabled);
+    }
+    /**
+     * Disables this controller.
+     * @param {boolean} disabled
+     * @returns {this}
+     * @example
+     * controller.disable();
+     * controller.disable( false ); // enable
+     * controller.disable( !controller._disabled ); // toggle
+     */ disable(disabled = true) {
+        if (disabled === this._disabled) return this;
+        this._disabled = disabled;
+        this.domElement.classList.toggle('disabled', disabled);
+        this.$disable.toggleAttribute('disabled', disabled);
+        return this;
+    }
+    /**
+     * Shows the Controller after it's been hidden.
+     * @param {boolean} show
+     * @returns {this}
+     * @example
+     * controller.show();
+     * controller.show( false ); // hide
+     * controller.show( controller._hidden ); // toggle
+     */ show(show = true) {
+        this._hidden = !show;
+        this.domElement.style.display = this._hidden ? 'none' : '';
+        return this;
+    }
+    /**
+     * Hides the Controller.
+     * @returns {this}
+     */ hide() {
+        return this.show(false);
+    }
+    options(options) {
+        return this;
+    }
+    /**
+     * Sets the minimum value. Only works on number controllers.
+     * @param {number} min
+     * @returns {this}
+     */ // eslint-disable-next-line no-unused-vars
+    min(min) {
+        return this;
+    }
+    /**
+     * Sets the maximum value. Only works on number controllers.
+     * @param {number} max
+     * @returns {this}
+     */ // eslint-disable-next-line no-unused-vars
+    max(max) {
+        return this;
+    }
+    /**
+     * Values set by this controller will be rounded to multiples of `step`. Only works on number
+     * controllers.
+     * @param {number} step
+     * @returns {this}
+     */ // eslint-disable-next-line no-unused-vars
+    step(step) {
+        return this;
+    }
+    /**
+     * Rounds the displayed value to a fixed number of decimals, without affecting the actual value
+     * like `step()`. Only works on number controllers.
+     * @example
+     * gui.add( object, 'property' ).listen().decimals( 4 );
+     * @param {number} decimals
+     * @returns {this}
+     */ // eslint-disable-next-line no-unused-vars
+    decimals(decimals) {
+        return this;
+    }
+    /**
+     * Calls `updateDisplay()` every animation frame. Pass `false` to stop listening.
+     * @param {boolean} listen
+     * @returns {this}
+     */ listen(listen = true) {
+        this._listening = listen;
+        if (this._listenCallbackID !== undefined) {
+            cancelAnimationFrame(this._listenCallbackID);
+            this._listenCallbackID = undefined;
+        }
+        if (this._listening) {
+            this._listenCallback();
+        }
+        return this;
+    }
+    needsUpdateDisplay() {
+        if (this.parent._closed) {
+            return false;
+        }
+        let value = this.save();
+        if (this._listenPrevValue !== value) {
+            this._listenPrevValue = value;
+            return true;
+        }
+        return false;
+    }
+    _listenCallback() {
+        this._listenCallbackID = requestAnimationFrame(this._listenCallback);
+        // To prevent framerate loss, make sure the value has changed before updating the display.
+        // Note: save() is used here instead of getValue() only because of ColorController. The !== operator
+        // won't work for color objects or arrays, but ColorController.save() always returns a string.
+        if (this.needsUpdateDisplay()) {
+            this.updateDisplay();
+        }
+    }
+    /**
+     * Returns `object[ property ]`.
+     * @returns {any}
+     */ getValue() {
+        return this.object[this.property];
+    }
+    /**
+     * Sets the value of `object[ property ]`, invokes any `onChange` handlers and updates the display.
+     * @param {any} value
+     * @param {boolean} callOnChange
+     * @returns {this}
+     */ setValue(value) {
+        this.object[this.property] = value;
+        this._callOnChange();
+        this.updateDisplay();
+        return this;
+    }
+    update() {
+        if (this.needsUpdateDisplay()) {
+            this.updateDisplay();
+        }
+    }
+    /**
+     * Updates the display to keep it in sync with the current value. Useful for updating your
+     * controllers when their values have been modified outside of the GUI.
+     * @returns {this}
+     */ updateDisplay() {
+        return this;
+    }
+    load(value) {
+        this.setValue(value);
+        this._callOnFinishChange();
+        return this;
+    }
+    save() {
+        return this.getValue();
+    }
+    /**
+     * Destroys this controller and removes it from the parent GUI.
+     */ destroy() {
+        this.listen(false);
+        this.parent.children.splice(this.parent.children.indexOf(this), 1);
+        this.parent.controllers.splice(this.parent.controllers.indexOf(this), 1);
+        this.parent.$children.removeChild(this.domElement);
+    }
+    constructor(parent, object, property, className, widgetTag = 'div'){
+        /**
+     * Used to determine if the controller is disabled.
+     * Use `controller.disable( true|false )` to modify this value
+     */ this._disabled = false;
+        /**
+     * Used to determine if the Controller is hidden.
+     * Use `controller.show()` or `controller.hide()` to change this.
+     */ this._hidden = false;
+        this._changed = false;
+        /**
+     * Used to determine if the controller is currently listening. Don't modify this value
+     * directly. Use the `controller.listen( true|false )` method instead.
+     */ this._listening = false;
+        this._listenCallbackID = -1;
+        /**
+     * The controller's name. Use `controller.name( 'Name' )` to modify this value.
+     */ this._name = "";
+        this.parent = parent;
+        this.object = object;
+        this.property = property;
+        this.initialValue = this.getValue();
+        this.domElement = document.createElement('div');
+        this.domElement.classList.add('controller');
+        this.domElement.classList.add(className);
+        this.$name = document.createElement('div');
+        this.$name.classList.add('name');
+        Controller.nextNameID = Controller.nextNameID || 0;
+        this.$name.id = `lil-gui-name-${++Controller.nextNameID}`;
+        /**
+         * The DOM element that contains the controller's "widget" (which differs by controller type).
+         * @type {HTMLElement}
+         */ this.$widget = document.createElement(widgetTag);
+        this.$widget.classList.add('widget');
+        this.$disable = this.$widget;
+        this.domElement.appendChild(this.$name);
+        this.domElement.appendChild(this.$widget);
+        // Don't fire global key events while typing in a controller
+        this.domElement.addEventListener('keydown', (e)=>e.stopPropagation());
+        this.domElement.addEventListener('keyup', (e)=>e.stopPropagation());
+        this.parent.children.push(this);
+        this.parent.controllers.push(this);
+        this.parent.$children.appendChild(this.domElement);
+        this._listenCallback = this._listenCallback.bind(this);
+        this.name(property);
+    }
+}
+Controller.nextNameID = 0;
+
+class OptionController extends Controller {
+    updateDisplay() {
+        const value = this.getValue();
+        const index = this._values.indexOf(value);
+        this.$select.selectedIndex = index;
+        this.$display.innerHTML = index === -1 ? value : this._names[index];
+        return this;
+    }
+    options(options) {
+        this.$select.innerHTML = "";
+        this._values = Array.isArray(options) ? options : Object.values(options);
+        this._names = Array.isArray(options) ? options : Object.keys(options);
+        this._names.forEach((name)=>{
+            const $option = document.createElement('option');
+            $option.innerHTML = name;
+            this.$select.appendChild($option);
+        });
+        return this;
+    }
+    constructor(parent, object, property, options){
+        super(parent, object, property, 'option');
+        this.$select = document.createElement('select');
+        this.$select.setAttribute('aria-labelledby', this.$name.id);
+        this.$display = document.createElement('div');
+        this.$display.classList.add('display');
+        this._values = Array.isArray(options) ? options : Object.values(options);
+        this._names = Array.isArray(options) ? options : Object.keys(options);
+        this._names.forEach((name)=>{
+            const $option = document.createElement('option');
+            $option.innerHTML = name;
+            this.$select.appendChild($option);
+        });
+        this.$select.addEventListener('change', ()=>{
+            this.setValue(this._values[this.$select.selectedIndex]);
+            this._callOnFinishChange();
+        });
+        this.$select.addEventListener('focus', ()=>{
+            this.$display.classList.add('focus');
+        });
+        this.$select.addEventListener('blur', ()=>{
+            this.$display.classList.remove('focus');
+        });
+        this.$widget.appendChild(this.$select);
+        this.$widget.appendChild(this.$display);
+        this.$disable = this.$select;
+    }
+}
+
+/* eslint-disable no-cond-assign */ function normalizeColorString(string) {
+    let match, result;
+    if (match = string.match(/(#|0x)?([a-f0-9]{6})/i)) {
+        result = match[2];
+    } else if (match = string.match(/rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\)/)) {
+        result = parseInt(match[1]).toString(16).padStart(2, "0") + parseInt(match[2]).toString(16).padStart(2, "0") + parseInt(match[3]).toString(16).padStart(2, "0");
+    } else if (match = string.match(/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i)) {
+        result = match[1] + match[1] + match[2] + match[2] + match[3] + match[3];
+    }
+    if (result) {
+        return '#' + result;
+    }
+    return false;
+}
+
+const STRING = {
+    isPrimitive: true,
+    match: (v)=>typeof v === 'string',
+    fromHexString: normalizeColorString,
+    toHexString: normalizeColorString
+};
+const INT = {
+    isPrimitive: true,
+    match: (v)=>typeof v === 'number',
+    fromHexString: (string)=>parseInt(string.substring(1), 16),
+    toHexString: (value)=>'#' + value.toString(16).padStart(6, 0)
+};
+const ARRAY = {
+    isPrimitive: false,
+    // The arrow function is here to appease tree shakers like esbuild or webpack.
+    // See https://esbuild.github.io/api/#tree-shaking
+    match: (v)=>Array.isArray(v),
+    fromHexString (string, target, rgbScale = 1) {
+        const int = INT.fromHexString(string);
+        target[0] = (int >> 16 & 255) / 255 * rgbScale;
+        target[1] = (int >> 8 & 255) / 255 * rgbScale;
+        target[2] = (int & 255) / 255 * rgbScale;
+    },
+    toHexString ([r, g, b], rgbScale = 1) {
+        rgbScale = 255 / rgbScale;
+        const int = r * rgbScale << 16 ^ g * rgbScale << 8 ^ b * rgbScale << 0;
+        return INT.toHexString(int);
+    }
+};
+const OBJECT = {
+    isPrimitive: false,
+    match: (v)=>Object(v) === v,
+    fromHexString (string, target, rgbScale = 1) {
+        const int = INT.fromHexString(string);
+        target.r = (int >> 16 & 255) / 255 * rgbScale;
+        target.g = (int >> 8 & 255) / 255 * rgbScale;
+        target.b = (int & 255) / 255 * rgbScale;
+    },
+    toHexString ({ r, g, b }, rgbScale = 1) {
+        rgbScale = 255 / rgbScale;
+        const int = r * rgbScale << 16 ^ g * rgbScale << 8 ^ b * rgbScale << 0;
+        return INT.toHexString(int);
+    }
+};
+const FORMATS = [
+    STRING,
+    INT,
+    ARRAY,
+    OBJECT
+];
+function getColorFormat(value) {
+    return FORMATS.find((format)=>format.match(value));
+}
+
+function getPrecision(value) {
+    let str = value.toString();
+    let index = str.indexOf('.');
+    if (index > 0) {
+        return str.length - index - 1;
+    }
+    return 0;
+}
+function hasDecimal(value) {
+    return value % 1 !== 0;
+}
+
+class NumberController extends Controller {
+    min(min) {
+        this._min = min;
+        this._onUpdateMinMax();
+        return this;
+    }
+    max(max) {
+        this._max = max;
+        this._onUpdateMinMax();
+        return this;
+    }
+    step(step, explicit = true) {
+        this._step = step;
+        this._stepExplicit = explicit;
+        return this;
+    }
+    needsUpdateDisplay() {
+        if (this.parent._closed) {
+            return false;
+        }
+        let value = this.getValue();
+        if (this._listenPrevValue === undefined || Math.abs(this._listenPrevValue - value) >= this._step) {
+            this._listenPrevValue = value;
+            return true;
+        }
+        return false;
+    }
+    updateDisplay() {
+        const value = this.getValue();
+        if (this._hasSlider) {
+            let percent = (value - this._min) / (this._max - this._min);
+            percent = Math.max(0, Math.min(percent, 1));
+            this.$fill.style.width = percent * 100 + '%';
+        }
+        if (!this._inputFocused) {
+            this.$input.value = value;
+        }
+        return this;
+    }
+    _initInput() {
+        this.$input = document.createElement('input');
+        this.$input.setAttribute('type', 'text');
+        this.$input.setAttribute('aria-labelledby', this.$name.id);
+        // On touch devices only, use input[type=number] to force a numeric keyboard.
+        // Ideally we could use one input type everywhere, but [type=number] has quirks
+        // on desktop, and [inputmode=decimal] has quirks on iOS.
+        // See https://github.com/georgealways/lil-gui/pull/16
+        const isTouch = window.matchMedia('(pointer: coarse)').matches;
+        if (isTouch) {
+            this.$input.setAttribute('type', 'number');
+            this.$input.setAttribute('step', 'any');
+        }
+        this.$widget.appendChild(this.$input);
+        this.$disable = this.$input;
+        const onInput = ()=>{
+            let value = parseFloat(this.$input.value);
+            if (isNaN(value)) return;
+            if (this._stepExplicit) {
+                value = this._snap(value);
+            }
+            this.setValue(this._clamp(value));
+        };
+        // Keys & mouse wheel
+        // ---------------------------------------------------------------------
+        const increment = (delta)=>{
+            const value = parseFloat(this.$input.value);
+            if (isNaN(value)) return;
+            this._snapClampSetValue(value + delta);
+            // Force the input to updateDisplay when it's focused
+            this.$input.value = this.getValue();
+        };
+        const onKeyDown = (e)=>{
+            // Using `e.key` instead of `e.code` also catches NumpadEnter
+            if (e.key === 'Enter') {
+                this.$input.blur();
+            }
+            if (e.code === 'ArrowUp') {
+                e.preventDefault();
+                increment(this._step * this._arrowKeyMultiplier(e));
+            }
+            if (e.code === 'ArrowDown') {
+                e.preventDefault();
+                increment(this._step * this._arrowKeyMultiplier(e) * -1);
+            }
+        };
+        const onWheel = (e)=>{
+            if (this._inputFocused) {
+                e.preventDefault();
+                increment(this._step * this._normalizeMouseWheel(e));
+            }
+        };
+        // Vertical drag
+        // ---------------------------------------------------------------------
+        let testingForVerticalDrag = false, initClientX, initClientY, prevClientY, initValue, dragDelta;
+        // Once the mouse is dragged more than DRAG_THRESH px on any axis, we decide
+        // on the user's intent: horizontal means highlight, vertical means drag.
+        const DRAG_THRESH = 5;
+        const onMouseDown = (e)=>{
+            initClientX = e.clientX;
+            initClientY = prevClientY = e.clientY;
+            testingForVerticalDrag = true;
+            initValue = this.getValue();
+            dragDelta = 0;
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+        };
+        const onMouseMove = (e)=>{
+            if (testingForVerticalDrag) {
+                const dx = e.clientX - initClientX;
+                const dy = e.clientY - initClientY;
+                if (Math.abs(dy) > DRAG_THRESH) {
+                    e.preventDefault();
+                    this.$input.blur();
+                    testingForVerticalDrag = false;
+                    this._setDraggingStyle(true, 'vertical');
+                } else if (Math.abs(dx) > DRAG_THRESH) {
+                    onMouseUp();
+                }
+            }
+            // This isn't an else so that the first move counts towards dragDelta
+            if (!testingForVerticalDrag) {
+                const dy = e.clientY - prevClientY;
+                dragDelta -= dy * this._step * this._arrowKeyMultiplier(e);
+                // Clamp dragDelta so we don't have 'dead space' after dragging past bounds.
+                // We're okay with the fact that bounds can be undefined here.
+                if (initValue + dragDelta > this._max) {
+                    dragDelta = this._max - initValue;
+                } else if (initValue + dragDelta < this._min) {
+                    dragDelta = this._min - initValue;
+                }
+                this._snapClampSetValue(initValue + dragDelta);
+            }
+            prevClientY = e.clientY;
+        };
+        const onMouseUp = ()=>{
+            this._setDraggingStyle(false, 'vertical');
+            this._callOnFinishChange();
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+        // Focus state & onFinishChange
+        // ---------------------------------------------------------------------
+        const onFocus = ()=>{
+            this._inputFocused = true;
+        };
+        const onBlur = ()=>{
+            this._inputFocused = false;
+            this.updateDisplay();
+            this._callOnFinishChange();
+        };
+        this.$input.addEventListener('input', onInput);
+        this.$input.addEventListener('keydown', onKeyDown);
+        this.$input.addEventListener('wheel', onWheel, {
+            passive: false
+        });
+        this.$input.addEventListener('mousedown', onMouseDown);
+        this.$input.addEventListener('focus', onFocus);
+        this.$input.addEventListener('blur', onBlur);
+    }
+    _initSlider() {
+        this._hasSlider = true;
+        // Build DOM
+        // ---------------------------------------------------------------------
+        this.$slider = document.createElement('div');
+        this.$slider.classList.add('slider');
+        this.$fill = document.createElement('div');
+        this.$fill.classList.add('fill');
+        this.$slider.appendChild(this.$fill);
+        this.$widget.insertBefore(this.$slider, this.$input);
+        this.domElement.classList.add('hasSlider');
+        // Map clientX to value
+        // ---------------------------------------------------------------------
+        const map = (v, a, b, c, d)=>{
+            return (v - a) / (b - a) * (d - c) + c;
+        };
+        const setValueFromX = (clientX)=>{
+            const rect = this.$slider.getBoundingClientRect();
+            let value = map(clientX, rect.left, rect.right, this._min, this._max);
+            this._snapClampSetValue(value);
+        };
+        // Mouse drag
+        // ---------------------------------------------------------------------
+        const mouseDown = (e)=>{
+            this._setDraggingStyle(true);
+            setValueFromX(e.clientX);
+            window.addEventListener('mousemove', mouseMove);
+            window.addEventListener('mouseup', mouseUp);
+        };
+        const mouseMove = (e)=>{
+            setValueFromX(e.clientX);
+        };
+        const mouseUp = ()=>{
+            this._callOnFinishChange();
+            this._setDraggingStyle(false);
+            window.removeEventListener('mousemove', mouseMove);
+            window.removeEventListener('mouseup', mouseUp);
+        };
+        // Touch drag
+        // ---------------------------------------------------------------------
+        let testingForScroll = false, prevClientX, prevClientY;
+        const beginTouchDrag = (e)=>{
+            e.preventDefault();
+            this._setDraggingStyle(true);
+            setValueFromX(e.touches[0].clientX);
+            testingForScroll = false;
+        };
+        const onTouchStart = (e)=>{
+            if (e.touches.length > 1) return;
+            // If we're in a scrollable container, we should wait for the first
+            // touchmove to see if the user is trying to slide or scroll.
+            if (this._hasScrollBar) {
+                prevClientX = e.touches[0].clientX;
+                prevClientY = e.touches[0].clientY;
+                testingForScroll = true;
+            } else {
+                // Otherwise, we can set the value straight away on touchstart.
+                beginTouchDrag(e);
+            }
+            window.addEventListener('touchmove', onTouchMove, {
+                passive: false
+            });
+            window.addEventListener('touchend', onTouchEnd);
+        };
+        const onTouchMove = (e)=>{
+            if (testingForScroll) {
+                const dx = e.touches[0].clientX - prevClientX;
+                const dy = e.touches[0].clientY - prevClientY;
+                if (Math.abs(dx) > Math.abs(dy)) {
+                    // We moved horizontally, set the value and stop checking.
+                    beginTouchDrag(e);
+                } else {
+                    // This was, in fact, an attempt to scroll. Abort.
+                    window.removeEventListener('touchmove', onTouchMove);
+                    window.removeEventListener('touchend', onTouchEnd);
+                }
+            } else {
+                e.preventDefault();
+                setValueFromX(e.touches[0].clientX);
+            }
+        };
+        const onTouchEnd = ()=>{
+            this._callOnFinishChange();
+            this._setDraggingStyle(false);
+            window.removeEventListener('touchmove', onTouchMove);
+            window.removeEventListener('touchend', onTouchEnd);
+        };
+        // Mouse wheel
+        // ---------------------------------------------------------------------
+        // We have to use a debounced function to call onFinishChange because
+        // there's no way to tell when the user is "done" mouse-wheeling.
+        const callOnFinishChange = this._callOnFinishChange.bind(this);
+        const WHEEL_DEBOUNCE_TIME = 400;
+        let wheelFinishChangeTimeout;
+        const onWheel = (e)=>{
+            // ignore vertical wheels if there's a scrollbar
+            const isVertical = Math.abs(e.deltaX) < Math.abs(e.deltaY);
+            if (isVertical && this._hasScrollBar) return;
+            e.preventDefault();
+            // set value
+            const delta = this._normalizeMouseWheel(e) * this._step;
+            this._snapClampSetValue(this.getValue() + delta);
+            // force the input to updateDisplay when it's focused
+            this.$input.value = this.getValue();
+            // debounce onFinishChange
+            clearTimeout(wheelFinishChangeTimeout);
+            wheelFinishChangeTimeout = setTimeout(callOnFinishChange, WHEEL_DEBOUNCE_TIME);
+        };
+        this.$slider.addEventListener('mousedown', mouseDown);
+        this.$slider.addEventListener('touchstart', onTouchStart, {
+            passive: false
+        });
+        this.$slider.addEventListener('wheel', onWheel, {
+            passive: false
+        });
+    }
+    _setDraggingStyle(active, axis = 'horizontal') {
+        if (this.$slider) {
+            this.$slider.classList.toggle('active', active);
+        }
+        document.body.classList.toggle('lil-gui-dragging', active);
+        document.body.classList.toggle(`lil-gui-${axis}`, active);
+    }
+    _getImplicitStep() {
+        const value = this.getValue();
+        if (this._hasMin && this._hasMax) {
+            return (this._max - this._min) / 100;
+        } else if (hasDecimal(value)) {
+            return Math.pow(0.1, getPrecision(value));
+        }
+        return 0.1;
+    }
+    _onUpdateMinMax() {
+        if (!this._hasSlider && this._hasMin && this._hasMax) {
+            // If this is the first time we're hearing about min and max
+            // and we haven't explicitly stated what our step is, let's
+            // update that too.
+            if (!this._stepExplicit) {
+                this.step(this._getImplicitStep(), false);
+            }
+            this._initSlider();
+            this.updateDisplay();
+        }
+    }
+    _normalizeMouseWheel(e) {
+        let { deltaX, deltaY } = e;
+        // Safari and Chrome report weird non-integral values for a notched wheel,
+        // but still expose actual lines scrolled via wheelDelta. Notched wheels
+        // should behave the same way as arrow keys.
+        if (Math.floor(e.deltaY) !== e.deltaY && e.wheelDelta) {
+            deltaX = 0;
+            deltaY = -e.wheelDelta / 120;
+            deltaY *= this._stepExplicit ? 1 : 10;
+        }
+        const wheel = deltaX + -deltaY;
+        return wheel;
+    }
+    _arrowKeyMultiplier(e) {
+        let mult = this._stepExplicit ? 1 : 10;
+        if (e.shiftKey) {
+            mult *= 10;
+        } else if (e.altKey) {
+            mult /= 10;
+        }
+        return mult;
+    }
+    _snap(value) {
+        // This would be the logical way to do things, but floating point errors.
+        // return Math.round( value / this._step ) * this._step;
+        // Using inverse step solves a lot of them, but not all
+        // const inverseStep = 1 / this._step;
+        // return Math.round( value * inverseStep ) / inverseStep;
+        // Not happy about this, but haven't seen it break.
+        const r = Math.round(value / this._step) * this._step;
+        return parseFloat(r.toPrecision(15));
+    }
+    _clamp(value) {
+        // either condition is false if min or max is undefined
+        if (value < this._min) value = this._min;
+        if (value > this._max) value = this._max;
+        return value;
+    }
+    _snapClampSetValue(value) {
+        this.setValue(this._clamp(this._snap(value)));
+    }
+    get _hasScrollBar() {
+        const root = this.parent.root.$children;
+        return root.scrollHeight > root.clientHeight;
+    }
+    get _hasMin() {
+        return this._min !== undefined;
+    }
+    get _hasMax() {
+        return this._max !== undefined;
+    }
+    constructor(parent, object, property, min, max, step){
+        super(parent, object, property, 'number');
+        this._initInput();
+        this.min(min);
+        this.max(max);
+        const stepExplicit = step !== undefined;
+        this.step(stepExplicit ? step : this._getImplicitStep(), stepExplicit);
+    }
+}
+
+class BooleanController extends Controller {
+    updateDisplay() {
+        this.$input.checked = this.getValue();
+        return this;
+    }
+    constructor(parent, object, property){
+        super(parent, object, property, 'boolean', 'label');
+        this.$input = document.createElement('input');
+        this.$input.setAttribute('type', 'checkbox');
+        this.$input.setAttribute('aria-labelledby', this.$name.id);
+        this.$widget.appendChild(this.$input);
+        this.$input.addEventListener('change', ()=>{
+            this.setValue(this.$input.checked);
+            this._callOnFinishChange();
+        });
+        this.$disable = this.$input;
+    }
+}
+
+class StringController extends Controller {
+    updateDisplay() {
+        this.$input.value = this.getValue();
+        return this;
+    }
+    constructor(parent, object, property){
+        super(parent, object, property, 'string');
+        this.$input = document.createElement('input');
+        this.$input.setAttribute('type', 'text');
+        this.$input.setAttribute('aria-labelledby', this.$name.id);
+        this.$input.addEventListener('input', ()=>{
+            this.setValue(this.$input.value);
+        });
+        this.$input.addEventListener('keydown', (e)=>{
+            if (e.code === 'Enter') {
+                this.$input.blur();
+            }
+        });
+        this.$input.addEventListener('blur', ()=>{
+            this._callOnFinishChange();
+        });
+        this.$widget.appendChild(this.$input);
+        this.$disable = this.$input;
+    }
+}
+
+class FunctionController extends Controller {
+    constructor(parent, object, property){
+        super(parent, object, property, 'function');
+        // Buttons are the only case where widget contains name
+        this.$button = document.createElement('button');
+        this.$button.appendChild(this.$name);
+        this.$widget.appendChild(this.$button);
+        this.$button.addEventListener('click', (e)=>{
+            e.preventDefault();
+            this.getValue().call(this.object);
+            this._callOnChange();
+        });
+        // enables :active pseudo class on mobile
+        this.$button.addEventListener('touchstart', ()=>{}, {
+            passive: true
+        });
+        this.$disable = this.$button;
+    }
+}
+
+class ColorController extends Controller {
+    reset() {
+        this._setValueFromHexString(this._initialValueHexString);
+        return this;
+    }
+    _setValueFromHexString(value) {
+        if (this._format.isPrimitive) {
+            const newValue = this._format.fromHexString(value);
+            this.setValue(newValue);
+        } else {
+            this._format.fromHexString(value, this.getValue(), this._rgbScale);
+            this._callOnChange();
+            this.updateDisplay();
+        }
+    }
+    save() {
+        return this._format.toHexString(this.getValue(), this._rgbScale);
+    }
+    load(value) {
+        this._setValueFromHexString(value);
+        this._callOnFinishChange();
+        return this;
+    }
+    updateDisplay() {
+        this.$input.value = this._format.toHexString(this.getValue(), this._rgbScale);
+        if (!this._textFocused) {
+            this.$text.value = this.$input.value.substring(1);
+        }
+        this.$display.style.backgroundColor = this.$input.value;
+        return this;
+    }
+    constructor(parent, object, property, rgbScale){
+        super(parent, object, property, 'color');
+        this._textFocused = false;
+        this._initialValueHexString = "";
+        this._rgbScale = 1;
+        this.$input = document.createElement('input');
+        this.$input.setAttribute('type', 'color');
+        this.$input.setAttribute('tabindex', "-1");
+        this.$input.setAttribute('aria-labelledby', this.$name.id);
+        this.$text = document.createElement('input');
+        this.$text.setAttribute('type', 'text');
+        this.$text.setAttribute('spellcheck', 'false');
+        this.$text.setAttribute('aria-labelledby', this.$name.id);
+        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 = rgbScale;
+        this._initialValueHexString = this.save();
+        this._textFocused = false;
+        this.$input.addEventListener('input', ()=>{
+            this._setValueFromHexString(this.$input.value);
+        });
+        this.$input.addEventListener('blur', ()=>{
+            this._callOnFinishChange();
+        });
+        this.$text.addEventListener('input', ()=>{
+            const tryParse = normalizeColorString(this.$text.value);
+            if (tryParse) {
+                this._setValueFromHexString(tryParse);
+            }
+        });
+        this.$text.addEventListener('focus', ()=>{
+            this._textFocused = true;
+            this.$text.select();
+        });
+        this.$text.addEventListener('blur', ()=>{
+            this._textFocused = false;
+            this.updateDisplay();
+            this._callOnFinishChange();
+        });
+        this.$disable = this.$text;
+        this.listen();
+    }
+}
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+
+            _next(undefined);
+        });
+    };
+}
+
+class ImageController extends Controller {
+    static toDataURL(img) {
+        return _async_to_generator(function*() {
+            if (img instanceof HTMLImageElement) {
+                return img.src;
+            } else {
+                if (img) {
+                    let url = ImageController._imageMap.get(img);
+                    if (url) return url;
+                    const w = Math.min(img.width, 256);
+                    const h = Math.min(img.height, 256);
+                    if (ImageController._context == null) {
+                        ImageController._context = document.createElement('canvas').getContext("2d");
+                    }
+                    ImageController._context.canvas.width = w;
+                    ImageController._context.canvas.height = h;
+                    if (img.data) {
+                        let imageData = ImageController._context.createImageData(img.width, img.height);
+                        imageData.data.set(img.data);
+                        img = yield createImageBitmap(imageData);
+                    }
+                    if (img instanceof ImageBitmap) {
+                        ImageController._context.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);
+                        ImageController._imageMap.set(img, url = ImageController._context.canvas.toDataURL());
+                        return url;
+                    }
+                }
+                return "";
+            }
+        })();
+    }
+    updateDisplay() {
+        ImageController.toDataURL(this.getValue()).then((url)=>this.$img.src = url);
+        return this;
+    }
+    constructor(parent, object, property){
+        super(parent, object, property, "image");
+        this.$img = document.createElement("img");
+        this.$widget.appendChild(this.$img);
+        this.updateDisplay();
+    }
+}
+ImageController._context = null;
+ImageController._imageMap = new WeakMap();
+
+class UIElement {
+    add(...args) {
+        for(let i = 0; i < args.length; i++){
+            const argument = args[i];
+            if (argument instanceof UIElement) {
+                this.dom.appendChild(argument.dom);
+            } else {
+                console.error('UIElement:', argument, 'is not an instance of UIElement.');
+            }
+        }
+        return this;
+    }
+    remove(...args) {
+        for(let i = 0; i < args.length; i++){
+            const argument = args[i];
+            if (argument instanceof UIElement) {
+                this.dom.removeChild(argument.dom);
+            } else {
+                console.error('UIElement:', argument, 'is not an instance of UIElement.');
+            }
+        }
+        return this;
+    }
+    clear() {
+        while(this.dom.children.length){
+            this.dom.removeChild(this.dom.lastChild);
+        }
+    }
+    setId(id) {
+        this.dom.id = id;
+        return this;
+    }
+    getId() {
+        return this.dom.id;
+    }
+    setClass(name) {
+        this.dom.className = name;
+        return this;
+    }
+    addClass(name) {
+        this.dom.classList.add(name);
+        return this;
+    }
+    removeClass(name) {
+        this.dom.classList.remove(name);
+        return this;
+    }
+    setStyle(style, array) {
+        for(let i = 0; i < array.length; i++){
+            this.dom.style[style] = array[i];
+        }
+        return this;
+    }
+    setDisabled(value) {
+        this.dom.disabled = value;
+        return this;
+    }
+    setTextContent(value) {
+        this.dom.textContent = value;
+        return this;
+    }
+    getIndexOfChild(element) {
+        return Array.prototype.indexOf.call(this.dom.children, element.dom);
+    }
+    constructor(dom){
+        this.dom = dom;
+    }
+}
+
+class UINumber extends UIElement {
+    equals(v) {
+        return Math.abs(this.value - v) <= this.step;
+    }
+    getValue() {
+        return this.value;
+    }
+    setValue(value) {
+        if (value !== undefined) {
+            if (value < this.min) value = this.min;
+            if (value > this.max) value = this.max;
+            this.value = value;
+            this.updateDisplay();
+            this._onChangeCallback && this._onChangeCallback(value);
+        }
+        return this;
+    }
+    updateDisplay() {
+        let value = this.getValue();
+        this.dom.value = "" + this._snap(value);
+        if (this.unit !== '') this.dom.value += ' ' + this.unit;
+    }
+    _getImplicitStep(value) {
+        if (this.max !== Infinity && this.min !== -Infinity) {
+            return (this.max - this.min) / 100;
+        } else if (hasDecimal(value)) {
+            return 1 / Math.pow(10, getPrecision(value));
+        }
+        return 0.1;
+    }
+    _snap(value) {
+        const r = Math.round(value / this.step) * this.step;
+        return parseFloat(r.toPrecision(15));
+    }
+    onChange(callback) {
+        this._onChangeCallback = callback;
+        return this;
+    }
+    setUnit(unit) {
+        this.unit = unit;
+        return this;
+    }
+    constructor(value, min, max, step){
+        super(document.createElement('input'));
+        this.value = 0;
+        this.min = -Infinity;
+        this.max = Infinity;
+        this.step = 1;
+        this.nudge = 1;
+        this.unit = "";
+        this.dom.style.cursor = 'ns-resize';
+        this.dom.value = '0.00';
+        this.min = min != null ? min : this.min;
+        this.max = max != null ? max : this.max;
+        this.step = step != null ? step : this._getImplicitStep(value);
+        this.setValue(value);
+        const scope = this;
+        const changeEvent = document.createEvent('HTMLEvents');
+        changeEvent.initEvent('change', true, true);
+        let distance = 0;
+        let onMouseDownValue = 0;
+        const pointer = {
+            x: 0,
+            y: 0
+        };
+        const prevPointer = {
+            x: 0,
+            y: 0
+        };
+        function onMouseDown(event) {
+            event.preventDefault();
+            distance = 0;
+            onMouseDownValue = scope.value;
+            prevPointer.x = event.clientX;
+            prevPointer.y = event.clientY;
+            document.addEventListener('mousemove', onMouseMove, false);
+            document.addEventListener('mouseup', onMouseUp, false);
+        }
+        function onMouseMove(event) {
+            const currentValue = scope.value;
+            pointer.x = event.clientX;
+            pointer.y = event.clientY;
+            distance += pointer.x - prevPointer.x - (pointer.y - prevPointer.y);
+            let value = onMouseDownValue + distance * 10 / (event.shiftKey ? 5 : 50) * scope.step;
+            value = Math.min(scope.max, Math.max(scope.min, value));
+            if (currentValue !== value) {
+                scope.setValue(value);
+                scope.dom.dispatchEvent(changeEvent);
+            }
+            prevPointer.x = event.clientX;
+            prevPointer.y = event.clientY;
+        }
+        function onMouseUp() {
+            document.removeEventListener('mousemove', onMouseMove, false);
+            document.removeEventListener('mouseup', onMouseUp, false);
+            if (Math.abs(distance) < 2) {
+                scope.dom.focus();
+                scope.dom.select();
+            }
+        }
+        function onTouchStart(event) {
+            if (event.touches.length === 1) {
+                distance = 0;
+                onMouseDownValue = scope.value;
+                prevPointer.x = event.touches[0].pageX;
+                prevPointer.y = event.touches[0].pageY;
+                document.addEventListener('touchmove', onTouchMove, false);
+                document.addEventListener('touchend', onTouchEnd, false);
+            }
+        }
+        function onTouchMove(event) {
+            const currentValue = scope.value;
+            pointer.x = event.touches[0].pageX;
+            pointer.y = event.touches[0].pageY;
+            distance += pointer.x - prevPointer.x - (pointer.y - prevPointer.y);
+            let value = onMouseDownValue + distance / (event.shiftKey ? 5 : 50) * scope.step;
+            value = Math.min(scope.max, Math.max(scope.min, value));
+            if (currentValue !== value) {
+                scope.setValue(value);
+                scope.dom.dispatchEvent(changeEvent);
+            }
+            prevPointer.x = event.touches[0].pageX;
+            prevPointer.y = event.touches[0].pageY;
+        }
+        function onTouchEnd(event) {
+            if (event.touches.length === 0) {
+                document.removeEventListener('touchmove', onTouchMove, false);
+                document.removeEventListener('touchend', onTouchEnd, false);
+            }
+        }
+        function onChange() {
+            scope.setValue(parseFloat(scope.dom.value));
+        }
+        function onFocus() {
+            scope.dom.style.backgroundColor = '';
+            scope.dom.style.cursor = '';
+        }
+        function onBlur() {
+            // scope.dom.style.backgroundColor = 'transparent';
+            scope.dom.style.cursor = 'ns-resize';
+        }
+        function onKeyDown(event) {
+            event.stopPropagation();
+            switch(event.keyCode){
+                case 13:
+                    scope.dom.blur();
+                    break;
+                case 38:
+                    event.preventDefault();
+                    scope.setValue(scope.getValue() + scope.step);
+                    scope.dom.dispatchEvent(changeEvent);
+                    break;
+                case 40:
+                    event.preventDefault();
+                    scope.setValue(scope.getValue() - scope.step);
+                    scope.dom.dispatchEvent(changeEvent);
+                    break;
+            }
+        }
+        onBlur();
+        this.dom.addEventListener('keydown', onKeyDown, false);
+        this.dom.addEventListener('mousedown', onMouseDown, false);
+        this.dom.addEventListener('touchstart', onTouchStart, {
+            passive: true
+        });
+        this.dom.addEventListener('change', onChange, false);
+        this.dom.addEventListener('focus', onFocus, false);
+        this.dom.addEventListener('blur', onBlur, false);
+    }
+}
+
+class VectorController extends Controller {
+    createElement(fill, value, min, max, step, onChange) {
+        let uiNumber = new UINumber(value, min, max, step);
+        uiNumber.dom.setAttribute('type', 'number');
+        uiNumber.dom.setAttribute('aria-labelledby', this.$name.id);
+        uiNumber.onChange(onChange);
+        this.$widget.appendChild(uiNumber.dom);
+        if (fill) {
+            let $fill = document.createElement('div');
+            $fill.classList.add('fill');
+            this.$widget.appendChild($fill);
+        }
+        return uiNumber;
+    }
+    setValue(value) {
+        let target = this.getValue();
+        if (value.x !== undefined) target.x = value.x;
+        if (value.y !== undefined) target.y = value.y;
+        if (value.z !== undefined) target.z = value.z;
+        if (value.w !== undefined) target.w = value.w;
+        this._callOnChange();
+        return this;
+    }
+    needsUpdateDisplay() {
+        return !this.parent._closed;
+    }
+    updateDisplay() {
+        let value = this.getValue();
+        if (value.x !== undefined && this.xElement && !this.xElement.equals(value.x)) {
+            this.xElement.value = value.x;
+            this.xElement.updateDisplay();
+        }
+        if (value.y !== undefined && this.yElement && !this.yElement.equals(value.y)) {
+            this.yElement.value = value.y;
+            this.yElement.updateDisplay();
+        }
+        if (value.z !== undefined && this.zElement && !this.zElement.equals(value.z)) {
+            this.zElement.value = value.z;
+            this.zElement.updateDisplay();
+        }
+        if (value.w !== undefined && this.wElement && !this.wElement.equals(value.w)) {
+            this.wElement.value = value.w;
+            this.wElement.updateDisplay();
+        }
+        return this;
+    }
+    constructor(parent, object, property, min, max, step){
+        super(parent, object, property, 'vector');
+        const value = this.getValue();
+        this.initialValue = value.clone && value.clone() || Object.assign({}, value);
+        if (this.initialValue.x !== undefined) this.xElement = this.createElement(true, this.initialValue.x, min, max, step, (v)=>{
+            value.x = v;
+            this._callOnChange();
+        });
+        if (this.initialValue.y !== undefined) this.yElement = this.createElement(true, this.initialValue.y, min, max, step, (v)=>{
+            value.y = v;
+            this._callOnChange();
+        });
+        if (this.initialValue.z !== undefined) this.zElement = this.createElement(true, this.initialValue.z, min, max, step, (v)=>{
+            value.z = v;
+            this._callOnChange();
+        });
+        if (this.initialValue.w !== undefined) this.wElement = this.createElement(false, this.initialValue.w, min, max, step, (v)=>{
+            value.w = v;
+            this._callOnChange();
+        });
+    }
+}
+
+function clamp(v, minv, maxv) {
+    return Math.max(Math.min(v, maxv), minv);
+}
+function hitTest(x, y, cx, cy, hw, hh) {
+    if (x < cx - hw || x > cx + hw || y < cy - hh || y > cy + hh) {
+        return false;
+    }
+    return true;
+}
+const theme = {
+    BACKGROUND: "#545454",
+    GRID: "#646464",
+    LINE: "#000000",
+    COVER: "#19191980",
+    POINT: "#878787",
+    SELECTED: "#ffffff"
+};
+class CurvePanel {
+    get dom() {
+        return this._canvas;
+    }
+    get curve() {
+        return this._curve;
+    }
+    resize(width, height) {
+        const canvas = this._canvas;
+        const DPR = window.devicePixelRatio || 1;
+        const xRes = (width != null ? width : canvas.offsetWidth) * DPR;
+        const yRes = (height != null ? height : canvas.offsetHeight) * DPR;
+        if (Math.hypot(xRes - this._xRes, yRes - this._yRes) > 0.001) {
+            this._xRes = canvas.width = xRes;
+            this._yRes = canvas.height = yRes;
+        }
+    }
+    onCurveChanged(callback) {
+        this._onCurveChanged = callback;
+        return this;
+    }
+    onPointChanged(callback) {
+        this._onPointChanged = callback;
+        return this;
+    }
+    onPointRemoved(callback) {
+        this._onPointRemoved = callback;
+        return this;
+    }
+    onPointAdded(callback) {
+        this._onPointAdded = callback;
+        return this;
+    }
+    _onDblClick(e) {
+        e.preventDefault();
+        if (e.button === 0) {
+            this._tryAddingPoint = true;
+        }
+    }
+    _onMouseDown(e) {
+        e.preventDefault();
+        if (e.button == 0) {
+            this._cxRef = this._cx;
+            this._cyRef = this._cy;
+            this._offsetXRef = e.offsetX;
+            this._offsetYRef = e.offsetY;
+            this._trySelectingPoint = true;
+        }
+        this._button = e.button;
+        this._mouse.x = e.offsetX;
+        this._mouse.y = e.offsetY;
+        this._selectedPoint = null;
+    }
+    _onMouseUp(e) {
+        e.preventDefault();
+        this._button = -1;
+    }
+    _onMouseMove(e) {
+        e.preventDefault();
+        const cxRes = this._canvas.offsetWidth;
+        const cyRes = this._canvas.offsetHeight;
+        if (this._button == 0) {
+            if (this._selectedPoint) {
+                const rx = this._ra;
+                const ry = this._fixed ? this._ra * cyRes / cxRes : this._ra;
+                const x = this._pxRef + (e.offsetX - this._offsetXRef) / cxRes * rx / 2;
+                const y = this._pyRef - (e.offsetY - this._offsetYRef) / cyRes * ry / 2;
+                this.setPointPos(x, y);
+            } else {
+                this._cx = this._cxRef - (e.offsetX - this._offsetXRef) * 2 * this._ra / cxRes;
+                this._cy = this._cyRef + (e.offsetY - this._offsetYRef) * 2 * this._ra / cyRes;
+            }
+        }
+        this._mouse.x = e.offsetX;
+        this._mouse.y = e.offsetY;
+    }
+    _onWheel(e) {
+        e.preventDefault();
+        const sfactor = 1.1;
+        this._ra *= e.deltaY < 0 || e.wheelDelta > 0 ? 1.0 / sfactor : sfactor;
+        this._ra = clamp(this._ra, 1, 2);
+    }
+    render() {
+        if (this._autoResize) {
+            this.resize();
+        }
+        const rx = this._ra;
+        const ry = this._fixed ? this._ra * this._yRes / this._xRes : this._ra;
+        const a = 2 - this._ra;
+        this._cx = clamp(this._cx, -a, a);
+        this._cy = clamp(this._cy, -a, a);
+        const ctx = this._context;
+        ctx.setTransform(1, 0.0, 0.0, 1, 0.5, 0.5);
+        ctx.fillStyle = theme.BACKGROUND;
+        ctx.fillRect(0, 0, this._xRes, this._yRes);
+        this._drawGrid(ctx, theme.GRID, rx, ry);
+        // this._drawAxis(ctx, theme.GRID, rx, ry);
+        this._drawCurve(ctx, theme.LINE, rx, ry);
+    }
+    _drawGrid(ctx, color, rx, ry) {
+        const iax = Math.floor(this._cx - rx);
+        const ibx = Math.floor(this._cx + rx);
+        const iay = Math.floor(this._cy - ry);
+        const iby = Math.floor(this._cy + ry);
+        ctx.lineWidth = 2.0;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        for(let i = iax; i <= ibx; i++){
+            let ix = this._xRes * (0.5 + (i - this._cx) / (2 * rx));
+            ctx.moveTo(ix, this._yRes);
+            ctx.lineTo(ix, 0);
+        }
+        for(let i = iay; i <= iby; i++){
+            let iy = this._yRes * (0.5 - (i - this._cy) / (2 * ry));
+            ctx.moveTo(this._xRes, iy);
+            ctx.lineTo(0, iy);
+        }
+        ctx.stroke();
+    }
+    _drawAxis(ctx, color, rx, ry) {
+        const xPos = this._xRes * (0.5 - this._cx / (2.0 * rx));
+        const yPos = this._yRes * (0.5 + this._cy / (2.0 * ry));
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 4;
+        ctx.beginPath();
+        ctx.moveTo(xPos, 0);
+        ctx.lineTo(xPos, this._yRes);
+        ctx.moveTo(0, yPos);
+        ctx.lineTo(this._xRes, yPos);
+        ctx.stroke();
+    }
+    _drawCurve(ctx, color, rx, ry) {
+        if (!this._curve) return;
+        const ax = 2 / rx; //缩放
+        const ay = 2 / ry;
+        const bx = (1 - ax) / 2; //偏移，保持居中
+        const by = (1 - ay) / 2;
+        const cx = this._cx / 4; //缩小4倍至单位1
+        const cy = this._cy / 4;
+        const SAMPLES = Math.min(100, this._xRes);
+        const STEP = 1 / (SAMPLES - 1);
+        const point = this._curve.createCurvePoint();
+        const DPR = window.devicePixelRatio || 1;
+        const mx = this._mouse.x * DPR;
+        const my = this._mouse.y * DPR;
+        let hitCurve = null;
+        let hitPoint = null;
+        let isFirstPoint = true;
+        //配置参数
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
+        //绘制曲线
+        ctx.beginPath();
+        for(let i = 0; i < SAMPLES; i++){
+            let p = this._curve.getPoint(i * STEP, point);
+            let x = this._xRes * ((p.x - cx) * ax + bx);
+            let y = this._yRes * (1 + (cy - p.y) * ay - by);
+            if (hitCurve === null && hitTest(mx, my, x, y, 15, 15)) {
+                hitCurve = p;
+            }
+            if (isFirstPoint) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+            isFirstPoint = false;
+        }
+        ctx.stroke();
+        ctx.lineTo(this._xRes, this._yRes);
+        ctx.closePath();
+        ctx.fillStyle = theme.COVER;
+        ctx.fill();
+        //绘制控制点
+        const points = this._curve.points;
+        for(let i = 1; i < points.length - 1; i++){
+            let p = points[i];
+            let x = this._xRes * ((p.x - cx) * ax + bx);
+            let y = this._yRes * (1 + (cy - p.y) * ay - by);
+            if (hitPoint === null && hitTest(mx, my, x, y, 20, 20)) {
+                hitPoint = p;
+            }
+            ctx.fillStyle = p === hitPoint || p === this._selectedPoint ? theme.SELECTED : theme.POINT;
+            ctx.fillRect(x - 2.5, y - 2.5, 5, 5);
+        }
+        //状态检查
+        if (this._tryAddingPoint && hitPoint) {
+            this._tryAddingPoint = false;
+            points.splice(points.indexOf(hitPoint), 1);
+            this._onPointRemoved && this._onPointRemoved(hitPoint);
+        }
+        if (this._tryAddingPoint && hitCurve) {
+            this._tryAddingPoint = false;
+            let px = (mx / this._xRes - bx) / ax + cx;
+            let py = cy - (my / this._yRes + by - 1) / ay;
+            let p = this._curve.createCurvePoint(px, py);
+            points.push(p);
+            points.sort((a, b)=>a.x - b.x);
+            this._onPointAdded && this._onPointAdded(p);
+        }
+        if (this._trySelectingPoint && hitPoint) {
+            this._trySelectingPoint = false;
+            this.selectPoint(hitPoint);
+        }
+        this._tryAddingPoint = false;
+        this._trySelectingPoint = false;
+    }
+    setCurve(curve) {
+        this._curve = curve;
+        this._selectedPoint = null;
+        this._onCurveChanged && this._onCurveChanged(curve);
+        return this;
+    }
+    setPointMode(mode) {
+        if (this._selectedPoint) {
+            this._selectedPoint.mode = mode;
+            this._onPointChanged && this._onPointChanged(this._selectedPoint);
+        }
+        return this;
+    }
+    setPointPos(x, y) {
+        if (this._selectedPoint) {
+            this._selectedPoint.set(clamp(x, 0, 1), clamp(y, 0, 1));
+            this._curve.points.sort((a, b)=>a.x - b.x);
+            this._onPointChanged && this._onPointChanged(this._selectedPoint);
+        }
+        return this;
+    }
+    selectPoint(point) {
+        if (point) {
+            this._selectedPoint = point;
+            this._pxRef = point.x;
+            this._pyRef = point.y;
+            this._onPointChanged && this._onPointChanged(point);
+        } else {
+            this._selectedPoint = null;
+        }
+        return this;
+    }
+    constructor(){
+        this._xRes = 1;
+        this._yRes = 1;
+        this._cx = 0;
+        this._cy = 0;
+        this._ra = 2;
+        this._fixed = false;
+        this._autoResize = true;
+        this._mouse = {
+            x: 0,
+            y: 0
+        };
+        this._offsetXRef = 0;
+        this._offsetYRef = 0;
+        this._cxRef = 0;
+        this._cyRef = 0;
+        this._pxRef = 0;
+        this._pyRef = 0;
+        this._button = -1;
+        this._curve = null;
+        this._selectedPoint = null;
+        this._tryAddingPoint = false;
+        this._trySelectingPoint = false;
+        this._canvas = document.createElement("canvas");
+        this._context = this._canvas.getContext("2d");
+        const canvas = this._canvas;
+        canvas.addEventListener("mousedown", (e)=>this._onMouseDown(e));
+        canvas.addEventListener("mouseup", (e)=>this._onMouseUp(e));
+        canvas.addEventListener("mouseleave", (e)=>this._onMouseUp(e));
+        canvas.addEventListener("mousemove", (e)=>this._onMouseMove(e));
+        canvas.addEventListener("wheel", (e)=>this._onWheel(e));
+        canvas.addEventListener("dblclick", (e)=>this._onDblClick(e));
+    }
+}
+function copyToClipboard(text) {
+    const tempInput = document.createElement('textarea');
+    tempInput.value = text;
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    tempInput.setSelectionRange(0, 99999); // 兼容移动设备
+    document.execCommand('copy');
+    document.body.removeChild(tempInput);
+}
+function toFixedFloat(v, fractionDigits) {
+    return parseFloat(v.toFixed(fractionDigits));
+}
+class CurveEditor {
+    get dom() {
+        return this._dom;
+    }
+    onChange(callback) {
+        this._onChange = callback;
+        return this;
+    }
+    _onToggleTab(tabInex) {
+        for(let i = 0; i < this._tabs.length; i++){
+            if (i === tabInex) this._tabs[i].classList.add("selected");
+            else this._tabs[i].classList.remove("selected");
+        }
+        this._curvePanel.setCurve(this._curves[tabInex]);
+    }
+    _onTogglePointTab(tab) {
+        if (tab === 0) {
+            this._smoothTab.classList.add("selected");
+            this._sharpTab.classList.remove("selected");
+        } else {
+            this._smoothTab.classList.remove("selected");
+            this._sharpTab.classList.add("selected");
+        }
+    }
+    _onCurveChanged(curve) {
+        const points = this._curvePanel.curve.points;
+        this._curvePointPanel.style.display = points.length > 2 ? "flex" : "none";
+        this._curvePanel.selectPoint(points.length > 2 ? points[1] : null);
+    }
+    _onPosChanged() {
+        this._curvePanel.setPointPos(parseFloat(this._xPosInput.value), parseFloat(this._yPosInput.value));
+    }
+    _onPointAdded(point) {
+        const points = this._curvePanel.curve.points;
+        this._curvePointPanel.style.display = points.length > 2 ? "flex" : "none";
+        this._curvePanel.selectPoint(point);
+    }
+    _onPointRemoved(point) {
+        const points = this._curvePanel.curve.points;
+        this._curvePointPanel.style.display = points.length > 2 ? "flex" : "none";
+        this._curvePanel.selectPoint(points.length > 2 ? points[1] : null);
+    }
+    _onPointChanged(point) {
+        let isChanged = false;
+        let layoutPoint = this._layoutPoint;
+        if (layoutPoint.mode !== point.mode) {
+            layoutPoint.mode = point.mode;
+            this._onTogglePointTab(point.mode);
+            isChanged = true;
+        }
+        if (Math.hypot(layoutPoint.x - point.x, layoutPoint.y - point.y) > 0.001) {
+            layoutPoint.x = point.x;
+            layoutPoint.y = point.y;
+            this._xPosInput.value = parseFloat(point.x.toFixed(3)).toString();
+            this._yPosInput.value = parseFloat(point.y.toFixed(3)).toString();
+            isChanged = true;
+        }
+        if (isChanged) {
+            this._curvePanel.curve.needsUpdate = true;
+            this._onChange && this._onChange(this._target);
+        }
+    }
+    render() {
+        this._curvePanel.render();
+    }
+    constructor(target){
+        this._tabs = [];
+        this._dom = document.createElement("div");
+        this._dom.classList.add("curve-editor");
+        document.body.appendChild(this._dom);
+        let tabGroup = document.createElement("div");
+        tabGroup.classList.add("curve-top");
+        tabGroup.ondblclick = (e)=>{
+            e.preventDefault();
+            let text = this._curves.map((v)=>v.points.length + "," + v.points.map((p)=>`${toFixedFloat(p.x, 3)},${toFixedFloat(p.y, 3)},${p.mode}`).join(",")).join(",");
+            copyToClipboard(text);
+            alert("Copyed curve points");
+        };
+        this._dom.appendChild(tabGroup);
+        let curves = Array.isArray(target) ? target : [
+            target
+        ];
+        if (curves.length > 1) {
+            for(let i = 0; i < curves.length; i++){
+                let c = curves[i];
+                let tab = document.createElement("div");
+                tab.classList.add("button-medium");
+                tab.textContent = c.name || i.toString();
+                tab.onclick = ()=>this._onToggleTab(i);
+                tabGroup.appendChild(tab);
+                this._tabs.push(tab);
+            }
+        }
+        this._target = target;
+        this._curves = curves;
+        this._layoutPoint = curves[0].createCurvePoint(0, 0, -1);
+        this._curvePanel = new CurvePanel();
+        this._curvePanel.dom.classList.add("curve-panel");
+        this._curvePanel.onCurveChanged((c)=>this._onCurveChanged(c));
+        this._curvePanel.onPointChanged((p)=>this._onPointChanged(p));
+        this._curvePanel.onPointAdded((p)=>this._onPointAdded(p));
+        this._curvePanel.onPointRemoved((p)=>this._onPointRemoved(p));
+        this._dom.appendChild(this._curvePanel.dom);
+        this._curvePointPanel = document.createElement("div");
+        this._curvePointPanel.classList.add("curve-point-panel");
+        this._curvePointPanel.style.display = "none";
+        this._dom.appendChild(this._curvePointPanel);
+        this._smoothTab = document.createElement("div");
+        this._smoothTab.classList.add("button-medium");
+        this._smoothTab.innerHTML = /*html*/ `
+        <svg viewBox="351.367 172.836 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+            <path style="fill: none; stroke-width: 2px; stroke: rgb(240, 240, 240);" d="M 356 200 C 356 200 355.7892846963982 195.12801796288684 356 193 C 356.17984169835074 191.18377517899805 356.2627725586097 189.58207992830177 357 188 C 357.82614089255884 186.22711303095053 359.32609311863524 184.16719383631644 361 183 C 362.6636054267734 181.83998923607413 364.99999999999994 180.99999999999997 367 181 C 368.99999999999994 180.99999999999997 371.3363945732266 181.83998923607413 373 183 C 374.6739068813647 184.16719383631644 376.1738591074412 186.22711303095053 377 188 C 377.73722744139036 189.58207992830177 377.8201583016493 191.18377517899808 378 193 C 378.2107153036018 195.12801796288684 378 200 378 200" transform="matrix(1, 0, 0, 1, -5.684341886080802e-14, 0)" bx:d="M 356 200 R 356 193 R 357 188 R 361 183 R 367 181 R 373 183 R 377 188 R 378 193 R 378 200 1@f911f19e"/>
+            <rect x="368" y="176.021" width="6" height="5.979" style="fill: rgb(255, 255, 255);" transform="matrix(1, 0, 0, 1, -5.684341886080802e-14, 0)"/>
+        </svg>
+        `;
+        this._curvePointPanel.appendChild(this._smoothTab);
+        this._sharpTab = document.createElement("div");
+        this._sharpTab.classList.add("button-medium");
+        this._sharpTab.innerHTML = /*html*/ `
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <polyline style="fill: none; stroke: rgb(240, 240, 240); stroke-width: 2px;" points="6 26 17 7 28 26"/>
+            <rect x="14" y="4" width="6" height="6" style="fill: rgb(255, 255, 255);"/>
+        </svg>
+        `;
+        this._curvePointPanel.appendChild(this._sharpTab);
+        this._smoothTab.onclick = ()=>this._curvePanel.setPointMode(0);
+        this._sharpTab.onclick = ()=>this._curvePanel.setPointMode(1);
+        this._xPosInput = document.createElement("input");
+        this._xPosInput.onchange = (e)=>this._onPosChanged();
+        this._curvePointPanel.appendChild(this._xPosInput);
+        this._yPosInput = document.createElement("input");
+        this._yPosInput.onchange = (e)=>this._onPosChanged();
+        this._curvePointPanel.appendChild(this._yPosInput);
+        this._onToggleTab(0);
+    }
+}
+
+class CurveController extends Controller {
+    needsUpdateDisplay() {
+        return !this.parent._closed;
+    }
+    updateDisplay() {
+        this._curveEditor.render();
+        return this;
+    }
+    constructor(parent, object, property){
+        super(parent, object, property, "label");
+        this._curveEditor = new CurveEditor(this.getValue());
+        this._curveEditor.onChange((v)=>this.setValue(v));
+        this.$widget.appendChild(this._curveEditor.dom);
+    }
+}
+
+class TextureController extends Controller {
+    needsUpdateDisplay() {
+        if (this.parent._closed) {
+            return false;
+        }
+        let texture = this.getValue();
+        if (texture && this._version !== texture.version) {
+            this._version = texture.version;
+            return true;
+        }
+        return false;
+    }
+    updateDisplay() {
+        const canvas = this.$canvas;
+        const context = canvas.getContext("2d");
+        const texture = this.getValue();
+        const image = texture.image;
+        // Seems like context can be null if the canvas is not visible
+        if (context) {
+            // Always clear the context before set new texture, because new texture may has transparency
+            context.clearRect(0, 0, canvas.width, canvas.height);
+        }
+        if (image && image.width > 0) {
+            const scale = canvas.width / image.width;
+            canvas.height = Math.max(2, image.height / image.width * canvas.width);
+            const width = Math.max(image.width * scale, 2);
+            const height = Math.max(image.height * scale, 2);
+            if (texture.__getImage) {
+                context.drawImage(texture.__getImage(), 0, 0, width, height);
+            } else {
+                context.drawImage(image, 0, 0, width, height);
+            }
+        }
+        return this;
+    }
+    constructor(parent, object, property){
+        super(parent, object, property, "image");
+        this._version = 0;
+        let group = document.createElement("div");
+        group.style.display = "flex";
+        group.style.flexDirection = "column";
+        group.style.width = "100%";
+        this.$widget.appendChild(group);
+        this.$canvas = document.createElement("canvas");
+        group.appendChild(this.$canvas);
+        const texture = this.getValue();
+        if (texture.isRenderTargetTexture) {
+            let button = document.createElement("button");
+            button.textContent = "capture";
+            button.onclick = ()=>this.updateDisplay();
+            group.appendChild(button);
+        }
+    }
+}
+
+class GUI {
+    /**
+     * Adds a controller to the GUI, inferring controller type using the `typeof` operator.
+     * @example
+     * gui.add( object, 'property' );
+     * gui.add( object, 'number', 0, 100, 1 );
+     * gui.add( object, 'options', [ 1, 2, 3 ] );
+     *
+     * @param {object} object The object the controller will modify.
+     * @param {string} property Name of the property to control.
+     * @param {number|object|Array} [$1] Minimum value for number controllers, or the set of
+     * selectable values for a dropdown.
+     * @param {number} [max] Maximum value for number controllers.
+     * @param {number} [step] Step value for number controllers.
+     * @returns {Controller}
+     */ add(object, property, $1, max, step) {
+        if (Object($1) === $1) {
+            return new OptionController(this, object, property, $1);
+        }
+        const initialValue = object[property];
+        switch(typeof initialValue){
+            case 'number':
+                return new NumberController(this, object, property, $1, max, step);
+            case 'boolean':
+                return new BooleanController(this, object, property);
+            case 'string':
+                return new StringController(this, object, property);
+            case 'function':
+                return new FunctionController(this, object, property);
+        }
+        // eslint-disable-next-line no-console
+        console.error(`gui.add failed
+            property:`, property, `
+            object:`, object, `
+            value:`, initialValue);
+    }
+    /**
+     * Adds a color controller to the GUI.
+     * @example
+     * params = {
+     * 	cssColor: '#ff00ff',
+     * 	rgbColor: { r: 0, g: 0.2, b: 0.4 },
+     * 	customRange: [ 0, 127, 255 ],
+     * };
+     *
+     * gui.addColor( params, 'cssColor' );
+     * gui.addColor( params, 'rgbColor' );
+     * gui.addColor( params, 'customRange', 255 );
+     *
+     * @param {object} object The object the controller will modify.
+     * @param {string} property Name of the property to control.
+     * @param {number} rgbScale Maximum value for a color channel when using an RGB color. You may
+     * need to set this to 255 if your colors are too bright.
+     * @returns {Controller}
+     */ addColor(object, property, rgbScale = 1) {
+        return new ColorController(this, object, property, rgbScale);
+    }
+    /**
+     *
+     * @param {object} object
+     * @param {string} property Name of the property to control.
+     * @returns {Controller}
+     */ addImage(object, property) {
+        return new ImageController(this, object, property);
+    }
+    addTexture(object, property) {
+        return new TextureController(this, object, property);
+    }
+    /**
+     *
+     * @param {object} object
+     * @param {string} property
+     * @param min
+     * @param max
+     * @param step
+     * @returns {Controller}
+     */ addVector(object, property, min, max, step) {
+        return new VectorController(this, object, property, min, max, step);
+    }
+    addCurve(object, property) {
+        return new CurveController(this, object, property);
+    }
+    /**
+     * Adds a folder to the GUI, which is just another GUI. This method returns
+     * the nested GUI so you can add controllers to it.
+     * @example
+     * const folder = gui.addFolder( 'Position' );
+     * folder.add( position, 'x' );
+     * folder.add( position, 'y' );
+     * folder.add( position, 'z' );
+     *
+     * @param {string} title Name to display in the folder's title bar.
+     * @param {string} id Id
+     * @returns {GUI}
+     */ addFolder(title, id = title) {
+        const folder = new GUI({
+            parent: this,
+            title,
+            id
+        });
+        if (this.root._closeFolders) folder.close();
+        return folder;
+    }
+    /**
+     *
+     * @param {string} id
+     * @returns {this}
+     */ removeFolder(id) {
+        let folder = this.getFolder(id);
+        if (folder) folder.destroy();
+        return this;
+    }
+    /**
+     *
+     * @param {string} id
+     * @returns {GUI}
+     */ getFolder(id) {
+        return this.folders.find((v)=>v.id === id);
+    }
+    /**
+     * Recalls values that were saved with `gui.save()`.
+     * @param {object} obj
+     * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+     * @returns {this}
+     */ load(obj, recursive = true) {
+        if (obj.controllers) {
+            this.controllers.forEach((c)=>{
+                if (c instanceof FunctionController) return;
+                if (c._name in obj.controllers) {
+                    c.load(obj.controllers[c._name]);
+                }
+            });
+        }
+        if (recursive && obj.folders) {
+            this.folders.forEach((f)=>{
+                if (f._title in obj.folders) {
+                    f.load(obj.folders[f._title]);
+                }
+            });
+        }
+        return this;
+    }
+    /**
+     * Returns an object mapping controller names to values. The object can be passed to `gui.load()` to
+     * recall these values.
+     * @example
+     * {
+     * 	controllers: {
+     * 		prop1: 1,
+     * 		prop2: 'value',
+     * 		...
+     * 	},
+     * 	folders: {
+     * 		folderName1: { controllers, folders },
+     * 		folderName2: { controllers, folders }
+     * 		...
+     * 	}
+     * }
+     *
+     * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+     * @returns {object}
+     */ save(recursive = true) {
+        const obj = {
+            controllers: {},
+            folders: {}
+        };
+        this.controllers.forEach((c)=>{
+            if (c instanceof FunctionController) return;
+            if (c._name in obj.controllers) {
+                throw new Error(`Cannot save GUI with duplicate property "${c._name}"`);
+            }
+            obj.controllers[c._name] = c.save();
+        });
+        if (recursive) {
+            this.folders.forEach((f)=>{
+                if (f._title in obj.folders) {
+                    throw new Error(`Cannot save GUI with duplicate folder "${f._title}"`);
+                }
+                obj.folders[f._title] = f.save();
+            });
+        }
+        return obj;
+    }
+    /**
+     * Opens a GUI or folder. GUI and folders are open by default.
+     * @param {boolean} open Pass false to close
+     * @returns {this}
+     * @example
+     * gui.open(); // open
+     * gui.open( false ); // close
+     * gui.open( gui._closed ); // toggle
+     */ open(open = true) {
+        this._setClosed(!open);
+        this.$title.setAttribute('aria-expanded', !this._closed);
+        this.domElement.classList.toggle('closed', this._closed);
+        return this;
+    }
+    /**
+     * Closes the GUI.
+     * @returns {this}
+     */ close() {
+        return this.open(false);
+    }
+    _setClosed(closed) {
+        if (this._closed === closed) return;
+        this._closed = closed;
+        this._callOnOpenClose(this);
+    }
+    /**
+     * Shows the GUI after it's been hidden.
+     * @param {boolean} show
+     * @returns {this}
+     * @example
+     * gui.show();
+     * gui.show( false ); // hide
+     * gui.show( gui._hidden ); // toggle
+     */ show(show = true) {
+        this._hidden = !show;
+        this.domElement.style.display = this._hidden ? 'none' : '';
+        return this;
+    }
+    /**
+     * Hides the GUI.
+     * @returns {this}
+     */ hide() {
+        return this.show(false);
+    }
+    openAnimated(open = true) {
+        // set state immediately
+        this._setClosed(!open);
+        this.$title.setAttribute('aria-expanded', !this._closed);
+        // wait for next frame to measure $children
+        requestAnimationFrame(()=>{
+            // explicitly set initial height for transition
+            const initialHeight = this.$children.clientHeight;
+            this.$children.style.height = initialHeight + 'px';
+            this.domElement.classList.add('transition');
+            const onTransitionEnd = (e)=>{
+                if (e.target !== this.$children) return;
+                this.$children.style.height = '';
+                this.domElement.classList.remove('transition');
+                this.$children.removeEventListener('transitionend', onTransitionEnd);
+            };
+            this.$children.addEventListener('transitionend', onTransitionEnd);
+            // todo: this is wrong if children's scrollHeight makes for a gui taller than maxHeight
+            const targetHeight = !open ? 0 : this.$children.scrollHeight;
+            this.domElement.classList.toggle('closed', !open);
+            requestAnimationFrame(()=>{
+                this.$children.style.height = targetHeight + 'px';
+            });
+        });
+        return this;
+    }
+    /**
+     * Change the title of this GUI.
+     * @param {string} title
+     * @returns {this}
+     */ title(title) {
+        this._title = title;
+        this.$title.innerHTML = title;
+        return this;
+    }
+    /**
+     * Resets all controllers to their initial values.
+     * @param {boolean} recursive Pass false to exclude folders descending from this GUI.
+     * @returns {this}
+     */ reset(recursive = true) {
+        const controllers = recursive ? this.controllersRecursive() : this.controllers;
+        controllers.forEach((c)=>c.reset());
+        return this;
+    }
+    /**
+     * Pass a function to be called whenever a controller in this GUI changes.
+     * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+     * @returns {this}
+     * @example
+     * gui.onChange( event => {
+     * 	event.object     // object that was modified
+     * 	event.property   // string, name of property
+     * 	event.value      // new value of controller
+     * 	event.controller // controller that was modified
+     * } );
+     */ onChange(callback) {
+        /**
+         * Used to access the function bound to `onChange` events. Don't modify this value
+         * directly. Use the `gui.onChange( callback )` method instead.
+         * @type {Function}
+         */ this._onChange = callback;
+        return this;
+    }
+    _callOnChange(controller) {
+        if (this.parent) {
+            this.parent._callOnChange(controller);
+        }
+        if (this._onChange !== undefined) {
+            this._onChange.call(this, {
+                object: controller.object,
+                property: controller.property,
+                value: controller.getValue(),
+                controller
+            });
+        }
+    }
+    /**
+     * Pass a function to be called whenever a controller in this GUI has finished changing.
+     * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+     * @returns {this}
+     * @example
+     * gui.onFinishChange( event => {
+     * 	event.object     // object that was modified
+     * 	event.property   // string, name of property
+     * 	event.value      // new value of controller
+     * 	event.controller // controller that was modified
+     * } );
+     */ onFinishChange(callback) {
+        this._onFinishChange = callback;
+        return this;
+    }
+    _callOnFinishChange(controller) {
+        if (this.parent) {
+            this.parent._callOnFinishChange(controller);
+        }
+        if (this._onFinishChange !== undefined) {
+            this._onFinishChange.call(this, {
+                object: controller.object,
+                property: controller.property,
+                value: controller.getValue(),
+                controller
+            });
+        }
+    }
+    /**
+     * Pass a function to be called when this GUI or its descendants are opened or closed.
+     * @param {function(GUI)} callback
+     * @returns {this}
+     * @example
+     * gui.onOpenClose( changedGUI => {
+     * 	console.log( changedGUI._closed );
+     * } );
+     */ onOpenClose(callback) {
+        this._onOpenClose = callback;
+        return this;
+    }
+    _callOnOpenClose(changedGUI) {
+        if (this.parent) {
+            this.parent._callOnOpenClose(changedGUI);
+        }
+        if (this._onOpenClose !== undefined) {
+            this._onOpenClose.call(this, changedGUI);
+        }
+    }
+    /**
+     * Destroys all DOM elements and event listeners associated with this GUI
+     */ destroy() {
+        if (this.parent) {
+            this.parent.children.splice(this.parent.children.indexOf(this), 1);
+            this.parent.folders.splice(this.parent.folders.indexOf(this), 1);
+        }
+        if (this.domElement.parentElement) {
+            this.domElement.parentElement.removeChild(this.domElement);
+        }
+        Array.from(this.children).forEach((c)=>c.destroy());
+    }
+    /**
+     * Returns an array of controllers contained by this GUI and its descendents.
+     * @returns {Controller[]}
+     */ controllersRecursive() {
+        let controllers = Array.from(this.controllers);
+        this.folders.forEach((f)=>{
+            controllers = controllers.concat(f.controllersRecursive());
+        });
+        return controllers;
+    }
+    /**
+     * Returns an array of folders contained by this GUI and its descendents.
+     * @returns {GUI[]}
+     */ foldersRecursive() {
+        let folders = Array.from(this.folders);
+        this.folders.forEach((f)=>{
+            folders = folders.concat(f.foldersRecursive());
+        });
+        return folders;
+    }
+    update() {
+        for (let child of this.children){
+            child.update();
+        }
+    }
+    constructor({ parent, container, width, autoPlace = parent === undefined, title = 'Controls', id = title, closeFolders = false, touchStyles = true } = {}){
+        this.children = [];
+        this.controllers = [];
+        this.folders = [];
+        /**
+     * Current title of the GUI. Use `gui.title( 'Title' )` to modify this value.
+     */ this._title = "";
+        this._closed = false;
+        this._hidden = false;
+        this._closeFolders = false;
+        this.id = id;
+        this.parent = parent;
+        this.root = parent ? parent.root : this;
+        this.domElement = document.createElement("div");
+        this.domElement.classList.add("lil-gui");
+        this.$title = document.createElement('div');
+        this.$title.classList.add('title');
+        this.$title.setAttribute('role', 'button');
+        this.$title.setAttribute('aria-expanded', "true");
+        this.$title.setAttribute('tabindex', "0");
+        this.$title.addEventListener('click', ()=>this.openAnimated(this._closed));
+        this.$title.addEventListener('keydown', (e)=>{
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault();
+                this.$title.click();
+            }
+        });
+        // enables :active pseudo class on mobile
+        this.$title.addEventListener('touchstart', ()=>{}, {
+            passive: true
+        });
+        /**
+         * The DOM element that contains children.
+         * @type {HTMLElement}
+         */ this.$children = document.createElement('div');
+        this.$children.classList.add('children');
+        this.domElement.appendChild(this.$title);
+        this.domElement.appendChild(this.$children);
+        this.title(title);
+        if (this.parent) {
+            this.parent.children.push(this);
+            this.parent.folders.push(this);
+            this.parent.$children.appendChild(this.domElement);
+            // Stop the constructor early, everything onward only applies to root GUI's
+            return;
+        }
+        this.domElement.classList.add('root');
+        if (touchStyles) {
+            this.domElement.classList.add('allow-touch-styles');
+        }
+        if (container) {
+            container.appendChild(this.domElement);
+        } else if (autoPlace) {
+            this.domElement.classList.add('autoPlace');
+            document.body.appendChild(this.domElement);
+        }
+        if (width) {
+            this.domElement.style.setProperty('--width', width + 'px');
+        }
+        this._closeFolders = closeFolders;
+    }
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class InspectorPlugin extends Plugin {
+    static _getTargetName(target) {
+        return target.name || target.constructor.name || target.type;
+    }
+    onUpdate(dt) {
+        this._gui.update();
+        this._updateFolders();
+    }
+    _initFolders() {
+        const gui = this._gui;
+        gui.addFolder("Viewer").close().hide();
+        gui.addFolder("Plugin").close().hide();
+        gui.addFolder("Component").close().hide();
+        gui.addFolder("Material").close().hide();
+        gui.addFolder("Other").close().hide();
+    }
+    _initViewer() {
+        this.inspect(new ViewerExtension(this.viewer));
+    }
+    _updateFolders() {
+        const statesMap = this._statesMap;
+        const setState = (v)=>statesMap.set(v, statesMap.has(v) ? 0 : 1);
+        statesMap.forEach((_, k, map)=>map.set(k, -1));
+        this.viewer.traversePlugins(setState);
+        this.viewer.traverseComponents(setState);
+        this.viewer.traverseMaterials(setState);
+        statesMap.forEach((v, k, map)=>{
+            if (v === 1) {
+                this.inspect(k);
+            }
+            if (v === -1) {
+                this.uninspect(k);
+                map.delete(k);
+            }
+        });
+    }
+    _getPropertiesList(target) {
+        const list = [];
+        let props = PropertyManager._getMergedProperties(target);
+        if (props) {
+            list.push(props);
+            this._targetMap.set(props, target);
+        }
+        if (target instanceof ShaderMaterial) {
+            props = Object.create(null);
+            const uniforms = Object.create(null);
+            this._targetMap.set(props, uniforms);
+            const entries = Object.entries(target.uniforms);
+            entries.forEach(([name])=>{
+                Object.defineProperty(uniforms, name, {
+                    get: ()=>target.uniforms[name].value,
+                    set: (v)=>target.uniforms[name].value = v
+                });
+                props[name] = {
+                    dir: "uniforms"
+                };
+            });
+            list.push(props);
+        }
+        return list;
+    }
+    inspect(target) {
+        let propsList = this._getPropertiesList(target);
+        if (propsList.length === 0) return;
+        let gui = this._gui;
+        if (target instanceof ViewerExtension) {
+            gui = gui.getFolder("Viewer").show();
+        } else if (target instanceof Plugin) {
+            gui = gui.getFolder("Plugin").show();
+        } else if (target instanceof Component) {
+            gui = gui.getFolder("Component").show();
+        } else if (target instanceof Material) {
+            gui = gui.getFolder("Material").show();
+        } else {
+            gui = gui.getFolder("Other").show();
+        }
+        if (gui._title !== "Viewer") {
+            gui = gui.getFolder(target.uuid) || gui.addFolder(InspectorPlugin._getTargetName(target), target.uuid).close();
+        }
+        this._addPropsListGUI(gui, propsList, target);
+        return target;
+    }
+    _addPropsListGUI(gui, list, target, dir = "") {
+        let source = target;
+        for (let props of list){
+            if (dir) {
+                gui = gui.getFolder(dir) || gui.addFolder(dir).close();
+            }
+            target = this._targetMap.get(props) || source;
+            for(let k in props){
+                let value = target[k];
+                if (value == null) continue;
+                const prop = props[k];
+                let folder = gui;
+                if (prop.dir) {
+                    folder = folder.getFolder(prop.dir) || folder.addFolder(prop.dir).close();
+                }
+                if (PropertyManager._hasProperties(value)) {
+                    this._addPropsListGUI(folder, this._getPropertiesList(value), target, k);
+                }
+                const type = typeof value;
+                let ins = null;
+                if (value.isColor) {
+                    ins = folder.addColor(target, k);
+                } else if (value.isAnimationCurve) {
+                    ins = folder.addCurve(target, k);
+                } else if (value.isVector2 || value.isVector3 || value.isVector4 || value.isEuler) {
+                    ins = folder.addVector(target, k, prop.min, prop.max, prop.step);
+                } else if (value.isTexture) ; else if (type === "number" || type === "boolean" || type === "string" || type === "function") {
+                    ins = folder.add(target, k, prop.value || prop.min, prop.max, prop.step);
+                } else ;
+                if (ins && prop.name) {
+                    ins.name(prop.name);
+                }
+            }
+        }
+    }
+    uninspect(target) {
+        let gui = this._gui;
+        if (target instanceof Plugin) {
+            gui = gui.getFolder("Plugin");
+        } else if (target instanceof Component) {
+            gui = gui.getFolder("Component");
+        } else if (target instanceof Material) {
+            gui = gui.getFolder("Material");
+        } else {
+            gui = gui.getFolder("Other");
+        }
+        gui.removeFolder(target.uuid);
+        if (gui.children.length === 0) {
+            gui.hide();
+        }
+    }
+    constructor(){
+        super();
+        this._statesMap = new Map();
+        this._targetMap = new Map();
+        this.install = ()=>{
+            this._gui = new GUI({
+                width: 310,
+                title: "Inspector"
+            }).close();
+            this._initFolders();
+            this._initViewer();
+        };
+        this.uninstall = ()=>{
+            this._gui.destroy();
+            this._statesMap.clear();
+            this._targetMap.clear();
+        };
+    }
+}
+class ViewerExtension extends ObjectInstance {
+    get outputColorSpace() {
+        return this._renderer.outputColorSpace;
+    }
+    set outputColorSpace(v) {
+        this._renderer.outputColorSpace = v;
+    }
+    get toneMapping() {
+        return this._renderer.toneMapping;
+    }
+    set toneMapping(v) {
+        this._renderer.toneMapping = v;
+    }
+    get toneMappingExposure() {
+        return this._renderer.toneMappingExposure;
+    }
+    set toneMappingExposure(v) {
+        this._renderer.toneMappingExposure = v;
+    }
+    get shadows() {
+        return this._renderer.shadowMap.enabled;
+    }
+    set shadows(v) {
+        this._renderer.shadowMap.enabled = v;
+    }
+    get backgroundBlurriness() {
+        return this._scene.backgroundBlurriness;
+    }
+    set backgroundBlurriness(v) {
+        this._scene.backgroundBlurriness = v;
+    }
+    constructor(viewer){
+        super();
+        this._scene = viewer.scene;
+        this._renderer = viewer.renderer;
+    }
+}
+__decorate([
+    property({
+        value: {
+            SRGBColorSpace: "srgb",
+            LinearSRGBColorSpace: "srgb-linear",
+            DisplayP3ColorSpace: "display-p3",
+            LinearDisplayP3ColorSpace: "display-p3-linear"
+        }
+    })
+], ViewerExtension.prototype, "outputColorSpace", null);
+__decorate([
+    property({
+        value: {
+            NoToneMapping: 0,
+            LinearToneMapping: 1,
+            ReinhardToneMapping: 2,
+            CineonToneMapping: 3,
+            ACESFilmicToneMapping: 4
+        }
+    })
+], ViewerExtension.prototype, "toneMapping", null);
+__decorate([
+    property({
+        min: 0,
+        max: 10,
+        step: 0.01
+    })
+], ViewerExtension.prototype, "toneMappingExposure", null);
+__decorate([
+    property
+], ViewerExtension.prototype, "shadows", null);
+__decorate([
+    property({
+        min: 0,
+        max: 1,
+        step: 0.01
+    })
+], ViewerExtension.prototype, "backgroundBlurriness", null);
+const meshBasicMaterislProperties = {
+    map: {
+        dir: "diffuse"
+    },
+    lightMap: {
+        dir: "lightMap"
+    },
+    lightMapIntensity: {
+        dir: "lightMap",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        parent: "lightMap"
+    },
+    aoMap: {
+        dir: "ao"
+    },
+    aoMapIntensity: {
+        dir: "ao",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        parent: "aoMap"
+    },
+    specularMap: {},
+    alphaMap: {},
+    envMap: {}
+};
+for(let k in meshBasicMaterislProperties){
+    property(meshBasicMaterislProperties[k])(MeshBasicMaterial.prototype, k);
+}
+const meshStandardMaterialProperties = {
+    visible: {},
+    transparent: {},
+    side: {
+        value: {
+            FrontSide: 0,
+            BackSide: 1,
+            DoubleSide: 2
+        }
+    },
+    color: {
+        dir: "diffuse"
+    },
+    opacity: {
+        dir: "diffuse",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    map: {
+        dir: "diffuse"
+    },
+    roughnessMap: {
+        dir: "roughness"
+    },
+    roughness: {
+        dir: "roughness",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    metalnessMap: {
+        dir: "metalness"
+    },
+    metalness: {
+        dir: "metalness",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    aoMap: {
+        dir: "ao"
+    },
+    aoMapIntensity: {
+        dir: "ao",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        parent: "aoMap"
+    },
+    emissive: {
+        dir: "emissive"
+    },
+    emissiveMap: {
+        dir: "emissive"
+    },
+    emissiveIntensity: {
+        dir: "emissive",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        parent: "emissiveMap"
+    },
+    normalMap: {
+        dir: "normal"
+    },
+    normalScale: {
+        dir: "normal",
+        parent: "normalMap"
+    },
+    displacementScale: {
+        dir: "displacement",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        parent: "displacementMap"
+    },
+    displacementBias: {
+        dir: "displacement",
+        parent: "displacementMap"
+    },
+    envMap: {
+        dir: "envMap"
+    },
+    envMapIntensity: {
+        dir: "envMap",
+        min: 0,
+        max: 1,
+        step: 0.01
+    },
+    lightMap: {
+        dir: "lightMap"
+    },
+    lightMapIntensity: {
+        dir: "lightMap",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        parent: "lightMap"
+    }
+};
+for(let k in meshStandardMaterialProperties){
+    property(meshStandardMaterialProperties[k])(MeshStandardMaterial.prototype, k);
+}
+
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */ function format(v) {
+    if (v > 1000) {
+        return Math.floor(v * 0.001) + "k";
+    } else if (v > 1000000) {
+        return Math.floor(v * 0.000001) + "m";
+    } else {
+        return v;
+    }
+}
+var Panel = function(name, fg, bg) {
+    var min = Infinity, max = 0, round = Math.round;
+    var PR = round(window.devicePixelRatio || 1);
+    var WIDTH = 80 * PR, HEIGHT = 48 * PR, TEXT_X = 3 * PR, TEXT_Y = 2 * PR, GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
+    var canvas = document.createElement('canvas');
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    canvas.style.cssText = 'width:80px;height:48px';
+    var context = canvas.getContext('2d');
+    context.font = 'bold ' + 9 * PR + 'px Helvetica,Arial,sans-serif';
+    context.textBaseline = 'top';
+    context.fillStyle = bg;
+    context.fillRect(0, 0, WIDTH, HEIGHT);
+    context.fillStyle = fg;
+    context.fillText(name, TEXT_X, TEXT_Y);
+    context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+    context.fillStyle = bg;
+    context.globalAlpha = 0.9;
+    context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+    return {
+        dom: canvas,
+        update: function(value, maxValue) {
+            min = Math.min(min, value);
+            max = Math.max(max, value);
+            context.fillStyle = bg;
+            context.globalAlpha = 1;
+            context.fillRect(0, 0, WIDTH, GRAPH_Y);
+            context.fillStyle = fg;
+            context.fillText(format(round(value)) + ' ' + name + ' (' + format(round(min)) + '-' + format(round(max)) + ')', TEXT_X, TEXT_Y);
+            context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
+            context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
+            context.fillStyle = bg;
+            context.globalAlpha = 0.9;
+            context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - value / maxValue) * GRAPH_HEIGHT));
+        }
+    };
+};
+var Stats = function() {
+    var mode = 0;
+    var container = document.createElement('div');
+    container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
+    container.addEventListener('click', function(event) {
+        event.preventDefault();
+        showPanel(++mode % container.children.length);
+    }, false);
+    //
+    function addPanel(panel) {
+        container.appendChild(panel.dom);
+        return panel;
+    }
+    function showPanel(id) {
+        for(var i = 0; i < container.children.length; i++){
+            container.children[i].style.display = i === id ? 'block' : 'none';
+        }
+        mode = id;
+    }
+    //
+    var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
+    var fpsPanel = addPanel(new Panel('FPS', '#0ff', '#002'));
+    var msPanel = addPanel(new Panel('MS', '#0f0', '#020'));
+    if (self.performance && self.performance.memory) {
+        var memPanel = addPanel(new Panel('MB', '#f08', '#201'));
+    }
+    showPanel(0);
+    return {
+        REVISION: 16,
+        dom: container,
+        addPanel: addPanel,
+        showPanel: showPanel,
+        begin: function() {
+            beginTime = (performance || Date).now();
+        },
+        end: function() {
+            frames++;
+            var time = (performance || Date).now();
+            msPanel.update(time - beginTime, 200);
+            if (time >= prevTime + 1000) {
+                fpsPanel.update(frames * 1000 / (time - prevTime), 100);
+                prevTime = time;
+                frames = 0;
+                if (memPanel) {
+                    var memory = performance.memory;
+                    memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
+                }
+            }
+            return time;
+        },
+        update: function() {
+            beginTime = this.end();
+        },
+        // Backwards Compatibility
+        domElement: container,
+        setMode: showPanel
+    };
+};
+
+class StatsPlugin extends Plugin {
+    onUpdate(dt) {
+        const info = this.viewer.renderer.info;
+        this._dcPanel.update(info.render.calls, 300);
+        this._triPanel.update(info.render.triangles, 500000);
+        this._texPanel.update(info.memory.textures, 200);
+        this._prgPanel.update(info.programs.length, 50);
+        this._stats.update();
+    }
+    constructor(){
+        super();
+        this._stats = new Stats();
+        this._dcPanel = new Panel('DC', '#ff8', '#221');
+        this._triPanel = new Panel("TRI", '#ff8', '#221');
+        this._texPanel = new Panel('TEX', '#ff8', '#221');
+        this._prgPanel = new Panel('PRG', '#ff8', '#221');
+        this.install = ()=>{
+            this._stats.addPanel(this._dcPanel);
+            this._stats.addPanel(this._texPanel);
+            this._stats.addPanel(this._triPanel);
+            this._stats.addPanel(this._prgPanel);
+            this._stats.showPanel(0);
+            document.body.appendChild(this._stats.dom);
+        };
+        this.uninstall = ()=>{
+            document.body.removeChild(this._stats.dom);
+        };
+    }
+}
+
+export { GUI, InspectorPlugin, StatsPlugin };
+//# sourceMappingURL=module.js.map