lexgui 0.7.7 → 0.7.8

package/build/extensions/codeeditor.js

@@ -360,6 +360,7 @@ class CodeEditor {
         this.onCreateStatusPanel = options.onCreateStatusPanel;
         this.onContextMenu = options.onContextMenu;
         this.onNewTab = options.onNewTab;
+        this.onSelectTab = options.onSelectTab;
 
         // File explorer
         if( this.useFileExplorer )
@@ -671,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 => {
@@ -1334,6 +1337,13 @@ class CodeEditor {
         }
     }
 
+    // Clear signals
+    clear() {
+        console.assert( this.rightStatusPanel && this.leftStatusPanel, "No panels to clear." );
+        this.rightStatusPanel.clear();
+        this.leftStatusPanel.clear();
+    }
+
     static getInstances()
     {
         return CodeEditor.__instances;
@@ -1737,7 +1747,7 @@ class CodeEditor {
             this.onCreateStatusPanel( panel, this );
         }
 
-        let leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
+        let leftStatusPanel = this.leftStatusPanel = new LX.Panel( { id: "FontSizeZoomStatusComponent", height: "auto" } );
         leftStatusPanel.sameLine();
 
         if( this.skipTabs )
@@ -1751,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" });
@@ -1928,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();
@@ -1949,6 +1966,11 @@ class CodeEditor {
         }
 
         this.processLines();
+
+        if( !isNewTabButton && this.onSelectTab )
+        {
+            this.onSelectTab( name, this );
+        }
     }
 
     _onContextMenuTab( isNewTabButton, event, name,  ) {
@@ -2036,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 )
@@ -2063,13 +2089,6 @@ class CodeEditor {
 
         this.endSelection();
 
-        if( selected )
-        {
-            this.code = code;
-            this.resetCursorPos( CodeEditor.CURSOR_LEFT_TOP );
-            this.mustProcessLines = true;
-        }
-
         if( options.language )
         {
             code.languageOverride = options.language;
@@ -2083,6 +2102,16 @@ class CodeEditor {
             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 );
@@ -4158,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;
 

package/build/extensions/timeline.js

@@ -131,13 +131,51 @@ class Timeline {
         }
         this.resize(this.size);
 
-        // update color theme
-        this.updateTheme();
-        LX.addSignal( "@on_new_color_scheme", (el, value) => {
-            // Retrieve again the color using LX.getThemeColor, which checks the applied theme
-            this.updateTheme();
-        } );
+        /**
+         * updates theme (light - dark) based on LX's current theme
+         */
+        function updateTheme( ){
+            Timeline.BACKGROUND_COLOR = LX.getThemeColor("global-blur-background");
+            Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-color-primary");
+            Timeline.TRACK_COLOR_SECONDARY = LX.getThemeColor("global-color-secondary");
+            Timeline.TRACK_COLOR_TERCIARY = LX.getThemeColor("global-color-terciary");
+            Timeline.TRACK_COLOR_QUATERNARY = LX.getThemeColor("global-color-quaternary");
+            Timeline.FONT = LX.getThemeColor("global-font");
+            Timeline.FONT_COLOR_PRIMARY = LX.getThemeColor("global-text-primary");
+            Timeline.FONT_COLOR_TERTIARY = LX.getThemeColor("global-text-tertiary");
+            Timeline.FONT_COLOR_QUATERNARY = LX.getThemeColor("global-text-quaternary");
+            
+            Timeline.KEYFRAME_COLOR = LX.getThemeColor("lxTimeline-keyframe");
+            Timeline.KEYFRAME_COLOR_SELECTED = Timeline.KEYFRAME_COLOR_HOVERED = LX.getThemeColor("lxTimeline-keyframe-selected");
+            Timeline.KEYFRAME_COLOR_LOCK = LX.getThemeColor("lxTimeline-keyframe-locked");
+            Timeline.KEYFRAME_COLOR_EDITED = LX.getThemeColor("lxTimeline-keyframe-edited");
+            Timeline.KEYFRAME_COLOR_INACTIVE = LX.getThemeColor("lxTimeline-keyframe-inactive");
+        }
+
+        this.updateTheme = updateTheme.bind(this);
+        LX.addSignal( "@on_new_color_scheme", this.updateTheme );
     }
+    
+    // makes it ready to be deleted
+    clear(){
+        if( this.header ){
+            this.header.clear();
+        }
+
+        if( this.leftPanel ){
+            this.leftPanel.clear();
+        }
+
+        if( this.updateTheme ){
+            let signals = LX.signals[ "@on_new_color_scheme" ] ?? [];
+            for( let i =0; i < signals.length; ++i ){
+                if( signals[i] == this.updateTheme ){
+                    signals.splice(i, 1);
+                }
+            }
+        }
+    }
+
 
     /**
      * @method updateHeader
@@ -1249,28 +1287,6 @@ class Timeline {
         this.updateLeftPanel();
     }
 
-    /**
-     * updates theme (light - dark) based on LX's current theme
-     */
-    updateTheme( ){
-        Timeline.BACKGROUND_COLOR = LX.getThemeColor("global-blur-background");
-        Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-color-primary");
-        Timeline.TRACK_COLOR_SECONDARY = LX.getThemeColor("global-color-secondary");
-        Timeline.TRACK_COLOR_TERCIARY = LX.getThemeColor("global-color-terciary");
-        Timeline.TRACK_COLOR_QUATERNARY = LX.getThemeColor("global-color-quaternary");
-        Timeline.FONT = LX.getThemeColor("global-font");
-        Timeline.FONT_COLOR_PRIMARY = LX.getThemeColor("global-text-primary");
-        Timeline.FONT_COLOR_TERTIARY = LX.getThemeColor("global-text-tertiary");
-        Timeline.FONT_COLOR_QUATERNARY = LX.getThemeColor("global-text-quaternary");
-        
-        Timeline.KEYFRAME_COLOR = LX.getThemeColor("lxTimeline-keyframe");
-        Timeline.KEYFRAME_COLOR_SELECTED = Timeline.KEYFRAME_COLOR_HOVERED = LX.getThemeColor("lxTimeline-keyframe-selected");
-        Timeline.KEYFRAME_COLOR_LOCK = LX.getThemeColor("lxTimeline-keyframe-locked");
-        Timeline.KEYFRAME_COLOR_EDITED = LX.getThemeColor("lxTimeline-keyframe-edited");
-        Timeline.KEYFRAME_COLOR_INACTIVE =LX.getThemeColor("lxTimeline-keyframe-inactive");
-    }
-
-
     // ----- BASE FUNCTIONS -----
     /**
         These functions might be overriden by child classes. Nonetheless, they must have the same attributes, at least.

package/build/lexgui.css

@@ -4614,13 +4614,19 @@ ul.lexassetscontent {
     overflow: auto;
 }
 
-.lexassetscontent.list {
+.lexassetscontent.compact {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     column-gap: 0.5rem;
 }
 
+.lexassetscontent.list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
 .lexassetscontent li {
     -webkit-text-size-adjust: 100%;
     font-size: var(--global-font-size);
@@ -4670,7 +4676,7 @@ ul.lexassetscontent {
     opacity: 1;
 }
 
-.lexassetscontent.list li {
+.lexassetscontent.list li, .lexassetscontent.compact li {
     width: 100%;
     height: 1.8em;
     border-top: 0px;
@@ -4755,7 +4761,7 @@ ul.lexassetscontent {
     z-index: 1;
 }
 
-.lexassetscontent.list li .lexassettitle {
+.lexassetscontent.list li .lexassettitle, .lexassetscontent.compact li .lexassettitle {
     width: 100%;
     height: 100%;
     text-align: left;
@@ -4774,13 +4780,13 @@ ul.lexassetscontent {
     display: none;
 }
 
-.lexassetscontent.list li .lexassetinfo {
+.lexassetscontent.list li .lexassetinfo, .lexassetscontent.compact li .lexassetinfo {
     display: block;
     right: 6px;
     z-index: 1;
 }
 
-.lexassetscontent.list li:has(.lexcheckbox) .lexassetinfo {
+.lexassetscontent.list li:has(.lexcheckbox) .lexassetinfo, .lexassetscontent.compact li:has(.lexcheckbox) .lexassetinfo {
     display: block;
     right: 32px;
     z-index: 1;
@@ -4794,7 +4800,7 @@ ul.lexassetscontent {
     height: 1.15em;
 }
 
-.lexassetscontent.list li .lexcheckbox {
+.lexassetscontent.list li .lexcheckbox, .lexassetscontent.compact li .lexcheckbox {
     right: 3px;
     top: 3px;
 }
@@ -4819,7 +4825,7 @@ ul.lexassetscontent {
     transition: all 0.2s;
 }
 
-.lexassetscontent.list img {
+.lexassetscontent.list img, .lexassetscontent.compact img {
     width: unset;
     object-fit: contain;
     float: left;
@@ -4831,7 +4837,7 @@ ul.lexassetscontent {
     transform: translateY(-6px);
 }
 
-.lexassetscontent.list li.folder img {
+.lexassetscontent.list li.folder img, .lexassetscontent.compact li.folder img {
     transform: scale(0.9);
 }
 
@@ -4922,7 +4928,7 @@ ul.lexassetscontent {
     display: flex;
     position: relative;
     overflow: inherit;
-    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background));
+    background-color: var(--global-color-secondary);
 }
 
 .codebasearea * {
@@ -5009,7 +5015,7 @@ ul.lexassetscontent {
 }
 
 .lexcodetabinfo {
-    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background));
+    background-color: var(--global-color-secondary);
     position: absolute;
     z-index: 3;
     bottom: 0px;
@@ -5254,7 +5260,6 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox {
     background-color: var(--global-color-secondary);
-    /* width: 256px; */
     position: absolute;
     right: 6px;
     top: 26px;
@@ -5268,10 +5273,6 @@ ul.lexassetscontent {
     transition: transform 0.2s ease-in, opacity 0.2s ease-in;
 }
 
-.lexcodeeditor .searchbox.gotoline {
-    width: 124px;
-}
-
 .lexcodeeditor .searchbox.opened {
     transform: translateY(0px);
     opacity: 1;

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.7.7",
+    version: "0.7.8",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1246,7 +1246,7 @@ class DropdownMenu {
         }
 
         const menuItem = document.createElement('div');
-        menuItem.className = "lexdropdownmenuitem" + ( item.name ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
+        menuItem.className = "lexdropdownmenuitem" + ( ( item.name || item.options ) ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
         menuItem.dataset["id"] = pKey;
         menuItem.innerHTML = `<span>${ key }</span>`;
         menuItem.tabIndex = "1";
@@ -1332,7 +1332,7 @@ class DropdownMenu {
         else
         {
             menuItem.addEventListener( "click", () => {
-                const f = item[ 'callback' ];
+                const f = item.callback;
                 if( f )
                 {
                     f.call( this, key, menuItem );
@@ -1344,7 +1344,11 @@ class DropdownMenu {
                     this._trigger[ radioName ] = key;
                 }
 
-                this.destroy( true );
+                // If has options, it's a radio group label, so don't close the menu
+                if( !item.options && ( item.closeOnClick ?? true ) )
+                {
+                    this.destroy( true );
+                }
             } );
         }
 
@@ -1382,8 +1386,6 @@ class DropdownMenu {
 
         if( item.options )
         {
-            this._addSeparator();
-
             console.assert( this._trigger[ item.name ] && "An item of the radio group must be selected!" );
             this._radioGroup = {
                 name: item.name,
@@ -6617,6 +6619,22 @@ Object.assign(LX, {
     }
 });
 
+/**
+ * @method formatBytes
+ * @param {Number} bytes
+ **/
+function formatBytes( bytes )
+{
+    if( bytes === 0 ) return "0 B";
+    const k = 1024;
+    const sizes = [ "B", "KB", "MB", "GB", "TB" ];
+    const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+    const value = bytes / Math.pow( k, i );
+    return value.toFixed( 2 ) + " " + sizes[ i ];
+}
+
+LX.formatBytes = formatBytes;
+
 /**
  * @method compareThreshold
  * @param {String} url
@@ -16166,7 +16184,8 @@ LX.AssetViewEvent = AssetViewEvent;
 class AssetView {
 
     static LAYOUT_GRID          = 0;
-    static LAYOUT_LIST          = 1;
+    static LAYOUT_COMPACT       = 1;
+    static LAYOUT_LIST          = 2;
 
     static CONTENT_SORT_ASC     = 0;
     static CONTENT_SORT_DESC    = 1;
@@ -16428,7 +16447,9 @@ class AssetView {
         }
         else
         {
+            area.root.classList.add( "flex", "flex-col" );
             this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden', height:"auto" });
+            this.toolsPanel.root.style.flex = "none";
             this.contentPanel = area.addPanel({ className: 'lexassetcontentpanel flex flex-col overflow-hidden' });
         }
 
@@ -16445,7 +16466,8 @@ class AssetView {
         const _onChangeView = ( value, event ) => {
             new LX.DropdownMenu( event.target, [
                 { name: "Grid", icon: "LayoutGrid", callback: () => this._setContentLayout( AssetView.LAYOUT_GRID ) },
-                { name: "List", icon: "LayoutList", callback: () => this._setContentLayout( AssetView.LAYOUT_LIST ) }
+                { name: "Compact", icon: "LayoutList", callback: () => this._setContentLayout( AssetView.LAYOUT_COMPACT ) },
+                { name: "List", icon: "List", callback: () => this._setContentLayout( AssetView.LAYOUT_LIST ) }
             ], { side: "right", align: "start" });
         };
 
@@ -16555,11 +16577,13 @@ class AssetView {
     _refreshContent( searchValue, filter ) {
 
         const isGridLayout = ( this.layout == AssetView.LAYOUT_GRID ); // default
+        const isCompactLayout = ( this.layout == AssetView.LAYOUT_COMPACT );
+        const isListLayout = ( this.layout == AssetView.LAYOUT_LIST );
 
         this.filter = filter ?? ( this.filter ?? "None" );
         this.searchValue = searchValue ?? (this.searchValue ?? "");
         this.content.innerHTML = "";
-        this.content.className = (isGridLayout ? "lexassetscontent" : "lexassetscontent list");
+        this.content.className = `lexassetscontent${ isCompactLayout ? " compact" : ( isListLayout ? " list" : "" ) }`;
         let that = this;
 
         const _addItem = function(item) {
@@ -16573,6 +16597,11 @@ class AssetView {
             itemEl.tabIndex = -1;
             that.content.appendChild( itemEl );
 
+            if( item.lastModified && !item.lastModifiedDate )
+            {
+                item.lastModifiedDate = that._lastModifiedToStringDate( item.lastModified );
+            }
+
             if( !that.useNativeTitle )
             {
                 let desc = document.createElement( 'span' );
@@ -16694,14 +16723,17 @@ class AssetView {
                 }
             }
 
-            if( !isFolder )
+            // Add item type info
+            let itemInfoHtml = type;
+
+            if( isListLayout )
             {
-                let info = document.createElement('span');
-                info.className = "lexassetinfo";
-                info.innerText = type;
-                itemEl.appendChild(info);
+                if( item.bytesize ) itemInfoHtml += ` | ${ LX.formatBytes( item.bytesize ) }`;
+                if( item.lastModifiedDate ) itemInfoHtml += ` | ${ item.lastModifiedDate }`;
             }
 
+            LX.makeContainer( [ "auto", "auto" ], "lexassetinfo", itemInfoHtml, itemEl );
+
             itemEl.addEventListener('click', function( e ) {
                 e.stopImmediatePropagation();
                 e.stopPropagation();
@@ -16843,18 +16875,18 @@ class AssetView {
         const options = { disabled: true };
 
         this.previewPanel.addText("Filename", file.id, null, options);
-        if( file.lastModified ) this.previewPanel.addText("Last Modified", new Date( file.lastModified ).toLocaleString(), null, options);
+        if( file.lastModifiedDate ) this.previewPanel.addText("Last Modified", file.lastModifiedDate, null, options);
         if( file._path || file.src ) this.previewPanel.addText("URL", file._path ? file._path : file.src, null, options);
         this.previewPanel.addText("Path", this.path.join('/'), null, options);
         this.previewPanel.addText("Type", file.type, null, options);
-        if( file.bytesize ) this.previewPanel.addText("Size", (file.bytesize/1024).toPrecision(3) + " KBs", null, options);
+        if( file.bytesize ) this.previewPanel.addText("Size", LX.formatBytes( file.bytesize ), null, options);
         if( file.type == "folder" ) this.previewPanel.addText("Files", file.children ? file.children.length.toString() : "0", null, options);
 
         this.previewPanel.addSeparator();
 
         const previewActions = [...this.previewActions];
 
-        if( !previewActions.length )
+        if( !previewActions.length && file.type !== "folder" )
         {
             // By default
             previewActions.push({
@@ -16894,7 +16926,8 @@ class AssetView {
                     "id": file.name,
                     "src": e.currentTarget.result,
                     "extension": ext,
-                    "lastModified": file.lastModified
+                    "lastModified": file.lastModified,
+                    "lastModifiedDate": this._lastModifiedToStringDate( file.lastModified )
                 };
 
                 switch(ext)
@@ -17007,6 +17040,11 @@ class AssetView {
 
         this._processData( this.data );
     }
+
+    _lastModifiedToStringDate( lm ) {
+        const d = new Date( lm ).toLocaleString();
+        return d.substring( 0, d.indexOf( ',' ) );
+    }
 }
 
 LX.AssetView = AssetView;