lexgui 0.1.30 → 0.1.32

package/build/components/timeline.js

@@ -44,12 +44,11 @@ class Timeline {
         this.framerate = 30;
         this.opacity = options.opacity || 1;
         this.sidebarWidth = 0// 200;
-        this.topMargin = 47;
+        this.topMargin = 40;
         this.renderOutFrames = false;
         this.lastMouse = [];
         this.lastKeyFramesSelected = [];
         this.tracksDrawn = [];
-        this.buttonsDrawn = [];
         this.trackState = [];
         this.clipboard = null;
         this.grabTime = 0;
@@ -58,12 +57,20 @@ class Timeline {
         this.tracksDictionary = {};
         this._times = [];
 
+        this.onBeforeCreateTopBar = options.onBeforeCreateTopBar;
+        this.onAfterCreateTopBar = options.onAfterCreateTopBar;
+        this.onChangePlayMode = options.onChangePlayMode;
+
+        this.playing = false;
+        this.loop = options.loop ?? true;
+
         this.session = new Session();
 
         this.canvas = options.canvas ?? document.createElement('canvas');
 
         this.duration = 1;
-        this.position = [options.x ?? 0, options.y ?? 0];
+        this.speed = 1;
+        this.position = [0, 0];
         this.size = [ options.width ?? 400, options.height ?? 100];
         
         this.currentScroll = 0; //in percentage
@@ -79,6 +86,7 @@ class Timeline {
         this.active = true;
         this.skipVisibility = options.skipVisibility ?? false;
         this.skipLock = options.skipLock ?? false;
+        this.disableNewTracks = options.disableNewTracks ?? false;
 
         this.optimizeThreshold = 0.025;
 
@@ -117,14 +125,14 @@ class Timeline {
 
         this.canvas.tabIndex = 1;
         // Process keys events
-        this.canvas.addEventListener("keydown", this.processKeys.bind(this));
+        this.canvasArea.root.addEventListener("keydown", this.processKeys.bind(this));
 
         right.onresize = bounding => {
             if(!(bounding.width && bounding.height)) 
                 return;
             this.resizeCanvas( [ bounding.width, bounding.height + this.header_offset ] );
         }
-
+        this.resize(this.size);
     }
 
     /**
@@ -144,8 +152,26 @@ class Timeline {
         let header = this.header;
         LX.DEFAULT_NAME_WIDTH = "50%";
         header.sameLine();
-        header.addTitle(this.name);
-               
+
+        if(this.name) {
+            header.addTitle(this.name);
+        }
+
+        header.addButton('', '<i class="fa-solid fa-'+ (this.playing ? 'pause' : 'play') +'"></i>', (value, event) => {
+           this.changeState();
+        }, {width: "40px", buttonClass: "accept"});
+
+        header.addButton('', '<i class="fa-solid fa-rotate"></i>', (value, event) => {
+            this.loop = !this.loop;
+            if(this.onChangePlayMode) {
+                this.onChangePlayMode(this.loop);
+            }
+
+        }, {width: "40px", selectable: true, selected: this.loop});
+        
+        if(this.onBeforeCreateTopBar)
+            this.onBeforeCreateTopBar(header);
+
         header.addNumber("Current Time", this.currentTime, (value, event) => {
             if(value > this.duration) {
                 value = this.duration;
@@ -163,10 +189,11 @@ class Timeline {
             this.setDuration(value, false)}, {step: 0.01, min: 0, signal: "@on_set_duration"
         });    
 
-        for(let i = 0; i < this.buttonsDrawn.length; i++) {
-            let button = this.buttonsDrawn[i];
-            this.header.addButton( button.title || "", button.name, button.callback, button);
-        }
+        header.addNumber("Speed", +this.speed.toFixed(3), (value, event) => {
+            this.setSpeed(value)}, {step: 0.01});    
+           
+        if(this.onAfterCreateTopBar)
+            this.onAfterCreateTopBar(header);      
 
         if(this.onShowOptimizeMenu)
             header.addButton("", '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, {width: "40px"});
@@ -193,6 +220,7 @@ class Timeline {
                 }
             })
         }, {width: "40px"})
+
         header.endLine();
         LX.DEFAULT_NAME_WIDTH = "30%";
     }
@@ -207,15 +235,25 @@ class Timeline {
         if(this.leftPanel)
             this.leftPanel.clear();
         else {
-            this.leftPanel = area.addPanel({className: 'lextimelinepanel', width: "100%"});
+            this.leftPanel = area.addPanel({className: 'lextimelinepanel', width: "100%", height: "100%"});
         }
 
         let panel = this.leftPanel;
+        panel.sameLine(2);
         let title = panel.addTitle("Tracks");
+        
+        if(!this.disableNewTracks) 
+        {
+            panel.addButton('', '<i class = "fa-solid fa-plus"></i>', (value, event) => {
+                this.addNewTrack();
+            }, {width: "40px", height: "40px"});            
+        }
+        panel.endLine();
+
         const styles = window.getComputedStyle(title);
         const titleHeight = title.clientHeight + parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
+        
         let p = new LX.Panel({height: "calc(100% - " + titleHeight + "px)"});
-
         if(this.animationClip && this.selectedItems)  {
             let items = {'id': '', 'children': []};
 
@@ -230,10 +268,10 @@ class Timeline {
                     let track = this.tracksPerItem[selected][j];
                     let id = track.type ? track.type : track.name;
 
-                    t.children.push({'id': id, 'skipVisibility': this.skipVisibility, visible: track.active, 'children':[], actions : this.skipLock ? null : [{
+                    t.children.push({'id': id, 'skipVisibility': this.skipVisibility, visible: track.active, selected: track.isSelected, 'children':[], actions : this.skipLock ? null : [{
                         'name':'Lock edition',
-                        'icon': 'fa-solid '+ (track.locked ? 'fa-lock' : 'fa-lock-open'),
-                        'callback': (el, node) => {
+                        'icon': 'fa-solid '+ (track.locked ? 'fa-lock' : 'fa-lock-open'),                       
+                        'callback': (node, el) => {
                             // TO DO (apply functionality)
                             let value = el.classList.contains('fa-lock');
                          
@@ -269,6 +307,7 @@ class Timeline {
                     switch(e.type) {
                         case LX.TreeEvent.NODE_SELECTED:
                             this.selectTrack(e.node);
+                            this.updateLeftPanel();
                             break;
                         case LX.TreeEvent.NODE_VISIBILITY:    
                             this.changeTrackVisibility(e.node, e.value);
@@ -296,16 +335,6 @@ class Timeline {
         this.resizeCanvas([ this.root.root.clientWidth - this.leftPanel.root.clientWidth  - 8, this.size[1]]);
     }
 
-    /**
-    * @method addButtons
-    * @param buttons: array
-    */
-
-    addButtons(buttons) {
-        this.buttonsDrawn = buttons || this.buttonsDrawn;
-        this.updateHeader();
-    }
-
     /**
      * @method addNewTrack
      */
@@ -322,6 +351,7 @@ class Timeline {
         };
 
         this.animationClip.tracks.push(trackInfo);
+        this.updateLeftPanel();
         return trackInfo.idx;
     }
 
@@ -359,30 +389,37 @@ class Timeline {
     /**
      * @method setAnimationClip
      * @param {*} animation 
+     * @param {boolean} needsToProcess
      * TODO
      */
 
-    setAnimationClip( animation ) {
-        this.animationClip = animation;
-        this.duration = animation.duration;
-        this.speed = animation.speed || 1;
+    setAnimationClip( animation, needsToProcess = true ) {
+        if(!animation || !animation.tracks || needsToProcess) { 
+            this.processTracks(animation); // generate default animationclip or process the user's one
+        }
+        else{
+            this.animationClip = animation;
+        }
+       
+        this.duration = this.animationClip.duration;
+        this.speed = this.animationClip.speed ?? this.speed;
         var w = Math.max(300, this.canvas.width);
         this.secondsToPixels = ( w - this.session.left_margin ) / this.duration;
-        // if(this.secondsToPixels < 1)
-        //     this.secondsToPixels = 100;
-        // this.session.start_time = -50 / this.secondsToPixels;
-
-        if(this.animationClip && this.animationClip.tracks.length)
-            this.processTracks(animation);
         
-        this.updateHeader();
+        //this.updateHeader();
         this.updateLeftPanel();
+        
+        return this.animationClip;
     }
 
     drawTimeInfo (w, h = this.topMargin) {
 
         let ctx = this.canvas.getContext("2d");
+        ctx.font = "11px " + Timeline.FONT;//"11px Calibri";
+        ctx.textAlign = "center";
+        
         let canvas = this.canvas;
+        
         // Draw time markers
         let startx = Math.round( this.timeToX( this.startTime ) ) + 0.5;
         let endx = Math.round( this.timeToX( this.endTime ) ) + 0.5;
@@ -393,11 +430,11 @@ class Timeline {
         ctx.save();
 
         ctx.fillStyle = Timeline.BACKGROUND_COLOR;
-        ctx.fillRect( this.session.left_margin,0, canvas.width, h );
+        ctx.fillRect( this.session.left_margin, 0, canvas.width, h );
+        ctx.strokeStyle = LX.Timeline.FONT_COLOR;
 
         if(this.secondsToPixels > 200 )
         {
-            ctx.strokeStyle = LX.getThemeColor("global-selected-light");
             ctx.globalAlpha = 0.5 * (1.0 - LX.UTILS.clamp( 200 / this.secondsToPixels, 0, 1));
             ctx.beginPath();
             for( let time = this.startTime; time <= this.endTime; time += 1 / this.framerate )
@@ -405,18 +442,18 @@ class Timeline {
                 let x = this.timeToX( time );
                 if(x < this.session.left_margin)
                     continue;
-                ctx.moveTo(Math.round(x) + 0.5, h * 0.8);
-                ctx.lineTo(Math.round(x) + 0.5, h *0.95);
+                ctx.moveTo(Math.round(x) + 0.5, h * 0.9);
+                ctx.lineTo(Math.round(x) + 0.5, h * 0.95);
             }
             ctx.stroke();
             ctx.globalAlpha = this.opacity;
         }
 
         ctx.globalAlpha = 0.5;
-        ctx.strokeStyle = LX.getThemeColor("global-selected-light");
         ctx.beginPath();
         let times = this._times;
         this._times.length = 0;
+
         for( let time = this.startTime; time <= this.endTime; time += tick_time)
         {
             let x = this.timeToX( time );
@@ -425,31 +462,28 @@ class Timeline {
                 continue;
 
             let is_tick = time % 5 == 0;
-            if(is_tick ||  this.secondsToPixels > 70 ) {
-
+            if(is_tick || this.secondsToPixels > 70 ) {
                 times.push([x,time]);
-                ctx.moveTo(Math.round(x) + 0.5, h * 0.4 + (is_tick ? 0 : h * 0.3) );
-                ctx.lineTo(Math.round(x) + 0.5, h *0.95 );
+                ctx.moveTo(Math.round(x) + 0.5, h * 0.4 + (is_tick ? h * 0.3 : h * 0.4) );
+                ctx.lineTo(Math.round(x) + 0.5, h * 0.95 );
+                ctx.stroke();
             }
-
         }
 
         let x = startx;
-        if(x < this.session.left_margin)
-            x = this.session.left_margin;
-        ctx.moveTo( x, h - 0.5);
+        if(x < this.session.left_margin) {
+            x = this.session.left_margin;            
+        }
+        //ctx.moveTo(x, h - 0.5);
         // ctx.lineTo( endx, h - 0.5);
-        ctx.stroke();
         ctx.globalAlpha = this.opacity;
 
-        //time seconds in text
-        ctx.font = "11px " + Timeline.FONT;//"11px Calibri";
-        ctx.textAlign = "center";
+        // Time seconds in text
         ctx.fillStyle = Timeline.FONT_COLOR//"#888";
         for(var i = 0; i < times.length; ++i)
         {
             let time = times[i][1];
-            ctx.fillText( time == (time|0) ? time : time.toFixed(1), times[i][0] +12, h*0.9);
+            ctx.fillText( time == (time|0) ? time : time.toFixed(1), times[i][0], h * 0.6);
         }
 
         ctx.restore();
@@ -510,6 +544,8 @@ class Timeline {
     draw( currentTime = this.currentTime, rect ) {
 
         let ctx = this.canvas.getContext("2d");
+        ctx.textBaseline = "bottom";
+        ctx.font = "11px " + Timeline.FONT;//"11px Calibri";
         if(!rect)
             rect = [0, ctx.canvas.height - ctx.canvas.height , ctx.canvas.width, ctx.canvas.height ];
 
@@ -568,28 +604,38 @@ class Timeline {
         this.drawTimeInfo(w);
 
         // Current time marker vertical line
-        let true_pos = Math.round( this.timeToX( this.currentTime ) ) + 0.5;
-        let quant_current_time = Math.round( this.currentTime * this.framerate ) / this.framerate;
-        let pos = Math.round( this.timeToX( quant_current_time ) ) + 0.5; //current_time is quantized
+        let truePos = Math.round( this.timeToX( this.currentTime ) ) + 0.5;
+        let quantCurrentTime = Math.round( this.currentTime * this.framerate ) / this.framerate;
+        let pos = Math.round( this.timeToX( quantCurrentTime ) ) + 0.5; //current_time is quantized
+        
+        let posy = this.topMargin * 0.4;
         if(pos >= this.session.left_margin)
         {
-            // ctx.strokeStyle = "#ABA";
-            // ctx.beginPath();
-            // ctx.globalAlpha = 0.3;
-            // ctx.moveTo(pos, 0); ctx.lineTo( pos, h );
-            // ctx.stroke();
-
-            ctx.strokeStyle = ctx.fillStyle =  LX.getThemeColor("global-selected-light");
+            ctx.strokeStyle = ctx.fillStyle =  LX.getThemeColor("global-selected");
             ctx.globalAlpha = this.opacity;
             ctx.beginPath();
-            ctx.moveTo(true_pos, 0); ctx.lineTo(true_pos, this.canvas.height);//line
+            ctx.moveTo(truePos, posy * 0.6); ctx.lineTo(truePos, this.canvas.height);//line
             ctx.stroke();
-            ctx.beginPath();
-            ctx.moveTo(true_pos - 4, 0); ctx.lineTo(true_pos + 4, 0); ctx.lineTo(true_pos + 4, 10); ctx.lineTo(true_pos + 2, 12);ctx.lineTo(true_pos - 2, 12); ctx.lineTo(true_pos - 4, 10); //triangle
             ctx.closePath();
+            ctx.shadowBlur = 8;
+            ctx.shadowColor = LX.getThemeColor("global-selected");
+            ctx.shadowOffsetX = 1;
+            ctx.shadowOffsetY = 1;
+
+            ctx.roundRect( truePos - 10, posy * 0.6, 20, posy, 5, true );
             ctx.fill();
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
         }
-        
+
+        // Current time seconds in text
+        ctx.font = "11px " + Timeline.FONT;//"11px Calibri";
+        ctx.textAlign = "center";
+        //ctx.textBaseline = "middle";
+        ctx.fillStyle = Timeline.COLOR_UNACTIVE//"#888";
+        ctx.fillText( this.currentTime.toFixed(1), truePos,  this.topMargin * 0.6  );
+
         // Selections
         ctx.strokeStyle = ctx.fillStyle =  Timeline.FONT_COLOR;
         ctx.translate( this.position[0], this.position[1] + this.topMargin )
@@ -681,6 +727,21 @@ class Timeline {
         return t;
     }
 
+
+        /**
+     * @method setSpeed
+     * @param {Number} speed 
+     */
+
+    setSpeed(speed) {
+        this.speed = speed;
+        LX.emit( "@on_set_speed", +speed.toFixed(3));
+        
+
+        if( this.onSetSpeed ) 
+            this.onSetSpeed( speed );	 
+    }
+
     // Converts distance in pixels to time
     xToTime( x ) {
         return (x - this.session.left_margin) / this.secondsToPixels + this.session.start_time;
@@ -734,12 +795,12 @@ class Timeline {
 
         if(!this.canvas)
             return;
-        // e.preventDefault();
-        // e.stopPropagation();
+    
         e.multipleSelection = false;
 
         let h = this.canvas.height;
         let w = this.canvas.width;
+
         // Process mouse
         let x = e.offsetX;
         let y = e.offsetY;
@@ -748,21 +809,22 @@ class Timeline {
         let localX = e.offsetX - this.position[0];
         let localY = e.offsetY - this.position[1];
 
-        // if(!this.grabbing_timeline && !this.movingKeys)
-        //     this.canvas.style.cursor = "default";
-            
-      
         let timeX = this.timeToX( this.currentTime );
         let current_grabbing_timeline = localY < this.topMargin && localX > this.session.left_margin && 
         localX > (timeX - 6) && localX < (timeX + 6);
 
-        if( current_grabbing_timeline )
+        if( current_grabbing_timeline ) {
             this.canvas.style.cursor = "col-resize";
+        }
         else if(this.movingKeys) {
             this.canvas.style.cursor = "grabbing";    
         }
-         else 
+        else if(e.shiftKey) {
+            this.canvas.style.cursor = "crosshair";
+        }
+        else {
             this.canvas.style.cursor = "default";
+        }
 
         if( e.type == "wheel" ) {
             if(e.shiftKey)
@@ -770,15 +832,14 @@ class Timeline {
                 this.setScale( e.wheelDelta < 0 ? 0.95 : 1.05 );
             }
             else if( h < this.scrollableHeight)
-            {
-                this.currentScroll =  LX.UTILS.clamp( this.currentScroll + (e.wheelDelta < 0 ? 0.1 : -0.1), 0, 1);
-                this.leftPanel.root.children[1].scrollTop = this.currentScroll* (this.scrollableHeight - h);
+            {              
+                this.leftPanel.root.children[1].scrollTop += e.deltaY * 0.1 ;
             }
             
             return;
         }
 
-            var time = this.xToTime(x, true);
+        var time = this.xToTime(x, true);
 
         var is_inside = x >= this.position[0] && x <= (this.position[0] + this.size[0]) &&
                         y >= this.position[1] && y <= (this.position[1] + this.size[1]);
@@ -798,8 +859,6 @@ class Timeline {
         e.localX = localX;
         e.localY = localY;
 
-       
-
         const innerSetTime = (t) => { 
             LX.emit( "@on_current_time_" + this.constructor.name, t);
             if( this.onSetTime ) 
@@ -833,15 +892,13 @@ class Timeline {
                 return;
             }
             
-            if( e.button == 0 && this.onMouseUp )
+            if( e.button == 0 && this.onMouseUp ) {
                 this.onMouseUp(e, time);
+            }
+            this.unSelectAllTracks();
+            this.updateLeftPanel();
         }
-
-        if( !is_inside && !this.grabbing && !(e.metaKey || e.altKey ) )
-            return true;
-
-        if( this.onMouse && this.onMouse( e, time, this ) )
-            return;
+    
 
         if( e.type == "mousedown")	{
             
@@ -863,7 +920,6 @@ class Timeline {
                 this.grabTime = time - this.currentTime;
                 if(!track || track && this.getCurrentContent(track, time, 0.001) == undefined) {
                     this.grabbing_timeline = current_grabbing_timeline;
-
                 }
 
                 if(this.onMouseDown && this.active )
@@ -890,7 +946,7 @@ class Timeline {
                 }
                 else if(this.grabbingScroll )
                 {
-                    this.currentScroll = LX.UTILS.clamp( this.currentScroll + (e.movementY / h), 0, 1);
+                    this.leftPanel.root.children[1].scrollTop += e.movementY  ;
                 }
                 else
                 {
@@ -900,18 +956,28 @@ class Timeline {
                     this.session.start_time += (old - now);
                 }
             }
-            if(this.onMouseMove)
+
+            if(this.onMouseMove) {
                 this.onMouseMove(e, time);
+            }
         }
         else if (e.type == "dblclick" && this.onDblClick) {
             this.onDblClick(e);	
         }
-        else if (e.type == "contextmenu" && this.showContextMenu && this.active)
+        else if (e.type == "contextmenu" && this.showContextMenu && this.active) {
             this.showContextMenu(e);
+        }
 
         this.lastMouse[0] = x;
         this.lastMouse[1] = y;
 
+        if( !is_inside && !this.grabbing && !(e.metaKey || e.altKey ) ) {           
+            return true;
+        }
+
+        if( this.onMouse && this.onMouse( e, time, this ) )
+            return;
+
         return true;
     }
     
@@ -934,9 +1000,32 @@ class Timeline {
                     if(e.ctrlKey)
                         this.pasteContent();
                     break;
+                case ' ':
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    this.changeState();
+                    break; 
+
+                case "Shift":
+                    this.canvas.style.cursor = "crosshair";
+                    break;
             }
         }
     }
+    
+    /**
+     * @method changeState
+     * @description change play/pause state
+     * ...
+     **/
+    changeState() {
+        this.playing = !this.playing;
+        this.updateHeader();
+
+        if(this.onChangeState) {
+            this.onChangeState(this.playing);
+        }
+    }
 
     /**
      * @method drawTrackWithKeyframes
@@ -948,72 +1037,81 @@ class Timeline {
 
     drawTrackWithKeyframes( ctx, y, trackHeight, title, track, trackInfo ) {
         
-        if(trackInfo.enabled === false)
+        if(trackInfo.enabled === false) {
             ctx.globalAlpha = 0.4;
+        }
 
-        ctx.font = Math.floor( trackHeight * 0.8) + "px Arial";
+        ctx.font = Math.floor( trackHeight * 0.8) + "px" + Timeline.FONT;
         ctx.textAlign = "left";
-        ctx.fillStyle = "rgba(255,255,255,0.8)";
-        
-        // if(title != null)
-        // {
-        //     // var info = ctx.measureText( title );
-        //     ctx.fillStyle = this.active ? "rgba(255,255,255,0.9)" : "rgba(250,250,250,0.7)";
-        //     ctx.fillText( title, 25, y + trackHeight * 0.75 );
-        // }
+       
         ctx.globalAlpha = 0.2;
-        ctx.fillStyle = Timeline.TRACK_SELECTED//"#2c303570";
-        if(trackInfo.isSelected)
+        
+        if(trackInfo.isSelected) {
+            ctx.fillStyle = Timeline.TRACK_SELECTED;//"#2c303570";
             ctx.fillRect(0, y, ctx.canvas.width, trackHeight );
+        }
+        ctx.fillStyle = Timeline.COLOR;//"#2c303570";
         ctx.globalAlpha = 1;
-        ctx.fillStyle = "#5e9fdd"//"rgba(10,200,200,1)";
-        var keyframes = track.times;
+       
+        let keyframes = track.times;
 
-        if(keyframes) {
-            
-            this.tracksDrawn.push([track,y+this.topMargin,trackHeight]);
-            for(var j = 0; j < keyframes.length; ++j)
-            {
-                let time = keyframes[j];
-                let selected = trackInfo.selected[j];
-                if( time < this.startTime || time > this.endTime )
-                    continue;
-                var keyframePosX = this.timeToX( time );
-                if( keyframePosX > this.sidebarWidth ){
-                    ctx.save();
+        if(!keyframes) {
+            return;
+        }
+        
+        this.tracksDrawn.push([track,y+this.topMargin,trackHeight]);
+        
+        for(let j = 0; j < keyframes.length; ++j)
+        {
+            let time = keyframes[j];
+            let selected = trackInfo.selected[j];
+            if( time < this.startTime || time > this.endTime ) {
+                continue;
+            }
+            let keyframePosX = this.timeToX( time );
+            if( keyframePosX > this.sidebarWidth ){
+                ctx.save();
 
-                    let margin = -1;
-                    let size = trackHeight * 0.3;
-                    if(trackInfo.edited[j])
-                        ctx.fillStyle = Timeline.COLOR_EDITED;
-                    if(selected) {
-                        ctx.fillStyle = Timeline.COLOR_SELECTED;
-                        size = trackHeight * 0.35;
-                        margin = 0;
-                    }
-                    if(trackInfo.hovered[j]) {
-                        size = trackHeight * 0.35;
-                        ctx.fillStyle = Timeline.COLOR_HOVERED;
-                        margin = 0;
-                    }
-                    if(trackInfo.locked)
-                        ctx.fillStyle = Timeline.COLOR_LOCK;
+                let margin = -1;
+                let size = trackHeight * 0.3;
+                
+                if(trackInfo.edited[j]) {
+                    ctx.fillStyle = Timeline.COLOR_EDITED;
+                }
+                
+                if(selected) {
+                    ctx.fillStyle = Timeline.COLOR_SELECTED;
+                    ctx.shadowBlur = 8;
+                    size = trackHeight * 0.35;
+                    margin = 0;
+                }
 
-                    if(!this.active || trackInfo.active == false)
-                        ctx.fillStyle = Timeline.COLOR_UNACTIVE;
-                        
-                    ctx.translate(keyframePosX, y + this.trackHeight * 0.75 + margin);
-                    ctx.rotate(45 * Math.PI / 180);		
-                    ctx.fillRect( -size, -size, size, size);
-                    if(selected) {
-                        ctx.globalAlpha = 0.3;
-                        ctx.fillRect( -size*1.5, -size*1.5, size*2, size*2);
-                    }
-                        
-                    ctx.restore();
+                if(trackInfo.hovered[j]) {
+                    size = trackHeight * 0.35;
+                    ctx.fillStyle = Timeline.COLOR_HOVERED;
+                    ctx.shadowBlur = 8;
+                    margin = 0;
+                }
+                if(trackInfo.locked) {
+                    ctx.fillStyle = Timeline.COLOR_LOCK;
+                }
+
+                if(!this.active || trackInfo.active == false) {
+                    ctx.fillStyle = Timeline.COLOR_UNACTIVE;
                 }
+                    
+                ctx.translate(keyframePosX, y + this.trackHeight * 0.75 + margin);
+                ctx.rotate(45 * Math.PI / 180);		
+                ctx.fillRect( -size, -size, size, size);
+                if(selected) {
+                    ctx.globalAlpha = 0.3;
+                    ctx.fillRect( -size*1.1, -size*1.1, size*1.2, size*1.2);
+                }
+                ctx.shadowBlur = 0;
+                ctx.restore();
             }
         }
+        
 
         ctx.globalAlpha = this.opacity;
     }
@@ -1027,99 +1125,129 @@ class Timeline {
 
     drawTrackWithBoxes( ctx, y, trackHeight, title, track ) {
 
-        let offset = (trackHeight - trackHeight *0.6)*0.5;
-        this.tracksDrawn.push([track,y+this.topMargin,trackHeight]);
+        const  offset = (trackHeight - trackHeight * 0.6) * 0.5;
+        this.tracksDrawn.push([track, y + this.topMargin, trackHeight]);
+        
         trackHeight *= 0.6;
+        this.canvas = this.canvas || ctx.canvas;
+        
         let selectedClipArea = null;
 
-        if(track.enabled === false)
+        if(track.enabled === false) {
             ctx.globalAlpha = 0.4;
-        this.canvas = this.canvas || ctx.canvas;
-        ctx.font = Math.floor( trackHeight * 0.8) + "px Arial";
-        ctx.textAlign = "left";
-        ctx.fillStyle = "rgba(255,255,255,0.8)";
+        }
+        else {
+            ctx.globalAlpha = 0.2;
+        }
 
-        // if(title != null)
-        // {
-        //     // var info = ctx.measureText( title );
-        //     ctx.fillStyle = "rgba(255,255,255,0.9)";
-        //     ctx.fillText( title, 25, y + trackHeight * 0.8 );
-        // }
+        ctx.font = Math.floor( trackHeight * 0.8) + "px" + Timeline.FONT;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT//"#2c303570";
+        
+        // Fill track background if it's selected
+        if(track.isSelected) {
+            ctx.fillRect(0, y + offset - 2, ctx.canvas.width, trackHeight + 4 );    
+        }
 
-        ctx.fillStyle = "rgba(10,200,200,1)";
         var clips = track.clips;
         let trackAlpha = 1;
 
-        if(clips) {
-     
-            for(var j = 0; j < clips.length; ++j)
-            {
-                selectedClipArea = null;
-                let clip = clips[j];
-                //let selected = track.selected[j];
-                var x = Math.floor( this.timeToX(clip.start) ) + 0.5;
-                var x2 = Math.floor( this.timeToX( clip.start + clip.duration ) ) + 0.5;
-                var w = x2-x;
-
-                if( x2 < 0 || x > this.canvas.width )
-                    continue;
+        if(!clips) {
+            return;
+        }
 
-                //background rect
-                ctx.globalAlpha = trackAlpha;
-                ctx.fillStyle = clip.clipColor || "#5e9fdd"//#333";
-                //ctx.fillRect(x,y,w,trackHeight);
-                ctx.roundRect( x, y + offset, w, trackHeight , 5, true);
-               
-                let fadeinX = this.secondsToPixels * ((clip.fadein || 0) - clip.start);
-                let fadeoutX = this.secondsToPixels * (clip.start + clip.duration - (clip.fadeout || (clip.start + clip.duration)));
-   
-                let color = LX.UTILS.HexToRgb(ctx.fillStyle);
-                color = color.map(x => x*=0.8);
-                ctx.fillStyle = 'rgba(' + color.join(',') + ', 0.8)';
-                
-                if(fadeinX>0)
+        for(var j = 0; j < clips.length; ++j)
+        {
+            selectedClipArea = null;
+            let clip = clips[j];
+            //let selected = track.selected[j];
+            var x = Math.floor( this.timeToX(clip.start) ) + 0.5;
+            var x2 = Math.floor( this.timeToX( clip.start + clip.duration ) ) + 0.5;
+            var w = x2-x;
+
+            if( x2 < 0 || x > this.canvas.width )
+                continue;
+            
+            // Overwrite clip color state depending on its state
+            ctx.globalAlpha = trackAlpha;
+            ctx.fillStyle = clip.clipColor || (track.hovered[j] ? Timeline.COLOR_HOVERED : (Timeline.COLOR));
+            if(track.selected[j] && !clip.clipColor) {
+                ctx.fillStyle = Timeline.TRACK_SELECTED;
+            }
+            if(!this.active || track.active == false) {
+                ctx.fillStyle = Timeline.COLOR_UNACTIVE;
+            }
+
+            // Draw clip background
+            ctx.roundRect( x, y + offset, w, trackHeight , 5, true);
+            
+            // Compute timeline position of fade-in and fade-out clip times
+            let fadeinX = this.secondsToPixels * ((clip.fadein || 0) - clip.start);
+            let fadeoutX = this.secondsToPixels * (clip.start + clip.duration - (clip.fadeout || (clip.start + clip.duration)));
+            
+            if(this.active && track.active) {
+                // Transform fade-in and fade-out fill color to RGBA
+                if(ctx.fillStyle[0] == "#") {
+                    let color = LX.UTILS.HexToRgb(ctx.fillStyle);
+                    color = color.map(x => x*=0.8);
+                    ctx.fillStyle = 'rgba(' + color.join(',') + ', 0.8)';
+                }
+                else {
+                    ctx.globalAlpha = 0.8;
+                }
+            
+                // Draw fade-in and fade-out
+                if(fadeinX >= 0) {
                     ctx.roundRect(x, y + offset, fadeinX, trackHeight, {tl: 5, bl: 5, tr:0, br:0}, true);
-                if(fadeoutX)
+                }
+                if(fadeoutX) {
                     ctx.roundRect( x + w - fadeoutX, y + offset, fadeoutX, trackHeight, {tl: 0, bl: 0, tr:5, br:5}, true);
-               
-                //draw clip outline
-                if(clip.hidden)
-                    ctx.globalAlpha = trackAlpha * 0.5;
-                
-                ctx.globalAlpha = trackAlpha;
-                if(this.selectedClip == clip || track.selected[j])
-                    selectedClipArea = [x, y + offset, x2-x, trackHeight];
-
-                ctx.fillStyle = "black"; //Timeline.FONT_COLOR; // clip.color || Timeline.FONT_COLOR;
-                ctx.font = "12px" + Timeline.FONT;
-                //render clip selection area
-                if(selectedClipArea)
-                {
-                    ctx.strokeStyle =  track.clips[j].clipColor;
-                    ctx.fillStyle = "white"; //(Timeline.FONT_COLOR || track.clips[j].clipColor);
-                    ctx.globalAlpha = 0.6;
-                    ctx.lineWidth = 2.5;
-                    ctx.roundRect(selectedClipArea[0]-1,selectedClipArea[1]-1,selectedClipArea[2]+2,selectedClipArea[3]+2, 5, false, true);
-                    ctx.strokeStyle = "#888";
-                    ctx.lineWidth = 0.5;
-                    ctx.globalAlpha = this.opacity;
-                    ctx.font = "bold 13px " + Timeline.FONT;
                 }
+            }
+            
+            ctx.fillStyle = clip.color || Timeline.FONT_COLOR; // clip.color || Timeline.FONT_COLOR;
+            //ctx.font = "12px" + Timeline.FONT;
 
-                let text = clip.id.replaceAll("_", " ").replaceAll("-", " ");
-                
-                if( this.secondsToPixels < 200)
-                    ctx.font = this.secondsToPixels*0.06  +"px" + Timeline.FONT;
+            // Overwrite style and draw clip selection area if it's selected
+            ctx.globalAlpha = clip.hidden ? trackAlpha * 0.5 : trackAlpha;
             
-                let textInfo = ctx.measureText( text );
-                if(this.secondsToPixels > 100)
-                    ctx.fillText( text, x + (w - textInfo.width)*0.5,  y + offset + trackHeight/2 + textInfo.fontBoundingBoxDescent );
+            if(this.selectedClip == clip || track.selected[j] || track.hovered[j]) {
+                ctx.strokeStyle = ctx.shadowColor = track.clips[j].clipColor || Timeline.TRACK_SELECTED;
+                ctx.shadowBlur = 10;
+                ctx.shadowOffsetX = 1.5;
+                ctx.shadowOffsetY = 1.5;
+                
+                selectedClipArea = [x - 1, y + offset -1, x2 - x + 2, trackHeight + 2];
+                ctx.roundRect(selectedClipArea[0], selectedClipArea[1], selectedClipArea[2], selectedClipArea[3], 5, false, true);
+
+                ctx.shadowBlur = 0;
+                ctx.shadowOffsetX = 0;
+                ctx.shadowOffsetY = 0;
 
-                ctx.font = "12px" + Timeline.FONT;
+                ctx.font = "bold" + Math.floor( trackHeight) + "px " + Timeline.FONT;
+                ctx.fillStyle = "white";
             }
+
+            // Overwrite style with small font size if it's zoomed out
+            if( this.secondsToPixels < 200) {
+                ctx.font = this.secondsToPixels*0.06  +"px" + Timeline.FONT;
+            }
+
+            const text = clip.id.replaceAll("_", " ").replaceAll("-", " ");
+            const textInfo = ctx.measureText( text );
+            
+            // Draw clip name if it's readable
+            if(this.secondsToPixels > 100) {
+                ctx.fillText( text, x + (w - textInfo.width)*0.5,  y + offset + trackHeight * 0.5);
+            }
+
+            ctx.fillStyle = track.hovered[j] ? "white" : Timeline.FONT_COLOR;
+            // Draw resize bounding
+            ctx.roundRect(x + w - 8 , y + offset , 8, trackHeight, {tl: 4, bl: 4, tr:4, br:4}, true);           
         }
 
-        //ctx.restore();
+        ctx.font = "12px" + Timeline.FONT;
     }
 
     /**
@@ -1228,18 +1356,15 @@ class Timeline {
      */
     resize( size = [this.root.parent.root.clientWidth, this.root.parent.root.clientHeight]) {
 
-        this.root.root.style.width = size[0] + "px";
-        this.root.root.style.height = size[1] + "px";
+        // this.root.root.style.width = size[0] + "px";
+        // this.root.root.style.height = size[1] + "px";
         
         this.size = size; 
-        this.content_area.setSize([size[0], size[1] - this.header_offset]);
-        
-        let w = size[0] - this.leftPanel.root.clientWidth - 8;
-        this.resizeCanvas([w , size[1]]);
-        
-        // this.session.start_time = 0;
-       
+        //this.content_area.setSize([size[0], size[1] - this.header_offset]);
+        this.content_area.root.style.height = "calc(100% - "+ this.header_offset + "px)";
 
+        let w = size[0] - this.leftPanel.root.clientWidth - 8;
+        this.resizeCanvas([w , size[1]]);     
     }
 
     resizeCanvas( size ) {
@@ -1252,15 +1377,11 @@ class Timeline {
             this.pixelsToSeconds = 1 / this.secondsToPixels;
         }
         size[1] -= this.header_offset;
-        this.canvasArea.setSize(size);
-        this.canvas.width = size[0];
-        this.canvas.height = size[1];
-
-        // var centerx = this.canvas.width * 0.5;
-        // var x = this.xToTime( centerx );
-        // this.session.start_time += x - this.xToTime( centerx );
+        //this.canvasArea.setSize(size);
+        //this.canvasArea.root.style.height = "calc(100% - "+ this.header_offset + "px)";
+        this.canvas.width = this.canvasArea.root.clientWidth;
+        this.canvas.height = this.canvasArea.root.clientHeight;
         this.draw(this.currentTime);
-        
     }
 
     /**
@@ -1278,19 +1399,20 @@ class Timeline {
     show() {
         
         this.root.show();
-        this.resize();
-        
+        this.updateLeftPanel();
+        this.resize();        
     }
 };
 
 Timeline.BACKGROUND_COLOR = LX.getThemeColor("global-color-primary");
-Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-color-secondary");
+Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-blur-background");
 Timeline.TRACK_COLOR_SECONDARY = LX.getThemeColor("global-color-terciary");
 Timeline.TRACK_SELECTED = LX.getThemeColor("global-selected");
+Timeline.TRACK_SELECTED_LIGHT = LX.getThemeColor("global-selected-light");
 Timeline.FONT = LX.getThemeColor("global-font");
 Timeline.FONT_COLOR = LX.getThemeColor("global-text");
-Timeline.COLOR = "#5e9fdd";
-Timeline.COLOR_HOVERED = "rgba(250,250,250,0.7)";
+Timeline.COLOR = LX.getThemeColor("global-selected-dark");//"#5e9fdd";
+Timeline.COLOR_HOVERED = LX.getThemeColor("global-selected");
 Timeline.COLOR_SELECTED = "rgba(250,250,20,1)"///"rgba(250,250,20,1)";
 Timeline.COLOR_UNACTIVE = "rgba(250,250,250,0.7)";
 Timeline.COLOR_LOCK = "rgba(255,125,125,0.7)";
@@ -1319,14 +1441,8 @@ class KeyFramesTimeline extends Timeline {
         this.autoKeyEnabled = false;
 
 
-        if(this.animationClip && this.animationClip.tracks.length)
+        if(this.animationClip && this.animationClip.tracks.length) {
             this.processTracks(this.animationClip);
-
-        // Add button data
-        let offset = 25;
-        if(this.active)
-        {
-
         }
     }
 
@@ -1363,28 +1479,17 @@ class KeyFramesTimeline extends Timeline {
             }
 
         }else {
-            let boundingBox = this.canvas.getBoundingClientRect()
-            if(e.y < boundingBox.top || e.y > boundingBox.bottom) 
+            let boundingBox = this.canvas.getBoundingClientRect();
+            if(e.y < boundingBox.top || e.y > boundingBox.bottom) {
                 return;
+            }
+
             // Check exact track keyframe
             if(!discard && track) {
-                this.processCurrentKeyFrame( e, null, track, localX );
-                
+                this.processCurrentKeyFrame( e, null, track, localX );                
             } 
             else {
-                this.unSelectAllKeyFrames();
-                let x = e.offsetX;
-                let y = e.offsetY - this.topMargin;
-                for( const b of this.buttonsDrawn ) {
-                    b.pressed = false;
-                    const bActive = x >= b[2] && x <= (b[2] + b[4]) && y >= b[3] && y <= (b[3] + b[5]);
-                    if(bActive) {
-                        const callback = b[6]; 
-                        if(callback) callback(e);
-                        else this[ b[1] ] = !this[ b[1] ];
-                        break;
-                    }
-                }
+                this.unSelectAllKeyFrames();               
             }
         }
 
@@ -1423,15 +1528,6 @@ class KeyFramesTimeline extends Timeline {
                 }
                 
                 this.timeBeforeMove = track.times[ keyFrameIndex ];
-                
-                
-            }
-        } else if(!track) {
-            let x = e.offsetX;
-            let y = e.offsetY - this.topMargin;
-            for( const b of this.buttonsDrawn ) {
-                const bActive = x >= b[2] && x <= (b[2] + b[4]) && y >= b[3] && y <= (b[3] + b[5]);
-                b.pressed = bActive;
             }
         }
     }
@@ -1638,7 +1734,7 @@ class KeyFramesTimeline extends Timeline {
             track.selected[newIdx] = true;
 
         }
-        LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime );
+        //LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime );
         // Update time
         if(this.onSetTime)
             this.onSetTime(this.currentTime);
@@ -1652,48 +1748,84 @@ class KeyFramesTimeline extends Timeline {
         this.tracksPerItem = {};
         this.tracksDictionary = {};
         this.animationClip = {
-            name: animation.name,
-            duration: animation.duration,
-            speed: animation.speed ?? 1,
+            name: (animation && animation.name) ? animation.name : "animationClip",
+            duration: animation ? animation.duration : 0,
+            speed: (animation && animation.speed ) ? animation.speed : this.speed,
             tracks: []
         };
+        if (animation && animation.tracks) {
+            for( let i = 0; i < animation.tracks.length; ++i ) {
+                
+                let track = animation.tracks[i];
+                
+                const [name, type] = this.getTrackName(track.name);
+                
+                let trackInfo = {
+                    fullname: track.name,
+                    name: name, type: type,
+                    dim: track.values.length/track.times.length,
+                    selected: [], edited: [], hovered: [], active: true,
+                    times: track.times,
+                    values: track.values
+                };
+                
+                if(!this.tracksPerItem[name]) {
+                    this.tracksPerItem[name] = [trackInfo];
+                }else {
+                    this.tracksPerItem[name].push( trackInfo );
+                }
+                
+                
+                const trackIndex = this.tracksPerItem[name].length - 1;
+                this.tracksPerItem[name][trackIndex].idx = trackIndex;
+                this.tracksPerItem[name][trackIndex].clipIdx = i;
+                
+                // Save index also in original track
+                track.idx = trackIndex;
+                this.tracksDictionary[track.name] = name;
+                
+                this.animationClip.tracks.push(trackInfo);
+            }
+        }
+        this.resize();
+    }
 
-        for( let i = 0; i < animation.tracks.length; ++i ) {
-
-            let track = animation.tracks[i];
+    updateTrack(trackIdx, track) {
+        if(!this.animationClip)
+            return;
+        this.animationClip.tracks[trackIdx].values = track.values;
+        this.animationClip.tracks[trackIdx].times = track.times;
+        this.processTrack(trackIdx);
 
-            const [name, type] = this.getTrackName(track.name);
+    }
 
-            let trackInfo = {
-                fullname: track.name,
-                name: name, type: type,
-                dim: track.values.length/track.times.length,
-                selected: [], edited: [], hovered: [], active: true,
-                times: track.times,
-                values: track.values
-            };
-            
-            if(!this.tracksPerItem[name]) {
-                this.tracksPerItem[name] = [trackInfo];
-            }else {
-                this.tracksPerItem[name].push( trackInfo );
-            }
-            
+    processTrack(trackIdx) {
+        if(!this.animationClip)
+            return;
 
-            const trackIndex = this.tracksPerItem[name].length - 1;
-            this.tracksPerItem[name][trackIndex].idx = trackIndex;
-            this.tracksPerItem[name][trackIndex].clipIdx = i;
+        let track = this.animationClip.tracks[trackIdx];
 
-            // Save index also in original track
-            track.idx = trackIndex;
-            this.tracksDictionary[track.name] = name;
+        const [name, type] = this.getTrackName(track.fullname || track.name);
 
-            this.animationClip.tracks.push(trackInfo);
+        let trackInfo = {
+            fullname: track.name,
+            name: name, type: type,
+            dim: track.values.length/track.times.length,
+            selected: [], edited: [], hovered: [], active: true,
+            times: track.times,
+            values: track.values
+        };
+        
+        for(let i = 0; i < this.tracksPerItem[name].length; i++) {
+            if(this.tracksPerItem[name][i].fullname == trackInfo.fullname) {
+                trackInfo.idx = this.tracksPerItem[name][i].idx;
+                trackInfo.clipIdx = this.tracksPerItem[name][i].clipIdx;
+                this.tracksPerItem[name][i] = trackInfo;
+                return;
+            }
         }
-        this.resize();
     }
 
-
     optimizeTrack(trackIdx) {
         const track = this.animationClip.tracks[trackIdx];
         if(track.optimize) {
@@ -2396,35 +2528,148 @@ class ClipsTimeline extends Timeline {
         this.lastClipsSelected = [];
     }
 
-    resizeCanvas( size ) {
-        if( size[0] <= 0 && size[1] <=0 )
-            return;
+    // resizeCanvas( size ) {
+    //     if( size[0] <= 0 && size[1] <=0 )
+    //         return;
 
-        size[1] -= this.header_offset;
+    //     size[1] -= this.header_offset;
 
-        if(Math.abs(this.canvas.width - size[0]) > 1) {
+    //     if(Math.abs(this.canvas.width - size[0]) > 1) {
             
-            var w = Math.max(300, size[0] );
-            this.secondsToPixels = ( w- this.session.left_margin ) / this.duration;
-            this.pixelsToSeconds = 1 / this.secondsToPixels;
+    //         var w = Math.max(300, size[0] );
+    //         this.secondsToPixels = ( w- this.session.left_margin ) / this.duration;
+    //         this.pixelsToSeconds = 1 / this.secondsToPixels;
+    //     }
+
+    //     this.canvasArea.setSize(size);
+    //     this.canvas.width = size[0];
+    //     this.canvas.height = size[1];
+    //     var w = Math.max(300, this.canvas.width);
+        
+    //     this.draw(this.currentTime); 
+    // }
+
+    updateLeftPanel(area) {
+
+        if(this.leftPanel)
+            this.leftPanel.clear();
+        else {
+            this.leftPanel = area.addPanel({className: 'lextimelinepanel', width: "100%", height: "100%"});
         }
 
-        this.canvasArea.setSize(size);
-        this.canvas.width = size[0];
-        this.canvas.height = size[1];
-        var w = Math.max(300, this.canvas.width);
-        // this.secondsToPixels = ( w - this.session.left_margin ) / this.duration;
-        // this.pixelsToSeconds = 1 / this.secondsToPixels;
+        let panel = this.leftPanel;
         
-        let timeline_height = this.topMargin;
-        let line_height = this.trackHeight;
-        let max_tracks = Math.ceil( (size[1] - timeline_height) / line_height );
-        while(this.animationClip.tracks.length < max_tracks - 1) {
-            this.addNewTrack();
+        panel.sameLine(2);
+        let title = panel.addTitle("Tracks");
+        if(!this.disableNewTracks) 
+        {
+            panel.addButton('', '<i class = "fa-solid fa-plus"></i>', (value, event) => {
+                this.addNewTrack();
+            }, {width: "40px", height: "40px"});            
+        }
+        panel.endLine();
+        const styles = window.getComputedStyle(title);
+        const titleHeight = title.clientHeight + parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
+        let p = new LX.Panel({height: "calc(100% - " + titleHeight + "px)"});
+
+        if(this.animationClip)  {
+
+            for(let i = 0; i < this.animationClip.tracks.length; i++ ) {
+                let track = this.animationClip.tracks[i];
+                let t = {
+                    'id': track.name ?? "Track_" + track.idx.toString(),
+                    'name': track.name,
+                    'skipVisibility': this.skipVisibility,     
+                    'visible': track.active,  
+                    'selected' : track.isSelected                
+                }
+                              
+                let tree = p.addTree(null, t, {filter: false, rename: false, draggable: false, onevent: (e) => {
+                    switch(e.type) {
+                        case LX.TreeEvent.NODE_SELECTED:
+                            this.selectTrack(e.node);
+                            break;
+                        case LX.TreeEvent.NODE_VISIBILITY:    
+                            this.changeTrackVisibility(e.node, e.value);
+                            break;
+                        case LX.TreeEvent.NODE_CARETCHANGED:    
+                            this.changeTrackDisplay(e.node, e.node.closed);
+                            break;
+                    }
+                }});
+            }
+        }
+        panel.attach(p.root)
+        p.root.style.overflowY = "scroll";
+        p.root.addEventListener("scroll", (e) => {
+            this.currentScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight);
+         })
+        // for(let i = 0; i < this.animationClip.tracks.length; i++) {
+        //     let track = this.animationClip.tracks[i];
+        //     panel.addTitle(track.name + (track.type? '(' + track.type + ')' : ''));
+        // }
+        if(this.leftPanel.parent.root.classList.contains("hidden") || !this.root.root.parent)
+            return;
+        this.resizeCanvas([ this.root.root.clientWidth - this.leftPanel.root.clientWidth  - 8, this.size[1]]);
+    }
+
+    
+    /**
+    * @method changeTrackVisibility
+    * @param {id, parent, children, visible} trackInfo 
+    */
+
+    changeTrackVisibility(trackInfo, visible) {
+        let [name, type] = trackInfo.id.split(" (");
+        if(type)
+            type = type.replaceAll(")", "").replaceAll(" ", "");
+        else {
+            type = name;
+            name = trackInfo.parent ? trackInfo.parent.id : trackInfo.id;
         }
+        let id = name.split("Track_")[1];
+        trackInfo = {name, type};
+        let track = this.animationClip.tracks[id];
+  
+        track.active = visible;
+        trackInfo = track;
         
-        this.draw(this.currentTime);
-      
+        this.draw();
+        if(this.onChangeTrackVisibility)
+            this.onChangeTrackVisibility(trackInfo, visible);
+    }
+
+        /**
+    * @method selectTrack
+    * @param {id, parent, children, visible} trackInfo 
+    */
+
+    selectTrack( trackInfo) {
+        this.unSelectAllTracks();
+        
+        let [name, type] = trackInfo.id.split(" (");
+        
+        if(type)
+            type = type.replaceAll(")", "").replaceAll(" ", "");
+        else {
+            type = name;
+            name = trackInfo.parent ? trackInfo.parent.id : trackInfo.id;
+        }
+        let id = name.split("Track_")[1];
+        let track = this.animationClip.tracks[id];
+        track.isSelected = true;
+        
+        trackInfo = track;
+        this.updateLeftPanel();
+        if(this.onSelectTrack)
+            this.onSelectTrack(trackInfo);
+    }
+
+    unSelectAllTracks() {
+        
+        for(let t = 0; t < this.animationClip.tracks.length; t++) {
+            this.animationClip.tracks[t].isSelected = false;
+        }    
     }
 
     onMouseUp( e ) {
@@ -2478,7 +2723,7 @@ class ClipsTimeline extends Timeline {
         this.boxSelectionStart = null;
         this.boxSelectionEnd = null;
 
-    }
+        }
 
     onMouseDown( e, time ) {
 
@@ -2496,26 +2741,26 @@ class ClipsTimeline extends Timeline {
             
             let x = e.offsetX;
             let selectedClips = [];
-            if(this.lastClipsSelected.length){
+            if(this.lastClipsSelected.length > 1) {                
                 selectedClips = this.lastClipsSelected;
             }
-            else{
+            else {
                 let clipIndex = this.getCurrentClip( track, this.xToTime( localX ), this.pixelsToSeconds * 5 );
                 if(clipIndex != undefined)
                 {
                     this.lastClipsSelected = selectedClips = [[track.idx, clipIndex]];
-                }
-            
+                }            
             }
+
             this.canvas.style.cursor = "grab";  
-            for(let i = 0; i< selectedClips.length; i++)
+            this.timelineClickedClips  = [];
+            for(let i = 0; i < selectedClips.length; i++)
             {
                 this.movingKeys = false
                 let [trackIndex, clipIndex] = selectedClips[i];
                 var clip = this.animationClip.tracks[trackIndex].clips[clipIndex];
 
-                if(!this.timelineClickedClips)
-                    this.timelineClickedClips  = [];
+                //if(!this.timelineClickedClips)
                 if(this.timelineClickedClips.indexOf(clip) < 0) {
                     this.timelineClickedClips.push(clip);
 
@@ -2524,7 +2769,7 @@ class ClipsTimeline extends Timeline {
                     this.timelineClickedClipsTime.push(this.xToTime( localX ));
                 }
 
-
+                
                 var endingX = this.timeToX( clip.start + clip.duration );
                 var distToStart = Math.abs( this.timeToX( clip.start ) - x );
                 var distToEnd = Math.abs( this.timeToX( clip.start + clip.duration ) - e.offsetX );
@@ -2535,7 +2780,7 @@ class ClipsTimeline extends Timeline {
                 //this.addUndoStep( "clip_modified", clip );
                 if( (e.ctrlKey && distToStart < 5) || (clip.fadein && Math.abs( this.timeToX( clip.start + clip.fadein ) - e.offsetX ) < 5) )
                     this.dragClipMode = "fadein";
-                else if(e.ctrlKey &&  Math.abs( endingX - x ) < 5 ) {
+                else if(Math.abs( endingX - x ) < 5 ) {
                     this.dragClipMode = "duration";
                     this.canvas.style.cursor = "column-resize";
                 }
@@ -2564,6 +2809,14 @@ class ClipsTimeline extends Timeline {
             if(this.onSelectClip)
                 this.onSelectClip(null);
         }
+        else if (track && (this.dragClipMode == "duration" || this.dragClipMode == "fadein" || this.dragClipMode == "fadeout" )) {
+            let clips = this.getClipsInRange(track, time, time, 0.1);
+            if(!clips) {
+                return;
+            }
+            this.lastClipsSelected = [[track.idx, clips[0]]];
+            this.timelineClickedClips = [track.clips[clips[0]]];
+        }
     }
 
     onMouseMove( e, time ) {
@@ -2574,6 +2827,11 @@ class ClipsTimeline extends Timeline {
                 this.onSetTime( t );	 
         }
 
+        const removeHover = () => {
+            if(this.lastHovered)
+                this.animationClip.tracks[ this.lastHovered[0] ].hovered[ this.lastHovered[1] ] = undefined;
+        };
+
         if(e.shiftKey) {
             if(this.boxSelection) {
                 this.boxSelectionEnd = [localX,localY - this.topMargin];
@@ -2594,8 +2852,9 @@ class ClipsTimeline extends Timeline {
                     
                     let trackIdx = this.lastClipsSelected[i][0];
                     let clipIdx = this.lastClipsSelected[i][1];
-                    var clip = this.timelineClickedClips[i] ;
-                    var diff = clip.start + delta < 0 ? - clip.start : delta;//this.currentTime - this.timelineClickedClipsTime[i];//delta;
+                    let clip = this.timelineClickedClips[i];
+                    let diff = clip.start + delta < 0 ? - clip.start : delta;//this.currentTime - this.timelineClickedClipsTime[i];//delta;
+                    
                     if( this.dragClipMode == "move" ) {
                         let clipsInRange = this.getClipsInRange(this.animationClip.tracks[trackIdx], clip.start+diff, clip.start + clip.duration + diff, 0.01)
                         if(clipsInRange && clipsInRange[0] != clipIdx)
@@ -2605,6 +2864,7 @@ class ClipsTimeline extends Timeline {
                             clip.fadein += diff;
                         if(clip.fadeout != undefined)
                             clip.fadeout += diff;
+                        
                         this.canvas.style.cursor = "grabbing";
                         
                         if( this.timelineClickedClips.length == 1 && e.track && e.movementY != 0) {
@@ -2623,41 +2883,94 @@ class ClipsTimeline extends Timeline {
                                 }     
                             // }
                         }
-                        if(this.onContentMoved) {
-                            this.onContentMoved(clip, diff);
-                        }
+                        // if(this.onContentMoved) {
+                        //     this.onContentMoved(clip, diff);
+                        // }
                     }
-                    else if( this.dragClipMode == "fadein" )
+                    else if( this.dragClipMode == "fadein" ) {
                         clip.fadein = Math.min(Math.max((clip.fadein || 0) + delta, clip.start), clip.start+clip.duration);
-                    else if( this.dragClipMode == "fadeout" )
+                        diff = 0;
+                    }
+                    else if( this.dragClipMode == "fadeout" ) {
                         clip.fadeout = Math.max(Math.min((clip.fadeout || clip.start+clip.duration) + delta, clip.start+clip.duration), clip.start);
+                        diff = 0;
+                    }
                     else if( this.dragClipMode == "duration" ) {
                         clip.duration += delta;
-                        clip.fadeout += delta;
-                        if(this.onContentMoved) {
-                            this.onContentMoved(clip, 0);
-                        }
+                        // if(delta < 0) {
+                        //     clip.fadein = Math.min(Math.max((clip.fadein || 0) + delta, clip.start), clip.start+clip.duration);
+                        // }
+                        clip.fadeout = Math.max(Math.min((clip.fadeout || clip.start+clip.duration) + delta, clip.start+clip.duration), clip.start);
+                        diff = 0;
+                        // if(this.onContentMoved) {
+                        //     this.onContentMoved(clip, 0);
+                        // }
                     }
 
                     if(this.duration < clip.start + clip.duration  )
                     {
                         this.setDuration(clip.start + clip.duration);
                     }
+                    if(this.onContentMoved) {
+                        this.onContentMoved(clip, diff);
+                    }
                 }
+                
                 return true;
             }
             else{
                 innerSetTime( this.currentTime );	
             }
         } 
-        else if(e.track && e.ctrlKey) {
-            for(let i = 0; i < e.track.clips.length; i++) {
-                let clip = e.track.clips[i];
-                const x = this.timeToX(clip.start+clip.duration);
-                if(Math.abs(e.localX - x) < 5)
+        // else if(e.track && e.ctrlKey) {
+        //     for(let i = 0; i < e.track.clips.length; i++) {
+        //         let clip = e.track.clips[i];
+        //         const x = this.timeToX(clip.start+clip.duration);
+        //         if(Math.abs(e.localX - x) < 5)
+        //             this.canvas.style.cursor = "col-resize";
+        //     }
+        // }
+        else if(e.track) {
+
+            let clips = this.getClipsInRange(e.track, time, time, 0.1)
+            if(!e.track.locked && clips != undefined) {
+                                
+                removeHover();
+                this.lastHovered = [e.track.idx, clips[0]];
+                e.track.hovered[clips[0]] = true;
+
+                let clip = e.track.clips[clips[0]];
+                if(!clip) {
+                    return;
+                }
+                
+                const durationX = this.timeToX(clip.start + clip.duration);
+                const fadeinX = this.timeToX(clip.fadein);
+                const fadeoutX = this.timeToX(clip.fadeout);
+                if(Math.abs(e.localX - durationX) < 8) {
                     this.canvas.style.cursor = "col-resize";
+                    this.dragClipMode = "duration";
+                }
+                else if(Math.abs(e.localX - fadeinX) < 8) {
+                    this.canvas.style.cursor = "e-resize";
+                    this.dragClipMode = "fadein";
+                }
+                else if(Math.abs(e.localX - fadeoutX) < 8) {
+                    this.canvas.style.cursor = "e-resize";
+                    this.dragClipMode = "fadeout";
+                }
+                else {
+                    this.dragClipMode = "";
+                }
+            }
+            else {
+                removeHover();
             }
         }
+        else {
+            removeHover();
+        }
+
     }
 
     onDblClick( e ) {
@@ -2749,30 +3062,35 @@ class ClipsTimeline extends Timeline {
         this.tracksPerItem = {};
         this.tracksDictionary = {};
         this.animationClip = {
-            name: animation.name,
-            duration: animation.duration,
-            speed: animation.speed ?? 1,
+            name: (animation && animation.name) ? animation.name : "animationClip",
+            duration: animation ? animation.duration : 0,
+            speed: (animation && animation.speed ) ? animation.speed : this.speed,
             tracks: []
         };
 
-        for( let i = 0; i < animation.tracks.length; ++i ) {
-
-            let track = animation.tracks[i];
-
-            const name = track.name;
-            const type = track.type;
-
-            let trackInfo = {
-                fullname: track.name,
-                clips: track.clips,
-                name: name, type: type,
-                selected: [], edited: [], hovered: [], active: true,
-                times: track.times,
-            };
-            
-            this.tracksDictionary[track.name] = name;
-
-            this.animationClip.tracks.push(trackInfo);
+        if (animation && animation.tracks){
+            for( let i = 0; i < animation.tracks.length; ++i ) {
+    
+                let track = animation.tracks[i];
+    
+                const name = track.name;
+                const type = track.type;
+    
+                let trackInfo = {
+                    fullname: track.name,
+                    clips: track.clips,
+                    name: name, type: type,
+                    selected: [], edited: [], hovered: [], active: true,
+                    times: track.times,
+                };
+                
+                this.tracksDictionary[track.name] = name;
+    
+                this.animationClip.tracks.push(trackInfo);
+            }
+        }
+        else {
+            this.addNewTrack();
         }
     }
 
@@ -2845,14 +3163,21 @@ class ClipsTimeline extends Timeline {
         let newStart = this.currentTime + offsetTime + clip.start;
         if(clip.fadein != undefined)
             clip.fadein += (newStart - clip.start);
+        else
+            clip.fadein = 0;
+
         if(clip.fadeout != undefined)
             clip.fadeout += (newStart - clip.start);
+        else
+            clip.fadeout = clip.duration;
+
         clip.start = newStart;
 
         // Time slot with other clip?
         let clipInCurrentSlot = null;
-        if(!this.animationClip) 
+        if(!this.animationClip || !this.animationClip.tracks || !this.animationClip.tracks.length) {
             this.addNewTrack();
+        }
 
         for(let i = 0; i < this.animationClip.tracks.length; i++) {
             clipInCurrentSlot = this.animationClip.tracks[i].clips.find( t => { 
@@ -3008,7 +3333,7 @@ class ClipsTimeline extends Timeline {
     */
     addClips( clips, offsetTime = 0, callback = null ) {
        
-        if(!this.animationClip) 
+        if(!this.animationClip || !this.animationClip.tracks || !this.animationClip.tracks.length) 
             this.addNewTrack();
 
         //Search track where to place each new clip
@@ -3037,7 +3362,7 @@ class ClipsTimeline extends Timeline {
                         if(!this.animationClip.tracks[i+1]) {
                             this.addNewTrack();
        
-                            trackIdxs[c] = {trackIdx: i+1, stat: newStart, end: newStart + clip.duration};
+                            trackIdxs[c] = {trackIdx: i+1, start: newStart, end: newStart + clip.duration};
                         }
                         else {
 
@@ -3288,15 +3613,16 @@ class ClipsTimeline extends Timeline {
     addNewTrack() {
 
         if(!this.animationClip)
-            this.animationClip = {tracks:[]};
+            this.animationClip = {duration:0, tracks:[]};
 
         let trackInfo = {
             idx: this.animationClip.tracks.length,
             clips: [],
-            selected: [], edited: [], hovered: []
+            selected: [], edited: [], hovered: [], active: true
         };
 
         this.animationClip.tracks.push(trackInfo);
+        this.updateLeftPanel();
         return trackInfo.idx;
     }
 
@@ -3456,15 +3782,32 @@ class ClipsTimeline extends Timeline {
 
         let indices = [];
 
+        // for(let i = 0; i < track.clips.length; ++i) {
+        //     let t = track.clips[i];
+        //     if((t.start + t.duration <= (maxTime + threshold) || t.start <= (maxTime + threshold)) &&
+        //         (t.start + t.duration >= (minTime - threshold) || t.start >= (minTime - threshold)) ) 
+        //     {
+        //         indices.push(i);
+        //     }
+        // }
+
         for(let i = 0; i < track.clips.length; ++i) {
             let t = track.clips[i];
-            if((t.start + t.duration <= (maxTime + threshold) || t.start <= (maxTime + threshold)) &&
-                (t.start + t.duration >= (minTime - threshold) || t.start >= (minTime - threshold)) ) 
+            if( (minTime - threshold >= t.start) &&
+                (minTime - threshold <= t.start + t.duration) ||
+                (minTime + threshold >= t.start) &&
+                (minTime + threshold <= t.start + t.duration) ||
+                (maxTime - threshold >= t.start) &&
+                (maxTime - threshold <= t.start + t.duration) ||
+                (maxTime + threshold >= t.start) &&
+                (maxTime + threshold <= t.start + t.duration) ||
+                (minTime - threshold <= t.start || minTime + threshold <= t.start) &&
+                (maxTime - threshold >= t.start + t.duration || maxTime + threshold >= t.start + t.duration)
+            )
             {
                 indices.push(i);
             }
         }
-
         return indices;
     }
 
@@ -3558,22 +3901,7 @@ class CurvesTimeline extends Timeline {
             if(!discard && track) {
                 this.processCurrentKeyFrame( e, null, track, localX );
                 
-            } 
-            else {
-                let x = e.offsetX;
-                let y = e.offsetY - this.topMargin;
-                for( const b of this.buttonsDrawn ) {
-                    b.pressed = false;
-                    const bActive = x >= b[2] && x <= (b[2] + b[4]) && y >= b[3] && y <= (b[3] + b[5]);
-                    if(bActive) {
-                        const callback = b[6]; 
-                        if(callback) callback(e);
-                        else this[ b[1] ] = !this[ b[1] ];
-                        break;
-                    }
-                }
-            }
-            
+            }                       
         }
 
         this.boxSelection = false;
@@ -3589,7 +3917,6 @@ class CurvesTimeline extends Timeline {
         let track = e.track;
 
         if(e.shiftKey) {
-
             this.boxSelection = true;
             this.boxSelectionStart = [localX, localY - this.topMargin];
             e.multipleSelection = true;
@@ -3617,13 +3944,7 @@ class CurvesTimeline extends Timeline {
             }
         }
         else if(!track) {
-            this.unSelectAllKeyFrames()
-            let x = e.offsetX;
-            let y = e.offsetY - this.topMargin;
-            for( const b of this.buttonsDrawn ) {
-                const bActive = x >= b[2] && x <= (b[2] + b[4]) && y >= b[3] && y <= (b[3] + b[5]);
-                b.pressed = bActive;
-            }
+            this.unSelectAllKeyFrames()           
         }
     }
 
@@ -3824,11 +4145,12 @@ class CurvesTimeline extends Timeline {
         let values = track.values;
 
         if(keyframes) {
-
-            ctx.fillStyle = "#2c303570";
+            ctx.globalAlpha = 0.2;
+            ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT//"#2c303570";
             if(trackInfo.isSelected)
                 ctx.fillRect(0, y - 3, ctx.canvas.width, trackHeight );      
                 
+            ctx.globalAlpha = 1;
             this.tracksDrawn.push([track,y+this.topMargin,trackHeight]);
                 
             //draw lines
@@ -3957,43 +4279,47 @@ class CurvesTimeline extends Timeline {
         this.tracksPerItem = {};
         this.tracksDictionary = {};
         this.animationClip = {
-            name: animation.name,
-            duration: animation.duration,
-            speed: animation.speed ?? 1,
+            name: (animation && animation.name) ? animation.name : "animationClip",
+            duration: animation ? animation.duration : 0,
+            speed: (animation && animation.speed ) ? animation.speed : this.speed,
             tracks: []
         };
-        for( let i = 0; i < animation.tracks.length; ++i ) {
-
-            let track = animation.tracks[i];
 
-            const [name, type] = this.getTrackName(track.name);
+        if (animation && animation.tracks) {
 
-            let trackInfo = {
-                fullname: track.name,
-                name: name, type: type,
-                dim: track.values.length/track.times.length,
-                selected: [], edited: [], hovered: [], active: true,
-                values: track.values,
-                times: track.times
+            for( let i = 0; i < animation.tracks.length; ++i ) {
+                
+                let track = animation.tracks[i];
+                
+                const [name, type] = this.getTrackName(track.name);
+                
+                let trackInfo = {
+                    fullname: track.name,
+                    name: name, type: type,
+                    dim: track.values.length/track.times.length,
+                    selected: [], edited: [], hovered: [], active: true,
+                    values: track.values,
+                    times: track.times
+                    
+                };
+                
+                if(!this.tracksPerItem[name]) {
+                    this.tracksPerItem[name] = [trackInfo];
+                }else {
+                    this.tracksPerItem[name].push( trackInfo );
+                }
+                
+                
+                const trackIndex = this.tracksPerItem[name].length - 1;
+                this.tracksPerItem[name][trackIndex].idx = trackIndex;
+                this.tracksPerItem[name][trackIndex].clipIdx = i;
+                
+                // Save index also in original track
+                trackInfo.idx = trackIndex;
+                this.tracksDictionary[track.name] = name;
+                this.animationClip.tracks.push(trackInfo);
                 
-            };
-            
-            if(!this.tracksPerItem[name]) {
-                this.tracksPerItem[name] = [trackInfo];
-            }else {
-                this.tracksPerItem[name].push( trackInfo );
             }
-            
-
-            const trackIndex = this.tracksPerItem[name].length - 1;
-            this.tracksPerItem[name][trackIndex].idx = trackIndex;
-            this.tracksPerItem[name][trackIndex].clipIdx = i;
-
-            // Save index also in original track
-            trackInfo.idx = trackIndex;
-            this.tracksDictionary[track.name] = name;
-            this.animationClip.tracks.push(trackInfo);
-
         }
     }