lexgui 0.1.40 → 0.1.42

package/build/components/timeline.js

@@ -15,7 +15,7 @@ class Session {
 
     constructor() {
 
-        this.start_time = - 0.01;
+        this.start_time = -0.01;
         this.left_margin = 0;
         // this.current_time = 0;
         // this.last_time = 0;
@@ -62,7 +62,7 @@ class Timeline {
         this.onBeforeCreateTopBar = options.onBeforeCreateTopBar;
         this.onAfterCreateTopBar = options.onAfterCreateTopBar;
         this.onChangePlayMode = options.onChangePlayMode;
-        this.onConfiguration = options.onConfiguration;
+        this.onShowConfiguration = options.onShowConfiguration;
         this.onBeforeDrawContent = options.onBeforeDrawContent;
         
         this.playing = false;
@@ -74,8 +74,8 @@ class Timeline {
 
         this.duration = 1;
         this.speed = 1;
-        this.position = [0, 0];
-        this.size = [ options.width ?? 400, options.height ?? 100];
+        this.position = [ 0, 0 ];
+        this.size = [ options.width ?? 400, options.height ?? 100 ];
         
         this.currentScroll = 0; //in percentage
         this.currentScrollInPixels = 0; //in pixels
@@ -107,17 +107,17 @@ class Timeline {
         let height = options.height ? options.height - this.header_offset : null;
 
         let area = new LX.Area( {id: "bottom-timeline-area", width: width || "calc(100% - 7px)", height: height || "100%"});
-        area.split({ type: "horizontal", sizes: ["15%", "85%"]});
+        area.split({ type: "horizontal", sizes: ["15%", "85%"] });
+        area.splitBar.style.zIndex = 1; // for some reason this is needed here
         this.content_area = area;
-        let [left, right] = area.sections;
+        let [ left, right ] = area.sections;
         
-        
-        right.root.appendChild(this.canvas);
+        right.root.appendChild( this.canvas );
         this.canvasArea = right;
         this.canvasArea.root.classList.add("lextimelinearea");
         this.updateHeader();
-        this.updateLeftPanel(left);
-        this.root.root.appendChild(area.root);
+        this.updateLeftPanel( left );
+        this.root.root.appendChild( area.root );
 
         if(!options.canvas && this.name != '') {
             this.root.root.id = this.name;
@@ -151,35 +151,41 @@ class Timeline {
 
     updateHeader() {
 
-        if(this.header)
+        if( this.header )
+        {
             this.header.clear();
-        else {
-            this.header = new LX.Panel({id:'lextimelineheader', height: this.header_offset+"px"});
-            this.root.root.appendChild(this.header.root);
+        }
+        else
+        {
+            this.header = new LX.Panel( { id: 'lextimelineheader', height: this.header_offset + "px" } );
+            this.root.root.appendChild( this.header.root );
         }
 
         let header = this.header;
         LX.DEFAULT_NAME_WIDTH = "50%";
         header.sameLine();
 
-        if(this.name) {
-            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"});
+        }, { width: "40px", buttonClass: "accept", title: "Play" });
 
-        header.addButton('', '<i class="fa-solid fa-rotate"></i>', (value, event) => {
+        header.addButton('', '<i class="fa-solid fa-rotate"></i>', ( value, event ) => {
             this.loop = !this.loop;
-            if(this.onChangePlayMode) {
-                this.onChangePlayMode(this.loop);
+            if( this.onChangePlayMode )
+            {
+                this.onChangePlayMode( this.loop );
             }
-
-        }, {width: "40px", selectable: true, selected: this.loop});
+        }, { width: "40px", selectable: true, selected: this.loop, title: 'Loop' });
         
-        if(this.onBeforeCreateTopBar)
-            this.onBeforeCreateTopBar(header);
+        if( this.onBeforeCreateTopBar )
+        {
+            this.onBeforeCreateTopBar( header );
+        }
 
         header.addNumber("Current Time", this.currentTime, (value, event) => {
             this.setTime(value)}, {signal: "@on_set_time_" + this.name, step: 0.01, min: 0, precision: 3, skipSlider: true});        
@@ -191,29 +197,35 @@ class Timeline {
         header.addNumber("Speed", + this.speed.toFixed(3), (value, event) => {
             this.setSpeed(value)}, {step: 0.01, signal: "@on_set_speed_" + this.name});    
            
-        if(this.onAfterCreateTopBar)
-            this.onAfterCreateTopBar(header);      
+        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"});
+        if( this.onShowOptimizeMenu )
+        {
+            header.addButton("", '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, { width: "40px", title: "Optimize" });
+        }
 
-        header.addButton("", '<i class="fa-solid fa-gear"></i>', (value, event) => {
-            if(this.configurationDialog){
-                this.configurationDialog.close();
-                this.configurationDialog = null;
-                return;
-            }
-            this.configurationDialog = new LX.Dialog("Configuration", d => {
-                if ( this.onConfiguration ){
-                    this.onConfiguration(d);
-                }               
-            }, {
-                onclose: (root) => {
-                    root.remove();
+        if( this.onShowConfiguration )
+        {
+            header.addButton("", '<i class="fa-solid fa-gear"></i>', (value, event) => {
+                if(this.configurationDialog){
+                    this.configurationDialog.close();
                     this.configurationDialog = null;
+                    return;
                 }
-            })
-        }, {width: "40px"})
+                this.configurationDialog = new LX.Dialog("Configuration", dialog => {
+                    this.onShowConfiguration(dialog);
+                }, {
+                    onclose: (root) => {
+                        this.configurationDialog.panel.clear(); // clear signals
+                        this.configurationDialog = null;
+                        root.remove();
+                    }
+                })
+            }, { width: "40px" })
+        }
 
         header.endLine();
         LX.DEFAULT_NAME_WIDTH = "30%";
@@ -223,46 +235,53 @@ class Timeline {
     * @method updateLeftPanel
     * 
     */
-    updateLeftPanel(area) {
-
+    updateLeftPanel( area ) {
 
         let scrollTop = 0;
-        if(this.leftPanel){
-            scrollTop = this.leftPanel.root.children[1].scrollTop;
+        if( this.leftPanel )
+        {
+            scrollTop = this.leftPanel.root.children[ 1 ].scrollTop;
             this.leftPanel.clear();
         }
-        else {
-            this.leftPanel = area.addPanel({className: 'lextimelinepanel', width: "100%", height: "100%"});
+        else
+        {
+            this.leftPanel = area.addPanel( { className: 'lextimelinepanel', width: "100%", height: "100%" } );
         }
 
         let panel = this.leftPanel;
-        panel.sameLine(2);
-        let title = panel.addTitle("Tracks");
+        panel.sameLine( 2 );
+
+        let title = panel.addTitle( "Tracks" );
         
-        if(!this.disableNewTracks) 
+        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 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.length)  {
-            let items = {'id': '', 'children': []};
+
+        if( this.animationClip && this.selectedItems.length )
+        {
+            let items = { 'id': '', 'children': [] };
 
             const tracksPerItem = this.animationClip.tracksPerItem;
-            for(let i = 0; i < this.selectedItems.length; i++ ) {
-                let selected = this.selectedItems[i];
+            for( let i = 0; i < this.selectedItems.length; i++ )
+            {
+                let selected = this.selectedItems[ i ];
                 let t = {
                     'id': selected,
                     'skipVisibility': true,
                     'children': []
                 }
-                for(let j = 0; j < tracksPerItem[selected].length; j++) {
+                for( let j = 0; j < tracksPerItem[selected].length; j++ )
+                {
                     let track = tracksPerItem[selected][j];
                     let id = track.type ? track.type : track.name;
 
@@ -299,7 +318,9 @@ class Timeline {
                     }]})
                     // panel.addTitle(track.name + (track.type? '(' + track.type + ')' : ''));
                 }
-                items.children.push(t);
+
+                items.children.push( t );
+
                 let el = p.addTree(null, t, {filter: false, rename: false, draggable: false, onevent: (e) => {
                     switch(e.type) {
                         case LX.TreeEvent.NODE_SELECTED:
@@ -315,12 +336,14 @@ class Timeline {
                             }
                             break;
                         case LX.TreeEvent.NODE_VISIBILITY:   
-                            if (e.node.parent){
-                                const tracksInItem = this.animationClip.tracksPerItem[e.node.parent.id];
+                            if ( e.node.parent )
+                            {
+                                const tracksInItem = this.animationClip.tracksPerItem[ e.node.parent.id ];
                                 const type = e.node.id;
                                 for(let i = 0; i < tracksInItem.length; i++) {
-                                    if(tracksInItem[i].type == type){
-                                        this.changeTrackVisibility(tracksInItem[i].clipIdx, e.value);
+                                    if(tracksInItem[i].type == type)
+                                    {
+                                        this.changeTrackVisibility( tracksInItem[ i ].clipIdx, e.value );
                                         break;
                                     }
                                 }
@@ -328,8 +351,9 @@ class Timeline {
                             break;
                         case LX.TreeEvent.NODE_CARETCHANGED:
                             const tracksInItem = this.animationClip.tracksPerItem[e.node.id];
-                            for( let i = 0; i < tracksInItem; ++i ){
-                                this.changeTrackDisplay(tracksInItem[i].clipIdx, e.node.closed);
+                            for( let i = 0; i < tracksInItem; ++i )
+                            {
+                                this.changeTrackDisplay( tracksInItem[ i ].clipIdx, e.node.closed );
                             }
                             break;
                     }
@@ -337,19 +361,23 @@ class Timeline {
 
             }
         }
-        panel.attach(p.root)
+
+        panel.attach( p.root )
         p.root.style.overflowY = "scroll";
-        p.root.addEventListener("scroll", (e) => {
+        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 + ')' : ''));
         // }
-        this.leftPanel.root.children[1].scrollTop = scrollTop;
+        this.leftPanel.root.children[ 1 ].scrollTop = scrollTop;
 
-        if(this.leftPanel.parent.root.classList.contains("hidden") || !this.root.root.parent)
+        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]]);
     }
 
@@ -359,8 +387,10 @@ class Timeline {
 
     addNewTrack() {
 
-        if(!this.animationClip)
+        if( !this.animationClip )
+        {
             this.animationClip = {tracks:[]};
+        }
 
         let trackInfo = {
             idx: this.animationClip.tracks.length,
@@ -368,7 +398,7 @@ class Timeline {
             selected: [], edited: [], hovered: []
         };
 
-        this.animationClip.tracks.push(trackInfo);
+        this.animationClip.tracks.push( trackInfo );
         this.updateLeftPanel();
         return trackInfo.idx;
     }
@@ -378,30 +408,36 @@ class Timeline {
         let tracks = [];
 
         // Manage negative selection
-        if(minY > maxY) {
+        if( minY > maxY )
+        {
             let aux = minY;
             minY = maxY;
             maxY = aux;
         }
 
-        for(let i = this.tracksDrawn.length - 1; i >= 0; --i) {
-            let t = this.tracksDrawn[i];
-            let pos = t[1] - this.topMargin, size = t[2];
+        for(let i = this.tracksDrawn.length - 1; i >= 0; --i)
+        {
+            let t = this.tracksDrawn[ i ];
+            let pos = t[ 1 ] - this.topMargin, size = t[ 2 ];
             if( pos + threshold >= minY && (pos + size - threshold) <= maxY ) {
-                tracks.push( t[0] );
+                tracks.push( t[ 0 ] );
             }
         }
 
         return tracks;
     }
 
-    getCurrentContent(track, time, threshold) {
+    getCurrentContent( track, time, threshold ) {
 
-        if(this.getCurrentKeyFrame)
-            return this.getCurrentKeyFrame(track, time, threshold);
+        if( this.getCurrentKeyFrame )
+        {
+            return this.getCurrentKeyFrame( track, time, threshold );
+        }
 
-        if(this.getCurrentClip)
-            return this.getCurrentClip(track, time, threshold);
+        if( this.getCurrentClip )
+        {
+            return this.getCurrentClip( track, time, threshold );
+        }
     }
 
     /**
@@ -412,17 +448,21 @@ class Timeline {
      * [KeyFrameTimeline] - each track should contain an attribute "dim" to indicate the value dimension (e.g. vector3 -> dim=3). Otherwise dimensions will be infered from track's values and times. Default is 1
      */
     setAnimationClip( animation, needsToProcess = true ) {
-        if ( this.unSelectAllKeyFrames ){
+
+        if ( this.unSelectAllKeyFrames )
+        {
             this.unSelectAllKeyFrames();
             this.unHoverAll();
             this.unSelectAllTracks();
             this.selectedItems = [];
         }
 
-        if(!animation || !animation.tracks || needsToProcess) { 
-            this.processTracks(animation); // generate default animationclip or process the user's one
+        if( !animation || !animation.tracks || needsToProcess )
+        { 
+            this.processTracks( animation ); // generate default animationclip or process the user's one
         }
-        else{
+        else
+        {
             this.animationClip = animation;
         }
        
@@ -431,12 +471,13 @@ class Timeline {
 
         //this.updateHeader();
         this.updateLeftPanel();
+
         return this.animationClip;
     }
 
-    drawTimeInfo (w, h = this.topMargin) {
+    drawTimeInfo( w, h = this.topMargin ) {
        
-        let ctx = this.canvas.getContext("2d");
+        let ctx = this.canvas.getContext( "2d" );
         ctx.font = "11px " + Timeline.FONT;//"11px Calibri";
         ctx.textAlign = "center";
                 
@@ -449,57 +490,57 @@ class Timeline {
         ctx.strokeStyle = LX.Timeline.FONT_COLOR;
 
         // set tick and sub tick times
-        let tick_time = 4;
-        if ( this.secondsToPixels > 900 ){ tick_time = 1; }
-        else if ( this.secondsToPixels > 100 ){ tick_time = 2; }
-        else if ( this.secondsToPixels > 50 ){ tick_time = 3; }
+        let tickTime = 4;
+        if ( this.secondsToPixels > 900 ) { tickTime = 1; }
+        else if ( this.secondsToPixels > 100 ) { tickTime = 2; }
+        else if ( this.secondsToPixels > 50 ) { tickTime = 3; }
 
-        let subtick_time = this.timeSeparators[tick_time - 1];
-        tick_time = this.timeSeparators[tick_time];
+        let subtickTime = this.timeSeparators[tickTime - 1];
+        tickTime = this.timeSeparators[tickTime];
 
-        // transform times into pixel coords
-        let tick_x = this.timeToX( this.startTime + tick_time ) - this.timeToX( this.startTime );
-        let subtick_x = subtick_time * tick_x / tick_time; 
+        // Transform times into pixel coords
+        let tickX = this.timeToX( this.startTime + tickTime ) - this.timeToX( this.startTime );
+        let subtickX = subtickTime * tickX / tickTime; 
 
-        let startx = this.timeToX( Math.floor( this.startTime / tick_time) * tick_time ); // floor because might need to draw previous subticks
+        let startx = this.timeToX( Math.floor( this.startTime / tickTime) * tickTime ); // floor because might need to draw previous subticks
         let endx = this.timeToX( this.endTime ); // draw up to endTime
 
-        // begin drawing
+        // Begin drawing
         ctx.beginPath();
         ctx.fillStyle = Timeline.FONT_COLOR//"#888";
         ctx.globalAlpha = this.opacity;
 
-        for( let x = startx; x <= endx; x += tick_x){
-            
-            // draw main line
-            ctx.moveTo(Math.round(x) + 0.5, h * 0.4 + h * 0.3 );
-            ctx.lineTo(Math.round(x) + 0.5, h * 0.95 );
-
-            // draw following sub lines
-            let endsub = x + tick_x - subtick_x*0.5;
-            for (let sub_x = x; sub_x < endsub && sub_x < endx; sub_x += subtick_x){
-                ctx.moveTo(Math.round(sub_x) + 0.5, h * 0.4 + h * 0.45 );
-                ctx.lineTo(Math.round(sub_x) + 0.5, h * 0.95 );
+        for( let x = startx; x <= endx; x += tickX )
+        {
+            // Draw main line
+            ctx.moveTo( Math.round( x ) + 0.5, h * 0.4 + h * 0.3 );
+            ctx.lineTo( Math.round( x ) + 0.5, h * 0.95 );
+
+            // Draw following sub lines
+            let endsub = x + tickX - subtickX * 0.5;
+            for ( let subX = x; subX < endsub && subX < endx; subX += subtickX )
+            {
+                ctx.moveTo( Math.round( subX ) + 0.5, h * 0.4 + h * 0.45 );
+                ctx.lineTo( Math.round( subX ) + 0.5, h * 0.95 );
             }
 
-            // draw time number
+            // Draw time number
             let t = this.xToTime( x );
-            ctx.fillText( t.toFixed(tick_time < 1? 1 : 0), x, h * 0.6);
+            ctx.fillText( t.toFixed( tickTime < 1 ? 1 : 0 ), x, h * 0.6 );
         }
 
         ctx.stroke();                
-
-
         ctx.restore();
     }
 
-    drawTracksBackground(w, h) {
+    drawTracksBackground( w, h ) {
 
         let canvas = this.canvas;
         let ctx = canvas.getContext("2d");
         let duration = this.duration;
         ctx.globalAlpha = this.opacity;
-        //content
+
+        // Content
         let margin = this.session.left_margin;
         let timeline_height = this.topMargin;
         let line_height = this.trackHeight;
@@ -509,19 +550,14 @@ class Timeline {
         let max_tracks = Math.ceil( (h - timeline_height + this.currentScrollInPixels) / line_height );
 
         ctx.save();
-        ctx.fillStyle = Timeline.BACKGROUND_COLOR;
-        for(let i = 0; i <= max_tracks; ++i)
+        ctx.fillStyle = "#f0f0f003"//Timeline.TRACK_COLOR_SECONDARY;
+        ctx.globalAlpha = 1;
+        for(let i = 0; i <= max_tracks; i+=2)
         {
-            ctx.fillStyle = i % 2 == 0 ?  Timeline.TRACK_COLOR_PRIMARY:  Timeline.BACKGROUND_COLOR;
             ctx.fillRect(0, timeline_height + i * line_height  - this.currentScrollInPixels, w, line_height );
         }
-    
-        //black bg
-        ctx.globalAlpha = 0.7;
-        ctx.fillStyle = Timeline.BACKGROUND_COLOR;
-        ctx.fillRect( margin, 0, canvas.width - margin, canvas.height);
         ctx.globalAlpha = this.opacity;
-        
+
         //bg lines
         ctx.strokeStyle = "#444";
         ctx.beginPath();
@@ -529,6 +565,7 @@ class Timeline {
         let pos = this.timeToX( 0 );
         if(pos < margin)
             pos = margin;
+        ctx.lineWidth = 1;
         ctx.moveTo( pos + 0.5, timeline_height);
         ctx.lineTo( pos + 0.5, canvas.height);
         ctx.moveTo( Math.round( this.timeToX( duration ) ) + 0.5, timeline_height);
@@ -704,7 +741,7 @@ class Timeline {
      * @param {Number} t 
      */
 
-    setDuration( t, updateHeader = true ) {
+    setDuration( t, updateHeader = true, skipCallback = false ) {
         let v = this.validateDuration(t);
         let decimals = t.toString().split('.')[1] ? t.toString().split('.')[1].length : 0;
         updateHeader = (updateHeader || +v.toFixed(decimals) != t);
@@ -714,7 +751,7 @@ class Timeline {
             LX.emit( "@on_set_duration_" + this.name, +this.duration.toFixed(3)); // skipcallback = true
         }
 
-        if( this.onSetDuration ) 
+        if( this.onSetDuration && !skipCallback ) 
             this.onSetDuration( this.duration );	 
     }
 
@@ -733,19 +770,19 @@ class Timeline {
      * @param {Number} speed 
      */
 
-    setSpeed(speed) {
+    setSpeed(speed, skipCallback = false) {
         this.speed = speed;
         LX.emit( "@on_set_speed_" + this.name, +this.speed.toFixed(3)); // skipcallback = true
         
-        if( this.onSetSpeed ) 
+        if( this.onSetSpeed && !skipCallback) 
             this.onSetSpeed( this.speed );	 
     }
 
-    setTime(time){
+    setTime(time, skipCallback = false ){
         this.currentTime = Math.max(0,Math.min(time,this.duration));
         LX.emit( "@on_set_time_" + this.name, +this.currentTime.toFixed(2)); // skipcallback = true
 
-        if(this.onSetTime)
+        if(this.onSetTime && !skipCallback)
             this.onSetTime(this.currentTime);
     }
 
@@ -832,6 +869,9 @@ class Timeline {
                 this.leftPanel.root.children[1].scrollTop += e.deltaY; // wheel deltaY
             }
             
+            if ( this.onMouse ){
+                this.onMouse(e, time);
+            }
             return;
         }
 
@@ -969,8 +1009,8 @@ class Timeline {
             return true;
         }
 
-        if( this.onMouse && this.onMouse( e, time, this ) )
-            return;
+        if( this.onMouse )
+            this.onMouse( e, time, this );
 
         return true;
     }
@@ -1159,21 +1199,38 @@ class Timeline {
     * // NOTE: to select a track from outside of the timeline, a this.leftPanelTrackTree.select(item) needs to be called.
     */
     selectTrack( trackIdx ) {
+
+        if( !this.animationClip )
+        {
+            return;
+        }
+
         this.unSelectAllTracks();
         
-        let track = this.animationClip.tracks[trackIdx];
+        let track = this.animationClip.tracks[ trackIdx ];
         track.isSelected = true;
         
-        if(this.onSelectTrack)
+        if( this.onSelectTrack )
+        {
             this.onSelectTrack(track);
+        }
     }
 
     unSelectAllTracks() {
-        for(let i = 0; i < this.selectedItems.length; i++) {
-            let item = this.selectedItems[i];
-            let tracks = this.animationClip.tracksPerItem[item];
-            for(let t = 0; t < tracks.length; t++) {
-                tracks[t].isSelected = false;
+
+        if( !this.animationClip )
+        {
+            return;
+        }
+
+        for(let i = 0; i < this.selectedItems.length; i++)
+        {
+            let item = this.selectedItems[ i ];
+            let tracks = this.animationClip.tracksPerItem[ item ];
+
+            for( let t = 0; t < tracks.length; t++ )
+            {
+                tracks[ t ].isSelected = false;
             }
         }
     }
@@ -2572,14 +2629,14 @@ class KeyFramesTimeline extends Timeline {
         
         const currentSelection = this.selectKeyFrame(t, keyFrameIndex, !multiple); // changes time 
 
+        if( !multiple ) {
+            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
+        }  
         if( this.onSelectKeyFrame && this.onSelectKeyFrame(e, currentSelection)) {
             // Event handled
             return;
         }        
-
-        if( !multiple ) {
-            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
-        }    
+          
     }
 
     /**
@@ -2605,7 +2662,6 @@ class KeyFramesTimeline extends Timeline {
     /**
      * @method clearTrack
      */
-
     clearTrack(idx, defaultValue) {
 
         let track =  this.animationClip.tracks[idx];
@@ -2615,11 +2671,14 @@ class KeyFramesTimeline extends Timeline {
             return;
         }
 
+        this.unHoverAll();
+        this.unSelectAllKeyFrames();
+
+        this.saveState(track.clipIdx);
         const count = track.times.length;
         for(let i = count - 1; i >= 0; i--)
         {
-            this.saveState(track.clipIdx);
-            this.#delete(track.clipIdx, i );
+            this.#delete(track.clipIdx, i);
         } 
         if(defaultValue != undefined) {
             if(typeof(defaultValue) == 'number')  {
@@ -2855,7 +2914,10 @@ class ClipsTimeline extends Timeline {
     onMouseMove( e, time ) {
         // function not called if shift is pressed (boxselection)
 
-        if(this.grabbing && e.buttons != 2) {
+        if ( this.grabbingTimeBar || this.grabbingScroll ){
+            return;
+        }
+        else if(this.grabbing && e.buttons != 2) {
             this.unHoverAll();
 
             let delta = time - this.grabTime;
@@ -2879,7 +2941,8 @@ class ClipsTimeline extends Timeline {
                         duration = Math.min( track.clips[this.lastClipsSelected[0][1] + 1].start - clip.start - 0.0001, duration );
                     }
                     clip.duration = duration;
-                    clip.fadeout = Math.max(Math.min((clip.fadeout || clip.start+clip.duration) + delta, clip.start+clip.duration), clip.start);
+                    clip.fadeout = Math.max(Math.min((clip.fadeout ?? (clip.start+clip.duration)) + delta, clip.start+clip.duration), clip.start);
+                    clip.fadein = Math.max(Math.min((clip.fadein ?? (clip.start+clip.duration)), (clip.fadeout ?? (clip.start+clip.duration))), clip.start);
                     if(this.duration < clip.start + clip.duration){
                         this.setDuration(clip.start + clip.duration);
                     }
@@ -3258,16 +3321,13 @@ class ClipsTimeline extends Timeline {
     /**
      * @method optimizeTrack
      */
-
     optimizeTrack(trackIdx) {	
     }
 
     /**
      * @method optimizeTracks
      */
-
     optimizeTracks() {
-        this.addClip()
     }
 
    /**
@@ -5154,14 +5214,14 @@ class CurvesTimeline extends Timeline {
         
         const currentSelection = this.selectKeyFrame(t, keyFrameIndex, !multiple, multiple); // changes time on the first keyframe selected
 
+        if (!multiple){
+            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
+        }
+
         if( this.onSelectKeyFrame && this.onSelectKeyFrame(e, currentSelection)) {
             // Event handled
             return;
         }
-
-        if (!multiple){
-            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
-        }
     }
 
     /**
@@ -5195,12 +5255,15 @@ class CurvesTimeline extends Timeline {
         {
             return;
         }
-
+        
+        this.unHoverAll();
+        this.unSelectAllKeyFrames();
+        
+        this.saveState(track.clipIdx);
         const count = track.times.length;
         for(let i = count - 1; i >= 0; i--)
         {
-            this.saveState(track.clipIdx);
-            this.#delete(track, i );
+            this.#delete(track.clipIdx, i );
         } 
         if(defaultValue != undefined) {
             if(typeof(defaultValue) == 'number')  {
@@ -5292,4 +5355,4 @@ LX.UTILS.concatTypedArray = (arrays, ArrayType) => {
     return result;
 }
 
-export { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline };
+export { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline };