lexgui 0.7.6 → 0.7.7

package/build/extensions/codeeditor.js

@@ -347,6 +347,19 @@ 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;
 
         // File explorer
         if( this.useFileExplorer )
@@ -377,8 +390,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 +559,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 => {
@@ -697,9 +717,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 +801,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 +983,7 @@ class CodeEditor {
 
                 if( e.ctrlKey )
                 {
-                    this.onrun( this.getText() );
+                    this.onRun( this.getText() );
                     return;
                 }
 
@@ -1149,7 +1166,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 +1307,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 +1317,21 @@ 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();
+        }
     }
 
     static getInstances()
@@ -1711,6 +1732,11 @@ class CodeEditor {
 
         let panel = new LX.Panel({ className: "lexcodetabinfo flex flex-row", height: "auto" });
 
+        if( this.onCreateStatusPanel )
+        {
+            this.onCreateStatusPanel( panel, this );
+        }
+
         let leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
         leftStatusPanel.sameLine();
 
@@ -1856,10 +1882,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 +1903,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 ) {
@@ -1921,19 +1959,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,
@@ -2015,7 +2053,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
             } );
         }
 
@@ -2038,6 +2077,12 @@ class CodeEditor {
             this.mustProcessLines = true;
         }
 
+        if( options.codeLines )
+        {
+            code.lines = options.codeLines;
+            this.mustProcessLines = true;
+        }
+
         this._processLinesIfNecessary();
 
         this._updateDataInfoPanel( "@tab-name", name );
@@ -2155,7 +2200,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 +2218,11 @@ class CodeEditor {
 
     closeTab( name, eraseAll ) {
 
+        if( !this.allowClosingTabs )
+        {
+            return;
+        }
+
         this.tabs.delete( name );
 
         if( eraseAll )
@@ -2290,22 +2340,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 +2731,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 +2763,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 +2788,13 @@ class CodeEditor {
                 e.preventDefault();
                 this._decreaseFontSize();
                 return true;
+            case ' ': // custom event
+                if( this.onCtrlSpace )
+                {
+                    e.preventDefault();
+                    this.onCtrlSpace( cursor );
+                    return true;
+                }
             }
         }
 
@@ -2981,32 +3088,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 )
+            {
+                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
             {
-                this._commentLine( cursor, i, minIdx );
+                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 +3166,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;
 
@@ -4619,6 +4775,8 @@ class CodeEditor {
 
         if( state.selection )
         {
+            this.endSelection();
+
             this.startSelection( cursor );
 
             cursor.selection.load( state.selection );
@@ -4899,7 +5057,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 +5270,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() ) );
 

package/build/extensions/timeline.js

@@ -193,7 +193,6 @@ class Timeline {
             this.setTime(value);
         }, {
             units: "s",
-            signal: "@on_set_time_" + this.uniqueID,
             step: 0.01, min: 0, precision: 3,
             skipSlider: true,
             skipReset: true,
@@ -205,7 +204,6 @@ class Timeline {
         }, {
             units: "s",
             step: 0.01, min: 0,
-            signal: "@on_set_duration_" + this.uniqueID,
             skipReset: true,
             nameWidth: "auto"
         });
@@ -261,7 +259,6 @@ class Timeline {
     */
     updateLeftPanel( ) {
 
-        const scrollTop = this.trackTreesPanel ? this.trackTreesPanel.root.scrollTop : 0;
         this.leftPanel.clear();
 
         const panel = this.leftPanel;
@@ -326,7 +323,7 @@ class Timeline {
             }
         });
 
-        this.trackTreesPanel.root.scrollTop = scrollTop;
+        this.trackTreesPanel.root.scrollTop = this.currentScrollInPixels;
 
         if( this.leftPanel.parent.root.classList.contains("hidden") || !this.root.parentElement ){
             return;
@@ -694,7 +691,7 @@ class Timeline {
         this.duration = this.animationClip.duration = v; 
 
         if(updateHeader) {
-            LX.emit( "@on_set_duration_" + this.uniqueID, + this.duration.toFixed(2)); // skipcallback = true
+            this.header.components["Duration"].set( +this.duration.toFixed(2), true ); // skipcallback = true
         }
 
         if( this.onSetDuration && !skipCallback ) 
@@ -703,7 +700,7 @@ class Timeline {
 
     setTime(time, skipCallback = false ){
         this.currentTime = Math.max(0,Math.min(time,this.duration));
-        LX.emit( "@on_set_time_" + this.uniqueID, +this.currentTime.toFixed(2)); // skipcallback = true
+        this.header.components["Current Time"].set( +this.currentTime.toFixed(2), true ); // skipcallback = true
 
         if(this.onSetTime && !skipCallback)
             this.onSetTime(this.currentTime);
@@ -733,6 +730,41 @@ class Timeline {
         this.visualOriginTime += this.currentTime - this.xToTime(xCurrentTime);
     }
 
+    /**
+     * @method setScroll
+     * not delta from last state, but full scroll amount.
+     * @param {Number} scrollY either pixels or [0,1]
+     * @param {Bool} normalized if true, scrollY is in range[0,1] being 1 fully scrolled. Otherwised scrollY represents pixels
+     * @returns 
+     */ 
+    
+    setScroll( scrollY, normalized = true ){
+        if ( !this.trackTreesPanel ){
+            this.currentScroll = 0;
+            this.currentScrollInPixels = 0;
+            return;
+        }
+
+        const r = this.trackTreesPanel.root;
+        if (r.scrollHeight > r.clientHeight){
+            if ( normalized ){
+                this.currentScroll = scrollY;
+                this.currentScrollInPixels = scrollY * (r.scrollHeight - r.clientHeight);
+            }else{
+                this.currentScroll = scrollY / (r.scrollHeight - r.clientHeight);
+                this.currentScrollInPixels = scrollY;
+            }
+        }
+        else{
+            this.currentScroll = 0;
+            this.currentScrollInPixels = 0;
+        }
+
+        // automatically calls event. 
+        this.trackTreesPanel.root.scrollTop = this.currentScrollInPixels;
+
+    }
+
     /**
      * @method processMouse
      * @param {*} e
@@ -1567,9 +1599,7 @@ class KeyFramesTimeline extends Timeline {
      */
     changeSelectedItems( itemsToAdd = null, itemsToRemove = null, skipCallback = false ) {
 
-        // TODO: maybe make this un-functions more general
-        this.deselectAllKeyFrames();
-        this.unHoverAll();
+        this.deselectAllElements();
         
         const tracks = this.animationClip.tracks;
         const tracksPerGroup = this.animationClip.tracksPerGroup;
@@ -3219,9 +3249,7 @@ class ClipsTimeline extends Timeline {
      */
     changeSelectedItems( ) {
 
-        // TODO: maybe make this un-functions more general
-        this.deselectAllClips();
-        this.unHoverAll();
+        this.deselectAllElements();
 
         this.selectedItems = this.animationClip.tracks.slice();