lexgui 0.7.9 → 0.7.11

package/build/extensions/codeeditor.js

@@ -1299,6 +1299,10 @@ class CodeEditor
                     this.codeArea.root.style.height = `calc(100% - ${ this._fullVerticalOffset }px)`;
                 }, 50 );
 
+                if( options.callback )
+                {
+                    options.callback.call( this, this );
+                }
             });
 
             window.editor = this;

package/build/extensions/timeline.js

@@ -6,6 +6,9 @@ if(!LX) {
 
 LX.extensions.push( 'Timeline' );
 
+LX.registerIcon("TimelineLock", '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path fill="none" d="M7 11V7a4 4 0 0 1 9 0v4 M5,11h13 a2 2 0 0 1 2 2 v7 a2 2 0 0 1 -2 2 h-13 a2 2 0 0 1 -2 -2 v-7 a2 2 0 0 1 2 -2 M12 16 v2"/></svg>' );
+LX.registerIcon("TimelineLockOpen", '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path fill="none" d="M14 11V7a4 4 0 0 1 9 0v2 M3,11h13 a2 2 0 0 1 2 2 v7 a2 2 0 0 1 -2 2 h-13 a2 2 0 0 1 -2 -2 v-7 a2 2 0 0 1 2 -2 M8 17 h3"/></svg>' );
+
 /**
  * @class Timeline
  * @description Agnostic timeline, do not impose any timeline content. Renders to a canvas
@@ -64,7 +67,8 @@ class Timeline {
         this.pixelsPerSecond = 300;
         this.secondsPerPixel = 1 / this.pixelsPerSecond;
         this.animationClip = this.instantiateAnimationClip();
-        this.trackHeight = 25;
+
+        this.trackHeight = 32;
         this.timeSeparators = [0.01, 0.1, 0.5, 1, 5];
 
         this.boxSelection = false;
@@ -301,7 +305,7 @@ class Timeline {
 
         const panel = this.leftPanel;
         
-        panel.sameLine( 2 );
+        panel.sameLine();
         let titleComponent = panel.addTitle( "Tracks", { style: { background: "none"}, className: "fg-secondary text-lg px-4"} );
         let title = titleComponent.root;
         
@@ -340,10 +344,20 @@ class Timeline {
                         this.setTrackState( e.node.trackData.trackIdx, e.value );
                     } 
                     break;
-                case LX.TreeEvent.NODE_CARETCHANGED:
-                    break;
+            }
+
+            if ( this.onTrackTreeEvent ){
+                this.onTrackTreeEvent(e);
             }
         }});
+
+        const that = this;
+        this.trackTreesComponent.innerTree._refresh = this.trackTreesComponent.innerTree.refresh;
+        this.trackTreesComponent.innerTree.refresh = function( newData, selectedId ){
+            this._refresh( newData, selectedId );
+            that.setTrackHeight( that.trackHeight );
+        }
+
         // setting a name in the addTree function adds an undesired node
         this.trackTreesComponent.name = "tracksTrees";
         p.components[this.trackTreesComponent.name] = this.trackTreesComponent;
@@ -362,12 +376,33 @@ class Timeline {
         });
 
         this.trackTreesPanel.root.scrollTop = this.currentScrollInPixels;
+        this.setTrackHeight( this.trackHeight );
 
         if( this.leftPanel.parent.root.classList.contains("hidden") || !this.root.parentElement ){
             return;
         }
 
         this.resizeCanvas();
+
+        this.setScroll( this.currentScroll ); // avoid scroll bugs
+
+    }
+
+    setTrackHeight( trackHeight ){
+        // ul list has a "gap" of 0.25rem. Compute pixel count of 0.25 rem
+        const gapSize = parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.25; 
+
+        this.trackHeight = trackHeight = Math.max(gapSize, trackHeight);
+        
+        if ( !this.trackTreesComponent ){
+            return;
+        }
+
+        trackHeight -= gapSize;
+        const tracks = this.trackTreesComponent.root.querySelector("ul").children;
+        for( let i = 0; i < tracks.length; ++i ){
+            tracks[i].style.height = trackHeight + "px";
+        }
     }
 
     /**
@@ -583,11 +618,6 @@ class Timeline {
         const scrollableHeight = this.trackTreesComponent.root.scrollHeight;
         // tree has gaps of 0.25rem (4px) inbetween entries but not in the beginning nor ending. Move half gap upwards.
         const treeOffset = this.lastTrackTreesComponentOffset = this.trackTreesComponent.innerTree.domEl.offsetTop - this.canvas.offsetTop -2;
-
-        if ( this.trackTreesPanel.root.scrollHeight > 0 ){
-            const ul = this.trackTreesComponent.innerTree.domEl.children[0];
-            this.trackHeight = ul.children.length < 1 ? 25 : ((ul.offsetHeight+4) / ul.children.length);
-        }
         
         //zoom
         let startTime = this.visualOriginTime; //seconds
@@ -1306,25 +1336,12 @@ class Timeline {
             const track = this.selectedItems[ i ];
             treeTracks.push({'trackData': track, 'id': track.id, 'skipVisibility': this.skipVisibility, visible: track.active, 'children':[], actions : this.skipLock ? null : [{
                 'name':'Lock edition',
-                'icon': (track.locked ? 'Lock' : 'LockOpen'),
-                'swap': (track.locked ? 'LockOpen' : 'Lock'),
-                'callback': (node, el) => {
-                    let value = el.classList.contains('Lock');
-                    
-                    if(value) {
-                        el.title = 'Lock edition';
-                        el.classList.remove('Lock');
-                        el.classList.add('LockOpen');    
-                    }
-                    else {
-                        el.title = 'Unlock edition';
-                        el.classList.remove('LockOpen');
-                        el.classList.add('Lock');                                 
-                    }
-
-                    node.trackData.locked = !value;
+                '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(el, node.trackData, node)
+                        this.onLockTrack(node.trackData, node);
                     }
                 }
             }]});
@@ -1418,6 +1435,9 @@ class KeyFramesTimeline extends Timeline {
         this.defaultCurves = true; // whn a track with dim == 1 has no curves attribute, defaultCurves will be used instead. If true, track is rendered using curves
         this.defaultCurvesRange = [0,1]; // whn a track with dim == 1 has no curves attribute, defaultCurves will be used instead. If true, track is rendered using curves
 
+        this.keyframeSize = this.trackHeight * 0.5; // height of keyframe
+        this.keyframeSizeHovered = this.trackHeight * 0.5 + 5;
+
         if(this.animationClip) {
             this.setAnimationClip(this.animationClip);
         }
@@ -1437,25 +1457,12 @@ class KeyFramesTimeline extends Timeline {
                 const track = itemTracks[j];
                 nodes.push({'trackData': track, 'id': track.id, 'skipVisibility': this.skipVisibility, visible: track.active, 'children':[], actions : this.skipLock ? null : [{
                     'name':'Lock edition',
-                    'icon': (track.locked ? 'Lock' : 'LockOpen'),
-                    'swap': (track.locked ? 'LockOpen' : 'Lock'),
-                    'callback': (node, el) => {
-                        let value = el.classList.contains('Lock');
-                     
-                        if(value) {
-                            el.title = 'Lock edition';
-                            el.classList.remove('Lock');
-                            el.classList.add('LockOpen');    
-                        }
-                        else {
-                            el.title = 'Unlock edition';
-                            el.classList.remove('LockOpen');
-                            el.classList.add('Lock');                                 
-                        }
-
-                        node.trackData.locked = !value;
+                    '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(el, node.trackData, node)
+                            this.onLockTrack(node.trackData, node);
                         }
                     }
                 }]});
@@ -1646,7 +1653,6 @@ class KeyFramesTimeline extends Timeline {
                 }
             }
         }
-
         
         this.updateLeftPanel();
 
@@ -1751,6 +1757,16 @@ class KeyFramesTimeline extends Timeline {
         return null;
     }
 
+    /**
+     * 
+     * @param {number} size pixels, height of keyframe
+     * @param {number} sizeHovered optional, size in pixels when hovered 
+     */
+    setKeyframeSize( size, sizeHovered = null ){
+        this.keyframeSizeHovered = sizeHovered ?? size;
+        this.keyframeSize = size;
+    }
+
     onMouseUp( e, time )  {
 
         let track = e.track;
@@ -1760,7 +1776,8 @@ class KeyFramesTimeline extends Timeline {
         if(e.shiftKey) {
             // Manual multiple selection
             if(!discard && track) {
-                const keyFrameIdx = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.secondsPerPixel * 5 );   
+                const thresholdPixels = this.keyframeSize * 0.5; // radius of circle (curves) or rotated square (keyframes)
+                const keyFrameIdx = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.secondsPerPixel * thresholdPixels );   
                 if ( keyFrameIdx > -1 ){
                     track.selected[keyFrameIdx] ?
                         this.deselectKeyFrame(track.trackIdx, keyFrameIdx) :
@@ -1794,7 +1811,8 @@ class KeyFramesTimeline extends Timeline {
                 this.deselectAllKeyFrames();         
             }
             if (track){
-                const keyFrameIndex = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.secondsPerPixel * 5 );
+                const thresholdPixels = this.keyframeSize * 0.5; // radius of circle (curves) or rotated square (keyframes)
+                const keyFrameIndex = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.secondsPerPixel * thresholdPixels );
                 if( keyFrameIndex > -1 ) {
                     this.processSelectionKeyFrame( track.trackIdx, keyFrameIndex, false ); // Settings this as multiple so time is not being set
                 }  
@@ -1811,7 +1829,7 @@ class KeyFramesTimeline 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');
@@ -1819,31 +1837,28 @@ class KeyFramesTimeline extends Timeline {
             // Set pre-move state
             this.moveKeyMinTime = Infinity;
             const tracks = this.animationClip.tracks;
-            for(let selectedKey of this.lastKeyFramesSelected) {
+            let lastTrackIdx = -1; 
+            for(let selectedKey of this.lastKeyFramesSelected) { // WARNING assumes lasKeyFramesSelected is sorted, so all keyframes of the same track are grouped
                 let [trackIdx, keyIndex, keyTime] = selectedKey;
                 const track = tracks[trackIdx];
+
+                selectedKey[2] = track.times[keyIndex]; // update original time just in case 
                 
-                // save track states only once
-                if (this.moveKeyMinTime < Infinity){
-                    let state = this.historyUndo[this.historyUndo.length-1];
-                    let s = 0;
-                    for( s = 0; s < state.length; ++s){
-                        if ( state[s].trackIdx == track.trackIdx ){ break; }
-                    }
-                    if( s == state.length ){
+                if ( lastTrackIdx != trackIdx ){ 
+                    // save track states only once
+                    if (this.moveKeyMinTime < Infinity){
                         this.saveState(track.trackIdx, true);
+                    }else{
+                        this.saveState(track.trackIdx, false);               
                     }
-                }else{
-                    this.saveState(track.trackIdx, false);               
+                    this.moveKeyMinTime = Math.min( this.moveKeyMinTime, selectedKey[2] );
+                    lastTrackIdx = trackIdx;
                 }
 
-                selectedKey[2] = track.times[keyIndex]; // update original time just in case 
-                this.moveKeyMinTime = Math.min( this.moveKeyMinTime, selectedKey[2] );
             }
             
             this.timeBeforeMove = this.xToTime( localX );
-        }
-        else if( e.altKey ){ // if only altkey, do not grab timeline
+
             this.grabbing = false;
             this.grabbingTimeBar = false;
         }
@@ -1918,46 +1933,45 @@ class KeyFramesTimeline extends Timeline {
                     }
                 }
             }
-            if ( !e.altKey || !(e.buttons & 0x01) ){
-                return;
-            }
-        }
-
-        // Track.dim == 1:  move keyframes vertically (change values instead of time) 
-        // RELIES ON SORTED ARRAY OF lastKeyFramesSelected
-        if ( e.altKey && e.buttons & 0x01 ){
-            const tracks = this.animationClip.tracks;
-            let lastTrackChanged = -1;
-            for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
-                const [trackIdx, keyIndex, originalKeyTime] = this.lastKeyFramesSelected[i];
-                track = tracks[trackIdx];
-                if(track.locked || track.dim != 1 || !track.curves){
-                    continue;
+            
+            // Track.dim == 1:  move keyframes vertically (change values instead of time) 
+            // RELIES ON SORTED ARRAY OF lastKeyFramesSelected
+            if ( e.altKey && e.buttons & 0x01 ){
+                const tracks = this.animationClip.tracks;
+                let lastTrackChanged = -1;
+                for( let i = 0; i < this.lastKeyFramesSelected.length; ++i ){
+                    const [trackIdx, keyIndex, originalKeyTime] = this.lastKeyFramesSelected[i];
+                    track = tracks[trackIdx];
+                    if(track.locked || track.dim != 1 || !track.curves){
+                        continue;
+                    }
+    
+                    let value = track.values[keyIndex];
+                    let delta = e.deltay * this.keyValuePerPixel * (track.curvesRange[1]-track.curvesRange[0]); 
+                    track.values[keyIndex] = Math.max(track.curvesRange[0], Math.min(track.curvesRange[1], value - delta)); // invert delta because of screen y
+                    track.edited[keyIndex] = true;
+    
+                    if ( this.onUpdateTrack && track.trackIdx != lastTrackChanged && lastTrackChanged > -1){ // do it only once all keyframes of the same track have been modified
+                        this.onUpdateTrack( [track.trackIdx] );
+                    }
+                    lastTrackChanged = track.trackIdx;
                 }
-
-                let value = track.values[keyIndex];
-                let delta = e.deltay * this.keyValuePerPixel * (track.curvesRange[1]-track.curvesRange[0]); 
-                track.values[keyIndex] = Math.max(track.curvesRange[0], Math.min(track.curvesRange[1], value - delta)); // invert delta because of screen y
-                track.edited[keyIndex] = true;
-
-                if ( this.onUpdateTrack && track.trackIdx != lastTrackChanged && lastTrackChanged > -1){ // do it only once all keyframes of the same track have been modified
+                if( this.onUpdateTrack && lastTrackChanged > -1 ){ // do the last update, once the last track has been processed
                     this.onUpdateTrack( [track.trackIdx] );
                 }
-                lastTrackChanged = track.trackIdx;
-            }
-            if( this.onUpdateTrack && lastTrackChanged > -1 ){ // do the last update, once the last track has been processed
-                this.onUpdateTrack( [track.trackIdx] );
+                return;
             }
-            return;
         }
 
+
         if( this.grabbing && e.button != 2) {
 
         }
         else if(track) {
 
             this.unHoverAll();
-            let keyFrameIndex = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.secondsPerPixel * 5 );
+            const thresholdPixels = this.keyframeSize * 0.5; // radius of circle (curves) or rotated square (keyframes)
+            let keyFrameIndex = this.getCurrentKeyFrame( track, this.xToTime( localX ), this.secondsPerPixel * thresholdPixels );
             if(keyFrameIndex > -1 ) {
                 if(track && track.locked)
                     return;
@@ -2026,7 +2040,7 @@ class KeyFramesTimeline extends Timeline {
                         if ( !e.track ){ return; }
                         const values = new Float32Array( e.track.dim );
                         values.fill(0);
-                        this.addKeyFrames( e.track, values, [this.currentTime] );
+                        this.addKeyFrames( e.track.trackIdx, values, [this.currentTime] );
                     }
                 }
             );
@@ -2075,9 +2089,21 @@ class KeyFramesTimeline extends Timeline {
         const visibleElements = this.getVisibleItems(); 
 
         let offset = scrollY;
+
+        // compute track from which to start rendering (avoid rendering unseen tracks)
+        let startElIdx = 0;
+        if ( offset < -this.lastTrackTreesComponentOffset ){ // offset 0 = (0 of canvas) + track-Tree-Offset. This renders tracks under the time zone
+            startElIdx = Math.floor( -(offset + this.lastTrackTreesComponentOffset) / this.trackHeight ); // how many tracks to skip
+            offset += startElIdx * this.trackHeight;
+        }
+        
         ctx.translate(0, offset);
 
-        for(let t = 0; t < visibleElements.length; t++) {
+        // compute track to end rendering (avoid rendering unseen tracks)
+        let endElIdx = startElIdx + Math.ceil( ( ctx.canvas.height - this.lastTrackTreesComponentOffset - offset ) / this.trackHeight );
+        endElIdx = endElIdx > visibleElements.length ? visibleElements.length : endElIdx;
+        
+        for(let t = startElIdx; t < endElIdx; t++) {
             const track = visibleElements[t].treeData.trackData;
             
             if (track){ 
@@ -2088,7 +2114,6 @@ class KeyFramesTimeline extends Timeline {
                 }
             }
             
-            offset += trackHeight;
             ctx.translate(0, trackHeight);
         }
          
@@ -2115,6 +2140,8 @@ class KeyFramesTimeline extends Timeline {
         const keyframes = track.times;         
         const startTime = this.visualTimeRange[0];
         const endTime = this.visualTimeRange[1] + 0.0000001;
+        const defaultPointSize = this.keyframeSize / Math.SQRT2; // pythagoras with equal sides h2 = c2 + c2 = 2 * c2
+        const hoverPointSize = this.keyframeSizeHovered / Math.SQRT2;
 
         for(let j = 0; j < keyframes.length; ++j)
         {
@@ -2124,7 +2151,7 @@ class KeyFramesTimeline extends Timeline {
             }
 
             let keyframePosX = this.timeToX( time );
-            let size = trackHeight * 0.3;
+            let size = defaultPointSize;
             
             if(!this.active || track.active == false) {
                 ctx.fillStyle = Timeline.KEYFRAME_COLOR_INACTIVE;
@@ -2133,7 +2160,7 @@ class KeyFramesTimeline extends Timeline {
                 ctx.fillStyle = Timeline.KEYFRAME_COLOR_LOCK;
             }
             else if(track.hovered[j]) {
-                size = trackHeight * 0.45;
+                size = hoverPointSize;
                 ctx.fillStyle = Timeline.KEYFRAME_COLOR_HOVERED;
             }
             else if(track.selected[j]) {
@@ -2166,8 +2193,8 @@ class KeyFramesTimeline extends Timeline {
         ctx.globalAlpha = 1;
         const keyframes = track.times;
         const values = track.values;
-        const defaultPointSize = 5;
-        const hoverPointSize = 7;
+        const defaultPointSize = this.keyframeSize * 0.5; // radius
+        const hoverPointSize = this.keyframeSizeHovered * 0.5; // radius
         const valueRange = track.curvesRange; //[min, max]
         const displayRange = trackHeight - defaultPointSize * 2;
         const startTime = this.visualTimeRange[0];
@@ -2179,7 +2206,7 @@ class KeyFramesTimeline extends Timeline {
         if ( keyframes.length > 1){
             let startPosX = this.timeToX( keyframes[0] );
             let startValue = values[0];                
-            startValue = ((startValue - valueRange[0]) / (valueRange[1] - valueRange[0])) * (-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
+            startValue = LX.clamp((startValue - valueRange[0]) / (valueRange[1] - valueRange[0]), 0,1) * (-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
             ctx.moveTo( startPosX, startValue );
 
             for(let j = 1; j < keyframes.length; ++j){
@@ -2187,7 +2214,7 @@ class KeyFramesTimeline extends Timeline {
                 let time = keyframes[j];
                 let keyframePosX = this.timeToX( time );
                 let value = values[j];                
-                value = ((value - valueRange[0]) / (valueRange[1] - valueRange[0])) * (-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
+                value = LX.clamp((value - valueRange[0]) / (valueRange[1] - valueRange[0]), 0,1) * (-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
     
                 if( time < startTime ){
                     ctx.moveTo( keyframePosX, value ); 
@@ -2199,7 +2226,7 @@ class KeyFramesTimeline extends Timeline {
                     let dt = keyframePosX - lastKeyframePosX;
                     if ( dt > 0 ){
                         let lastValue = values[j-1];
-                        lastValue = ((lastValue - valueRange[0]) / (valueRange[1] - valueRange[0])) * (-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
+                        lastValue = LX.clamp((lastValue - valueRange[0]) / (valueRange[1] - valueRange[0]), 0,1) * (-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
                         let f = (this.timeToX( endTime ) - lastKeyframePosX) / dt;
                         ctx.lineTo( lastKeyframePosX + dt * f, lastValue * (1-f) + value * f ); 
                     }
@@ -2239,7 +2266,7 @@ class KeyFramesTimeline extends Timeline {
                 ctx.fillStyle = Timeline.KEYFRAME_COLOR
             
             let value = values[j];
-            value = ((value - valueRange[0]) / (valueRange[1] - valueRange[0])) *(-displayRange) + (trackHeight - defaultPointSize); // normalize and offset
+            value = LX.clamp((value - valueRange[0]) / (valueRange[1] - valueRange[0]), 0,1) *(-displayRange) + (trackHeight - defaultPointSize); // normalize, clamp and offset
 
             ctx.beginPath();
             ctx.arc( keyframePosX, value, size, 0, Math.PI * 2);