lexgui 0.6.11 → 0.7.0

package/README.md

@@ -1,6 +1,9 @@
+![logo](./images/icon_dark.png#gh-dark-mode-only)
+![logo](./images/icon_light.png#gh-light-mode-only)
+
 # lexgui.js
 
-**lexgui.js** is a lightweight JavaScript library for building web interfaces. No bloated frameworks, no unnecessary complexity, just pure HTML, CSS, and JavaScript magic. It gives you an easy API for crafting dynamic, interactive editor interfaces without the headache of big libraries.
+**lexgui.js** is a lightweight JavaScript library for building web user interfaces. No bloated frameworks, no unnecessary complexity, just pure HTML, CSS, and JavaScript magic. It gives you an easy API for crafting dynamic, interactive editor interfaces without the headache of big libraries.
 
 NPM Package: [npmjs.com/package/lexgui](https://www.npmjs.com/package/lexgui)
 
@@ -18,12 +21,14 @@ NPM Package: [npmjs.com/package/lexgui](https://www.npmjs.com/package/lexgui)
   </tr>
 </table>
 
-## Component Features
+## Extension Features
 
-- [x] Asset Browser
 - [x] Timeline
 - [x] Code Editor
-- [ ] Node Graphs (WIP)
+- [x] Docs Maker
+- [ ] Node Graph Editor (WIP)
+- [ ] Video Editor (WIP)
+- [ ] Immediate UI (WIP)
 
 ## Quick start
 
@@ -40,7 +45,7 @@ NPM Package: [npmjs.com/package/lexgui](https://www.npmjs.com/package/lexgui)
         {
           "imports": {
             "lexgui": "https://cdn.skypack.dev/lexgui@^<version>/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^<version>/build/components/"
+            "lexgui/extensions/": "https://cdn.skypack.dev/lexgui@^<version>/build/extensions/"
           }
         }
     </script>
@@ -56,8 +61,8 @@ NPM Package: [npmjs.com/package/lexgui](https://www.npmjs.com/package/lexgui)
 ```js
 import { LX } from 'lexgui';
 
-// Using components
-import { CodeEditor } from 'lexgui/components/codeeditor.js';
+// Using extensions
+import { CodeEditor } from 'lexgui/extensions/codeeditor.js';
 
 // Create main area
 let area = await LX.init();
@@ -68,7 +73,7 @@ let panel = area.addPanel();
 // Start branch/section
 panel.branch("Section Title");
 
-// Add some widgets
+// Add some components
 panel.addButton(null, "Click me, Im Full Width...");
 panel.addText("Text", "Warning text", null, { warning: true });
 
@@ -82,7 +87,7 @@ The library documentation is available at [lexgui.js/docs/](https://jxarco.githu
 
 ## Examples
 
-Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how to create the different widgets and components!
+Look at this [examples](https://jxarco.github.io/lexgui.js/examples/) to see how to create the different components and integrate the extensions!
 
 ## Projects using lexgui.js
 

package/build/{components → extensions}/audio.js

@@ -5,14 +5,14 @@ if( !LX )
     throw("lexgui.js missing!");
 }
 
-LX.components.push( 'Audio' );
+LX.extensions.push( 'Audio' );
 
 /**
  * @class Knob
- * @description Knob Widget
+ * @description Knob Component
  */
 
-class Knob extends LX.Widget {
+class Knob extends LX.BaseComponent {
 
     constructor( name, value, min, max, callback, options = {} ) {
 
@@ -22,7 +22,7 @@ class Knob extends LX.Widget {
             value = options.precision ? LX.round( value, options.precision ) : value;
         }
 
-        super( LX.Widget.KNOB, name, value, options );
+        super( LX.BaseComponent.KNOB, name, value, options );
 
         this.onGetValue = () => {
             return innerKnobCircle.value;
@@ -30,7 +30,7 @@ class Knob extends LX.Widget {
 
         this.onSetValue = ( newValue, skipCallback ) => {
             innerSetValue( newValue );
-            LX.Widget._dispatchEvent( innerKnobCircle, "change", skipCallback );
+            LX.BaseComponent._dispatchEvent( innerKnobCircle, "change", skipCallback );
         };
 
         this.onResize = ( rect ) => {
@@ -107,7 +107,7 @@ class Knob extends LX.Widget {
             // Reset button (default value)
             if( !skipCallback )
             {
-                let btn = this.root.querySelector( ".lexwidgetname .lexicon" );
+                let btn = this.root.querySelector( ".lexcomponentname .lexicon" );
                 if( btn ) btn.style.display = val != innerKnobCircle.iValue ? "block": "none";
 
                 if( !( snapEnabled && !mustSnap ) )
@@ -157,7 +157,7 @@ class Knob extends LX.Widget {
                 else if(e.altKey) mult *= 0.1;
                 let new_value = (innerKnobCircle.value - mult * dt);
                 innerKnobCircle.value = new_value;
-                LX.Widget._dispatchEvent( innerKnobCircle, 'change' );
+                LX.BaseComponent._dispatchEvent( innerKnobCircle, 'change' );
             }
 
             e.stopPropagation();
@@ -175,7 +175,7 @@ class Knob extends LX.Widget {
             if( snapEnabled )
             {
                 mustSnap = true;
-                LX.Widget._dispatchEvent( innerKnobCircle, 'change' );
+                LX.BaseComponent._dispatchEvent( innerKnobCircle, 'change' );
             }
 
             if( document.pointerLockElement )
@@ -196,7 +196,7 @@ LX.Knob = Knob;
 
 /**
  * @method addKnob
- * @param {String} name Widget name
+ * @param {String} name Component name
  * @param {Number} value Knob value
  * @param {Number} min Min Knob value
  * @param {Number} max Max Knob value
@@ -207,6 +207,6 @@ LX.Knob = Knob;
  */
 
 LX.Panel.prototype.addKnob = function( name, value, min, max, callback, options = {} ) {
-    const widget = new Knob( name, value, min, max, callback, options );
-    return this._attachWidget( widget );
+    const component = new Knob( name, value, min, max, callback, options );
+    return this._attachComponent( component );
 }

package/build/{components → extensions}/codeeditor.js

@@ -4,7 +4,7 @@ if(!LX) {
     throw("lexgui.js missing!");
 }
 
-LX.components.push( 'CodeEditor' );
+LX.extensions.push( 'CodeEditor' );
 
 function swapElements( obj, a, b ) {
     [obj[a], obj[b]] = [obj[b], obj[a]];
@@ -458,7 +458,7 @@ class CodeEditor {
                         const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
                         if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
                     }
-                });
+                }, { passive: true });
             }
         }
 
@@ -822,8 +822,9 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
             this.cursorToString( cursor, this.code.lines[ ln ] );
 
-            const last_char = ( this.code.clientWidth / this.charWidth )|0;
-            this.setScrollLeft( cursor.position >= last_char ? ( cursor.position - last_char ) * this.charWidth : 0 );
+            var viewportSizeX = ( this.codeScroller.clientWidth + this.getScrollLeft() ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
+            if( ( cursor.position * this.charWidth ) >= viewportSizeX )
+                this.setScrollLeft( this.code.lines[ ln ].length * this.charWidth );
 
             // Merge cursors
             this.mergeCursors( ln );
@@ -1097,39 +1098,50 @@ class CodeEditor {
         this.loadedTabs = { };
         this.openedTabs = { };
 
+        const onLoadAll = () => {
+            // Create inspector panel when the initial state is complete
+            // and we have at least 1 tab opened
+            this.infoPanel = this._createInfoPanel();
+            if( this.infoPanel )
+            {
+                area.attach( this.infoPanel );
+            }
+
+            // Wait until the fonts are all loaded
+            document.fonts.ready.then(() => {
+                this.charWidth = this._measureChar( "a", true );
+            });
+
+            window.editor = this;
+        };
+
         if( options.allowAddScripts ?? true )
         {
             this.addTab("+", false, "New File");
         }
 
-        this.addTab( options.name || "untitled", true, options.title, { language: options.highlight ?? "Plain Text" } );
-
-        // Create inspector panel
-        let panel = this._createPanelInfo();
-        if( panel ) area.attach( panel );
+        if( options.files )
+        {
+            console.assert( options.files.constructor === Array, "_files_ must be an Array!" );
+            const numFiles = options.files.length;
+            let filesLoaded = 0;
 
-        const fontUrl = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + "/data/CommitMono-400-Regular.otf";
-        const commitMono = new FontFace(
-            "CommitMono",
-            `url(${ fontUrl })`,
+            for( let url of options.files )
             {
-                style: "normal",
-                weight: "400",
-                display: "swap"
+                this.loadFile( url, { callback: () => {
+                    filesLoaded++;
+                    if( filesLoaded == numFiles )
+                    {
+                        onLoadAll();
+                    }
+                }});
             }
-        );
-
-        // Add to the document.fonts (FontFaceSet)
-        document.fonts.add( commitMono );
-
-        // Load the font
-        commitMono.load();
-
-        // Wait until the fonts are all loaded
-        document.fonts.ready.then(() => {
-            // console.log("commitMono loaded")
-            this.charWidth = this._measureChar( "a", true );
-        });
+        }
+        else
+        {
+            this.addTab( options.name || "untitled", true, options.title, { language: options.highlight ?? "Plain Text" } );
+            onLoadAll();
+        }
     }
 
     static getInstances()
@@ -1287,6 +1299,11 @@ class CodeEditor {
                     this._changeLanguageFromExtension( LX.getExtension( name ) );
                 }
             }
+
+            if( options.callback )
+            {
+                options.callback( text );
+            }
         };
 
         if( file.constructor == String )
@@ -1560,7 +1577,7 @@ class CodeEditor {
         this._changeLanguage( 'Plain Text' );
     }
 
-    _createPanelInfo() {
+    _createInfoPanel() {
 
         if( !this.skipInfo )
         {
@@ -2859,18 +2876,18 @@ class CodeEditor {
         }
 
         const lang = this.languages[ this.highlight ];
-        const local_line_num =  this.toLocalLine( linenum );
-        const gutter_line = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
+        const localLineNum =  this.toLocalLine( linenum );
+        const gutterLineHtml = "<span class='line-gutter'>" + (linenum + 1) + "</span>";
 
         const UPDATE_LINE = ( html ) => {
             if( !force ) // Single line update
             {
-                this.code.childNodes[ local_line_num ].innerHTML = gutter_line + html;
+                this.code.childNodes[ localLineNum ].innerHTML = gutterLineHtml + html;
                 this._setActiveLine( linenum );
                 this._clearTmpVariables();
             }
             else // Update all lines at once
-                return "<pre>" + ( gutter_line + html ) + "</pre>";
+                return "<pre>" + ( gutterLineHtml + html ) + "</pre>";
         }
 
         // multi-line strings not supported by now
@@ -2883,14 +2900,15 @@ class CodeEditor {
         // Single line
         if( !force )
         {
-            LX.deleteElement( this.code.childNodes[ local_line_num ] );
-            this.code.insertChildAtIndex( document.createElement( 'pre' ), local_line_num );
+            LX.deleteElement( this.code.childNodes[ localLineNum ] );
+            this.code.insertChildAtIndex( document.createElement( 'pre' ), localLineNum );
         }
 
         // Early out check for no highlighting languages
         if( this.highlight == 'Plain Text' )
         {
-            return UPDATE_LINE( linestring );
+            const plainTextHtml = linestring.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+            return UPDATE_LINE( plainTextHtml );
         }
 
         this._currentLineNumber = linenum;
@@ -2899,9 +2917,11 @@ class CodeEditor {
         const tokensToEvaluate = this._getTokensFromLine( linestring );
 
         if( !tokensToEvaluate.length )
-        return "<pre><span class='line-gutter'>" + linenum + "</span></pre>";
+        {
+            return "<pre><span class='line-gutter'>" + linenum + "</span></pre>";
+        }
 
-        var line_inner_html = "";
+        var lineInnerHtml = "";
 
         // Process all tokens
         for( var i = 0; i < tokensToEvaluate.length; ++i )
@@ -2929,7 +2949,7 @@ class CodeEditor {
                     this._buildingBlockComment = linenum;
             }
 
-            line_inner_html += this._evaluateToken( {
+            lineInnerHtml += this._evaluateToken( {
                 token: token,
                 prev: prev,
                 prevWithSpaces: tokensToEvaluate[ i - 1 ],
@@ -2942,7 +2962,7 @@ class CodeEditor {
             } );
         }
 
-        return UPDATE_LINE( line_inner_html );
+        return UPDATE_LINE( lineInnerHtml );
     }
 
     _lineHasComment( linestring ) {
@@ -3564,12 +3584,12 @@ class CodeEditor {
         this.restartBlink();
 
         // Add horizontal scroll
-
-        doAsync(() => {
-            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 );
-        });
+        const currentScrollLeft = this.getScrollLeft();
+        var viewportSizeX = ( this.codeScroller.clientWidth + currentScrollLeft ) - CodeEditor.LINE_GUTTER_WIDTH; // Gutter offset
+        if( (cursor.position * this.charWidth) >= viewportSizeX )
+        {
+            this.setScrollLeft( currentScrollLeft + this.charWidth );
+        }
     }
 
     cursorToLeft( key, cursor ) {
@@ -3585,11 +3605,12 @@ class CodeEditor {
 
         // Add horizontal scroll
 
-        doAsync(() => {
-            var viewportSizeX = this.getScrollLeft(); // Gutter offset
-            if( ( ( cursor.position - 1 ) * this.charWidth ) < viewportSizeX )
-                this.setScrollLeft( this.getScrollLeft() - this.charWidth );
-        });
+        const currentScrollLeft = this.getScrollLeft();
+        var viewportSizeX = currentScrollLeft; // Gutter offset
+        if( ( ( cursor.position - 1 ) * this.charWidth ) < viewportSizeX )
+        {
+            this.setScrollLeft( currentScrollLeft - this.charWidth );
+        }
     }
 
     cursorToTop( cursor, resetLeft = false ) {
@@ -3600,30 +3621,40 @@ class CodeEditor {
         this.restartBlink();
 
         if( resetLeft )
+        {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+        }
 
-        doAsync(() => {
-            var first_line = ( this.getScrollTop() / this.lineHeight )|0;
-            if( (cursor.line - 1) < first_line )
-                this.setScrollTop( this.getScrollTop() - this.lineHeight );
-        });
+        const currentScrollTop = this.getScrollTop();
+        var firstLine = ( currentScrollTop / this.lineHeight )|0;
+        if( (cursor.line - 1) < firstLine )
+        {
+            this.setScrollTop( currentScrollTop - this.lineHeight );
+        }
     }
 
     cursorToBottom( cursor, resetLeft = false ) {
 
         cursor._top += this.lineHeight;
-        cursor.style.top = "calc(" + cursor._top + "px)";
+        cursor.style.top = `calc(${ cursor._top }px)`;
 
         this.restartBlink();
 
         if( resetLeft )
+        {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT, cursor );
+        }
 
-        doAsync(() => {
-            var last_line = ( ( this.codeScroller.offsetHeight + this.getScrollTop() ) / this.lineHeight )|0;
-            if( cursor.line >= last_line )
-                this.setScrollTop( this.getScrollTop() + this.lineHeight );
-        });
+        const currentScrollTop = this.getScrollTop();
+        const tabsHeight = this.tabs.root.getBoundingClientRect().height;
+        const infoPanelHeight = this.skipInfo ? 0 : this.infoPanel.root.getBoundingClientRect().height;
+        const scrollerHeight = this.codeScroller.offsetHeight;
+
+        var lastLine = ( ( scrollerHeight - tabsHeight - infoPanelHeight + currentScrollTop ) / this.lineHeight )|0;
+        if( cursor.line >= lastLine )
+        {
+            this.setScrollTop( currentScrollTop + this.lineHeight );
+        }
     }
 
     cursorToString( cursor, text, reverse ) {
@@ -3632,7 +3663,9 @@ class CodeEditor {
             return;
 
         for( let char of text )
+        {
             reverse ? this.cursorToLeft( char, cursor ) : this.cursorToRight( char, cursor );
+        }
     }
 
     cursorToPosition( cursor, position ) {
@@ -3756,9 +3789,8 @@ class CodeEditor {
     }
 
     _removeSpaces( cursor ) {
-
-        // Remove indentation
         const lidx = cursor.line;
+        // Remove indentation
         let lineStart = firstNonspaceIndex( this.code.lines[ lidx ] );
 
         // Nothing to remove... we are at the start of the line
@@ -3792,29 +3824,29 @@ class CodeEditor {
     }
 
     getScrollLeft() {
-
         if( !this.codeScroller ) return 0;
         return this.codeScroller.scrollLeft;
     }
 
     getScrollTop() {
-
         if( !this.codeScroller ) return 0;
         return this.codeScroller.scrollTop;
     }
 
     setScrollLeft( value ) {
-
         if( !this.codeScroller ) return;
-        this.codeScroller.scrollLeft = value;
-        this.setScrollBarValue( 'horizontal', 0 );
+        doAsync( () => {
+            this.codeScroller.scrollLeft = value;
+            this.setScrollBarValue( 'horizontal', 0 );
+        }, 20 );
     }
 
     setScrollTop( value ) {
-
         if( !this.codeScroller ) return;
-        this.codeScroller.scrollTop = value;
-        this.setScrollBarValue( 'vertical' );
+        doAsync( () => {
+            this.codeScroller.scrollTop = value;
+            this.setScrollBarValue( 'vertical' );
+        }, 20 );
     }
 
     resize( pMaxLength, onResize ) {
@@ -3824,12 +3856,15 @@ class CodeEditor {
             // Update max viewport
             const maxLineLength = pMaxLength ?? this.getMaxLineLength();
             const scrollWidth = maxLineLength * this.charWidth + CodeEditor.LINE_GUTTER_WIDTH;
+
+            const tabsHeight = this.tabs.root.getBoundingClientRect().height;
+            const infoPanelHeight = this.skipInfo ? 0 : this.infoPanel.root.getBoundingClientRect().height;
             const scrollHeight = this.code.lines.length * this.lineHeight;
 
             this._lastMaxLineLength = maxLineLength;
 
             this.codeSizer.style.minWidth = scrollWidth + "px";
-            this.codeSizer.style.minHeight = scrollHeight + "px";
+            this.codeSizer.style.minHeight = ( scrollHeight + tabsHeight + infoPanelHeight ) + "px";
 
             this.resizeScrollBars();
 

package/build/{components → extensions}/docmaker.js

@@ -190,19 +190,24 @@ function MAKE_CODE( text, language = "js" )
 
 window.MAKE_CODE = MAKE_CODE;
 
-function MAKE_LIST( list, type )
+function MAKE_LIST( list, type, target )
 {
     const validTypes = [ 'bullet', 'numbered' ];
     console.assert( list && list.length > 0 && validTypes.includes(type), "Invalid list type or empty list" + type );
     const typeString = type == 'bullet' ? 'ul' : 'ol';
     let ul = document.createElement( typeString );
+    target = target ?? mainContainer;
+    target.appendChild( ul );
     for( var el of list ) {
+        if( el.constructor === Array ) {
+            MAKE_LIST( el, type, ul );
+            return;
+        }
         let li = document.createElement( 'li' );
         li.className = "leading-loose";
         li.innerHTML = el;
         ul.appendChild( li );
     }
-    mainContainer.appendChild( ul );
 }
 
 function MAKE_BULLET_LIST( list )
@@ -316,7 +321,9 @@ window.INLINE_LINK = INLINE_LINK;
 function INLINE_PAGE( string, page )
 {
     console.assert(string && page);
-    return `<a onclick="loadPage('` + page + `')">` + string + `</a>`;
+    const startPage = page.replace(".html", "");
+    const tabName = window.setPath( startPage );
+    return `<a onclick="loadPage('${ page }', true, '${ tabName }')">${ string }</a>`;
 }
 
 window.INLINE_PAGE = INLINE_PAGE;

package/build/{components → extensions}/imui.js

@@ -4,7 +4,7 @@ if(!LX) {
     throw("lexgui.js missing!");
 }
 
-LX.components.push( 'ImUI' );
+LX.extensions.push( 'ImUI' );
 
 function swapElements (obj, a, b) {
     [obj[a], obj[b]] = [obj[b], obj[a]];
@@ -49,9 +49,9 @@ class ImUI {
         //     },
         // );
 
-        // Widgets
+        // Components
 
-        this.widgets = { };
+        this.components = { };
 
         // Mouse state
 
@@ -157,10 +157,10 @@ class ImUI {
 
         // Store slider value
         
-        if(!this.widgets[ text ])
-            this.widgets[ text ] = { value: value };
+        if(!this.components[ text ])
+            this.components[ text ] = { value: value };
         else
-            value = this.widgets[ text ].value;
+            value = this.components[ text ].value;
 
         // Element properties
 
@@ -196,7 +196,7 @@ class ImUI {
         if(active)
         {
             value = LX.clamp((this.mousePosition.x - min) / (max - min), 0.0, 1.0);
-            this.widgets[ text ].value = value;
+            this.components[ text ].value = value;
         }
         
         let valueSize = new LX.vec2( fullSize.x * value, size.y );
@@ -240,10 +240,14 @@ class ImUI {
 
         // Store slider value
         
-        if(!this.widgets[ text ])
-            this.widgets[ text ] = { value: value };
+        if( !this.components[ text ] )
+        {
+            this.components[ text ] = { value: value };
+        }
         else
-            value = this.widgets[ text ].value;
+        {
+            value = this.components[ text ].value;
+        }
 
         // Element properties
 
@@ -280,8 +284,11 @@ class ImUI {
         if( pressed )
         {
             value = !value;
-            this.widgets[ text ].value = value;
-            if(callback) callback( value );
+            this.components[ text ].value = value;
+            if( callback )
+            {
+                callback( value );
+            }
         }
 
         ctx.fillStyle = value ? (active ? "#ddd" : (hovered ? "#6074e7" : "#3e57e4")) : 

package/build/{components → extensions}/nodegraph.js

@@ -4,7 +4,7 @@ if(!LX) {
     throw("lexgui.js missing!");
 }
 
-LX.components.push( 'GraphEditor' );
+LX.extensions.push( 'GraphEditor' );
 
 class BoundingBox {