lexgui 0.1.3 → 0.1.4

package/build/components/codeeditor.js

@@ -530,43 +530,83 @@ class CodeEditor {
         return this.code.lines.join(min ? ' ' : '\n');
     }
 
-    setText(text)  {
-        const new_lines = text.split('\n');
-    
-        if (new_lines.length < 1) { return; }
-    
-        let num_lines = new_lines.length;
-        console.assert(num_lines > 0);
-        const first_line = new_lines.shift();
-        num_lines--;
+    setText( text ) {
+
+        console.assert( text.length > 0 );
+        let new_lines = text.split('\n');
     
+        this.code.lines = [].concat(new_lines);
+
+        let cursor = this.cursors.children[0];
+        let lastLine = new_lines.pop();
+
+        this.cursorToLine(cursor, new_lines.length); // Already substracted 1
+        this.cursorToPosition(cursor, lastLine.length);
+
+        this.processLines();
+    }
+
+    appendText( text ) {
+
         let cursor = this.cursors.children[0];
         let lidx = cursor.line;
-        const remaining = this.code.lines[lidx].slice(cursor.position);
-    
-        // Add first line
-        this.code.lines[lidx] = [
-            this.code.lines[lidx].slice(0, cursor.position),
-            first_line
-        ].join('');
-    
-        this.cursorToPosition(cursor, (cursor.position + first_line.length));
-    
-        // Enter next lines...
-        let _text = null;
-    
-        for (var i = 0; i < new_lines.length; ++i) {
-            _text = new_lines[i];
-            this.cursorToLine(cursor, cursor.line++, true);
-            // Add remaining...
-            if (i == (new_lines.length - 1))
-                _text += remaining;
-            this.code.lines.splice(1 + lidx + i, 0, _text);
+
+        if( this.selection ) {
+            this.deleteSelection(cursor);
+            lidx = cursor.line;
+        }
+
+        this.endSelection();
+
+        const new_lines = text.split('\n');
+
+        // Pasting Multiline...
+        if(new_lines.length != 1)
+        {
+            let num_lines = new_lines.length;
+            console.assert(num_lines > 0);
+            const first_line = new_lines.shift();
+            num_lines--;
+
+            const remaining = this.code.lines[lidx].slice(cursor.position);
+
+            // Add first line
+            this.code.lines[lidx] = [
+                this.code.lines[lidx].slice(0, cursor.position), 
+                first_line
+            ].join('');
+
+            this.cursorToPosition(cursor, (cursor.position + first_line.length));
+
+            // Enter next lines...
+
+            let _text = null;
+
+            for( var i = 0; i < new_lines.length; ++i ) {
+                _text = new_lines[i];
+                this.cursorToLine(cursor, cursor.line++, true);
+                // Add remaining...
+                if( i == (new_lines.length - 1) )
+                    _text += remaining;
+                this.code.lines.splice( 1 + lidx + i, 0, _text);
+            }
+
+            if(_text) this.cursorToPosition(cursor, _text.length);
+            this.cursorToLine(cursor, cursor.line + num_lines);
+            this.processLines(lidx);
+        }
+        // Pasting one line...
+        else
+        {
+            this.code.lines[lidx] = [
+                this.code.lines[lidx].slice(0, cursor.position), 
+                new_lines[0], 
+                this.code.lines[lidx].slice(cursor.position)
+            ].join('');
+
+            this.cursorToPosition(cursor, (cursor.position + new_lines[0].length));
+            this.processLine(lidx);
         }
-    
-        if (_text) this.cursorToPosition(cursor, _text.length);
-        this.cursorToLine(cursor, cursor.line + num_lines);
-        this.processLines(lidx);
     }
 
     loadFile( file ) {
@@ -1069,64 +1109,8 @@ class CodeEditor {
                 this.onsave( this.getText() );
                 return;
             case 'v': // paste
-
-                if( this.selection ) {
-                    this.deleteSelection(cursor);
-                    lidx = cursor.line;
-                }
-
-                this.endSelection();
-
                 let text = await navigator.clipboard.readText();
-                const new_lines = text.split('\n');
-
-                // Pasting Multiline...
-                if(new_lines.length != 1)
-                {
-                    let num_lines = new_lines.length;
-                    console.assert(num_lines > 0);
-                    const first_line = new_lines.shift();
-                    num_lines--;
-
-                    const remaining = this.code.lines[lidx].slice(cursor.position);
-
-                    // Add first line
-                    this.code.lines[lidx] = [
-                        this.code.lines[lidx].slice(0, cursor.position), 
-                        first_line
-                    ].join('');
-
-                    this.cursorToPosition(cursor, (cursor.position + first_line.length));
-
-                    // Enter next lines...
-
-                    let _text = null;
-
-                    for( var i = 0; i < new_lines.length; ++i ) {
-                        _text = new_lines[i];
-                        this.cursorToLine(cursor, cursor.line++, true);
-                        // Add remaining...
-                        if( i == (new_lines.length - 1) )
-                            _text += remaining;
-                        this.code.lines.splice( 1 + lidx + i, 0, _text);
-                    }
-
-                    if(_text) this.cursorToPosition(cursor, _text.length);
-                    this.cursorToLine(cursor, cursor.line + num_lines);
-                    this.processLines(lidx);
-                }
-                // Pasting one line...
-                else
-                {
-                    this.code.lines[lidx] = [
-                        this.code.lines[lidx].slice(0, cursor.position), 
-                        new_lines[0], 
-                        this.code.lines[lidx].slice(cursor.position)
-                    ].join('');
-
-                    this.cursorToPosition(cursor, (cursor.position + new_lines[0].length));
-                    this.processLine(lidx);
-                }
+                this.appendText(text);
                 return;
             case 'x': // cut line
                 const to_copy = this.code.lines.splice(lidx, 1)[0];

package/build/components/imui.js

@@ -56,6 +56,7 @@ class ImUI {
         // Mouse state
 
         this.mousePosition = new LX.vec2();
+        this.setPointerCursor = false;
 
         this.root = this.canvas = canvas;
     }
@@ -121,22 +122,17 @@ class ImUI {
 
         // Draw button
 
+        ctx.beginPath();
         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 );
+        ctx.roundRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0, [8, 8, 8, 8] );
+        ctx.fill();
 
         // 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";
+        this.setPointerCursor |= hovered;
 
         if( this.eventClick )
         {
@@ -176,50 +172,53 @@ class ImUI {
 
         const metrics = ctx.measureText( text );
         let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );
+        let fullSize = size.add( padding.mul( 2.0 ) );
 
         // 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 hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + fullSize.x)
+        && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + fullSize.y);
 
         const active = hovered && this.mouseDown;
 
         // Draw box
 
+        ctx.beginPath();
         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
+        ctx.roundRect( position.x, position.y, fullSize.x, fullSize.y, [8, 8, 8, 8] );
+        ctx.fill();
 
-        let thumbSize = new LX.vec2( 12, size.y );
+        // Draw value
 
         const min = position.x;
-        const max = position.x + size.x + padding.x * 2.0 - thumbSize.x;
+        const max = position.x + fullSize.x;
 
         if(active)
         {
-            value = LX.UTILS.clamp((this.mousePosition.x - min - thumbSize.x * 0.5) / (max - min), 0.0, 1.0);
+            value = LX.UTILS.clamp((this.mousePosition.x - min) / (max - min), 0.0, 1.0);
             this.widgets[ text ].value = value;
         }
         
-        let thumbPos = new LX.vec2( min + (max - position.x) * value, position.y );
+        let valueSize = new LX.vec2( fullSize.x * value, size.y );
 
-        ctx.fillStyle = active ? "#bbb" : (hovered ? "#777" : "#888");
-        ctx.fillRect( thumbPos.x, thumbPos.y, thumbSize.x, thumbSize.y + padding.y * 2.0 );
+        ctx.beginPath();
+        ctx.fillStyle = hovered ? "#6074e7" : "#3e57e4";
+        if( valueSize.x > ( fullSize.x - 8 ) ) // 8: radius
+        {
+            ctx.roundRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0, [8, 8, 8, 8] );
+            ctx.fill();    
+        }
+        else
+        {
+            ctx.fillRect( position.x, position.y, valueSize.x, valueSize.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";
+        this.setPointerCursor |= hovered;
 
         if( active )
         {
@@ -259,7 +258,7 @@ class ImUI {
 
         let boxMargin = 12;
         let fullSize = new LX.vec2(boxMargin * 2.0, 0);
-        fullSize.add( size );
+        fullSize.add( size, fullSize );
 
         // Get mouse state
 
@@ -294,8 +293,7 @@ class ImUI {
         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";
+        this.setPointerCursor |= hovered;
     }
 
     /**
@@ -307,6 +305,11 @@ class ImUI {
 
         this.eventClick = null;
 
+        // Pointer cursor on hover
+        document.body.style.cursor = this.setPointerCursor ? "pointer" : "default";
+
+        // Clear info
+        this.setPointerCursor = false;
     }
 }
 

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.2",
+        version: "0.1.4",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -126,17 +126,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         constructor(x, y) {
             this.x = x ?? 0;
-            this.y = y ?? 0;
+            this.y = y ?? (x ?? 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 ) }
+    
+        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; }
     };
 
     LX.vec2 = vec2;

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.2",
+    version: "0.1.4",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -122,17 +122,17 @@ class vec2 {
 
     constructor(x, y) {
         this.x = x ?? 0;
-        this.y = y ?? 0;
+        this.y = y ?? (x ?? 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 ) }
+    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; }
 };
 
 LX.vec2 = vec2;

package/package.json

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