lexgui 0.1.26 → 0.1.28

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.26",
+        version: "0.1.28",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -142,24 +142,35 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         set ( x, y ) { this.x = x; this.y = y; }
         add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
         sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
-        mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2(v) } v = v0.set( this.x * v.x, this.y * v.y ); return v0; }
-        div ( v, v0 = new vec2() ) { v0.set( this.x / v.x, this.y / v.y ); return v0; }
+        mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
+        div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
     };
 
     LX.vec2 = vec2;
 
     // Other utils
 
-    function makeDraggable( domEl, targetClass ) {
+    function makeDraggable( domEl, options = { } ) {
 
         let offsetX;
         let offsetY;
         let currentTarget = null;
+        let targetClass = options.targetClass;
+
+        const moveFunc = (e) => {
+            if(!currentTarget) return;
+            let left = e.clientX - offsetX;
+            let top = e.clientY - offsetY;
+            if(left > 3 && (left + domEl.offsetWidth + 6) <= window.innerWidth)
+                domEl.style.left = left + 'px';
+            if(top > 3 && (top + domEl.offsetHeight + 6) <= window.innerHeight)
+                domEl.style.top = top + 'px';
+        };
+
+        let onMove = options.onMove ?? moveFunc;
     
         domEl.setAttribute('draggable', true);
         domEl.addEventListener("mousedown", function(e) {
-            // e.stopPropagation();
-            // e.stopImmediatePropagation();
             currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
         });
     
@@ -176,23 +187,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             const rect = e.target.getBoundingClientRect();
             offsetX = e.clientX - rect.x;
             offsetY = e.clientY - rect.y;
-            document.addEventListener("mousemove", moveFunc );
+            document.addEventListener("mousemove", onMove );
         }, false);
         
-        const moveFunc = (e) => {
-            if(!currentTarget) return;
-            let left = e.clientX - offsetX;
-            let top = e.clientY - offsetY;
-            if(left > 3 && (left + domEl.offsetWidth + 6) <= window.innerWidth)
-                domEl.style.left = left + 'px';
-            if(top > 3 && (top + domEl.offsetHeight + 6) <= window.innerHeight)
-                domEl.style.top = top + 'px';
-        };
-    
         document.addEventListener('mouseup', () => {
             if(currentTarget) {
                 currentTarget = null;
-                document.removeEventListener("mousemove", moveFunc );
+                document.removeEventListener("mousemove", onMove );
             }
         });
     }
@@ -333,15 +334,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         const propagate_add = ( item, filter, path ) => {
 
-            const key = Object.keys(item)[0];
-            if( (path + key).toLowerCase().includes(filter) ) {
-                if(item.callback)
-                    add_element(key, item.callback, path, item);
+            const key = Object.keys( item )[ 0 ];
+            let name = item.name ?? path + key;
+            if( name.toLowerCase().includes( filter ) ) {
+                if( item.callback )
+                    add_element( item.name ?? key, item.callback, path, item );
             }
 
+            // is sidebar..
+            if( item.name )
+            return;
+
             path += key + " > ";
 
-            for( let c of item[key] )
+            for( let c of item[ key ] )
                 propagate_add( c, filter, path );
         };
 
@@ -351,7 +357,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             for( let m of LX.menubars )
                 for( let i of m.items ) {
-                    propagate_add( i, filter, "");
+                    propagate_add( i, filter, "" );
                 }
 
             if( LX.has('CodeEditor') )
@@ -869,7 +875,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // Create areas
-            var area1 = new Area({ no_append: true, className: "split" + (options.menubar ? "" : " origin") });
+            var area1 = new Area({ no_append: true, className: "split" + (options.menubar || options.sidebar ? "" : " origin") });
             var area2 = new Area({ no_append: true, className: "split"});
 
             area1.parentArea = this;
@@ -1190,16 +1196,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         addMenubar( callback, options = {} ) {
             
             let menubar = new Menubar(options);
-            LX.menubars.push( menubar );
 
             if(callback) callback( menubar );
 
-            // Hack to get content height
-            // let d = document.createElement('div');
-            // d.appendChild(menubar.root);
-            // document.body.appendChild(d);
-            // const height = menubar.root.clientHeight;
-            // d.remove();
+            LX.menubars.push( menubar );
+
             const height = 48; // pixels
 
             const [bar, content] = this.split({type: 'vertical', sizes: [height, null], resize: false, menubar: true});
@@ -1209,6 +1210,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return menubar;
         }
 
+        /**
+         * @method addSidebar
+         * @param {Function} callback Function to fill the sidebar
+         */
+
+        addSidebar( callback, options = {} ) {
+
+            let sidebar = new SideBar( options );
+
+            if( callback ) callback( sidebar );
+
+            LX.menubars.push( sidebar );
+
+            const width = 64; // pixels
+
+            const [bar, content] = this.split( { type: 'horizontal', sizes: [ width, null ], resize: false, sidebar: true } );
+            bar.attach( sidebar );
+            bar.is_sidebar = true;
+            return sidebar;
+        }
+
         /**
          * @method addOverlayButtons
          * @param {Array} buttons Buttons info
@@ -1782,7 +1804,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 let entry = document.createElement('div');
                 entry.className = "lexmenuentry";
                 entry.id = pKey;
-                entry.innerText = key;
+                entry.innerHTML = "<span>" + key + "</span>";
                 if(options.position == "left") {	
                     this.root.prepend( entry );	
                 }	
@@ -1806,7 +1828,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     var rect = c.getBoundingClientRect();
                     contextmenu.style.left = (isSubMenu ? rect.width : rect.left) + "px";
                     // Entries use css to set top relative to parent
-                    contextmenu.style.top = (isSubMenu ? 0 : rect.bottom) + "px";
+                    contextmenu.style.top = (isSubMenu ? 0 : rect.bottom - 4) + "px";
                     c.appendChild( contextmenu );
 
                     contextmenu.focus();
@@ -1932,11 +1954,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         return;
                     } 
 
+                    // Manage selected
+                    this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
+                    entry.classList.add( "selected" );
+
                     this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
                     create_submenu( item, key, entry, -1 );
                 });
 
                 entry.addEventListener("mouseleave", () => {
+                    this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
                     this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
                 });
             }
@@ -2124,6 +2151,83 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.Menubar = Menubar;
 
+    /**
+     * @class SideBar
+     */
+
+    class SideBar {
+
+        constructor( options = {} )  {
+
+            this.root = document.createElement( 'div' );
+            this.root.className = "lexsidebar";
+
+            this.footer = document.createElement( 'div' );
+            this.footer.className = "lexsidebarfooter";
+            this.root.appendChild( this.footer );
+
+            this.items = [ ];
+        }
+
+        /**
+         * @method add
+         * @param {*} options:
+         * callback: Function to call on each item
+         * bottom: Bool to set item at the bottom as helper button (not selectable)
+         */
+
+        add( key, options = {} ) {
+
+            if( options.constructor == Function )
+                options = { callback: options };
+
+            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+
+            if( this.items.findIndex( (v, i) => v.key == pKey ) > -1 )
+            {
+                console.warn( `'${key}' already created in Sidebar` );
+                return;
+            }
+
+            let entry = document.createElement( 'div' );
+            entry.className = "lexsidebarentry";
+            entry.id = pKey;
+            entry.title = key;
+
+            if( options.bottom )
+            {
+                this.footer.appendChild( entry );
+            }else
+            {
+                this.root.appendChild( entry );
+            }
+
+            // Reappend footer in root
+            this.root.appendChild( this.footer );
+
+            let button = document.createElement( 'button' );
+            button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
+            entry.appendChild( button );
+
+            entry.addEventListener("click", () => {
+
+                const f = options.callback;
+                if( f ) f.call( this, key, entry );
+
+                // Manage selected
+                if( !options.bottom )
+                {
+                    this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
+                    entry.classList.add( "selected" );
+                }
+            });
+
+            this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
+        }
+    };
+
+    LX.SideBar = SideBar;
+
     /**
      * @class Widget
      */
@@ -3016,6 +3120,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( options.width ) {
                     element.style.width = element.style.minWidth = options.width;
                 }
+                if( options.maxWidth ) {
+                    element.style.maxWidth = options.maxWidth;
+                }
                 if( options.minWidth ) {
                     element.style.minWidth = options.minWidth;
                 }
@@ -3845,7 +3952,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Add dropdown widget button  
             let buttonName = value;
-            buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 6px;'></a>";
+            buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
             this.queue(container);
 
@@ -3858,7 +3965,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 let rect = event.currentTarget.getBoundingClientRect();
                 let y_pos = container.classList.contains('lexdialog') ? rect.top - 5 + rect.height : rect.y + rect.height - 5;
                 element.querySelector(".lexoptions").style.top = y_pos + 'px';
-                element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 2 + 'px';
+                element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
                 element.querySelector(".lexoptions").toggleAttribute('hidden');
                 list.focus();
             }, { buttonClass: 'array', skipInlineCount: true });
@@ -3874,24 +3981,24 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v); 
             }
 
-            //Add dropdown options container
-            let list = document.createElement('ul');
+            // Add dropdown options container
+            let list = document.createElement( 'ul' );
             list.tabIndex = -1;
             list.className = "lexoptions";
             list.hidden = true;
 
-            list.addEventListener('focusout', function(e) {
+            list.addEventListener( 'focusout', function( e ) {
                 e.stopPropagation();
                 e.stopImmediatePropagation();
-                if(e.relatedTarget === selectedOption.querySelector("button")) {
+                if(e.relatedTarget === selectedOption.querySelector( 'button' )) {
                     this.unfocus_event = true;
-                    setTimeout(() => delete this.unfocus_event, 200);
-                } else if (e.relatedTarget && e.relatedTarget.tagName == "INPUT") {
+                    setTimeout( () => delete this.unfocus_event, 200 );
+                } else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" ) {
                     return;
-                }else if (e.target.id == 'input-filter') {
+                }else if ( e.target.id == 'input-filter' ) {
                     return;
                 }
-                this.toggleAttribute('hidden', true);
+                this.toggleAttribute( 'hidden', true );
             });
 
             // Add filter options
@@ -4188,7 +4295,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Add dropdown array button
 
-            const itemNameWidth = "3%";
+            const itemNameWidth = "4%";
 
             var container = document.createElement('div');
             container.className = "lexarray";
@@ -4196,7 +4303,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             
             this.queue( container );
 
-            const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 6px;'></a>`;
+            const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>`;
 
             let buttonName = "Array (size " + values.length + ")";
             buttonName += angle_down;
@@ -4264,7 +4371,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: 6px; margin-top: 2px;'></a>";
+                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( "" );
                     updateItems();
@@ -4783,6 +4890,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 doc.addEventListener("mouseup",inner_mouseup);
                 lastY = e.pageY;
                 document.body.classList.add('nocursor');
+                document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
             }
 
@@ -4807,6 +4915,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 doc.removeEventListener("mousemove",inner_mousemove);
                 doc.removeEventListener("mouseup",inner_mouseup);
                 document.body.classList.remove('nocursor');
+                document.body.classList.remove('noevents');
                 drag_icon.classList.add('hidden');
             }
             
@@ -4953,6 +5062,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.addEventListener("mouseup",inner_mouseup);
                     lastY = e.pageY;
                     document.body.classList.add('nocursor');
+                    document.body.classList.add('noevents');
                     drag_icon.classList.remove('hidden');
                 }
 
@@ -4985,6 +5095,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.removeEventListener("mousemove",inner_mousemove);
                     doc.removeEventListener("mouseup",inner_mouseup);
                     document.body.classList.remove('nocursor');
+                    document.body.classList.remove('noevents');
                     drag_icon.classList.add('hidden');
                 }
                 
@@ -5714,8 +5825,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.root = root;
             this.title = titleDiv;
 
-            if(draggable)
-                makeDraggable( root, 'lexdialogtitle' );
+            if( draggable )
+                makeDraggable( root, { targetClass: 'lexdialogtitle' } );
 
             // Process position and size
             if(size.length && typeof(size[0]) != "string")
@@ -6131,8 +6242,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.style.minHeight = "50px";
             element.style.width = options.width || "100%";
 
-            element.bgcolor = options.bgcolor || "#15181c";
-            element.pointscolor = options.pointscolor || "#7b8ae2";
+            element.bgcolor = options.bgcolor || LX.getThemeColor("global-dark-background");
+            element.pointscolor = options.pointscolor || LX.getThemeColor("global-selected-light");
             element.linecolor = options.linecolor || "#555";
 
             element.value = value || [];