perfect-gui 4.3.3 → 4.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/perfect-gui.mjs +1 -1
- package/dist/perfect-gui.umd.js +1 -1
- package/package.json +1 -1
- package/src/index.js +1 -1
package/dist/perfect-gui.mjs
CHANGED
|
@@ -603,7 +603,7 @@ class u {
|
|
|
603
603
|
if (typeof e.value == "number")
|
|
604
604
|
return e.value;
|
|
605
605
|
})();
|
|
606
|
-
|
|
606
|
+
t = typeof t == "function" ? t : null, this.imageContainer = null;
|
|
607
607
|
let s = this._createElement({
|
|
608
608
|
class: "p-gui__list",
|
|
609
609
|
textContent: i
|
package/dist/perfect-gui.umd.js
CHANGED
|
@@ -413,4 +413,4 @@
|
|
|
413
413
|
transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
|
|
414
414
|
${this.screenCorner.y=="top"?"":"top: auto; bottom: 0;"}
|
|
415
415
|
${this.backgroundColor?"background: "+this.backgroundColor+";":""}
|
|
416
|
-
}`)}_folderConstructor(e){this.wrapper=e.wrapper}_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 i=0;i<t.length&&!(parseInt(t[i].id.replace("p-gui-",""))>this.instanceId);i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].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)`}_createElement(e){e.el=e.el||"div";var t=document.createElement(e.el);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.inline&&(t.style=e.inline),e.href&&(t.href=e.href),e.onclick&&(t.onclick=e.onclick),e.onchange&&(t.onchange=e.onchange),e.textContent&&(t.textContent=e.textContent),e.innerHTML&&(t.innerHTML=e.innerHTML),e.type&&(t.type=e.type),e.value&&(t.value=e.value),e.customAttributes)for(var i in e.customAttributes)t.setAttribute(i,e.customAttributes[i]);return e.parent=e.parent?e.parent:this.wrapper,e.parent.append(t),t}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=this._createElement({parent:this.container,id:"p-gui-"+this.instanceId,class:"p-gui"}),this.header=this._createElement({parent:this.wrapper,class:"p-gui__header",textContent:this.name,inline:`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`}),this._createElement({parent:this.header,class:"p-gui__header-close",onclick:this.toggleClose.bind(this)})}button(e,t){let i="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?i=e.name==""?" ":e.name:i=" ":i=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const r=this._createElement({class:"p-gui__button",textContent:i,onclick:t});typeof e.color=="string"&&(r.style.setProperty("--color-accent",e.color),r.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 i;if(typeof e.path=="string")i=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let r=i.replace(/^.*[\\\/]/,""),o;e.name==null?o=r:o=typeof e.name=="string"&&e.name||" ";const s=e.selected===!0,a=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=this._createElement({class:"p-gui__image-container"}));var l=this._createElement({class:"p-gui__image",inline:"background-image: url("+i+"); "+n,parent:this.imageContainer});s&&a&&l.classList.add("p-gui__image--selected"),this._createElement({parent:l,class:"p-gui__image-text",textContent:o}),typeof t=="function"&&(l.onclick=()=>{let g=this.imageContainer.querySelectorAll(".p-gui__image--selected");for(let h=0;h<g.length;h++)g[h].classList.remove("p-gui__image--selected");a&&l.classList.add("p-gui__image--selected"),t({path:i,text:o})})}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",r=!1,o=null,s=e.obj||e.object,a=e.prop||e.property,n=typeof e.value=="number"?e.value:null,l=e.min??0,g=e.max??1,h=e.step||(g-l)/100;if(n!==null)(a!=null||s!=null)&&console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(a!=null&&s!=null){if(typeof a!="string")throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof a}.`);if(typeof s!="object")throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof s}.`);i==" "&&(i=a),o=this.propReferences.push(s[a])-1,r=!0}else(a!=null&&s==null||a==null&&s==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(g-l)/2;this.imageContainer=null;var u=this._createElement({class:"p-gui__slider",textContent:i}),f=this._createElement({parent:u,el:"input",class:"p-gui__slider-ctrl",customAttributes:{type:"range",min:l,max:g,step:h,value:r?s[a]:n}}),x=this._createElement({parent:u,class:"p-gui__slider-value",textContent:String(r?s[a]:n)});f.addEventListener("input",()=>{x.textContent=f.value,r&&(s[a]=f.value),typeof t=="function"&&t(parseFloat(f.value))}),r&&Object.defineProperty(s,a,{set:b=>{this.propReferences[o]=b,f.value=b,x.textContent=String(b)},get:()=>this.propReferences[o]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",r=e.value===!0;this.imageContainer=null;let o=this._createElement({class:"p-gui__switch",onclick:a=>{let n=a.target.childNodes[1],l=!0;n.classList.contains("p-gui__switch-checkbox--active")&&(l=!1),n.classList.toggle("p-gui__switch-checkbox--active"),typeof t=="function"&&t(l)},textContent:i}),s=r?" p-gui__switch-checkbox--active":"";this._createElement({parent:o,class:"p-gui__switch-checkbox"+s})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"?e.name:" ",r=Array.isArray(e.values)?e.values:null,o=(()=>{if(!r)return null;if(typeof e.value=="string")return r.indexOf(e.value);if(typeof e.value=="number")return e.value})();console.log("->",o),t=typeof t=="function"?t:null,this.imageContainer=null;let s=this._createElement({class:"p-gui__list",textContent:i}),a=this._createElement({parent:s,el:"select",class:"p-gui__list-dropdown",onchange:n=>{t&&t(n.target.value)}});r&&r.forEach((n,l)=>{let g=this._createElement({parent:a,el:"option",customAttributes:{value:n},textContent:n});o==l&&g.setAttribute("selected","")})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ";const r=e.x.min??0,o=e.x.max??1,s=e.y.min??0,a=e.y.max??1,n=e.x.obj||e.x.object,l=e.x.prop||e.x.property,g=this.propReferences.push(n[l])-1,h=e.y.obj||e.y.object,u=e.y.prop||e.y.property,f=this.propReferences.push(h[u])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const x=this._createElement({class:"p-gui__vector2",textContent:i}),b=this._createElement({parent:x,class:"p-gui__vector-value",textContent:n[l]+", "+h[u]}),p=this._createElement({parent:x,el:"div",class:"p-gui__vector2-area",onclick:d=>{n[l]=parseFloat(this._mapLinear(d.offsetX,0,p.clientWidth,r,o).toFixed(2)),h[u]=parseFloat(this._mapLinear(d.offsetY,0,p.clientHeight,a,s).toFixed(2)),t&&t(n[l],n[u])}});let y=!1;p.addEventListener("pointerdown",d=>{y=!0}),p.addEventListener("pointerup",()=>{y=!1}),p.addEventListener("pointermove",d=>{y&&(n[l]=parseFloat(this._mapLinear(d.offsetX,0,p.clientWidth,r,o).toFixed(2)),h[u]=parseFloat(this._mapLinear(d.offsetY,0,p.clientHeight,a,s).toFixed(2)),t&&t(n[l],n[u]))}),this._createElement({parent:p,class:"p-gui__vector2-line p-gui__vector2-line-x"}),this._createElement({parent:p,class:"p-gui__vector2-line p-gui__vector2-line-y"});const m=this._createElement({parent:p,class:"p-gui__vector2-dot"});m.style.left=this._mapLinear(n[l],r,o,0,p.clientWidth)+"px",m.style.top=this._mapLinear(h[u],s,a,p.clientHeight,0)+"px",Object.defineProperty(n,l,{set:d=>{this.propReferences[g]=d,m.style.left=this._mapLinear(d,r,o,0,p.clientWidth)+"px",b.textContent=String(d)+", "+h[u]},get:()=>this.propReferences[g]}),Object.defineProperty(h,u,{set:d=>{this.propReferences[f]=d,m.style.top=this._mapLinear(d,s,a,p.clientHeight,0)+"px",b.textContent=n[l]+", "+String(d)},get:()=>this.propReferences[f]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",r;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}".`):r=e.value),r||(r="#000000");const o=this._createElement({el:"div",class:"p-gui__color",textContent:i}),s=this._createElement({parent:o,el:"input",class:"p-gui__color-picker",type:"color",value:r});typeof t=="function"&&s.addEventListener("input",()=>{t(s.value)})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.name||"",r=e.color||null,o=e.maxHeight||null;this.imageContainer=null;let s="p-gui__folder";this.folders.length==0&&(s+=" p-gui__folder--first"),t&&(s+=" p-gui__folder--closed");let a=r?`background-color: ${r};`:"";a+=o?`max-height: ${o}px;`:"";let n=this._createElement({class:s,inline:a});this._createElement({innerHTML:`<span class="p-gui__folder-arrow"></span>${i}`,class:"p-gui__folder-header",onclick:function(){this.parentNode.classList.toggle("p-gui__folder--closed")},parent:n});let l=new c({isFolder:!0,folderOptions:{wrapper:n}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",r);function t(o){o.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=o.clientX,e.position.prevY=o.clientY,document.addEventListener("pointermove",i)}function i(o){o.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+o.clientX-e.position.prevX,e.position.y=e.position.initY+o.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function r(o){document.removeEventListener("pointermove",i)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,i,r,o){return r+(e-t)*(o-r)/(i-t)}}return c});
|
|
416
|
+
}`)}_folderConstructor(e){this.wrapper=e.wrapper}_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 i=0;i<t.length&&!(parseInt(t[i].id.replace("p-gui-",""))>this.instanceId);i++)this.screenCorner.y==t[i].dataset.cornerY&&(this.screenCorner.x=="left"&&t[i].dataset.cornerX=="left"?this.xOffset+=t[i].offsetWidth:this.screenCorner.x=="right"&&t[i].dataset.cornerX=="right"&&(this.xOffset-=t[i].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)`}_createElement(e){e.el=e.el||"div";var t=document.createElement(e.el);if(e.id&&(t.id=e.id),e.class&&(t.className=e.class),e.inline&&(t.style=e.inline),e.href&&(t.href=e.href),e.onclick&&(t.onclick=e.onclick),e.onchange&&(t.onchange=e.onchange),e.textContent&&(t.textContent=e.textContent),e.innerHTML&&(t.innerHTML=e.innerHTML),e.type&&(t.type=e.type),e.value&&(t.value=e.value),e.customAttributes)for(var i in e.customAttributes)t.setAttribute(i,e.customAttributes[i]);return e.parent=e.parent?e.parent:this.wrapper,e.parent.append(t),t}_addStyles(e){this.stylesheet.innerHTML+=e}_addWrapper(){this.wrapper=this._createElement({parent:this.container,id:"p-gui-"+this.instanceId,class:"p-gui"}),this.header=this._createElement({parent:this.wrapper,class:"p-gui__header",textContent:this.name,inline:`${this.backgroundColor?"border-color: "+this.backgroundColor+";":""}`}),this._createElement({parent:this.header,class:"p-gui__header-close",onclick:this.toggleClose.bind(this)})}button(e,t){let i="";typeof e!="string"?typeof e=="object"&&(e!=null&&e.hasOwnProperty("name"))?i=e.name==""?" ":e.name:i=" ":i=e==""?" ":e,this.imageContainer=null,typeof t!="function"&&(t=()=>{});const r=this._createElement({class:"p-gui__button",textContent:i,onclick:t});typeof e.color=="string"&&(r.style.setProperty("--color-accent",e.color),r.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 i;if(typeof e.path=="string")i=e.path;else throw typeof e.path==null?Error("[GUI] image() path must be provided."):Error("[GUI] image() path must be a string.");let r=i.replace(/^.*[\\\/]/,""),o;e.name==null?o=r:o=typeof e.name=="string"&&e.name||" ";const s=e.selected===!0,a=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=this._createElement({class:"p-gui__image-container"}));var l=this._createElement({class:"p-gui__image",inline:"background-image: url("+i+"); "+n,parent:this.imageContainer});s&&a&&l.classList.add("p-gui__image--selected"),this._createElement({parent:l,class:"p-gui__image-text",textContent:o}),typeof t=="function"&&(l.onclick=()=>{let g=this.imageContainer.querySelectorAll(".p-gui__image--selected");for(let h=0;h<g.length;h++)g[h].classList.remove("p-gui__image--selected");a&&l.classList.add("p-gui__image--selected"),t({path:i,text:o})})}slider(e={},t){if(typeof e!="object")throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",r=!1,o=null,s=e.obj||e.object,a=e.prop||e.property,n=typeof e.value=="number"?e.value:null,l=e.min??0,g=e.max??1,h=e.step||(g-l)/100;if(n!==null)(a!=null||s!=null)&&console.warn('[GUI] slider() "obj" and "property" parameters are ignored when a "value" parameter is used.');else if(a!=null&&s!=null){if(typeof a!="string")throw Error(`[GUI] slider() "prop" (or "property") parameter must be an string. Received: ${typeof a}.`);if(typeof s!="object")throw Error(`[GUI] slider() "obj" (or "object") parameter must be an object. Received: ${typeof s}.`);i==" "&&(i=a),o=this.propReferences.push(s[a])-1,r=!0}else(a!=null&&s==null||a==null&&s==null)&&console.warn('[GUI] slider() "obj" and "prop" parameters must be used together.'),n=(g-l)/2;this.imageContainer=null;var u=this._createElement({class:"p-gui__slider",textContent:i}),f=this._createElement({parent:u,el:"input",class:"p-gui__slider-ctrl",customAttributes:{type:"range",min:l,max:g,step:h,value:r?s[a]:n}}),x=this._createElement({parent:u,class:"p-gui__slider-value",textContent:String(r?s[a]:n)});f.addEventListener("input",()=>{x.textContent=f.value,r&&(s[a]=f.value),typeof t=="function"&&t(parseFloat(f.value))}),r&&Object.defineProperty(s,a,{set:b=>{this.propReferences[o]=b,f.value=b,x.textContent=String(b)},get:()=>this.propReferences[o]})}toggle(e={},t){if(typeof e!="object")throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",r=e.value===!0;this.imageContainer=null;let o=this._createElement({class:"p-gui__switch",onclick:a=>{let n=a.target.childNodes[1],l=!0;n.classList.contains("p-gui__switch-checkbox--active")&&(l=!1),n.classList.toggle("p-gui__switch-checkbox--active"),typeof t=="function"&&t(l)},textContent:i}),s=r?" p-gui__switch-checkbox--active":"";this._createElement({parent:o,class:"p-gui__switch-checkbox"+s})}list(e={},t){if(typeof e!="object")throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"?e.name:" ",r=Array.isArray(e.values)?e.values:null,o=(()=>{if(!r)return null;if(typeof e.value=="string")return r.indexOf(e.value);if(typeof e.value=="number")return e.value})();t=typeof t=="function"?t:null,this.imageContainer=null;let s=this._createElement({class:"p-gui__list",textContent:i}),a=this._createElement({parent:s,el:"select",class:"p-gui__list-dropdown",onchange:n=>{t&&t(n.target.value)}});r&&r.forEach((n,l)=>{let g=this._createElement({parent:a,el:"option",customAttributes:{value:n},textContent:n});o==l&&g.setAttribute("selected","")})}options(e,t){if(typeof e!="object")throw Error(`[GUI] options() first parameter must be an object. Received: ${typeof e}.`);this.list(e,t)}vector2(e={},t){if(typeof e!="object")throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ";const r=e.x.min??0,o=e.x.max??1,s=e.y.min??0,a=e.y.max??1,n=e.x.obj||e.x.object,l=e.x.prop||e.x.property,g=this.propReferences.push(n[l])-1,h=e.y.obj||e.y.object,u=e.y.prop||e.y.property,f=this.propReferences.push(h[u])-1;t=typeof t=="function"?t:null,this.imageContainer=null;const x=this._createElement({class:"p-gui__vector2",textContent:i}),b=this._createElement({parent:x,class:"p-gui__vector-value",textContent:n[l]+", "+h[u]}),p=this._createElement({parent:x,el:"div",class:"p-gui__vector2-area",onclick:d=>{n[l]=parseFloat(this._mapLinear(d.offsetX,0,p.clientWidth,r,o).toFixed(2)),h[u]=parseFloat(this._mapLinear(d.offsetY,0,p.clientHeight,a,s).toFixed(2)),t&&t(n[l],n[u])}});let y=!1;p.addEventListener("pointerdown",d=>{y=!0}),p.addEventListener("pointerup",()=>{y=!1}),p.addEventListener("pointermove",d=>{y&&(n[l]=parseFloat(this._mapLinear(d.offsetX,0,p.clientWidth,r,o).toFixed(2)),h[u]=parseFloat(this._mapLinear(d.offsetY,0,p.clientHeight,a,s).toFixed(2)),t&&t(n[l],n[u]))}),this._createElement({parent:p,class:"p-gui__vector2-line p-gui__vector2-line-x"}),this._createElement({parent:p,class:"p-gui__vector2-line p-gui__vector2-line-y"});const m=this._createElement({parent:p,class:"p-gui__vector2-dot"});m.style.left=this._mapLinear(n[l],r,o,0,p.clientWidth)+"px",m.style.top=this._mapLinear(h[u],s,a,p.clientHeight,0)+"px",Object.defineProperty(n,l,{set:d=>{this.propReferences[g]=d,m.style.left=this._mapLinear(d,r,o,0,p.clientWidth)+"px",b.textContent=String(d)+", "+h[u]},get:()=>this.propReferences[g]}),Object.defineProperty(h,u,{set:d=>{this.propReferences[f]=d,m.style.top=this._mapLinear(d,s,a,p.clientHeight,0)+"px",b.textContent=n[l]+", "+String(d)},get:()=>this.propReferences[f]})}color(e={},t){if(typeof e!="object")throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof e}.`);let i=typeof e.name=="string"&&e.name||" ",r;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}".`):r=e.value),r||(r="#000000");const o=this._createElement({el:"div",class:"p-gui__color",textContent:i}),s=this._createElement({parent:o,el:"input",class:"p-gui__color-picker",type:"color",value:r});typeof t=="function"&&s.addEventListener("input",()=>{t(s.value)})}folder(e={}){let t=typeof e.closed=="boolean"?e.closed:!1,i=e.name||"",r=e.color||null,o=e.maxHeight||null;this.imageContainer=null;let s="p-gui__folder";this.folders.length==0&&(s+=" p-gui__folder--first"),t&&(s+=" p-gui__folder--closed");let a=r?`background-color: ${r};`:"";a+=o?`max-height: ${o}px;`:"";let n=this._createElement({class:s,inline:a});this._createElement({innerHTML:`<span class="p-gui__folder-arrow"></span>${i}`,class:"p-gui__folder-header",onclick:function(){this.parentNode.classList.toggle("p-gui__folder--closed")},parent:n});let l=new c({isFolder:!0,folderOptions:{wrapper:n}});return this.folders.push(l),l}_makeDraggable(){var e=this;this.header.addEventListener("pointerdown",t),this.header.addEventListener("pointerup",r);function t(o){o.preventDefault(),e.position.initX=e.position.x,e.position.initY=e.position.y,e.position.prevX=o.clientX,e.position.prevY=o.clientY,document.addEventListener("pointermove",i)}function i(o){o.preventDefault(),e.hasBeenDragged||(e.hasBeenDragged=!0,e.wrapper.setAttribute("data-dragged","true")),e.position.x=e.position.initX+o.clientX-e.position.prevX,e.position.y=e.position.initY+o.clientY-e.position.prevY,e.wrapper.style.transform="translate3d("+e.position.x+"px,"+e.position.y+"px,0)"}function r(o){document.removeEventListener("pointermove",i)}}toggleClose(){this.closed=!this.closed,this.wrapper.classList.toggle("p-gui--collapsed")}kill(){this.wrapper.remove()}_mapLinear(e,t,i,r,o){return r+(e-t)*(o-r)/(i-t)}}return c});
|
package/package.json
CHANGED