lexgui 0.6.8 → 0.6.10

package/build/components/timeline.js

@@ -162,7 +162,7 @@ class Timeline {
         const playbtn = header.addButton("playBtn", '', (value, event) => {
            this.changeState();
         }, { buttonClass: "accept", title: "Play", hideName: true, icon: "Play@solid", swap: "Pause@solid" });
-        playbtn.root.setState(this.playing, true);
+        playbtn.setState(this.playing, true);
 
         header.addButton("stopBtn", '', (value, event) => {
             this.setState(false, true); // skip callback of set state
@@ -972,7 +972,7 @@ class Timeline {
     setState(state, skipCallback = false) {
         this.playing = state;
 
-        this.header.widgets.playBtn.root.setState(this.playing, true);
+        this.header.widgets.playBtn.setState(this.playing, true);
 
         if(this.onStateChange && !skipCallback) {
             this.onStateChange(this.playing);
@@ -1290,7 +1290,7 @@ class Timeline {
      * @param {obj} options set some values for the track instance (groups and trackIdx not included)
      * @returns 
      */
-    instantiateTrack(options = {}) { 
+    instantiateTrack(options = {}, clone = false) { 
         return {
             isTrack: true,
             id: options.id ?? ( Math.floor(performance.now().toString()) + "_" + Math.floor(Math.random() * 0xffff) ), //must be unique, at least inside a group
@@ -1307,13 +1307,12 @@ class Timeline {
      * @param {obj} animation data with which to generate an animationClip 
      * @returns 
      */
-    instantiateAnimationClip(options) {
+    instantiateAnimationClip(options, clone = false) {
         options = options ?? {};
         const animationClip = {
             id: options.id ?? (options.name ?? "animationClip"),
             duration: options.duration ?? 0,
             tracks: [],
-            tracksPerGroup: options.tracksPerGroup ?? {},
             data: options.data ?? null, // user defined data
         };
         return animationClip;
@@ -1433,42 +1432,42 @@ class KeyFramesTimeline extends Timeline {
      *  id, dim, values, times, selected, edited, hovered
      * @returns 
      */
-    instantiateTrack(options ={}){
+    instantiateTrack(options ={}, clone = false){
         const track = super.instantiateTrack(options);
         track.dim = Math.max(1,options.dim ?? 1); // >= 1
         track.groupId = null,
         track.groupTrackIdx = -1, // track Idx inside group only if in group
 
-        track.values = new Float32Array(0); 
+        track.values = new Float32Array(0);
         track.times = new Float32Array(0);
         track.selected = [];
         track.edited = [];
         track.hovered = [];
 
         if ( options.values && options.times ){
-            track.values = options.values;
-            track.times = options.times;
+            track.values = clone ? options.values.slice() : options.values;
+            track.times = clone ? options.times.slice() : options.times;
             
             const numFrames = track.times.length;
             if ( options.selected && options.selected.length == numFrames ){
-                track.selected = options.selected;
+                track.selected = clone ? options.selected.slice() : options.selected;
             }else{ 
                 track.selected = (new Array(numFrames)).fill(false);
             }
             if ( options.edited && options.edited.length == numFrames ){
-                track.edited = options.edited;
+                track.edited = clone ? options.edited.slice() : options.edited;
             }else{ 
                 track.edited = (new Array(numFrames)).fill(false);
             }
             if ( options.hovered && options.hovered.length == numFrames ){
-                track.hovered = options.hovered;
+                track.hovered = clone ? options.hovered.slice() : options.hovered;
             }else{ 
                 track.hovered = (new Array(numFrames)).fill(false);
             }
         }
 
         track.curves = options.curves ?? this.defaultCurves; // only works if dim == 1
-        track.curvesRange = options.curvesRange ?? this.defaultCurvesRange.slice(0);
+        track.curvesRange = ( options.curvesRange ?? this.defaultCurvesRange ).slice();
         return track;
     }
 
@@ -1477,9 +1476,11 @@ class KeyFramesTimeline extends Timeline {
      * @param {obj} animation data with which to generate an animationClip 
      * @returns 
      */
-    instantiateAnimationClip(animation) {
+    instantiateAnimationClip(animation, clone = false) {
 
-        const animationClip = super.instantiateAnimationClip(animation);
+        const animationClip = super.instantiateAnimationClip(animation, clone);
+
+        animationClip.tracksPerGroup = {};
 
         if (animation && animation.tracks) {
             const tracksPerGroup = {};
@@ -1496,18 +1497,13 @@ class KeyFramesTimeline extends Timeline {
                     else{ valueDim = 1; }
                 }
 
-                let leftOver = values.length % valueDim; // just in case values have an incorrect length
-                let amounEntries = Math.min( times.length, values.length - leftOver );
-                times = times.slice(0, amounEntries); 
-                values = values.slice(0, amounEntries * valueDim);
-
                 let baseName = track.id ?? track.name;
                 const [groupId, trackId] = baseName ? this._getValidTrackName(baseName) : [null, null];
 
                 const toInstantiate = Object.assign({}, track);
                 toInstantiate.id = trackId;
                 toInstantiate.dim = valueDim;
-                const trackInfo = this.instantiateTrack(toInstantiate);
+                const trackInfo = this.instantiateTrack(toInstantiate, clone);
                 
                 // manual group insertion
                 if ( groupId ){
@@ -1525,13 +1521,34 @@ class KeyFramesTimeline extends Timeline {
                                 
                 animationClip.tracks.push(trackInfo);
 
-                if ( times.length ){ duration = Math.max( duration, times[times.length-1]); }
+                if ( trackInfo.times.length ){ duration = Math.max( duration, trackInfo.times[trackInfo.times.length-1]); }
             }
 
             animationClip.tracksPerGroup = tracksPerGroup;
             if ( !animation || !animation.duration ){
                 animationClip.duration = duration;
             }
+            
+            // overwrite trackspergroup
+            if ( animation.tracksPerGroup ){
+                
+                // ungroup all tracks (just in case)
+                animationClip.tracks.forEach( (v,i,arr) =>{ v.groupId = null; v.groupTrackIdx = -1; } );
+                
+                animationClip.tracksPerGroup = {};
+                let tpg = animation.tracksPerGroup;
+                for( let groupId in tpg ){
+                    const source = tpg[groupId];
+                    const target = [];
+                    for( let ti = 0; ti < source.length; ++ti ){
+                        const trackInfo = animationClip.tracks[ source[ti].trackIdx ]; // redo references
+                        target[ti] = trackInfo; 
+                        trackInfo.groupId = groupId;
+                        trackInfo.groupTrackIdx = ti; // index of track in group
+                    }
+                    animationClip.tracksPerGroup[ groupId ] = target;
+                }
+            }
         }
 
         return animationClip;
@@ -2633,7 +2650,7 @@ 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 
+     * @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 ]
@@ -2656,8 +2673,7 @@ class KeyFramesTimeline extends Timeline {
 
         let newIdx = newTimes.length-1;
         let oldIdx = trackTimes.length-1;
-
-        let t1 = performance.now();
+        let resultIndices = [];
         if ( KeyFramesTimeline.ADDKEY_VALUESINARRAYS & flags ){
             
             for( let i = times.length-1; i > -1; --i ){
@@ -2672,6 +2688,8 @@ class KeyFramesTimeline extends Timeline {
                     track.hovered.splice(oldIdx+1, 0, false);
                     track.selected.splice(oldIdx+1, 0, false);
                     track.edited.splice(oldIdx+1, 0, true);
+
+                    resultIndices.push(i);
                     continue;
                 }
                 
@@ -2695,6 +2713,8 @@ class KeyFramesTimeline extends Timeline {
                     track.hovered.splice(oldIdx+1, 0, false);
                     track.selected.splice(oldIdx+1, 0, false);
                     track.edited.splice(oldIdx+1, 0, true);
+
+                    resultIndices.push(i);
                     continue;
                 }
                 
@@ -2715,8 +2735,11 @@ class KeyFramesTimeline extends Timeline {
             this.setDuration(newTimes[newTimes.length - 1] + timeOffset);
         }
 
-        if(this.onUpdateTrack)
+        if(this.onUpdateTrack){
             this.onUpdateTrack( [trackIdx] );
+        }
+
+        return resultIndices;
     }
 
     deleteSelectedContent(skipCallback = false) {
@@ -3036,6 +3059,10 @@ LX.KeyFramesTimeline = KeyFramesTimeline;
  */
 
 class ClipsTimeline extends Timeline {
+    static CLONEREASON_COPY = 1;
+    static CLONEREASON_PASTE = 2;
+    static CLONEREASON_HISTORY = 3;
+    static CLONEREASON_TRACKCLONE = 4;
 
     /**
      * @param {string} name 
@@ -3057,14 +3084,14 @@ class ClipsTimeline extends Timeline {
      * @param {obj} animation data with which to generate an animationClip 
      * @returns 
      */
-    instantiateAnimationClip(animation) {
+    instantiateAnimationClip(animation, clone = false) {
 
         const animationClip = super.instantiateAnimationClip(animation);
 
         if (animation && animation.tracks){
             for( let i = 0; i < animation.tracks.length; ++i ) {
     
-                const trackInfo = this.instantiateTrack( animation.tracks[i] );
+                const trackInfo = this.instantiateTrack( animation.tracks[i], clone );
                 trackInfo.trackIdx = animationClip.tracks.length;
 
                 animationClip.tracks.push(trackInfo);
@@ -3074,6 +3101,47 @@ class ClipsTimeline extends Timeline {
         return animationClip;
     }
 
+    /**
+     * 
+     * @param {obj} options set some values for the track instance (groups and trackIdx not included)
+     * @returns 
+    */
+    instantiateTrack(options = {}, clone = false) {
+        const track = super.instantiateTrack(options);
+
+        track.trackIdx = this.animationClip.tracks.length;
+
+        track.selected = [];
+        track.edited = [];
+        track.hovered = [];
+        
+        if( options.clips ){
+            track.clips = clone ? this.cloneClips(options.clips, 0, ClipsTimeline.CLONEREASON_TRACKCLONE) : options.clips;
+        }else{
+            track.clips = [];
+        }
+
+        const numClips = track.clips.length;
+
+        if ( options.selected && options.selected.length == numClips ){
+            track.selected = clone ? options.selected.slice() : options.selected;
+        }else{ 
+            track.selected = (new Array(numClips)).fill(false);
+        }
+        if ( options.edited && options.edited.length == numClips ){
+            track.edited = clone ? options.edited.slice() : options.edited;
+        }else{ 
+            track.edited = (new Array(numClips)).fill(false);
+        }
+        if ( options.hovered && options.hovered.length == numClips ){
+            track.hovered = clone ? options.hovered.slice() : options.hovered;
+        }else{ 
+            track.hovered = (new Array(numClips)).fill(false);
+        }
+
+        return track;
+    }
+
     // use default updateleftpanel
     // generateSelectedItemsTreeData(){}
 
@@ -3099,6 +3167,7 @@ class ClipsTimeline extends Timeline {
     setAnimationClip( animation, needsToProcess ){
         super.setAnimationClip(animation, needsToProcess);
         this.changeSelectedItems();
+        return this.animationClip;
     }
 
     // OVERRIDE
@@ -3121,42 +3190,6 @@ class ClipsTimeline extends Timeline {
 
         this.updateLeftPanel();
     }
-            
-    /**
-     * 
-     * @param {obj} options set some values for the track instance (groups and trackIdx not included)
-     * @returns 
-    */
-    instantiateTrack(options = {}) {
-        const track = super.instantiateTrack(options);
-
-        track.trackIdx = this.animationClip.tracks.length;
-
-        track.clips = options.clips ?? [];
-        track.selected = [];
-        track.edited = [];
-        track.hovered = [];
-        
-        const numClips = track.clips.length;
-
-        if ( options.selected && options.selected.length == numClips ){
-            track.selected = options.selected;
-        }else{ 
-            track.selected = (new Array(numClips)).fill(false);
-        }
-        if ( options.edited && options.edited.length == numClips ){
-            track.edited = options.edited;
-        }else{ 
-            track.edited = (new Array(numClips)).fill(false);
-        }
-        if ( options.hovered && options.hovered.length == numClips ){
-            track.hovered = options.hovered;
-        }else{ 
-            track.hovered = (new Array(numClips)).fill(false);
-        }
-
-        return track;
-    }
 
     unHoverAll(){
         if(this.lastHovered){
@@ -3229,6 +3262,10 @@ class ClipsTimeline extends Timeline {
         let localY = e.localY;
         let track = e.track;
         
+        if ( e.button > 0 ){ 
+            return;
+        }
+        
         if(e.ctrlKey && track) { // move clips
             
             let x = e.offsetX;
@@ -3297,10 +3334,10 @@ class ClipsTimeline extends Timeline {
                 const track = this.animationClip.tracks[this.lastClipsSelected[0][0]]; 
                 let clip = track.clips[this.lastClipsSelected[0][1]];
                 if( this.dragClipMode == "fadein" ) {
-                    clip.fadein = Math.min(Math.max(clip.fadein + delta, clip.start), clip.fadeout);
+                    clip.fadein = Math.min(Math.max(clip.fadein + delta, clip.start), clip.fadeout ?? (clip.start+clip.duration) );
                 }
                 else if( this.dragClipMode == "fadeout" ) {
-                    clip.fadeout = Math.max(Math.min(clip.fadeout + delta, clip.start+clip.duration), clip.fadein);
+                    clip.fadeout = Math.max(Math.min(clip.fadeout + delta, clip.start+clip.duration), clip.fadein ?? clip.start );
                 }
                 else if( this.dragClipMode == "duration" ) {
                     let duration = Math.max(0, clip.duration + delta);
@@ -3715,7 +3752,7 @@ class ClipsTimeline extends Timeline {
                     const fadeinX = this.pixelsPerSecond * (clip.fadein - clip.start);
                     ctx.roundRect(x, y + offset, fadeinX, trackHeight, {tl: 5, bl: 5, tr:0, br:0}, true);
                 }
-                if ( clip.fadein != undefined ){
+                if ( clip.fadeout != undefined ){
                     const fadeoutX = this.pixelsPerSecond * (clip.start + clip.duration - (clip.fadeout));
                     ctx.roundRect( x + w - fadeoutX, y + offset, fadeoutX, trackHeight, {tl: 0, bl: 0, tr:5, br:5}, true);
                 }
@@ -3741,18 +3778,16 @@ class ClipsTimeline extends Timeline {
             }
             
 
-            // Overwrite style with small font size if it's zoomed out
-            if( this.pixelsPerSecond < 200) {
-                ctx.font = this.pixelsPerSecond * 0.06  +"px" + Timeline.FONT;
-            }
-
-            const text = clip.id ?? ""; //clip.id.replaceAll("_", " ").replaceAll("-", " ");
+            let text = clip.id ?? ""; //clip.id.replaceAll("_", " ").replaceAll("-", " ");
             const textInfo = ctx.measureText( text );
             
-            // Draw clip name if it's readable
-            if(this.pixelsPerSecond > 100) {
-                ctx.fillText( text, x + (w - textInfo.width)*0.5,  y + offset + trackHeight * 0.5);
+            let textWidth = textInfo.width;
+            if ( textWidth > w && textWidth > 0){
+                let amount = Math.floor( w * text.length / textWidth );
+                text = text.substr( 0, amount );
+                textWidth = w;
             }
+            ctx.fillText( text, x + (w - textWidth)*0.5,  y + offset + trackHeight * 0.5);
 
             ctx.fillStyle = track.hovered[j] ? "white" : "#f5f5f5"//track.hovered[j] ? "white" : Timeline.FONT_COLOR_QUATERNARY;
             ctx.strokeStyle = "rgba(125,125,125,0.4)";
@@ -4022,9 +4057,10 @@ 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
      * @returns {Array of clips}
      */
-    cloneClips( clipsToClone, timeOffset ){
+    cloneClips( clipsToClone, timeOffset, reason = 0 ){
         let clipsToReturn = JSON.parse(JSON.stringify(clipsToClone))
         for(let i = 0; i < clipsToReturn.length; ++i){
             let clip = clipsToReturn[i];
@@ -4057,7 +4093,7 @@ class ClipsTimeline extends Timeline {
         }
 
         globalStart = Math.max(0, globalStart);
-        this.clipboard = this.cloneClips( clipsToCopy, -globalStart );
+        this.clipboard = this.cloneClips( clipsToCopy, -globalStart, ClipsTimeline.CLONEREASON_COPY );
     }
 
     pasteContent( time = this.currentTime ) {
@@ -4068,7 +4104,7 @@ class ClipsTimeline extends Timeline {
 
         time = Math.max(0, time);
 
-        let clipsToAdd = this.cloneClips( this.clipboard, time );
+        let clipsToAdd = this.cloneClips( this.clipboard, time, ClipsTimeline.CLONEREASON_PASTE );
         this.addClips(clipsToAdd, 0);
     }
 
@@ -4117,7 +4153,7 @@ class ClipsTimeline extends Timeline {
      */
     historyGenerateTrackStep( trackIdx ){
         const track = this.animationClip.tracks[trackIdx];
-        const clips = this.cloneClips(track.clips, 0);
+        const clips = this.cloneClips(track.clips, 0, ClipsTimeline.CLONEREASON_HISTORY);
 
         const undoStep = {
             trackIdx: trackIdx, // already done by saveState

package/build/lexgui.css

@@ -1889,7 +1889,7 @@ dialog .lexselect .lexselectoptions {
 
 .lexselect .lexselectlabel {
     width: 100%;
-    color: var(--global-text-secondary);
+    color: var(--global-text-tertiary);
     padding-inline: 0.6rem;
     padding-block: 0.2rem;
     min-height: 20px;
@@ -2966,6 +2966,10 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     font-size: var(--global-font-size-lg);
 }
 
+.lexmenubar .lexmenubuttons.left {
+    margin-left: unset;
+}
+
 .lexmenubar .lexmenubuttons.right {
     margin-left: unset;
     margin-right: 12px;
@@ -3565,6 +3569,20 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-right: 0px;
 }
 
+.lexoverlayseparator {
+    background-color: var(--global-color-tertiary);
+    opacity: 0.9;
+    width: 2px;
+    height: calc(100% + 0.5em);
+    margin-top: -0.25em;
+}
+
+.lexoverlaybuttonscontainer.vertical .lexoverlayseparator {
+    width: calc(100% + 0.5em);
+    height: 2px;
+    margin-left: -0.25em;
+}
+
 /* Area Tabs */
 
 .lexareatabs {
@@ -3747,9 +3765,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexlayers {
     display: grid;
-    grid-template-columns: 18px 18px 18px 18px 18px 18px 18px 18px;
+    grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
     grid-gap: 6px 8px;
-    justify-content: center;
+    max-width: calc(26px * 8); /* 8 layers max */
 }
 
 .lexlayer {
@@ -3757,6 +3775,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: var(--layer-color);
     color: var(--global-text-primary);
     text-align: center;
+    place-self: center;
     line-height: 19px;
     width: 18px;
     height: 18px;
@@ -3994,6 +4013,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     align-content: center;
 }
 
+.lextable td.empty-row {
+    text-align: center;
+    padding-block: 16px;
+}
+
 .lextable th {
     --th-color: var(--global-text-secondary);
     font-weight: 600;
@@ -4101,7 +4125,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     grid-column: span 2;
 }
 
-.lexcustomcontainer span {
+.lexcustomcontainer button.custom span {
     align-items: center;
     display: flex;
     justify-content: space-between;
@@ -4562,9 +4586,10 @@ ul.lexassetscontent {
 }
 
 .lexassetscontent .lexitemdesc {
-    position: absolute;
+    position: fixed;
     font-weight: 600;
-    background-color: #afafaf;
+    white-space: nowrap;
+    background-color: var(--global-text-secondary);
     color: var(--global-color-primary);
     font-size: var(--global-font-size);
     border-radius: 6px;