lexgui 0.1.28 → 0.1.29

package/build/lexgui.js

@@ -12,12 +12,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.28",
+        version: "0.1.29",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
     };
 
+    LX.MOUSE_LEFT_CLICK     = 0;
+    LX.MOUSE_MIDDLE_CLICK   = 1;
+    LX.MOUSE_RIGHT_CLICK    = 2;
+
     LX.MOUSE_DOUBLE_CLICK = 2;
     LX.MOUSE_TRIPLE_CLICK = 3;
 
@@ -79,27 +83,31 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.getBase64Image = getBase64Image;
 
-    function hexToRgb(string) {
-        const red = parseInt(string.substring(1, 3), 16) / 255;
-        const green = parseInt(string.substring(3, 5), 16) / 255;
-        const blue = parseInt(string.substring(5, 7), 16) / 255;
-        return [red, green, blue];
+    function hexToRgb( hexStr ) {
+        const red = parseInt( hexStr.substring( 1, 3 ), 16 ) / 255;
+        const green = parseInt( hexStr.substring( 3, 5 ), 16 ) / 255;
+        const blue = parseInt( hexStr.substring( 5, 7 ), 16 ) / 255;
+        return [ red, green, blue ];
     }
-
-    function rgbToHex(rgb) {
+    
+    LX.hexToRgb = hexToRgb;
+    
+    function rgbToHex( rgb ) {
         let hex = "#";
-        for(let c of rgb) {
-            c = Math.floor(c * 255);
-            hex += c.toString(16);
+        for( let c of rgb ) {
+            c = Math.floor( c * 255 );
+            hex += c.toString( 16 );
         }
         return hex;
     }
+    
+    LX.rgbToHex = rgbToHex;
 
     function simple_guidGenerator() {
         var S4 = function() {
            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
         };
-        return (S4()+"-"+S4());
+        return (S4()+"-"+S4()+"-"+S4());
     }
 
     // Timer that works everywhere (from litegraph.js)
@@ -144,6 +152,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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 ) } 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; }
+        abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
     };
 
     LX.vec2 = vec2;
@@ -156,46 +165,58 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         let offsetY;
         let currentTarget = null;
         let targetClass = options.targetClass;
-
-        const moveFunc = (e) => {
-            if(!currentTarget) return;
+    
+        let id = LX.UTILS.uidGenerator();
+        domEl[ 'draggable-id' ] = id;
+    
+        const defaultMoveFunc = e => {
+            if( !currentTarget ) return;
             let left = e.clientX - offsetX;
             let top = e.clientY - offsetY;
-            if(left > 3 && (left + domEl.offsetWidth + 6) <= window.innerWidth)
+            if( left > 3 && ( left + domEl.offsetWidth + 6 ) <= window.innerWidth )
                 domEl.style.left = left + 'px';
-            if(top > 3 && (top + domEl.offsetHeight + 6) <= window.innerHeight)
+            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) {
+        const customMoveFunc = e => {
+            if( !currentTarget ) return;
+            if( options.onMove )
+                options.onMove( currentTarget );
+        };
+    
+        let onMove = options.onMove ? customMoveFunc : defaultMoveFunc;
+        let onDragStart = options.onDragStart;
+    
+        domEl.setAttribute( 'draggable', true );
+        domEl.addEventListener( "mousedown", function( e ) {
             currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
-        });
+        } );
     
-        domEl.addEventListener("dragstart", function(e) {
+        domEl.addEventListener( "dragstart", function( e ) {
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
-            if(!currentTarget) return;
+            if( !currentTarget ) return;
             // Remove image when dragging
             var img = new Image();
             img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
-            e.dataTransfer.setDragImage(img, 0, 0);
+            e.dataTransfer.setDragImage( img, 0, 0 );
             e.dataTransfer.effectAllowed = "move";
             const rect = e.target.getBoundingClientRect();
             offsetX = e.clientX - rect.x;
             offsetY = e.clientY - rect.y;
-            document.addEventListener("mousemove", onMove );
-        }, false);
+            document.addEventListener( "mousemove", onMove );
+            if( onDragStart )
+                onDragStart( currentTarget, e );
+        }, false );
         
-        document.addEventListener('mouseup', () => {
-            if(currentTarget) {
+        document.addEventListener( 'mouseup', () => {
+            if( currentTarget ) {
                 currentTarget = null;
-                document.removeEventListener("mousemove", onMove );
+                document.removeEventListener( "mousemove", onMove );
             }
-        });
+        } );
     }
     
     LX.makeDraggable = makeDraggable;
@@ -3447,103 +3468,109 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addText( name, value, callback, options = {} ) {
 
-            let widget = this.create_widget(name, Widget.TEXT, options);
+            let widget = this.create_widget( name, Widget.TEXT, options );
             widget.onGetValue = () => {
                 return wValue.value;
             };
-            widget.onSetValue = (new_value) => {
-                this.disabled ? wValue.innerText = new_value : wValue.value = new_value;
-                Panel._dispatch_event(wValue, "focusout");
+            widget.onSetValue = newValue => {
+                this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
+                Panel._dispatch_event( wValue, "focusout" );
             };
-
+    
             let element = widget.domEl;
-
+    
             // Add reset functionality
-            if(widget.name && !(options.skipReset ?? false)) {
-                Panel._add_reset_property(element.domName, function() {
+            if( widget.name && !( options.skipReset ?? false ) ) {
+                Panel._add_reset_property( element.domName, function() {
                     wValue.value = wValue.iValue;
                     this.style.display = "none";
-                    Panel._dispatch_event(wValue, "focusout");
-                });
+                    Panel._dispatch_event( wValue, "focusout" );
+                } );
             }
             
             // Add widget value
-
-            let container = document.createElement('div');
-            container.className = "lextext" + (options.warning ? " lexwarning" : "");
+    
+            let container = document.createElement( 'div' );
+            container.className = "lextext" + ( options.warning ? " lexwarning" : "" );
             container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " )";
             container.style.display = "flex";
-
-            this.disabled = (options.disabled || options.warning) ?? ( options.url ? true : false );
+    
+            this.disabled = ( options.disabled || options.warning ) ?? ( options.url ? true : false );
             let wValue = null;
-
+    
             if( !this.disabled )
             {
-                wValue = document.createElement('input');
+                wValue = document.createElement( 'input' );
                 wValue.type = options.type || "";
                 wValue.value = wValue.iValue = value || "";
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
     
-                if(options.placeholder) wValue.setAttribute("placeholder", options.placeholder);
+                if( options.placeholder )
+                    wValue.setAttribute( "placeholder", options.placeholder );
     
-                var resolve = (function(val, event) {
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = (val != wValue.iValue ? "block" : "none");
-                    this._trigger( new IEvent(name, val, event), callback );
-                }).bind(this);
+                var resolve = ( function( val, event ) {
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
+                    this._trigger( new IEvent( name, val, event ), callback );
+                }).bind( this );
     
                 const trigger = options.trigger ?? 'default';
     
-                if(trigger == 'default')
+                if( trigger == 'default' )
                 {
-                    wValue.addEventListener("keyup", function(e){
+                    wValue.addEventListener( "keyup", function( e ){
                         if(e.key == 'Enter')
-                            resolve(e.target.value, e);
+                            resolve( e.target.value, e );
                     });
-                    wValue.addEventListener("focusout", function(e){
-                        resolve(e.target.value, e);
+                    wValue.addEventListener( "focusout", function( e ){
+                        resolve( e.target.value, e );
                     });
                 }
-                else if(trigger == 'input')
+                else if( trigger == 'input' )
                 {
-                    wValue.addEventListener("input", function(e){
-                        resolve(e.target.value, e);
+                    wValue.addEventListener("input", function( e ){
+                        resolve( e.target.value, e );
                     });
                 }
     
-                if(options.icon)
+                wValue.addEventListener( "mousedown", function( e ){
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
+                });
+    
+                if( options.icon )
                 {
-                    let icon = document.createElement('a');
+                    let icon = document.createElement( 'a' );
                     icon.className = "inputicon " + options.icon;
-                    container.appendChild(icon);
+                    container.appendChild( icon );
                 }
-
+    
             } else
             {
-                wValue = document.createElement(options.url ? 'a' : 'div');
-                if(options.url)
+                wValue = document.createElement( options.url ? 'a' : 'div' );
+                if( options.url )
                 {
                     wValue.href = options.url;
                     wValue.target = "_blank";
                 }
                 const icon = options.warning ? '<i class="fa-solid fa-triangle-exclamation"></i>' : '';
-                wValue.innerHTML = (icon + value) || "";
+                wValue.innerHTML = ( icon + value ) || "";
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
             }
-
-            Object.assign(wValue.style, options.style ?? {});
-
-            container.appendChild(wValue);
-            element.appendChild(container);
+    
+            Object.assign( wValue.style, options.style ?? {} );
+    
+            container.appendChild( wValue );
+            element.appendChild( container );
             
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name ) {
                 element.className += " noname";
                 container.style.width = "100%";
             }
-
+    
             return widget;
         }
 
@@ -3961,10 +3988,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     delete list.unfocus_event;
                     return;
                 }
-                let container = selectedOption.parentElement.parentElement.parentElement.parentElement; // there must be a nicer way...
-                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.top = (selectedOption.offsetTop + selectedOption.offsetHeight) + 'px';
                 element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
                 element.querySelector(".lexoptions").toggleAttribute('hidden');
                 list.focus();
@@ -4892,6 +4916,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
+                e.stopImmediatePropagation();
+                e.stopPropagation();
             }
 
             function inner_mousemove(e) {
@@ -5064,6 +5090,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     document.body.classList.add('nocursor');
                     document.body.classList.add('noevents');
                     drag_icon.classList.remove('hidden');
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
                 }
 
                 function inner_mousemove(e) {
@@ -5248,11 +5276,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addFile( name, callback, options = { } ) {
 
-            if(!name) {
-                throw("Set Widget Name!");
+            if( !name ) {
+                throw( "Set Widget Name!" );
             }
     
-            let widget = this.create_widget(name, Widget.FILE, options);
+            let widget = this.create_widget( name, Widget.FILE, options );
             let element = widget.domEl;
     
             let local = options.local ?? true;
@@ -5260,31 +5288,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let read = options.read ?? true; 
     
             // Create hidden input
-            let input = document.createElement('input');
+            let input = document.createElement( 'input' );
             input.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " - 10%)";
             input.type = 'file';
-            if(options.placeholder)
+    
+            if( options.placeholder )
                 input.placeholder = options.placeholder;
     
-            input.addEventListener('change', function(e) {
+            input.addEventListener( 'change', function( e ) {
+    
                 const files = e.target.files;
                 if( !files.length ) return;
-                if(read)
+                if( read )
                 {
+                    if( options.onBeforeRead )
+                        options.onBeforeRead();
+    
                     const reader = new FileReader();
     
-                    if(type === 'text') reader.readAsText(files[0]);
-                    else if(type === 'buffer') reader.readAsArrayBuffer(files[0]);
-                    else if(type === 'bin') reader.readAsBinaryString(files[0]);
-                    else if(type === 'url') reader.readAsDataURL(files[0]);
+                    if( type === 'text' ) reader.readAsText( files[ 0 ] );
+                    else if( type === 'buffer' ) reader.readAsArrayBuffer( files[ 0 ] );
+                    else if( type === 'bin' ) reader.readAsBinaryString( files[ 0 ] );
+                    else if( type === 'url' ) reader.readAsDataURL( files[ 0 ] );
     
-                    reader.onload = (e) => { callback.call( this, e.target.result, files[0] ) } ;
+                    reader.onload = e => { callback.call( this, e.target.result, files[ 0 ] ) } ;
                 }
-                else callback(files[0]);
-                
+                else
+                    callback( files[ 0 ] );
             });
     
-            element.appendChild(input);
+            element.appendChild( input );
     
             this.queue( element );
             
@@ -5292,9 +5325,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
                     
-                    new Dialog("Load Settings", p => {
-                        p.addDropdown("Type", ['text', 'buffer', 'bin', 'url'], type, v => { type = v } );
-                        p.addButton(null, "Reload", v => { input.dispatchEvent( new Event('change') ) } );
+                    new Dialog( "Load Settings", p => {
+                        p.addDropdown( "Type", [ 'text', 'buffer', 'bin', 'url' ], type, v => { type = v } );
+                        p.addButton( null, "Reload", v => { input.dispatchEvent( new Event( 'change' ) ) } );
                     });
                     
                 }, { className: "micro", skipInlineCount: true });
@@ -5848,6 +5881,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         destroy() {
+            
             this.root.remove();
         }
 
@@ -5862,6 +5896,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.root.style.left = x + "px";
             this.root.style.top = y + "px";
         }
+
+        setTitle( title ) {
+
+            const titleDOM = this.root.querySelector( '.lexdialogtitle' );
+            if( !titleDOM )
+                return;
+            titleDOM.innerText = title;
+        }
     }
 
     LX.Dialog = Dialog;
@@ -5891,8 +5933,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Custom 
             this.root.classList.add( "pocket" );
-            this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
-            this.root.style.top = "0px";
+            if( !options.position ) {
+                this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
+                this.root.style.top = "0px";
+            }
             this.panel.root.style.width = "calc( 100% - 12px )";
             this.panel.root.style.height = "calc( 100% - 40px )";
             this.dock_pos = PocketDialog.TOP;
@@ -5931,7 +5975,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
                             break;
                         case 'l': 
-                            this.root.style.left = "0px";
+                            this.root.style.left = options.position ? options.position[ 1 ] : "0px";
                             break;
                         }
                     }
@@ -6036,7 +6080,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
             // Set final width
-            contextmenu.style.width = contextmenu.offsetWidth + "px";
+            // contextmenu.style.width = contextmenu.offsetWidth + "px";
             this._adjust_position( contextmenu, 6, true );
         }
 
@@ -7484,9 +7528,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         configurable: true
     });
 
-    Element.prototype.insertChildAtIndex = function(child, index = Infinity) {
-        if (index >= this.children.length) this.appendChild(child);
-        else this.insertBefore(child, this.children[index]);
+    Element.prototype.insertChildAtIndex = function( child, index = Infinity ) {
+        if ( index >= this.children.length ) this.appendChild( child );
+        else this.insertBefore( child, this.children[index] );
+    }
+
+    Element.prototype.hasClass = function( list ) {
+        list = [].concat( list );
+        var r = list.filter( v => this.classList.contains( v ) );
+        return !!r.length;
     }
 
     Element.prototype.getComputedSize = function() {
@@ -7502,7 +7552,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         compareThreshold( v, p, n, t ) { return Math.abs(v - p) >= t || Math.abs(v - n) >= t },
         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,
         getControlPoints( x0, y0, x1, y1, x2, y2 ,t ) {
             
             //  x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment
@@ -7527,7 +7577,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             
             return [p1x,p1y,p2x,p2y]
         },
-   
         drawSpline( ctx, pts, t ) {
         
             ctx.save();