lexgui 0.1.37 → 0.1.39

package/README.md

@@ -91,11 +91,6 @@ Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how
   </tr>
 </table>
 
-## Contributors
-
-* Alex Rodríguez @jxarco
-* Eva Valls @evallsg
-
 ## Feedback/Issues
 
-You can use the [repository issues section](https://github.com/jxarco/lexgui.js/issues) or simply write any feedback to alexroco.30@gmail.com.
+You can use the [repository issues section](https://github.com/jxarco/lexgui.js/issues) or simply write any feedback to alexroco.30@gmail.com.

package/build/components/audio.js

@@ -6,11 +6,6 @@ if(!LX) {
 
 LX.components.push( 'Audio' );
 
-function remapRange(oldValue, oldMin, oldMax, newMin, newMax)
-{
-    return (((oldValue - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin;
-}
-
 /**
  * @method addKnob
  * @param {String} name Widget name
@@ -76,12 +71,12 @@ Panel.prototype.addKnob = function( name, value, min, max, callback, options = {
 
     let innerSetValue = function( v ) {
         // Convert val between (-135 and 135)
-        const angle = remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
+        const angle = LX.remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
         innerKnobCircle.style.rotate = angle + 'deg';
         innerKnobCircle.value = v;
     }
 
-    const angle = remapRange( value, min, max, -135.0, 135.0 );
+    const angle = LX.remapRange( value, min, max, -135.0, 135.0 );
     innerKnobCircle.style.rotate = angle + 'deg';
 
     if( options.disabled )

package/build/components/timeline.js

@@ -34,7 +34,7 @@ class Session {
 class Timeline {
 
     /**
-     * @param {string} name 
+     * @param {string} name = string unique id
      * @param {object} options = {animationClip, selectedItems, position = [0,0], width, height, canvas, trackHeight, skipLock, skipVisibility}
      */
     constructor( name, options = {} ) {
@@ -182,25 +182,14 @@ class Timeline {
             this.onBeforeCreateTopBar(header);
 
         header.addNumber("Current Time", this.currentTime, (value, event) => {
-            if(value > this.duration) {
-                value = this.duration;
-                if(event.constructor != CustomEvent) {
-                    LX.emit( "@on_current_time_" + this.constructor.name, value);
-                }
-            }
-            
-            this.currentTime = value;
-            if(this.onSetTime)
-                this.onSetTime(this.currentTime);
-            
-        }, {signal: "@on_current_time_" + this.constructor.name, step: 0.01, min: 0, precision: 3, skipSlider: true});        
+            this.setTime(value)}, {signal: "@on_set_time_" + this.name, step: 0.01, min: 0, precision: 3, skipSlider: true});        
 
-        header.addNumber("Duration", +this.duration.toFixed(3), (value, event) => {
-            this.setDuration(value, false)}, {step: 0.01, min: 0, signal: "@on_set_duration"
+        header.addNumber("Duration", + this.duration.toFixed(3), (value, event) => {
+            this.setDuration(value, false)}, {step: 0.01, min: 0, signal: "@on_set_duration_" + this.name
         });    
 
-        header.addNumber("Speed", +this.speed.toFixed(3), (value, event) => {
-            this.setSpeed(value)}, {step: 0.01});    
+        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);      
@@ -722,11 +711,11 @@ class Timeline {
         this.duration = this.animationClip.duration = v; 
 
         if(updateHeader) {
-            LX.emit( "@on_set_duration", +v.toFixed(3));
+            LX.emit( "@on_set_duration_" + this.name, +this.duration.toFixed(3)); // skipcallback = true
         }
 
         if( this.onSetDuration ) 
-            this.onSetDuration( v );	 
+            this.onSetDuration( this.duration );	 
     }
 
     /**
@@ -746,11 +735,18 @@ class Timeline {
 
     setSpeed(speed) {
         this.speed = speed;
-        LX.emit( "@on_set_speed", +speed.toFixed(3));
+        LX.emit( "@on_set_speed_" + this.name, +this.speed.toFixed(3)); // skipcallback = true
         
-
         if( this.onSetSpeed ) 
-            this.onSetSpeed( speed );	 
+            this.onSetSpeed( this.speed );	 
+    }
+
+    setTime(time){
+        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)
+            this.onSetTime(this.currentTime);
     }
 
     // Converts distance in pixels to time
@@ -905,8 +901,7 @@ class Timeline {
             else if( e.localY < this.topMargin ){
                 this.grabbing = true;
                 this.grabbingTimeBar = true;
-                this.currentTime = Math.min(this.duration, time);
-                LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime );
+                this.setTime(time);
             }
             else if( h < this.scrollableHeight && x > w - 10 ) { // grabbing scroll bar
                 this.grabbing = true;
@@ -932,8 +927,7 @@ class Timeline {
                 this.canvas.style.cursor = "grabbing"; 
                 if(this.grabbingTimeBar && this.active)
                 {
-                    this.currentTime = Math.min(this.duration, time);
-                    LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime );
+                    this.setTime(time);
                 }
                 else if(this.grabbingScroll)
                 {
@@ -1325,16 +1319,19 @@ class KeyFramesTimeline extends Timeline {
                 }
             }
         }
-        else if( !this.movingKeys && !discard ){ // if not moving moving timeline (just a click)
+        else if( !this.movingKeys && !discard ){ // if not moving timeline and not adding keyframes through e.shiftkey (just a click)
+
+            if ( this.lastKeyFramesSelected.length ){
+                if (this.onUnselectKeyFrames){
+                    this.onUnselectKeyFrames( this.lastKeyFramesSelected );
+                }
+                this.unSelectAllKeyFrames();         
+            }
             if (track){
                 const keyFrameIndex = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.pixelsToSeconds * 5 );
                 if( keyFrameIndex > -1 ) {
                     this.processCurrentKeyFrame( e, keyFrameIndex, track, null, e.multipleSelection ); // Settings this as multiple so time is not being set
-                }else{
-                    this.unSelectAllKeyFrames();                                    
                 }  
-            }else{
-                this.unSelectAllKeyFrames();                                    
             }
         }
 
@@ -1436,7 +1433,19 @@ class KeyFramesTimeline extends Timeline {
                     }
                 }
                 this.lastKeyFramesSelected[idx][2] = k; // update keyframe index
+                this.lastKeyFramesSelected[idx][4] = times[k]; // update keyframe time
+            }
+
+            if ( this.onContentMoved ){
+                for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
+                    const [name, localTrackIdx, keyIndex, trackIdx, originalKeyTime] = this.lastKeyFramesSelected[i];
+                    track = this.animationClip.tracks[trackIdx];
+                    if(track && track.locked)
+                        continue;
+                    this.onContentMoved(trackIdx, keyIndex);
+                }
             }
+
             return;
         }
 
@@ -1744,6 +1753,8 @@ class KeyFramesTimeline extends Timeline {
         let lastSavedIndex = 0;
         const lastIndex = times.length-1;
 
+        this.saveState(track.clipIdx);
+
         for ( let i = 1; i < lastIndex; ++ i ) {
 
             let keep = false;
@@ -1815,11 +1826,27 @@ class KeyFramesTimeline extends Timeline {
         if(!this.animationClip)
             return;
 
+        // save all states into a single entry
+        if ( this.trackStateSaveEnabler ){
+            for( let i = 0; i < this.animationClip.tracks.length; ++i ) {
+                this.saveState(i, i!=0);
+            }
+        }
+
+        // disable state saving
+        const oldStateEnabler = this.trackStateSaveEnabler;
+        this.trackStateSaveEnabler = false;
+
+        // optimize
         for( let i = 0; i < this.animationClip.tracks.length; ++i ) {
             const track = this.animationClip.tracks[i];
             this.optimizeTrack( track.clipIdx, onlyEqualTime, false );
         }
 
+        // restore enabler status
+        this.trackStateSaveEnabler = oldStateEnabler;
+
+        // callback
         if(this.onOptimizeTracks )
             this.onOptimizeTracks(-1); // signal as "all tracks"
     }
@@ -2082,9 +2109,6 @@ class KeyFramesTimeline extends Timeline {
             this.animationClip.tracks[ track.clipIdx ].values[i] = clipboardInfo.values[j];
             ++j;
         }
-        LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime);
-        // if(this.onSetTime)
-        //     this.onSetTime(this.currentTime);
 
         track.edited[ index ] = true;
     }
@@ -2327,8 +2351,8 @@ class KeyFramesTimeline extends Timeline {
     }
 
     getTrack( trackInfo )  {
-        const [name, trackIndex] = trackInfo;
-        return this.animationClip.tracksPerItem[ name ][trackIndex];
+        const [name, localTrackIndex] = trackInfo;
+        return this.animationClip.tracksPerItem[ name ][localTrackIndex];
     }
 
     getTrackName( uglyName ) {
@@ -2490,7 +2514,7 @@ class KeyFramesTimeline extends Timeline {
         let selection = [track.name, track.idx, frameIdx, track.clipIdx, track.times[frameIdx]];
         const trackIdx = track.clipIdx;
 
-        // sort lastkeyframeselected ascending order
+        // sort lastkeyframeselected ascending order (track and frame)
         let i = 0;
         for( ; i < this.lastKeyFramesSelected.length; ++i){
             let s = this.lastKeyFramesSelected[i];
@@ -2554,8 +2578,7 @@ class KeyFramesTimeline extends Timeline {
         }        
 
         if( !multiple ) {
-            this.currentTime = this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ];
-            LX.emit( "@on_current_time_" + this.constructor.name, track.times[ keyFrameIndex ]);
+            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
         }    
     }
 
@@ -3832,7 +3855,7 @@ class CurvesTimeline extends Timeline {
 
         super(name, options);
                
-        this.valueBeforeMove = 0;
+        this.keyValuePerPixel = 1/200; // used onMouseMove, vertical move
         this.range = options.range || [0, 1];
 
         if(this.animationClip && this.animationClip.tracks.length)
@@ -3874,16 +3897,19 @@ class CurvesTimeline extends Timeline {
                 }
             }
         }
-        else if( !this.movingKeys && !discard ){ // if not moving moving timeline (just a click)
+        else if( !this.movingKeys && !discard ){ // if not moving timeline and not adding keyframes through e.shiftkey (just a click)
+
+            if ( this.lastKeyFramesSelected.length ){
+                if (this.onUnselectKeyFrames){
+                    this.onUnselectKeyFrames( this.lastKeyFramesSelected );
+                }
+                this.unSelectAllKeyFrames();         
+            }
             if (track){
                 const keyFrameIndex = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.pixelsToSeconds * 5 );
                 if( keyFrameIndex > -1 ) {
                     this.processCurrentKeyFrame( e, keyFrameIndex, track, null, e.multipleSelection ); // Settings this as multiple so time is not being set
-                }else{
-                    this.unSelectAllKeyFrames();                                    
                 }  
-            }else{
-                this.unSelectAllKeyFrames();                                    
             }
         }
 
@@ -3897,7 +3923,7 @@ class CurvesTimeline extends Timeline {
         let localY = e.localY;
         let track = e.track;
 
-        if(e.ctrlKey && this.lastKeyFramesSelected.length) { // move keyframes
+        if( (e.ctrlKey || e.altKey) && this.lastKeyFramesSelected.length) { // move keyframes
             this.movingKeys = true;
             this.canvas.style.cursor = "grab";  
             this.canvas.classList.add('grabbing');
@@ -3940,52 +3966,87 @@ class CurvesTimeline extends Timeline {
 
         if(this.movingKeys) { // move keyframes
 
+            // update where is mouse
             let newTime = this.xToTime( localX );
             let deltaTime = newTime - this.timeBeforeMove;
             if ( deltaTime + this.moveKeyMinTime < 0 ){
                 deltaTime = -this.moveKeyMinTime;
             }
             this.timeBeforeMove = this.timeBeforeMove + deltaTime;
-            this.moveKeyMinTime += deltaTime;
 
-            for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
-                let idx = i;
-                if ( deltaTime > 0 ){
-                    idx = this.lastKeyFramesSelected.length - 1 - i;
-                }
-                
-                const [name, localTrackIdx, keyIndex, trackIdx, originalKeyTime] = this.lastKeyFramesSelected[idx];
-                track = this.animationClip.tracksPerItem[name][localTrackIdx];
-                if(track && track.locked)
-                    continue;
+            // move keyframes horizontally (change time)
+            if ( e.ctrlKey ){
+                this.moveKeyMinTime += deltaTime;
+                const tracksPerItem = this.animationClip.tracksPerItem;
+                for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
+                    let idx = i;
+                    if ( deltaTime > 0 ){
+                        idx = this.lastKeyFramesSelected.length - 1 - i;
+                    }
+                    
+                    const [name, localTrackIdx, keyIndex, trackIdx, originalKeyTime] = this.lastKeyFramesSelected[idx];
+                    track = tracksPerItem[name][localTrackIdx];
+                    if(track && track.locked)
+                        continue;
 
-                this.canvas.style.cursor = "grabbing";
+                    this.canvas.style.cursor = "grabbing";
 
-                const times = this.animationClip.tracks[ track.clipIdx ].times;
-                times[ keyIndex ] = Math.max(0,times[keyIndex] + deltaTime);
-                if (times[ keyIndex ] > this.duration){ 
-                    this.setDuration(times[ keyIndex ]); 
-                }
+                    const times = this.animationClip.tracks[ track.clipIdx ].times;
+                    times[ keyIndex ] = Math.max(0,times[keyIndex] + deltaTime);
+                    if (times[ keyIndex ] > this.duration){ 
+                        this.setDuration(times[ keyIndex ]); 
+                    }
 
-                // sort keyframe
-                let k = keyIndex;
-                if ( deltaTime > 0 ){
-                    for( ; k < times.length-1; ++k ){
-                        if ( times[k] < times[k+1] ){ 
-                            break; 
+                    // sort keyframe
+                    let k = keyIndex;
+                    if ( deltaTime > 0 ){
+                        for( ; k < times.length-1; ++k ){
+                            if ( times[k] < times[k+1] ){ 
+                                break; 
+                            }
+                            this.swapKeyFrames(track, k+1, k);
                         }
-                        this.swapKeyFrames(track, k+1, k);
-                    }
-                }else{
-                    for( ; k > 0; --k ){
-                        if ( times[k-1] < times[k] ){ 
-                            break; 
+                    }else{
+                        for( ; k > 0; --k ){
+                            if ( times[k-1] < times[k] ){ 
+                                break; 
+                            }
+                            this.swapKeyFrames(track, k-1, k);
                         }
-                        this.swapKeyFrames(track, k-1, k);
+                    }
+                    this.lastKeyFramesSelected[idx][2] = k; // update keyframe index
+                    this.lastKeyFramesSelected[idx][4] = times[k]; // update keyframe time
+                }
+                
+                if ( this.onContentMoved ){
+                    for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
+                        const [name, localTrackIdx, keyIndex, trackIdx, originalKeyTime] = this.lastKeyFramesSelected[i];
+                        track = this.animationClip.tracks[trackIdx];
+                        if(track && track.locked)
+                            continue;
+                        this.onContentMoved(trackIdx, keyIndex);
+                    }
+                }
+            }
+
+            // move keyframes vertically (change values instead of time) 
+            if ( e.altKey ){
+                for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
+                    const [name, localTrackIdx, keyIndex, trackIdx, originalKeyTime] = this.lastKeyFramesSelected[i];
+                    track = this.animationClip.tracks[trackIdx];
+                    if(track && track.locked)
+                        continue;
+                    let value = track.values[keyIndex];
+                    let delta = e.deltay * this.keyValuePerPixel * (this.range[1]-this.range[0]); 
+                    track.values[keyIndex] = Math.max(this.range[0], Math.min(this.range[1], value - delta)); // invert delta because of screen y
+                    track.edited[keyIndex] = true;
+
+                    if ( this.onUpdateTrack ){
+                        this.onUpdateTrack( track.clipIdx );
                     }
                 }
-                this.lastKeyFramesSelected[idx][2] = k; // update keyframe index
             }
+            
             return;
         }
 
@@ -4563,7 +4624,7 @@ class CurvesTimeline extends Timeline {
         if(!this.clipboard)
             this.clipboard = {};
 
-        this.clipboard = {
+        this.clipboard.value = {
             type: track.type,
             values: values
         };
@@ -4640,10 +4701,6 @@ class CurvesTimeline extends Timeline {
             ++j;
         }
 
-        LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime);
-        // if(this.onSetTime)
-        //     this.onSetTime(this.currentTime);
-
         track.edited[ index ] = true;
     }
 
@@ -4875,8 +4932,8 @@ class CurvesTimeline extends Timeline {
     }
 
     getTrack( trackInfo )  {
-        const [name, trackIndex] = trackInfo;
-        return this.animationClip.tracksPerItem[ name ][trackIndex];
+        const [name, localTrackIndex] = trackInfo;
+        return this.animationClip.tracksPerItem[ name ][localTrackIndex];
     }
 
     getTrackName( uglyName ) {
@@ -5103,8 +5160,7 @@ class CurvesTimeline extends Timeline {
         }
 
         if (!multiple){
-            this.currentTime = this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ];
-            LX.emit( "@on_current_time_" + this.constructor.name, this.currentTime );
+            this.setTime(this.animationClip.tracks[t.clipIdx].times[ keyFrameIndex ]);
         }
     }
 
@@ -5236,4 +5292,4 @@ LX.UTILS.concatTypedArray = (arrays, ArrayType) => {
     return result;
 }
 
-export { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline };
+export { Timeline, KeyFramesTimeline, ClipsTimeline, CurvesTimeline };

package/build/lexgui.css

@@ -1351,6 +1351,40 @@ input[type="range"] {
   right: 0.8em;
 }
 
+.lexwidget .lexunit {
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+}
+
+/* Size Widget */
+
+.lexwidget .lexsizecross {
+  color: var(--global-selected);
+  font-weight: 800;
+}
+
+/* Pad Widget */
+
+.lexwidget .lexpad {
+  place-items: center;
+}
+
+.lexwidget .lexpad .lexinnerpad {
+  border-radius: 4px;
+  background-color: var(--global-dark-background);
+}
+
+.lexwidget .lexpad .lexinnerpad .lexpadthumb {
+  background-color: var(--global-selected-light);
+  width: 10%;
+  height: 10%;
+  border-radius: 2px;
+  transform: translate(0px, 0px);
+}
+
+
 /* Tabs Widget */
 
 .lextabscontainer {