lexgui 0.1.10 → 0.1.12

package/build/components/codeeditor.js

@@ -183,6 +183,7 @@ class CodeEditor {
 
         // Code
 
+        this.useAutoComplete = options.autocomplete ?? true;
         this.highlight = options.highlight ?? 'Plain Text';
         this.onsave = options.onsave ?? ((code) => {  });
         this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
@@ -191,7 +192,7 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
-        this.charWidth = this.measureChar();
+        this.charWidth = 8;//this.measureChar();
         this._lastTime = null;
 
         this.languages = [
@@ -203,7 +204,7 @@ class CodeEditor {
             'End', 'Tab', 'Escape'
         ];
         this.keywords = {
-            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof'],
+            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger'],
             'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
             'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.'],
             'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
@@ -212,15 +213,23 @@ class CodeEditor {
                     'texture_storage_2d_array', 'texture_storage_3d'],
             'JSON': []
         };
+        this.utils = {
+            'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'filter', 'isNaN', 'parseFloat', 'parseInt'],
+            'GLSL': [],
+            'CSS': [],
+            'WGSL': [],
+            'JSON': []
+        };
         this.builtin = {
-            'JavaScript': ['console', 'window', 'navigator'],
+            'JavaScript': ['document', 'console', 'window', 'navigator', 'Object', 'Function', 'Boolean', 'Symbol', 'Error'],
             'CSS': ['*', '!important'],
             'GLSL': [],
             'WGSL': [],
             'JSON': []
         };
-        this.literals = {
-            'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do'],
+        this.statementsAndDeclarations = {
+            'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import',
+                            'from', 'throw', 'async', 'try', 'catch'],
             'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
             'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
             'JSON': [],
@@ -1289,7 +1298,8 @@ class CodeEditor {
 
         // Manage autocomplete
 
-        this.showAutoCompleteBox( key, cursor );
+        if( this.useAutoComplete )
+            this.showAutoCompleteBox( key, cursor );
     }
 
     action( key, deleteSelection, fn ) {
@@ -1453,8 +1463,8 @@ class CodeEditor {
             else if( this.builtin[this.highlight] && this.builtin[this.highlight].indexOf(token) > -1 )
                 span.classList.add("cm-bln");
 
-            else if( this.literals[this.highlight] && this.literals[this.highlight].indexOf(token) > -1 )
-                span.classList.add("cm-lit");
+            else if( this.statementsAndDeclarations[this.highlight] && this.statementsAndDeclarations[this.highlight].indexOf(token) > -1 )
+                span.classList.add("cm-std");
 
             else if( this.symbols[this.highlight] && this.symbols[this.highlight].indexOf(token) > -1 )
                 span.classList.add("cm-sym");
@@ -1878,7 +1888,7 @@ class CodeEditor {
 
     runScript( code ) {
         var script = document.createElement('script');
-        script.type = 'text/javascript';
+        script.type = 'module';
         script.innerHTML = code;
         // script.src = url[i] + ( version ? "?version=" + version : "" );
         script.async = false;
@@ -1921,13 +1931,11 @@ class CodeEditor {
 
     showAutoCompleteBox( key, cursor ) {
         
-        // Delimiter.. no autocomplete for this case
-        if( key == ' ' )
-        return;
-
         const [word, start, end] = this.getWordAtPos( cursor, -1 );
-        if(!word.length)
-        return;
+        if(key == ' ' || !word.length) {
+            this.hideAutoCompleteBox();
+            return;
+        }
 
         this.autocomplete.innerHTML = ""; // Clear all suggestions
 
@@ -1935,8 +1943,9 @@ class CodeEditor {
 
         // Add language special keys...
         suggestions = suggestions.concat( this.keywords[ this.highlight ] );
-        suggestions = suggestions.concat( this.literals[ this.highlight ] );
+        suggestions = suggestions.concat( this.statementsAndDeclarations[ this.highlight ] );
         suggestions = suggestions.concat( this.builtin[ this.highlight ] );
+        suggestions = suggestions.concat( this.utils[ this.highlight ] );
         suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
 
         // Remove single chars and duplicates...        

package/build/lexgui.css

@@ -2928,7 +2928,7 @@ ul.lexassetscontent {
 .cm-kwd { color: #218cce; } /* keyword */
 .cm-com { color: #5cab5a; } /* comment */
 .cm-typ { color: #36c0b0; } /* type */
-.cm-lit { color: #cf6dcf; } /* literal */
+.cm-std { color: #cf6dcf; } /* statements & declarations */
 .cm-bln { color: inherit; } /* builtin */
 .cm-dec { color: #b1ce9b; } /* decimal */
 .cm-sym { color: #e7ded2; } /* symbol */
@@ -2938,7 +2938,7 @@ ul.lexassetscontent {
 .cm-kwd.css { color: #e8be53; } /* keyword */
 .cm-com.css { color: #5cab5a; } /* comment */
 .cm-typ.css { color: #b7c3ec; } /* type */
-.cm-lit.css { color: #cf6dcf; } /* literal */
+.cm-std.css { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.css { color: #2194ce; } /* builtin */
 .cm-dec.css { color: #b1ce9b; } /* decimal */
 .cm-sym.css { color: #f9d620; } /* symbol */
@@ -2948,7 +2948,7 @@ ul.lexassetscontent {
 .cm-kwd.json { color: inherit; } /* keyword */
 .cm-com.json { color: inherit; } /* comment */
 .cm-typ.json { color: inherit; } /* type */
-.cm-lit.json { color: inherit; } /* literal */
+.cm-std.json { color: inherit; } /* statements & declarations */
 .cm-bln.json { color: inherit; } /* builtin */
 .cm-dec.json { color: #b1ce9b; } /* decimal */
 .cm-sym.json { color: #cf6dcf; } /* symbol */
@@ -2958,7 +2958,7 @@ ul.lexassetscontent {
 .cm-kwd.glsl { color: #2194ce; } /* keyword */
 .cm-com.glsl { color: #5cab5a; } /* comment */
 .cm-typ.glsl { color: #36c0b0; } /* type */
-.cm-lit.glsl { color: #cf6dcf; } /* literal */
+.cm-std.glsl { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.glsl { color: #cfc159; } /* builtin */
 .cm-dec.glsl { color: #b1ce9b; } /* decimal */
 .cm-sym.glsl { color: #f9cb20; } /* symbol */
@@ -2968,14 +2968,14 @@ ul.lexassetscontent {
 .cm-kwd.wgsl { color: #2194ce; } /* keyword */
 .cm-com.wgsl { color: #5cab5a; } /* comment */
 .cm-typ.wgsl { color: #36c0b0; } /* type */
-.cm-lit.wgsl { color: #cf6dcf; } /* literal */
+.cm-std.wgsl { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.wgsl { color: #cfc159; } /* builtin */
 .cm-dec.wgsl { color: #b1ce9b; } /* decimal */
 .cm-sym.wgsl { color: #f9cb20; } /* symbol */
 .cm-mtd.wgsl { color: #e0cc68; } /* method */
 
 /* plain color */
-.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-lit.plaintext, 
+.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
 .cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: inherit; }
 
 

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.10",
+        version: "0.1.12",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -143,7 +143,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     // Other utils
 
-    function set_as_draggable(domEl) {
+    function makeDraggable( domEl, targetClass ) {
 
         let offsetX;
         let offsetY;
@@ -153,7 +153,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         domEl.addEventListener("mousedown", function(e) {
             // e.stopPropagation();
             // e.stopImmediatePropagation();
-            currentTarget = e.target.classList.contains('lexdialogtitle') ? e.target : null;
+            currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
         });
     
         domEl.addEventListener("dragstart", function(e) {
@@ -169,12 +169,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             const rect = e.target.getBoundingClientRect();
             offsetX = e.clientX - rect.x;
             offsetY = e.clientY - rect.y;
-            e.dataTransfer.setData('branch_title', e.target.querySelector(".lexdialogtitle").innerText);
-            e.dataTransfer.setData('dialog_id', e.target.id);
-    
             document.addEventListener("mousemove", moveFunc );
-            console.log("wefwef");
-    
         }, false);
         
         const moveFunc = (e) => {
@@ -194,6 +189,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
         });
     }
+    
+    LX.makeDraggable = makeDraggable;
 
     function create_global_searchbar( root ) {
 
@@ -5626,7 +5623,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.title = titleDiv;
 
             if(draggable)
-                set_as_draggable(root);
+                makeDraggable( root, 'lexdialogtitle' );
 
             // Process position and size
             if(size.length && typeof(size[0]) != "string")

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.10",
+    version: "0.1.12",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -139,7 +139,7 @@ LX.vec2 = vec2;
 
 // Other utils
 
-function set_as_draggable(domEl) {
+function makeDraggable( domEl, targetClass ) {
 
     let offsetX;
     let offsetY;
@@ -149,7 +149,7 @@ function set_as_draggable(domEl) {
     domEl.addEventListener("mousedown", function(e) {
         // e.stopPropagation();
         // e.stopImmediatePropagation();
-        currentTarget = e.target.classList.contains('lexdialogtitle') ? e.target : null;
+        currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
     });
 
     domEl.addEventListener("dragstart", function(e) {
@@ -165,12 +165,7 @@ function set_as_draggable(domEl) {
         const rect = e.target.getBoundingClientRect();
         offsetX = e.clientX - rect.x;
         offsetY = e.clientY - rect.y;
-        e.dataTransfer.setData('branch_title', e.target.querySelector(".lexdialogtitle").innerText);
-        e.dataTransfer.setData('dialog_id', e.target.id);
-
         document.addEventListener("mousemove", moveFunc );
-        console.log("wefwef");
-
     }, false);
     
     const moveFunc = (e) => {
@@ -191,6 +186,8 @@ function set_as_draggable(domEl) {
     });
 }
 
+LX.makeDraggable = makeDraggable;
+
 function create_global_searchbar( root ) {
 
     let global_search = document.createElement("div");
@@ -5622,7 +5619,7 @@ class Dialog {
         this.title = titleDiv;
 
         if(draggable)
-            set_as_draggable(root);
+            makeDraggable( root, 'lexdialogtitle' );
 
         // Process position and size
         if(size.length && typeof(size[0]) != "string")

package/examples/code_editor.html

@@ -42,25 +42,25 @@
         };
 
         let editor = new LX.CodeEditor(rightArea, {
-            // allow_add_scripts: false
+            // allow_add_scripts: false,
+            // autocomplete: false
         });
 
         editor.loadFile( "../data/test.json" );
         editor.loadFile( "../data/style.css" );
         editor.loadFile( "../data/script.js" );
         
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#b7a9b1";
+        ctx.font = "48px Monospace";
+        ctx.strokeStyle = "#ff1999";
+
         function loop(dt) {
             
             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, 300);
+            ctx.strokeText("Lexgui.js @jxarco", 200, 300);
 
             requestAnimationFrame(loop);
         }

package/package.json

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