lexgui 0.6.4 → 0.6.5

package/build/components/timeline.js

@@ -1010,9 +1010,9 @@ class Timeline {
      * [ trackIdx ]
      * @param {Array} itemsName array of numbers identifying tracks
      */
-    setSelectedItems( items ) {
+    setSelectedItems( items, skipCallback = false ) {
         this.selectedItems = [];      
-        this.changeSelectedItems( items, null );
+        this.changeSelectedItems( items, null, skipCallback );
     }
 
     /**
@@ -1101,7 +1101,11 @@ class Timeline {
             tracks[ i ].isSelected = false;
         }
     }
-// --------------------------------------------------
+
+    unselectAllElements(){
+
+    }
+
     /**
     * @method setTrackState
     * @param {int} trackIdx 
@@ -1117,6 +1121,62 @@ class Timeline {
             this.onSetTrackState(track, oldState);
     }
 
+    /**
+     * @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
+     */
+    saveState( trackIdx, combineWithPrevious = false ) {
+        if ( !this.historySaveEnabler ){ return; }
+
+        const undoStep = this.historyGenerateTrackStep( trackIdx );
+        undoStep.trackIdx = trackIdx;
+
+        if ( combineWithPrevious && this.historyUndo.length ){
+            this.historyUndo[ this.historyUndo.length - 1 ].push( undoStep );
+        }
+        else{
+            this.historyUndo.push( [undoStep] );
+        }
+
+        if ( this.historyUndo.length > this.historyMaxSteps ){ this.historyUndo.shift(); } // remove first (oldest) element 
+        this.historyRedo = [];
+    }
+
+    #undoRedo(isUndo = true) {
+        
+        let toBeShown = isUndo ? this.historyUndo : this.historyRedo;
+        let toBeStored = isUndo ? this.historyRedo : this.historyUndo;
+        
+        if (!toBeShown.length){ return false; }
+        
+        this.unselectAllElements();
+        
+        const combinedState = toBeShown.pop();
+        const combinedStateToStore = [];
+
+        for( let i = 0; i < combinedState.length; ++i ){
+            const state = combinedState[i];
+            const trackIdx = state.trackIdx;
+           
+            const stateToStore = this.historyApplyTrackStep( state, isUndo );
+            stateToStore.trackIdx = trackIdx;
+            combinedStateToStore.push( stateToStore );
+               
+            // Update animation action interpolation info
+            if(this.onUpdateTrack)
+                this.onUpdateTrack( [state.trackIdx] );
+        }
+
+        toBeStored.push(combinedStateToStore);
+
+        return true;
+    }
+
+    undo() { return this.#undoRedo(true); }
+    redo() { return this.#undoRedo(false); }
+    // historyApplyTrackStep( state, isUndo ) MUST BE IMPLEMENTED BY CHILD CLASS
+    // historyGenerateTrackStep( trackIdx ) MUST BE IMPLEMENTED BY CHILD CLASS
+
     /**
      * @method resize
      * @param {*} size
@@ -1185,6 +1245,7 @@ class Timeline {
         Usually call a super.whateverFunction to generate its base form, and expand it with extra attributes
     */
 
+    
     /**
      * This functions uses the selectedItems and generates the data that will feed the LX.Tree widget.
      * This function is used by updateLeftPanel. Some timelines might allow grouping of tracks. Such timelines may overwrite this function
@@ -1249,7 +1310,7 @@ class Timeline {
     instantiateAnimationClip(options) {
         options = options ?? {};
         const animationClip = {
-            name: options.name ?? "animationClip",
+            id: options.id ?? (options.name ?? "animationClip"),
             duration: options.duration ?? 0,
             tracks: [],
             tracksPerGroup: options.tracksPerGroup ?? {},
@@ -1315,25 +1376,6 @@ class KeyFramesTimeline extends Timeline {
         }
     }
 
-    
-    /**
-     * @param {object} options options for the new track 
-     *  { id: string, active: bool, locked: bool, } 
-     * @returns 
-     */
-    addNewTrack( options = {}, skipCallback = false ) {
-
-        const trackInfo = this.instantiateTrack(options);
-        trackInfo.trackIdx = this.animationClip.tracks.length;
-        this.animationClip.tracks.push( trackInfo );
-        
-        if ( this.onAddNewTrack && !skipCallback ){
-            this.onAddNewTrack( trackInfo, options ); // if user wants it on a group, they should use these callback 
-        }
-
-        return trackInfo.trackIdx;
-    }
-
     // OVERRIDE
     generateSelectedItemsTreeData(){
         const treeTracks = [];
@@ -1495,6 +1537,12 @@ class KeyFramesTimeline extends Timeline {
         return animationClip;
     }
 
+    // OVERRIDE
+    unselectAllElements(){
+        this.unSelectAllKeyFrames();
+        this.unHoverAll();
+    }
+
     /**
      * OVERRIDE
      * @param {*} itemsToAdd [ trackIdx, "groupId" ], array of strings and/or number identifying groups and/or tracks
@@ -2304,78 +2352,52 @@ class KeyFramesTimeline extends Timeline {
             })
         });
     }
-
+    
     /**
-     * @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
+     * saveState function uses this to generate a "copy" of the track. 
+     * @param {Number} trackIdx 
+     * @returns All necessary information to reconstruct the track state
      */
-    saveState( trackIdx, combineWithPrevious = false ) {
-        if ( !this.historySaveEnabler ){ return; }
-
+    historyGenerateTrackStep( trackIdx ){
         const trackInfo = this.animationClip.tracks[trackIdx];
 
         const undoStep = {
-                trackIdx: trackIdx,
-                t: trackInfo.times.slice(),
-                v: trackInfo.values.slice(),
-                edited: trackInfo.edited.slice(0, trackInfo.times.length)
+            trackIdx: trackIdx, // already done by saveState
+            t: trackInfo.times.slice(),
+            v: trackInfo.values.slice(),
+            edited: trackInfo.edited.slice(0, trackInfo.times.length)
         };
 
-        if ( combineWithPrevious && this.historyUndo.length ){
-            this.historyUndo[ this.historyUndo.length - 1 ].push( undoStep );
-        }
-        else{
-            this.historyUndo.push( [undoStep] );
-        }
+        return undoStep;
+    } 
 
-        if ( this.historyUndo.length > this.historyMaxSteps ){ this.historyUndo.shift(); } // remove first (oldest) element 
-        this.historyRedo = [];
-    }
-
-    #undoRedo(isUndo = true){
-
-        let toBeShown = isUndo ? this.historyUndo : this.historyRedo;
-        let toBeStored = isUndo ? this.historyRedo : this.historyUndo;
-
-        if (!toBeShown.length){ return false; }
-
-        this.unSelectAllKeyFrames();
-        this.unHoverAll();
-        
-        const combinedState = toBeShown.pop();
-        const combinedStateToStore = [];
-
-        for( let i = 0; i < combinedState.length; ++i ){
-            const state = combinedState[i];
-            const track = this.animationClip.tracks[state.trackIdx];
-
-            // same as savestate
-            combinedStateToStore.push({ 
-                trackIdx: state.trackIdx,
-                t: track.times,
-                v: track.values,
-                edited: track.edited
-            });
-
-            track.times = state.t;
-            track.values = state.v;
-            track.edited = state.edited;
-            if ( track.selected.length != track.times.length ){ track.selected.length = track.times.length; }
-            if ( track.hovered.length != track.times.length ){ track.hovered.length = track.times.length; }
-            track.selected.fill(false);
-            track.hovered.fill(false);
-
-            if(this.onUpdateTrack)
-                this.onUpdateTrack( [state.trackIdx] );
-        }
+    /**
+     * It should swap the previous state with the incoming state of the track. It must return the previous state. 
+     * historyGenerateTrackStep could be used to copy the previous state. However, as it is a swap, it suffices to just copy the references.
+     * @param {Object} state object with a trackIdx:Number and whatever information was saved in historyGenerateTrackStep
+     * @param {Boolean} isUndo
+     * @returns previous state object
+     */
+    historyApplyTrackStep( state, isUndo ){
+        const track = this.animationClip.tracks[state.trackIdx];
+
+        const stateToReturn = { 
+            trackIdx: state.trackIdx,
+            t: track.times,
+            v: track.values,
+            edited: track.edited
+        };
 
-        toBeStored.push(combinedStateToStore);
+        track.times = state.t;
+        track.values = state.v;
+        track.edited = state.edited;
+        if ( track.selected.length != track.times.length ){ track.selected.length = track.times.length; }
+        if ( track.hovered.length != track.times.length ){ track.hovered.length = track.times.length; }
+        track.selected.fill(false);
+        track.hovered.fill(false);
 
-        return true;
+        return stateToReturn;
     }
-    
-    undo() { return this.#undoRedo(true); }
-    redo() { return this.#undoRedo(false); }
 
     /**
     * 
@@ -3079,6 +3101,12 @@ class ClipsTimeline extends Timeline {
         this.changeSelectedItems();
     }
 
+    // OVERRIDE
+    unselectAllElements(){
+        this.unSelectAllClips();
+        this.unHoverAll();
+    }
+
     /**
      * OVERRIDE ITEM SELECTION.
      * CLIPS WILL OFFER NO SELECTION. All tracks are visible
@@ -3363,7 +3391,7 @@ class ClipsTimeline extends Timeline {
                                     
                                     // save track state if necessary
                                     const undoState = this.historyUndo[this.historyUndo.length-1];
-                                    let state = 0
+                                    let state = 0;
                                     for( ; state < undoState.length; ++state ){
                                         if ( newTrackIdx == undoState[state].trackIdx ){ break; }
                                     }
@@ -3554,8 +3582,10 @@ class ClipsTimeline extends Timeline {
         const track = e.track;
         const localX = e.localX;
 
-        const clipIdx = this.getClipOnTime(track, this.xToTime(localX), 0.001);
-        this.selectClip(track.trackIdx, clipIdx); // unselect and try to select clip in localX, if any
+        if ( track ){
+            const clipIdx = this.getClipOnTime(track, this.xToTime(localX), 0.001);
+            this.selectClip(track.trackIdx, clipIdx); // unselect and try to select clip in localX, if any
+        }
     }
 
     showContextMenu( e ) {
@@ -3751,9 +3781,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
     * @returns  a zero/positive value if successful. Otherwise, -1
     */
-    addClip( clip, trackIdx = -1, offsetTime = 0 ) {
+    addClip( clip, trackIdx = -1, offsetTime = 0, searchStartTrackIdx = 0 ) {
         if ( !this.animationClip ){ return -1; }
 
         // Update clip information
@@ -3769,9 +3800,9 @@ class ClipsTimeline extends Timeline {
             trackIdx = this.addNewTrack();
         }
         else if ( trackIdx < 0 ){ // find first free track slot
-            for(let i = 0; i < this.animationClip.tracks.length; i++) {
+            for(let i = searchStartTrackIdx; i < this.animationClip.tracks.length; i++) {
                 let clipInCurrentSlot = this.animationClip.tracks[i].clips.find( t => { 
-                    return LX.UTILS.compareThresholdRange(newStart, clip.start + clip.duration, t.start, t.start+t.duration);                
+                    return LX.compareThresholdRange(newStart, clip.start + clip.duration, t.start, t.start+t.duration);
                 });
     
                 if(!clipInCurrentSlot){
@@ -3823,17 +3854,18 @@ class ClipsTimeline extends Timeline {
         return newIdx;
     }
 
-
-    /** Add an array of clips to the timeline in the first free track at the current time
-     * @clips: clips to be added
-     * @offsetTime: (optional) offset time of current time
-    */
-
-    addClips( clips, offsetTime = 0 ){
+    /**
+     *  Add an array of clips to the timeline in the first suitable tracks. It tries to put clips in the same track if possible. All clips will be in adjacent tracks to each other
+     * @param {Array of objects} clips 
+     * @param {Number} offsetTime 
+     * @param {Int} searchStartTrackIdx 
+     * @returns 
+     */
+    addClips( clips, offsetTime = 0, searchStartTrackIdx = 0 ){
         if( !this.animationClip || !clips.length ){ return false; }
 
         let clipTrackIdxs = new Int16Array( clips.length );
-        let baseTrackIdx = -1;
+        let baseTrackIdx = searchStartTrackIdx -1; // every time the algorithm fails, it increments the starting track Idx 
         let currTrackIdx = -1;
         const tracks = this.animationClip.tracks;
         const lastTrackLength = tracks.length;
@@ -3845,9 +3877,10 @@ class ClipsTimeline extends Timeline {
             if ( c == 0 ){ // last search failed, move one track down and check again
                 ++baseTrackIdx; 
                 currTrackIdx = baseTrackIdx;
-                if ( currTrackIdx >= tracks.length ){ this.addNewTrack(null, false); }
-                let clipsInCurrentSlot = tracks[baseTrackIdx].clips.find( t => { return LX.UTILS.compareThresholdRange(clipStart, clipEnd, t.start, t.start+t.duration); });
-                
+
+                while ( currTrackIdx >= tracks.length ){ this.addNewTrack(null, false); }
+                let clipsInCurrentSlot = tracks[baseTrackIdx].clips.find( t => { return LX.compareThresholdRange(clipStart, clipEnd, t.start, t.start+t.duration); });
+
                 // reset search
                 if (clipsInCurrentSlot){ 
                     c = -1;
@@ -3859,19 +3892,19 @@ class ClipsTimeline extends Timeline {
             }else{
 
                 // check if it fits in current track
-                let clipsInCurrentSlot = tracks[currTrackIdx].clips.find( t => { return LX.UTILS.compareThresholdRange(clipStart, clipEnd, t.start, t.start+t.duration); });
+                let clipsInCurrentSlot = tracks[currTrackIdx].clips.find( t => { return LX.compareThresholdRange(clipStart, clipEnd, t.start, t.start+t.duration); });
                 
                 // check no previous added clips are in the way
                 for( let i = c-1; i > -1; --i ){
                     if ( clipTrackIdxs[i] != currTrackIdx || clipsInCurrentSlot ){ break; }
-                    clipsInCurrentSlot = LX.UTILS.compareThresholdRange(clipStart, clipEnd, clips[i].start + offsetTime, clips[i].start + offsetTime + clips[i].duration);
+                    clipsInCurrentSlot = LX.compareThresholdRange(clipStart, clipEnd, clips[i].start + offsetTime, clips[i].start + offsetTime + clips[i].duration);
                 }
 
                 // check if it fits in the next track
                 if ( clipsInCurrentSlot ){
                     ++currTrackIdx;
                     if ( currTrackIdx >= tracks.length ){ this.addNewTrack(null, false); }
-                    clipsInCurrentSlot = tracks[currTrackIdx].clips.find( t => { return LX.UTILS.compareThresholdRange(clipStart, clipEnd, t.start, t.start+t.duration); });
+                    clipsInCurrentSlot = tracks[currTrackIdx].clips.find( t => { return LX.compareThresholdRange(clipStart, clipEnd, t.start, t.start+t.duration); });
                 }
                 
                 // reset search
@@ -4077,75 +4110,50 @@ class ClipsTimeline extends Timeline {
         return;
     }
 
-    saveState( trackIdx, combineWithPrevious = false ) {
-        if ( !this.historySaveEnabler ){ return; }
-
+    /**
+     * saveState function uses this to generate a "copy" of the track. 
+     * @param {Number} trackIdx 
+     * @returns All necessary information to reconstruct the track state
+     */
+    historyGenerateTrackStep( trackIdx ){
         const track = this.animationClip.tracks[trackIdx];
         const clips = this.cloneClips(track.clips, 0);
-        // storing as array so multiple tracks can be in a same "undo" step
 
-        const undoStep = { 
-            trackIdx: trackIdx,
+        const undoStep = {
+            trackIdx: trackIdx, // already done by saveState
             clips: clips,
             edited: track.edited.slice(0,track.clips.length)
         };
 
-        if ( combineWithPrevious && this.historyUndo.length ){
-            this.historyUndo[ this.historyUndo.length-1 ].push( undoStep );            
-        }
-        else{
-            this.historyUndo.push( [ undoStep ] );
-        }
-
-        if ( this.historyUndo.length > this.historyMaxSteps ){ this.historyUndo.shift(); } // remove first (oldest) element 
+        return undoStep;
+    } 
 
-        this.historyRedo = [];
-    }
+    /**
+     * It should swap the previous state with the incoming state of the track. It must return the previous state. 
+     * historyGenerateTrackStep could be used to copy the previous state. However, as it is a swap, it suffices to just copy the references.
+     * @param {Object} state object with a trackIdx:Number and whatever information was saved in historyGenerateTrackStep
+     * @param {Boolean} isUndo
+     * @returns previous state object
+     */
+    historyApplyTrackStep( state, isUndo ){
+        const track = this.animationClip.tracks[state.trackIdx];
 
-    #undoRedo(isUndo = true) {
-        
-        let toBeShown = isUndo ? this.historyUndo : this.historyRedo;
-        let toBeStored = isUndo ? this.historyRedo : this.historyUndo;
-        
-        if (!toBeShown.length){ return false; }
-        
-        this.unSelectAllClips();
-        this.unHoverAll();
+        const stateToReturn = { 
+            trackIdx: state.trackIdx, // already done by saveState
+            clips: track.clips,
+            edited: track.edited
+        };
         
-        const combinedState = toBeShown.pop();
-        const combinedStateToStore = [];
-
-        for( let i = 0; i < combinedState.length; ++i ){
-            const state = combinedState[i];
-            const track = this.animationClip.tracks[state.trackIdx];
-
-            // same as savestate
-            combinedStateToStore.push( {
-                trackIdx: state.trackIdx,
-                clips: track.clips,
-                edited: track.edited
-            });
-            
-            track.clips = state.clips;
-            track.edited = state.edited;
-            if ( track.selected.length < track.clips.length ){ track.selected.length = track.clips.length; }
-            if ( track.hovered.length < track.clips.length ){ track.hovered.length = track.clips.length; }
-            track.selected.fill(false);
-            track.hovered.fill(false);
-    
-            // Update animation action interpolation info
-            if(this.onUpdateTrack)
-                this.onUpdateTrack( [state.trackIdx] );
-        }
-
-        toBeStored.push(combinedStateToStore);
-
-        return true;
+        track.clips = state.clips;
+        track.edited = state.edited;
+        if ( track.selected.length < track.clips.length ){ track.selected.length = track.clips.length; }
+        if ( track.hovered.length < track.clips.length ){ track.hovered.length = track.clips.length; }
+        track.selected.fill(false);
+        track.hovered.fill(false);
+
+        return stateToReturn;
     }
 
-    undo() { return this.#undoRedo(true); }
-    redo() { return this.#undoRedo(false); }
-    
     getClipOnTime( track, time, threshold ) {
 
         if(!track || !track.clips.length){
@@ -4355,20 +4363,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, rad
     }
 }
 
-LX.UTILS.HexToRgb = (hex) => {
-    var c;
-    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
-        c= hex.substring(1).split('');
-        if(c.length== 3){
-            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
-        }
-        c= '0x'+c.join('');
-        return [(c>>16)&255, (c>>8)&255, c&255];
-    }
-    throw new Error('Bad Hex');
-}
-
-LX.UTILS.concatTypedArray = (arrays, ArrayType) => {
+LX.concatTypedArray = (arrays, ArrayType) => {
     let size = arrays.reduce((acc,arr) => acc + arr.length, 0);
     let result = new ArrayType( size ); // generate just one array
     let offset = 0;