lexgui 0.1.46 → 0.4.0

package/build/components/codeeditor.js

@@ -237,6 +237,8 @@ class CodeEditor {
     static CODE_MIN_FONT_SIZE = 9;
     static CODE_MAX_FONT_SIZE = 22;
 
+    static LINE_GUTTER_WIDTH = 48;
+
     /**
      * @param {*} options
      * name:
@@ -380,7 +382,7 @@ class CodeEditor {
         this.selections = {};
 
         // Css char synchronization
-        this.xPadding = "48px";
+        this.xPadding = CodeEditor.LINE_GUTTER_WIDTH + "px";
 
         // Add main cursor
         this._addCursor( 0, 0, true, true );
@@ -390,7 +392,6 @@ class CodeEditor {
             this.codeScroller = this.tabs.area.root;
             this.firstLineInViewport = 0;
             this.lineScrollMargin = new LX.vec2( 20, 20 ); // [ mUp, mDown ]
-            window.scroller = this.codeScroller;
 
             let lastScrollTopValue = -1;
 
@@ -2456,10 +2457,11 @@ class CodeEditor {
 
         // We are out of the viewport and max length is different? Resize scrollbars...
         const maxLineLength = this.getMaxLineLength();
-        const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
+        const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
         if( maxLineLength >= numViewportChars && maxLineLength != this._lastMaxLineLength )
         {
             this.resize( maxLineLength );
+            this.setScrollLeft( 1e4 );
         }
 
         // Manage autocomplete
@@ -3478,7 +3480,7 @@ class CodeEditor {
         // Add horizontal scroll
 
         doAsync(() => {
-            var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - 48; // Gutter offset
+            var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
             if( (cursor.position * this.charWidth) >= viewportSizeX )
                 this.setScrollLeft( this.getScrollLeft() + this.charWidth );
         });
@@ -3735,7 +3737,7 @@ class CodeEditor {
 
             // Update max viewport
             const maxLineLength = pMaxLength ?? this.getMaxLineLength();
-            const scrollWidth = maxLineLength * this.charWidth;
+            const scrollWidth = maxLineLength * this.charWidth + CodeEditor.LINE_GUTTER_WIDTH;
             const scrollHeight = this.code.lines.length * this.lineHeight;
 
             this._lastMaxLineLength = maxLineLength;
@@ -3750,9 +3752,9 @@ class CodeEditor {
 
     resizeScrollBars() {
 
-        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+        const totalLinesInViewport = ((this.codeScroller.offsetHeight) / this.lineHeight)|0;
 
-        if( totalLinesInViewport > this.code.lines.length )
+        if( totalLinesInViewport >= this.code.lines.length )
         {
             this.codeScroller.classList.remove( 'with-vscrollbar' );
             this.vScrollbar.root.classList.add( 'scrollbar-unused' );
@@ -3765,10 +3767,10 @@ class CodeEditor {
             this.vScrollbar.thumb.style.height = (this.vScrollbar.thumb.size * 100.0) + "%";
         }
 
-        const numViewportChars = Math.floor( this.codeScroller.clientWidth / this.charWidth );
+        const numViewportChars = Math.floor( ( this.codeScroller.clientWidth - CodeEditor.LINE_GUTTER_WIDTH ) / this.charWidth );
         const maxLineLength = this._lastMaxLineLength;
 
-        if( numViewportChars > maxLineLength )
+        if( numViewportChars >= maxLineLength )
         {
             this.codeScroller.classList.remove( 'with-hscrollbar' );
             this.hScrollbar.root.classList.add( 'scrollbar-unused' );
@@ -4055,7 +4057,7 @@ class CodeEditor {
         // Show box
         this.autocomplete.classList.toggle('show', true);
         this.autocomplete.classList.toggle('no-scrollbar', !(this.autocomplete.scrollHeight > this.autocomplete.offsetHeight));
-        this.autocomplete.style.left = (cursor._left + 48 - this.getScrollLeft()) + "px";
+        this.autocomplete.style.left = (cursor._left + CodeEditor.LINE_GUTTER_WIDTH - this.getScrollLeft()) + "px";
         this.autocomplete.style.top = (cursor._top + 28 + this.lineHeight - this.getScrollTop()) + "px";
 
         this.isAutoCompleteActive = true;

package/build/components/timeline.js

@@ -142,6 +142,13 @@ class Timeline {
             this.resizeCanvas( [ bounding.width, bounding.height + this.header_offset ] );
         }
         this.resize(this.size);
+
+        // update color theme
+        this.updateTheme();
+        LX.addSignal( "@on_new_color_scheme", (el, value) => {
+            // Retrieve again the color using LX.getThemeColor, which checks the applied theme
+            this.updateTheme();
+        } )
     }
 
     /**
@@ -507,7 +514,7 @@ class Timeline {
 
         // Begin drawing
         ctx.beginPath();
-        ctx.fillStyle = Timeline.FONT_COLOR//"#888";
+        ctx.fillStyle = Timeline.FONT_COLOR;
         ctx.globalAlpha = this.opacity;
 
         for( let x = startx; x <= endx; x += tickX )
@@ -550,8 +557,8 @@ class Timeline {
         let max_tracks = Math.ceil( (h - timeline_height + this.currentScrollInPixels) / line_height );
 
         ctx.save();
-        ctx.fillStyle = "#f0f0f003"//Timeline.TRACK_COLOR_SECONDARY;
-        ctx.globalAlpha = 1;
+        ctx.fillStyle = Timeline.TRACK_COLOR_SECONDARY;
+        ctx.globalAlpha = 0.3 * this.opacity;
         for(let i = 0; i <= max_tracks; i+=2)
         {
             ctx.fillRect(0, timeline_height + i * line_height  - this.currentScrollInPixels, w, line_height );
@@ -559,7 +566,7 @@ class Timeline {
         ctx.globalAlpha = this.opacity;
 
         //bg lines
-        ctx.strokeStyle = "#444";
+        ctx.strokeStyle = Timeline.TRACK_COLOR_TERCIARY;
         ctx.beginPath();
     
         let pos = this.timeToX( 0 );
@@ -670,15 +677,15 @@ class Timeline {
         ctx.font = "11px " + Timeline.FONT;//"11px Calibri";
         ctx.textAlign = "center";
         //ctx.textBaseline = "middle";
-        ctx.fillStyle = Timeline.COLOR_INACTIVE//"#888";
+        ctx.fillStyle = Timeline.COLOR_INACTIVE;
         ctx.fillText( (Math.floor(this.currentTime*10)*0.1).toFixed(1), posx, this.topMargin * 0.6 );
 
         // Selections
         ctx.strokeStyle = ctx.fillStyle =  Timeline.FONT_COLOR;
         ctx.translate( this.position[0], this.position[1] + this.topMargin )
         if(this.boxSelection) {
-            ctx.globalAlpha = 0.15;
-            ctx.fillStyle = "#AAA";
+            ctx.globalAlpha = 0.15 * this.opacity;
+            ctx.fillStyle = Timeline.BOX_SELECTION_COLOR;
             ctx.strokeRect( this.boxSelectionStart[0], this.boxSelectionStart[1], this.boxSelectionEnd[0] - this.boxSelectionStart[0], this.boxSelectionEnd[1] - this.boxSelectionStart[1]);
             ctx.fillRect( this.boxSelectionStart[0], this.boxSelectionStart[1], this.boxSelectionEnd[0] - this.boxSelectionStart[0], this.boxSelectionEnd[1] - this.boxSelectionStart[1]);
             ctx.stroke();
@@ -1077,16 +1084,16 @@ class Timeline {
         let selectedClipArea = null;
 
         if(track.enabled === false) {
-            ctx.globalAlpha = 0.4;
+            ctx.globalAlpha = 0.4 * this.opacity;
         }
         else {
-            ctx.globalAlpha = 0.2;
+            ctx.globalAlpha = 0.2 * this.opacity;
         }
 
         ctx.font = Math.floor( trackHeight * 0.8) + "px" + Timeline.FONT;
         ctx.textAlign = "left";
         ctx.textBaseline = "middle";
-        ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT//"#2c303570";
+        ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT;
         
         // Fill track background if it's selected
         if(track.isSelected) {
@@ -1094,7 +1101,7 @@ class Timeline {
         }
 
         let clips = track.clips;
-        let trackAlpha = 1;
+        let trackAlpha = this.opacity;
 
         if(!clips) {
             return;
@@ -1137,7 +1144,7 @@ class Timeline {
                     ctx.fillStyle = 'rgba(' + color.join(',') + ', 0.8)';
                 }
                 else {
-                    ctx.globalAlpha = 0.8;
+                    ctx.globalAlpha = 0.8 * this.opacity;
                 }
             
                 // Draw fade-in and fade-out
@@ -1304,22 +1311,37 @@ class Timeline {
         this.updateLeftPanel();
         this.resize();        
     }
+
+    /**
+     * updates theme (light - dark) based on LX's current theme
+     */
+    updateTheme( ){
+        Timeline.BACKGROUND_COLOR = LX.getThemeColor("global-blur-background");
+        Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-color-primary");
+        Timeline.TRACK_COLOR_SECONDARY = LX.getThemeColor("global-color-secondary");
+        Timeline.TRACK_COLOR_TERCIARY = LX.getThemeColor("global-color-terciary");
+        Timeline.TRACK_COLOR_QUATERNARY = LX.getThemeColor("global-color-quaternary");
+        Timeline.FONT = LX.getThemeColor("global-font");
+        Timeline.FONT_COLOR = LX.getThemeColor("global-text-primary");
+     }
 };
 
-Timeline.BACKGROUND_COLOR = LX.getThemeColor("global-color-primary");
-Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-blur-background");
-Timeline.TRACK_COLOR_SECONDARY = LX.getThemeColor("global-color-terciary");
+Timeline.BACKGROUND_COLOR = LX.getThemeColor("global-blur-background");
+Timeline.TRACK_COLOR_PRIMARY = LX.getThemeColor("global-color-primary");
+Timeline.TRACK_COLOR_SECONDARY = LX.getThemeColor("global-color-secondary");
+Timeline.TRACK_COLOR_TERCIARY = LX.getThemeColor("global-color-terciary");
+Timeline.TRACK_COLOR_QUATERNARY = LX.getThemeColor("global-color-quaternary");
 Timeline.TRACK_SELECTED = LX.getThemeColor("global-selected");
 Timeline.TRACK_SELECTED_LIGHT = LX.getThemeColor("global-selected-light");
 Timeline.FONT = LX.getThemeColor("global-font");
-Timeline.FONT_COLOR = LX.getThemeColor("global-text");
-Timeline.COLOR = LX.getThemeColor("global-selected-dark");//"#5e9fdd";
+Timeline.FONT_COLOR = LX.getThemeColor("global-text-primary");
+Timeline.COLOR = LX.getThemeColor("global-selected-dark");
 Timeline.COLOR_SELECTED = Timeline.COLOR_HOVERED = "rgba(250,250,20,1)";///"rgba(250,250,20,1)";
 // Timeline.COLOR_HOVERED = LX.getThemeColor("global-selected");
 Timeline.COLOR_INACTIVE = "rgba(250,250,250,0.7)";
 Timeline.COLOR_LOCK = "rgba(255,125,125,0.7)";
 Timeline.COLOR_EDITED = "rgba(20,230,20,0.7)"//"rgba(125,250,250, 1)";
-
+Timeline.BOX_SELECTION_COLOR = "#AAA";
 LX.Timeline = Timeline;
 
 /**
@@ -1651,13 +1673,13 @@ class KeyFramesTimeline extends Timeline {
 
         
         if(track.isSelected) {
-            ctx.globalAlpha = 0.2;
-            ctx.fillStyle = Timeline.TRACK_SELECTED;//"#2c303570";
+            ctx.globalAlpha = 0.2 * this.opacity;
+            ctx.fillStyle = Timeline.TRACK_SELECTED;
             ctx.fillRect(0, 0, ctx.canvas.width, trackHeight );
         }
 
-        ctx.fillStyle = Timeline.COLOR;//"#2c303570";
-        ctx.globalAlpha = 1;
+        ctx.fillStyle = Timeline.COLOR;
+        ctx.globalAlpha = this.opacity;
 
         let keyframes = track.times;
 
@@ -4247,12 +4269,12 @@ class CurvesTimeline extends Timeline {
 
         if(keyframes) {
             if(track.isSelected){
-                ctx.globalAlpha = 0.2;
-                ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT//"#2c303570";
+                ctx.globalAlpha = 0.2 * this.opacity;
+                ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT;
                 ctx.fillRect(0, 0, ctx.canvas.width, trackHeight );      
             }
                 
-            ctx.globalAlpha = 1;
+            ctx.globalAlpha = this.opacity;
                 
             //draw lines
             ctx.strokeStyle = "white";