lexgui 0.5.3 → 0.5.5

package/build/components/codeeditor.js

@@ -491,9 +491,9 @@ class CodeEditor {
 
                 searchPanel.sameLine( 4 );
                 searchPanel.addText( null, "", null, { placeholder: "Find" } );
-                searchPanel.addButton( null, "up", () => this.search( null, true ), { className: 'micro', icon: "fa fa-arrow-up" } );
-                searchPanel.addButton( null, "down", () => this.search(), { className: 'micro', icon: "fa fa-arrow-down" } );
-                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { className: 'micro', icon: "fa fa-xmark" } );
+                searchPanel.addButton( null, "up", () => this.search( null, true ), { icon: "fa fa-arrow-up" } );
+                searchPanel.addButton( null, "down", () => this.search(), { icon: "fa fa-arrow-down" } );
+                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { icon: "fa fa-xmark" } );
 
                 box.querySelector( 'input' ).addEventListener( 'keyup', e => {
                     if( e.key == 'Escape' ) this.hideSearchBox();
@@ -530,7 +530,7 @@ class CodeEditor {
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
-            this.codeSizer.className = "code-sizer";
+            this.codeSizer.className = "code-sizer pseudoparent-tabs";
 
             // Append all childs
             while( this.codeScroller.firstChild )
@@ -1535,9 +1535,9 @@ class CodeEditor {
             let panel = new LX.Panel({ className: "lexcodetabinfo", width: "calc(100%)", height: "auto" });
 
             panel.sameLine();
-            panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { xmaxWidth: "48px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { xmaxWidth: "48px", signal: "@cursor-pos" });
+            panel.addLabel( this.code.title, { fit: true, signal: "@tab-name" });
+            panel.addLabel( "Ln " + 1, { fit: true, signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { fit: true, signal: "@cursor-pos" });
             panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
                 LX.addContextMenu( "Spaces", event, m => {
                     const options = [ 2, 4, 8 ];
@@ -1619,7 +1619,7 @@ class CodeEditor {
         this.processFocus(false);
 
         LX.addContextMenu( null, e, m => {
-            m.add( "Create", this.addTab.bind( this, "unnamed.js", true ) );
+            m.add( "Create", this.addTab.bind( this, "unnamed.js", true, "", { language: "JavaScript" } ) );
             m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
         });
     }
@@ -1731,7 +1731,8 @@ class CodeEditor {
             title: code.title,
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+            allowDelete: true
         } );
 
         // Move into the sizer..
@@ -1805,7 +1806,8 @@ class CodeEditor {
             title: code.title,
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
-            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton )
+            onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
+            allowDelete: true
         });
 
         // Move into the sizer..
@@ -3911,14 +3913,15 @@ class CodeEditor {
     }
 
     _measureChar( char = "a", use_floating = false, get_bb = false ) {
-
-        var line = document.createElement( "pre" );
-        var text = document.createElement( "span" );
+        const parentContainer = LX.makeContainer( null, "lexcodeeditor", "", document.body );
+        const container = LX.makeContainer( null, "code", "", parentContainer );
+        const line = document.createElement( "pre" );
+        container.appendChild( line );
+        const text = document.createElement( "span" );
         line.appendChild( text );
         text.innerText = char;
-        this.code.appendChild( line );
         var rect = text.getBoundingClientRect();
-        LX.UTILS.deleteElement( line );
+        LX.UTILS.deleteElement( parentContainer );
         const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
@@ -4489,8 +4492,8 @@ CodeEditor.keywords = {
                   'arguments', 'extends', 'instanceof', 'Infinity'],
     'C': ['int', 'float', 'double', 'long', 'short', 'char', 'const', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'signed', 'volatile', 'unsigned', 'static', 'extern', 'enum', 'register',
         'union'],
-    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr',
-            'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static'],
+    'C++': ['int', 'float', 'double', 'bool', 'long', 'short', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'class', 'struct', 'typedef', 'nullptr',
+            'NULL', 'signed', 'unsigned', 'namespace', 'enum', 'extern', 'union', 'sizeof', 'static', 'private', 'public'],
     'CMake': ['cmake_minimum_required', 'set', 'not', 'if', 'endif', 'exists', 'string', 'strequal', 'add_definitions', 'macro', 'endmacro', 'file', 'list', 'source_group', 'add_executable',
         'target_include_directories', 'set_target_properties', 'set_property', 'add_compile_options', 'add_link_options', 'include_directories', 'add_library', 'target_link_libraries',
         'target_link_options', 'add_subdirectory', 'add_compile_definitions', 'project', 'cache'],

package/build/components/timeline.js

@@ -176,7 +176,7 @@ class Timeline {
             header.addTitle(this.name );
         }
 
-        const buttonContainer = LX.makeContainer(["auto", "100%"], "", { display: "flex" });
+        const buttonContainer = LX.makeContainer( ["auto", "100%"], "flex flex-row" );
 
         header.queue( buttonContainer );
 

package/build/lexgui.css

@@ -34,7 +34,7 @@
     --global-text-secondary: light-dark(#262627, #d1d1d3);
     --global-text-tertiary: light-dark(#3c3c3df5, #aaaaaa);
     --global-text-quaternary: light-dark(#515152f5, #807f7f);
-    --global-intense-background: light-dark(#fefefe, #030304);
+    --global-intense-background: light-dark(#fefefe, #040405);
     --global-medium-background: #252525;
     --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
     --global-color-transparent: #00000000;
@@ -182,6 +182,7 @@ body {
     margin: 0;
     padding: 0;
     font-family: var(--global-font);
+    background-color: var(--global-color-primary);
 }
 
 *,
@@ -332,7 +333,7 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     outline: none;
 }
 
-:root[data-strictVP="false"] {
+:root[data-strictVP="false"] #lexroot {
     bottom: unset;
 }
 
@@ -344,8 +345,11 @@ svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
     max-width: 256px;
 }
 
-.lexicon {
+.lock {
     margin-left: 4px;
+}
+
+.lexicon {
     cursor: pointer;
     line-height: inherit !important;
     color: var(--global-text-secondary);
@@ -896,13 +900,43 @@ a svg, svg path {
 
 /* Generic */
 
-.lexcontainer {
-    display: flex;
-    flex-direction: row;
+.lexcontainer.wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1400px;
+    border: 0px solid var(--global-color-tertiary);
 }
 
-.lexcontainer.col {
-    flex-direction: column;
+@media (min-width: 1400px) {
+    .lexcontainer.wrapper {
+        border-left-width: 1px;
+        border-right-width: 1px;
+    }
+}
+
+@media (min-width: 1800px) {
+    .lexcontainer.wrapper {
+        max-width: 1536px;
+    }
+}
+
+.lextooltip {
+    position: fixed;
+    background-color: var(--global-text-primary);
+    color: var(--global-color-primary);
+    font-size: var(--global-font-size-sm);
+    padding: 0.2rem;
+    padding-inline: 0.5rem;
+    border-radius: 0.4rem;
+    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    animation-duration: 400ms;
+	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	will-change: transform, opacity;
+    animation-name: slideUpAndFade;
+}
+
+.lextooltip[data-closed] {
+    opacity: 0;
 }
 
 /* Dropdown Menu */
@@ -1067,7 +1101,6 @@ a svg, svg path {
 
 .lexsplitbar.vertical {
     cursor: ns-resize;
-    transform: translateY(-3px);
     left: calc(50% - 32px);
 }
 
@@ -1095,6 +1128,9 @@ a svg, svg path {
 .lexbranch {
     width: 100%;
     border-radius: 6px;
+}
+
+.lexpanel .lexbranch:not(:last-of-type) {
     margin-bottom: 4px !important;
 }
 
@@ -1107,7 +1143,6 @@ a svg, svg path {
 
 .lexbranch.last .lexbranchcontent {
     overflow: hidden;
-    margin-bottom: 6px;
 }
 
 .lexbranchtitle {
@@ -1177,10 +1212,6 @@ a svg, svg path {
     align-content: center;
 }
 
-.lexbranch.first .lexbranchtitle {
-    margin-top: 4px;
-}
-
 .lexbranch.last.closed .lexbranchtitle {
     margin-bottom: 6px;
 }
@@ -1297,9 +1328,12 @@ a svg, svg path {
 
 .lexwidget .inputicon {
     padding: 6px;
-    font-size: var(--global-font-size-sm);
+    font-size: var(--global-font-size-xs);
     align-self: center;
     text-align: center;
+    margin-left: 4px;
+    position: absolute;
+    z-index: 1;
 }
 
 .lexseparator {
@@ -1353,10 +1387,11 @@ a svg, svg path {
 /* Text Widget */
 
 .lexwidget input.lextext, .lexwidget div.lextext {
+    width: 100%;
     border-radius: 6px;
     position: relative;
     border: 1px solid transparent;
-    padding: 4px 12px !important;
+    padding: 6px 12px;
 }
 
 .lexwidget .lextext:disabled {
@@ -1409,6 +1444,7 @@ a svg, svg path {
 /* TextArea Widget */
 
 .lexwidget textarea {
+    width: 100%;
     word-break: break-word;
     font-family: var(--global-font);
     background: none;
@@ -1420,6 +1456,25 @@ a svg, svg path {
     transition: 0.1s linear;
 }
 
+.lexwidget textarea.outline {
+    background: var(--global-color-primary);
+    border: 1px solid #7a797c4f;
+}
+
+.lexwidget textarea.nobg {
+    background: none;
+    border: 1px solid transparent;
+}
+
+.lexwidget textarea.dashed {
+    background: var(--global-color-primary);
+    border: 1px dashed #7a797c4f;
+}
+
+.lexwidget textarea.outline:hover, .lexwidget .lextext.nobg:hover {
+    background: none;
+}
+
 .lexwidget textarea:disabled {
     resize: none;
 }
@@ -2156,7 +2211,7 @@ dialog .lexselect .lexselectoptions {
 .lexwidget .vecbox .drag-icon {
     position: absolute;
     width: 2px;
-    right: 0.25em;
+    right: 1em;
     top: 25%;
     font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
@@ -2547,12 +2602,11 @@ input[type=number] {
 .lextree .lextreetools {
     background: var(--global-color-tertiary);
     padding: 2px;
-    padding-left: 6px;
-    padding-right: 6px;
+    padding-inline: 8px;
     display: flex;
     align-items: center;
     border-radius: 10px;
-    margin-top: 4px;
+    gap: 0.5rem;
 }
 
 .lexwidget.nobranch .lextree .lextreetools {
@@ -2569,15 +2623,10 @@ input[type=number] {
 }
 
 .lextree .lextreetools.notitle {
-    /* padding-top: 14px; */
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
 
-.lextree .lextreetools a {
-    margin-right: 8px;
-}
-
 .lextree span {
     padding: 8px;
     display: block;
@@ -2625,9 +2674,13 @@ input[type=number] {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    transition-property: color, background-color, border-color;
+    transition-timing-function: ease-out;
+    transition-duration: .15s;
 }
 
 .lextree .lextreeitem input {
+    color: var(--global-color-primary);
     padding: 0;
     border: none;
 }
@@ -2668,8 +2721,12 @@ input[type=number] {
 }
 
 .lextree .lextreeitem.selected {
-    color: var(--global-text-primary);
-    background: light-dark(var(--global-color-accent-light), var(--global-color-accent));
+    color: #f4f4f5;
+    background: var(--global-color-accent);
+}
+
+.lextree .lextreeitem.selected a.lexicon {
+    color: #f4f4f5;
 }
 
 .lextree .lextreeitem a.hierarchy {
@@ -2680,18 +2737,6 @@ input[type=number] {
     font-size: var(--global-font-size-sm);
 }
 
-.lextree .lextreeitem .itemicon:hover {
-    color: var(--global-color-accent);
-}
-
-.lextree .lextreeitem.selected .itemicon:hover {
-    color: var(--global-text-secondary);
-}
-
-.lextree .lextreeitem .itemicon:active {
-    margin-top: 7px;
-}
-
 /* File Input */
 
 .lexfileinput::file-selector-button {
@@ -2795,7 +2840,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexbadge {
     border-radius: 0.35rem;
-    color: #fff;
+    color: var(--global-text-primary);
     border: 1px solid var(--badge-color, #14171a);
     width: fit-content;
     justify-content: center;
@@ -2821,6 +2866,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: #0000;
     background-image: none;
 }
+.lexbadge.no-bg {
+    background: none;
+    border: none;
+}
 /* Sizes */
 .lexbadge.xs { padding-inline: 0.4rem; font-size: var(--global-font-size-xs); }
 .lexbadge.sm { padding-inline: 0.5rem; font-size: var(--global-font-size-sm); }
@@ -2874,7 +2923,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexmenubox {
-    position: absolute;
+    position: fixed;
     z-index: 1001;
     background-color: #111111f3;
     border: 1px solid #aaaaaa48;
@@ -3066,8 +3115,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexcontextmenu {
     z-index: 102;
-    position: absolute;
-    /* padding-right: 20px; */
+    position: fixed;
     border-radius: 6px;
     box-shadow: 0 0 6px rgba(46, 46, 46, 0.2) !important;
     background-color: var(--global-blur-background);
@@ -3170,7 +3218,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     padding: 10px;
     display: flex;
     flex-direction: column;
-    gap: 0.2rem;
 }
 
 .lexsidebar *::-webkit-scrollbar {
@@ -3201,8 +3248,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexsidebarseparator {
-    background-color: #5251514d;
-    width: 100%;
+    background-color: var(--global-color-tertiary);
+    width: calc(100% + 20px);
     height: 1px;
     margin: 0 auto;
     margin-top: 0.4rem;
@@ -3212,7 +3259,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexsidebar .lexsidebarfilter {
     transform: translate(0, 0);
     opacity: 1;
-    margin-block: 0.5rem;
+    margin-bottom: 0.5rem;
     transition: all 0.2s cubic-bezier(0,0,.2,1);
 }
 
@@ -3253,8 +3300,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexsidebar .lexsidebarentry {
     width: 100%;
-    padding: 6px;
     padding-inline: 8px;
+    padding-block: 6px;
+    margin-block: 0.15rem;
     border-radius: 8px;
     cursor: pointer;
     -webkit-user-select: none;
@@ -3283,7 +3331,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     transform: scale(0.99);
 }
 
-.lexsidebar .lexsidebarentry div {
+.lexsidebar .lexsidebarentry .lexsidebarentrycontent {
+    font-weight: 500;
     display: flex;
     gap: 0.8em;
     margin: 0;
@@ -3291,22 +3340,26 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     opacity: 0.95;
 }
 
-.lexsidebar .lexsidebarentry div i {
+.lexsidebar .lexsidebarentry .lexsidebarentrycontent i {
     min-width: 22px;
     max-width: 22px;
     margin: auto 0;
     text-align: center;
-    margin-left: -2px;
+    font-size: var(--global-font-size-lg);
 }
 
-.lexsidebar .lexsidebarentry div a:not(.lexicon) {
+.lexsidebar .lexsidebarentry .lexsidebarentrycontent a:not(.lexicon) {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     align-content: center;
 }
 
-.lexsidebar .lexsidebarentry a.lexicon {
+.lexsidebar .lexsidebarentry .lexsidebarentryicon {
+    margin-left: 2px;
+}
+
+.lexsidebar .lexsidebarentry a.lexicon:not(.lexsidebarentryicon) {
     margin-left: auto;
 }
 
@@ -3362,30 +3415,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: none !important;
 }
 
-.lexsidebar.collapsed .lexsidebarcontent div a {
+.lexsidebar.collapsed .lexsidebarentrycontent div, .lexsidebar.collapsed .lexsidebarcontent div a:not(.lexsidebarentryicon) {
     display: none;
 }
 
-.lexsidebar .lexsidebarentry .lexsidebarentrydesc {
-    position: absolute;
-    margin-left: 32px;
-    font-weight: 600;
-    background-color: var(--global-text-primary);
-    color: var(--global-color-primary);
-    font-size: var(--global-font-size);
-    border-radius: 6px;
-    text-align: center;
-    opacity: 0;
-    transform: translate(-12px, 0);
-    z-index: 102;
-    padding: 4px 8px;
-    transition: opacity ease-in 0.15s, transform ease-in 0.15s;
-    pointer-events: none;
-}
+.lexsidebar.collapsed .lexsidebarentry:hover {
+    display: flex;
+ }
 
-.lexsidebar.collapsed .lexsidebarentry:hover .lexsidebarentrydesc {
-   opacity: 1;
-   transform: translate(0, 0);
+.lexsidebar .lexsidebarheader {
+    margin-bottom: 0.5rem;
 }
 
 .lexsidebar .lexsidebarfooter, .lexsidebar .lexsidebarheader {
@@ -3627,7 +3666,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     text-align: center;
     align-items: center;
     padding: 3px;
-    color: var(--global-text-secondary);
+    color: var(--global-text-tertiary);
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -3637,9 +3676,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs .lexareatab.thumb {
-    position: absolute;
     background: var(--global-color-accent);
     z-index: 0;
+    height: 22px;
+    position: absolute;
     transition: linear transform 0.15s;
 }
 
@@ -3647,7 +3687,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: var(--global-color-tertiary);
     border-radius: 8px;
     padding: 3px;
-    margin: 6px;
     gap: 0.1em;
 }
 
@@ -3656,7 +3695,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     transition: 0.1s;
     background: none;
     border-radius: 6px;
-    color: var(--global-text-secondary);
 }
 
 .lexareatabs.fit {
@@ -4783,7 +4821,6 @@ ul.lexassetscontent {
 
 /* Code Editor */
 .codebasearea {
-
     display: flex;
     position: relative;
     overflow: inherit;
@@ -4871,20 +4908,25 @@ ul.lexassetscontent {
     z-index: 3;
     bottom: 0px;
     justify-items: end;
+    padding-inline: 1rem;
+}
+
+.lexcodetabinfo .lexinlinewidgets {
+    justify-content: end;
 }
 
 .lexcodegutter {
     width: 48px;
     height: calc(100% - 65px);
     background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
-    margin-top: 28px;
+    margin-top: 31px;
     overflow: hidden;
     position: absolute;
     top: 0;
 }
 
 .lexcodeeditor .codetabsarea {
-    height: calc(100% - 64px) !important;
+    height: calc(100% - 80px) !important;
     background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
     overflow: scroll;
 }
@@ -4916,7 +4958,6 @@ ul.lexassetscontent {
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: "ss04", "ss05";
     font-size: var(--code-editor-font-size);
-    /* padding-right: 6px; */
     position: relative;
 }
 
@@ -5053,7 +5094,7 @@ ul.lexassetscontent {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    margin-top: 26px;
+    margin-top: 31px;
     z-index: 1 !important;
     right: 0px;
     pointer-events: none;
@@ -5120,7 +5161,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox {
     background-color: var(--global-color-secondary);
-    width: 256px;
+    /* width: 256px; */
     position: absolute;
     right: 6px;
     top: 26px;
@@ -5129,8 +5170,9 @@ ul.lexassetscontent {
     border: 1px solid var(--global-color-tertiary);
     box-shadow: 0 0px 4px #101010;
     overflow-y: scroll;
-    transform: translateY(-72px);
-    transition: transform 0.2s ease-in;
+    transform: translateY(-96px);
+    opacity: 0;
+    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
 }
 
 .lexcodeeditor .searchbox.gotoline {
@@ -5139,6 +5181,7 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox.opened {
     transform: translateY(0px);
+    opacity: 1;
 }
 
 .lexcodeeditor .searchbox .lexpanel span {
@@ -5212,6 +5255,10 @@ ul.lexassetscontent {
     border: 2px solid var(--global-color-primary);
 }
 
+.lexcodesnippet .lexareatabs.row {
+    border-radius: 0;
+}
+
 .lexcodesnippet .lexwindowbuttons {
     width: 100px;
     padding-inline: 16px;