lexgui 0.1.20 → 0.1.22

package/build/lexgui.css

@@ -18,6 +18,8 @@
   --global-dark-background: #14161a;
   --global-blur-background: #28292ba9;
   --transition-time: 1000;
+  --code-editor-font-size: 14px;
+  --code-editor-row-height: 20px;
 } 
 
 /* Some global colors */
@@ -2819,7 +2821,7 @@ ul.lexassetscontent {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "ss04", "ss05";
-  font-size: 0.8rem;
+  font-size: var(--code-editor-font-size);
   padding-right: 6px;
   position: relative;
 }
@@ -2829,7 +2831,7 @@ ul.lexassetscontent {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "ss04", "ss05";
-  font-size: 0.8rem;
+  font-size: var(--code-editor-font-size);
   position: absolute;
   top: 0;
   left: 0;
@@ -2852,7 +2854,7 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  height: 20px;
+  height: var(--code-editor-row-height);
   pointer-events: none;
 }
 
@@ -2871,16 +2873,15 @@ ul.lexassetscontent {
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   display: inline-block;
-  height: 16px;
 }
 
 pre .line-gutter {
   color: #8a8b97;
   width: 48px;
-  height: 20px;
-  font-size: 14px;
+  height: var(--code-editor-row-height);
+  font-size: var(--code-editor-font-size);
   font-weight: 400;
-  line-height: 20px;
+  line-height: var(--code-editor-row-height);
   text-align: center;
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
@@ -2919,12 +2920,12 @@ pre .line-gutter {
   padding: 0;
   border-right: none;
   width: 0;
+  height: var(--code-editor-row-height);
   position: absolute;
   border-left: 3px solid #fff !important;
   z-index: 0 !important;
   left: 0px;
   top: 0px;
-  height: 20px;
 }
 
 .lexcodescrollbar {
@@ -2971,7 +2972,7 @@ pre .line-gutter {
   background-color: #bbbbbb8c !important;
 }
 
-.lexcodeeditor .lexcodeselection {
+.lexcodeeditor .lexcodeselection, .lexcodeeditor .lexcodesearchresult {
   -webkit-text-size-adjust: 100%;
   font-family: monospace;
   color: #AAA !important;
@@ -2987,11 +2988,43 @@ pre .line-gutter {
   left: 0px;
   top: 0px;
   width: 100px;
-  height: 20px;
+  height: var(--code-editor-row-height);
   background-color: var(--global-selected);
   opacity: 0.4;
 }
 
+.lexcodeeditor .lexcodesearchresult {
+  background-color: #f5f115;
+  opacity: 0.5;
+}
+
+.lexcodeeditor .searchbox {
+  background-color: var(--global-branch-darker);
+  width: 256px;
+  position: absolute;
+  right: 6px;
+  top: 26px;
+  z-index: 100;
+  border-radius: 4px;
+  border: 1px solid var(--global-button-color);
+  box-shadow: 0 0px 4px #101010;
+  overflow-y: scroll;
+  transform: translateY(-72px);
+  transition: transform 0.2s ease-in;
+}
+
+.lexcodeeditor .searchbox.gotoline {
+  width: 124px;
+}
+
+.lexcodeeditor .searchbox.opened {
+  transform: translateY(0px);
+}
+
+.lexcodeeditor .searchbox .lexpanel span {
+  height: 11px;
+}
+
 .lexcodeeditor .autocomplete {
   background-color: var(--global-branch-darker);
   width: 256px;
@@ -3020,6 +3053,7 @@ pre .line-gutter {
   pointer-events: unset;
   cursor: default;
   height: 22px;
+  padding-left: 6px;
 }
 
 .lexcodeeditor .autocomplete pre a {
@@ -3050,102 +3084,64 @@ pre .line-gutter {
   color: #95a0e1;
 }
 
-.cm-str.javascript { color: #ca7d59; } /* string */
-.cm-kwd.javascript { color: #218cce; } /* keyword */
-.cm-com.javascript { color: #5cab5a; } /* comment */
-.cm-typ.javascript { color: #36c0b0; } /* type */
-.cm-std.javascript { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.javascript { color: inherit; } /* builtin */
-.cm-dec.javascript { color: #b1ce9b; } /* decimal */
-.cm-sym.javascript { color: #e7ded2; } /* symbol */
-.cm-mtd.javascript { color: #e0cc68 } /* method */
-
-.cm-str.cpp { color: #ca7d59; } /* string */
-.cm-kwd.cpp { color: #218cce; } /* keyword */
-.cm-com.cpp { color: #5cab5a; } /* comment */
-.cm-typ.cpp { color: #36c0b0; } /* type */
-.cm-std.cpp { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.cpp { color: #d44141; } /* builtin */
-.cm-dec.cpp { color: #2ddf53; } /* decimal */
-.cm-sym.cpp { color: #e7ded2; } /* symbol */
-.cm-mtd.cpp { color: #7a9ae0 } /* method */
-.cm-ppc.cpp { color: #969696 } /* preprocessor */
-
-.cm-str.css { color: #ca7d59; } /* string */
-.cm-kwd.css { color: #e8be53; } /* keyword */
-.cm-com.css { color: #5cab5a; } /* comment */
-.cm-typ.css { color: #b7c3ec; } /* type */
-.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 */
-.cm-mtd.css { color: #e0cc68; } /* method */
-
-.cm-str.json { color: #ca7d59; } /* string */
-.cm-kwd.json { color: inherit; } /* keyword */
-.cm-com.json { color: inherit; } /* comment */
-.cm-typ.json { color: inherit; } /* type */
-.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 */
-.cm-mtd.json { color: inherit; } /* method */
-
-.cm-str.glsl { color: #ca7d59; } /* string */
-.cm-kwd.glsl { color: #2194ce; } /* keyword */
-.cm-com.glsl { color: #5cab5a; } /* comment */
-.cm-typ.glsl { color: #36c0b0; } /* type */
-.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 */
-.cm-mtd.glsl { color: #e0cc68; } /* method */
-
-.cm-str.wgsl { color: #ca7d59; } /* string */
-.cm-kwd.wgsl { color: #2194ce; } /* keyword */
-.cm-com.wgsl { color: #5cab5a; } /* comment */
-.cm-typ.wgsl { color: #36c0b0; } /* type */
-.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 */
-
-.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 */
-.cm-typ.python { color: #36c0b0; } /* type */
-.cm-std.python { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.python { color: inherit; } /* builtin */
-.cm-dec.python { color: #b1ce9b; } /* decimal */
-.cm-sym.python { color: #e7ded2; } /* symbol */
-.cm-mtd.python { color: #e0cc68 } /* method */
-
-.cm-str.batch { color: #ca7d59; } /* string */
-.cm-kwd.batch { color: #218cce; } /* keyword */
-.cm-com.batch { color: #5cab5a; } /* comment */
-.cm-typ.batch { color: #36c0b0; } /* type */
-.cm-std.batch { color: #cf6dcf; } /* statements & declarations */
-.cm-bln.batch { color: inherit; } /* builtin */
-.cm-dec.batch { color: #b1ce9b; } /* decimal */
-.cm-sym.batch { color: #dfd85e; } /* symbol */
-.cm-mtd.batch { color: inherit } /* method */
-
-.cm-str.html { color: #ca7d59; } /* string */
-.cm-kwd.html { color: #2194ce; } /* keyword */
-.cm-bln.html { color: #b4d7ec; } /* builtin */
-.cm-sym.html { color: #929292; } /* symbol */
-
+/* Common */
+.cm-str { color: #ca7d59; }   /* string */
+.cm-std { color: #cf6dcf; }   /* statements & declarations */
+.cm-kwd { color: #2194ce; }   /* keyword */
+.cm-com { color: #5cab5a; }   /* comment */
+
+.cm-typ.javascript { color: #36c0b0; }  /* type */
+.cm-dec.javascript { color: #b1ce9b; }  /* decimal */
+.cm-sym.javascript { color: #e7ded2; }  /* symbol */
+.cm-mtd.javascript { color: #e0cc68 }   /* method */
+
+.cm-typ.cpp { color: #36c0b0; }   /* type */
+.cm-bln.cpp { color: #d44141; }   /* builtin */
+.cm-dec.cpp { color: #2ddf53; }   /* decimal */
+.cm-sym.cpp { color: #e7ded2; }   /* symbol */
+.cm-mtd.cpp { color: #7a9ae0 }    /* method */
+.cm-ppc.cpp { color: #969696 }    /* preprocessor */
+
+.cm-kwd.css { color: #e8be53; }   /* keyword */
+.cm-typ.css { color: #b7c3ec; }   /* type */
+.cm-bln.css { color: #2194ce; }   /* builtin */
+.cm-dec.css { color: #b1ce9b; }   /* decimal */
+.cm-sym.css { color: #f9d620; }   /* symbol */
+.cm-mtd.css { color: #e0cc68; }   /* method */
+
+.cm-dec.json { color: #b1ce9b; }  /* decimal */
+.cm-sym.json { color: #cf6dcf; }  /* symbol */
+
+.cm-typ.glsl { color: #36c0b0; }  /* type */
+.cm-bln.glsl { color: #cfc159; }  /* builtin */
+.cm-dec.glsl { color: #b1ce9b; }  /* decimal */
+.cm-sym.glsl { color: #f9cb20; }  /* symbol */
+.cm-mtd.glsl { color: #e0cc68; }  /* method */
+
+.cm-typ.wgsl { color: #36c0b0; }  /* type */
+.cm-bln.wgsl { color: #cfc159; }  /* builtin */
+.cm-dec.wgsl { color: #b1ce9b; }  /* decimal */
+.cm-sym.wgsl { color: #f9cb20; }  /* symbol */
+.cm-mtd.wgsl { color: #e0cc68; }  /* method */
+
+.cm-typ.rust { color: #36c0b0; }  /* type */
+.cm-dec.rust { color: #b1ce9b; }  /* decimal */
+.cm-sym.rust { color: #e7ded2; }  /* symbol */
+.cm-mtd.rust { color: #e0cc68 }   /* method */
+
+.cm-typ.python { color: #36c0b0; }  /* type */
+.cm-dec.python { color: #b1ce9b; }  /* decimal */
+.cm-sym.python { color: #e7ded2; }  /* symbol */
+.cm-mtd.python { color: #e0cc68 }   /* method */
+
+.cm-typ.batch { color: #36c0b0; }   /* type */
+.cm-dec.batch { color: #b1ce9b; }   /* decimal */
+.cm-sym.batch { color: #dfd85e; }   /* symbol */
+
+.cm-bln.html { color: #a1d2f0; }    /* builtin */
+.cm-sym.html { color: #929292; }    /* symbol */
+
+.cm-bln.markdown { color: #a1d2f0; }  /* builtin */
 
 /* Node Graph */
 

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.20",
+        version: "0.1.22",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -3568,9 +3568,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 return wValue.innerText;
             };
             widget.onSetValue = (new_value) => {
-                wValue.innerHTML = "<span>" + 
+                wValue.innerHTML = 
                 (options.icon ? "<a class='" + options.icon + "'></a>" : 
-                ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+                ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (new_value || "") + "</span>" ));
             };
             
             let element = widget.domEl;
@@ -3583,9 +3583,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 wValue.classList.add("selected");
             if(options.buttonClass)
                 wValue.classList.add(options.buttonClass);
-            wValue.innerHTML = "<span>" + 
+            wValue.innerHTML = 
                 (options.icon ? "<a class='" + options.icon + "'></a>" : 
-                ( options.img  ? "<img src='" + options.img + "'>" : (value || ""))) + "</span>";
+                ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
 
             wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
           

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.20",
+    version: "0.1.22",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -3564,9 +3564,9 @@ class Panel {
             return wValue.innerText;
         };
         widget.onSetValue = (new_value) => {
-            wValue.innerHTML = "<span>" + 
+            wValue.innerHTML = 
             (options.icon ? "<a class='" + options.icon + "'></a>" : 
-            ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (new_value || "") + "</span>" ));
         };
 
         let element = widget.domEl;
@@ -3579,9 +3579,9 @@ class Panel {
             wValue.classList.add("selected");
         if(options.buttonClass)
             wValue.classList.add(options.buttonClass);
-        wValue.innerHTML = "<span>" + 
+        wValue.innerHTML = 
             (options.icon ? "<a class='" + options.icon + "'></a>" : 
-            ( options.img  ? "<img src='" + options.img + "'>" : (value || ""))) + "</span>";
+            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
 
         wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
         

package/changelog.md

@@ -1,5 +1,19 @@
 # lexgui.js changelog
 
+## 0.1.22
+
+Added REDO using "Ctrl+Y".
+Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
+Added "Ctrl+G" to scroll to specific line.
+General bug fixes.
+
+## 0.1.21
+
+Added "Ctrl+F" to find text in code tabs.
+"Shift+Backspace" deletes word at current position.
+Added "Markdown" syntax highlighting. 
+Improved hightlighting of tag languages (HTML, Markdown, XML).
+
 ## 0.1.20
 
 Active line is now hightlighted.

package/examples/code_editor.html

@@ -23,7 +23,7 @@
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = false;
+        const file_explorer = true;
 
         if( !file_explorer )
         {
@@ -53,12 +53,12 @@
         });
 
         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( "../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" );
         
         if( !file_explorer )

package/package.json

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