lexgui 0.7.6 → 0.7.8

package/build/extensions/codeeditor.js

@@ -347,6 +347,20 @@ class CodeEditor {
         this.skipTabs = options.skipTabs ?? false;
         this.useFileExplorer = ( options.fileExplorer ?? false ) && !this.skipTabs;
         this.useAutoComplete = options.autocomplete ?? true;
+        this.allowClosingTabs = options.allowClosingTabs ?? true;
+        this.allowLoadingFiles = options.allowLoadingFiles ?? true;
+        this.highlight = options.highlight ?? 'Plain Text';
+        this.newTabOptions = options.newTabOptions;
+        this.customSuggestions = options.customSuggestions ?? [];
+
+        // Editor callbacks
+        this.onSave = options.onSave ?? options.onsave;  // LEGACY onsave
+        this.onRun = options.onRun ?? options.onrun;     // LEGACY onrun
+        this.onCtrlSpace = options.onCtrlSpace;
+        this.onCreateStatusPanel = options.onCreateStatusPanel;
+        this.onContextMenu = options.onContextMenu;
+        this.onNewTab = options.onNewTab;
+        this.onSelectTab = options.onSelectTab;
 
         // File explorer
         if( this.useFileExplorer )
@@ -377,8 +391,7 @@ class CodeEditor {
                             this.loadTab( event.node.id );
                             break;
                         case LX.TreeEvent.NODE_DELETED:
-                            this.tabs.delete( event.node.id );
-                            delete this.loadedTabs[ event.node.id ];
+                            this.closeTab( event.node.id );
                             break;
                         // case LX.TreeEvent.NODE_CONTEXTMENU:
                         //     LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
@@ -547,36 +560,44 @@ class CodeEditor {
                         return;
                     }
 
-                    this.setScrollBarValue( 'vertical' );
+                    // Vertical scroll
+                    {
+                        this.setScrollBarValue( 'vertical' );
 
-                    const scrollTop = this.getScrollTop();
+                        const scrollTop = this.getScrollTop();
 
-                    // Scroll down...
-                    if( scrollTop > lastScrollTopValue )
-                    {
-                        if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
+                        // Scroll down...
+                        if( scrollTop > lastScrollTopValue )
                         {
-                            const totalLinesInViewport = ( ( this.codeScroller.offsetHeight ) / this.lineHeight )|0;
-                            const scrollDownBoundary =
-                                ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight;
-
-                            if( scrollTop >= scrollDownBoundary )
+                            if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
                             {
-                                this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                                const totalLinesInViewport = ( ( this.codeScroller.offsetHeight ) / this.lineHeight )|0;
+                                const scrollDownBoundary =
+                                    ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight;
+
+                                if( scrollTop >= scrollDownBoundary )
+                                {
+                                    this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                                }
                             }
                         }
-                    }
-                    // Scroll up...
-                    else
-                    {
-                        const scrollUpBoundary = parseInt( this.code.style.top );
-                        if( scrollTop < scrollUpBoundary )
+                        // Scroll up...
+                        else
                         {
-                            this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                            const scrollUpBoundary = parseInt( this.code.style.top );
+                            if( scrollTop < scrollUpBoundary )
+                            {
+                                this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                            }
                         }
+
+                        lastScrollTopValue = scrollTop;
                     }
 
-                    lastScrollTopValue = scrollTop;
+                    // Horizontal scroll
+                    {
+                        this.setScrollBarValue( 'horizontal' );
+                    }
                 });
 
                 this.codeScroller.addEventListener( 'wheel', e => {
@@ -651,16 +672,18 @@ class CodeEditor {
 
             // Add search LINE box
             {
-                var box = document.createElement( 'div' );
-                box.className = "searchbox gotoline";
+                const box = document.createElement( 'div' );
+                box.className = "searchbox";
 
-                var searchPanel = new LX.Panel();
+                const searchPanel = new LX.Panel();
                 box.appendChild( searchPanel.root );
 
+                searchPanel.sameLine( 2 );
                 searchPanel.addText( null, "", ( value, event ) => {
                     input.value = ":" + value.replaceAll( ':', '' );
                     this.goToLine( input.value.slice( 1 ) );
                 }, { placeholder: "Go to line", trigger: "input" } );
+                searchPanel.addButton( null, "x", this.hideSearchLineBox.bind( this ), { icon: "X", title: "Close", tooltip: true } );
 
                 let input = box.querySelector( 'input' );
                 input.addEventListener( 'keyup', e => {
@@ -697,9 +720,6 @@ class CodeEditor {
 
         // Code
 
-        this.highlight = options.highlight ?? 'Plain Text';
-        this.onsave = options.onsave ?? ((code) => { console.log( code, "save" ) });
-        this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
         this.actions = {};
         this.cursorBlinkRate = 550;
         this.tabSpaces = 4;
@@ -784,14 +804,14 @@ class CodeEditor {
                         var numCharsDeleted = 1;
 
                         // Delete full word
-                        if( e.shiftKey )
+                        if( e.ctrlKey )
                         {
                             const [word, from, to] = this.getWordAtPos( cursor, -1 );
 
                             if( word.length > 1 )
                             {
                                 deleteFromPosition = from;
-                                numCharsDeleted = word.length;
+                                numCharsDeleted = word.length - ( to - cursor.position );
                             }
                         }
 
@@ -966,7 +986,7 @@ class CodeEditor {
 
                 if( e.ctrlKey )
                 {
-                    this.onrun( this.getText() );
+                    this.onRun( this.getText() );
                     return;
                 }
 
@@ -1149,7 +1169,7 @@ class CodeEditor {
                 if( e.metaKey ) // Apple devices (Command)
                 {
                     e.preventDefault();
-                    this.actions[ 'End' ].callback( ln, cursor );
+                    this.actions[ 'End' ].callback( ln, cursor, e );
                 }
                 else if( e.ctrlKey ) // Next word
                 {
@@ -1290,7 +1310,7 @@ class CodeEditor {
             for( let url of options.files )
             {
                 const finalUrl = url.constructor === Array ? url[ 0 ] : url;
-                const finalFileName = url.constructor === Array ? url[ 1 ] : url;
+                const finalFileName = url.constructor === Array ? url[ 1 ] : undefined;
 
                 await this.loadFile( finalUrl, { filename: finalFileName, async: loadAsync, callback: ( name, text ) => {
                     filesLoaded++;
@@ -1300,17 +1320,28 @@ class CodeEditor {
 
                         if( options.onFilesLoaded )
                         {
-                            options.onFilesLoaded( this.loadedTabs, numFiles );
+                            options.onFilesLoaded( this, this.loadedTabs, numFiles );
                         }
                     }
                 }});
             }
         }
-        else
+        else if( options.defaultTab ?? true )
         {
             this.addTab( options.name || "untitled", true, options.title, { language: options.highlight ?? "Plain Text" } );
             onLoadAll();
         }
+        else
+        {
+            onLoadAll();
+        }
+    }
+
+    // Clear signals
+    clear() {
+        console.assert( this.rightStatusPanel && this.leftStatusPanel, "No panels to clear." );
+        this.rightStatusPanel.clear();
+        this.leftStatusPanel.clear();
     }
 
     static getInstances()
@@ -1711,7 +1742,12 @@ class CodeEditor {
 
         let panel = new LX.Panel({ className: "lexcodetabinfo flex flex-row", height: "auto" });
 
-        let leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
+        if( this.onCreateStatusPanel )
+        {
+            this.onCreateStatusPanel( panel, this );
+        }
+
+        let leftStatusPanel = this.leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
         leftStatusPanel.sameLine();
 
         if( this.skipTabs )
@@ -1725,7 +1761,7 @@ class CodeEditor {
         leftStatusPanel.endLine( "justify-start" );
         panel.attach( leftStatusPanel.root );
 
-        let rightStatusPanel = new LX.Panel( { height: "auto" } );
+        let rightStatusPanel = this.rightStatusPanel = new LX.Panel( { height: "auto" } );
         rightStatusPanel.sameLine();
         rightStatusPanel.addLabel( this.code?.title ?? "", { id: "EditorFilenameStatusComponent", fit: true, signal: "@tab-name" });
         rightStatusPanel.addButton( null, "Ln 1, Col 1", this.showSearchLineBox.bind( this ), { id: "EditorSelectionStatusComponent", fit: true, signal: "@cursor-data" });
@@ -1856,10 +1892,18 @@ class CodeEditor {
 
         this.processFocus( false );
 
-        new LX.DropdownMenu( e.target, [
+        if( this.onNewTab )
+        {
+            this.onNewTab( e );
+            return;
+        }
+
+        const dmOptions = this.newTabOptions ?? [
             { name: "Create file", icon: "FilePlus", callback: this._onCreateNewFile.bind( this ) },
-            { name: "Load file", icon: "FileUp", callback: this.loadTabFromFile.bind( this ) },
-        ], { side: "bottom", align: "start" });
+            { name: "Load file", icon: "FileUp", disabled: !this.allowLoadingFiles, callback: this.loadTabFromFile.bind( this ) }
+        ];
+
+        new LX.DropdownMenu( e.target, dmOptions, { side: "bottom", align: "start" });
     }
 
     _onCreateNewFile() {
@@ -1869,10 +1913,14 @@ class CodeEditor {
         if( this.onCreateFile )
         {
             options = this.onCreateFile( this );
+            if( !options ) // Skip adding new file
+            {
+                return;
+            }
         }
 
         const name = options.name ?? "unnamed.js";
-        this.addTab( name, true, name, { language: options.language ?? "JavaScript" } );
+        this.addTab( name, true, name, { indexOffset: options.indexOffset, language: options.language ?? "JavaScript" } );
     }
 
     _onSelectTab( isNewTabButton, event, name ) {
@@ -1890,9 +1938,16 @@ class CodeEditor {
 
         this._removeSecondaryCursors();
 
-        var cursor = this.getCurrentCursor( true );
-        this.saveCursor( cursor, this.code.cursorState );
+        const cursor = this.getCurrentCursor( true );
+        const lastCode = this.code;
+
+        if( lastCode )
+        {
+            this.saveCursor( cursor, lastCode.cursorState );
+        }
+
         this.code = this.loadedTabs[ name ];
+
         this.restoreCursor( cursor, this.code.cursorState );
 
         this.endSelection();
@@ -1911,6 +1966,11 @@ class CodeEditor {
         }
 
         this.processLines();
+
+        if( !isNewTabButton && this.onSelectTab )
+        {
+            this.onSelectTab( name, this );
+        }
     }
 
     _onContextMenuTab( isNewTabButton, event, name,  ) {
@@ -1921,19 +1981,19 @@ class CodeEditor {
         }
 
         new LX.DropdownMenu( event.target, [
-            { name: "Close", kbd: "MWB", callback: () => { this.tabs.delete( name ) } },
-            { name: "Close Others", callback: () => {
+            { name: "Close", kbd: "MWB", disabled: !this.allowClosingTabs, callback: () => { this.closeTab( name ) } },
+            { name: "Close Others", disabled: !this.allowClosingTabs, callback: () => {
                 for( const [ key, data ] of Object.entries( this.tabs.tabs ) )
                 {
                     if( key === '+' || key === name ) continue;
-                    this.tabs.delete( key )
+                    this.closeTab( key )
                 }
             } },
-            { name: "Close All", callback: () => {
+            { name: "Close All", disabled: !this.allowClosingTabs, callback: () => {
                 for( const [ key, data ] of Object.entries( this.tabs.tabs ) )
                 {
                     if( key === '+' ) continue;
-                    this.tabs.delete( key )
+                    this.closeTab( key )
                 }
             } },
             null,
@@ -1998,6 +2058,10 @@ class CodeEditor {
         this.loadedTabs[ name ] = code;
         this.openedTabs[ name ] = code;
 
+        const lastCode = this.code;
+
+        this.code = code;
+
         const tabIcon = this._getFileIcon( name );
 
         if( this.useFileExplorer && !isNewTabButton )
@@ -2015,7 +2079,8 @@ class CodeEditor {
                 icon: tabIcon,
                 onSelect: this._onSelectTab.bind( this, isNewTabButton ),
                 onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
-                allowDelete: true
+                allowDelete: this.allowClosingTabs,
+                indexOffset: options.indexOffset
             } );
         }
 
@@ -2024,20 +2089,29 @@ class CodeEditor {
 
         this.endSelection();
 
-        if( selected )
+        if( options.language )
         {
-            this.code = code;
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
+            code.languageOverride = options.language;
+            this._changeLanguage( code.languageOverride );
             this.mustProcessLines = true;
         }
 
-        if( options.language )
+        if( options.codeLines )
         {
-            code.languageOverride = options.language;
-            this._changeLanguage( code.languageOverride );
+            code.lines = options.codeLines;
             this.mustProcessLines = true;
         }
 
+        if( selected )
+        {
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
+            this.mustProcessLines = true;
+        }
+        else
+        {
+            this.code = lastCode;
+        }
+
         this._processLinesIfNecessary();
 
         this._updateDataInfoPanel( "@tab-name", name );
@@ -2155,7 +2229,7 @@ class CodeEditor {
             icon: tabIcon,
             onSelect: this._onSelectTab.bind( this, isNewTabButton ),
             onContextMenu: this._onContextMenuTab.bind( this, isNewTabButton ),
-            allowDelete: true
+            allowDelete: this.allowClosingTabs
         });
 
         // Move into the sizer..
@@ -2173,6 +2247,11 @@ class CodeEditor {
 
     closeTab( name, eraseAll ) {
 
+        if( !this.allowClosingTabs )
+        {
+            return;
+        }
+
         this.tabs.delete( name );
 
         if( eraseAll )
@@ -2290,22 +2369,65 @@ class CodeEditor {
             e.preventDefault();
 
             if( !this.canOpenContextMenu )
+            {
                 return;
+            }
 
             LX.addContextMenu( null, e, m => {
                 m.add( "Copy", () => {  this._copyContent( cursor ); } );
+
                 if( !this.disableEdition )
                 {
                     m.add( "Cut", () => {  this._cutContent( cursor ); } );
                     m.add( "Paste", () => {  this._pasteContent( cursor ); } );
+                }
+
+                if( !this.onContextMenu )
+                {
+                    return;
+                }
+
+                let content = null;
+
+                if( cursor.selection )
+                {
+                    // Some selections don't depend on mouse up..
+                    if( cursor.selection ) cursor.selection.invertIfNecessary();
+
+                    const separator = "_NEWLINE_";
+                    let code = this.code.lines.join( separator );
+
+                    // Get linear start index
+                    let index = 0;
+
+                    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 );
+                    content = text.split( separator ).join('\n');
+                }
+
+                const options = this.onContextMenu( this, content, e );
+                if( options.length )
+                {
                     m.add( "" );
-                    m.add( "Format/JSON", () => {
-                        let json = this.toJSONFormat( this.getText() );
-                        if( !json )
-                            return;
-                        this.code.lines = json.split( "\n" );
-                        this.processLines();
-                    } );
+
+                    for( const o of options )
+                    {
+                        m.add( o.path, { disabled: o.disabled, callback: o.callback } );
+                    }
+
+                    // m.add( "Format/JSON", () => {
+                    //     let json = this.toJSONFormat( this.getText() );
+                    //     if( !json )
+                    //         return;
+                    //     this.code.lines = json.split( "\n" );
+                    //     this.processLines();
+                    // } );
                 }
             });
 
@@ -2638,10 +2760,17 @@ class CodeEditor {
                 e.preventDefault();
                 this.selectAll();
                 return true;
+            case 'b': // k+b comment block
+                e.preventDefault();
+                if( this.state.keyChain == 'k' ) {
+                    this._commentLines( cursor, true );
+                    return true;
+                }
+                return false;
             case 'c': // k+c, comment line
                 e.preventDefault();
                 if( this.state.keyChain == 'k' ) {
-                    this._commentLines();
+                    this._commentLines( cursor );
                     return true;
                 }
                 return false;
@@ -2663,12 +2792,12 @@ class CodeEditor {
                 return true;
             case 's': // save
                 e.preventDefault();
-                this.onsave( this.getText() );
+                this.onSave( this.getText() );
                 return true;
             case 'u': // k+u, uncomment line
                 e.preventDefault();
                 if( this.state.keyChain == 'k' ) {
-                    this._uncommentLines();
+                    this._uncommentLines( cursor );
                     return true;
                 }
                 return false;
@@ -2688,6 +2817,13 @@ class CodeEditor {
                 e.preventDefault();
                 this._decreaseFontSize();
                 return true;
+            case ' ': // custom event
+                if( this.onCtrlSpace )
+                {
+                    e.preventDefault();
+                    this.onCtrlSpace( cursor );
+                    return true;
+                }
             }
         }
 
@@ -2981,32 +3117,77 @@ class CodeEditor {
         this.hideAutoCompleteBox();
     }
 
-    _commentLines() {
+    _commentLines( cursor, useCommentBlock ) {
+
+        const lang = CodeEditor.languages[ this.highlight ];
 
         this.state.keyChain = null;
 
+        cursor = cursor ?? this.getCurrentCursor();
+
         if( cursor.selection )
         {
-            var cursor = this.getCurrentCursor();
+            if( !( ( useCommentBlock ? lang.blockComments : lang.singleLineComments ) ?? true ) )
+            {
+                return;
+            }
+
             this._addUndoStep( cursor, true );
 
-            const selectedLines = this.code.lines.slice( cursor.selection.fromY, cursor.selection.toY );
+            const selectedLines = this.code.lines.slice( cursor.selection.fromY, cursor.selection.toY + 1 );
             const minIdx = Math.min(...selectedLines.map( v => {
                 var idx = firstNonspaceIndex( v );
                 return idx < 0 ? 1e10 : idx;
             } ));
 
-            for( var i = cursor.selection.fromY; i <= cursor.selection.toY; ++i )
+            if( useCommentBlock )
             {
-                this._commentLine( cursor, i, minIdx );
+                const tokens = ( lang.blockCommentsTokens ?? this.defaultBlockCommentTokens );
+
+                const fromString = this.code.lines[ cursor.selection.fromY ];
+                let fromIdx = firstNonspaceIndex( fromString );
+                if( fromIdx == -1 )
+                {
+                    fromIdx = 0;
+                }
+
+                this.code.lines[ cursor.selection.fromY ] = [
+                    fromString.substring( 0, fromIdx ),
+                    tokens[ 0 ] + " ",
+                    fromString.substring( fromIdx )
+                ].join( '' );
+
+                this.code.lines[ cursor.selection.toY ] += " " + tokens[ 1 ];
+
+                cursor.selection.fromX += ( tokens[ 0 ].length + 1 );
+                this._processSelection( cursor );
+            }
+            else
+            {
+                for( let i = cursor.selection.fromY; i <= cursor.selection.toY; ++i )
+                {
+                    this._commentLine( cursor, i, minIdx, false );
+                }
+
+                const token = ( lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken ) + ' ';
+                this.cursorToString( cursor, token );
+
+                cursor.selection.fromX += token.length;
+                cursor.selection.toX += token.length;
+                this._processSelection( cursor );
             }
         }
         else
         {
-            for( let cursor of this.cursors.children )
+            if( !( lang.singleLineComments ?? true ) )
             {
-                this._addUndoStep( cursor, true );
-                this._commentLine( cursor, cursor.line );
+                return;
+            }
+
+            for( const cr of this.cursors.children )
+            {
+                this._addUndoStep( cr, true );
+                this._commentLine( cr, cr.line );
             }
         }
 
@@ -3014,33 +3195,37 @@ class CodeEditor {
         this._hideActiveLine();
     }
 
-    _commentLine( cursor, line, minNonspaceIdx ) {
+    _commentLine( cursor, line, minNonspaceIdx, updateCursor = true ) {
 
         const lang = CodeEditor.languages[ this.highlight ];
-
-        if( !( lang.singleLineComments ?? true ))
+        if( !( lang.singleLineComments ?? true ) )
             return;
 
         const token = ( lang.singleLineCommentToken ?? this.defaultSingleLineCommentToken ) + ' ';
         const string = this.code.lines[ line ];
 
         let idx = firstNonspaceIndex( string );
-        if( idx > -1 )
+        if( idx == -1 )
         {
-            // Update idx using min of the selected lines (if necessary..)
-            idx = minNonspaceIdx ?? idx;
+            return;
+        }
 
-            this.code.lines[ line ] = [
-                string.substring( 0, idx ),
-                token,
-                string.substring( idx )
-            ].join( '' );
+        // Update idx using min of the selected lines (if necessary..)
+        idx = minNonspaceIdx ?? idx;
+
+        this.code.lines[ line ] = [
+            string.substring( 0, idx ),
+            token,
+            string.substring( idx )
+        ].join( '' );
 
+        if( updateCursor )
+        {
             this.cursorToString( cursor, token );
         }
     }
 
-    _uncommentLines() {
+    _uncommentLines( cursor ) {
 
         this.state.keyChain = null;
 
@@ -4002,7 +4187,7 @@ class CodeEditor {
         const customStringKeys = Object.assign( {}, this.stringKeys );
         const lineNumber = this._currentLineNumber;
         const tokenStartIndex = this._currentTokenPositions[ tokenIndex ];
-        const inBlockComment = ( this._buildingBlockComment ?? this._inBlockCommentSection( lineNumber, tokenStartIndex, token.length ) !== undefined )
+        const inBlockComment = ( this._buildingBlockComment ?? this._inBlockCommentSection( lineNumber, tokenStartIndex, token.length ) ) !== undefined;
 
         var usePreviousTokenToCheckString = false;
 
@@ -4619,6 +4804,8 @@ class CodeEditor {
 
         if( state.selection )
         {
+            this.endSelection();
+
             this.startSelection( cursor );
 
             cursor.selection.load( state.selection );
@@ -4899,7 +5086,10 @@ class CodeEditor {
         }
         else
         {
-            this.codeScroller.scrollLeft += value;
+            if( value )
+            {
+                this.codeScroller.scrollLeft += value;
+            }
 
             const scrollBarWidth = this.hScrollbar.thumb.parentElement.offsetWidth;
             const scrollThumbWidth = this.hScrollbar.thumb.offsetWidth;
@@ -5109,6 +5299,9 @@ class CodeEditor {
             suggestions = suggestions.concat( otherValues.slice( 0, -1 ) );
         }
 
+        // Add custom suggestions...
+        suggestions = suggestions.concat( this.customSuggestions );
+
         // Remove 1/2 char words and duplicates...
         suggestions = Array.from( new Set( suggestions )).filter( s => s.length > 2 && s.toLowerCase().includes( word.toLowerCase() ) );