lexgui 0.7.9 → 0.7.11

package/build/lexgui.module.js

@@ -7,7 +7,7 @@
 */
 
 const LX = {
-    version: "0.7.9",
+    version: "0.7.11",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -647,10 +647,11 @@ class TreeEvent {
     static NODE_VISIBILITY      = 7;
     static NODE_CARETCHANGED    = 8;
 
-    constructor( type, node, value ) {
+    constructor( type, node, value, event ) {
         this.type = type || TreeEvent.NONE;
         this.node = node;
         this.value = value;
+        this.event = event;
         this.multiple = false; // Multiple selection
         this.panel = null;
     }
@@ -2577,9 +2578,11 @@ class Tabs {
 
             if( isSelected && this.thumb )
             {
+                this.thumb.classList.add( "no-transition" );
                 this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
                 this.thumb.style.width = ( tabEl.offsetWidth ) + "px";
                 this.thumb.item = tabEl;
+                this.thumb.classList.remove( "no-transition" );
             }
 
         }, 10 );
@@ -5535,47 +5538,49 @@ function makeCodeSnippet( code, size, options = { } )
         disableEdition: true,
         allowAddScripts: false,
         name: options.tabName,
-        // showTab: options.showTab ?? true
-    } );
-    editor.setText( code, options.language ?? "Plain Text" );
-
-    if( options.linesAdded )
-    {
-        const code = editor.root.querySelector( ".code" );
-        for( let l of options.linesAdded )
+        callback: () =>
         {
-            if( l.constructor == Number )
-            {
-                code.childNodes[ l - 1 ].classList.add( "added" );
-            }
-            else if( l.constructor == Array ) // It's a range
+            if( options.linesAdded )
             {
-                for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                const code = editor.root.querySelector( ".code" );
+                for( let l of options.linesAdded )
                 {
-                    code.childNodes[ i ].classList.add( "added" );
+                    if( l.constructor == Number )
+                    {
+                        code.childNodes[ l - 1 ].classList.add( "added" );
+                    }
+                    else if( l.constructor == Array ) // It's a range
+                    {
+                        for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                        {
+                            code.childNodes[ i ].classList.add( "added" );
+                        }
+                    }
                 }
             }
-        }
-    }
 
-    if( options.linesRemoved )
-    {
-        const code = editor.root.querySelector( ".code" );
-        for( let l of options.linesRemoved )
-        {
-            if( l.constructor == Number )
-            {
-                code.childNodes[ l - 1 ].classList.add( "removed" );
-            }
-            else if( l.constructor == Array ) // It's a range
+            if( options.linesRemoved )
             {
-                for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                const code = editor.root.querySelector( ".code" );
+                for( let l of options.linesRemoved )
                 {
-                    code.childNodes[ i ].classList.add( "removed" );
+                    if( l.constructor == Number )
+                    {
+                        code.childNodes[ l - 1 ].classList.add( "removed" );
+                    }
+                    else if( l.constructor == Array ) // It's a range
+                    {
+                        for( let i = ( l[ 0 ] - 1 ); i <= ( l[ 1 ] - 1 ); i++ )
+                        {
+                            code.childNodes[ i ].classList.add( "removed" );
+                        }
+                    }
                 }
             }
         }
-    }
+    } );
+
+    editor.setText( code, options.language ?? "Plain Text" );
 
     if( options.windowMode )
     {
@@ -5600,6 +5605,7 @@ function makeCodeSnippet( code, size, options = { } )
     }
 
     snippet.appendChild( area.root );
+
     return snippet;
 }
 
@@ -7532,21 +7538,25 @@ class Area {
         let [ area1, area2 ] = this.sections;
         this.splitExtended = true;
 
+        area1.root.classList.add( `maximize-${ this.type }` );
+        area2.root.classList.add( `minimize-${ this.type }` );
+        area2.root.classList.add( `fadeout-${ this.type }` );
+        area2.root.classList.remove( `fadein-${ this.type }` );
+
         if( this.type == "vertical" )
         {
             this.offset = area2.root.offsetHeight;
-            area2.root.classList.add("fadeout-vertical");
             this._moveSplit( -Infinity, true );
-
         }
         else
         {
             this.offset = area2.root.offsetWidth - 8; // Force some height here...
-            area2.root.classList.add("fadeout-horizontal");
             this._moveSplit( -Infinity, true, 8 );
         }
 
-        LX.doAsync( () => this.propagateEvent('onresize'), 150 );
+        LX.doAsync( () => {
+            this.propagateEvent( 'onresize' );
+        }, 100 );
     }
 
     /**
@@ -7556,23 +7566,24 @@ class Area {
     reduce() {
 
         if( !this.splitExtended )
-        return;
+        {
+            return;
+        }
 
         this.splitExtended = false;
-        let [area1, area2] = this.sections;
 
-        if( this.type == "vertical")
-        {
-            area2.root.classList.add("fadein-vertical");
-            this._moveSplit(this.offset);
-        }
-        else
-        {
-            area2.root.classList.add("fadein-horizontal");
-            this._moveSplit(this.offset);
-        }
+        let [ area1, area2 ] = this.sections;
 
-        LX.doAsync( () => this.propagateEvent('onresize'), 150 );
+        area1.root.classList.add( `minimize-${ this.type }` );
+        area2.root.classList.add( `maximize-${ this.type }` );
+        area2.root.classList.add( `fadein-${ this.type }` );
+        area2.root.classList.remove( `fadeout-${ this.type }` );
+
+        this._moveSplit( this.offset );
+
+        LX.doAsync( () => {
+            this.propagateEvent( 'onresize' );
+        }, 100 );
     }
 
     /**
@@ -7935,8 +7946,8 @@ class BaseComponent {
         BaseComponent.PROGRESS
     ];
 
-    constructor( type, name, value, options = {} ) {
-
+    constructor( type, name, value, options = {} )
+    {
         this.type = type;
         this.name = name;
         this.options = options;
@@ -8034,13 +8045,14 @@ class BaseComponent {
         this.options = options;
     }
 
-    static _dispatchEvent( element, type, data, bubbles, cancelable ) {
+    static _dispatchEvent( element, type, data, bubbles, cancelable )
+    {
         let event = new CustomEvent( type, { 'detail': data, 'bubbles': bubbles, 'cancelable': cancelable } );
         element.dispatchEvent( event );
     }
 
-    _addResetProperty( container, callback ) {
-
+    _addResetProperty( container, callback )
+    {
         const domEl = LX.makeIcon( "Undo2", { iconClass: "ml-0 mr-1 px-1", title: "Reset" } );
         domEl.style.display = "none";
         domEl.addEventListener( "click", callback );
@@ -8048,7 +8060,8 @@ class BaseComponent {
         return domEl;
     }
 
-    _canPaste() {
+    _canPaste()
+    {
         let pasteAllowed = this.type === BaseComponent.CUSTOM ?
             ( navigator.clipboard.customIdx !== undefined && this.customIdx == navigator.clipboard.customIdx ) : navigator.clipboard.type === this.type;
 
@@ -8062,8 +8075,8 @@ class BaseComponent {
         return pasteAllowed;
     }
 
-    _trigger( event, callback, scope = this ) {
-
+    _trigger( event, callback, scope = this )
+    {
         if( !callback )
         {
             return;
@@ -8072,8 +8085,8 @@ class BaseComponent {
         callback.call( scope, event.value, event.domEvent, event.name );
     }
 
-    value() {
-
+    value()
+    {
         if( this.onGetValue )
         {
             return this.onGetValue();
@@ -8082,8 +8095,8 @@ class BaseComponent {
         console.warn( "Can't get value of " + this.typeName() );
     }
 
-    set( value, skipCallback, event ) {
-
+    set( value, skipCallback, event )
+    {
         if( this.onSetValue )
         {
             let resetButton = this.root.querySelector( ".lexcomponentname .lexicon" );
@@ -8091,12 +8104,13 @@ class BaseComponent {
             {
                 resetButton.style.display = ( value != this.value() ? "block" : "none" );
 
-                const equalInitial = value.constructor === Array ? (function arraysEqual(a, b) {
-                    if (a === b) return true;
-                    if (a == null || b == null) return false;
-                    if (a.length !== b.length) return false;
-                    for (var i = 0; i < a.length; ++i) {
-                        if (a[ i ] !== b[ i ]) return false;
+                const equalInitial = value.constructor === Array ? (function arraysEqual( a, b ) {
+                    if( a === b ) return true;
+                    if( a == null || b == null ) return false;
+                    if( a.length !== b.length ) return false;
+                    for( var i = 0; i < a.length; ++i )
+                    {
+                        if( a[ i ] !== b[ i ] ) return false;
                     }
                     return true;
                 })( value, this._initialValue ) : ( value == this._initialValue );
@@ -8107,11 +8121,11 @@ class BaseComponent {
             return this.onSetValue( value, skipCallback ?? false, event );
         }
 
-        console.warn("Can't set value of " + this.typeName());
+        console.warn( `Can't set value of ${ this.typeName() }`);
     }
 
-    oncontextmenu( e ) {
-
+    oncontextmenu( e )
+    {
         if( BaseComponent.NO_CONTEXT_TYPES.includes( this.type ) )
         {
             return;
@@ -8123,14 +8137,16 @@ class BaseComponent {
         });
     }
 
-    copy() {
+    copy()
+    {
         navigator.clipboard.type = this.type;
         navigator.clipboard.customIdx = this.customIdx;
         navigator.clipboard.data = this.value();
         navigator.clipboard.writeText( navigator.clipboard.data );
     }
 
-    paste() {
+    paste()
+    {
         if( !this._canPaste() )
         {
             return;
@@ -8139,8 +8155,8 @@ class BaseComponent {
         this.set( navigator.clipboard.data );
     }
 
-    typeName() {
-
+    typeName()
+    {
         switch( this.type )
         {
             case BaseComponent.TEXT: return "Text";
@@ -8192,8 +8208,8 @@ function ADD_CUSTOM_COMPONENT( customComponentName, options = {} )
 {
     let customIdx = LX.guidGenerator();
 
-    LX.Panel.prototype[ 'add' + customComponentName ] = function( name, instance, callback ) {
-
+    LX.Panel.prototype[ 'add' + customComponentName ] = function( name, instance, callback )
+    {
         const userParams = Array.from( arguments ).slice( 3 );
 
         let component = new BaseComponent( BaseComponent.CUSTOM, name, null, options );
@@ -8379,8 +8395,8 @@ LX.ADD_CUSTOM_COMPONENT = ADD_CUSTOM_COMPONENT;
 
 class NodeTree {
 
-    constructor( domEl, data, options ) {
-
+    constructor( domEl, data, options )
+    {
         this.domEl = domEl;
         this.data = data;
         this.onevent = options.onevent;
@@ -8402,8 +8418,8 @@ class NodeTree {
         }
     }
 
-    _createItem( parent, node, level = 0, selectedId ) {
-
+    _createItem( parent, node, level = 0, selectedId )
+    {
         const that = this;
         const nodeFilterInput = this.domEl.querySelector( ".lexnodetreefilter" );
 
@@ -8429,7 +8445,7 @@ class NodeTree {
         if( this.options.onlyFolders )
         {
             let hasFolders = false;
-            node.children.forEach( c => hasFolders |= (c.type == 'folder') );
+            node.children.forEach( c => hasFolders |= ( c.type == 'folder' ) );
             isParent = !!hasFolders;
         }
 
@@ -8509,7 +8525,7 @@ class NodeTree {
                 node.closed = false;
                 if( that.onevent )
                 {
-                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_CARETCHANGED, node, node.closed );
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_CARETCHANGED, node, node.closed, e );
                     that.onevent( event );
                 }
                 that.frefresh( node.id );
@@ -8517,13 +8533,13 @@ class NodeTree {
 
             if( that.onevent )
             {
-                const event = new LX.TreeEvent(LX.TreeEvent.NODE_SELECTED, e.shiftKey ? this.selected : node );
+                const event = new LX.TreeEvent( LX.TreeEvent.NODE_SELECTED, node, this.selected, e );
                 event.multiple = e.shiftKey;
                 that.onevent( event );
             }
         });
 
-        item.addEventListener("dblclick", function() {
+        item.addEventListener("dblclick", function(e) {
 
             if( that.options.rename ?? true )
             {
@@ -8534,7 +8550,7 @@ class NodeTree {
 
             if( that.onevent )
             {
-                const event = new LX.TreeEvent( LX.TreeEvent.NODE_DBLCLICKED, node );
+                const event = new LX.TreeEvent( LX.TreeEvent.NODE_DBLCLICKED, node, null, e );
                 that.onevent( event );
             }
         });
@@ -8548,10 +8564,10 @@ class NodeTree {
                 return;
             }
 
-            const event = new LX.TreeEvent(LX.TreeEvent.NODE_CONTEXTMENU, this.selected.length > 1 ? this.selected : node, e);
+            const event = new LX.TreeEvent( LX.TreeEvent.NODE_CONTEXTMENU, node, this.selected, e );
             event.multiple = this.selected.length > 1;
 
-            LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+            LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.event, m => {
                 event.panel = m;
             });
 
@@ -8600,7 +8616,7 @@ class NodeTree {
 
                     if( ok && that.onevent )
                     {
-                        const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, node, e );
+                        const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, node, [ node ], null );
                         that.onevent( event );
                     }
 
@@ -8633,7 +8649,7 @@ class NodeTree {
                 // Send event now so we have the info in selected array..
                 if( nodesDeleted.length && that.onevent )
                 {
-                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, nodesDeleted.length > 1 ? nodesDeleted : node, e );
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_DELETED, node, nodesDeleted, e );
                     event.multiple = nodesDeleted.length > 1;
                     that.onevent( event );
                 }
@@ -8675,7 +8691,7 @@ class NodeTree {
 
                 if( that.onevent )
                 {
-                    const event = new LX.TreeEvent(LX.TreeEvent.NODE_RENAMED, node, this.value);
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_RENAMED, node, this.value, e );
                     that.onevent( event );
                 }
 
@@ -8749,7 +8765,7 @@ class NodeTree {
                 // Trigger node dragger event
                 if( that.onevent )
                 {
-                    const event = new LX.TreeEvent(LX.TreeEvent.NODE_DRAGGED, dragged, target);
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_DRAGGED, dragged, target, e );
                     that.onevent( event );
                 }
 
@@ -8790,7 +8806,7 @@ class NodeTree {
 
                 if( that.onevent )
                 {
-                    const event = new LX.TreeEvent(LX.TreeEvent.NODE_CARETCHANGED, node, node.closed);
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_CARETCHANGED, node, node.closed, e );
                     that.onevent( event );
                 }
                 that.frefresh( node.id );
@@ -8807,28 +8823,34 @@ class NodeTree {
             for( let i = 0; i < node.actions.length; ++i )
             {
                 const action = node.actions[ i ];
-                const actionIcon = LX.makeIcon( action.icon, { title: action.name } );
-                actionIcon.addEventListener("click", function( e ) {
+                const actionBtn = new LX.Button( null, "", ( swapValue, event ) => {
+                    event.stopPropagation();
                     if( action.callback )
                     {
-                        action.callback( node, actionIcon );
-                        e.stopPropagation();
+                        action.callback( node, swapValue, event );
                     }
-                });
+                }, { icon: action.icon, swap: action.swap, title: action.name, hideName:true, className: "p-0 m-0", buttonClass: "p-0 m-0 bg-none" } );
+                actionBtn.root.style.minWidth = "fit-content";
+                actionBtn.root.style.margin = "0"; // adding classes does not work
+                actionBtn.root.style.padding = "0"; // adding classes does not work
+                const _btn = actionBtn.root.querySelector("button");
+                _btn.style.minWidth = "fit-content";
+                _btn.style.margin = "0"; // adding classes does not work
+                _btn.style.padding = "0"; // adding classes does not work
 
-                inputContainer.appendChild( actionIcon );
+                inputContainer.appendChild( actionBtn.root );
             }
         }
 
         if( !node.skipVisibility ?? false )
         {
-            const visibilityBtn = new LX.Button( null, "", ( swapValue, event ) => {
-                event.stopPropagation();
+            const visibilityBtn = new LX.Button( null, "", ( swapValue, e ) => {
+                e.stopPropagation();
                 node.visible = node.visible === undefined ? false : !node.visible;
                 // Trigger visibility event
                 if( that.onevent )
                 {
-                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_VISIBILITY, node, node.visible );
+                    const event = new LX.TreeEvent( LX.TreeEvent.NODE_VISIBILITY, node, node.visible, e );
                     that.onevent( event );
                 }
             }, { icon: node.visible ? "Eye" : "EyeOff", swap: node.visible ? "EyeOff" : "Eye", title: "Toggle visible", className: "p-0 m-0", buttonClass: "bg-none" } );
@@ -8884,22 +8906,35 @@ class NodeTree {
     }
 
     /* Refreshes the tree and focuses current element */
-    frefresh( id ) {
-
+    frefresh( id )
+    {
         this.refresh();
-        var el = this.domEl.querySelector( "#" + id );
+        var el = this.domEl.querySelector( `#${ id }` );
         if( el )
         {
             el.focus();
         }
     }
 
-    select( id ) {
+    select( id )
+    {
+        const nodeFilter = this.domEl.querySelector( ".lexnodetreefilter" );
+        if( nodeFilter )
+        {
+            nodeFilter.value = "";
+        }
 
         this.refresh( null, id );
 
         this.domEl.querySelectorAll( ".selected" ).forEach( i => i.classList.remove( "selected" ) );
 
+        // Unselect
+        if( !id )
+        {
+            this.selected.length = 0;
+            return;
+        }
+
         // Element should exist, since tree was refreshed to show it
         const el = this.domEl.querySelector( "#" + id );
         console.assert(  el, "NodeTree: Can't select node " + id );
@@ -8909,8 +8944,8 @@ class NodeTree {
         el.focus();
     }
 
-    deleteNode( node ) {
-
+    deleteNode( node )
+    {
         const dataAsArray = ( this.data.constructor === Array );
 
         // Can be either Array or Object type data
@@ -8946,10 +8981,10 @@ LX.NodeTree = NodeTree;
  * @description Blank Component
  */
 
-class Blank extends BaseComponent {
-
-    constructor( width, height ) {
-
+class Blank extends BaseComponent
+{
+    constructor( width, height )
+    {
         super( BaseComponent.BLANK );
 
         this.root.style.width = width ?? "auto";
@@ -8964,10 +8999,10 @@ LX.Blank = Blank;
  * @description Title Component
  */
 
-class Title extends BaseComponent {
-
-    constructor( name, options = {} ) {
-
+class Title extends BaseComponent
+{
+    constructor( name, options = {} )
+    {
         console.assert( name, "Can't create Title Component without text!" );
 
         // Note: Titles are not registered in Panel.components by now
@@ -9008,10 +9043,10 @@ LX.Title = Title;
  * @description TextInput Component
  */
 
-class TextInput extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class TextInput extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.TEXT, name, String( value ), options );
 
         this.onGetValue = () => {
@@ -9098,7 +9133,7 @@ class TextInput extends BaseComponent {
                 });
             }
 
-            wValue.addEventListener( "mousedown", function( e ){
+            wValue.addEventListener( "mousedown", function( e ) {
                 e.stopImmediatePropagation();
                 e.stopPropagation();
             });
@@ -9148,10 +9183,10 @@ LX.TextInput = TextInput;
  * @description TextArea Component
  */
 
-class TextArea extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class TextArea extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.TEXTAREA, name, value, options );
 
         this.onGetValue = () => {
@@ -9249,10 +9284,10 @@ LX.TextArea = TextArea;
  * @description Button Component
  */
 
-class Button extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Button extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.BUTTON, name, null, options );
 
         this.onGetValue = () => {
@@ -9471,10 +9506,10 @@ LX.Button = Button;
  * @description ComboButtons Component
  */
 
-class ComboButtons extends BaseComponent {
-
-    constructor( name, values, options = {} ) {
-
+class ComboButtons extends BaseComponent
+{
+    constructor( name, values, options = {} )
+    {
         const shouldSelect = !( options.noSelection ?? false );
         let shouldToggle = shouldSelect && ( options.toggle ?? false );
 
@@ -9632,10 +9667,10 @@ LX.ComboButtons = ComboButtons;
  * @description Card Component
  */
 
-class Card extends BaseComponent {
-
-    constructor( name, options = {} ) {
-
+class Card extends BaseComponent
+{
+    constructor( name, options = {} )
+    {
         options.hideName = true;
 
         super( BaseComponent.CARD, name, null, options );
@@ -9695,10 +9730,10 @@ LX.Card = Card;
  * @description Form Component
  */
 
-class Form extends BaseComponent {
-
-    constructor( name, data, callback, options = {} ) {
-
+class Form extends BaseComponent
+{
+    constructor( name, data, callback, options = {} )
+    {
         if( data.constructor != Object )
         {
             console.error( "Form data must be an Object" );
@@ -9810,10 +9845,10 @@ LX.Form = Form;
  * @description Select Component
  */
 
-class Select extends BaseComponent {
-
-    constructor( name, values, value, callback, options = {} ) {
-
+class Select extends BaseComponent
+{
+    constructor( name, values, value, callback, options = {} )
+    {
         super( BaseComponent.SELECT, name, value, options );
 
         this.onGetValue = () => {
@@ -10222,10 +10257,10 @@ LX.Select = Select;
  * @description Curve Component
  */
 
-class Curve extends BaseComponent {
-
-    constructor( name, values, callback, options = {} ) {
-
+class Curve extends BaseComponent
+{
+    constructor( name, values, callback, options = {} )
+    {
         let defaultValues = JSON.parse( JSON.stringify( values ) );
 
         super( BaseComponent.CURVE, name, defaultValues, options );
@@ -10283,10 +10318,10 @@ LX.Curve = Curve;
  * @description Dial Component
  */
 
-class Dial extends BaseComponent {
-
-    constructor( name, values, callback, options = {} ) {
-
+class Dial extends BaseComponent
+{
+    constructor( name, values, callback, options = {} )
+    {
         let defaultValues = JSON.parse( JSON.stringify( values ) );
 
         super( BaseComponent.DIAL, name, defaultValues, options );
@@ -10340,10 +10375,10 @@ LX.Dial = Dial;
  * @description Layers Component
  */
 
-class Layers extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Layers extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.LAYERS, name, value, options );
 
         this.onGetValue = () => {
@@ -10424,10 +10459,10 @@ LX.Layers = Layers;
  * @description ItemArray Component
  */
 
-class ItemArray extends BaseComponent {
-
-    constructor( name, values = [], callback, options = {} ) {
-
+class ItemArray extends BaseComponent
+{
+    constructor( name, values = [], callback, options = {} )
+    {
         options.nameWidth = "100%";
 
         super( BaseComponent.ARRAY, name, null, options );
@@ -10542,10 +10577,10 @@ LX.ItemArray = ItemArray;
  * @description List Component
  */
 
-class List extends BaseComponent {
-
-    constructor( name, values, value, callback, options = {} ) {
-
+class List extends BaseComponent
+{
+    constructor( name, values, value, callback, options = {} )
+    {
         super( BaseComponent.LIST, name, value, options );
 
         this.onGetValue = () => {
@@ -10642,10 +10677,10 @@ LX.List = List;
  * @description Tags Component
  */
 
-class Tags extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Tags extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         value = value.replace( /\s/g, '' ).split( ',' );
 
         let defaultValue = [].concat( value );
@@ -10731,10 +10766,10 @@ LX.Tags = Tags;
  * @description Checkbox Component
  */
 
-class Checkbox extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Checkbox extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         if( !name && !options.label )
         {
             throw( "Set Component Name or at least a label!" );
@@ -10814,10 +10849,10 @@ LX.Checkbox = Checkbox;
  * @description Toggle Component
  */
 
-class Toggle extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Toggle extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         if( !name && !options.label )
         {
             throw( "Set Component Name or at least a label!" );
@@ -10898,10 +10933,10 @@ LX.Toggle = Toggle;
  * @description RadioGroup Component
  */
 
-class RadioGroup extends BaseComponent {
-
-    constructor( name, label, values, callback, options = {} ) {
-
+class RadioGroup extends BaseComponent
+{
+    constructor( name, label, values, callback, options = {} )
+    {
         super( BaseComponent.RADIO, name, null, options );
 
         let currentIndex = null;
@@ -10977,10 +11012,10 @@ LX.RadioGroup = RadioGroup;
  * @description ColorInput Component
  */
 
-class ColorInput extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class ColorInput extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         value = value ?? "#000000";
 
         const useAlpha = options.useAlpha ??
@@ -11100,10 +11135,10 @@ LX.ColorInput = ColorInput;
  * @description RangeInput Component
  */
 
-class RangeInput extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class RangeInput extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         const ogValue = LX.deepCopy( value );
 
         super( BaseComponent.RANGE, name, LX.deepCopy( ogValue ), options );
@@ -11314,10 +11349,10 @@ LX.RangeInput = RangeInput;
  * @description NumberInput Component
  */
 
-class NumberInput extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class NumberInput extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.NUMBER, name, value, options );
 
         this.onGetValue = () => {
@@ -11536,10 +11571,10 @@ LX.NumberInput = NumberInput;
  * @description Vector Component
  */
 
-class Vector extends BaseComponent {
-
-    constructor( numComponents, name, value, callback, options = {} ) {
-
+class Vector extends BaseComponent
+{
+    constructor( numComponents, name, value, callback, options = {} )
+    {
         numComponents = LX.clamp( numComponents, 2, 4 );
         value = value ?? new Array( numComponents ).fill( 0 );
 
@@ -11786,10 +11821,10 @@ LX.Vector = Vector;
  * @description SizeInput Component
  */
 
-class SizeInput extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class SizeInput extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.SIZE, name, value, options );
 
         this.onGetValue = () => {
@@ -11874,10 +11909,10 @@ LX.SizeInput = SizeInput;
  * @description OTPInput Component
  */
 
-class OTPInput extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class OTPInput extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         const pattern = options.pattern ?? "xxx-xxx";
         const patternSize = ( pattern.match(/x/g) || [] ).length;
 
@@ -12032,10 +12067,10 @@ LX.OTPInput = OTPInput;
  * @description Pad Component
  */
 
-class Pad extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Pad extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         super( BaseComponent.PAD, name, null, options );
 
         this.onGetValue = () => {
@@ -12152,10 +12187,10 @@ LX.Pad = Pad;
  * @description Progress Component
  */
 
-class Progress extends BaseComponent {
-
-    constructor( name, value, options = {} ) {
-
+class Progress extends BaseComponent
+{
+    constructor( name, value, options = {} )
+    {
         super( BaseComponent.PROGRESS, name, value, options );
 
         this.onGetValue = () => {
@@ -12289,10 +12324,10 @@ LX.Progress = Progress;
  * @description FileInput Component
  */
 
-class FileInput extends BaseComponent {
-
-    constructor( name, callback, options = { } ) {
-
+class FileInput extends BaseComponent
+{
+    constructor( name, callback, options = { } )
+    {
         super( BaseComponent.FILE, name, null, options );
 
         let local = options.local ?? true;
@@ -12374,10 +12409,10 @@ LX.FileInput = FileInput;
  * @description Tree Component
  */
 
-class Tree extends BaseComponent {
-
-    constructor( name, data, options = {} ) {
-
+class Tree extends BaseComponent
+{
+    constructor( name, data, options = {} )
+    {
         options.hideName = true;
 
         super( BaseComponent.TREE, name, null, options );
@@ -12456,10 +12491,10 @@ LX.Tree = Tree;
  * @description TabSections Component
  */
 
-class TabSections extends BaseComponent {
-
-    constructor( name, tabs, options = {} ) {
-
+class TabSections extends BaseComponent
+{
+    constructor( name, tabs, options = {} )
+    {
         options.hideName = true;
 
         super( BaseComponent.TABS, name, null, options );
@@ -12563,10 +12598,10 @@ LX.TabSections = TabSections;
  * @description Counter Component
  */
 
-class Counter extends BaseComponent {
-
-    constructor( name, value, callback, options = { } ) {
-
+class Counter extends BaseComponent
+{
+    constructor( name, value, callback, options = { } )
+    {
         super( BaseComponent.COUNTER, name, value, options );
 
         this.onGetValue = () => {
@@ -12633,10 +12668,10 @@ LX.Counter = Counter;
  * @description Table Component
  */
 
-class Table extends BaseComponent {
-
-    constructor( name, data, options = { } ) {
-
+class Table extends BaseComponent
+{
+    constructor( name, data, options = { } )
+    {
         if( !data )
         {
             throw( "Data is needed to create a table!" );
@@ -12669,12 +12704,12 @@ class Table extends BaseComponent {
         data.body = data.body ?? [];
         data.checkMap = { };
         data.colVisibilityMap = { };
-        data.head.forEach( (col, index) => { data.colVisibilityMap[ index ] = true; });
+        data.head.forEach( ( col, index ) => { data.colVisibilityMap[ index ] = true; });
         this.data = data;
 
-        const compareFn = ( idx, order, a, b) => {
-            if (a[idx] < b[idx]) return -order;
-            else if (a[idx] > b[idx]) return order;
+        const compareFn = ( idx, order, a, b ) => {
+            if( a[ idx ] < b[ idx ] ) return -order;
+            else if( a[ idx ] > b[ idx ] ) return order;
             return 0;
         };
 
@@ -12844,10 +12879,10 @@ class Table extends BaseComponent {
                             icon: "Check",
                             callback: () => {
                                 data.colVisibilityMap[ idx ] = !data.colVisibilityMap[ idx ];
-                                const cells = table.querySelectorAll(`tr > *:nth-child(${idx + this.rowOffsetCount + 1})`);
-                                cells.forEach(cell => {
-                                    cell.style.display = (cell.style.display === "none") ? "" : "none";
-                                });
+                                const cells = table.querySelectorAll( `tr > *:nth-child(${idx + this.rowOffsetCount + 1})` );
+                                cells.forEach( cell => {
+                                    cell.style.display = ( cell.style.display === "none" ) ? "" : "none";
+                                } );
                             }
                         };
                         if( !data.colVisibilityMap[ idx ] ) delete item.icon;
@@ -12942,9 +12977,9 @@ class Table extends BaseComponent {
                                 name: "Hide", icon: "EyeOff", callback: () => {
                                     data.colVisibilityMap[ idx ] = false;
                                     const cells = table.querySelectorAll(`tr > *:nth-child(${idx + this.rowOffsetCount + 1})`);
-                                    cells.forEach(cell => {
-                                        cell.style.display = (cell.style.display === "none") ? "" : "none";
-                                    });
+                                    cells.forEach( cell => {
+                                        cell.style.display = ( cell.style.display === "none" ) ? "" : "none";
+                                    } );
                                 }
                             }
                         );
@@ -13316,10 +13351,10 @@ class Table extends BaseComponent {
                 const idx = parseInt( v );
                 if( !data.colVisibilityMap[ idx ] )
                 {
-                    const cells = table.querySelectorAll(`tr > *:nth-child(${idx + this.rowOffsetCount + 1})`);
-                    cells.forEach(cell => {
-                        cell.style.display = (cell.style.display === "none") ? "" : "none";
-                    });
+                    const cells = table.querySelectorAll( `tr > *:nth-child(${idx + this.rowOffsetCount + 1})` );
+                    cells.forEach( cell => {
+                        cell.style.display = ( cell.style.display === "none" ) ? "" : "none";
+                    } );
                 }
             }
         };
@@ -13329,8 +13364,8 @@ class Table extends BaseComponent {
         LX.doAsync( this.onResize.bind( this ) );
     }
 
-    getSelectedRows() {
-
+    getSelectedRows()
+    {
         const selectedRows = [];
 
         for( const row of this.data.body )
@@ -13345,8 +13380,8 @@ class Table extends BaseComponent {
         return selectedRows;
     }
 
-    _setCentered( v ) {
-
+    _setCentered( v )
+    {
         if( v.constructor == Boolean )
         {
             const container = this.root.querySelector( ".lextable" );
@@ -13379,10 +13414,10 @@ LX.Table = Table;
  * @description DatePicker Component
  */
 
-class DatePicker extends BaseComponent {
-
-    constructor( name, dateValue, callback, options = { } ) {
-
+class DatePicker extends BaseComponent
+{
+    constructor( name, dateValue, callback, options = { } )
+    {
         super( BaseComponent.DATE, name, null, options );
 
         const dateAsRange = ( dateValue?.constructor === Array );
@@ -13497,10 +13532,10 @@ LX.DatePicker = DatePicker;
  * @description Map2D Component
  */
 
-class Map2D extends BaseComponent {
-
-    constructor( name, points, callback, options = {} ) {
-
+class Map2D extends BaseComponent
+{
+    constructor( name, points, callback, options = {} )
+    {
         super( BaseComponent.MAP2D, name, null, options );
 
         this.onGetValue = () => {
@@ -13544,13 +13579,13 @@ LX.Map2D = Map2D;
  * @description Rate Component
  */
 
-class Rate extends BaseComponent {
-
-    constructor( name, value, callback, options = {} ) {
-
+class Rate extends BaseComponent
+{
+    constructor( name, value, callback, options = {} )
+    {
         const allowHalf = options.allowHalf ?? false;
 
-        if( !allowHalf)
+        if( !allowHalf )
         {
             value = Math.floor( value );
         }
@@ -15093,8 +15128,8 @@ LX.Branch = Branch;
 
 class Menubar {
 
-    constructor( items, options = {} ) {
-
+    constructor( items, options = {} )
+    {
         this.root = document.createElement( "div" );
         this.root.className = "lexmenubar";
 
@@ -15111,8 +15146,8 @@ class Menubar {
         this.createEntries();
     }
 
-    _resetMenubar( focus ) {
-
+    _resetMenubar( focus )
+    {
         this.root.querySelectorAll(".lexmenuentry").forEach( e => {
             e.classList.remove( 'selected' );
             delete e.dataset[ "built" ];
@@ -15132,8 +15167,8 @@ class Menubar {
      * @method createEntries
      */
 
-    createEntries() {
-
+    createEntries()
+    {
         for( let item of this.items )
         {
             let key = item.name;
@@ -15199,7 +15234,8 @@ class Menubar {
      * @param {String} name
      */
 
-    getButton( name ) {
+    getButton( name )
+    {
         return this.buttons[ name ];
     }
 
@@ -15208,26 +15244,23 @@ class Menubar {
      * @param {Object} item: parent item
      * @param {Array} tokens: split path strings
     */
-    getSubitem( item, tokens ) {
-
-        let subitem = null;
-        let path = tokens[ 0 ];
-
-        for( let i = 0; i < item.length; i++ )
+    getSubitem( item, tokens )
+    {
+        for( const s of item )
         {
-            if( item[ i ][ path ] )
+            if ( s?.name != tokens[ 0 ] )
             {
-                if( tokens.length == 1 )
-                {
-                    subitem = item[ i ];
-                    return subitem;
-                }
-                else
-                {
-                    tokens.splice( 0, 1 );
-                    return this.getSubitem( item[ i ][ path ], tokens );
-                }
+                continue;
+            }
 
+            if( tokens.length == 1 )
+            {
+                return s;
+            }
+            else if ( s.submenu )
+            {
+                tokens.shift();
+                return this.getSubitem( s.submenu, tokens );
             }
         }
     }
@@ -15236,12 +15269,11 @@ class Menubar {
      * @method getItem
      * @param {String} path
     */
-    getItem( path ) {
-
-        // process path
-        const tokens = path.split("/");
-
-        return this.getSubitem(this.items, tokens)
+    getItem( path )
+    {
+        // Process path
+        const tokens = path.split( '/' );
+        return this.getSubitem( this.items, tokens );
     }
 
     /**
@@ -15252,8 +15284,8 @@ class Menubar {
      * @param {Object} options
      */
 
-    setButtonIcon( name, icon, callback, options = {} ) {
-
+    setButtonIcon( name, icon, callback, options = {} )
+    {
         if( !name )
         {
             throw( "Set Button Name!" );
@@ -15308,8 +15340,8 @@ class Menubar {
      * @param {Object} options
      */
 
-    setButtonImage( name, src, callback, options = {} ) {
-
+    setButtonImage( name, src, callback, options = {} )
+    {
         if( !name )
         {
             throw( "Set Button Name!" );
@@ -15318,14 +15350,14 @@ class Menubar {
         let button = this.buttons[ name ];
         if( button )
         {
-            button.querySelector('img').src = src;
+            button.querySelector( 'img' ).src = src;
             return;
         }
 
         // Otherwise, create it
-        button = document.createElement('div');
+        button = document.createElement( 'div' );
         const disabled = options.disabled ?? false;
-        button.className = "lexmenubutton main" + (disabled ? " disabled" : "");
+        button.className = "lexmenubutton main" + ( disabled ? " disabled" : "" );
         button.title = name;
         button.innerHTML = "<a><image src='" + src + "' class='lexicon' style='height:32px;'></a>";
 
@@ -15349,11 +15381,11 @@ class Menubar {
 
         const _b = button.querySelector('a');
 
-        _b.addEventListener( "mousedown", (e) => {
+        _b.addEventListener( "mousedown", e => {
             e.preventDefault();
         });
 
-        _b.addEventListener( "mouseup", (e) => {
+        _b.addEventListener( "mouseup", e => {
             if( callback && !disabled )
             {
                 callback.call( this, _b, e );
@@ -15370,8 +15402,8 @@ class Menubar {
      * float: center (Default), right
      */
 
-    addButtons( buttons, options = {} ) {
-
+    addButtons( buttons, options = {} )
+    {
         if( !buttons )
         {
             throw( "No buttons to add!" );
@@ -15398,9 +15430,8 @@ class Menubar {
             }
         }
 
-        for( let i = 0; i < buttons.length; ++i )
+        for( const data of buttons )
         {
-            const data = buttons[ i ];
             const title = data.title;
             const button = new LX.Button( title, data.label, data.callback, {
                 title,
@@ -16588,13 +16619,13 @@ class AssetView {
         const isListLayout = ( this.layout == AssetView.LAYOUT_LIST );
 
         this.filter = filter ?? ( this.filter ?? "None" );
-        this.searchValue = searchValue ?? (this.searchValue ?? "");
+        this.searchValue = searchValue ?? ( this.searchValue ?? "" );
         this.content.innerHTML = "";
         this.content.className = `lexassetscontent${ isCompactLayout ? " compact" : ( isListLayout ? " list" : "" ) }`;
         let that = this;
 
-        const _addItem = function(item) {
-
+        const _addItem = function( item )
+        {
             const type = item.type.charAt( 0 ).toUpperCase() + item.type.slice( 1 );
             const extension = LX.getExtension( item.id );
             const isFolder = type === "Folder";
@@ -16613,10 +16644,11 @@ class AssetView {
             {
                 let desc = document.createElement( 'span' );
                 desc.className = 'lexitemdesc';
-                desc.innerHTML = "File: " + item.id + "<br>Type: " + type;
+                desc.id = `floatingTitle_${ item.id }`;
+                desc.innerHTML = `File: ${ item.id }<br>Type: ${ type }`;
                 that.content.appendChild( desc );
 
-                itemEl.addEventListener("mousemove", e => {
+                itemEl.addEventListener( "mousemove", e => {
 
                     if( !isGridLayout )
                     {
@@ -16644,23 +16676,7 @@ class AssetView {
 
                     desc.style.left = ( localOffsetX ) + "px";
                     desc.style.top = ( localOffsetY - 36 ) + "px";
-                });
-
-                itemEl.addEventListener("mouseenter", () => {
-                    if( isGridLayout )
-                    {
-                        desc.style.display = "unset";
-                    }
-                });
-
-                itemEl.addEventListener("mouseleave", () => {
-                    if( isGridLayout )
-                    {
-                        setTimeout( () => {
-                            desc.style.display = "none";
-                        }, 100 );
-                    }
-                });
+                } );
             }
             else
             {
@@ -16695,26 +16711,49 @@ class AssetView {
 
             if( !that.skipPreview )
             {
+                if( item.type === 'video' )
+                {
+                    const itemVideo = LX.makeElement( 'video', 'absolute left-0 top-0 w-full border-none pointer-events-none', '', itemEl );
+                    itemVideo.setAttribute( 'disablePictureInPicture', false );
+                    itemVideo.setAttribute( 'disableRemotePlayback', false );
+                    itemVideo.setAttribute( 'loop', true );
+                    itemVideo.setAttribute( 'async', true );
+                    itemVideo.style.transition = 'opacity 0.2s ease-out';
+                    itemVideo.style.opacity = item.preview ? '0' : '1';
+                    itemVideo.src = item.src;
+                    itemVideo.volume = item.videoVolume ?? 0.4;
+                }
+
                 let preview = null;
-                const hasImage = item.src && (['png', 'jpg'].indexOf( LX.getExtension( item.src ) ) > -1 || item.src.includes("data:image/") ); // Support b64 image as src
 
-                if( hasImage || isFolder || !isGridLayout)
+                const previewSrc    = item.preview ?? item.src;
+                const hasImage = previewSrc && (
+                    (() => {
+                        const ext = LX.getExtension( previewSrc.split( '?' )[ 0 ].split( '#' )[ 0 ]); // get final source without url parameters/anchors
+                        return ext ? ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'avif'].includes( ext.toLowerCase() ) : false;
+                    })()
+                    || previewSrc.startsWith( 'data:image/' )
+                );
+
+                if( hasImage || isFolder || !isGridLayout )
                 {
+                    const defaultPreviewPath    = `${ that.rootPath }images/file.png`;
+                    const defaultFolderPath     = `${ that.rootPath }images/folder.png`;
+
                     preview = document.createElement('img');
-                    let real_src = item.unknown_extension ? that.rootPath + "images/file.png" : (isFolder ? that.rootPath + "images/folder.png" : item.src);
-                    preview.src = (isGridLayout || isFolder ? real_src : that.rootPath + "images/file.png");
+                    let realSrc = item.unknownExtension ? defaultPreviewPath : ( isFolder ? defaultFolderPath : previewSrc );
+                    preview.src = ( isGridLayout || isFolder ? realSrc : defaultPreviewPath );
                     itemEl.appendChild( preview );
                 }
                 else
                 {
-                    preview = document.createElement('svg');
-                    preview.className = "asset-file-preview";
-                    itemEl.appendChild(preview);
+                    preview = document.createElement( 'svg' );
+                    preview.className = 'asset-file-preview';
+                    itemEl.appendChild( preview );
 
-                    let textEl = document.createElement('text');
-                    preview.appendChild(textEl);
-                    // If no extension, e.g. Clip, use the type...
-                    textEl.innerText = (!extension || extension == item.id) ? item.type.toUpperCase() : ("." + extension.toUpperCase());
+                    let textEl = document.createElement( 'text' );
+                    textEl.innerText = ( !extension || extension == item.id ) ? item.type.toUpperCase() : ( `.${ extension.toUpperCase() }` ); // If no extension, e.g. Clip, use the type...
+                    preview.appendChild( textEl );
 
                     var newLength = textEl.innerText.length;
                     var charsPerLine = 2.5;
@@ -16724,8 +16763,8 @@ class AssetView {
                     if( newEmSize < 1 )
                     {
                         var newFontSize = newEmSize * textBaseSize;
-                        textEl.style.fontSize = newFontSize + "px";
-                        preview.style.paddingTop = "calc(50% - " + (textEl.offsetHeight * 0.5 + 10) + "px)";
+                        textEl.style.fontSize = newFontSize + 'px';
+                        preview.style.paddingTop = `calc(50% - ${ ( textEl.offsetHeight * 0.5 + 10 ) }px)`;
                     }
                 }
             }
@@ -16739,7 +16778,7 @@ class AssetView {
                 if( item.lastModifiedDate ) itemInfoHtml += ` | ${ item.lastModifiedDate }`;
             }
 
-            LX.makeContainer( [ "auto", "auto" ], "lexassetinfo", itemInfoHtml, itemEl );
+            LX.makeContainer( [ 'auto', 'auto' ], 'lexassetinfo', itemInfoHtml, itemEl );
 
             itemEl.addEventListener('click', function( e ) {
                 e.stopImmediatePropagation();
@@ -16751,10 +16790,10 @@ class AssetView {
                 {
                     if( !e.shiftKey )
                     {
-                        that.content.querySelectorAll('.lexassetitem').forEach( i => i.classList.remove('selected') );
+                        that.content.querySelectorAll( '.lexassetitem').forEach( i => i.classList.remove( 'selected' ) );
                     }
 
-                    this.classList.add('selected');
+                    this.classList.add( 'selected' );
                     that.selectedItem = item;
 
                     if( !that.skipPreview )
@@ -16807,6 +16846,42 @@ class AssetView {
                 e.preventDefault();
             }, false );
 
+            itemEl.addEventListener( "mouseenter", ( e ) => {
+
+                if( !that.useNativeTitle && isGridLayout )
+                {
+                    const desc = that.content.querySelector( `#floatingTitle_${ item.id }` );
+                    if( desc ) desc.style.display = "unset";
+                }
+
+                if( item.type !== "video" ) return;
+                e.preventDefault();
+                const video = itemEl.querySelector( "video" );
+                video.style.opacity = "1";
+                video.play();
+            } );
+
+            itemEl.addEventListener( "mouseleave", ( e ) => {
+
+                if( !that.useNativeTitle && isGridLayout )
+                {
+                    setTimeout( () => {
+                        const desc = that.content.querySelector( `#floatingTitle_${ item.id }` );
+                        if( desc ) desc.style.display = "none";
+                    }, 100 );
+                }
+
+                if( item.type !== "video" ) return;
+                e.preventDefault();
+                const video = itemEl.querySelector( "video" );
+                video.pause();
+                video.currentTime = 0;
+                if( item.preview )
+                {
+                    video.style.opacity = "0";
+                }
+            } );
+
             return itemEl;
         };
 
@@ -16951,7 +17026,7 @@ class AssetView {
                     item.type = "mesh"; break;
                 default:
                     item.type = ext;
-                    item.unknown_extension = true;
+                    item.unknownExtension = true;
                     break;
                 }