lexgui 0.6.6 → 0.6.8

package/build/components/codeeditor.js

@@ -221,8 +221,9 @@ class CodeEditor {
 
     static __instances  = [];
 
-    static CURSOR_LEFT  = 1;
-    static CURSOR_TOP   = 2;
+    static CURSOR_LEFT      = 1;
+    static CURSOR_TOP       = 2;
+    static CURSOR_LEFT_TOP  = CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP;
 
     static SELECTION_X      = 1;
     static SELECTION_Y      = 2
@@ -265,8 +266,6 @@ class CodeEditor {
 
             panel.addTitle( "EXPLORER" );
 
-            this._tabStorage = {};
-
             let sceneData = {
                 'id': 'WORKSPACE',
                 'skipVisibility': true,
@@ -320,6 +319,7 @@ class CodeEditor {
         this.skipInfo = options.skipInfo ?? false;
         this.disableEdition = options.disableEdition ?? false;
 
+        this._tabStorage = {};
         this.tabs = this.area.addTabs( { onclose: (name) => {
             delete this.openedTabs[ name ];
             if( Object.keys( this.openedTabs ).length < 2 )
@@ -756,31 +756,43 @@ class CodeEditor {
             let idx = firstNonspaceIndex( this.code.lines[ ln ] );
 
             // We already are in the first non space index...
-            if(idx == cursor.position) idx = 0;
+            if( idx == cursor.position ) idx = 0;
 
             const prestring = this.code.lines[ ln ].substring( 0, idx );
             let lastX = cursor.position;
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
-            if(idx > 0)
+            if( idx > 0 )
+            {
                 this.cursorToString( cursor, prestring );
-            this.setScrollLeft( 0 );
+            }
+            else
+            {
+                // No spaces, start from char 0
+                idx = 0;
+            }
 
-            // Merge cursors
+            this.setScrollLeft( 0 );
             this.mergeCursors( ln );
 
             if( e.shiftKey && !e.cancelShift )
             {
                 // Get last selection range
                 if( cursor.selection )
+                {
                     lastX += cursor.selection.chars;
+                }
 
                 if( !cursor.selection )
+                {
                     this.startSelection( cursor );
+                }
 
                 var string = this.code.lines[ ln ].substring( idx, lastX );
                 if( cursor.selection.sameLine() )
+                {
                     cursor.selection.selectInline( cursor, idx, cursor.line, this.measureString( string ) );
+                }
                 else
                 {
                     this._processSelection( cursor, e );
@@ -976,7 +988,7 @@ class CodeEditor {
                         }
                         else {
                             cursor.selection.invertIfNecessary();
-                            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
+                            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
                             this.cursorToLine( cursor, cursor.selection.fromY, true );
                             this.cursorToPosition( cursor, cursor.selection.fromX );
                             this.endSelection();
@@ -1057,7 +1069,7 @@ class CodeEditor {
                         else
                         {
                             cursor.selection.invertIfNecessary();
-                            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
+                            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
                             this.cursorToLine( cursor, cursor.selection.toY );
                             this.cursorToPosition( cursor, cursor.selection.toX );
                             this.endSelection();
@@ -1090,7 +1102,7 @@ class CodeEditor {
             this.addTab("+", false, "New File");
         }
 
-        this.addTab( options.name || "untitled", true, options.title, { language: "Plain Text" } );
+        this.addTab( options.name || "untitled", true, options.title, { language: options.highlight ?? "Plain Text" } );
 
         // Create inspector panel
         let panel = this._createPanelInfo();
@@ -1666,14 +1678,16 @@ class CodeEditor {
         }
 
         this._removeSecondaryCursors();
-        var cursor = this._getCurrentCursor( true );
 
+        var cursor = this._getCurrentCursor( true );
         this.saveCursor( cursor, this.code.cursorState );
-
         this.code = this.loadedTabs[ name ];
         this.restoreCursor( cursor, this.code.cursorState );
 
         this.endSelection();
+
+        this.hideAutoCompleteBox();
+
         this._updateDataInfoPanel( "@tab-name", name );
 
         if( this.code.languageOverride )
@@ -1771,7 +1785,7 @@ class CodeEditor {
         if( selected )
         {
             this.code = code;
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
             this.processLines();
         }
 
@@ -1845,10 +1859,26 @@ class CodeEditor {
 
         // Select as current...
         this.code = code;
-        this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+        this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
         this.processLines();
         this._changeLanguageFromExtension( LX.getExtension( name ) );
-        this._updateDataInfoPanel( "@tab-name", code.tabname );
+        this._updateDataInfoPanel( "@tab-name", code.tabName );
+    }
+
+    closeTab( name, eraseAll ) {
+
+        this.tabs.delete( name );
+
+        if( eraseAll )
+        {
+            delete this.openedTabs[ name ];
+            delete this.loadedTabs[ name ];
+            delete this._tabStorage[ name ];
+        }
+    }
+
+    getSelectedTabName() {
+        return this.tabs.selected;
     }
 
     loadTabFromFile() {
@@ -2204,6 +2234,14 @@ class CodeEditor {
         return;
 
         const key = e.key ?? e.detail.key;
+
+        // Do not propagate "space to scroll" event
+        if( key == ' ' )
+        {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
         const target = e.detail.targetCursor;
 
         // Global keys
@@ -2343,7 +2381,9 @@ class CodeEditor {
 
         // keys with length > 1 are probably special keys
         if( key.length > 1 && this.specialKeys.indexOf( key ) == -1 )
+        {
             return;
+        }
 
         let lidx = cursor.line;
         this.code.lines[ lidx ] = this.code.lines[ lidx ] ?? "";
@@ -2529,11 +2569,11 @@ class CodeEditor {
 
     async _copyContent( cursor ) {
 
-        let text_to_copy = "";
+        let textToCopy = "";
 
         if( !cursor.selection )
         {
-            text_to_copy = "\n" + this.code.lines[ cursor.line ];
+            textToCopy = "\n" + this.code.lines[ cursor.line ];
         }
         else
         {
@@ -2553,27 +2593,30 @@ class CodeEditor {
             const num_chars = cursor.selection.chars + ( cursor.selection.toY - cursor.selection.fromY ) * separator.length;
             const text = code.substr( index, num_chars );
             const lines = text.split( separator );
-            text_to_copy = lines.join('\n');
+            textToCopy = lines.join('\n');
         }
 
-        navigator.clipboard.writeText( text_to_copy ).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+        navigator.clipboard.writeText( textToCopy );
+            // .then(() => console.log("Successfully copied"), (err) => console.error("Error"));
     }
 
     async _cutContent( cursor ) {
 
         let lidx = cursor.line;
-        let text_to_cut = "";
+        let textToCut = "";
 
         this._addUndoStep( cursor, true );
 
         if( !cursor.selection )
         {
-            text_to_cut = "\n" + this.code.lines[ cursor.line ];
+            textToCut = "\n" + this.code.lines[ cursor.line ];
             this.code.lines.splice( lidx, 1 );
             this.processLines();
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
             if( this.code.lines[ lidx ] == undefined )
+            {
                 this.lineUp( cursor );
+            }
         }
         else
         {
@@ -2581,24 +2624,27 @@ class CodeEditor {
             if( cursor.selection ) cursor.selection.invertIfNecessary();
 
             const separator = "_NEWLINE_";
-            let code = this.code.lines.join(separator);
+            let code = this.code.lines.join( separator );
 
             // Get linear start index
             let index = 0;
 
-            for(let i = 0; i <= cursor.selection.fromY; i++)
+            for( let i = 0; i <= cursor.selection.fromY; i++ )
+            {
                 index += (i == cursor.selection.fromY ? cursor.selection.fromX : this.code.lines[ i ].length);
+            }
 
             index += cursor.selection.fromY * separator.length;
-            const num_chars = cursor.selection.chars + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
-            const text = code.substr(index, num_chars);
-            const lines = text.split(separator);
-            text_to_cut = lines.join('\n');
+            const numChars = cursor.selection.chars + (cursor.selection.toY - cursor.selection.fromY) * separator.length;
+            const text = code.substr( index, numChars );
+            const lines = text.split( separator );
+            textToCut = lines.join('\n');
 
             this.deleteSelection( cursor );
         }
 
-        navigator.clipboard.writeText( text_to_cut ).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
+        navigator.clipboard.writeText( textToCut );
+            // .then(() => console.log("Successfully cut"), (err) => console.error("Error"));
     }
 
     _duplicateLine( lidx, cursor ) {
@@ -3491,7 +3537,7 @@ class CodeEditor {
         this._removeSecondaryCursors();
 
         var cursor = this._getCurrentCursor();
-        this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP, cursor );
+        this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP, cursor );
 
         this.startSelection( cursor );
 

package/build/components/docmaker.js

@@ -190,12 +190,14 @@ function MAKE_CODE( text, language = "js" )
 
 window.MAKE_CODE = MAKE_CODE;
 
-function MAKE_BULLET_LIST( list )
+function MAKE_LIST( list, type )
 {
-    console.assert(list && list.length > 0);
-    let ul = document.createElement('ul');
+    const validTypes = [ 'bullet', 'numbered' ];
+    console.assert( list && list.length > 0 && validTypes.includes(type), "Invalid list type or empty list" + type );
+    const typeString = type == 'bullet' ? 'ul' : 'ol';
+    let ul = document.createElement( typeString );
     for( var el of list ) {
-        let li = document.createElement('li');
+        let li = document.createElement( 'li' );
         li.className = "leading-loose";
         li.innerHTML = el;
         ul.appendChild( li );
@@ -203,8 +205,20 @@ function MAKE_BULLET_LIST( list )
     mainContainer.appendChild( ul );
 }
 
+function MAKE_BULLET_LIST( list )
+{
+    MAKE_LIST( list, 'bullet' );
+}
+
 window.MAKE_BULLET_LIST = MAKE_BULLET_LIST;
 
+function MAKE_NUMBERED_LIST( list )
+{
+    MAKE_LIST( list, 'numbered' );
+}
+
+window.MAKE_NUMBERED_LIST = MAKE_NUMBERED_LIST;
+
 function ADD_CODE_LIST_ITEM( item, target )
 {
     target = target ?? window.listQueued;
@@ -388,25 +402,19 @@ function INSERT_VIDEO( src, caption = "", controls = true, autoplay = false )
 
 window.INSERT_VIDEO = INSERT_VIDEO;
 
-function MAKE_NOTE( string, title = "Note" )
+function MAKE_NOTE( string, warning, title, icon )
 {
     console.assert( string );
 
-    let note = document.createElement( 'div' );
-    note.className = "note";
+    const note = LX.makeContainer( [], "border rounded-lg overflow-hidden text-md fg-secondary my-6", "", mainContainer );
 
     let header = document.createElement( 'div' );
-    header.className = "note-header";
-    header.appendChild( LX.makeIcon( "NotepadText" ) );
-    header.innerHTML += "<b>" + title + "</b>";
-
-    let body = document.createElement( 'div' );
-    body.className = "note-body";
-    body.innerHTML = string;
-
+    header.className = "flex bg-tertiary font-semibold px-3 py-2 gap-2 fg-secondary";
+    header.appendChild( LX.makeIcon( icon ?? ( warning ? "MessageSquareWarning" : "NotepadText" ) ) );
+    header.innerHTML += ( title ?? ( warning ? "Important" : "Note" ) );
     note.appendChild( header );
-    note.appendChild( body );
-    mainContainer.appendChild( note );
+
+    const body = LX.makeContainer( [], "leading-6 p-3", string, note );
 }
 
 window.MAKE_NOTE = MAKE_NOTE;

package/build/lexgui-docs.css

@@ -151,7 +151,7 @@ code.inline.desc {
 }
 
 #content strong {
-	font-weight:900;
+	font-weight:700;
 }
 
 #content a.permalink {
@@ -225,29 +225,6 @@ code.inline.desc {
 
 }
 
-#goUpButton {
-	position: fixed;
-	z-index: 10;
-	bottom: 32px;
-	right: 32px;
-	border: 1px solid #666;
-	border-radius: 6px;
-	outline: none;
-	background: none;
-	font-size: 18px;
-	padding: 6px;
-	color: #bbb;
-	transition: all 0.25s;
-	width: 32px;
-	height: 32px;
-}
-
-#goUpButton:hover {
-	color: #ccc;
-	border-color: #ccc;
-	cursor: pointer;
-}
-
 pre .str, code .str { color: #c79369; } /* string */
 pre .kwd, code .kwd { color: #2194ce; } /* keyword */
 pre .com, code .com { color: #999999; } /* comment */
@@ -295,50 +272,17 @@ code:has(.constructor) {
 }
 
 #content span.solid {
-	/* background-color: var(--global-selected); */
 	border-radius: 8px;
 	padding: 2px;
 	padding-inline: 8px;
 }
 
 #content span.outline {
-	/* border: 1px solid var(--global-accent); */
-	/* color: var(--global-selected); */
 	border-radius: 8px;
 	padding: 2px;
 	padding-inline: 8px;
 }
 
-.note {
-    border-radius: 8px;
-    overflow: hidden;
-    margin: 16px 0;
-    font-size: 0.95rem;
-    color: var(--global-text-secondary);
-    box-shadow: 0 1px 3px var(--global-color-tertiary);
-}
-
-.note-header {
-    background-color: var(--global-color-tertiary);
-    color: var(--global-text-secondary);
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-    font-weight: bold;
-}
-
-.note-header svg {
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-}
-
-.note-body {
-    padding: 12px;
-    line-height: 1.5;
-}
-
 :root[data-theme="light"] #content {
 	color: #202124;
 }

package/build/lexgui.css

@@ -3835,10 +3835,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexwidget:has(.lextogglesubmenu),
 .lexwidget:has(.lexcustomcontainer) {
     border-radius: 6px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: auto auto;
     transition: background-color 0.2s ease-out;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .lexwidget:has(.lexarrayitems)[data-opened=true],