lexgui 0.7.11 → 0.7.12

package/build/extensions/timeline.js

@@ -17,8 +17,8 @@ LX.registerIcon("TimelineLockOpen", '<svg xmlns="http://www.w3.org/2000/svg" wid
 class Timeline {
 
     /**
-     * @param {string} name = string unique id
-     * @param {object} options = {skipLock, skipVisibility}
+     * @param {String} name = string unique id
+     * @param {Object} options = {skipLock, skipVisibility}
      */
     constructor( id, options = {} ) {
 
@@ -104,6 +104,7 @@ class Timeline {
         this.canvasArea = right;
         this.canvasArea.root.classList.add("lextimelinearea");
 
+        this.selectedTracks = []; // [track, track] contains selected (highlighted) tracks. That is, tracks with .isSelected == true. Elements in array are not ordered. Only visible tracks should be selected
         this.selectedItems = []; // [trackInfo, "groupId"], contains the visible items (tracks or groups) of the timeline
         this.leftPanel = left.addPanel( { className: 'lextimelinepanel', width: "100%", height: "100%" } );
         this.trackTreesPanel = null;
@@ -183,7 +184,6 @@ class Timeline {
 
     /**
      * @method updateHeader
-     * @param {*}  
      */
 
     updateHeader() {
@@ -315,8 +315,7 @@ class Timeline {
                 if ( this.onAddNewTrackButton ){
                     this.onAddNewTrackButton();
                 }else{
-                    const trackIdx = this.addNewTrack();
-                    this.changeSelectedItems( [trackIdx] );
+                    this.addNewTrack();
                 }
             }, { hideName: true, title: "Add Track", icon: "Plus" });
         }
@@ -335,13 +334,17 @@ class Timeline {
         this.trackTreesComponent = p.addTree(null, treeTracks, {filter: false, rename: false, draggable: false, onevent: (e) => {
             switch(e.type) {
                 case LX.TreeEvent.NODE_SELECTED:
+                    if ( !e.event.shiftKey ){
+                        this.deselectAllTracks( false ); // no need to update left panel
+                    }
                     if (e.node.trackData){
-                        this.selectTrack(e.node.trackData.trackIdx);
+                        const flag = e.event.shiftKey? !e.node.trackData.isSelected : true;
+                        this.setTrackSelection( e.node.trackData.trackIdx, flag, false, false ); // do callback, do not update left panel
                     }
                     break;
                 case LX.TreeEvent.NODE_VISIBILITY:   
                     if (e.node.trackData){
-                        this.setTrackState( e.node.trackData.trackIdx, e.value );
+                        this.setTrackState( e.node.trackData.trackIdx, e.value, false, false ); // do not update left panel
                     } 
                     break;
             }
@@ -358,6 +361,10 @@ class Timeline {
             that.setTrackHeight( that.trackHeight );
         }
 
+        if ( this.selectedTracks.length ){
+            this._updateTrackTreeSelection(); // select visible tracks
+        }
+
         // setting a name in the addTree function adds an undesired node
         this.trackTreesComponent.name = "tracksTrees";
         p.components[this.trackTreesComponent.name] = this.trackTreesComponent;
@@ -406,7 +413,7 @@ class Timeline {
     }
 
     /**
-     * @param {object} options options for the new track 
+     * @param {Object} options options for the new track 
      *  { id: string, active: bool, locked: bool, } 
      * @returns 
      */
@@ -425,8 +432,8 @@ class Timeline {
     /**
      * Finds tracks (wholy and partially) inside the range minY maxY.
      * (Full) Canvas local coordinates.
-     * @param {number} minY 
-     * @param {number} maxY 
+     * @param {Number} minY 
+     * @param {Number} maxY 
      * @returns array of trackDatas
      */
     getTracksInRange( minY, maxY ) {
@@ -466,14 +473,14 @@ class Timeline {
     /**
      * @method setAnimationClip
      * @param {*} animation 
-     * @param {boolean} needsToProcess
-     * @param {obj} processOptions 
+     * @param {Boolean} needsToProcess
+     * @param {Object} processOptions 
      * [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 ) {
 
         this.deselectAllElements();
-        this.deselectAllTracks();
+        this.deselectAllTracks( false ); // no need to update left panel yet
 
         this.selectedItems = [];
 
@@ -802,7 +809,7 @@ class Timeline {
      * @method setScroll
      * not delta from last state, but full scroll amount.
      * @param {Number} scrollY either pixels or [0,1]
-     * @param {Bool} normalized if true, scrollY is in range[0,1] being 1 fully scrolled. Otherwised scrollY represents pixels
+     * @param {Boolean} normalized if true, scrollY is in range[0,1] being 1 fully scrolled. Otherwised scrollY represents pixels
      * @returns 
      */ 
     
@@ -930,7 +937,6 @@ class Timeline {
             this.movingKeys = false;
             this.timeBeforeMove = null;
             this.boxSelection = false; // after mouseup
-            this.deselectAllTracks();
         }
     
 
@@ -1057,7 +1063,7 @@ class Timeline {
     
     /**
      * @method changeState
-     * @param {bool} skipCallback defaults false
+     * @param {Boolean} skipCallback defaults false
      * @description change play/pause state
      **/
     changeState(skipCallback = false) {
@@ -1065,8 +1071,8 @@ class Timeline {
     }
     /**
      * @method setState
-     * @param {bool} state
-     * @param {bool} skipCallback defaults false
+     * @param {Boolean} state
+     * @param {Boolean} skipCallback defaults false
      * @description change play/pause state
      **/
     setState(state, skipCallback = false) {
@@ -1081,8 +1087,8 @@ class Timeline {
 
     /**
      * @method setLoopMode
-     * @param {bool} loopState 
-     * @param {bool} skipCallback defaults false
+     * @param {Boolean} loopState 
+     * @param {Boolean} skipCallback defaults false
      * @description change loop mode of the timeline
      */
     setLoopMode(loopState, skipCallback = false){
@@ -1116,11 +1122,14 @@ class Timeline {
     }
 
     /**
-     * @param {*} itemsToAdd [ trackIdx ], array of numbers identifying tracks by their index
-     * @param {*} itemsToRemove [ trackIdx ], array of numbers identifying tracks by their index
+     * @param {Array} itemsToAdd [ trackIdx ], array of numbers identifying tracks by their index
+     * @param {Array} itemsToRemove [ trackIdx ], array of numbers identifying tracks by their index
      */
     changeSelectedItems( itemsToAdd = null, itemsToRemove = null, skipCallback = false ) {
 
+        this.deselectAllElements();
+        this.deselectAllTracks( false ); // no need to update left panel. It is going to be rebuilt anyways
+       
         const tracks = this.animationClip.tracks;
 
         if ( itemsToRemove ){
@@ -1144,7 +1153,6 @@ class Timeline {
             }
         }
 
-        
         this.updateLeftPanel();
 
         if(this.onItemSelected && !skipCallback){
@@ -1154,7 +1162,7 @@ class Timeline {
 
     /**
      * It will find the first occurrence of trackId in animationClip.tracks
-     * @param {string} trackId 
+     * @param {String} trackId 
      * @returns 
      */
     getTrack( trackId ){
@@ -1168,38 +1176,83 @@ class Timeline {
     }
 
     /**
-     * Only affects render visualisation
-    * @method selectTrack
-    * @param {int} trackIdx
-    * // NOTE: to select a track from outside of the timeline, a this.trackTreesComponent.innerTree.select(item) needs to be called.
-    */
-    selectTrack( trackIdx ) {
+     * @param {Boolean} updateTrackTree whether the track tree needs a refresh 
+     * @returns 
+     */
+    deselectAllTracks( updateTrackTree = true ) {
 
         if( !this.animationClip ){
             return;
         }
 
-        this.deselectAllTracks();
-        
-        let track = this.animationClip.tracks[ trackIdx ];
-        track.isSelected = true;
-        
-        if( this.onSelectTrack ){
-            this.onSelectTrack(track);
+        const tracks = this.animationClip.tracks;
+        for(let i = 0; i < tracks.length; i++){
+            tracks[ i ].isSelected = false;
+        }
+
+        this.selectedTracks.length = 0;
+
+        if ( updateTrackTree ){
+            this._updateTrackTreeSelection();
         }
     }
 
-    // Only affects render visualisation
-    deselectAllTracks() {
+    /**
+     * @param {Int} trackIdx 
+     * @param {Boolean} isSelected new "selected" state of the track
+     * @param {Boolean} skipCallback whether to call onSetTrackSelection
+     * @param {Boolean} updateTrackTree whether track tree panel needs a refresh
+     * @returns 
+     */
+    setTrackSelection( trackIdx, isSelected, skipCallback = false, updateTrackTree = true ){
+        const track = this.animationClip.tracks[ trackIdx ];
+        const oldValue = track.isSelected;
+        track.isSelected = isSelected;
+        
+        const idx = this.selectedTracks.indexOf( track );
+        if ( ( idx == -1 && !isSelected ) || ( idx > -1 && isSelected ) ){
+            return; 
+        }
+
+        if ( idx == -1 ){
+            this.selectedTracks.push( track );
+        }else{
+            this.selectedTracks.splice( idx, 1 );
+        }
 
-        if( !this.animationClip ){
-            return;
+        if( this.onSetTrackSelection && !skipCallback ){
+            this.onSetTrackSelection(track, oldValue );
         }
 
-        const tracks = this.animationClip.tracks;
-        for(let i = 0; i < tracks.length; i++){
-            tracks[ i ].isSelected = false;
+        if ( updateTrackTree ){
+            this._updateTrackTreeSelection();
+        }
+    }
+
+    /**
+     * updates trackTreesComponent's nodes, to match the selectedTracks
+     */
+    _updateTrackTreeSelection(){
+        const data = this.trackTreesComponent.innerTree.data;
+        const selected = this.trackTreesComponent.innerTree.selected;
+        selected.length = 0;
+
+        const addToSelection = (nodes) =>{
+            for( let i = 0; i < nodes.length; ++i ){
+                if ( nodes[i].trackData && nodes[i].trackData.isSelected ){
+                    selected.push( nodes[i] );
+                }
+                if ( nodes[i].children ){
+                    addToSelection( nodes[i].children );
+                }
+            }
         }
+
+        // update innerTree (visible) selected nodes
+        if ( this.selectedTracks.length ){    
+            addToSelection( data );
+        }
+        this.trackTreesComponent.innerTree.refresh();
     }
 
     deselectAllElements(){
@@ -1208,22 +1261,53 @@ class Timeline {
 
     /**
     * @method setTrackState
-    * @param {int} trackIdx 
-    * @param {boolean} isEnbaled
+    * @param {Int} trackIdx 
+    * @param {Boolean} isEnbaled
+    * @param {Boolean} skipCallback onSetTrackState
+    * @param {Boolean} updateTrackTree updates eye icon of the track, if it is visible in the timeline
     */
-    setTrackState(trackIdx, isEnbaled = true, skipCallback = false) {
+    setTrackState(trackIdx, isEnbaled = true, skipCallback = false, updateTrackTree = true ) {
         const track = this.animationClip.tracks[trackIdx];
             
         const oldState = track.active;
         track.active = isEnbaled;
 
-        if(this.onSetTrackState && !skipCallback)
+        if ( this.onSetTrackState && !skipCallback ){
             this.onSetTrackState(track, oldState);
+        }
+
+        if ( updateTrackTree && !this.skipVisibility ){ 
+            // TODO: a bit of an overkill. Maybe searching the node in the tree is less expensive 
+            this.updateLeftPanel(); 
+        }
     }
 
     /**
-     * @param {Number} trackIdx index of track in the animation (not local index) 
-     * @param {Bool} combineWithPrevious whether to create a new entry or unify changes into a single undo entry
+     * 
+     * @param {Int} trackIdx 
+     * @param {Boolean} isLocked 
+     * @param {Boolean} skipCallback onSetTrackLock
+     * @param {Boolean} updateTrackTree updates lock icon of the track, if it is visible in the timeline
+     */
+    setTrackLock(trackIdx, isLocked = false, skipCallback = false, updateTrackTree = true ){
+        const track = this.animationClip.tracks[trackIdx];
+
+        const oldState = track.locked;
+        track.locked = isLocked;
+
+        if ( this.onSetTrackLock && !skipCallback ){
+            this.onSetTrackLock( track, oldState );
+        }
+
+        if ( updateTrackTree && !this.skipLock ){ 
+            // TODO: a bit of an overkill. Maybe searching the node in the tree is less expensive 
+            this.updateLeftPanel(); 
+        }
+    }
+
+    /**
+     * @param {Int} trackIdx index of track in the animation (not local index) 
+     * @param {Boolean} combineWithPrevious whether to create a new entry or unify changes into a single undo entry
      */
     saveState( trackIdx, combineWithPrevious = false ) {
         if ( !this.historySaveEnabler ){ return; }
@@ -1339,10 +1423,7 @@ class Timeline {
                 'icon': (track.locked ? 'TimelineLock' : 'TimelineLockOpen'),
                 'swap': (track.locked ? 'TimelineLockOpen' : 'TimelineLock'),
                 'callback': (node, swapValue, event) => {
-                    node.trackData.locked = !node.trackData.locked;
-                    if(this.onLockTrack){
-                        this.onLockTrack(node.trackData, node);
-                    }
+                    this.setTrackLock( node.trackData.trackIdx, !node.trackData.locked, false, false ); // do not update left panel
                 }
             }]});
         }
@@ -1352,7 +1433,7 @@ class Timeline {
 
     /**
      * 
-     * @param {obj} options set some values for the track instance (groups and trackIdx not included)
+     * @param {Object} options set some values for the track instance (groups and trackIdx not included)
      * @returns 
      */
     instantiateTrack(options = {}, clone = false) { 
@@ -1361,7 +1442,7 @@ class Timeline {
             id: options.id ?? ( Math.floor(performance.now().toString()) + "_" + Math.floor(Math.random() * 0xffff) ), //must be unique, at least inside a group
             active: options.active ?? true,
             locked: options.locked ?? false,
-            isSelected: false, // render only        
+            isSelected: false, // render and lexgui tree
             trackIdx: -1,
             data: options.data ?? null // user defined data
         }
@@ -1369,7 +1450,7 @@ class Timeline {
 
     /**
      * Generates an animationClip using either the parameters set in the animation argument or using default values
-     * @param {obj} animation data with which to generate an animationClip 
+     * @param {Object} animation data with which to generate an animationClip 
      * @returns 
      */
     instantiateAnimationClip(options, clone = false) {
@@ -1421,8 +1502,8 @@ class KeyFramesTimeline extends Timeline {
 
     static ADDKEY_VALUESINARRAYS = 0x01; // addkeyframes as [ [k0v0, k0v1...], [k1v0, k1v1...] ] instead of [k0v0,k0v1,k1v0,k1v1]
     /**
-     * @param {string} name unique string
-     * @param {object} options = {animationClip, selectedItems, x, y, width, height, canvas, trackHeight}
+     * @param {String} name unique string
+     * @param {Object} options = {animationClip, selectedItems, x, y, width, height, canvas, trackHeight}
      */
     constructor(name, options = {}) {
 
@@ -1460,10 +1541,7 @@ class KeyFramesTimeline extends Timeline {
                     'icon': (track.locked ? 'TimelineLock' : 'TimelineLockOpen'),
                     'swap': (track.locked ? 'TimelineLockOpen' : 'TimelineLock'),
                     'callback': (node, swapValue, event) => {
-                        node.trackData.locked = !node.trackData.locked;
-                        if(this.onLockTrack){
-                            this.onLockTrack(node.trackData, node);
-                        }
+                        this.setTrackLock( node.trackData.trackIdx, !node.trackData.locked, false, false ); // do not update left panel
                     }
                 }]});
             }
@@ -1483,7 +1561,7 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * OVERRIDE
-     * @param {obj} options track information that wants to be set to the new track
+     * @param {Object} options track information that wants to be set to the new track
      *  id, dim, values, times, selected, edited, hovered
      * @returns 
      */
@@ -1528,7 +1606,7 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * Generates an animationClip using either the parameters set in the animation argument or using default values
-     * @param {obj} animation data with which to generate an animationClip 
+     * @param {Object} animation data with which to generate an animationClip 
      * @returns 
      */
     instantiateAnimationClip(animation, clone = false) {
@@ -1617,12 +1695,13 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * OVERRIDE
-     * @param {*} itemsToAdd [ trackIdx, "groupId" ], array of strings and/or number identifying groups and/or tracks
-     * @param {*} itemsToRemove [ trackIdx, "groupId" ], array of strings and/or number identifying groups and/or tracks
+     * @param {Array} itemsToAdd [ trackIdx, "groupId" ], array of strings and/or number identifying groups and/or tracks
+     * @param {Array} itemsToRemove [ trackIdx, "groupId" ], array of strings and/or number identifying groups and/or tracks
      */
     changeSelectedItems( itemsToAdd = null, itemsToRemove = null, skipCallback = false ) {
 
         this.deselectAllElements();
+        this.deselectAllTracks( false ); // no need to update left panel. It is going to be rebuilt anyways
         
         const tracks = this.animationClip.tracks;
         const tracksPerGroup = this.animationClip.tracksPerGroup;
@@ -1662,8 +1741,8 @@ class KeyFramesTimeline extends Timeline {
     }
 
     /**
-     * @param {string} groupId unique identifier
-     * @param {array} groupTracks [ "trackID", trackIdx ] array of strings and/or numbers of the existing tracks to include in this group. A track can only be part of 1 group
+     * @param {String} groupId unique identifier
+     * @param {Array} groupTracks [ "trackID", trackIdx ] array of strings and/or numbers of the existing tracks to include in this group. A track can only be part of 1 group
      *  if groupTracks == null, groupId is removed from the list
      */
     setTracksGroup( groupId, groupTracks = null ){
@@ -1731,7 +1810,7 @@ class KeyFramesTimeline extends Timeline {
     }
 
     /**
-     * @param {string} groupId
+     * @param {String} groupId
      * @returns array of tracks or null 
      */
     getTracksGroup( groupId ){
@@ -1740,8 +1819,8 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * OVERRIDE
-     * @param {string} trackId 
-     * @param {string} groupId optionl. If not set, it will find the first occurrence of trackId in animationClip.tracks
+     * @param {String} trackId 
+     * @param {String} groupId optionl. If not set, it will find the first occurrence of trackId in animationClip.tracks
      * @returns 
      */
     getTrack( trackId, groupId = null ){
@@ -1759,8 +1838,8 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * 
-     * @param {number} size pixels, height of keyframe
-     * @param {number} sizeHovered optional, size in pixels when hovered 
+     * @param {Number} size pixels, height of keyframe
+     * @param {Number} sizeHovered optional, size in pixels when hovered 
      */
     setKeyframeSize( size, sizeHovered = null ){
         this.keyframeSizeHovered = sizeHovered ?? size;
@@ -2300,7 +2379,7 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * updates an existing track with new values and times.
-     * @param {Integer} trackIdx index of track in the animationClip 
+     * @param {Int} trackIdx index of track in the animationClip 
      * @param {*} newTrack object with two arrays: values and times. These will be set to the selected track
      * @returns 
      */
@@ -2322,8 +2401,8 @@ class KeyFramesTimeline extends Timeline {
      * removes equivalent sequential keys either because of equal times or values
      * (0,0,0,0,1,1,1,0,0,0,0,0,0,0) --> (0,0,1,1,0,0)
      * @param {Int} trackIdx index of track in the animation
-     * @param {Bool} onlyEqualTime if true, removes only keyframes with equal times. Otherwise, values are ALSO compared through the class threshold
-     * @param {Bool} skipCallback if false, triggers "onOptimizeTracks" after optimizing
+     * @param {Boolean} onlyEqualTime if true, removes only keyframes with equal times. Otherwise, values are ALSO compared through the class threshold
+     * @param {Boolean} skipCallback if false, triggers "onOptimizeTracks" after optimizing
      */
     optimizeTrack(trackIdx, onlyEqualTime = false, skipCallback = false ) {
         if ( !this.animationClip ){ return; }
@@ -2333,6 +2412,11 @@ class KeyFramesTimeline extends Timeline {
             values = track.values,
             stride = track.dim,
             threshold = this.optimizeThreshold;
+        
+        if ( track.locked ){
+            return;
+        }
+
         let cmpFunction = (v, p, n, t) => { return Math.abs(v - p) >= t || Math.abs(v - n) >= t };
         let lastSavedIndex = 0;
         const lastIndex = times.length-1;
@@ -2675,7 +2759,7 @@ class KeyFramesTimeline extends Timeline {
 
     pasteKeyFrameValue( track, index ) {
 
-        if(this.clipboard.value.type != track.type){
+        if(track.locked || this.clipboard.value.type != track.type){
             return;
         }
 
@@ -2720,6 +2804,10 @@ class KeyFramesTimeline extends Timeline {
             const values = clipboardInfo.values;
             const track = this.animationClip.tracks[trackIdx];
 
+            if( track.locked ){
+                continue;
+            }
+
             this.saveState(track.trackIdx, trackCount++);
             this.historySaveEnabler = false;
             this.addKeyFrames( track.trackIdx, values, times, -globalStart + pasteTime, KeyFramesTimeline.ADDKEY_VALUESINARRAYS  );
@@ -2737,11 +2825,11 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * 
-     * @param {int} trackIdx 
-     * @param {array} newValues array of values for each keyframe. It should be a flat array of size track.dim*numKeyframes. Check ADDKEY_VALUESINARRAYS flag
-     * @param {array of numbers} newTimes must be ordered ascendently
-     * @param {number} timeOffset 
-     * @param {int} flags     
+     * @param {Int} trackIdx 
+     * @param {Array} newValues array of values for each keyframe. It should be a flat array of size track.dim*numKeyframes. Check ADDKEY_VALUESINARRAYS flag
+     * @param {Array of numbers} newTimes must be ordered ascendently
+     * @param {Number} timeOffset 
+     * @param {Int} flags     
      *      KeyFramesTimeline.ADDKEY_VALUESINARRAYS: if set, newValues is an array of arrays, one for each entry [ [1,2,3], [5,6,7] ]. Times is still a flat array of values [ 0, 0.2 ]
  
      * @returns 
@@ -2749,7 +2837,7 @@ class KeyFramesTimeline extends Timeline {
     addKeyFrames( trackIdx, newValues, newTimes, timeOffset = 0, flags = 0x00 ){
         const track = this.animationClip.tracks[trackIdx];
 
-        if ( !newTimes.length ){ return; }
+        if ( !newTimes.length || track.locked ){ return null; }
 
         const valueDim = track.dim;
         const trackTimes = track.times;
@@ -2839,6 +2927,7 @@ class KeyFramesTimeline extends Timeline {
             return; 
         }
 
+        const tracks = this.animationClip.tracks;
         const firstTrack = this.lastKeyFramesSelected[0][0];
         let trackToRemove = firstTrack;
         let toDelete = []; // indices to delete of the same track
@@ -2848,6 +2937,12 @@ class KeyFramesTimeline extends Timeline {
         const numSelected = this.lastKeyFramesSelected.length; 
         for( let i = 0; i < numSelected; ++i ){
             const [trackIdx, frameIdx] = this.lastKeyFramesSelected[i];
+
+            if ( tracks[trackIdx].locked ){
+                tracks[trackIdx].selected[frameIdx] = false; // unselect 
+                continue;
+            }
+            
             if ( trackToRemove != trackIdx ){
                 this.saveState(trackToRemove, trackToRemove != firstTrack);
 
@@ -2859,7 +2954,7 @@ class KeyFramesTimeline extends Timeline {
                 toDelete.length = 0;
             }
  
-            toDelete.push(frameIdx)
+            toDelete.push( frameIdx );
         }
 
         this.saveState(trackToRemove, trackToRemove != firstTrack);
@@ -2874,7 +2969,7 @@ class KeyFramesTimeline extends Timeline {
     deleteKeyFrames( trackIdx, indices, skipCallback = false ){
         const track = this.animationClip.tracks[trackIdx];
 
-        if ( !indices.length ){ 
+        if ( !indices.length || track.locked ){ 
             return false; 
         }
 
@@ -2923,9 +3018,9 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * Binary search. Relies on track.times being a sorted array
-     * @param {object} track 
-     * @param {number} time 
-     * @param {number} mode on of the possible values 
+     * @param {Object} track 
+     * @param {Number} time 
+     * @param {Number} mode on of the possible values 
      *  - -1 = nearest frame with t[f] <= time 
      *  - 0 = nearest frame 
      *  - 1 = nearest frame with t[f] >= time
@@ -2967,9 +3062,9 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * get the nearest keyframe to "time" given a maximum threshold. 
-     * @param {object} track 
-     * @param {number} time 
-     * @param {number} threshold must be positive value
+     * @param {Object} track 
+     * @param {Number} time 
+     * @param {Number} threshold must be positive value
      * @returns returns a postive/zero value if there is a frame inside the threshold range. Otherwise, -1
      */
     getCurrentKeyFrame( track, time, threshold = 0.0 ) {
@@ -2987,10 +3082,10 @@ class KeyFramesTimeline extends Timeline {
 
     /**
      * Returns the interval of frames between minTime and maxTime (both included)
-     * @param {object} track 
-     * @param {number} minTime 
-     * @param {number} maxTime 
-     * @param {number} threshold must be positive value 
+     * @param {Object} track 
+     * @param {Number} minTime 
+     * @param {Number} maxTime 
+     * @param {Number} threshold must be positive value 
      * @returns an array with two values [ minFrame, maxFrame ]. Otherwise null 
      */
     getKeyFramesInRange( track, minTime, maxTime, threshold = 0.0 ) {
@@ -3123,12 +3218,12 @@ class KeyFramesTimeline extends Timeline {
 
         const track =  this.animationClip.tracks[trackIdx];
 
-        if(track.locked ){
-            return;
-        }
-
         this.unHoverAll();
         this.deselectAllKeyFrames();
+        
+        if( track.locked ){
+            return;
+        }
 
         this.saveState(track.trackIdx);
 
@@ -3154,8 +3249,8 @@ class ClipsTimeline extends Timeline {
     static CLONEREASON_TRACKCLONE = 4;
 
     /**
-     * @param {string} name 
-     * @param {object} options = {animationClip, selectedItems, x, y, width, height, canvas, trackHeight}
+     * @param {String} name 
+     * @param {Object} options = {animationClip, selectedItems, x, y, width, height, canvas, trackHeight}
      */
     constructor(name, options = {}) {
 
@@ -3170,7 +3265,7 @@ class ClipsTimeline extends Timeline {
 
     /**
      * Generates an animationClip using either the parameters set in the animation argument or using default values
-     * @param {obj} animation data with which to generate an animationClip 
+     * @param {Object} animation data with which to generate an animationClip 
      * @returns 
      */
     instantiateAnimationClip(animation, clone = false) {
@@ -3192,7 +3287,7 @@ class ClipsTimeline extends Timeline {
 
     /**
      * 
-     * @param {obj} options set some values for the track instance (groups and trackIdx not included)
+     * @param {Object} options set some values for the track instance (groups and trackIdx not included)
      * @returns 
     */
     instantiateTrack(options = {}, clone = false) {
@@ -3293,6 +3388,7 @@ class ClipsTimeline extends Timeline {
     changeSelectedItems( ) {
 
         this.deselectAllElements();
+        this.deselectAllTracks( false ); // no need to update left 
 
         this.selectedItems = this.animationClip.tracks.slice();
 
@@ -3924,10 +4020,10 @@ class ClipsTimeline extends Timeline {
 
    /**
     * 
-    * @param {obj} clip  clip to be added
-    * @param {int} trackIdx (optional) track where to put the clip. -1 will find the first free slot. ***WARNING*** Must call getClipsInRange, before calling this function with a valid trackdIdx
-    * @param {float} offsetTime (optional) offset time of current time
-    * @param {float} searchStartTrackIdx (optional) if trackIdx is set to -1, this idx will be used as the starting point to find a valid track
+    * @param {Object} clip  clip to be added
+    * @param {Int} trackIdx (optional) track where to put the clip. -1 will find the first free slot. ***WARNING*** Must call getClipsInRange, before calling this function with a valid trackdIdx
+    * @param {Number} offsetTime (optional) offset time of current time
+    * @param {Number} searchStartTrackIdx (optional) if trackIdx is set to -1, this idx will be used as the starting point to find a valid track
     * @returns  a zero/positive value if successful. Otherwise, -1
     */
     addClip( clip, trackIdx = -1, offsetTime = 0, searchStartTrackIdx = 0 ) {
@@ -4174,8 +4270,8 @@ class ClipsTimeline extends Timeline {
     /**
      * User defined. Used when copying and pasting
      * @param {Array of clips} clipsToClone array of original clips. Do not modify clips in this array
-     * @param {float} timeOffset Value of time that should be added (or subtracted) from the timing attributes 
-     * @param {int} reason Flag to signal the reason of the clone
+     * @param {Number} timeOffset Value of time that should be added (or subtracted) from the timing attributes 
+     * @param {Int} reason Flag to signal the reason of the clone
      * @returns {Array of clips}
      */
     cloneClips( clipsToClone, timeOffset, reason = 0 ){