imgui/imgui.min.js

[demo](https://htmlpreview.github.io/?https://github.com/he110world/imgui/master/demo.html)

!function(t){var n,e;n=this,e=function(t){"use strict";function n(){}function e(){this.created=d.nodesCreated&&[],this.deleted=d.nodesDeleted&&[]}var i=Object.prototype.hasOwnProperty;n.prototype=Object.create(null);var o=function(t,n){return i.call(t,n)},s=function(){return new n},l="__incrementalDOMData",r=function(t,n,e){var i=new function(t,n){this.attrs=s(),this.attrsArr=[],this.newAttrs=s(),this.staticsApplied=!1,this.key=n,this.keyMap=s(),this.keyMapValid=!0,this.focused=!1,this.nodeName=t,this.text=null}(n,e);return t[l]=i,i},u=function(t){return c(t),t[l]},c=function(t){if(!t[l]){var n=t instanceof Element,e=n?t.localName:t.nodeName,i=n?t.getAttribute("key"):null,o=r(t,e,i);if(i&&(u(t.parentNode).keyMap[i]=t),n)for(var s=t.attributes,a=o.attrs,d=o.newAttrs,_=o.attrsArr,h=0;h<s.length;h+=1){var f=s[h],p=f.name,g=f.value;a[p]=g,d[p]=void 0,_.push(p),_.push(g)}for(var v=t.firstChild;v;v=v.nextSibling)c(v)}},a=function(t,n,e,i){var o,s=function(t,n){return"svg"===t?"http://www.w3.org/2000/svg":"foreignObject"===u(n).nodeName?null:n.namespaceURI}(e,n);return o=s?t.createElementNS(s,e):t.createElement(e),r(o,e,i),o},d={nodesCreated:null,nodesDeleted:null};e.prototype.markCreated=function(t){this.created&&this.created.push(t)},e.prototype.markDeleted=function(t){this.deleted&&this.deleted.push(t)},e.prototype.notifyChanges=function(){this.created&&this.created.length>0&&d.nodesCreated(this.created),this.deleted&&this.deleted.length>0&&d.nodesDeleted(this.deleted)};var _=function(t){var n=function(t){for(var n=t,e=n;n;)e=n,n=n.parentNode;return e}(t);return function(t){return t instanceof Document||t instanceof DocumentFragment}(n)?n.activeElement:null},h=null,f=null,p=null,g=null,v=function(t,n){for(var e=0;e<t.length;e+=1)u(t[e]).focused=n},b=function(t){return function(n,i,o){var s=h,l=g,r=f,u=p;h=new e,g=n.ownerDocument;var c=function(t,n){var e=_(t);return e&&t.contains(e)?function(t,n){for(var e=[],i=t;i!==n;)e.push(i),i=i.parentNode;return e}(e,n):[]}(n,p=n.parentNode);v(c,!0);var a=t(n,i,o);return v(c,!1),h.notifyChanges(),h=s,g=l,f=r,p=u,a}},y=b(function(t,n,e){return f=t,T(),n(e),P(),t}),w=b(function(t,n,e){var i={nextSibling:t};return f=i,n(e),t!==f&&t.parentNode&&k(p,t,u(p).keyMap),i===f?null:f}),m=function(t,n,e){var i=u(t);return n===i.nodeName&&e==i.key},x=function(t,n){if(!f||!m(f,t,n)){var e=u(p),i=f&&u(f),o=e.keyMap,s=void 0;if(n){var l=o[n];l&&(m(l,t,n)?s=l:l===f?h.markDeleted(l):k(p,l,o))}s||(s="#text"===t?function(t){var n=t.createTextNode("");return r(n,"#text",null),n}(g):a(g,p,t,n),n&&(o[n]=s),h.markCreated(s)),u(s).focused?function(t,n,e){for(var i=n.nextSibling,o=e;o!==n;){var s=o.nextSibling;t.insertBefore(o,i),o=s}}(p,s,f):i&&i.key&&!i.focused?(p.replaceChild(s,f),e.keyMapValid=!1):p.insertBefore(s,f),f=s}},k=function(t,n,e){t.removeChild(n),h.markDeleted(n);var i=u(n).key;i&&delete e[i]},T=function(){p=f,f=null},A=function(){return f?f.nextSibling:p.firstChild},D=function(){f=A()},P=function(){(function(){var t=p,n=u(t),e=n.keyMap,i=n.keyMapValid,o=t.lastChild,s=void 0;if(o!==f||!i){for(;o!==f;)k(t,o,e),o=t.lastChild;if(!i){for(s in e)(o=e[s]).parentNode!==t&&(h.markDeleted(o),delete e[s]);n.keyMapValid=!0}}})(),f=p,p=p.parentNode},O=D,C={default:"__default"},S=function(t,n,e){if(null==e)t.removeAttribute(n);else{var i=function(t){return 0===t.lastIndexOf("xml:",0)?"http://www.w3.org/XML/1998/namespace":0===t.lastIndexOf("xlink:",0)?"http://www.w3.org/1999/xlink":void 0}(n);i?t.setAttributeNS(i,n,e):t.setAttribute(n,e)}},N=function(t,n,e){t[n]=e},z=function(t,n,e){n.indexOf("-")>=0?t.setProperty(n,e):t[n]=e},M=function(t,n,e){var i=u(t).attrs;i[n]!==e&&((H[n]||H[C.default])(t,n,e),i[n]=e)},H=s();H[C.default]=function(t,n,e){var i=typeof e;"object"===i||"function"===i?N(t,n,e):S(t,n,e)},H.style=function(t,n,e){if("string"==typeof e)t.style.cssText=e;else{t.style.cssText="";var i=t.style,s=e;for(var l in s)o(s,l)&&z(i,l,s[l])}};var E=[],F=function(t,n,e){var i=function(t,n){return D(),x(t,n),T(),p}(t,n),o=u(i);if(!o.staticsApplied){if(e)for(var s=0;s<e.length;s+=2){var l=e[s],r=e[s+1];M(i,l,r)}o.staticsApplied=!0}for(var c=o.attrsArr,a=o.newAttrs,d=!c.length,_=3,h=0;_<arguments.length;_+=2,h+=2){var f=arguments[_];if(d)c[h]=f,a[f]=void 0;else if(c[h]!==f)break;r=arguments[_+1];(d||c[h+1]!==r)&&(c[h+1]=r,M(i,f,r))}if(_<arguments.length||h<c.length){for(;_<arguments.length;_+=1,h+=1)c[h]=arguments[_];for(h<c.length&&(c.length=h),_=0;_<c.length;_+=2){l=c[_],r=c[_+1];a[l]=r}for(var g in a)M(i,g,a[g]),a[g]=void 0}return i},V=function(){return P(),f};t.patch=y,t.patchInner=y,t.patchOuter=w,t.currentElement=function(){return p},t.currentPointer=function(){return A()},t.skip=function(){f=p.lastChild},t.skipNode=O,t.elementVoid=function(t){return F.apply(null,arguments),V()},t.elementOpenStart=function(t,n,e){E[0]=t,E[1]=n,E[2]=e},t.elementOpenEnd=function(){var t=F.apply(null,E);return E.length=0,t},t.elementOpen=F,t.elementClose=V,t.text=function(t){var n=(D(),x("#text",null),f),e=u(n);if(e.text!==t){e.text=t;for(var i=t,o=1;o<arguments.length;o+=1)i=(0,arguments[o])(i);n.data=i}return n},t.attr=function(t,n){E.push(t),E.push(n)},t.symbols=C,t.attributes=H,t.applyAttr=S,t.applyProp=N,t.notifications=d,t.importNode=c},"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(n.IncrementalDOM={});const{elementOpen:i,elementOpenStart:o,elementOpenEnd:s,elementClose:l,elementVoid:r,text:u,attr:c,patch:a}=IncrementalDOM;function d(t=0,n=0,e=0,i=0){this.x=t,this.y=n,this.w=e,this.h=i}function _(t){let n="";const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";var i=e.length;for(let o=0;o<t;o++)n+=e.charAt(Math.floor(Math.random()*i));return n}function h(t,n){const e="#"+n+"{";return less.render(e+t+"}")}function f(t){const n=document.createElement("style");n.type="text/css",n.textContent=t,document.getElementsByTagName("head")[0].appendChild(n)}function p(t){for(const n of Object.keys(t))delete t[n]}function g(t){this._dom_root=t,this._func_list=[],this._rect_dict={},this._drag_dict={},this._click_pos,this._window_id=0,this._id_str_dict={},this._id_val_dict={},this._id_cursor_dict={},this._id_cursor_text={},this._id_evt_dict={}}function v(){this._layout_list=[],this._func_list=[]}d.prototype={css:function(t){return"position:"+(t=t||"fixed")+";left:"+this.x+"px;top:"+this.y+"px;width:"+this.w+"px;height:"+this.h+"px;"},contains:function(t){return t&&this.x<=t.x&&this.x+this.w>=t.x&&this.y<=t.y&&this.y+this.h>=t.y},clone:function(){return new d(this.x,this.y,this.w,this.h)},cssAutoHeight:function(t){return"position:"+(t=t||"fixed")+";left:"+this.x+"px;top:"+this.y+"px;width:"+this.w+"px;"}},_css_dict={},g.prototype={_get_return(t,n){let e;return this._id_val_dict.hasOwnProperty(t)?(e=this._id_val_dict[t],delete this._id_val_dict[t]):e=n,e},_gen_id(t){const n=this._window_id+t;let e=this._id_str_dict[n];return e?++e:e=1,this._id_str_dict[n]=e,n+e},_load_cursor(t,n){if(this._id_cursor_dict.hasOwnProperty(t)){i=this._id_cursor_dict[t],(e=n).selectionStart=e.selectionEnd=i}var e,i},_offset_cursor(t,n){this._id_cursor_dict.hasOwnProperty(t)&&(n=n||0,this._id_cursor_dict[t]+=n)},_save_cursor(t,n){const e=function(t){return t.selectionStart}(n);this._id_cursor_dict[t]=e,this._id_cursor_text[t]=n.value},_clear_cursor(){for(const t in this._id_cursor_dict)delete this._id_cursor_dict[t]},_on_mousedown(t){let n,e,i;const o=o=>{(o=o||window.event).preventDefault();const s=o.clientX-n,l=o.clientY-e;n=o.clientX,e=o.clientY;const r=this._rect_dict[t],u=r.x+s,c=r.y+l;i.style.left=u+"px",i.style.top=c+"px";const a=this._rect_dict[t];a&&(a.x=u,a.y=c)},s=t=>{document.onmouseup=null,document.onmousemove=null};return t=>{(t=t||window.event).preventDefault(),t.stopPropagation(),i=t.target,n=t.clientX,e=t.clientY,document.onmousemove=o,document.onmouseup=s}},beginArea:function(t){},_beginHorizontal:function(t){i("div",t,null,"style","display:flex;flex-direction:row;")},beginHorizontal:function(t){const n=this._gen_id(t);this._func_list.push(()=>this._beginHorizontal(n))},_beginVertical:function(t,n,e){i("div",t,null,"style","display:flex;flex-direction:column;"+e),u(n)},beginVertical:function(t,n,e){n=n||"",e=e||"";const i=this._gen_id(t);this._func_list.push(()=>this._beginVertical(i,n,e))},_beginTable:function(){i("table",null,null)},beginTable:function(){this._func_list.push(()=>this._beginTable())},_endTable:function(){l("table")},endTable:function(){this._func_list.push(()=>this._endTable())},_beginTableRow:function(){i("tr",null,null)},beginTableRow:function(){this._func_list.push(()=>this._beginTableRow())},_endTableRow:function(){l("tr")},endTableRow:function(){this._func_list.push(()=>this._endTableRow())},_beginTableHead:function(){i("th")},beginTableHead:function(){this._func_list.push(()=>this._beginTableHead())},_endTableHead:function(){l("th")},endTableHead:function(){this._func_list.push(()=>this._endTableHead())},_beginTableData:function(){i("td")},beginTableData:function(){this._func_list.push(()=>this._beginTableData())},_endTableData:function(){l("td")},endTableData:function(){this._func_list.push(()=>this._endTableData())},box:function(){},_button:function(t,n,e){i("button",t,null,"style","width:100%;"+e+";","onclick",n=>{this._id_val_dict[t]=!0},"onmousedown",t=>{t.stopPropagation()}),u(n),l("button")},button:function(t,n,e){const i=this._gen_id(t);n=n||"",e=e||"",this._func_list.push(()=>this._button(i,n,e));const o=!!this._id_val_dict[i];return o&&delete this._id_val_dict[i],o},_colorField:function(t,n){const e=r("input",t,null,"type","color","onmousedown",t=>t.stopPropagation(),"onchange",n=>{this._id_val_dict[t]=e.value});e.value=n},colorField:function(t,n){"number"==typeof(n=n||"#000000")&&(n="#"+n.toString(16));const e=this._gen_id(t);return this._func_list.push(()=>this._colorField(e,n)),this._get_return(e,n)},_dragWindow:function(t,n){this._drag_dict[t]=!0},dragWindow:function(t,n){const e=this._window_id;this._func_list.push(()=>this._dragWindow(e,n))},_dropDown:function(t,n,e,o,s){i("div",null,null,"style","width:100%;"),o&&(i("label",null,null,"for",t,"style","float:left;"),u(o),l("label")),i("span",null,null,"style","overflow:hidden;display:block;");const r=i("select",t,null,"id",t,"style","width:100%;"+s,"onmousedown",t=>t.stopPropagation(),"onchange",n=>{this._id_val_dict[t]=r.selectedIndex});for(const t of e)i("option",null,null,"value",t),u(t),l("option");l("select"),l("span"),r.selectedIndex=n,l("div")},dropDown:function(t,n,e,i,o){n=n||0,i=i||"",o=o||"",n>=e.length&&(n=0);const s=this._gen_id(t);return this._func_list.push(()=>this._dropDown(s,n,e,i,o)),this._get_return(s,n)},endArea:function(){},_endHorizontal:function(){l("div")},endHorizontal:function(){this._func_list.push(()=>this._endHorizontal())},_endVertical:function(){l("div")},endVertical:function(){this._func_list.push(()=>this._endVertical())},_foldout:function(t,n,e){const o="width:0;height:0;border-style:solid;display:inline-block;",s=n?o+"border-width:8.7px 5px 0 5px;border-color:#000000 transparent transparent transparent;":o+"border-width:5px 0 5px 8.7px;border-color:transparent transparent transparent #000000;";i("div",t,null,"onclick",e=>{this._id_val_dict[t]=!n}),r("div",null,null,"style",s),u(e),l("div")},foldout:function(t,n,e){n=n||!1,e=e||"";const i=this._gen_id(t);return this._func_list.push(()=>this._foldout(i,n,e)),this._get_return(i,n)},horizontalScrollBar:function(){},_horizontalSlider:function(t,n,e,o,s){i("div",null,null),s&&(i("label",null,null,"for",t),u(s),l("label"));const c=r("input",t,null,"id",t,"type","range","min",e,"max",o,"onmousedown",t=>t.stopPropagation(),"onmousemove",t=>t.stopPropagation(),"onmouseup",t=>t.stopPropagation(),"oninput",n=>{this._id_val_dict[t]=c.value});c.value=n,l("div")},horizontalSlider:function(t,n,e,i,o){const s=this._gen_id(t);return this._func_list.push(()=>this._horizontalSlider(s,n,e,i,o)),this._get_return(s,n)},_horizontalRule:function(t){r("hr",t,null)},horizontalRule:function(t){const n=this._gen_id(t);this._func_list.push(()=>this._horizontalRule(n))},_hyperlink:function(t,n,e){i("a",t,null,"href",n,"style","width:fit-content;","target","_blank"),u(e),l("a")},hyperlink:function(t,n,e){const i=this._gen_id(t);this._func_list.push(()=>this._hyperlink(i,n,e))},_label:function(t,n,e,o){i("div",t,null,"style","width:100%;overflow-wrap:break-word;"+e,"onmousedown",t=>{t.stopPropagation(),"function"==typeof o&&o(t)},"onmousemove",t=>t.stopPropagation(),"onmouseup",t=>t.stopPropagation()),u(n),l("div")},label:function(t,n,e,i){"function"==typeof e&&(i=e,e=""),e=e||"";const o=this._gen_id(t);return this._func_list.push(()=>this._label(o,n,e,i)),n},_picture:function(t,n){r("img",t,null,"src",n)},picture:function(t,n){const e=this._gen_id(t);this._func_list.push(()=>this._picture(e,n))},_video:function(t,n){r("video",t,null,"src",n,"controls",!0)},video:function(t,n){const e=this._gen_id(t);this._func_list.push(()=>this._video(e,n))},repeatButton:function(t){},selectionGrid:function(){},space:function(){},_textArea2:function(t,n){i("div",null,null,"style","border:1px solid gray;");const e=i("p",t,null,"contenteditable",!0,"onmousedown",t=>{t.stopPropagation()},"oninput",n=>{n.isComposing||(this._id_val_dict[t]=e.innerText)});u(n),l("p"),l("div")},textArea2:function(t,n){const e=this._gen_id(t);return this._func_list.push(()=>this._textArea2(e,n)),this._get_return(e,n)},_textArea:function(t,n){const e=i("textarea",t,null,"style","width:100%;","onmousedown",t=>{t.stopPropagation(),this._clear_cursor()},"onmousemove",t=>t.stopPropagation(),"onmouseup",t=>t.stopPropagation(),"oninput",n=>{n.isComposing||(this._id_val_dict[t]=e.value,this._save_cursor(t,e))});this._id_evt_dict[t]||(e.addEventListener("compositionstart",n=>{this._save_cursor(t,e)}),e.addEventListener("compositionend",n=>{this._id_val_dict[t]=e.value,this._offset_cursor(t,n.data.length),this._load_cursor(t,e)}),this._id_evt_dict[t]=!0),this._id_cursor_text[t]||(e.value=n,this._load_cursor(t,e)),l("textarea")},textArea:function(t,n){const e=this._gen_id(t);return this._func_list.push(()=>this._textArea(e,n)),this._get_return(e,n)},_textField:function(t,n,e,o,s){i("div",null,null,"style","width:100%;"),e&&(i("label",null,null,"for",t,"style","float:left;"),u(e),l("label")),i("span",null,null,"style","overflow:hidden;display:block;");const c=r("input",t,null,"id",t,"type",o,"style","width:100%;box-sizing:border-box;","onmousedown",t=>{t.stopPropagation(),this._clear_cursor()},"onmousemove",t=>t.stopPropagation(),"onmouseup",t=>{t.stopPropagation()},"oninput",n=>{this._id_val_dict[t]=c.value,this._save_cursor(t,c)});this._id_cursor_text[t]?delete this._id_cursor_text[t]:c.value!==n&&(c.value=n,this._load_cursor(t,c)),l("span"),l("div")},textField:function(t,n,e,i){n=n||"",e=e||"",i=i||"";const o=this._gen_id(t);return this._func_list.push(()=>this._textField(o,n,e,"text",i)),this._get_return(o,n)},passwordField:function(t,n,e,i){n=n||"",e=e||"",i=i||"";const o=this._gen_id(t);return this._func_list.push(()=>this._textField(o,n,e,"password",i)),this._get_return(o,n)},_toggle:function(t,n,e,o){i("div",null,null,"style","display:flex;"+o);const s=r("input",t,null,"id",t,"type","checkbox","oninput",n=>this._id_val_dict[t]=s.checked);s.checked=n,i("label",null,null,"for",t,"style","word-break:keep-all;","onmousedown",t=>t.stopPropagation()),u(e),l("label"),l("div")},toggle:function(t,n,e,i){n=!!n,e=e||"",i=i||"";const o=this._gen_id(t);return this._func_list.push(()=>this._toggle(o,n,e,i)),this._get_return(o,n)},_radio:function(t,n,e){i("div",t,null,"style","width:100%;");for(let o=0;o<e.length;o++){const s=t+o,c=r("input",s,null,"id",s,"type","radio","name",t,"onchange",()=>{this._id_val_dict[t]=o});o===n&&(c.checked=!0),i("label",null,null,"for",s),u(e[o]),l("label")}l("div")},radio:function(t,n,e){const i=this._gen_id(t);return this._func_list.push(()=>this._radio(i,n,e)),this._get_return(i,n)},verticalScrollBar:function(){},verticalSlider:function(){},_window_begin:function(t,n,e,i,l){o("div",t,null),c("style",n.cssAutoHeight("absolute")+"background-color:white;padding:3px;"),l&&c("id",l),this._drag_dict[t]||c("onmousedown",this._on_mousedown(t).bind(this)),s("div"),i&&u(i)},_window_end:function(){l("div")},window:function(t,n,e,i,o){let s;this._window_id=t,o&&(s="elem-"+_(32),_css_dict[s]||(o.trim().startsWith("http")?engine.getText(o).then(t=>{h(t,s).then(t=>f(t.css))}).catch(t=>console.log(t)):h(o,s).then(t=>f(t.css)),_css_dict[s]=!0)),this._func_list.push(()=>this._window_begin(t,n,e,i,s)),"function"==typeof e&&e(),this._func_list.push(()=>this._window_end());let l=this._rect_dict[t];return l||(l=n.clone(),this._rect_dict[t]=l=n.clone()),l},update:function(){a(this._dom_root,()=>{for(const t of this._func_list)t()}),this._func_list.length=0,this._click_pos=null,this._window_id=0,p(this._drag_dict),p(this._id_str_dict)}},v.prototype={rect:function(t,n,e,i){return new d(t,n,e,i)},_patch:function(t){const n=t.toString(),e=n.slice(n.indexOf("{")+1,n.lastIndexOf("}")).split("\n"),i=[];for(let t=0;t<e.length;t++){const n=e[t];if(-1===n.indexOf("layout"))i.push(n);else{const n=_(32),o=e[t].replace(/(layout\.[a-zA-Z_{1}][a-zA-Z0-9_]+\()/g,`$1"${n}",`);i.push(o)}}const o=`//# sourceURL=${this._get_url()}`;i.push(o);const s=i.join("\n");return new Function("layout",s)},contextify:function(t){this._patch(t)()},_get_url:function(){const t=(new Error).stack.split("\n");return t[t.length-1].match(/https?:\/\/.*\/[^:]*/)[0]},layout:function(t,n){const e=new g(t),i=n;return this._layout_list.push(e),this._func_list.push(i),requestAnimationFrame(this._update.bind(this)),e},_update:function(){for(let t=0;t<this._func_list.length;t++){const n=this._func_list[t],e=this._layout_list[t];n(e),e.update()}requestAnimationFrame(this._update.bind(this))}},t.imgui=new v}(this);