lexgui 0.1.1 → 0.1.2

package/README.md

@@ -3,10 +3,12 @@
 **lexgui.js** is a lightweight JavaScript library that allows you to create web interfaces using only JavaScript, HTML, and CSS. This library provides an easy-to-use API for building dynamic and interactive user interfaces without the need for complex frameworks or libraries. With lexgui.js, you can create custom UI components, handle user interactions, and update the interface dynamically.
 
 <img src="data/Screenshot.png" alt="Screenshot" style="width: 100%"/>
-<div style="display: flex">
-<img src="data/Screenshot_Godot.png" alt="ScreenshotGodot" style="width: 50%"/>
-<img src="data/Screenshot_Code.png" alt="ScreenshotCode" style="width: 50%"/>
-</div>
+<table>
+  <tr>
+    <td valign="top"><img src="data/Screenshot_Godot.png"/></td>
+    <td valign="top"><img src="data/Screenshot_Code.png"/></td>
+  </tr>
+</table>
 
 ## Docs
 
@@ -16,12 +18,24 @@ The library documentation is in progress but you can check it [here](https://jxa
 
 Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how to create the different widgets and components!
 
+## Projects using lexgui.js
+
+### [Animics](https://github.com/upf-gti/SignON-editor) (EU H2020 SignON project)
+
+<img src="data/scriptAnimation_signon.png" alt="scriptAnimation_signon"/>
+
+### [Performs](https://github.com/upf-gti/SignON-realizer) (EU H2020 SignON project)
+
+<img src="data/realizer_signon.png" alt="scriptAnimation_signon"/>
+
 ## Contributors
 
 * Alex Rodríguez @jxarco
 * Eva Valls @evallsg
 
----
+## Feedback/Issues
+
+You can use the [repository issues section](https://github.com/jxarco/lexgui.js/issues) or simply write any feedback to alexroco.30@gmail.com.
 
 ## Component Features
 

package/build/components/imui.js

@@ -0,0 +1,315 @@
+import { LX } from 'lexgui';
+
+if(!LX) {
+    throw("lexgui.js missing!");
+}
+
+LX.components.push( 'ImUI' );
+
+function swapElements (obj, a, b) {
+    [obj[a], obj[b]] = [obj[b], obj[a]];
+}
+
+function swapArrayElements (array, id0, id1) {
+    [array[id0], array[id1]] = [array[id1], array[id0]];
+};
+
+/**
+ * @class ImUI
+ */
+
+class ImUI {
+
+    /**
+     * @param {*} options
+     * 
+     */
+
+    constructor( canvas, options = {} ) {
+
+        console.assert( canvas );
+        
+        // To capture key events
+        canvas.tabIndex = -1;
+        
+        canvas.addEventListener( 'keydown', this._processKey.bind(this), true);
+        canvas.addEventListener( 'mousedown', this._processMouse.bind(this) );
+        canvas.addEventListener( 'mouseup', this._processMouse.bind(this) );
+        canvas.addEventListener( 'mousemove', this._processMouse.bind(this) );
+        canvas.addEventListener( 'click', this._processMouse.bind(this) );
+        
+        // this.font = new FontFace("Ubuntu", "url(../data/Ubuntu-Bold.ttf)");
+        // this.font.load().then(
+        //     ( font ) => {
+        //         document.fonts.add( font );
+        //         if( options.onready ) options.onready();
+        //     },
+        //     (err) => {
+        //         console.error(err);
+        //     },
+        // );
+
+        // Widgets
+
+        this.widgets = { };
+
+        // Mouse state
+
+        this.mousePosition = new LX.vec2();
+
+        this.root = this.canvas = canvas;
+    }
+
+    _processKey(e) {
+
+        var key = e.key ?? e.detail.key;
+        console.log( key );
+    }
+
+    _processMouse(e) {
+
+        if( e.type == 'mousedown' )
+        {
+            this.mouseDown = true;
+        }
+        
+        else if( e.type == 'mouseup' )
+        {
+            this._processClick(e);
+            this.mouseDown = false;
+        }
+
+        else if( e.type == 'mousemove' )
+        {
+            this.mousePosition.set( e.clientX, e.clientY );
+        }
+    }
+
+    _processClick( e ) {
+
+        this.eventClick = e;
+    }
+
+    /**
+     * @method Button
+     * @param {String} text
+     * @param {Number} x
+     * @param {Number} y
+     */
+
+    Button( text, x, y, callback ) {
+
+        const ctx = this.canvas.getContext("2d");
+
+        // Element properties
+
+        let fontSize = 16;
+        ctx.font = fontSize + "px Arial";
+
+        let padding = new LX.vec2( 12, 8 );
+        let position = new LX.vec2( x, y );
+
+        const metrics = ctx.measureText( text );
+        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );
+
+        // Get mouse state
+
+        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + size.x + padding.x * 2.0)
+        && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + size.y + padding.y * 2.0);
+
+        const active = hovered && this.mouseDown;
+
+        // Draw button
+
+        ctx.fillStyle = active ? "#666" : (hovered ? "#444" : "#222");
+        ctx.fillRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0 );
+
+        // Draw text
+
+        ctx.fillStyle = hovered ? "#fff" : "#ddd";
+        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );
+
+        if( !hovered )
+        {
+            document.body.style.cursor = "default";
+            return false;
+        }
+
+        // Pointer cursor on hover
+        document.body.style.cursor = "pointer";
+
+        if( this.eventClick )
+        {
+            if(callback) callback();
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * @method Slider
+     * @param {String} text
+     * @param {Number} x
+     * @param {Number} y
+     * @param {Number} value
+     */
+
+    Slider( text, x, y, value = 0, callback ) {
+
+        const ctx = this.canvas.getContext("2d");
+
+        // Store slider value
+        
+        if(!this.widgets[ text ])
+            this.widgets[ text ] = { value: value };
+        else
+            value = this.widgets[ text ].value;
+
+        // Element properties
+
+        let fontSize = 16;
+        ctx.font = fontSize + "px Arial";
+
+        let padding = new LX.vec2( 12, 8 );
+        let position = new LX.vec2( x, y );
+
+        const metrics = ctx.measureText( text );
+        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );
+
+        // Get mouse state
+
+        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + size.x + padding.x * 2.0)
+        && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + size.y + padding.y * 2.0);
+
+        const active = hovered && this.mouseDown;
+
+        // Draw box
+
+        ctx.fillStyle = hovered ? "#444" : "#222";
+        ctx.fillRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0 );
+
+        // Draw thumb
+
+        let thumbSize = new LX.vec2( 12, size.y );
+
+        const min = position.x;
+        const max = position.x + size.x + padding.x * 2.0 - thumbSize.x;
+
+        if(active)
+        {
+            value = LX.UTILS.clamp((this.mousePosition.x - min - thumbSize.x * 0.5) / (max - min), 0.0, 1.0);
+            this.widgets[ text ].value = value;
+        }
+        
+        let thumbPos = new LX.vec2( min + (max - position.x) * value, position.y );
+
+        ctx.fillStyle = active ? "#bbb" : (hovered ? "#777" : "#888");
+        ctx.fillRect( thumbPos.x, thumbPos.y, thumbSize.x, thumbSize.y + padding.y * 2.0 );
+
+        // Draw text
+
+        ctx.fillStyle = hovered ? "#fff" : "#ddd";
+        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );
+
+        if( !hovered )
+        {
+            document.body.style.cursor = "default";
+            return;
+        }
+
+        // Pointer cursor on hover
+        document.body.style.cursor = "pointer";
+
+        if( active )
+        {
+            if(callback) callback( value );
+        }
+    }
+
+    /**
+     * @method Checkbox
+     * @param {String} text
+     * @param {Number} x
+     * @param {Number} y
+     * @param {Number} value
+     */
+
+    Checkbox( text, x, y, value = false, callback ) {
+
+        const ctx = this.canvas.getContext("2d");
+
+        // Store slider value
+        
+        if(!this.widgets[ text ])
+            this.widgets[ text ] = { value: value };
+        else
+            value = this.widgets[ text ].value;
+
+        // Element properties
+
+        let fontSize = 16;
+        ctx.font = fontSize + "px Arial";
+
+        let padding = new LX.vec2( 12, 8 );
+        let position = new LX.vec2( x, y );
+
+        const metrics = ctx.measureText( text );
+        let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );
+
+        let boxMargin = 12;
+        let fullSize = new LX.vec2(boxMargin * 2.0, 0);
+        fullSize.add( size );
+
+        // Get mouse state
+
+        const boxStartX = position.x + size.x + padding.x + boxMargin;
+        const boxStartY = position.y + padding.y;
+        const hovered = this.mousePosition.x >= boxStartX && this.mousePosition.x <= (boxStartX + size.y)
+        && this.mousePosition.y >= boxStartY && this.mousePosition.y <= (boxStartY + size.y);
+
+        const active = hovered && this.mouseDown;
+        const pressed = hovered && this.eventClick;
+
+        // Draw button
+
+        ctx.fillStyle = active ? "#666" : (hovered ? "#444" : "#222");
+        ctx.fillRect( position.x, position.y, fullSize.x + padding.x * 2.0, fullSize.y + padding.y * 2.0 );
+
+        // Draw checkbox
+
+        if( pressed )
+        {
+            value = !value;
+            this.widgets[ text ].value = value;
+            if(callback) callback( value );
+        }
+
+        ctx.fillStyle = value ? (active ? "#ddd" : (hovered ? "#6074e7" : "#3e57e4")) : 
+                            (active ? "#bbb" : (hovered ? "#777" : "#888"));
+        ctx.fillRect( position.x + size.x + padding.x + boxMargin, position.y + padding.y, size.y, size.y );
+
+        // Draw text
+
+        ctx.fillStyle = hovered ? "#fff" : "#ddd";
+        ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );
+
+        // Pointer cursor on hover
+        document.body.style.cursor = hovered ? "pointer" : "default";
+    }
+
+    /**
+     * @method endFrame
+     * @description Clears the information stored during the last frame
+     */
+
+    endFrame() {
+
+        this.eventClick = null;
+
+    }
+}
+
+LX.ImUI = ImUI;
+
+export { ImUI };

package/build/components/timeline.js

@@ -701,6 +701,9 @@ class Timeline {
         if(!this.session)
             return;
 
+        if( this.secondsToPixels * v < 100)
+            return;
+
         var centerx = this.canvas.width * 0.5;
         var x = this.xToTime( centerx );
         this.secondsToPixels *= v;
@@ -1060,7 +1063,7 @@ class Timeline {
                 if( x2 < 0 || x > this.canvas.width )
                     continue;
 
-                //background rect
+                // Background rect
                 ctx.globalAlpha = trackAlpha;
                 ctx.fillStyle = clip.clipColor || "#5e9fdd"//#333";
                 //ctx.fillRect(x,y,w,trackHeight);
@@ -1078,50 +1081,41 @@ class Timeline {
                 if(fadeoutX)
                     ctx.roundRect( x + w - fadeoutX, y + offset, fadeoutX, trackHeight, {tl: 0, bl: 0, tr:5, br:5}, true);
                 
-                // //draw clip content
-                // if( clip.drawClip )
-                // {
-                //     ctx.save();
-                //     ctx.translate(x,y);
-                //     ctx.strokeStyle = "#AAA";
-                //     ctx.fillStyle = "#AAA";
-                //     clip.drawClip( ctx, x2-x, trackHeight, this.selectedClip == clip || track.selected[j], this );
-                //     ctx.restore();
-                // }
-                //draw clip outline
+                // Draw clip outline
                 if(clip.hidden)
                     ctx.globalAlpha = trackAlpha * 0.5;
                 
-                    var safex = Math.max(-2, x );
-                    var safex2 = Math.min( this.canvas.width + 2, x2 );
-                // ctx.lineWidth = 0.5;
-                // ctx.strokeStyle = clip.constructor.color || "black";
-                // ctx.strokeRect( safex, y, safex2-safex, trackHeight );
                 ctx.globalAlpha = trackAlpha;
                 if(this.selectedClip == clip || track.selected[j])
                     selectedClipArea = [x, y + offset, x2-x, trackHeight];
 
-                ctx.font = "12px Rubik";
-                //render clip selection area
+                ctx.fillStyle = "black"; //Timeline.FONT_COLOR; // clip.color || Timeline.FONT_COLOR;
+                ctx.font = "12px" + Timeline.FONT;
+
+                // Render clip selection area
                 if(selectedClipArea)
                 {
                     ctx.strokeStyle = track.clips[j].clipColor;
-                    ctx.globalAlpha = 0.5;
+                    ctx.fillStyle = "white"; //(Timeline.FONT_COLOR || track.clips[j].clipColor);
+                    ctx.globalAlpha = 0.6;
                     ctx.lineWidth = 2.5;
                     ctx.roundRect(selectedClipArea[0]-1,selectedClipArea[1]-1,selectedClipArea[2]+2,selectedClipArea[3]+2, 5, false, true);
                     ctx.strokeStyle = "#888";
                     ctx.lineWidth = 0.5;
                     ctx.globalAlpha = this.opacity;
-                    ctx.font = "bold 13px Rubik";
+                    ctx.font = "bold 13px " + Timeline.FONT;
                 }
 
                 let text = clip.id.replaceAll("_", " ").replaceAll("-", " ");
-                let textInfo = ctx.measureText( text );
-                ctx.fillStyle = clip.color || Timeline.FONT_COLOR;
                 
-                if( textInfo.width < (w - 24) )
-                    ctx.fillText( text, x + (w - textInfo.width)*0.5,  y + offset + 12 );
-                ctx.font = "12px Rubik";
+                if( this.secondsToPixels < 200)
+                    ctx.font = this.secondsToPixels*0.06  +"px" + Timeline.FONT;
+
+                let textInfo = ctx.measureText( text );
+                if(this.secondsToPixels > 100)
+                    ctx.fillText( text, x + (w - textInfo.width)*0.5,  y + offset + trackHeight/2 + textInfo.fontBoundingBoxDescent );
+
+                ctx.font = "12px" + Timeline.FONT;
             }
         }
 
@@ -1232,7 +1226,7 @@ class Timeline {
      * 
      * 
      */
-    resize( size = [this.root.parent.root.clientWidth, this.root.parent.root.clientHeight]) {
+    resize( size = [this.root.parent.root.clientWidth, this.root.parent.root.clientHeight] ) {
 
         this.root.root.style.width = size[0] + "px";
         this.root.root.style.height = size[1] + "px";
@@ -1242,6 +1236,8 @@ class Timeline {
         
         let w = size[0] - this.leftPanel.root.clientWidth - 8;
         this.resizeCanvas([w , size[1]]);
+
+        this.session.start_time = 0;
     }
 
     resizeCanvas( size ) {
@@ -1255,8 +1251,8 @@ class Timeline {
         var w = Math.max(300, this.canvas.width);
         this.secondsToPixels = ( w - this.session.left_margin ) / this.duration;
         this.pixelsToSeconds = 1 / this.secondsToPixels;
+
         this.draw(this.currentTime);
-        
     }
 
     /**

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.1",
+        version: "0.1.2",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -120,6 +120,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             fn();
     }
 
+    // Math classes
+
+    class vec2 {
+
+        constructor(x, y) {
+            this.x = x ?? 0;
+            this.y = y ?? 0;
+        }
+
+        get xy() { return [ this.x, this.y]; }
+        get yx() { return [ this.y, this.x]; }
+
+        set( x, y ) { this.x = x; this.y = y; }
+        add( v ) { this.set( this.x + v.x, this.y + v.y ) }
+        sub( v ) { this.set( this.x - v.x, this.y - v.y ) }
+        mul( v ) { this.set( this.x * v.x, this.y * v.y ) }
+        div( v ) { this.set( this.x / v.x, this.y / v.y ) }
+    };
+
+    LX.vec2 = vec2;
+
+    // Other utils
+
     function set_as_draggable(domEl) {
 
         let offsetX;
@@ -3000,7 +3023,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             };
 
             // Process inline widgets
-            if(this._inline_widgets_left > 0)
+            if(this._inline_widgets_left > 0 && !options.skipInlineCount)
             {
                 if(!this._inlineWidgets)  {
                     this._inlineWidgets = [];
@@ -3753,7 +3776,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 2 + 'px';
                 element.querySelector(".lexoptions").toggleAttribute('hidden');
                 list.focus();
-            }, { buttonClass: 'array' });
+            }, { buttonClass: 'array', skipInlineCount: true });
 
             this.clearQueue();
 

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.1",
+    version: "0.1.2",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -116,6 +116,29 @@ function doAsync( fn, ms ) {
         fn();
 }
 
+// Math classes
+
+class vec2 {
+
+    constructor(x, y) {
+        this.x = x ?? 0;
+        this.y = y ?? 0;
+    }
+
+    get xy() { return [ this.x, this.y]; }
+    get yx() { return [ this.y, this.x]; }
+
+    set( x, y ) { this.x = x; this.y = y; }
+    add( v ) { this.set( this.x + v.x, this.y + v.y ) }
+    sub( v ) { this.set( this.x - v.x, this.y - v.y ) }
+    mul( v ) { this.set( this.x * v.x, this.y * v.y ) }
+    div( v ) { this.set( this.x / v.x, this.y / v.y ) }
+};
+
+LX.vec2 = vec2;
+
+// Other utils
+
 function set_as_draggable(domEl) {
 
     let offsetX;
@@ -2996,7 +3019,7 @@ class Panel {
         };
 
         // Process inline widgets
-        if(this._inline_widgets_left > 0)
+        if(this._inline_widgets_left > 0 && !options.skipInlineCount)
         {
             if(!this._inlineWidgets)  {
                 this._inlineWidgets = [];
@@ -3749,7 +3772,7 @@ class Panel {
             element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 2 + 'px';
             element.querySelector(".lexoptions").toggleAttribute('hidden');
             list.focus();
-        }, { buttonClass: 'array' });
+        }, { buttonClass: 'array', skipInlineCount: true });
 
         this.clearQueue();
 

package/examples/immediate_ui.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<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" />
+    <title>LexGUI ImUI Demo</title>
+    <link rel="stylesheet" href="../build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <script type="importmap">
+        {
+          "imports": {
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
+          }
+        }
+    </script>
+</head>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
+        import 'lexgui/components/imui.js';
+
+        // init library and get main area
+        let area = LX.init();
+
+        // add canvas to area
+        var canvas = document.createElement('canvas');
+        canvas.id = "mycanvas";
+        canvas.width = area.root.clientWidth;
+        canvas.height = area.root.clientHeight;
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        area.attach( canvas );
+
+        // add on resize event to control canvas size
+        area.onresize = function( bounding ) {
+            canvas.width = bounding.width;
+            canvas.height = bounding.height;
+        };
+
+        let im_ui = new LX.ImUI( canvas );
+
+        function loop( time ) {
+            
+            var ctx = canvas.getContext("2d");
+
+            ctx.fillStyle = "#b7a9b1";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            ctx.font = "48px Monospace";
+            ctx.fillStyle = "#ff1999";
+
+            const text = "Lexgui.js @jxarco";
+            ctx.fillText(text, 300, 225);
+
+            if( im_ui.Button( "First button", 50, 50 ) )
+            {
+                console.log("Button clicked!");
+            }
+
+            im_ui.Slider( "A very cool slider", 50, 100, false, (v) => {
+                console.log("Slider value: " + v);
+            } );
+
+            im_ui.Checkbox( "First checkbox", 50, 150, false, (v) => {
+                console.log("Checkbox value: " + v);
+            } );
+
+            im_ui.endFrame();
+
+            requestAnimationFrame(loop);
+        }
+
+        requestAnimationFrame(loop);
+
+    </script>
+</html>

package/examples/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Examples</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <style>
         iframe { border: none; }
@@ -15,8 +15,8 @@
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>
@@ -47,9 +47,10 @@
             'Area Tabs',
             'Asset View',
             'Code Editor',
-            'Overlay Area',
             'Dialogs',
-            'Node Graph'
+            'Immediate UI',
+            'Node Graph',
+            'Overlay Area'
         ];
 
         let panel = leftArea.addPanel({ className: "lexexamplespanel" });
@@ -57,7 +58,7 @@
 
         let iframe = document.createElement('iframe');
         iframe.id = iframe.name = 'viewer';
-        iframe.src = "area_tabs.html";
+        iframe.src = examples[0].replace(" ", "_").toLowerCase() + ".html";
         iframe.style.width = "100%";
         iframe.style.height = "100%";
         rightArea.root.appendChild(iframe);

package/package.json

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