lexgui 0.4.0 → 0.4.1

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 var LX = {
-    version: "0.4.0",
+    version: "0.4.1",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -24,13 +24,13 @@ LX.MOUSE_LEFT_CLICK     = 0;
 LX.MOUSE_MIDDLE_CLICK   = 1;
 LX.MOUSE_RIGHT_CLICK    = 2;
 
-LX.MOUSE_DOUBLE_CLICK = 2;
-LX.MOUSE_TRIPLE_CLICK = 3;
+LX.MOUSE_DOUBLE_CLICK   = 2;
+LX.MOUSE_TRIPLE_CLICK   = 3;
 
-LX.CURVE_MOVEOUT_CLAMP = 0;
+LX.CURVE_MOVEOUT_CLAMP  = 0;
 LX.CURVE_MOVEOUT_DELETE = 1;
 
-LX.DRAGGABLE_Z_INDEX = 101;
+LX.DRAGGABLE_Z_INDEX    = 101;
 
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
 function round( number, precision ) { return precision == 0 ? Math.floor( number ) : +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
@@ -930,7 +930,19 @@ function init( options = { } )
         this.container = document.getElementById( options.container );
     }
 
-    document.documentElement.setAttribute( "data-strictVP", ( options.strictViewport ?? true ) ? "true" : "false" );
+    this.usingStrictViewport = options.strictViewport ?? true;
+    document.documentElement.setAttribute( "data-strictVP", ( this.usingStrictViewport ) ? "true" : "false" );
+
+    if( !this.usingStrictViewport )
+    {
+        document.addEventListener( "scroll", e => {
+            // Get all active menuboxes
+            const mbs = document.body.querySelectorAll( ".lexmenubox" );
+            mbs.forEach( ( mb ) => {
+                mb._updatePosition();
+            } );
+        } );
+    }
 
     this.commandbar = _createCommandbar( this.container );
 
@@ -2067,7 +2079,7 @@ class Area {
         }
 
         // Generate DOM elements after adding all entries
-        sidebar._build();
+        sidebar.update();
 
         LX.menubars.push( sidebar );
 
@@ -2677,6 +2689,195 @@ class Menubar {
         this.shorts = { };
     }
 
+    _resetMenubar() {
+
+        // Menu entries are in the menubar..
+        this.root.querySelectorAll(".lexmenuentry").forEach( _entry => {
+            _entry.classList.remove( 'selected' );
+            _entry.built = false;
+        } );
+
+        // Menuboxes are in the root area!
+        LX.root.querySelectorAll(".lexmenubox").forEach(e => e.remove());
+
+        // Next time we need to click again
+        this.focused = false;
+    }
+
+    _createSubmenu( o, k, c, d ) {
+
+        let menuElement = document.createElement('div');
+        menuElement.className = "lexmenubox";
+        menuElement.tabIndex = "0";
+        c.currentMenu = menuElement;
+        menuElement.parentEntry = c;
+
+        const isSubMenu = c.classList.contains( "lexmenuboxentry" );
+        if( isSubMenu )
+        {
+            menuElement.dataset[ "submenu" ] = true;
+        }
+
+        menuElement._updatePosition = () => {
+
+            // Remove transitions for this change..
+            const transition = menuElement.style.transition;
+            menuElement.style.transition = "none";
+            flushCss( menuElement );
+
+            doAsync( () => {
+                let rect = c.getBoundingClientRect();
+                rect.x += document.scrollingElement.scrollLeft;
+                rect.y += document.scrollingElement.scrollTop;
+                menuElement.style.left = ( isSubMenu ? ( rect.x + rect.width ) : rect.x ) + "px";
+                menuElement.style.top = ( isSubMenu ? rect.y : ( ( rect.y + rect.height ) ) - 4 ) + "px";
+
+                menuElement.style.transition = transition;
+            } );
+        };
+
+        menuElement._updatePosition();
+
+        doAsync( () => {
+            menuElement.dataset[ "open" ] = true;
+        }, 10 );
+
+        LX.root.appendChild( menuElement );
+
+        for( var i = 0; i < o[ k ].length; ++i )
+        {
+            const subitem = o[ k ][ i ];
+            const subkey = Object.keys( subitem )[ 0 ];
+            const hasSubmenu = subitem[ subkey ].length;
+            const isCheckbox = subitem[ 'type' ] == 'checkbox';
+            let subentry = document.createElement('div');
+            subentry.className = "lexmenuboxentry";
+            subentry.className += (i == o[k].length - 1 ? " last" : "") + ( subitem.disabled ? " disabled" : "" );
+
+            if( subkey == '' )
+            {
+                subentry.className = " lexseparator";
+            }
+            else
+            {
+                subentry.id = subkey;
+                let subentrycont = document.createElement('div');
+                subentrycont.innerHTML = "";
+                subentrycont.classList = "lexmenuboxentrycontainer";
+                subentry.appendChild(subentrycont);
+                const icon = this.icons[ subkey ];
+                if( isCheckbox )
+                {
+                    subentrycont.innerHTML += "<input type='checkbox' >";
+                }
+                else if( icon )
+                {
+                    subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
+                }
+                else
+                {
+                    subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
+                    subentrycont.classList.add( "noicon" );
+
+                }
+                subentrycont.innerHTML += "<div class='lexentryname'>" + subkey + "</div>";
+            }
+
+            let checkboxInput = subentry.querySelector('input');
+            if( checkboxInput )
+            {
+                checkboxInput.checked = subitem.checked ?? false;
+                checkboxInput.addEventListener('change', e => {
+                    subitem.checked = checkboxInput.checked;
+                    const f = subitem[ 'callback' ];
+                    if( f )
+                    {
+                        f.call( this, subitem.checked, subkey, subentry );
+                        this._resetMenubar();
+                    }
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                })
+            }
+
+            menuElement.appendChild( subentry );
+
+            // Nothing more for separators
+            if( subkey == '' )
+            {
+                continue;
+            }
+
+            menuElement.addEventListener('keydown', e => {
+                e.preventDefault();
+                let short = this.shorts[ subkey ];
+                if(!short) return;
+                // check if it's a letter or other key
+                short = short.length == 1 ? short.toLowerCase() : short;
+                if( short == e.key )
+                {
+                    subentry.click()
+                }
+            });
+
+            // Add callback
+            subentry.addEventListener("click", e => {
+                if( checkboxInput )
+                {
+                    subitem.checked = !subitem.checked;
+                }
+                const f = subitem[ 'callback' ];
+                if( f )
+                {
+                    f.call( this, checkboxInput ? subitem.checked : subkey, checkboxInput ? subkey : subentry );
+                    this._resetMenubar();
+                }
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+            });
+
+            // Add icon if has submenu, else check for shortcut
+            if( !hasSubmenu)
+            {
+                if( this.shorts[ subkey ] )
+                {
+                    let shortEl = document.createElement('div');
+                    shortEl.className = "lexentryshort";
+                    shortEl.innerText = this.shorts[ subkey ];
+                    subentry.appendChild( shortEl );
+                }
+                continue;
+            }
+
+            let submenuIcon = document.createElement('a');
+            submenuIcon.className = "fa-solid fa-angle-right fa-xs";
+            subentry.appendChild( submenuIcon );
+
+            subentry.addEventListener("mouseover", e => {
+                if( subentry.built )
+                {
+                    return;
+                }
+                subentry.built = true;
+                this._createSubmenu( subitem, subkey, subentry, ++d );
+                e.stopPropagation();
+            });
+
+            subentry.addEventListener("mouseleave", e => {
+                if( subentry.currentMenu && ( subentry.currentMenu != e.toElement ) )
+                {
+                    d = -1; // Reset depth
+                    delete subentry.built;
+                    subentry.currentMenu.remove();
+                    delete subentry.currentMenu;
+                }
+            });
+        }
+
+        // Set final width
+        menuElement.style.width = menuElement.offsetWidth + "px";
+    }
+
     /**
      * @method add
      * @param {Object} options:
@@ -2780,176 +2981,11 @@ class Menubar {
                 }
             }
 
-            const _resetMenubar = function() {
-                // Menu entries are in the menubar..
-                that.root.querySelectorAll(".lexmenuentry").forEach( _entry => {
-                    _entry.classList.remove( 'selected' );
-                    _entry.built = false;
-                } );
-                // Menuboxes are in the root area!
-                LX.root.querySelectorAll(".lexmenubox").forEach(e => e.remove());
-                // Next time we need to click again
-                that.focused = false;
-            };
-
-            const create_submenu = function( o, k, c, d ) {
-
-                let menuElement = document.createElement('div');
-                menuElement.className = "lexmenubox";
-                menuElement.tabIndex = "0";
-                c.currentMenu = menuElement;
-                const isSubMenu = c.classList.contains( "lexmenuboxentry" );
-                if( isSubMenu ) menuElement.dataset[ "submenu" ] = true;
-                var rect = c.getBoundingClientRect();
-                menuElement.style.left = ( isSubMenu ? ( rect.x + rect.width ) : rect.left ) + "px";
-                menuElement.style.top = ( isSubMenu ? rect.y : rect.bottom - 4 ) + "px";
-                rect = menuElement.getBoundingClientRect();
-
-                doAsync( () => {
-                    menuElement.dataset[ "open" ] = true;
-                }, 10 );
-
-                LX.root.appendChild( menuElement );
-
-                for( var i = 0; i < o[ k ].length; ++i )
-                {
-                    const subitem = o[ k ][ i ];
-                    const subkey = Object.keys( subitem )[ 0 ];
-                    const hasSubmenu = subitem[ subkey ].length;
-                    const isCheckbox = subitem[ 'type' ] == 'checkbox';
-                    let subentry = document.createElement('div');
-                    subentry.className = "lexmenuboxentry";
-                    subentry.className += (i == o[k].length - 1 ? " last" : "") + ( subitem.disabled ? " disabled" : "" );
-
-                    if( subkey == '' )
-                    {
-                        subentry.className = " lexseparator";
-                    }
-                    else
-                    {
-                        subentry.id = subkey;
-                        let subentrycont = document.createElement('div');
-                        subentrycont.innerHTML = "";
-                        subentrycont.classList = "lexmenuboxentrycontainer";
-                        subentry.appendChild(subentrycont);
-                        const icon = that.icons[ subkey ];
-                        if( isCheckbox )
-                        {
-                            subentrycont.innerHTML += "<input type='checkbox' >";
-                        }
-                        else if( icon )
-                        {
-                            subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
-                        }
-                        else
-                        {
-                            subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
-                            subentrycont.classList.add( "noicon" );
-
-                        }
-                        subentrycont.innerHTML += "<div class='lexentryname'>" + subkey + "</div>";
-                    }
-
-                    let checkboxInput = subentry.querySelector('input');
-                    if( checkboxInput )
-                    {
-                        checkboxInput.checked = subitem.checked ?? false;
-                        checkboxInput.addEventListener('change', e => {
-                            subitem.checked = checkboxInput.checked;
-                            const f = subitem[ 'callback' ];
-                            if( f )
-                            {
-                                f.call( this, subitem.checked, subkey, subentry );
-                                _resetMenubar();
-                            }
-                            e.stopPropagation();
-                            e.stopImmediatePropagation();
-                        })
-                    }
-
-                    menuElement.appendChild( subentry );
-
-                    // Nothing more for separators
-                    if( subkey == '' )
-                    {
-                        continue;
-                    }
-
-                    menuElement.addEventListener('keydown', function(e) {
-                        e.preventDefault();
-                        let short = that.shorts[ subkey ];
-                        if(!short) return;
-                        // check if it's a letter or other key
-                        short = short.length == 1 ? short.toLowerCase() : short;
-                        if( short == e.key )
-                        {
-                            subentry.click()
-                        }
-                    });
-
-                    // Add callback
-                    subentry.addEventListener("click", e => {
-                        if( checkboxInput )
-                        {
-                            subitem.checked = !subitem.checked;
-                        }
-                        const f = subitem[ 'callback' ];
-                        if( f )
-                        {
-                            f.call( this, checkboxInput ? subitem.checked : subkey, checkboxInput ? subkey : subentry );
-                            _resetMenubar();
-                        }
-                        e.stopPropagation();
-                        e.stopImmediatePropagation();
-                    });
-
-                    // Add icon if has submenu, else check for shortcut
-                    if( !hasSubmenu)
-                    {
-                        if( that.shorts[ subkey ] )
-                        {
-                            let shortEl = document.createElement('div');
-                            shortEl.className = "lexentryshort";
-                            shortEl.innerText = that.shorts[ subkey ];
-                            subentry.appendChild( shortEl );
-                        }
-                        continue;
-                    }
-
-                    let submenuIcon = document.createElement('a');
-                    submenuIcon.className = "fa-solid fa-angle-right fa-xs";
-                    subentry.appendChild( submenuIcon );
-
-                    subentry.addEventListener("mouseover", e => {
-                        if( subentry.built )
-                        {
-                            return;
-                        }
-                        subentry.built = true;
-                        create_submenu( subitem, subkey, subentry, ++d );
-                        e.stopPropagation();
-                    });
-
-                    subentry.addEventListener("mouseleave", (e) => {
-                        if( subentry.currentMenu && ( subentry.currentMenu != e.toElement ) )
-                        {
-                            d = -1; // Reset depth
-                            delete subentry.built;
-                            subentry.currentMenu.remove();
-                            delete subentry.currentMenu;
-                        }
-                    });
-                }
-
-                // Set final width
-                menuElement.style.width = menuElement.offsetWidth + "px";
-            };
-
             const _showEntry = () => {
-                _resetMenubar();
+                this._resetMenubar();
                 entry.classList.add( "selected" );
                 entry.built = true;
-                create_submenu( item, key, entry, -1 );
+                this._createSubmenu( item, key, entry, -1 );
             };
 
             entry.addEventListener("click", () => {
@@ -2980,7 +3016,7 @@ class Menubar {
                     return;
                 }
 
-                _resetMenubar();
+                this._resetMenubar();
             });
         }
     }
@@ -3235,20 +3271,19 @@ class SideBar {
 
     /**
      * @param {Object} options
-     * inset: TODO
-     * filter: TODO
+     * filter: Add search bar to filter entries [false]
      * skipHeader: Do not use sidebar header [false]
      * headerImg: Image to be shown as avatar
      * headerIcon: Icon to be shown as avatar (from LX.ICONS)
-     * headerTitle
-     * headerSubtitle
+     * headerTitle: Header title
+     * headerSubtitle: Header subtitle
      * skipFooter: Do not use sidebar footer [false]
      * footerImg: Image to be shown as avatar
      * footerIcon: Icon to be shown as avatar (from LX.ICONS)
-     * footerTitle
-     * footerSubtitle
+     * footerTitle: Footer title
+     * footerSubtitle: Footer subtitle
      * collapsable: Sidebar can toggle between collapsed/expanded [true]
-     * collapseToIcons: When Sidebar collapses, icons remains visible  [true]
+     * collapseToIcons: When Sidebar collapses, icons remains visible [true]
      * onHeaderPressed: Function to call when header is pressed
      * onFooterPressed: Function to call when footer is pressed
      */
@@ -3258,12 +3293,12 @@ class SideBar {
         this.root = document.createElement( 'div' );
         this.root.className = "lexsidebar";
 
-        window.sidebar = this;
-
         this.collapsable = options.collapsable ?? true;
-        this.collapseWidth = ( options.collapseToIcons ?? true ) ? "58px" : "0px";
+        this._collapseWidth = ( options.collapseToIcons ?? true ) ? "58px" : "0px";
         this.collapsed = false;
 
+        this.filterString = "";
+
         doAsync( () => {
 
             this.root.parentElement.ogWidth = this.root.parentElement.style.width;
@@ -3276,7 +3311,7 @@ class SideBar {
                 }
             });
 
-        }, 100 );
+        }, 10 );
 
         // This account for header, footer and all inner paddings
         let contentOffset = 32;
@@ -3346,6 +3381,19 @@ class SideBar {
             contentOffset += 52;
         }
 
+        // Entry filter
+        if( !( options.filter ?? false ) )
+        {
+            const panel = new Panel();
+            panel.addText(null, "", (value, event) => {
+                this.filterString = value;
+                this.update();
+            }, { placeholder: "Search...", icon: "fa-solid fa-magnifying-glass" });
+            this.filter = panel.root.childNodes[ 0 ];
+            this.root.appendChild( this.filter );
+            contentOffset += 31;
+        }
+
         // Content
         {
             this.content = document.createElement( 'div' );
@@ -3413,21 +3461,22 @@ class SideBar {
 
     /**
      * @method toggleCollapsed
+     * @param {Boolean} force: Force collapsed state
      */
 
-    toggleCollapsed() {
+    toggleCollapsed( force ) {
 
         if( !this.collapsable )
         {
             return;
         }
 
-        this.collapsed = !this.collapsed;
+        this.collapsed = force ?? !this.collapsed;
 
         if( this.collapsed )
         {
             this.root.classList.add( "collapsing" );
-            this.root.parentElement.style.width = this.collapseWidth;
+            this.root.parentElement.style.width = this._collapseWidth;
         }
         else
         {
@@ -3436,6 +3485,11 @@ class SideBar {
             this.root.parentElement.style.width = this.root.parentElement.ogWidth;
         }
 
+        if( !this.resizeObserver )
+        {
+            throw( "Wait until ResizeObserver has been created!" );
+        }
+
         this.resizeObserver.observe( this.root.parentElement );
 
         doAsync( () => {
@@ -3494,7 +3548,6 @@ class SideBar {
         const lastPath = tokens[tokens.length - 1];
         this.icons[ lastPath ] = options.icon;
 
-
         let idx = 0;
 
         const _insertEntry = ( token, list ) => {
@@ -3549,10 +3602,19 @@ class SideBar {
         if( !entry )
             return;
 
-        entry.domEl.click();
+        entry.dom.click();
     }
 
-    _build() {
+    update() {
+
+        // Reset first
+
+        this.content.innerHTML = "";
+
+        for( let item of this.items )
+        {
+            delete item.dom;
+        }
 
         for( let item of this.items )
         {
@@ -3565,12 +3627,18 @@ class SideBar {
             }
 
             let key = Object.keys( item )[ 0 ];
+
+            if( this.filterString.length && !key.toLowerCase().includes( this.filterString.toLowerCase() ) )
+            {
+                continue;
+            }
+
             let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
             let currentGroup = null;
 
             let entry = document.createElement( 'div' );
             entry.className = "lexsidebarentry " + ( options.className ?? "" );
-            entry.id = pKey;
+            entry.id = item.name = pKey;
 
             if( item.group )
             {
@@ -3641,7 +3709,7 @@ class SideBar {
 
             let itemDom = document.createElement( 'div' );
             entry.appendChild( itemDom );
-            item.dom = itemDom;
+            item.dom = entry;
 
             if( options.type == "checkbox" )
             {
@@ -3753,12 +3821,17 @@ class SideBar {
                 this.content.appendChild( subentryContainer );
             }
 
-            for( var i = 0; i < item[ key ].length; ++i )
+            for( let i = 0; i < item[ key ].length; ++i )
             {
                 const subitem = item[ key ][ i ];
                 const suboptions = subitem.options ?? {};
                 const subkey = Object.keys( subitem )[ 0 ];
 
+                if( this.filterString.length && !subkey.toLowerCase().includes( this.filterString.toLowerCase() ) )
+                {
+                    continue;
+                }
+
                 let subentry = document.createElement( 'div' );
                 subentry.innerHTML = `<span>${ subkey }</span>`;
 
@@ -5289,7 +5362,7 @@ class Panel {
 
             var resolve = ( function( val, event ) {
 
-                if( !widget.valid() )
+                if( !widget.valid() || ( this._lastValueTriggered == val ) )
                 {
                     return;
                 }
@@ -5302,6 +5375,8 @@ class Panel {
                     this._trigger( new IEvent( name, val, event ), callback );
                 }
 
+                this._lastValueTriggered = val;
+
             }).bind( this );
 
             const trigger = options.trigger ?? 'default';
@@ -9567,7 +9642,7 @@ class ContextMenu {
         }
     }
 
-    _adjust_position( div, margin, useAbsolute = false ) {
+    _adjustPosition( div, margin, useAbsolute = false ) {
 
         let rect = div.getBoundingClientRect();
 
@@ -9608,7 +9683,7 @@ class ContextMenu {
         }
     }
 
-    _create_submenu( o, k, c, d ) {
+    _createSubmenu( o, k, c, d ) {
 
         this.root.querySelectorAll( ".lexcontextmenu" ).forEach( cm => cm.remove() );
 
@@ -9620,7 +9695,7 @@ class ContextMenu {
         {
             const subitem = o[ k ][ i ];
             const subkey = Object.keys( subitem )[ 0 ];
-            this._create_entry(subitem, subkey, contextmenu, d);
+            this._createEntry(subitem, subkey, contextmenu, d);
         }
 
         var rect = c.getBoundingClientRect();
@@ -9628,10 +9703,10 @@ class ContextMenu {
         contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
         // Set final width
-        this._adjust_position( contextmenu, 6, true );
+        this._adjustPosition( contextmenu, 6, true );
     }
 
-    _create_entry( o, k, c, d ) {
+    _createEntry( o, k, c, d ) {
 
         const hasSubmenu = o[ k ].length;
         let entry = document.createElement('div');
@@ -9676,7 +9751,7 @@ class ContextMenu {
             return;
 
             if( LX.OPEN_CONTEXTMENU_ENTRY == 'click' )
-                this._create_submenu( o, k, entry, ++d );
+                this._createSubmenu( o, k, entry, ++d );
         });
 
         if( !hasSubmenu )
@@ -9692,7 +9767,7 @@ class ContextMenu {
                 if(entry.built)
                     return;
                 entry.built = true;
-                this._create_submenu( o, k, entry, ++d );
+                this._createSubmenu( o, k, entry, ++d );
                 e.stopPropagation();
             });
         }
@@ -9704,7 +9779,7 @@ class ContextMenu {
     }
 
     onCreate() {
-        doAsync( () => this._adjust_position( this.root, 6 ) );
+        doAsync( () => this._adjustPosition( this.root, 6 ) );
     }
 
     add( path, options = {} ) {
@@ -9734,13 +9809,13 @@ class ContextMenu {
 
             if( found )
             {
-                insert( tokens[idx++], found );
+                insert( tokens[ idx++ ], found );
             }
             else
             {
                 let item = {};
                 item[ token ] = [];
-                const nextToken = tokens[idx++];
+                const nextToken = tokens[ idx++ ];
                 // Check if last token -> add callback
                 if( !nextToken )
                 {
@@ -9760,13 +9835,15 @@ class ContextMenu {
 
         const setParent = _item => {
 
-            let key = Object.keys(_item)[0];
+            let key = Object.keys( _item )[ 0 ];
             let children = _item[ key ];
 
-            if(!children.length)
+            if( !children.length )
+            {
                 return;
+            }
 
-            if(children.find( c => Object.keys(c)[0] == key ) == null)
+            if( children.find( c => Object.keys(c)[0] == key ) == null )
             {
                 const parent = {};
                 parent[ key ] = [];
@@ -9776,14 +9853,18 @@ class ContextMenu {
 
             for( var child of _item[ key ] )
             {
-                let k = Object.keys(child)[0];
-                for( var i = 0; i < child[k].length; ++i )
-                    setParent(child);
+                let k = Object.keys( child )[ 0 ];
+                for( var i = 0; i < child[ k ].length; ++i )
+                {
+                    setParent( child );
+                }
             }
         };
 
         for( let item of this.items )
-            setParent(item);
+        {
+            setParent( item );
+        }
 
         // Create elements
 
@@ -9793,9 +9874,11 @@ class ContextMenu {
             let pKey = "eId" + getSupportedDOMName( key );
 
             // Item already created
-            const id = "#" + (item.id ?? pKey);
-            if( !this.root.querySelector(id) )
-                this._create_entry(item, key, this.root, -1);
+            const id = "#" + ( item.id ?? pKey );
+            if( !this.root.querySelector( id ) )
+            {
+                this._createEntry( item, key, this.root, -1 );
+            }
         }
     }