canvasGUI    (c) Peter Lager  2024

 @license MIT

 @version 0.9.6

*/

const CANVAS_GUI_VERSION="0.9.6";

class GUI{constructor(a,b=p5.instance){this._keyEventsEnabled=this._mouseEventsEnabled=this._touchEventsEnabled=!1;this._enabled=this._visible=this._eventsAllowed=!0;this._renderer=a;this._canvas=a.canvas;this._target=document.getElementById(a.canvas.id);this._p=b;this._is3D=!1;this._controls=new Map;this._ctrls=[];this._corners=[4,4,4,4];this._optionGroups=new Map;this._textSize=12;this._tipTextSize=10;this._panesEast=[];this._panesSouth=[];this._panesWest=[];this._panesNorth=[];this._initColorSchemes();

this._addFocusHandlers();this._addMouseEventHandlers();this._addTouchEventHandlers();this._selectDrawMethod()}slider(a,b,c,d,e){return this.addControl(new CvsSlider(this,a,b,c,d,e))}ranger(a,b,c,d,e){return this.addControl(new CvsRanger(this,a,b,c,d,e))}button(a,b,c,d,e){return this.addControl(new CvsButton(this,a,b,c,d,e))}textfield(a,b,c,d,e){this._addKeyEventHandlers();return this.addControl(new CvsTextField(this,a,b,c,d,e))}checkbox(a,b,c,d,e){return this.addControl(new CvsCheckbox(this,a,b,c,

d,e))}option(a,b,c,d,e){return this.addControl(new CvsOption(this,a,b,c,d,e))}label(a,b,c,d,e){return this.addControl(new CvsLabel(this,a,b,c,d,e))}__scroller(a,b,c,d,e){return this.addControl(new CvsScroller(this,a,b,c,d,e))}viewer(a,b,c,d,e){return this.addControl(new CvsViewer(this,a,b,c,d,e))}__tooltip(a){return this.addControl(new CvsTooltip(this,a))}pane(a,b,c){switch(b){case "north":a=new CvsPaneNorth(this,a,c);break;case "south":a=new CvsPaneSouth(this,a,c);break;case "west":a=new CvsPaneWest(this,

a,c);break;default:a=new CvsPaneEast(this,a,c)}return this.addControl(a)}name(){return this._name}show(){this._visible=!0;return this}hide(){this._visible=!1;return this}isVisible(){return this._visible}enable(){this._enabled=!0;return this}disable(){this._enabled=!1;return this}isEnabled(){return this._enabled}stopEventHandling(){this._eventsAllowed=!1}startEventHandling(){this._eventsAllowed=!0}_addFocusHandlers(){let a=this._canvas;a.addEventListener("focusout",b=>{this._handleFocusEvents(b)});

a.addEventListener("focusin",b=>{this._handleFocusEvents(b)})}_addMouseEventHandlers(){if(!this._mouseEventsEnabled){let a=this._canvas;a.addEventListener("mousemove",b=>{this._handleMouseEvents(b)});a.addEventListener("mousedown",b=>{this._handleMouseEvents(b)});a.addEventListener("mouseup",b=>{this._handleMouseEvents(b)});a.addEventListener("wheel",b=>{this._handleMouseEvents(b)});a.addEventListener("mouseout",b=>{this._handleMouseEvents(b)});a.addEventListener("mouseenter",b=>{this._handleMouseEvents(b)});

this._mouseEventsEnabled=!0}}_addKeyEventHandlers(){this._keyEventsEnabled||(this._target.setAttribute("tabindex","0"),this._target.focus(),this._target.addEventListener("keydown",a=>{this._handleKeyEvents(a);return!1}),this._target.addEventListener("keyup",a=>{this._handleKeyEvents(a);return!1}),this._keyEventsEnabled=!0)}_addTouchEventHandlers(){if(!this._touchEventsEnabled){let a=this._canvas;a.addEventListener("touchstart",b=>{this._handleTouchEvents(b)});a.addEventListener("touchend",b=>{this._handleTouchEvents(b)});

a.addEventListener("touchcancel",b=>{this._handleTouchEvents(b)});a.addEventListener("touchmove",b=>{this._handleTouchEvents(b)});this._touchEventsEnabled=!0}}_handleTouchEvents(a){if(this._eventsAllowed&&this._enabled&&this.isVisible()){let b;for(let c of this._ctrls)if(b=void 0,c.isActive()){b=c;c._handleTouch(a);break}if(void 0==b)for(let c of this._ctrls)c.isEnabled()&&c.isVisible()&&c._handleTouch(a)}}_handleFocusEvents(a){switch(a.type){case "focusout":for(let b of this._ctrls)b.isActive()&&

(b._deactivate?.(),b.validate?.())}}_handleKeyEvents(a){if(this._eventsAllowed&&this._enabled&&this.isVisible())for(let b of this._ctrls)if(b.isActive()){b._handleKey(a);break}return!1}_handleMouseEvents(a){if(this._eventsAllowed&&this._enabled&&this.isVisible()){let b;for(let c of this._ctrls)if(c.isActive()){b=c;c._handleMouse(a);break}if(void 0==b)for(let c of this._ctrls)c.isEnabled()&&c.isVisible()&&c._handleMouse(a)}return!1}_selectDrawMethod(){this.draw=(this._is3D=void 0!=this._renderer.GL&&

null!=this._renderer.GL)?this._drawControlsWEBGL:this._drawControlsP2D}$(a){return"string"===typeof a?this._controls.get(a):a}addControl(a){console.assert(!this._controls.has(a.name()),`Control '${a.name()}' already exists and will be replaced.`);this._controls.set(a.name(),a);this._ctrls=[...this._controls.values()];this._ctrls.sort((b,c)=>b.z()-c.z());return a}listControls(){console.log("List of controls");for(let a of this._ctrls)console.log(a.name());console.log("--------------------------------------------------------------")}getOptionGroup(a){this._optionGroups.has(a)||

this._optionGroups.set(a,new CvsOptionGroup(a));return this._optionGroups.get(a)}textSize(a){if(!Number.isFinite(a))return this._textSize;this._textSize=a;this._controls.forEach(b=>{b.invalidateBuffer()});return this}tipTextSize(a){return a?(this._tipTextSize=a,this):this._tipTextSize}canvasWidth(){return this._renderer.width}canvasHeight(){return this._renderer.height}corners(a){Array.isArray(a)&&4==a.length&&(this._corners=[...a]);return[...this._corners]}context(){return this._renderer}is3D(){return this._is3D}_closePanes(){for(let a of this._panesEast)a.close();

for(let a of this._panesWest)a.close();for(let a of this._panesSouth)a.close();for(let a of this._panesNorth)a.close()}hidePanes(){this._closePanes();for(let a of this._panesEast)a.hide();for(let a of this._panesWest)a.hide();for(let a of this._panesSouth)a.hide();for(let a of this._panesNorth)a.hide()}showPanes(){for(let a of this._panesEast)a.show();for(let a of this._panesWest)a.show();for(let a of this._panesSouth)a.show();for(let a of this._panesNorth)a.show()}validateTabsEast(){let a=this._panesEast,

b=a.length,c=2*(b-1);a.forEach(e=>c+=e.tab()._w);let d=(this.canvasHeight()-c)/2;for(let e=0;e<b;e++){let f=a[e].tab(),g=-f._h,h=d;d+=f._w+2;f._x=g;f._y=h}}validateTabsWest(){let a=this._panesWest,b=a.length,c=2*(b-1);a.forEach(f=>c+=f.tab()._w);let d=(this.canvasHeight()-c)/2;for(let f=0;f<b;f++){var e=a[f];let g=e.tab();e=e.depth();let h=d;d+=g._w+2;g._x=e;g._y=h}}validateTabsSouth(){let a=this._panesSouth,b=a.length,c=2*(b-1);a.forEach(e=>c+=e.tab()._w);let d=(this.canvasWidth()-c)/2;for(let e=

0;e<b;e++){let f=a[e].tab(),g=d,h=-f._h;d+=f._w+2;f._x=g;f._y=h}}validateTabsNorth(){let a=this._panesNorth,b=a.length,c=2*(b-1);a.forEach(f=>c+=f.tab()._w);let d=(this.canvasWidth()-c)/2;for(let f=0;f<b;f++){var e=a[f];let g=e.tab(),h=d;e=e.depth();d+=g._w+2;g._x=h;g._y=e}}_initColorSchemes(){this._schemes=[];this._schemes.blue=new BlueScheme;this._schemes.green=new GreenScheme;this._schemes.red=new RedScheme;this._schemes.cyan=new CyanScheme;this._schemes.yellow=new YellowScheme;this._schemes.purple=

new PurpleScheme;this._schemes.orange=new OrangeScheme;this._scheme=this._schemes.blue}scheme(a){if(!a)return this._scheme;this._schemes[a]?(this._scheme=this._schemes[a],this._controls.forEach(b=>{b.scheme()||b.invalidateBuffer()})):console.error(`'${a}' is not a valid color scheme`);return this}_getScheme(a){if(a&&this._schemes[a])return Object.assign({},this._schemes[a]);console.warn(`Unable to retrieve color scheme '${a}'`)}addScheme(a,b){"string"!==typeof a||b||(this._schemes[a]?console.error(`Cannot add scheme '${a}' because it already exists.'`):

this._schemes[a]=b);return this}draw(){}_drawControlsP2D(){if(this._visible){this._p.push();for(let a of this._ctrls)a.getParent()||a._renderP2D();this._p.pop()}}_drawControlsWEBGL(){if(this._visible){this._p.push();let a=this._renderer,b=a.drawingContext,c=a.width,d=a.height,e=Number.MAX_VALUE;b.flush();let f=a.uMVMatrix.copy(),g=a.uPMatrix.copy();b.disable(b.DEPTH_TEST);a.resetMatrix();a._curCamera.ortho(0,c,-d,0,-e,e);for(let h of this._ctrls)h.getParent()||h._renderWEBGL();b.flush();a.uMVMatrix.set(f);

a.uPMatrix.set(g);b.enable(b.DEPTH_TEST);this._p.pop()}}static announce(){GUI._announced||(console.log("================================================"),console.log(`  canvasGUI (${CANVAS_GUI_VERSION})   \u00A9 2025 Peter Lager`),console.log("================================================"),GUI._announced=!0)}static get(a,b=p5.instance){GUI.announce();if(GUI._guis.has(a))return GUI._guis.get(a);b=new GUI(a,b);GUI._guis.set(a,b);return b}static getNamed(a,b,c=p5.instance){GUI.announce();if("string"===

typeof a&&0<a.length){if(GUI._guis.has(a))return GUI._guis.get(a);b=new GUI(b,c);b._name=a;GUI._guis.set(a,b);return b}}static find(a){return GUI._guis.get(a)}}GUI._guis=new Map;GUI._announced=!1;

class BaseScheme{constructor(){this.WHITE="rgb(255, 255, 255)";this.BLACK="rgb(0, 0, 0)";this.CLEAR="rgba(0, 0, 0, 0)";for(var a=0;10>a;a++)this[`GREY_${a}`]=`hsb(0,0%,${90-6*a}%)`;for(a=0;10>a;a++)this[`TINT_${a}`]=`rgba(10,0,0,${.1*a})`}_colors(a,b=40,c=70,d=100){let e=0,f;for(f=0;4>=f;++f)this[`COLOR_${e++}`]=`hsba(${a}, ${b}%, ${d}%, ${.6+.1*f})`;for(d=0;3>=d;++d)this[`COLOR_${e++}`]=`hsb(${a}, ${b}%, ${100-10*d}%)`;for(b=0;5>=b;++b)this[`COLOR_${e++}`]=`hsb(${a}, ${c}%, ${100-12*b}%)`}}

class BlueScheme extends BaseScheme{constructor(){super();this._colors(240)}}class GreenScheme extends BaseScheme{constructor(){super();this._colors(120)}}class RedScheme extends BaseScheme{constructor(){super();this._colors(0)}}class CyanScheme extends BaseScheme{constructor(){super();this._colors(180)}}class YellowScheme extends BaseScheme{constructor(){super();this._colors(60)}}class PurpleScheme extends BaseScheme{constructor(){super();this._colors(300)}}

class OrangeScheme extends BaseScheme{constructor(){super();this._colors(30)}}class OrientNorth{_renderP2D(a,b,c,d){a.push();a.translate(0,b);a.rotate(1.5*Math.PI);a.image(d,0,0);a.pop()}_renderWEBGL(a,b,c,d){a.noStroke();a.textureMode(a.NORMAL);a.texture(d);a.beginShape(a.TRIANGLE_STRIP);a.vertex(0,0,0,1,0);a.vertex(0,b,0,0,0);a.vertex(c,0,0,1,1);a.vertex(c,b,0,0,1);a.endShape()}xy(a,b,c,d){return{x:c-b,y:a,w:d,h:c}}wh(a,b){return{w:b,h:a}}}

class OrientSouth{_renderP2D(a,b,c,d){a.push();a.translate(c,0);a.rotate(Math.PI/2);a.image(d,0,0);a.pop()}_renderWEBGL(a,b,c,d){a.textureMode(a.NORMAL);a.texture(d);a.beginShape(a.TRIANGLE_STRIP);a.vertex(0,0,0,0,1);a.vertex(0,b,0,1,1);a.vertex(c,0,0,0,0);a.vertex(c,b,0,1,0);a.endShape()}xy(a,b,c,d){return{x:b,y:d-a,w:d,h:c}}wh(a,b){return{w:b,h:a}}}

class OrientEast{_renderP2D(a,b,c,d){a.push();a.translate(0,0);a.rotate(0);a.image(d,0,0);a.pop()}_renderWEBGL(a,b,c,d){a.textureMode(a.NORMAL);a.texture(d);a.beginShape(a.TRIANGLE_STRIP);a.vertex(0,0,0,0,0);a.vertex(0,c,0,0,1);a.vertex(b,0,0,1,0);a.vertex(b,c,0,1,1);a.endShape()}xy(a,b,c,d){return{x:a,y:b,w:c,h:d}}wh(a,b){return{w:a,h:b}}}

class OrientWest{_renderP2D(a,b,c,d){a.push();a.translate(b,c);a.rotate(Math.PI);a.image(d,0,0);a.pop()}_renderWEBGL(a,b,c,d){a.textureMode(a.NORMAL);a.texture(d);a.beginShape(a.TRIANGLE_STRIP);a.vertex(0,0,0,1,1);a.vertex(0,c,0,1,0);a.vertex(b,0,0,0,1);a.vertex(b,c,0,0,0);a.endShape()}xy(a,b,c,d){return{x:c-a,y:d-b,w:c,h:d}}wh(a,b){return{w:a,h:b}}}

class CvsBaseControl{constructor(a,b,c,d,e,f){this._children=[];this._enabled=this._visible=!0;this._pover=this._over=this._h=this._w=this._y=this._x=this._Z=0;this._active=this._clickAllowed=!1;this._opaque=!0;this._scheme=void 0;this._bufferInvalid=!0;this.action=function(){};this._gui=a;this._p=this._gui._p;this._name=b;this._x=c;this._y=d;this._w=e;this._h=f;this._parent=void 0;this._enabled=this._visible=!0;this._scheme=void 0;this._orientation=CvsBaseControl.EAST;this._dragging=!1;this._c=a.corners(void 0)}name(){return this._name}getAbsXY(){if(this._parent){let a=

this._parent.getAbsXY();a.x+=this._x;a.y+=this._y;return a}return{x:this._x,y:this._y}}scheme(a,b){if(a){this._scheme=this._gui._getScheme(a);this.invalidateBuffer();if(b)for(let c of this._children)c.scheme(a,b);return this}return this._scheme}parent(a,b,c){this._gui.$(a).addChild(this,b,c);return this}addChild(a,b,c){a=this._gui.$(a);b=Number.isFinite(b)?Number(b):a._x;c=Number.isFinite(c)?Number(c):a._y;a._parent||a.leaveParent();a._x=b;a._y=c;a._parent=this;this._children.push(a);return this}removeChild(a){a=

this._gui.$(a);for(let b=0;b<this._children.length;b++)if(a===this._children[b]){let c=a.getAbsXY();a._x=c.x;a._y=c.y;a._parent=null;this._children[b]=void 0;break}this._children=this._children.filter(Boolean);return this}leaveParent(){this._parent&&this._parent.removeChild(this);return this}getParent(){return this._parent}setAction(a){"function"===typeof a?this.action=a:console.error("The action for '$(this._name)' must be a function definition");return this}orient(a){a=a.toString().toLowerCase();

switch(a){case "north":this._orientation=CvsBaseControl.NORTH;break;case "south":this._orientation=CvsBaseControl.SOUTH;break;case "west":this._orientation=CvsBaseControl.WEST;break;default:this._orientation=CvsBaseControl.EAST}return this}isActive(){return this._active}isEnabled(){return this._enabled}enable(a){this._enabled||(this._enabled=!0,this.invalidateBuffer());if(a)for(let b of this._children)b.enable(a);return this}disable(a){this._enabled&&(this._enabled=!1,this.invalidateBuffer());if(a)for(let b of this._children)b.disable(a);

return this}show(a){this._visible=!0;if(a)for(let b of this._children)b.show(a);return this}hide(a){this._visible=!1;if(a)for(let b of this._children)b.hide(a);return this}isVisible(){return this._visible}opaque(){this._opaque=!0;return this}transparent(){this._opaque=!1;return this}shrink(a){let b=this._minControlSize();switch(a){case "w":this._w=b.w;break;case "h":this._h=b.h;break;default:this._w=b.w,this._h=b.h}this.invalidateBuffer();return this}_whereOver(a,b,c){if(0<a&&a<this._w&&0<b&&b<this._h){if(5<

this._c[0]){c=a-this._c[0];var d=b-this._c[0];if(0>c&&0>d&&c*c+d*d>this._c[0]*this._c[0])return 0}return 5<this._c[1]&&(c=a-(this._w-this._c[1]),d=b-this._c[1],0<c&&0>d&&c*c+d*d>this._c[1]*this._c[1])||5<this._c[2]&&(c=a-(this._w-this._c[2]),d=b-(this._h-this._c[2]),0<c&&0<d&&c*c+d*d>this._c[2]*this._c[2])||5<this._c[3]&&(a-=this._c[3],b-=this._h-this._c[3],0>a&&0<b&&a*a+b*b>this._c[3]*this._c[3])?0:1}return 0}_minControlSize(){return null}_updateControlVisual(){}_handleMouse(a){return!0}_handleKey(a){return!0}_handleTouch(a){}_processEvent(a,

...b){}_validateBuffer(){let a=this._buffer;if(a.width!=this._w||a.height!=this._h)this._buffer=this._p.createGraphics(this._w,this._h),this.invalidateBuffer();this._bufferInvalid&&(this._updateControlVisual(),this._bufferInvalid=!1)}invalidateBuffer(){this._bufferInvalid=!0;return this}_renderWEBGL(){this._validateBuffer();let a=this._p;a.push();a.noStroke();a.translate(this._x,this._y);this._visible&&this._orientation._renderWEBGL(a,this._w,this._h,this._buffer);for(let b of this._children)b._visible&&

b._renderWEBGL();a.pop()}_renderP2D(){this._validateBuffer();let a=this._p;a.push();a.translate(this._x,this._y);this._visible&&this._orientation._renderP2D(a,this._w,this._h,this._buffer);for(let b of this._children)b._visible&&b._renderP2D();a.pop()}_disable_hightlight(a,b,c,d,e,f){a.fill(b.TINT_4);a.noStroke();a.rect(c,d,e,f,this._c[0],this._c[1],this._c[2],this._c[3])}_eq(a,b){return.001>Math.abs(a-b)}_neq(a,b){return.001<=Math.abs(a-b)}z(){return this._Z}x(){return this._x}y(){return this._y}w(){return this._w}h(){return this._h}over(){return this._over}pover(){return this._pover}orientation(){return this._orientation}}

CvsBaseControl.NORTH=new OrientNorth;CvsBaseControl.SOUTH=new OrientSouth;CvsBaseControl.EAST=new OrientEast;CvsBaseControl.WEST=new OrientWest;

class CvsBufferedControl extends CvsBaseControl{constructor(a,b,c,d,e,f){super(a,b,c,d,e,f);this._buffer=this._p.createGraphics(this._w,this._h);this._tooltip=void 0}corners(a){return Array.isArray(a)&&4==a.length?(this._c=[...a],this):[...this._c]}tooltip(a,b){a=this._gui.__tooltip(this._name+".tooltip").text(a).showTime(b||1600).shrink();this.addChild(a);a instanceof CvsTooltip&&(a._validatePosition(),this._tooltip=a);return this}tipTextSize(a){this._tooltip&&a&&0<a&&this._tooltip.textSize(a);return this}}

class CvsSlider extends CvsBufferedControl{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||100,f||20);this._t01=.5;this._limit0=0;this._limit1=1;this._minorTicks=this._majorTicks=0;this._opaque=this._s2ticks=!1}limits(a,b){Number.isFinite(a)&&Number.isFinite(b)&&(this._limit0=a,this._limit1=b);return this}isValid(a){return Number.isFinite(a)&&0>=(a-this._limit0)*(a-this._limit1)}ticks(a,b,c){this._majorTicks=a;this._minorTicks=b;this._s2ticks=!!c;return this}value(a){return Number.isFinite(a)&&0>=

(a-this._limit0)*(a-this._limit1)?(this.invalidateBuffer(),this._t01=this._norm01(a),this):this._t2v(this._t01)}_t2v(a){return this._limit0+a*(this._limit1-this._limit0)}_v2t(a){return(a-this._limit0)/(this._limit1-this._limit0)}_norm01(a,b=this._limit0,c=this._limit1){return this._p.constrain(this._p.map(a,b,c,0,1),0,1)}_whereOver(a,b,c=8){let d=this._buffer.height/2;return Math.abs(this._t01*(this._buffer.width-20)-(a-10))<=c&&Math.abs(b-d)<=c?1:0}_handleMouse(a){var b=this.getAbsXY();let c=this._p.mouseX-

b.x;b=this._p.mouseY-b.y;b=this._orientation.xy(c,b,this._w,this._h);c=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(c,b);this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,this._pover,this._over);this._processEvent(a,c);return!1}_handleTouch(a){a.preventDefault();var b=this.getAbsXY();const c=this._gui._canvas.getBoundingClientRect(),d=a.changedTouches[0];let e=d.clientX-c.left-b.x;b=d.clientY-c.top-b.y;b=this._orientation.xy(e,

b,this._w,this._h);e=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(e,b,20);this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,this._pover,this._over);this._processEvent(a,e)}_processEvent(a,...b){b=b[0];switch(a.type){case "mousedown":case "touchstart":0<this._over&&(this._active=!0,this.invalidateBuffer());break;case "mouseout":case "mouseup":case "touchend":this._active&&(this.action({source:this,p5Event:a,value:this.value(),

final:!0}),this._active=!1,this.invalidateBuffer());break;case "mousemove":case "touchmove":this._active&&(b=this._norm01(b-10,0,this._buffer.width-20),this._s2ticks&&(b=this._nearestTickT(b)),this._t01!=b&&(this._t01=b,this.action({source:this,p5Event:a,value:this.value(),final:!1})),this.invalidateBuffer())}}_nearestTickT(a){let b=0<this._minorTicks?this._minorTicks*this._majorTicks:this._majorTicks;return 0<b?Math.round(a*b)/b:a}_updateControlVisual(){let a=this._buffer,b=this._scheme||this._gui.scheme();

var c=a.width-20,d=b.COLOR_3,e=b.GREY_9;const f=b.GREY_6,g=b.GREY_1,h=b.COLOR_14,k=b.COLOR_10;a.push();a.clear();this._opaque&&(a.noStroke(),a.fill(d),a.rect(0,0,this._w,this._h,this._c[0],this._c[1],this._c[2],this._c[3]));a.translate(10,a.height/2);a.stroke(e);a.strokeWeight(1);d=this._majorTicks*this._minorTicks;if(2<=d){e=c/d;for(var l=0;l<=d;l++){var m=l*e;a.line(m,-7,m,7)}}d=this._majorTicks;if(2<=d)for(e=c/d,l=0;l<=d;l++)m=l*e,a.line(m,-10,m,10);a.fill(f);a.rect(0,-4,c,8);c*=this._t01;a.fill(g);

a.rect(0,-4,c,8,this._c[0],this._c[1],this._c[2],this._c[3]);a.fill(k);a.noStroke();if(this._active||0<this._over)a.strokeWeight(2),a.stroke(h);a.rect(c-6,-6,12,12,this._c[0],this._c[1],this._c[2],this._c[3]);this._enabled||this._disable_hightlight(a,b,0,-this._h/2,this._w-20,this._h);a.pop();a.updatePixels();this._bufferInvalid=!1}_minControlSize(){return{w:this._w,h:20}}}

class CvsRanger extends CvsSlider{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||100,f||20);this._t=[.25,.75];this._tIdx=-1;this._limit0=0;this._limit1=1;this._opaque=!1}range(a,b){if(Number.isFinite(a)&&Number.isFinite(b)){let c=this._norm01(Math.min(a,b));a=this._norm01(Math.max(a,b));if(0<=c&&1>=c&&0<=a&&1>=a)return this._bufferInvalid=this._t[0]!=c||this._t[1]!=a,this._t[0]=c,this._t[1]=a,this}return{low:this._t2v(this._t[0]),high:this._t2v(this._t[1])}}low(){return this._t2v(this._t[0])}high(){return this._t2v(this._t[1])}value(a){console.warn("Ranger controls require 2 values - use range(v0, v1) instead")}_whereOver(a,

b,c=8){if(8>=Math.abs(b-this._buffer.height/2)){b=this._buffer.width-20;let d=this._t;a-=10;if(Math.abs(d[0]*b-a)<=c)return 1;if(Math.abs(d[1]*b-a)<=c)return 2}return 0}_handleMouse(a){var b=this.getAbsXY();let c=this._p.mouseX-b.x;b=this._p.mouseY-b.y;b=this._orientation.xy(c,b,this._w,this._h);c=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(c,b);this._tIdx=this._active?this._tIdx:this._over-1;this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,

this._pover,this._over);this._processEvent(a,c);return!1}_handleTouch(a){a.preventDefault();var b=this.getAbsXY();const c=this._gui._canvas.getBoundingClientRect(),d=a.changedTouches[0];let e=d.clientX-c.left-b.x;b=d.clientY-c.top-b.y;b=this._orientation.xy(e,b,this._w,this._h);e=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(e,b,20);this._tIdx=this._active?this._tIdx:this._over-1;this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,

this._pover,this._over);this._processEvent(a,e)}_processEvent(a,...b){b=b[0];switch(a.type){case "mousedown":case "touchstart":0<this._over&&(this._active=!0,this._tIdx=this._over-1,this.invalidateBuffer());break;case "mouseout":case "mouseup":case "touchend":if(this._active){b=Math.min(this._t[0],this._t[1]);let c=Math.max(this._t[0],this._t[1]);this._t[0]=b;this._t[1]=c;this._tIdx=-1;this.action({source:this,p5Event:a,low:this._t2v(b),high:this._t2v(c),final:!0});this._active=!1;this.invalidateBuffer()}break;

case "mousemove":case "touchmove":this._active&&(b=this._norm01(b-10,0,this._buffer.width-20),this._s2ticks&&(b=this._nearestTickT(b)),this._t[this._tIdx]!=b&&(this._t[this._tIdx]=b,b=Math.max(this._t[0],this._t[1]),this.action({source:this,p5Event:a,low:this._t2v(Math.min(this._t[0],this._t[1])),high:this._t2v(b),final:!1})),this.invalidateBuffer())}}_updateControlVisual(){let a=this._buffer,b=this._scheme||this._gui.scheme(),c=a.width-20;var d=b.COLOR_3,e=b.GREY_9,f=b.GREY_6,g=b.GREY_1;const h=

b.COLOR_14,k=b.COLOR_10;a.push();a.clear();this._opaque&&(a.noStroke(),a.fill(d),a.rect(0,0,this._w,this._h,this._c[0],this._c[1],this._c[2],this._c[3]));a.translate(10,a.height/2);a.stroke(e);a.strokeWeight(1);d=this._majorTicks*this._minorTicks;if(2<=d){e=c/d;for(var l=0;l<=d;l++){var m=l*e;a.line(m,-7,m,7)}}d=this._majorTicks;if(2<=d)for(e=c/this._majorTicks,l=0;l<=d;l++)m=l*e,a.line(m,-10,m,10);a.fill(f);a.rect(0,-4,c,8);f=c*Math.min(this._t[0],this._t[1]);d=c*Math.max(this._t[0],this._t[1]);

a.fill(g);a.rect(f,-4,d-f,8,this._c[0],this._c[1],this._c[2],this._c[3]);for(g=0;2>g;g++)a.fill(k),a.noStroke(),(this._active||0<this._over)&&g==this._tIdx&&(a.strokeWeight(2),a.stroke(h)),a.rect(this._t[g]*c-6,-6,12,12,this._c[0],this._c[1],this._c[2],this._c[3]);this._enabled||this._disable_hightlight(a,b,0,-this._h/2,this._w-20,this._h);a.pop();a.updatePixels();this._bufferInvalid=!1}}

class CvsText extends CvsBufferedControl{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||80,f||16);this._lines=[];this._textSize=void 0;this._textAlign=this._p.CENTER;this._tbox={w:0,h:0};this._gap=2}text(a,b){if(null==a||void 0==a)return this._lines.join("\n");Array.isArray(a)?this._lines=a.map(c=>c.toString()):this._lines=a.toString().split("\n").map(c=>c.toString());this.textAlign(b);a=this._minControlSize();this._w=Math.max(this._w,a.w);this._h=Math.max(this._h,a.h);this.invalidateBuffer();return this}textAlign(a){!a||

a!=this._p.LEFT&&a!=this._p.CENTER&&a!=this._p.RIGHT||(this._textAlign=a,this.invalidateBuffer());return this}noText(){this._lines=[];this._tbox={w:0,h:0};this.invalidateBuffer();return this}textSize(a){let b=this._textSize||this._gui.textSize();if(!Number.isFinite(a))return b;a=Number(a);a!=b&&(this._textSize=a,a=this._minControlSize(),this._w=Math.max(this._w,a.w),this._h=Math.max(this._h,a.h),this.invalidateBuffer());return this}_minControlSize(){let a=this._buffer,b=this._lines,c=this._textSize||

this._gui.textSize(),d=this._tbox,e=0,f=0,g=this._gap;0<b.length&&(a||this._validateBuffer(),a.textSize(c),d.w=c+b.map(h=>a.textWidth(h)).reduce((h,k)=>h>k?h:k),d.h=(b.length-1)*a.textLeading(),g+=this._gap);e+=d.w+g;f=Math.max(d.h,f)+2*g;return{w:e,h:f}}}

class CvsTextIcon extends CvsText{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||80,f||16);this._icon=void 0;this._iconAlign=this._p.LEFT}icon(a,b){if(!a)return this._icon;this._icon=a;!b||b!=this._p.LEFT&&b!=this._p.RIGHT||(this._iconAlign=b);a=this._minControlSize();this._w=Math.max(this._w,a.w);this._h=Math.max(this._h,a.h);this.invalidateBuffer();return this}iconAlign(a){!a||a!=this._p.LEFT&&a!=this._p.RIGHT||(this._iconAlign=a,a=this._minControlSize(),this._w=Math.max(this._w,a.w),this._h=Math.max(this._h,

a.h),this.invalidateBuffer());return this}noIcon(){this._icon&&(this._icon=void 0,this.invalidateBuffer());return this}_minControlSize(){let a=this._buffer,b=this._lines,c=this._icon,d=this._textSize||this._gui.textSize(),e=this._tbox,f=0,g=0,h=this._gap;c&&(f=c.width,g=c.height,h+=this._gap);0<b.length&&(a||this._validateBuffer(),a.textSize(d),e.w=d+b.map(k=>a.textWidth(k)).reduce((k,l)=>k>l?k:l),e.h=(b.length-1)*a.textLeading()+a.textAscent()+a.textDescent(),h+=this._gap);f+=e.w+h;g=Math.max(this._tbox.h,

g)+h;return{w:f,h:g}}}

class CvsButton extends CvsTextIcon{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||80,f||16)}_updateControlVisual(){var a=this._textSize||this._gui.textSize();let b=this._scheme||this._gui.scheme(),c=this._buffer;var d=this._icon,e=this._iconAlign;let f=this._textAlign,g=this._lines,h=this._gap;var k=b.COLOR_4;let l=b.COLOR_13,m=b.COLOR_14;c.push();c.clear();this._opaque&&(c.noStroke(),c.fill(k),c.rect(1,1,this._w-1,this._h-1,this._c[0],this._c[1],this._c[2],this._c[3]));if(d){k=0;switch(e){case this._p.LEFT:k=

h;break;case this._p.RIGHT:k=this._w-d.width-h}0==g.length&&(k=(this._w-d.width)/2);c.image(this._icon,k,(this._h-d.height)/2)}if(0<g.length){c.textSize(a);a=h;k=this._w-h;let n=0;d&&e==this._p.LEFT&&(a+=d.width);d&&e==this._p.RIGHT&&(k-=d.width);d=k-a;e=this._tbox.h;e=c.textAscent()+(this._h-e)/2;c.fill(l);for(let p of g){switch(f){case this._p.LEFT:n=a;break;case this._p.CENTER:n=a+(d-c.textWidth(p))/2;break;case this._p.RIGHT:n=k-c.textWidth(p)-h}c.text(p,n,e);e+=c.textLeading()}}0<this._over&&

(c.stroke(m),c.strokeWeight(2),c.noFill(),c.rect(1,1,this._w-2,this._h-2,this._c[0],this._c[1],this._c[2],this._c[3]));this._enabled||this._disable_hightlight(c,b,0,0,this._w,this._h);c.pop();c.updatePixels();this._bufferInvalid=!1;this._parent instanceof CvsPane&&this._parent.validateTabs()}_handleMouse(a){var b=this.getAbsXY();let c=this._p.mouseX-b.x;b=this._p.mouseY-b.y;b=this._orientation.xy(c,b,this._w,this._h);c=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(c,b);this._bufferInvalid=

this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,this._pover,this._over);this._processEvent(a);return!1}_handleTouch(a){var b=this.getAbsXY();const c=this._gui._canvas.getBoundingClientRect(),d=a.changedTouches[0];let e=d.clientX-c.left-b.x;b=d.clientY-c.top-b.y;b=this._orientation.xy(e,b,this._w,this._h);e=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(e,b);this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,

this._pover,this._over);this._processEvent(a)}_processEvent(a){switch(a.type){case "mousedown":case "touchstart":0<this._over&&(this._active=this._dragging=this._clickAllowed=!0,this.invalidateBuffer());break;case "mouseout":case "mouseup":case "touchend":this._active&&(this._clickAllowed&&this.action({source:this,p5Event:a}),this._over=0,this._active=this._dragging=this._clickAllowed=!1,this.invalidateBuffer());break;case "mousemove":case "touchmove":this._clickAllowed=!1}}}

class CvsCheckbox extends CvsText{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||80,f||18);this._selected=!1;this._textAlign=this._iconAlign=this._p.LEFT}iconAlign(a){if(!a)return this._iconAlign;if(a==this._p.LEFT||a==this._p.RIGHT)this._iconAlign=a,this.invalidateBuffer();return this}select(){this._selected||(this._selected=!0,this.invalidateBuffer());return this}deselect(){this._selected&&(this._selected=!1,this.invalidateBuffer());return this}isSelected(){return this._selected}_handleMouse(a){var b=

this.getAbsXY();let c=this._p.mouseX-b.x;b=this._p.mouseY-b.y;b=this._orientation.xy(c,b,this._w,this._h);c=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(c,b);this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,this._pover,this._over);this._processEvent(a);return!1}_handleTouch(a){var b=this.getAbsXY();const c=this._gui._canvas.getBoundingClientRect(),d=a.changedTouches[0];let e=d.clientX-c.left-b.x;b=d.clientY-c.top-b.y;b=

this._orientation.xy(e,b,this._w,this._h);e=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(e,b);this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,this._pover,this._over);this._processEvent(a)}_processEvent(a,...b){switch(a.type){case "mousedown":case "touchstart":0<this._over&&(this._active=this._dragging=this._clickAllowed=!0,this.invalidateBuffer());break;case "mouseout":case "mouseup":case "touchend":this._active&&(this._clickAllowed&&

(this._selected=!this._selected,this.action({source:this,p5Event:a,selected:this._selected})),this._over=0,this._active=this._dragging=this._clickAllowed=!1,this.invalidateBuffer());break;case "mousemove":case "touchmove":this._clickAllowed=!1}}_updateControlVisual(){var a=this._textSize||this._gui.textSize();let b=this._scheme||this._gui.scheme(),c=this._buffer;var d=this._iconAlign,e=this._p.constrain(.7*Number(a),12,16);let f=this._textAlign,g=this._lines,h=this._gap;var k=b.COLOR_3;let l=b.COLOR_13,

m=b.COLOR_14;c.push();c.clear();this._opaque&&(c.noStroke(),c.fill(k),c.rect(0,0,this._w,this._h,this._c[0],this._c[1],this._c[2],this._c[3]));c.push();c.translate(d==this._p.RIGHT?this._w-h-e/2:h+e/2,c.height/2);c.stroke(l);c.fill(b.WHITE);c.strokeWeight(1.5);c.rect(-e/2,-e/2,e,e,3);this._selected&&(c.stroke(l),c.strokeWeight(2.5),c.line(-.281*e,0,-.188*e,.313*e),c.line(.27*e,-.27*e,-.188*e,.313*e));c.pop();if(0<g.length){c.textSize(a);a=h;k=this._w-h;let n=0;d==this._p.LEFT&&(a+=e+h);d==this._p.RIGHT&&

(k-=e+h);d=k-a;e=this._tbox.h;e=c.textAscent()+(this._h-e)/2;c.fill(l);for(let p of g){switch(f){case this._p.LEFT:n=a;break;case this._p.CENTER:n=a+(d-c.textWidth(p))/2;break;case this._p.RIGHT:n=k-c.textWidth(p)-h}c.text(p,n,e);e+=c.textLeading()}}0<this._over&&(c.stroke(m),c.strokeWeight(2),c.noFill(),c.rect(1,1,this._w-2,this._h-2,this._c[0],this._c[1],this._c[2],this._c[3]));this._enabled||this._disable_hightlight(c,b,0,0,this._w,this._h);c.pop();c.updatePixels();this._bufferInvalid=!1}_minControlSize(){let a=

this._buffer,b=this._lines,c=this._tbox,d=0;var e=0;e=this._gap;var f=this._textSize||this._gui.textSize();f=this._p.constrain(.7*Number(f),12,16);if(0<b.length){a||this._validateBuffer();let g=this._textSize||this._gui.textSize();a.textSize(g);c.w=g+b.map(h=>a.textWidth(h)).reduce((h,k)=>h>k?h:k);c.h=(b.length-1)*a.textLeading()+a.textAscent()+a.textDescent()}d+=c.w+e+f;e=Math.max(this._tbox.h,f+e)+2*e;return{w:d,h:e}}}

class CvsOptionGroup{constructor(a){this._name=a;this._group=new Set}add(a){if(a.isSelected())for(let b of this._group)b._deselect();this._group.add(a)}remove(a){this._group.delete(a)}_prev(){let a=void 0;for(let b of this._group)if(b.isSelected()){a=b;break}return a}}

class CvsOption extends CvsText{constructor(a,b,c,d,e,f){super(a,b,c||0,d||0,e||100,f||18);this._selected=!1;this._optGroup=null;this._textAlign=this._iconAlign=this._p.LEFT}iconAlign(a){if(!a)return this._iconAlign;if(a==this._p.LEFT||a==this._p.RIGHT)this._iconAlign=a,this.invalidateBuffer();return this}select(){let a=this._optGroup?._prev();a&&(a._selected=!1,a.invalidateBuffer());this._selected=!0;this.invalidateBuffer();return this}_deselect(){this._selected=!1;return this}isSelected(){return this._selected}group(a){this._optGroup=

this._gui.getOptionGroup(a);this._optGroup.add(this);return this}_handleMouse(a){var b=this.getAbsXY();let c=this._p.mouseX-b.x;b=this._p.mouseY-b.y;b=this._orientation.xy(c,b,this._w,this._h);c=b.x;b=b.y;this._pover=this._over;this._over=this._whereOver(c,b);this._bufferInvalid=this._bufferInvalid||this._pover!=this._over;this._tooltip&&this._tooltip._updateState(this,this._pover,this._over);this._processEvent(a);return!1}_handleTouch(a){var b=this.getAbsXY();const c=this._gui._canvas.getBoundingClientRect(),