lexgui 0.1.29 → 0.1.31

package/build/lexgui.css

@@ -91,6 +91,11 @@ body.noevents * {
   display: none !important;
 }
 
+.hiddenOpacity {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
 ::-webkit-file-upload-button {
  display: none;
 }
@@ -102,9 +107,11 @@ body.noevents * {
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   z-index: 99;
+  opacity: 1;
+  transition: opacity 0.2s ease-in;
 }
 
 #lexroot {
@@ -1295,7 +1302,7 @@ input[type="range"] {
   height: 12px;
   border: 1px solid #c9c7de;
   border-radius: 6px;
-  background: var(--global-selected-dark);
+  background: var(--global-selected);
   box-shadow: 0px 0px 6px #111;
   cursor: pointer;
 }
@@ -1557,11 +1564,11 @@ input[type="range"] {
   margin-top: 2px;
 }
 
-.lexprogressbar.editable:hover{
+.lexprogressbar.editable:hover {
   cursor: grab;
 }
 
-.lexprogressbar.editable:active{
+.lexprogressbar.editable:active {
   cursor: grabbing;
 }
 
@@ -1573,10 +1580,10 @@ meter::-webkit-meter-bar {
 
 /* (optimum) */
 meter:-moz-meter-optimum::-moz-meter-bar {
-  background: var(--global-selected-light);
+  background: var(--global-selected);
 }
 meter::-webkit-meter-optimum-value {
-  background: var(--global-selected-light);
+  background: var(--global-selected);
 }
 
 /* (sub-optimum)*/
@@ -1730,7 +1737,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenu .lexcontextmenuentry:hover {
-  background-color: var(--global-selected-dark);
+  background-color: var(--global-selected);
   color: #f5f5f5;
 }
 
@@ -1902,7 +1909,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
-  background-color: var(--global-selected-dark);
+  background-color: var(--global-selected);
   color: #f5f5f5;
 }
 
@@ -1926,16 +1933,35 @@ meter::-webkit-meter-even-less-good-value {
 /* Side Bar */
 
 .lexsidebar {
-  
+  text-align: center;
 }
 
 .lexsidebar .lexsidebarentry {
   width: 64px;
   height: 64px;
-  padding-left: 7.5px;
   margin-top: -6px;
 }
 
+.lexsidebar .lexsidebarentry .lexsidebarentrydesc {
+  position: absolute;
+  margin-left: 12px;
+  font-weight: 600;
+  margin-top: 13px;
+  background-color: #afafaf;
+  color: var(--global-color-primary);
+  font-size: 16px;
+  border-radius: 6px;
+  text-align: center;
+  opacity: 0;
+  z-index: 102;
+  padding: 2px 6px;
+  transition: opacity ease-in 0.1s;
+}
+
+.lexsidebar .lexsidebarentry button:hover + .lexsidebarentrydesc {
+  opacity: 1;
+}
+
 .lexsidebar .lexsidebarentry:first-child {
   padding-top: 16px;
 }
@@ -1949,6 +1975,7 @@ meter::-webkit-meter-even-less-good-value {
   border-radius: 10px;
   border: 0px solid var(--global-color-transparent);
   transition: border 0.1s ease-in-out;
+  cursor: pointer;
 }
 
 .lexsidebar .lexsidebarentry button:hover {
@@ -2152,6 +2179,12 @@ meter::-webkit-meter-even-less-good-value {
   line-height: 16px;
 }
 
+.lexareatabs .lexareatab.thumb {
+  position: absolute;
+  background-color: var(--global-selected);
+  z-index: 0;
+}
+
 .lexareatabs.row {
   width: 100%;
 }
@@ -2170,31 +2203,35 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexareatabs.fit {
-  background-color: var(--global-color-secondary);
   width: calc(100% - 14px);
 }
 
 .lexareatabs.fit .lexareatab {
   flex: 100%;
   border-radius: 10px;
+  z-index: 1;
 }
 
 .lexareatabs .lexareatab:active {
   color: #b7b7cba4;
 }
 
+.lexareatabs.fit .lexareatab.selected {
+  color: #f8f8f8;
+}
+
 .lexareatabs.row .lexareatab.selected {
-  color: var(--global-text);
+  color: var(--global-text-primary);
   background-color: var(--global-selected);
 }
 
-.lexareatabs.fit .lexareatab.selected, .lexareatabs.folding .lexareatab.selected {
+.lexareatabs.folding .lexareatab.selected {
   color: var(--global-text-primary);
   background-color: #555556;
 }
 
 .lexareatabs .lexareatab:hover {
-  color: white;
+  color: #f8f8f8;
 }
 
 .lexareatabscontainer {
@@ -2233,33 +2270,36 @@ meter::-webkit-meter-even-less-good-value {
 
 .lexcard img {
   width: 100%;
-  height: 164px;
+  height: 128px;
   object-fit: cover;
   border-radius: 6px;
-  outline: 3px solid var(--global-text-secondary);
+  outline: 3px solid var(--global-text-terciary);
 }
 
 .lexcard:hover a {
-  color: var(--global-selected-light);
+  color: var(--global-selected);
 }
 
 .lexcard:hover img {
-  outline: 3px solid var(--global-selected-light);
+  outline: 3px solid var(--global-selected);
 }
 
 .lexcard span {
-  width: calc(100% - 12px);
+  width: calc(100% - 18px);
   display: flex;
-  background-color: rgba(15, 16, 19, 0.9);
+  background-color: rgba(15, 16, 19, 0.8);
   align-items: center;
   height: 16px;
   position: absolute;
   top: 0;
-  padding: 6px;
+  left: 0;
+  padding: 8px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   font-weight: bold;
-  font-size: 1.2em;
+  font-size: 1.3em;
+  font-family: var(--global-title-font);
+  text-transform: uppercase;
 }
 
 .lexcard span a {
@@ -2268,7 +2308,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcard span a:hover {
-  color: var(--global-selected-light);
+  color: var(--global-selected);
 }
 
 /* Layers Widget */
@@ -2914,7 +2954,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .codetabsarea {
-  height: calc( 100% - 60px ) !important;
+  height: calc( 100% - 72px ) !important;
   background-color: var(--global-branch-darker);
   overflow: scroll;
 }
@@ -3366,7 +3406,7 @@ pre .line-gutter {
 }
 
 .lexgraphnode.variables {
-  background: linear-gradient(15deg, #f1e643da 10%, #e78b8bda);
+  background: linear-gradient(15deg, #f14343da 10%, #e7b88bda);
   background-color: unset; background-origin: border-box;
 }
 
@@ -3375,6 +3415,10 @@ pre .line-gutter {
   background-color: unset; background-origin: border-box;
 }
 
+.lexgraphnode.function {
+  background: linear-gradient(15deg, #d19b06da 10%, #ff7b00da);
+  background-color: unset; background-origin: border-box;
+}
 
 .lexgraphnode.selected {
   border: 3px solid var(--global-selected-dark);
@@ -3590,19 +3634,9 @@ pre .line-gutter {
   border-right: 2px solid #4b4b4ba8;
 }
 
-/* .lexgraphnodeproperties .lexwidget .numberbox, .lexgraphnodeproperties .lexwidget .lextext {
-  margin: unset;
-  background-color: unset;
-}
-
-.lexgraphnodeproperties .lexwidget.nobranch {
-  padding: 0px;
-}
-
-.lexgraphnodeproperties .lexwidget input {
-  font-size: 14px;
-  font-weight: 800;
-  color: var(--global-color-primary); 
+.grapharea .graph-title button {
+  font-size: 16px;
   font-family: var(--global-title-font);
-  max-width: 64px;
-} */
+  font-weight: 600;
+  color: var(--global-text);
+}

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.29",
+        version: "0.1.31",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -421,33 +421,38 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     /**
      * @method init
-     * @param {*} options 
+     * @param {Object} options 
      * container: Root location for the gui (default is the document body)
+     * id: Id of the main area
      * skip_default_area: Skip creation of main area
      */
 
-    function init(options = {})
+    function init( options = { } )
     {
-        if(this.ready)
+        if( this.ready )
             return this.main_area;
 
-        // LexGUI root 
-		var root = document.createElement("div");
-		root.id = "lexroot";
+        // LexGUI root
+
+        var root = document.createElement( 'div' );
+        root.id = "lexroot";
         root.tabIndex = -1;
         
-        var modal = document.createElement("div");
+        var modal = document.createElement( 'div' );
         modal.id = "modal";
 
         this.modal = modal;
         this.root = root;
         this.container = document.body;
 
-        this.modal.toggleAttribute('hidden', true);
-        this.modal.toggle = function(force) { this.toggleAttribute('hidden', force); };
+        // this.modal.toggleAttribute( 'hidden', true );
+        // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
 
-        if(options.container)
-            this.container = document.getElementById(options.container);
+        this.modal.classList.add( 'hiddenOpacity' );
+        this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };  
+
+        if( options.container )
+            this.container = document.getElementById( options.container );
             
         this.global_search = create_global_searchbar( this.container );
 
@@ -455,17 +460,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         this.container.appendChild( root );
 
         // Disable drag icon
-        root.addEventListener("dragover", function(e) {
+        root.addEventListener( 'dragover', function( e ) {
             e.preventDefault();
         }, false );
 
         // CSS fontawesome
-        var head = document.getElementsByTagName('HEAD')[0];
-        var link = document.createElement('link');
+        var head = document.getElementsByTagName( 'HEAD' )[ 0 ];
+        var link = document.createElement( 'link' );
         link.rel = 'stylesheet';
         link.type = 'text/css';
-        link.href = 'https://use.fontawesome.com/releases/v6.4.2/css/all.css';
-        head.appendChild(link);
+        link.href = 'https://use.fontawesome.com/releases/v6.5.1/css/all.css';
+        head.appendChild( link );
 
         // Global vars
         this.DEFAULT_NAME_WIDTH     = "30%";
@@ -473,10 +478,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         this.OPEN_CONTEXTMENU_ENTRY = 'click';
 
         this.ready = true;
-        this.menubars = [];
+        this.menubars = [ ];
 
-        if(!options.skip_default_area)
-            this.main_area = new Area( {id: options.id ?? "mainarea"} );
+        if( !options.skip_default_area )
+            this.main_area = new Area( { id: options.id ?? 'mainarea' } );
 
         return this.main_area;
     }
@@ -1307,7 +1312,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     selectable: b.selectable,
                     selected: b.selected,
                     icon: b.icon,
-                    img: b.img
+                    img: b.img,
+                    className: b.class
                 };
 
                 if( group )
@@ -1517,7 +1523,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             let container = document.createElement('div');
             container.className = "lexareatabs " + (options.fit ? "fit" : "row");
-            
+
             const folding = options.folding ?? false;
             if(folding) container.classList.add("folding");
 
@@ -1552,7 +1558,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 // Show on drop
                 el.click();
-                
+
                 // Store info
                 that.tabs[ el.dataset["name"] ] = content;
             });
@@ -1569,6 +1575,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.tabs = {};
             this.tabDOMs = {};
 
+            if( options.fit )
+            {
+                // Create movable element
+                let mEl = document.createElement('span');
+                mEl.className = "lexareatab thumb";
+                this.thumb = mEl;
+                this.root.appendChild( mEl );
+
+                const resizeObserver = new ResizeObserver((entries) => {
+                    const tabEl = this.thumb.item;
+                    if( !tabEl ) return;
+                    var transition = this.thumb.style.transition;
+                    this.thumb.style.transition = "none";
+                    this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                    this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                    this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                    flushCss( this.thumb );
+                    this.thumb.style.transition = transition;
+                });
+
+                resizeObserver.observe( this.area.root );
+            }
+
             // debug
             if(folding) 
             {
@@ -1666,6 +1695,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if(options.onSelect)
                     options.onSelect(e, tabEl.dataset.name);
+
+                if( this.thumb )
+                {
+                    this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                    this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                    this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                    this.thumb.item = tabEl;
+                }
             });
 
             tabEl.addEventListener("contextmenu", e => {
@@ -1694,13 +1731,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             });
             
             // Attach content
+            tabEl.childIndex = ( this.root.childElementCount - 1 );
             this.root.appendChild( tabEl );
             this.area.attach( contentEl );
             this.tabDOMs[ name ] = tabEl;
             this.tabs[ name ] = content;
 
             setTimeout( () => {
-                if( options.onCreate ) options.onCreate.call(this, this.area.root.getBoundingClientRect());
+
+                if( options.onCreate ) {
+                    options.onCreate.call(this, this.area.root.getBoundingClientRect());
+                }
+
+                if( isSelected && this.thumb )
+                {
+                    this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                    this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                    this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                    this.thumb.item = tabEl;
+                }
+
             }, 10 );
         }
 
@@ -2195,6 +2245,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {*} options:
          * callback: Function to call on each item
          * bottom: Bool to set item at the bottom as helper button (not selectable)
+         * className: Add class to the entry DOM element
          */
 
         add( key, options = {} ) {
@@ -2211,14 +2262,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             let entry = document.createElement( 'div' );
-            entry.className = "lexsidebarentry";
+            entry.className = "lexsidebarentry " + ( options.className ?? "" );
             entry.id = pKey;
-            entry.title = key;
 
             if( options.bottom )
             {
                 this.footer.appendChild( entry );
-            }else
+            }
+            else
             {
                 this.root.appendChild( entry );
             }
@@ -2230,6 +2281,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
             entry.appendChild( button );
 
+            let desc = document.createElement( 'span' );
+            desc.className = 'lexsidebarentrydesc';
+            desc.innerHTML = key;
+            entry.appendChild( desc );
+
             entry.addEventListener("click", () => {
 
                 const f = options.callback;
@@ -2245,6 +2301,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
         }
+
+        /**
+         * @method select
+         * @param {String} name Element name to select
+         */
+
+        select( name ) {
+
+            let pKey = name.replace( /\s/g, '' ).replaceAll( '.', '' );
+
+            const entry = this.items.find( v => v.name === pKey );
+
+            if( !entry )
+                return;
+
+            entry.domEl.click();
+        }
     };
 
     LX.SideBar = SideBar;
@@ -3137,7 +3210,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             if( type != Widget.TITLE )
             {
-                element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
+                element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE || ( type == Widget.BUTTON && !name ) ? 10 : 20) + "px)";
                 if( options.width ) {
                     element.style.width = element.style.minWidth = options.width;
                 }
@@ -4397,7 +4470,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 buttonName = "Add item";
                 buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 3px; margin-top: 2px;'></a>";
                 this.addButton(null, buttonName, (v, event) => {
-                    values.push( "" );
+                    values.push( options.innerValues ? options.innerValues[ 0 ] : "" );
                     updateItems();
                     this._trigger( new IEvent(name, values, event), callback );
                 }, { buttonClass: 'array' });
@@ -4843,6 +4916,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.step = options.step ?? "any";
             vecinput.type = "number";
             vecinput.id = "number_"+simple_guidGenerator();
+
+            if( value.constructor == Number )
+            {
+                value = clamp(value, +vecinput.min, +vecinput.max);
+                value = options.precision ? round(value, options.precision) : value;
+            }
+
             vecinput.value = vecinput.iValue = value;
             box.appendChild(vecinput);
 
@@ -4969,6 +5049,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             let widget = this.create_widget(name, Widget.VECTOR, options);
+
             widget.onGetValue = () => {
                 let inputs = element.querySelectorAll("input");
                 let value = [];
@@ -5021,6 +5102,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 vecinput.type = "number";
                 vecinput.id = "vec"+num_components+"_"+simple_guidGenerator();
                 vecinput.idx = i;
+
+                if( value[i].constructor == Number )
+                {
+                    value[i] = clamp(value[i], +vecinput.min, +vecinput.max);
+                    value[i] = options.precision ? round(value[i], options.precision) : value[i];
+                }
+
                 vecinput.value = vecinput.iValue = value[i];
 
                 let drag_icon = document.createElement('a');
@@ -5054,13 +5142,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }, {passive:false});
 
                 vecinput.addEventListener("change", e => {
-                    if(isNaN(e.target.value))
+
+                    if( isNaN( e.target.value ) )
                         return;
-                    let val = e.target.value = clamp(e.target.value, vecinput.min, vecinput.max);
-        
+
+                    console.log(e.target.value);
+                    let val = e.target.value = clamp(e.target.value, +vecinput.min, +vecinput.max);
+                    val = options.precision ? round(val, options.precision) : val;
+                    console.log(val);
+
                     // Reset button (default value)
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = val != vecinput.iValue ? "block": "none";
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
 
                     if( lock_icon.locked )
                     {
@@ -5069,6 +5162,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             value[v.idx] = val;
                         }
                     } else {
+                        vecinput.value = val;
                         value[e.target.idx] = val;
                     }
 
@@ -5271,6 +5365,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {Function} callback Callback function on change
          * @param {*} options:
          * local: Ask for local file
+         * read: Return the file itself (False) or the contents (True)
          * type: type to read as [text (Default), buffer, bin, url]
          */
 
@@ -7553,6 +7648,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         compareThresholdRange( v0, v1, t0, t1 ) { return v0 >= t0 && v0 <= t1 || v1 >= t0 && v1 <= t1 || v0 <= t0 && v1 >= t1},
         clamp (num, min, max) { return Math.min(Math.max(num, min), max) },
         uidGenerator: simple_guidGenerator,
+        deleteElement( el ) { if( el ) el.remove(); },
+        flushCss(element) {
+            // By reading the offsetHeight property, we are forcing
+            // the browser to flush the pending CSS changes (which it
+            // does to ensure the value obtained is accurate).
+            element.offsetHeight;
+        },
         getControlPoints( x0, y0, x1, y1, x2, y2 ,t ) {
             
             //  x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment