lexgui 0.6.7 → 0.6.8

package/build/components/codeeditor.js

@@ -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 );
@@ -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 )
@@ -2220,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
@@ -2359,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 ] ?? "";
@@ -2545,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
         {
@@ -2569,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
         {
@@ -2597,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 ) {

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],

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.6.7",
+    version: "0.6.8",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -6432,16 +6432,15 @@ class Area {
         if( auto && type == "vertical" )
         {
             // Listen resize event on first area
-            const resizeObserver = new ResizeObserver( entries => {
+            this._autoVerticalResizeObserver = new ResizeObserver( entries => {
                 for ( const entry of entries )
                 {
                     const size = entry.target.getComputedSize();
                     area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
                 }
-                resizeObserver.disconnect();
             });
 
-            resizeObserver.observe( area1.root );
+            this._autoVerticalResizeObserver.observe( area1.root );
         }
 
         // Being minimizable means it's also resizeable!
@@ -6963,6 +6962,12 @@ class Area {
             return;
         }
 
+        // When manual resizing, we don't need the observer anymore
+        if( this._autoVerticalResizeObserver )
+        {
+            this._autoVerticalResizeObserver.disconnect();
+        }
+
         const a1 = this.sections[ 0 ];
         var a1Root = a1.root;
 
@@ -7383,7 +7388,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
 
     LX.Panel.prototype[ 'add' + customWidgetName ] = function( name, instance, callback ) {
 
-        options.nameWidth = "100%";
+        const userParams = Array.from( arguments ).slice( 3 );
 
         let widget = new Widget( Widget.CUSTOM, name, null, options );
         this._attachWidget( widget );
@@ -7405,6 +7410,11 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
             }
         };
 
+        widget.onResize = ( rect ) => {
+            const realNameWidth = ( widget.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
+        };
+
         const element = widget.root;
 
         let container, customWidgetsDom;
@@ -7543,6 +7553,11 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
                     }
                 }
 
+                if( options.onCreate )
+                {
+                    options.onCreate.call( this, this, ...userParams );
+                }
+
                 this.clearQueue();
             }
         };
@@ -11574,16 +11589,16 @@ class Table extends Widget {
         container.className = "lextable";
         this.root.appendChild( container );
 
-        this.centered = options.centered ?? false;
-        if( this.centered === true )
+        this._centered = options.centered ?? false;
+        if( this._centered === true )
         {
             container.classList.add( "centered" );
         }
 
+        this.activeCustomFilters = {};
         this.filter = options.filter ?? false;
-        this.toggleColumns = options.toggleColumns ?? false;
         this.customFilters = options.customFilters ?? false;
-        this.activeCustomFilters = {};
+        this._toggleColumns = options.toggleColumns ?? false;
         this._currentFilter = options.filterValue;
 
         data.head = data.head ?? [];
@@ -11591,6 +11606,7 @@ class Table extends Widget {
         data.checkMap = { };
         data.colVisibilityMap = { };
         data.head.forEach( (col, index) => { data.colVisibilityMap[ index ] = true; });
+        this.data = data;
 
         const compareFn = ( idx, order, a, b) => {
             if (a[idx] < b[idx]) return -order;
@@ -11604,7 +11620,7 @@ class Table extends Widget {
         };
 
         // Append header
-        if( this.filter || this.customFilters || this.toggleColumns )
+        if( this.filter || this.customFilters || this._toggleColumns )
         {
             const headerContainer = LX.makeContainer( [ "100%", "auto" ], "flex flex-row" );
 
@@ -11716,7 +11732,7 @@ class Table extends Widget {
                 this._resetCustomFiltersBtn.root.classList.add( "hidden" );
             }
 
-            if( this.toggleColumns )
+            if( this._toggleColumns )
             {
                 const icon = LX.makeIcon( "Settings2" );
                 const toggleColumnsBtn = new LX.Button( "toggleColumnsBtn", icon.innerHTML + "View", (value, e) => {
@@ -11804,7 +11820,7 @@ class Table extends Widget {
                     th.querySelector( "span" ).appendChild( LX.makeIcon( "MenuArrows", { svgClass: "sm" } ) );
 
                     const idx = data.head.indexOf( headData );
-                    if( this.centered && this.centered.indexOf( idx ) > -1 )
+                    if( this._centered?.indexOf && this._centered.indexOf( idx ) > -1 )
                     {
                         th.classList.add( "centered" );
                     }
@@ -11814,7 +11830,7 @@ class Table extends Widget {
                         { name: "Desc", icon: "ArrowDownAZ", callback: sortFn.bind( this, idx, -1 ) }
                     ];
 
-                    if( this.toggleColumns )
+                    if( this._toggleColumns )
                     {
                         menuOptions.push(
                             null,
@@ -11876,6 +11892,9 @@ class Table extends Widget {
                         // Origin row should go to the target row, and the rest should be moved up/down
                         const fromIdx = rIdx - 1;
                         const targetIdx = movePending[ 1 ] - 1;
+
+                        LX.emit( "@on_table_sort", { instance: this, fromIdx, targetIdx } );
+
                         const b = data.body[ fromIdx ];
                         let targetOffset = 0;
 
@@ -12081,7 +12100,7 @@ class Table extends Widget {
                         td.innerHTML = `${ rowData }`;
 
                         const idx = bodyData.indexOf( rowData );
-                        if( this.centered && this.centered.indexOf( idx ) > -1 )
+                        if( this._centered?.indexOf && this._centered.indexOf( idx ) > -1 )
                         {
                             td.classList.add( "centered" );
                         }
@@ -12171,8 +12190,50 @@ class Table extends Widget {
 
         LX.doAsync( this.onResize.bind( this ) );
     }
+
+    getSelectedRows() {
+
+        const selectedRows = [];
+
+        for( const row of this.data.body )
+        {
+            const rowId = LX.getSupportedDOMName( row.join( '-' ) ).substr( 0, 32 );
+            if( this.data.checkMap[ rowId ] === true )
+            {
+                selectedRows.push( row );
+            }
+        }
+
+        return selectedRows;
+    }
+
+    _setCentered( v ) {
+
+        if( v.constructor == Boolean )
+        {
+            const container = this.root.querySelector( ".lextable" );
+            container.classList.toggle( "centered", v );
+        }
+        else
+        {
+            // Make sure this is an array containing which columns have
+            // to be centered
+            v = [].concat( v );
+        }
+
+        this._centered = v;
+
+        this.refresh();
+    }
 }
 
+Object.defineProperty( Table.prototype, "centered", {
+    get: function() { return this._centered; },
+    set: function( v ) { this._setCentered( v ); },
+    enumerable: true,
+    configurable: true
+});
+
 LX.Table = Table;
 
 /**