lexgui 0.7.7 → 0.7.9

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/extensions/videoeditor.js

@@ -34,7 +34,7 @@ class TimeBar {
   
         this.markerWidth = options.markerWidth ?? 8;
         this.markerHeight = options.markerHeight ?? (this.canvas.height * 0.5);
-        this.offset = options.offset || (this.markerWidth*0.5 + 8);
+        this.offset = options.offset || (this.markerWidth*0.5 + 5);
 
         // dimensions of line (not canvas)
         this.lineWidth = this.canvas.width - this.offset * 2;
@@ -147,7 +147,7 @@ class TimeBar {
         ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111' // "#FFF";
 
 
-        y -= this.offset + 4;
+        y -= this.offset + 8;
         // Current time ball grab
         ctx.fillStyle = options.fillColor || '#e5e5e5';
         ctx.beginPath();
@@ -318,7 +318,7 @@ class VideoEditor {
 
         this.playing = false;
         this.requestId = null;
-
+        this.videoReady = false;
         this.currentTime = this.startTime = 0;
         this.startTimeString = "0:0";
         this.endTimeString = "0:0";
@@ -349,7 +349,7 @@ class VideoEditor {
         this.dragOffsetY = 0;
         // Create video element and load it
         let video = this.video = options.video ?? document.createElement( 'video' );
-        this.video.loop = true;
+        this.loop = options.loop ?? false;
         
         if(options.src) {
             this.video.src = options.src;
@@ -397,7 +397,10 @@ class VideoEditor {
             this.controlsPanelLeft.addButton('', "", (v) => {
                 this.playing = !this.playing;
                 if(this.playing) {
-                    this.video.play();
+                    if( this.video.currentTime + 0.000001 >= this.endTime) {
+                        this.video.currentTime = this.startTime;
+                    }
+                    this.video.play()
                 }
                 else {
                     this.video.pause();
@@ -447,13 +450,16 @@ class VideoEditor {
                 event.preventDefault();
                 event.stopPropagation();
 
-                if(!this.playing) {
+                this.playing = !this.playing;
+                if(this.playing) {
+                    if( this.video.currentTime + 0.000001 >= this.endTime) {
+                        this.video.currentTime = this.startTime;
+                    }
                     this.video.play();
                 }
                 else {
                     this.video.pause();
                 }
-                this.playing = !this.playing;
                 this.controlsPanelLeft.refresh();
             }
         }
@@ -610,15 +616,41 @@ class VideoEditor {
     }
 
     async _loadVideo( options = {} ) {
+        this.videoReady = false;
         while(this.video.duration === Infinity || isNaN(this.video.duration) || !this.timebar) {
             await new Promise(r => setTimeout(r, 1000));
             this.video.currentTime = 10000000 * Math.random();
         }
+        this.video.currentTime = 0.01; // BUG: some videos will not play unless this line is present 
         
+        // Duration can change if the video is dynamic (stream). This function is to ensure to load all buffer data
+        const forceLoadChunks =  () => {    
+            const state = this.videoReady;
+            if(this.video.readyState > 3) {
+                this.videoReady = true;
+            }
+            if(!state) {
+                this.video.currentTime = this.video.duration;
+            }
+        }
+
+        this.video.addEventListener( "canplaythrough", forceLoadChunks, {passive :true} );
+
+        this.video.ondurationchange = (v) => {
+            if( this.video.duration != this.endTime ) {
+
+                this.video.currentTime = this.startTime;
+                console.log("duration changed from", this.endTime, " to ", this.video.duration);
+                this.endTime = this.video.duration;
+                const x = this._timeToX(this.endTime);
+                this._setEndValue(x);
+            }
+            this.video.currentTime = this.startTime;
+        }
+ 
         this.timebar.startX = this.timebar.position.x;
         this.timebar.endX = this.timebar.position.x + this.timebar.lineWidth;
 
-        this.video.currentTime = 0.01; // BUG: some videos will not play unless this line is present 
         this.endTime = this.video.duration;
         
         this._setEndValue(this.timebar.endX);
@@ -660,8 +692,16 @@ class VideoEditor {
             this.onDraw();
         }
         if(this.playing) {
-            if(this.video.currentTime >= this.endTime) {
-                this.video.currentTime = this.startTime;
+            if( this.video.currentTime + 0.000001 >= this.endTime) {
+                this.video.pause();
+                if(!this.loop) {
+                    this.playing = false;
+                    this.controlsPanelLeft.refresh();
+                }
+                else {
+                    this.video.currentTime = this.startTime;
+                    this.video.play();
+                }
             }
             const x = this._timeToX(this.video.currentTime);
             this._setCurrentValue(x, false);

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.9",
     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,19 +1332,23 @@ class DropdownMenu {
         else
         {
             menuItem.addEventListener( "click", () => {
-                const f = item[ 'callback' ];
-                if( f )
-                {
-                    f.call( this, key, menuItem );
-                }
-
                 const radioName = menuItem.getAttribute( "data-radioname" );
                 if( radioName )
                 {
                     this._trigger[ radioName ] = key;
                 }
 
-                this.destroy( true );
+                const f = item.callback;
+                if( f )
+                {
+                    f.call( this, key, menuItem, radioName );
+                }
+
+                // 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
@@ -15151,17 +15169,26 @@ class Menubar {
                 } });
             };
 
-            entry.addEventListener("click", () => {
+            entry.addEventListener("mousedown", (e) => {
+                e.preventDefault();
+            });
+
+            entry.addEventListener("mouseup", (e) => {
+
+                e.preventDefault();
+
                 const f = item[ 'callback' ];
                 if( f )
                 {
-                    f.call( this, key, entry );
+                    f.call( this, key, entry, e );
                     return;
                 }
 
                 _showEntry();
 
                 this.focused = true;
+
+                return false;
             });
 
             entry.addEventListener( "mouseover", (e) => {
@@ -15328,7 +15355,12 @@ class Menubar {
         }
 
         const _b = button.querySelector('a');
-        _b.addEventListener("click", (e) => {
+
+        _b.addEventListener( "mousedown", (e) => {
+            e.preventDefault();
+        });
+
+        _b.addEventListener( "mouseup", (e) => {
             if( callback && !disabled )
             {
                 callback.call( this, _b, e );
@@ -16166,7 +16198,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 +16461,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 +16480,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 +16591,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 +16611,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 +16737,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 +16889,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 +16940,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 +17054,11 @@ class AssetView {
 
         this._processData( this.data );
     }
+
+    _lastModifiedToStringDate( lm ) {
+        const d = new Date( lm ).toLocaleString();
+        return d.substring( 0, d.indexOf( ',' ) );
+    }
 }
 
 LX.AssetView = AssetView;