lexgui 0.1.0 → 0.1.2

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.0.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.0.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/demo.js

@@ -2,8 +2,6 @@ import { LX } from 'lexgui';
 import 'lexgui/components/codeeditor.js';
 import 'lexgui/components/timeline.js';
 
-console.log(LX, LX.CodeEditor, LX.Timeline)
-
 // Init library and get main area
 let area = LX.init();
 

package/examples/area_tabs.html

@@ -3,11 +3,21 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Area Tabs Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">    
+    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <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/"
+          }
+        }
+    </script>
 </head>
-    <body></body>
-    <script src="../build/lexgui.js"></script>
-    <script>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
 
         // init library and get main area
         let area = LX.init();

package/examples/asset_view.html

@@ -3,21 +3,31 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI AssetView Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">    
+    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <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/"
+          }
+        }
+    </script>
 </head>
-    <body></body>
-    <script src="../build/lexgui.js"></script>
-    <script src="../build/components/codeeditor.js"></script>
-    <script>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
+        import 'lexgui/components/codeeditor.js';
 
-        // init library and get main area
+        // Init library and get main area
         let area = LX.init();
 
-        // split main area
+        // Split main area
         var [topArea, bottomArea] = area.split({type: 'vertical', sizes:["60vh","40vh"]});
         bottomArea.setLimitBox(0, 450);
 
-        // add canvas to topArea
+        // Add canvas to topArea
         var canvas = document.createElement('canvas');
         canvas.id = "mycanvas";
         canvas.width = topArea.root.clientWidth;
@@ -26,7 +36,7 @@
         canvas.style.height = "100%";
         topArea.attach( canvas );
 
-        // add on resize event to control canvas size
+        // Add on resize event to control canvas size
         topArea.onresize = function( bounding ) {
             canvas.width = bounding.width;
             canvas.height = bounding.height;

package/examples/code_editor.html

@@ -3,12 +3,22 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Code Editor Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">   
-    <script src="../build/lexgui.js"></script>
-    <script src="../build/components/codeeditor.js"></script>
+    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <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/"
+          }
+        }
+    </script>
 </head>
     <body></body>
-    <script>
+    <script type="module">
+
+        import { LX } from 'lexgui';
+        import 'lexgui/components/codeeditor.js';
 
         // init library and get main area
         let area = LX.init();

package/examples/dialogs.html

@@ -3,11 +3,21 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Dialogs Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">    
+    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <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/"
+          }
+        }
+    </script>
 </head>
-    <body></body>
-    <script src="../build/lexgui.js"></script>
-    <script>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
 
         // Init library and get main area
         let area = LX.init({ skip_default_area: true });

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,8 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Examples</title>
-    <link rel="stylesheet" href="../build/lexgui.css">    
+    <link rel="stylesheet" href="../build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
     <style>
         iframe { border: none; }
         .lexexamplespanel {
@@ -11,10 +12,19 @@
             margin-top: 6px;
         }
     </style>
+    <script type="importmap">
+        {
+          "imports": {
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
+          }
+        }
+    </script>
 </head>
-    <body></body>
-    <script src="../build/lexgui.js"></script>
-    <script>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
 
         // Init library and get main area
         let area = LX.init();
@@ -37,8 +47,10 @@
             'Area Tabs',
             'Asset View',
             'Code Editor',
-            'Overlay Area',
             'Dialogs',
+            'Immediate UI',
+            'Node Graph',
+            'Overlay Area'
         ];
 
         let panel = leftArea.addPanel({ className: "lexexamplespanel" });
@@ -46,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/examples/node_graph.html

@@ -3,12 +3,22 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Node Graph Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">   
-    <script src="../build/lexgui.js"></script>
-    <script src="../build/components/nodegraph.js"></script>
+    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <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/"
+          }
+        }
+    </script>
 </head>
-    <body></body>
-    <script>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
+        import 'lexgui/components/nodegraph.js';
 
         // init library and get main area
         let area = LX.init();

package/examples/overlay_area.html

@@ -3,12 +3,22 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Overlay Timeline Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">    
+    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="icon" href="../images/icon.png">
+    <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/"
+          }
+        }
+    </script>  
 </head>
-    <body></body>
-    <script src="../build/lexgui.js"></script>
-    <script src="../build/components/timeline.js"></script>
-    <script>
+<body></body>
+    <script type="module">
+
+        import { LX } from 'lexgui';
+        import 'lexgui/components/timeline.js';
 
         // init library and get main area
         let area = LX.init();

package/package.json

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