lexgui 0.7.6 → 0.7.8

package/build/extensions/timeline.js

@@ -131,14 +131,52 @@ 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
      * @param {*}  
@@ -193,7 +231,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 +242,6 @@ class Timeline {
         }, {
             units: "s",
             step: 0.01, min: 0,
-            signal: "@on_set_duration_" + this.uniqueID,
             skipReset: true,
             nameWidth: "auto"
         });
@@ -261,7 +297,6 @@ class Timeline {
     */
     updateLeftPanel( ) {
 
-        const scrollTop = this.trackTreesPanel ? this.trackTreesPanel.root.scrollTop : 0;
         this.leftPanel.clear();
 
         const panel = this.leftPanel;
@@ -326,7 +361,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 +729,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 +738,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 +768,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
@@ -1217,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.
@@ -1567,9 +1615,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 +3265,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();
 

package/build/lexgui.css

@@ -777,7 +777,6 @@ a svg, svg path {
     font-size: var(--global-font-size-lg);
     color: var(--global-text-secondary);
     cursor: pointer;
-    margin-right: 0.4em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -4615,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);
@@ -4671,7 +4676,7 @@ ul.lexassetscontent {
     opacity: 1;
 }
 
-.lexassetscontent.list li {
+.lexassetscontent.list li, .lexassetscontent.compact li {
     width: 100%;
     height: 1.8em;
     border-top: 0px;
@@ -4756,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;
@@ -4775,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;
@@ -4795,7 +4800,7 @@ ul.lexassetscontent {
     height: 1.15em;
 }
 
-.lexassetscontent.list li .lexcheckbox {
+.lexassetscontent.list li .lexcheckbox, .lexassetscontent.compact li .lexcheckbox {
     right: 3px;
     top: 3px;
 }
@@ -4820,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;
@@ -4832,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);
 }
 
@@ -4923,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 * {
@@ -5010,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;
@@ -5255,7 +5260,6 @@ ul.lexassetscontent {
 
 .lexcodeeditor .searchbox {
     background-color: var(--global-color-secondary);
-    /* width: 256px; */
     position: absolute;
     right: 6px;
     top: 26px;
@@ -5269,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.6",
+    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,
@@ -3130,6 +3132,7 @@ class ContextMenu {
             }
             else if( (rect.top + rect.height) > window.innerHeight )
             {
+                div.style.marginTop = "";
                 top = (window.innerHeight - rect.height - margin);
             }
         }
@@ -6616,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
@@ -11222,7 +11241,7 @@ class RangeInput extends BaseComponent {
         container.appendChild( slider );
 
         slider.addEventListener( "input", e => {
-            this.set( isRangeValue ? [ e.target.valueAsNumber, ogValue[ 1 ] ] : e.target.valueAsNumber, false, e );
+            this.set( isRangeValue ? [ Math.min(e.target.valueAsNumber, ogValue[ 1 ]), ogValue[ 1 ] ] : e.target.valueAsNumber, false, e );
         }, { passive: false });
 
         // If its a range value, we need to update the slider using the thumbs
@@ -11288,7 +11307,7 @@ class RangeInput extends BaseComponent {
             container.appendChild( maxSlider );
 
             maxSlider.addEventListener( "input", e => {
-                ogValue[ 1 ] = +e.target.valueAsNumber;
+                ogValue[ 1 ] = Math.max(value, +e.target.valueAsNumber);
                 this.set( [ value, ogValue[ 1 ] ], false, e );
             }, { passive: false });
         }
@@ -16165,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;
@@ -16427,7 +16447,9 @@ class AssetView {
         }
         else
         {
-            this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden' });
+            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' });
         }
 
@@ -16444,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" });
         };
 
@@ -16480,9 +16503,11 @@ class AssetView {
             this.toolsPanel.addText(null, textString, null, {
                 inputClass: "nobg", disabled: true, signal: "@on_page_change", maxWidth: "16ch" }
             );
+            this.toolsPanel.endLine();
 
             if( !this.skipBrowser )
             {
+                this.toolsPanel.sameLine();
                 this.toolsPanel.addComboButtons( null, [
                     {
                         value: "Left",
@@ -16517,9 +16542,9 @@ class AssetView {
                     inputClass: "nobg", disabled: true, signal: "@on_folder_change",
                     style: { fontWeight: "600", fontSize: "15px" }
                 });
-            }
 
-            this.toolsPanel.endLine();
+                this.toolsPanel.endLine();
+            }
         };
 
         this.toolsPanel.refresh();
@@ -16552,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) {
@@ -16570,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' );
@@ -16691,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();
@@ -16840,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({
@@ -16891,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)
@@ -17004,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;