perfect-gui 4.10.0 → 4.11.0

package/dist/perfect-gui.mjs

@@ -399,7 +399,7 @@ const E = (
     }
 
     .p-gui__image:hover {
-        color: var(--color-text-text);
+        color: var(--color-text-light);
     }
 
     .p-gui__image::after {
@@ -526,6 +526,11 @@ function F(v) {
         border-radius: var(--main-border-radius);
         border: 1px solid var(--color-border);
         line-height: normal;
+        transition: var(--transition) opacity;
+    }
+
+    .p-gui:hover {
+        opacity: 1!important;
     }
     
     .p-gui * {
@@ -640,7 +645,7 @@ class y {
       this._folderConstructor(e.folderOptions);
       return;
     }
-    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${F(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
+    typeof e.onUpdate == "function" && (this.onUpdate = e.onUpdate), this.name = e != null && typeof e.name == "string" ? e.name : "", this.backgroundColor = e.color || null, this.opacity = e.opacity || 1, this.container == document.body ? this.maxHeight = window.innerHeight : this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight), e.maxHeight && (this.initMaxHeight = e.maxHeight, this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight)), this.screenCorner = this._parseScreenCorner(e.position), window.perfectGUI || (window.perfectGUI = {}), window.perfectGUI.instanceCounter == null ? window.perfectGUI.instanceCounter = 0 : window.perfectGUI.instanceCounter++, this.instanceId = window.perfectGUI.instanceCounter, this.wrapperWidth = e.width || 290, this.stylesheet = document.createElement("style"), this.stylesheet.setAttribute("type", "text/css"), this.stylesheet.setAttribute("id", "lm-gui-stylesheet"), document.head.append(this.stylesheet), this.instanceId == 0 && this._addStyles(`${F(this.position_type)}`), this._styleInstance(), this._addWrapper(), this.wrapper.setAttribute("data-corner-x", this.screenCorner.x), this.wrapper.setAttribute("data-corner-y", this.screenCorner.y), e.autoRepositioning != !1 && window.addEventListener("resize", this._handleResize.bind(this)), this._handleResize(), this.hasBeenDragged = !1, e.draggable == !0 && this._makeDraggable(), this.closed = !1, e.closed && this.toggleClose();
   }
   _styleInstance() {
     let e = this._getScrollbarWidth(this.container);
@@ -660,6 +665,7 @@ class y {
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${this.screenCorner.y == "top" ? "" : "top: auto; bottom: 0;"}
             ${this.backgroundColor ? "background: " + this.backgroundColor + ";" : ""}
+            opacity: ${this.opacity};
         }`);
   }
   _folderConstructor(e) {

package/dist/perfect-gui.umd.js

@@ -298,7 +298,7 @@
     }
 
     .p-gui__image:hover {
-        color: var(--color-text-text);
+        color: var(--color-text-light);
     }
 
     .p-gui__image::after {
@@ -417,6 +417,11 @@
         border-radius: var(--main-border-radius);
         border: 1px solid var(--color-border);
         line-height: normal;
+        transition: var(--transition) opacity;
+    }
+
+    .p-gui:hover {
+        opacity: 1!important;
     }
     
     .p-gui * {
@@ -522,10 +527,11 @@
     ${C}
     
     ${P}
-`}class y{constructor(e={}){if(this.firstParent=this,e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}typeof e.onUpdate=="function"&&(this.onUpdate=e.onUpdate),this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),window.perfectGUI||(window.perfectGUI={}),window.perfectGUI.instanceCounter==null?window.perfectGUI.instanceCounter=0:window.perfectGUI.instanceCounter++,this.instanceId=window.perfectGUI.instanceCounter,this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${F(this.position_type)}`),this._styleInstance(),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),e.autoRepositioning!=!1&&window.addEventListener("resize",this._handleResize.bind(this)),this._handleResize(),this.hasBeenDragged=!1,e.draggable==!0&&this._makeDraggable(),this.closed=!1,e.closed&&this.toggleClose()}_styleInstance(){let e=this._getScrollbarWidth(this.container);if(this.screenCorner.x=="left"?this.xOffset=0:this.xOffset=this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(".p-gui");for(let o=0;o<t.length;o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].offsetWidth))}this.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
+`}class y{constructor(e={}){if(this.firstParent=this,e.container?(this.container=typeof e.container=="string"?document.querySelector(e.container):e.container,this.position_type="absolute"):(this.container=document.body,this.position_type="fixed"),this.propReferences=[],this.folders=[],e.isFolder){this._folderConstructor(e.folderOptions);return}typeof e.onUpdate=="function"&&(this.onUpdate=e.onUpdate),this.name=e!=null&&typeof e.name=="string"?e.name:"",this.backgroundColor=e.color||null,this.opacity=e.opacity||1,this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),e.maxHeight&&(this.initMaxHeight=e.maxHeight,this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.screenCorner=this._parseScreenCorner(e.position),window.perfectGUI||(window.perfectGUI={}),window.perfectGUI.instanceCounter==null?window.perfectGUI.instanceCounter=0:window.perfectGUI.instanceCounter++,this.instanceId=window.perfectGUI.instanceCounter,this.wrapperWidth=e.width||290,this.stylesheet=document.createElement("style"),this.stylesheet.setAttribute("type","text/css"),this.stylesheet.setAttribute("id","lm-gui-stylesheet"),document.head.append(this.stylesheet),this.instanceId==0&&this._addStyles(`${F(this.position_type)}`),this._styleInstance(),this._addWrapper(),this.wrapper.setAttribute("data-corner-x",this.screenCorner.x),this.wrapper.setAttribute("data-corner-y",this.screenCorner.y),e.autoRepositioning!=!1&&window.addEventListener("resize",this._handleResize.bind(this)),this._handleResize(),this.hasBeenDragged=!1,e.draggable==!0&&this._makeDraggable(),this.closed=!1,e.closed&&this.toggleClose()}_styleInstance(){let e=this._getScrollbarWidth(this.container);if(this.screenCorner.x=="left"?this.xOffset=0:this.xOffset=this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(".p-gui");for(let o=0;o<t.length;o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].offsetWidth))}this.yOffset=0,this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this._addStyles(`#p-gui-${this.instanceId} {
             width: ${this.wrapperWidth}px;
             max-height: ${this.maxHeight}px;
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
             ${this.backgroundColor?"background: "+this.backgroundColor+";":""}
+            opacity: ${this.opacity};
         }`)}_folderConstructor(e){this.wrapper=e.wrapper,this.isFolder=!0,this.parent=e.parent,this.firstParent=e.firstParent}_parseScreenCorner(e){let t={x:"right",y:"top"};return e==null||(typeof e!="string"&&console.error("[perfect-gui] Position must be a string."),e.includes("left")&&(t.x="left"),e.includes("bottom")&&(t.y="bottom")),t}_getScrollbarWidth(e){return e===document.body?window.innerWidth-document.documentElement.clientWidth:e.offsetWidth-e.clientWidth}_handleResize(){if(this.container==document.body?this.maxHeight=window.innerHeight:this.maxHeight=Math.min(this.container.clientHeight,window.innerHeight),this.initMaxHeight&&(this.maxHeight=Math.min(this.initMaxHeight,this.maxHeight)),this.wrapper.style.maxHeight=this.maxHeight+"px",this.hasBeenDragged)return;let e=this._getScrollbarWidth(this.container);if(this.xOffset=this.screenCorner.x=="left"?0:this.container.clientWidth-this.wrapperWidth-e,this.instanceId>0){let t=this.container.querySelectorAll(`.p-gui:not(#${this.wrapper.id}):not([data-dragged])`);for(let o=0;o<t.length&&!(parseInt(t[o].id.replace("p-gui-",""))>this.instanceId);o++)this.screenCorner.y==t[o].dataset.cornerY&&(this.screenCorner.x=="left"&&t[o].dataset.cornerX=="left"?this.xOffset+=t[o].offsetWidth:this.screenCorner.x=="right"&&t[o].dataset.cornerX=="right"&&(this.xOffset-=t[o].offsetWidth))}this.position={prevX:this.xOffset,prevY:this.yOffset,x:this.xOffset,y:this.yOffset},this.wrapper.style.transform=`translate3d(${this.position.x}px, ${this.position.y}px, 0)`}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=document.createElement("div"),this.wrapper.id="p-gui-"+this.instanceId,this.wrapper.className="p-gui",this.container.append(this.wrapper),this.header=document.createElement("div"),this.header.className="p-gui__header",this.header.textContent=this.name,this.header.style=`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`,this.wrapper.append(this.header);const e=document.createElement("div");e.className="p-gui__header-close",e.addEventListener("click",this.toggleClose.bind(this)),this.header.append(e)}button(e,t){let o="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?o=e.name==""?" ":e.name:o=" ":o=e==""?" ":e,this.imageContainer=null;const a=document.createElement("div");a.className="p-gui__button",a.textContent=o,a.addEventListener("click",()=>{this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate(),t&&t()}),this.wrapper.append(a),typeof e.color=="string"&&(a.style.setProperty("--color-accent",e.color),a.style.setProperty("--color-accent-hover",e.hoverColor||e.color))}image(e={},t){if(typeof e!="object")throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof e}.`);let o;if(typeof e.path=="string")o=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let a=o.replace(/^.*[\\\/]/,""),l;e.name==null?l=a:l=typeof e.name=="string"&&e.name||" ";const i=e.selected===!0,r=e.selectionBorder!==!1;let n="";e.width&&(typeof e.width=="number"&&(e.width+="px"),n+=`flex: 0 0 calc(${e.width} - 5px); `),e.height&&(typeof e.height=="number"&&(e.height+="px"),n+=`height: ${e.height}; `),this.imageContainer||(this.imageContainer=document.createElement("div"),this.imageContainer.className="p-gui__image-container",this.wrapper.append(this.imageContainer));const s=document.createElement("div");s.className="p-gui__image",s.style="background-image: url("+o+"); "+n,this.imageContainer.append(s),i&&r&&s.classList.add("p-gui__image--selected");const d=document.createElement("div");return d.className="p-gui__image-text",d.textContent=l,s.append(d),s.addEventListener("click",()=>{let f=s.parentElement.querySelectorAll(".p-gui__image--selected");for(let c=0;c<f.length;c++)f[c].classList.remove("p-gui__image--selected");r&&s.classList.add("p-gui__image--selected"),typeof t=="function"&&t({path:o,text:l}),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),s}slider(e={},t){const o=new x(e,t);this.wrapper.append(o)}sliderOld(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,l=null,i=e.obj,r=e.prop,n=typeof e.value=="number"?e.value:null,s=e.min??0,d=e.max??1,f=e.step||(d-s)/100;if(n!==null)(r!=null||i!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&i!=null){if(typeof r!="string")throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof i!="object")throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof i}.`);o==" "&&(o=r),l=this.propReferences.push(i[r])-1,a=!0}else(r!=null&&i==null||r==null&&i!=null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(d-s)/2;this.imageContainer=null;const c=document.createElement("div");c.className="p-gui__slider",this.wrapper.append(c);const u=document.createElement("div");u.className="p-gui__slider-name",u.textContent=o,c.append(u);const p=document.createElement("input");p.className="p-gui__slider-ctrl",p.setAttribute("type","range"),p.setAttribute("min",s),p.setAttribute("max",d),p.setAttribute("step",f),p.setAttribute("value",a?i[r]:n),c.append(p);const g=document.createElement("input");g.className="p-gui__slider-value",g.value=String(a?i[r]:n),c.append(g),g.addEventListener("change",()=>{p.value=parseFloat(g.value)}),p.addEventListener("input",()=>{g.value=p.value,a?i[r]=parseFloat(p.value):typeof t=="function"&&t(parseFloat(p.value)),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(i,r,{set:h=>{this.propReferences[l]=h,p.value=h,g.textContent=String(h),typeof t=="function"&&t(parseFloat(p.value))},get:()=>this.propReferences[l]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,l=null,i=e.obj,r=e.prop,n=typeof e.value=="boolean"?e.value:null;if(n!==null)(r!=null||i!=null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&i!=null){if(typeof r!="string")throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof i!="object")throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof i}.`);o==" "&&(o=r),l=this.propReferences.push(i[r])-1,a=!0}else(r!=null&&i==null||r==null&&i==null)&&console.warn('[GUI] toggle() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.textContent=o,s.className="p-gui__switch",this.wrapper.append(s),s.addEventListener("click",c=>{const u=c.target.childNodes[1];let p=!0;u.classList.contains("p-gui__switch-checkbox--active")&&(p=!1),u.classList.toggle("p-gui__switch-checkbox--active"),a?i[r]=p:typeof t=="function"&&t(p),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let d=(()=>a?i[r]?" p-gui__switch-checkbox--active":"":n?" p-gui__switch-checkbox--active":"")();const f=document.createElement("div");f.className="p-gui__switch-checkbox"+d,s.append(f),a&&Object.defineProperty(i,r,{set:c=>{this.propReferences[l]=c,c?f.classList.add("p-gui__switch-checkbox--active"):f.classList.remove("p-gui__switch-checkbox--active"),typeof t=="function"&&t(c)},get:()=>this.propReferences[l]})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"?e.name:" ",a=!1,l=null,i=e.obj,r=e.prop,n=Array.isArray(e.values)?e.values:null,s,d=typeof n[0]!="string";if(t=typeof t=="function"?t:null,e.value!==void 0||e.value===void 0&&i===void 0&&r===void 0)(r!=null||i!=null)&&console.warn('[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.'),s=(()=>{if(!n)return null;if(typeof e.value=="string")return n.indexOf(e.value);if(typeof e.value=="number")return e.value})();else if(r!=null&&i!=null){if(typeof r!="string")throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof i!="object")throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof i}.`);s=(()=>{if(!n)return null;if(typeof i[r]=="string")return d?n.find(u=>u.value===i[r]).value:n.indexOf(i[r]);if(typeof i[r]=="number")return d?n.find(u=>u.value===i[r]).value:i[r]})(),l=this.propReferences.push(i[r])-1,a=!0}else(r!=null&&i==null||r==null&&i==null)&&console.warn('[GUI] list() "obj" and "prop" parameters must be used together.');this.imageContainer=null;let f=document.createElement("div");f.className="p-gui__list",f.textContent=o,this.wrapper.append(f);let c=document.createElement("select");f.append(c),c.className="p-gui__list-dropdown",c.addEventListener("change",u=>{a?i[r]=u.target.value:t&&t(u.target.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),n&&n.forEach((u,p)=>{const g=d?u.name:u,h=d?u.value:u;let m=document.createElement("option");m.setAttribute("value",h),m.textContent=g,c.append(m),(!d&&s==p||d&&s==h)&&m.setAttribute("selected","")}),a&&Object.defineProperty(i,r,{set:u=>{let p,g,h;d?(h=n.find(w=>w.value==u),g=(h==null?void 0:h.value)||n[0].value,p=n.indexOf(h)):(typeof u=="string"&&(p=n.indexOf(u),g=u),typeof u=="number"&&(p=u,g=n[u])),this.propReferences[l]=d?g:u;const m=c.querySelector("[selected]");m&&m.removeAttribute("selected"),c.querySelectorAll("option")[p].setAttribute("selected",""),typeof t=="function"&&t(d?h:g,p)},get:()=>this.propReferences[l]})}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ";const a=e.x.min??0,l=e.x.max??1,i=e.y.min??0,r=e.y.max??1,n=e.x.obj,s=e.x.prop,d=this.propReferences.push(n[s])-1,f=e.y.obj,c=e.y.prop,u=this.propReferences.push(f[c])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const p=document.createElement("div");p.className="p-gui__vector2",p.textContent=o,this.wrapper.append(p);const g=document.createElement("div");g.className="p-gui__vector-value",g.textContent=n[s]+", "+f[c],p.append(g);const h=document.createElement("div");h.className="p-gui__vector2-area",p.append(h),h.addEventListener("click",b=>{n[s]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,l).toFixed(2)),f[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,r,i).toFixed(2)),t&&t(n[s],n[c]),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()});let m=!1;h.addEventListener("pointerdown",b=>{m=!0}),h.addEventListener("pointerup",()=>{m=!1}),h.addEventListener("pointermove",b=>{m&&(n[s]=parseFloat(this._mapLinear(b.offsetX,0,h.clientWidth,a,l).toFixed(2)),f[c]=parseFloat(this._mapLinear(b.offsetY,0,h.clientHeight,r,i).toFixed(2)),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate(),t&&t(n[s],n[c]))});const w=document.createElement("div");w.className="p-gui__vector2-line p-gui__vector2-line-x",h.append(w);const E=document.createElement("div");E.className="p-gui__vector2-line p-gui__vector2-line-y",h.append(E);const _=document.createElement("div");_.className="p-gui__vector2-dot",h.append(_),_.style.left=this._mapLinear(n[s],a,l,0,h.clientWidth)+"px",_.style.top=this._mapLinear(f[c],i,r,h.clientHeight,0)+"px",Object.defineProperty(n,s,{set:b=>{this.propReferences[d]=b,_.style.left=this._mapLinear(b,a,l,0,h.clientWidth)+"px",g.textContent=String(b)+", "+f[c]},get:()=>this.propReferences[d]}),Object.defineProperty(f,c,{set:b=>{this.propReferences[u]=b,_.style.top=this._mapLinear(b,i,r,h.clientHeight,0)+"px",g.textContent=n[s]+", "+String(b)},get:()=>this.propReferences[u]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let o=typeof e.name=="string"&&e.name||" ",a=!1,l=null,i=e.obj,r=e.prop,n;if(typeof e.value=="string"&&(e.value.length!=7||e.value[0]!="#"?console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${e.value}".`):n=e.value),n||(n="#000000"),e.value!==void 0)(r!=null||i!=null)&&console.warn('[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.');else if(r!=null&&i!=null){if(typeof r!="string")throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof r}.`);if(typeof i!="object")throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof i}.`);o==" "&&(o=r),l=this.propReferences.push(i[r])-1,a=!0}else(r!=null&&i==null||r==null&&i==null)&&console.warn('[GUI] color() "obj" and "prop" parameters must be used together.');this.imageContainer=null;const s=document.createElement("div");s.className="p-gui__color",s.textContent=o,this.wrapper.append(s);const d=document.createElement("input");d.className="p-gui__color-picker",d.setAttribute("type","color"),d.value=n,s.append(d),typeof t=="function"&&d.addEventListener("input",()=>{a?i[r]=d.value:typeof t=="function"&&t(d.value),this.onUpdate?this.onUpdate():this.isFolder&&this.firstParent.onUpdate&&this.firstParent.onUpdate()}),a&&Object.defineProperty(i,r,{set:f=>{this.propReferences[l]=f,d.value=f,typeof t=="function"&&t(f)},get:()=>this.propReferences[l]})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,o=e.name||"",a=e.color||null,l=e.maxHeight||null;this.imageContainer=null;let i="p-gui__folder";this.folders.length==0&&(i+=" p-gui__folder--first"),t&&(i+=" p-gui__folder--closed");let r=a?`background-color: ${a};`:"";r+=l?`max-height: ${l}px;`:"";const n=document.createElement("div");n.className=i,n.style=r,this.wrapper.append(n);const s=document.createElement("div");s.innerHTML=`<span class="p-gui__folder-arrow"></span>${o}`,s.className="p-gui__folder-header",n.append(s),s.addEventListener("click",()=>{n.classList.toggle("p-gui__folder--closed")});let d=new y({isFolder:!0,folderOptions:{wrapper:n,parent:this,firstParent:this.firstParent}});return this.folders.push(d),d}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",a);function t(l){l.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=l.clientX,e.position.prevY=l.clientY,document.addEventListener("pointermove",o)}function o(l){l.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+l.clientX-e.position.prevX,e.position.y=e.position.initY+l.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function a(l){document.removeEventListener("pointermove",o)}}toggleClose(){this.closed=!this.closed,this.closed?(this.previousInnerScroll=this.wrapper.scrollTop,this.wrapper.scrollTo(0,0)):this.wrapper.scrollTo(0,this.previousInnerScroll),this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,o,a,l){return a+(e-t)*(l-a)/(o-t)}}return y});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/index.js

@@ -1,4 +1,4 @@
-import Slider from './Slider';
+import Slider from './components/Slider';
 import styles from './styles/styles';
 
 export default class GUI {
@@ -28,6 +28,7 @@ export default class GUI {
         this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
         
         this.backgroundColor = options.color || null; 
+        this.opacity = options.opacity || 1;
 
         if (this.container == document.body) {
             this.maxHeight = window.innerHeight;
@@ -116,6 +117,7 @@ export default class GUI {
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${ this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;' }
             ${ this.backgroundColor ? 'background: ' + this.backgroundColor + ';' : '' }
+            opacity: ${this.opacity};
         }`);
     }
 

package/src/styles/_image.js

@@ -22,7 +22,7 @@ export default /* css */ `
     }
 
     .p-gui__image:hover {
-        color: var(--color-text-text);
+        color: var(--color-text-light);
     }
 
     .p-gui__image::after {

package/src/styles/styles.js

@@ -48,6 +48,11 @@ export default function( position_type ) {
         border-radius: var(--main-border-radius);
         border: 1px solid var(--color-border);
         line-height: normal;
+        transition: var(--transition) opacity;
+    }
+
+    .p-gui:hover {
+        opacity: 1!important;
     }
     
     .p-gui * {