lexgui 0.1.28 → 0.1.29

package/build/lexgui.module.js

@@ -8,12 +8,16 @@
 */
 
 var 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;
 
@@ -75,27 +79,31 @@ function getBase64Image(img) {
 
 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)
@@ -140,6 +148,7 @@ class vec2 {
     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;
@@ -153,45 +162,57 @@ function makeDraggable( domEl, options = { } ) {
     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;
+    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) {
+    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;
@@ -3443,99 +3464,105 @@ class Panel {
 
     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 ?? {});
+        Object.assign( wValue.style, options.style ?? {} );
 
-        container.appendChild(wValue);
-        element.appendChild(container);
+        container.appendChild( wValue );
+        element.appendChild( container );
         
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name ) {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -3957,10 +3984,7 @@ class Panel {
                 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();
@@ -4888,6 +4912,8 @@ class Panel {
             document.body.classList.add('nocursor');
             document.body.classList.add('noevents');
             drag_icon.classList.remove('hidden');
+            e.stopImmediatePropagation();
+            e.stopPropagation();
         }
 
         function inner_mousemove(e) {
@@ -5060,6 +5086,8 @@ class Panel {
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
+                e.stopImmediatePropagation();
+                e.stopPropagation();
             }
 
             function inner_mousemove(e) {
@@ -5244,11 +5272,11 @@ class Panel {
 
     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;
@@ -5256,31 +5284,36 @@ class Panel {
         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 );
         
@@ -5288,9 +5321,9 @@ class Panel {
         {
             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 });
@@ -5844,6 +5877,7 @@ class Dialog {
     }
 
     destroy() {
+
         this.root.remove();
     }
 
@@ -5858,6 +5892,14 @@ class Dialog {
         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;
@@ -5887,8 +5929,10 @@ class PocketDialog extends Dialog {
 
         // 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;
@@ -5927,7 +5971,7 @@ class PocketDialog extends Dialog {
                         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;
                     }
                 }
@@ -6032,7 +6076,7 @@ class ContextMenu {
         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 );
     }
 
@@ -7480,9 +7524,15 @@ Object.defineProperty(String.prototype, 'lastChar', {
     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() {
@@ -7498,7 +7548,7 @@ LX.UTILS = {
     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
@@ -7523,7 +7573,6 @@ LX.UTILS = {
         
         return [p1x,p1y,p2x,p2y]
     },
-
     drawSpline( ctx, pts, t ) {
     
         ctx.save();

package/changelog.md

@@ -1,5 +1,16 @@
 # lexgui.js changelog
 
+## 0.1.29
+
+GraphEditor:
+- Graphs front end (Nodes, links, groups).
+- Editor stuff (Panning, zoom, moving elements, serialize graph, Snapping...)
+- Basic execution functionality.
+
+Improved draggable elements.
+Added "onBeforeLoad" callback in File widget.
+Minor bug fixes.
+
 ## 0.1.28
 
 GraphEditor:

package/examples/code_editor.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>LexGUI Code Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
@@ -20,14 +21,16 @@
         import { LX } from 'lexgui';
         import 'lexgui/components/codeeditor.js';
 
+        window.LX = LX;
+        
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = true;
+        const file_explorer = false;
 
         if( !file_explorer )
         {
-            var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+            var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
 
             var canvas = document.createElement('canvas');
             canvas.id = "mycanvas";
@@ -52,14 +55,14 @@
             file_explorer: file_explorer
         });
 
-        editor.loadFile( "../data/js_sample.js" );
-        editor.loadFile( "../data/json_sample.json" );
-        editor.loadFile( "../data/css_sample.css" );
-        editor.loadFile( "../data/cpp_sample.cpp" );
-        editor.loadFile( "../data/xml_sample.xml" );
-        editor.loadFile( "../data/python_sample.py" );
-        editor.loadFile( "../data/rust_sample.rs" );
-        editor.loadFile( "../localhost.bat" );
+        editor.loadFile( "../demo.js" );
+        // editor.loadFile( "../data/json_sample.json" );
+        // editor.loadFile( "../data/css_sample.css" );
+        // editor.loadFile( "../data/cpp_sample.cpp" );
+        // editor.loadFile( "../data/xml_sample.xml" );
+        // editor.loadFile( "../data/python_sample.py" );
+        // editor.loadFile( "../data/rust_sample.rs" );
+        // editor.loadFile( "../localhost.bat" );
         
         if( !file_explorer )
         {

package/examples/node_graph.html

@@ -45,7 +45,7 @@
            
         } );
 
-        graph_editor.setGraph( new LX.Graph() );
+        graph_editor.loadGraph( "../data/graph_sample.json" );
 
         function loop(dt) {
             

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.28",
+    "version": "0.1.29",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",