lexgui 0.7.4 → 0.7.5

package/build/extensions/codeeditor.js

@@ -338,7 +338,7 @@ class CodeEditor {
 
             let panel = new LX.Panel();
 
-            panel.addTitle( "EXPLORER" );
+            panel.addTitle( options.explorerName ?? "EXPLORER" );
 
             let sceneData = {
                 'id': 'WORKSPACE',
@@ -403,11 +403,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 +1232,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,7 +1258,9 @@ class CodeEditor {
 
         if( options.allowAddScripts ?? true )
         {
-            this.addTab("+", false, "New File");
+            this.onCreateFile = options.onCreateFile;
+
+            this.addTab( "+", false, "Create file" );
         }
 
         if( options.files )
@@ -1828,10 +1831,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 +1884,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 +1936,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 +2169,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 ] );
             }

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 }
@@ -6358,7 +6368,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.5",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1099,6 +1099,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 +1390,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 +1436,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 +1450,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;