lexgui 0.7.4 → 0.7.6

package/build/extensions/codeeditor.js

@@ -319,6 +319,25 @@ class CodeEditor {
 
     constructor( area, options = {} ) {
 
+        if( options.filesAsync )
+        {
+            options.files = [ ...options.filesAsync ];
+
+            return (async () => {
+                await this._init( area, options );
+                // Constructors return `this` implicitly, but this is an IIFE, so
+                // return `this` explicitly (else we'd return an empty object).
+                return this;
+            })();
+        }
+        else
+        {
+            this._init( area, options );
+        }
+    }
+
+    async _init( area, options ) {
+
         window.editor = this;
 
         CodeEditor.__instances.push( this );
@@ -338,7 +357,7 @@ class CodeEditor {
 
             let panel = new LX.Panel();
 
-            panel.addTitle( "EXPLORER" );
+            panel.addTitle( options.explorerName ?? "EXPLORER" );
 
             let sceneData = {
                 'id': 'WORKSPACE',
@@ -403,11 +422,11 @@ class CodeEditor {
 
             if( !this.disableEdition )
             {
-                this.tabs.root.addEventListener( 'dblclick', (e) => {
+                this.tabs.root.parentElement.addEventListener( 'dblclick', (e) => {
                     if( options.allowAddScripts ?? true )
                     {
                         e.preventDefault();
-                        this.addTab( "unnamed.js", true );
+                        this._onCreateNewFile();
                     }
                 } );
             }
@@ -1232,6 +1251,7 @@ class CodeEditor {
                     const s = getComputedStyle( r );
                     this.fontSize = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
                     this.charWidth = this._measureChar( "a", true );
+                    this.processLines();
                 }
 
                 LX.emit( "@font-size", this.fontSize );
@@ -1257,18 +1277,22 @@ class CodeEditor {
 
         if( options.allowAddScripts ?? true )
         {
-            this.addTab("+", false, "New File");
+            this.onCreateFile = options.onCreateFile;
+            this.addTab( "+", false, "Create file" );
         }
 
         if( options.files )
         {
             console.assert( options.files.constructor === Array, "_files_ must be an Array!" );
             const numFiles = options.files.length;
+            const loadAsync = ( options.filesAsync !== undefined );
             let filesLoaded = 0;
-
             for( let url of options.files )
             {
-                this.loadFile( url, { callback: ( name, text ) => {
+                const finalUrl = url.constructor === Array ? url[ 0 ] : url;
+                const finalFileName = url.constructor === Array ? url[ 1 ] : url;
+
+                await this.loadFile( finalUrl, { filename: finalFileName, async: loadAsync, callback: ( name, text ) => {
                     filesLoaded++;
                     if( filesLoaded == numFiles )
                     {
@@ -1276,7 +1300,7 @@ class CodeEditor {
 
                         if( options.onFilesLoaded )
                         {
-                            options.onFilesLoaded( this, numFiles );
+                            options.onFilesLoaded( this.loadedTabs, numFiles );
                         }
                     }
                 }});
@@ -1418,15 +1442,12 @@ class CodeEditor {
         const _innerAddTab = ( text, name, title ) => {
 
             // Remove Carriage Return in some cases and sub tabs using spaces
-            text = text.replaceAll( '\r', '' );
-            text = text.replaceAll( /\t|\\t/g, ' '.repeat( this.tabSpaces ) );
+            text = text.replaceAll( '\r', '' ).replaceAll( /\t|\\t/g, ' '.repeat( this.tabSpaces ) );
 
             // Set current text and language
-
             const lines = text.split( '\n' );
 
             // Add item in the explorer if used
-
             if( this.useFileExplorer || this.skipTabs )
             {
                 this._tabStorage[ name ] = {
@@ -1462,13 +1483,20 @@ class CodeEditor {
 
         if( file.constructor == String )
         {
-            let filename = file;
-
-            LX.request({ url: filename, success: text => {
-                const name = filename.substring(filename.lastIndexOf( '/' ) + 1);
-                _innerAddTab( text, name, filename );
-            } });
+            const filename = file;
+            const name = options.filename ?? filename.substring(filename.lastIndexOf( '/' ) + 1);
 
+            if( options.async ?? false )
+            {
+                const text = await this._requestFileAsync( filename, "text" );
+                _innerAddTab( text, name, options.filename ?? filename );
+            }
+            else
+            {
+                LX.request({ url: filename, success: text => {
+                    _innerAddTab( text, name, options.filename ?? filename );
+                } });
+            }
         }
         else // File Blob
         {
@@ -1828,10 +1856,23 @@ class CodeEditor {
 
         this.processFocus( false );
 
-        LX.addContextMenu( null, e, m => {
-            m.add( "Create", this.addTab.bind( this, "unnamed.js", true, "", { language: "JavaScript" } ) );
-            m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
-        });
+        new LX.DropdownMenu( e.target, [
+            { name: "Create file", icon: "FilePlus", callback: this._onCreateNewFile.bind( this ) },
+            { name: "Load file", icon: "FileUp", callback: this.loadTabFromFile.bind( this ) },
+        ], { side: "bottom", align: "start" });
+    }
+
+    _onCreateNewFile() {
+
+        let options = {};
+
+        if( this.onCreateFile )
+        {
+            options = this.onCreateFile( this );
+        }
+
+        const name = options.name ?? "unnamed.js";
+        this.addTab( name, true, name, { language: options.language ?? "JavaScript" } );
     }
 
     _onSelectTab( isNewTabButton, event, name ) {
@@ -1868,18 +1909,38 @@ class CodeEditor {
         {
             this._changeLanguageFromExtension( LX.getExtension( name ) );
         }
+
+        this.processLines();
     }
 
     _onContextMenuTab( isNewTabButton, event, name,  ) {
 
         if( isNewTabButton )
+        {
             return;
+        }
 
-        LX.addContextMenu( null, event, m => {
-            m.add( "Close", () => { this.tabs.delete( name ) } );
-            // m.add( "" );
-            // m.add( "Rename", () => { console.warn( "TODO" )} );
-        });
+        new LX.DropdownMenu( event.target, [
+            { name: "Close", kbd: "MWB", callback: () => { this.tabs.delete( name ) } },
+            { name: "Close Others", callback: () => {
+                for( const [ key, data ] of Object.entries( this.tabs.tabs ) )
+                {
+                    if( key === '+' || key === name ) continue;
+                    this.tabs.delete( key )
+                }
+            } },
+            { name: "Close All", callback: () => {
+                for( const [ key, data ] of Object.entries( this.tabs.tabs ) )
+                {
+                    if( key === '+' ) continue;
+                    this.tabs.delete( key )
+                }
+            } },
+            null,
+            { name: "Copy Path", icon: "Copy", callback: () => {
+                navigator.clipboard.writeText( this.openedTabs[ name ].path ?? "" );
+            } }
+        ], { side: "bottom", align: "start", event });
     }
 
     addTab( name, selected, title, options = {} ) {
@@ -1900,6 +1961,7 @@ class CodeEditor {
         // Create code content
         let code = document.createElement( 'div' );
         Object.assign( code, {
+            path: options.path ?? "",
             className: 'code',
             lines: [ "" ],
             language: options.language ?? "Plain Text",
@@ -2132,7 +2194,7 @@ class CodeEditor {
         document.body.appendChild( input );
         input.click();
         input.addEventListener('change', e => {
-            if (e.target.files[ 0 ])
+            if( e.target.files[ 0 ] )
             {
                 this.loadFile( e.target.files[ 0 ] );
             }
@@ -5565,6 +5627,36 @@ s
         delete this._lastResult;
         delete this._scopeStack;
     }
+
+    async _requestFileAsync( url, dataType, nocache ) {
+        return new Promise( (resolve, reject) => {
+            dataType = dataType ?? "arraybuffer";
+            const mimeType = dataType === "arraybuffer" ? "application/octet-stream" : undefined;
+            var xhr = new XMLHttpRequest();
+            xhr.open( 'GET', url, true );
+            xhr.responseType = dataType;
+            if( mimeType )
+                xhr.overrideMimeType( mimeType );
+            if( nocache )
+                xhr.setRequestHeader('Cache-Control', 'no-cache');
+            xhr.onload = function(load)
+            {
+                var response = this.response;
+                if( this.status != 200)
+                {
+                    var err = "Error " + this.status;
+                    reject(err);
+                    return;
+                }
+                resolve( response );
+            };
+            xhr.onerror = function(err) {
+                reject(err);
+            };
+            xhr.send();
+            return xhr;
+        });
+    }
 }
 
 CodeEditor.languages = {

package/build/extensions/videoeditor.js

@@ -530,7 +530,10 @@ class VideoEditor {
                     this.isResizing = true;
                 }
             });
-        });        
+        });
+        
+        this.onChangeStart = null;
+        this.onChangeEnd = null;
     }
 
     resizeCropArea(event) {
@@ -714,6 +717,10 @@ class VideoEditor {
         if(this.onSetTime) {
             this.onSetTime(t);
         }
+        
+        if(this.onChangeStart) {
+            this.onChangeStart(t);
+        }
     }
 
     _setEndValue ( x ) {
@@ -733,6 +740,10 @@ class VideoEditor {
         if(this.onSetTime) {
             this.onSetTime(t);
         }
+
+        if(this.onChangeEnd) {
+            this.onChangeEnd(t);
+        }
     }
 
     getStartTime ( ) {

package/build/lexgui.css

@@ -4933,33 +4933,37 @@ ul.lexassetscontent {
 .codebasearea .lexareatabs {
     padding: 0px;
     margin: 0px;
+    gap: 0;
+    background-color: var(--global-color-primary);
 }
 
 .codebasearea .lexareatab {
     padding: 5px;
     border-radius: 0px !important;
     margin: 0px !important;
-    border: 1px solid #91909036;
-    border-right: none;
-    border-bottom: none;
-    background-color: var(--global-color-primary) !important;
+    border: none;
+    background-color: var(--global-color-secondary) !important;
+    border-bottom: 1px solid transparent;
     transition: none;
     display: flex !important;
 }
 
 .codebasearea .lexareatab:hover {
-    background-color: var(--global-color-secondary) !important;
+    background-color: var(--global-color-tertiary) !important;
+}
+
+.codebasearea .lexareatab:first-child {
+    border-top-left-radius: 8px !important;
 }
 
 .codebasearea .lexareatab:last-child {
-    border-right: 1px solid #91909036;
+    border-top-right-radius: 8px !important;
 }
 
 .codebasearea .lexareatab.selected {
-    background-color: var(--global-color-secondary) !important;
-    color: var(--global-text-secondary) !important;
-    border-top: 1px solid var(--global-color-accent);
-    border-bottom: none;
+    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background)) !important;
+    border-bottom: 1px solid var(--global-color-accent);
+    color: var(--global-text-primary) !important;
 }
 
 .codebasearea .lexareatab i {
@@ -6105,6 +6109,10 @@ ul.lexassetscontent {
 .items-center { place-items: center }
 .items-end { place-items: end }
 
+.align-items-start { align-items: start }
+.align-items-center { align-items: center }
+.align-items-end { align-items: end }
+
 .justify-start { justify-content: start }
 .justify-center { justify-content: center }
 .justify-end { justify-content: end }
@@ -6316,6 +6324,8 @@ ul.lexassetscontent {
 .font-bold { font-weight: 700 }
 .font-extrabold { font-weight: 800 }
 
+.font-code { font-family: var(--global-code-font) }
+
 .tracking-tighter { letter-spacing: -0.05em }
 .tracking-tight { letter-spacing: -0.025em }
 .tracking-normal { letter-spacing: 0em }
@@ -6327,7 +6337,11 @@ ul.lexassetscontent {
 
 .uppercase { text-transform: uppercase }
 .capitalize { text-transform: capitalize }
+
 .decoration-none { text-decoration: none }
+.text-underline { text-decoration: underline }
+
+.hover\:text-underline:hover { text-decoration: underline }
 
 /* Width / Height */
 
@@ -6358,7 +6372,6 @@ ul.lexassetscontent {
 .w-16 { width: 4rem }     /* 64px */
 .w-32 { width: 8rem }     /* 128px */
 
-
 .h-full { height: 100% }
 .h-screen { height: 100vh }
 .h-auto { height: auto }

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.7.4",
+    version: "0.7.6",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -543,16 +543,30 @@ async function init( options = { } )
         this.main_area = new LX.Area( { id: options.id ?? 'mainarea' } );
     }
 
-    if( ( options.autoTheme ?? true ) )
+    // Initial or automatic changes don't force color scheme
+    // to be stored in localStorage
+
+    this._onChangeSystemTheme = function( event ) {
+        const storedcolorScheme = localStorage.getItem( "lxColorScheme" );
+        if( storedcolorScheme ) return;
+        LX.setTheme( event.matches ? "dark" : "light", false );
+    };
+
+    this._mqlPrefersDarkScheme = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+
+    const storedcolorScheme = localStorage.getItem( "lxColorScheme" );
+    if( storedcolorScheme )
     {
-        if( window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+        LX.setTheme( storedcolorScheme );
+    }
+    else if( this._mqlPrefersDarkScheme && ( options.autoTheme ?? true ) )
+    {
+        if( window.matchMedia( "(prefers-color-scheme: light)" ).matches )
         {
-            LX.setTheme( "light" );
+            LX.setTheme( "light", false );
         }
 
-        window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
-            LX.setTheme( event.matches ? "dark" : "light" );
-        });
+        this._mqlPrefersDarkScheme.addEventListener( "change", this._onChangeSystemTheme );
     }
 
     return this.main_area;
@@ -1099,6 +1113,7 @@ class DropdownMenu {
         this.alignOffset = options.alignOffset ?? 0;
         this.avoidCollisions = options.avoidCollisions ?? true;
         this.onBlur = options.onBlur;
+        this.event = options.event;
         this.inPlace = false;
 
         this.root = document.createElement( "div" );
@@ -1389,11 +1404,11 @@ class DropdownMenu {
     _adjustPosition() {
 
         const position = [ 0, 0 ];
+        const rect = this._trigger.getBoundingClientRect();
 
         // Place menu using trigger position and user options
+        if( !this.event )
         {
-            const rect = this._trigger.getBoundingClientRect();
-
             let alignWidth = true;
 
             switch( this.side )
@@ -1435,11 +1450,11 @@ class DropdownMenu {
             if( alignWidth ) { position[ 0 ] += this.alignOffset; }
             else { position[ 1 ] += this.alignOffset; }
         }
-
-        if( this.avoidCollisions )
+        // Offset position based on event
+        else
         {
-            position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - this.root.offsetWidth - this._windowPadding );
-            position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
+            position[ 0 ] = this.event.x;
+            position[ 1 ] = this.event.y;
         }
 
         if( this._parent instanceof HTMLDialogElement )
@@ -1449,6 +1464,12 @@ class DropdownMenu {
             position[ 1 ] -= parentRect.y;
         }
 
+        if( this.avoidCollisions )
+        {
+            position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - this.root.offsetWidth - this._windowPadding );
+            position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
+        }
+
         this.root.style.left = `${ position[ 0 ] }px`;
         this.root.style.top = `${ position[ 1 ] }px`;
         this.inPlace = true;
@@ -2545,8 +2566,9 @@ class Tabs {
         });
 
         // Attach content
-        tabEl.childIndex = ( this.root.childElementCount - 1 );
-        this.root.appendChild( tabEl );
+        const indexOffset = options.indexOffset ?? -1;
+        tabEl.childIndex = ( this.root.childElementCount + indexOffset );
+        this.root.insertChildAtIndex( tabEl, tabEl.childIndex + 1 );
         this.area.attach( contentEl );
         this.tabDOMs[ name ] = tabEl;
         this.tabs[ name ] = content;
@@ -4971,11 +4993,13 @@ LX.deepCopy = deepCopy;
  * @method setTheme
  * @description Set dark or light theme
  * @param {String} colorScheme Name of the scheme
+ * @param {Boolean} storeLocal Store in localStorage
  */
-function setTheme( colorScheme )
+function setTheme( colorScheme, storeLocal = true )
 {
     colorScheme = ( colorScheme == "light" ) ? "light" : "dark";
     document.documentElement.setAttribute( "data-theme", colorScheme );
+    if( storeLocal ) localStorage.setItem( "lxColorScheme", colorScheme );
     LX.emit( "@on_new_color_scheme", colorScheme );
 }
 
@@ -5004,6 +5028,26 @@ function switchTheme()
 
 LX.switchTheme = switchTheme;
 
+/**
+ * @method setSystemTheme
+ * @description Sets back the system theme
+ */
+function setSystemTheme()
+{
+    const currentTheme = ( window.matchMedia && window.matchMedia( "(prefers-color-scheme: light)" ).matches ) ? "light" : "dark";
+    setTheme( currentTheme );
+    localStorage.removeItem( "lxColorScheme" );
+
+    // Reapply listener
+    if( this._mqlPrefersDarkScheme )
+    {
+        this._mqlPrefersDarkScheme.removeEventListener( "change", this._onChangeSystemTheme );
+        this._mqlPrefersDarkScheme.addEventListener( "change", this._onChangeSystemTheme );
+    }
+}
+
+LX.setSystemTheme = setSystemTheme;
+
 /**
  * @method setThemeColor
  * @description Sets a new value for one of the main theme variables
@@ -8986,7 +9030,7 @@ class TextInput extends BaseComponent {
 
         this.valid = ( v ) => {
             v = v ?? this.value();
-            if( !v.length || wValue.pattern == "" ) return true;
+            if( ( wValue.pattern ?? "" ) == "" ) return true;
             const regexp = new RegExp( wValue.pattern );
             return regexp.test( v );
         };
@@ -9725,19 +9769,21 @@ class Form extends BaseComponent {
 
         const primaryButton = new LX.Button( null, options.primaryActionName ?? "Submit", ( value, event ) => {
 
+            const errors = [];
+
             for( let entry in data )
             {
                 let entryData = data[ entry ];
 
                 if( !entryData.textComponent.valid() )
                 {
-                    return;
+                    errors.push( { type: "input_not_valid", entry } );
                 }
             }
 
             if( callback )
             {
-                callback( container.formData, event );
+                callback( container.formData, errors, event );
             }
         }, { width: "100%", minWidth: "0", buttonClass: options.primaryButtonClass ?? "contrast" } );
 
@@ -15942,8 +15988,7 @@ class Sidebar {
                     return;
                 }
 
-                const f = options.callback;
-                if( f ) f.call( this, key, item.value, e );
+                let value = undefined;
 
                 if( isCollapsable )
                 {
@@ -15953,14 +15998,18 @@ class Sidebar {
                 {
                     item.value = !item.value;
                     item.checkbox.set( item.value, true );
+                    value = item.value;
                 }
-
-                if( options.swap && !( e.target instanceof HTMLInputElement ) )
+                else if( options.swap && !( e.target instanceof HTMLInputElement ) )
                 {
                     const swapInput = itemDom.querySelector( "input" );
                     swapInput.checked = !swapInput.checked;
+                    value = swapInput.checked;
                 }
 
+                const f = options.callback;
+                if( f ) f.call( this, key, value ?? entry, e );
+
                 // Manage selected
                 if( this.displaySelected && !options.skipSelection )
                 {