lexgui 0.1.45 → 0.2.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:
@@ -313,6 +315,9 @@ class CodeEditor {
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "100%", skipAppend: true } );
 
+        this.skipCodeInfo = options.skipInfo ?? false;
+        this.disableEdition = options.disableEdition ?? false;
+
         this.tabs = this.area.addTabs( { onclose: (name) => {
             delete this.openedTabs[ name ];
             if( Object.keys( this.openedTabs ).length < 2 )
@@ -322,12 +327,15 @@ class CodeEditor {
             }
         } } );
 
-        this.tabs.root.addEventListener( 'dblclick', (e) => {
-            if( options.allowAddScripts ?? true ) {
-                e.preventDefault();
-                this.addTab("unnamed.js", true);
-            }
-        } );
+        if( !this.disableEdition )
+        {
+            this.tabs.root.addEventListener( 'dblclick', (e) => {
+                if( options.allowAddScripts ?? true ) {
+                    e.preventDefault();
+                    this.addTab("unnamed.js", true);
+                }
+            } );
+        }
 
         // Full editor
         area.root.classList.add('codebasearea');
@@ -339,15 +347,16 @@ class CodeEditor {
         this.root.tabIndex = -1;
         area.attach( this.root );
 
-        this.skipCodeInfo = options.skipInfo ?? false;
-        this.disableEdition = options.disableEdition ?? false;
-
         if( !this.disableEdition )
         {
             this.root.addEventListener( 'keydown', this.processKey.bind( this) );
             this.root.addEventListener( 'focus', this.processFocus.bind( this, true ) );
             this.root.addEventListener( 'focusout', this.processFocus.bind( this, false ) );
         }
+        else
+        {
+            this.root.classList.add( "disabled" );
+        }
 
         this.root.addEventListener( 'mousedown', this.processMouse.bind(this) );
         this.root.addEventListener( 'mouseup', this.processMouse.bind(this) );
@@ -373,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 );
@@ -383,57 +392,60 @@ 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;
-            this.codeScroller.addEventListener( 'scroll', e => {
 
-                if( this._discardScroll )
-                {
-                    this._discardScroll = false;
-                    return;
-                }
+            if( !this.disableEdition )
+            {
+                this.codeScroller.addEventListener( 'scroll', e => {
+
+                    if( this._discardScroll )
+                    {
+                        this._discardScroll = false;
+                        return;
+                    }
 
-                this.setScrollBarValue( 'vertical' );
+                    this.setScrollBarValue( 'vertical' );
 
-                const scrollTop = this.getScrollTop();
+                    const scrollTop = this.getScrollTop();
 
-                // Scroll down...
-                if( scrollTop > lastScrollTopValue )
-                {
-                    if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
+                    // Scroll down...
+                    if( scrollTop > lastScrollTopValue )
                     {
-                        const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
-                        const scrollDownBoundary =
-                            ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight;
+                        if( this.visibleLinesViewport.y < (this.code.lines.length - 1) )
+                        {
+                            const totalLinesInViewport = ((this.codeScroller.offsetHeight - 36) / this.lineHeight)|0;
+                            const scrollDownBoundary =
+                                ( Math.max( this.visibleLinesViewport.y - totalLinesInViewport, 0 ) - 1 ) * this.lineHeight;
 
-                        if( scrollTop >= scrollDownBoundary )
+                            if( scrollTop >= scrollDownBoundary )
+                                this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
+                        }
+                    }
+                    // Scroll up...
+                    else
+                    {
+                        const scrollUpBoundary = parseInt( this.code.style.top );
+                        if( scrollTop < scrollUpBoundary )
                             this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
                     }
-                }
-                // Scroll up...
-                else
-                {
-                    const scrollUpBoundary = parseInt( this.code.style.top );
-                    if( scrollTop < scrollUpBoundary )
-                        this.processLines( CodeEditor.UPDATE_VISIBLE_LINES );
-                }
 
-                lastScrollTopValue = scrollTop;
-            });
+                    lastScrollTopValue = scrollTop;
+                });
 
-            this.codeScroller.addEventListener( 'wheel', e => {
-                if( e.ctrlKey )
-                {
-                    e.preventDefault();
-                    ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
-                }
-                else
-                {
-                    const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
-                    if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
-                }
-            });
+                this.codeScroller.addEventListener( 'wheel', e => {
+                    if( e.ctrlKey )
+                    {
+                        e.preventDefault();
+                        ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
+                    }
+                    else
+                    {
+                        const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
+                        if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
+                    }
+                });
+            }
         }
 
         // This is only the container, line numbers are in the same line div
@@ -455,59 +467,62 @@ class CodeEditor {
             area.attach( this.hScrollbar.root );
         }
 
-        // Add autocomplete box
+        if( !this.disableEdition )
         {
-            var box = document.createElement( 'div' );
-            box.className = "autocomplete";
-            this.autocomplete = box;
-            this.tabs.area.attach( box );
+            // Add autocomplete box
+            {
+                var box = document.createElement( 'div' );
+                box.className = "autocomplete";
+                this.autocomplete = box;
+                this.tabs.area.attach( box );
 
-            this.isAutoCompleteActive = false;
-        }
+                this.isAutoCompleteActive = false;
+            }
 
-        // Add search box
-        {
-            var box = document.createElement( 'div' );
-            box.className = "searchbox";
+            // Add search box
+            {
+                var box = document.createElement( 'div' );
+                box.className = "searchbox";
 
-            var searchPanel = new LX.Panel();
-            box.appendChild( searchPanel.root );
+                var searchPanel = new LX.Panel();
+                box.appendChild( searchPanel.root );
 
-            searchPanel.sameLine( 4 );
-            searchPanel.addText( null, "", null, { placeholder: "Find" } );
-            searchPanel.addButton( null, "up", () => this.search( null, true ), { className: 'micro', icon: "fa fa-arrow-up" } );
-            searchPanel.addButton( null, "down", () => this.search(), { className: 'micro', icon: "fa fa-arrow-down" } );
-            searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { className: 'micro', icon: "fa fa-xmark" } );
+                searchPanel.sameLine( 4 );
+                searchPanel.addText( null, "", null, { placeholder: "Find" } );
+                searchPanel.addButton( null, "up", () => this.search( null, true ), { className: 'micro', icon: "fa fa-arrow-up" } );
+                searchPanel.addButton( null, "down", () => this.search(), { className: 'micro', icon: "fa fa-arrow-down" } );
+                searchPanel.addButton( null, "x", this.hideSearchBox.bind( this ), { className: 'micro', icon: "fa fa-xmark" } );
 
-            box.querySelector( 'input' ).addEventListener( 'keyup', e => {
-                if( e.key == 'Escape' ) this.hideSearchBox();
-                else if( e.key == 'Enter' ) this.search( e.target.value, !!e.shiftKey );
-            } );
+                box.querySelector( 'input' ).addEventListener( 'keyup', e => {
+                    if( e.key == 'Escape' ) this.hideSearchBox();
+                    else if( e.key == 'Enter' ) this.search( e.target.value, !!e.shiftKey );
+                } );
 
-            this.searchbox = box;
-            this.tabs.area.attach( box );
-        }
+                this.searchbox = box;
+                this.tabs.area.attach( box );
+            }
 
-        // Add search LINE box
-        {
-            var box = document.createElement( 'div' );
-            box.className = "searchbox gotoline";
+            // Add search LINE box
+            {
+                var box = document.createElement( 'div' );
+                box.className = "searchbox gotoline";
 
-            var searchPanel = new LX.Panel();
-            box.appendChild( searchPanel.root );
+                var searchPanel = new LX.Panel();
+                box.appendChild( searchPanel.root );
 
-            searchPanel.addText( null, "", ( value, event ) => {
-                input.value = ":" + value.replaceAll( ':', '' );
-                this.goToLine( input.value.slice( 1 ) );
-            }, { placeholder: "Go to line", trigger: "input" } );
+                searchPanel.addText( null, "", ( value, event ) => {
+                    input.value = ":" + value.replaceAll( ':', '' );
+                    this.goToLine( input.value.slice( 1 ) );
+                }, { placeholder: "Go to line", trigger: "input" } );
 
-            let input = box.querySelector( 'input' );
-            input.addEventListener( 'keyup', e => {
-                if( e.key == 'Escape' ) this.hideSearchLineBox();
-            } );
+                let input = box.querySelector( 'input' );
+                input.addEventListener( 'keyup', e => {
+                    if( e.key == 'Escape' ) this.hideSearchLineBox();
+                } );
 
-            this.searchlinebox = box;
-            this.tabs.area.attach( box );
+                this.searchlinebox = box;
+                this.tabs.area.attach( box );
+            }
         }
 
         // Add code-sizer
@@ -1059,7 +1074,7 @@ class CodeEditor {
             this.addTab("+", false, "New File");
         }
 
-        this.addTab( options.name || "untitled", true, options.title, { language: "CSS" } );
+        this.addTab( options.name || "untitled", true, options.title, { language: "Plain Text" } );
 
         // Create inspector panel
         let panel = this._createPanelInfo();
@@ -1609,6 +1624,11 @@ class CodeEditor {
 
     _onSelectTab( isNewTabButton, event, name ) {
 
+        if( this.disableEdition )
+        {
+            return;
+        }
+
         if( isNewTabButton )
         {
             this._onNewTab( event );
@@ -1657,7 +1677,9 @@ class CodeEditor {
         }, 0 );
 
         if( repeats > 0 )
+        {
             name = name.split( '.' ).join( '_' + repeats + '.' );
+        }
 
         const isNewTabButton = ( name === '+' );
 
@@ -2435,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
@@ -3369,7 +3392,9 @@ class CodeEditor {
 
         // I think it's not necessary but...
         if( this.disableEdition )
+        {
             return;
+        }
 
         // Some selections don't depend on mouse up..
         if( cursor.selection ) cursor.selection.invertIfNecessary();
@@ -3455,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 );
         });
@@ -3712,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;
@@ -3727,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' );
@@ -3742,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' );
@@ -4032,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;
@@ -4040,6 +4065,11 @@ class CodeEditor {
 
     hideAutoCompleteBox() {
 
+        if( !this.autocomplete )
+        {
+            return;
+        }
+
         const isActive = this.isAutoCompleteActive;
         this.isAutoCompleteActive = false;
         this.autocomplete.classList.remove( 'show' );