lexgui 0.1.19 → 0.1.20

package/build/lexgui.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
 
@@ -752,7 +751,7 @@ body.nocursor * {
   display: grid;
   align-content: center;
 	background-color: var(--global-button-color);
-  border-radius: 8px;
+  border-radius: 6px;
   border: none;
   margin-top: 2px;
   height: 22px !important;
@@ -1271,7 +1270,7 @@ input[type="range"] {
   margin-top: -4px;
   width: 8px;
   height: 8px;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #c9c7de;
   cursor: pointer;
 }
@@ -1280,7 +1279,7 @@ input[type="range"] {
   margin-top: -8px;
   width: 8px;
   height: 8px;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #a19dc9;
   cursor: pointer;
 }
@@ -1739,7 +1738,7 @@ meter::-webkit-meter-even-less-good-value {
   background-color: var(--global-color-secondary);
   margin-top: 10px;
   margin-bottom: 8px;
-  border-radius: 10px;
+  border-radius: 8px;
   padding-left: 4px;
   padding-right: 4px;
 }
@@ -2816,14 +2815,21 @@ ul.lexassetscontent {
 
 .lexcodeeditor .code {
   cursor: text;
-  font-size: 16px;
+  font-family: "CommitMono", monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "ss04", "ss05";
+  font-size: 0.8rem;
   padding-right: 6px;
   position: relative;
 }
 
 .codechar {
-  font-size: 16px;
-  font-family: 'Inconsolata', monospace;
+  font-family: "CommitMono", monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "ss04", "ss05";
+  font-size: 0.8rem;
   position: absolute;
   top: 0;
   left: 0;
@@ -2838,9 +2844,6 @@ ul.lexassetscontent {
   border-radius: 0;
   border-width: 0;
   background: transparent;
-  font-family: 'Inconsolata', monospace;
-  font-size: inherit;
-  font-weight: bold;
   margin: 0px 0px;
   white-space: pre;
   word-wrap: normal;
@@ -2854,7 +2857,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor pre.active-line {
-  background-color: var(--global-blur-background);
+  background-color: #333437a9;
 }
 
 .lexcodeeditor span {
@@ -2909,7 +2912,6 @@ pre .line-gutter {
 .lexcodeeditor .cursors .cursor {
   -webkit-text-size-adjust: 100%;
   font-family: monospace;
-  color: #AAA !important;
   font-size: 16px;
   cursor: text;
   box-sizing: border-box;
@@ -2918,7 +2920,7 @@ pre .line-gutter {
   border-right: none;
   width: 0;
   position: absolute;
-  border-left: 3px solid #c5c5c5d6 !important;
+  border-left: 3px solid #fff !important;
   z-index: 0 !important;
   left: 0px;
   top: 0px;
@@ -2986,9 +2988,8 @@ pre .line-gutter {
   top: 0px;
   width: 100px;
   height: 20px;
-  margin-top: -2px;
   background-color: var(--global-selected);
-  opacity: 0.3;
+  opacity: 0.4;
 }
 
 .lexcodeeditor .autocomplete {
@@ -3110,6 +3111,16 @@ pre .line-gutter {
 .cm-sym.wgsl { color: #f9cb20; } /* symbol */
 .cm-mtd.wgsl { color: #e0cc68; } /* method */
 
+.cm-str.rust { color: #ca7d59; } /* string */
+.cm-kwd.rust { color: #218cce; } /* keyword */
+.cm-com.rust { color: #5cab5a; } /* comment */
+.cm-typ.rust { color: #36c0b0; } /* type */
+.cm-std.rust { color: #cf6dcf; } /* statements & declarations */
+.cm-bln.rust { color: inherit; } /* builtin */
+.cm-dec.rust { color: #b1ce9b; } /* decimal */
+.cm-sym.rust { color: #e7ded2; } /* symbol */
+.cm-mtd.rust { color: #e0cc68 } /* method */
+
 .cm-str.python { color: #ca7d59; } /* string */
 .cm-kwd.python { color: #218cce; } /* keyword */
 .cm-com.python { color: #5cab5a; } /* comment */

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.19",
+        version: "0.1.20",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -1621,7 +1621,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this.area.root.classList.toggle('folded', !this.folded);
                 }
 
-                if(options.onSelect) options.onSelect(e, tabEl.dataset.name);
+                if(options.onSelect)
+                    options.onSelect(e, tabEl.dataset.name);
+            });
+
+            tabEl.addEventListener("contextmenu", e => {
+                e.preventDefault();
+                e.stopPropagation();
+    
+                if(options.onContextMenu) 
+                    options.onContextMenu( e, tabEl.dataset.name );
             });
 
             tabEl.addEventListener("mouseup", e => {
@@ -2168,8 +2177,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         set( value ) {
 
-            if(this.onSetValue)
-                this.onSetValue(value);
+            if( this.onSetValue )
+                this.onSetValue( value );
         }
 
         oncontextmenu(e) {
@@ -3555,6 +3564,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         addButton( name, value, callback, options = {} ) {
 
             let widget = this.create_widget(name, Widget.BUTTON, options);
+            widget.onGetValue = () => {
+                return wValue.innerText;
+            };
+            widget.onSetValue = (new_value) => {
+                wValue.innerHTML = "<span>" + 
+                (options.icon ? "<a class='" + options.icon + "'></a>" : 
+                ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+            };
+            
             let element = widget.domEl;
 
             var wValue = document.createElement('button');

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.19",
+    version: "0.1.20",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -1617,7 +1617,16 @@ class Tabs {
                 this.area.root.classList.toggle('folded', !this.folded);
             }
 
-            if(options.onSelect) options.onSelect(e, tabEl.dataset.name);
+            if(options.onSelect)
+                options.onSelect(e, tabEl.dataset.name);
+        });
+
+        tabEl.addEventListener("contextmenu", e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if(options.onContextMenu) 
+                options.onContextMenu( e, tabEl.dataset.name );
         });
 
         tabEl.addEventListener("mouseup", e => {
@@ -2164,8 +2173,8 @@ class Widget {
 
     set( value ) {
 
-        if(this.onSetValue)
-            this.onSetValue(value);
+        if( this.onSetValue )
+            this.onSetValue( value );
     }
 
     oncontextmenu(e) {
@@ -3551,6 +3560,15 @@ class Panel {
     addButton( name, value, callback, options = {} ) {
 
         let widget = this.create_widget(name, Widget.BUTTON, options);
+        widget.onGetValue = () => {
+            return wValue.innerText;
+        };
+        widget.onSetValue = (new_value) => {
+            wValue.innerHTML = "<span>" + 
+            (options.icon ? "<a class='" + options.icon + "'></a>" : 
+            ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+        };
+
         let element = widget.domEl;
 
         var wValue = document.createElement('button');

package/changelog.md

@@ -0,0 +1,15 @@
+# lexgui.js changelog
+
+## 0.1.20
+
+Active line is now hightlighted.
+Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
+Added "Rust" syntax highlighting. 
+Improved all code selections (and some bugs fixed).
+Block comments are now working again (with bugs probably). 
+Minor fixes.
+
+## 0.1.19
+
+Add file explorer to Code Editor component. 
+Minor fixes.

package/examples/code_editor.html

@@ -23,54 +23,63 @@
         // init library and get main area
         let area = LX.init();
 
-        // split main area
-        // var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+        const file_explorer = false;
 
-        // add canvas to leftArea
-        // var canvas = document.createElement('canvas');
-        // canvas.id = "mycanvas";
-        // canvas.width = leftArea.root.clientWidth;
-        // canvas.height = leftArea.root.clientHeight;
-        // canvas.style.width = "100%";
-        // canvas.style.height = "100%";
-        // leftArea.attach( canvas );
+        if( !file_explorer )
+        {
+            var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+
+            var canvas = document.createElement('canvas');
+            canvas.id = "mycanvas";
+            canvas.width = leftArea.root.clientWidth;
+            canvas.height = leftArea.root.clientHeight;
+            canvas.style.width = "100%";
+            canvas.style.height = "100%";
+            leftArea.attach( canvas );
+
+            leftArea.onresize = function( bounding ) {
+                canvas.width = bounding.width;
+                canvas.height = bounding.height;
+            };
 
-        // add on resize event to control canvas size
-        // leftArea.onresize = function( bounding ) {
-        //     canvas.width = bounding.width;
-        //     canvas.height = bounding.height;
-        // };
+            area = rightArea;
+        }
 
         let editor = new LX.CodeEditor(area, {
             // allow_add_scripts: false,
             // autocomplete: false,
             // disable_edition: true,
-            file_explorer: true
+            file_explorer: file_explorer
         });
 
-        editor.loadFile( "../data/test.json" );
-        editor.loadFile( "../data/style.css" );
-        editor.loadFile( "../data/engine.cpp" );
-        editor.loadFile( "../data/script.js" );
-        editor.loadFile( "../data/xml_test.xml" );
-        editor.loadFile( "../localhost.bat" );
+        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" );
         
-        // var ctx = canvas.getContext("2d");
-        // ctx.fillStyle = "#b7a9b1";
-        // ctx.font = "48px Monospace";
-        // ctx.strokeStyle = "#ff1999";
+        if( !file_explorer )
+        {
+            var ctx = canvas.getContext("2d");
+            ctx.fillStyle = "#b7a9b1";
+            ctx.font = "48px Monospace";
+            ctx.strokeStyle = "#ff1999";
 
-        // function loop(dt) {
-            
-        //     var ctx = canvas.getContext("2d");
+            function loop(dt) {
+                
+                var ctx = canvas.getContext("2d");
 
-        //     ctx.fillRect(0, 0, canvas.width, canvas.height);
-        //     ctx.strokeText("Lexgui.js @jxarco", 200, 300);
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.strokeText("Lexgui.js @jxarco", 200, 300);
 
-        //     requestAnimationFrame(loop);
-        // }
+                requestAnimationFrame(loop);
+            }
 
-        // requestAnimationFrame(loop);
+            requestAnimationFrame(loop);
+        }
 
     </script>
 </html>

package/examples/index.html

@@ -49,8 +49,7 @@
             'Code Editor',
             'Dialogs',
             'Immediate UI',
-            'Node Graph',
-            'Overlay Area'
+            'Node Graph'
         ];
 
         let panel = leftArea.addPanel({ className: "lexexamplespanel" });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.19",
+    "version": "0.1.20",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -15,6 +15,7 @@
       "examples",
       "LICENSE",
       "package.json",
+      "changelog.md",
       "README.md",
       "demo.js"
     ],

package/examples/overlay_area.html

@@ -1,61 +0,0 @@
-<!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 Overlay Timeline 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/timeline.js';
-
-        // init library and get main area
-        let area = LX.init();
-       
-        // add canvas
-        var canvas = document.createElement('canvas');
-        canvas.id = "mycanvas";
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-        area.attach( canvas );
-        
-        let timeline = new LX.KeyFramesTimeline("kf-timeline", {opacity: 0.8});
-        // timeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
-        // timeline.setAnimationClip({tracks: [{name: "Item 1.position", values: [0,1,0, 1], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1, 0.2, 0.3, 0.8]}, {name: "Item 3.position", values: [0,1,0], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 0.1, 0.2, 0.3]}], duration: 1});
-        let timelinearea = new LX.Area({ height: 400, overlay:"bottom", resize: true});
-        timelinearea.attach(timeline.root);
-
-        timelinearea.onresize = (bounding) => {timeline.resize( [ bounding.width, bounding.height ] );}
-        area.attach(timelinearea)
-        
-        timeline.draw(0);
-
-        function loop(dt) {
-            
-            var ctx = canvas.getContext("2d");
-            ctx.fillStyle = "cyan";
-            ctx.fillRect(0,0,1000,800);
-            ctx.fillStyle = "black";
-            ctx.font = "bold 48px serif"
-            ctx.fillText("Overlay timeline area", 400, 400);
-            timeline.draw();
-
-            requestAnimationFrame(loop);
-        }
-
-        requestAnimationFrame(loop);
-    </script>
-</html>