lexgui 0.5.6 → 0.5.8

package/build/lexgui.module.js

@@ -6,7 +6,7 @@
 */
 
 var LX = {
-    version: "0.5.6",
+    version: "0.5.8",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -128,6 +128,56 @@ function stripHTML( html )
 
 LX.stripHTML = stripHTML;
 
+/**
+ * @method parsePixelSize
+ * @description Parses any css size and returns a number of pixels
+ * @param {Number|String} size
+ * @param {Number} total
+ */
+const parsePixelSize = ( size, total ) => {
+
+    if( size.constructor === Number ) { return size; } // Assuming pixels..
+
+    if( size.constructor === String )
+    {
+        const value = parseFloat( size );
+
+        if( size.endsWith( "px" ) ) { return value; } // String pixels
+        if( size.endsWith( '%' ) ) { return ( value / 100 ) * total; } // Percentage
+        if( size.endsWith( "rem" ) || size.endsWith( "em" ) ) { const rootFontSize = 16; /*parseFloat(getComputedStyle(document.documentElement).fontSize);*/ return value * rootFontSize; } // rem unit: assume 16px = 1rem
+        if( size.endsWith( "vw" ) ) { return ( value / 100 ) * window.innerWidth; } // wViewport units
+        if( size.endsWith( "vh" ) ) { return ( value / 100 ) * window.innerHeight; } // hViewport units
+
+        // Any CSS calc expression (e.g., "calc(30% - 4px)")
+        if( size.startsWith( "calc(" ) )
+        {
+            const expr = size.slice( 5, -1 );
+            const parts = expr.split( /([+\-])/ ); // ["30% ", "-", "4px"]
+            let result = 0;
+            let op = "+";
+            for( let part of parts )
+            {
+                part = part.trim();
+                if( part === "+" || part === "-" )
+                {
+                    op = part;
+                }
+                else
+                {
+                    let value = parsePixelSize( part, total );
+                    result = ( op === "+" ) ? result + value : result - value;
+                }
+            }
+
+            return result;
+        }
+    }
+
+    throw( "Bad size format!" );
+}
+
+LX.parsePixelSize = parsePixelSize;
+
 /**
  * @method deepCopy
  * @description Create a deep copy with no references from an object
@@ -722,14 +772,20 @@ LX.makeKbd = makeKbd;
  * @method makeIcon
  * @description Gets an SVG element using one of LX.ICONS
  * @param {String} iconName
- * @param {String} iconTitle
- * @param {String} extraClass
+ * @param {Object} options
+ * iconTitle
+ * extraClass
+ * svgClass
  */
-function makeIcon( iconName, iconTitle, extraClass = "" )
+function makeIcon( iconName, options = { } )
 {
     let data = LX.ICONS[ iconName ];
     console.assert( data, `No icon named _${ iconName }_` );
 
+    const iconTitle = options.iconTitle;
+    const iconClass = options.iconClass;
+    const svgClass = options.svgClass;
+
     // Just another name for the same icon..
     if( data.constructor == String )
     {
@@ -739,9 +795,9 @@ function makeIcon( iconName, iconTitle, extraClass = "" )
     const svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
     svg.setAttribute( "viewBox", `0 0 ${ data[ 0 ] } ${ data[ 1 ] }` );
 
-    if( extraClass )
+    if( svgClass )
     {
-        svg.classList.add( extraClass );
+        svg.classList.add( svgClass );
     }
 
     if( data[ 5 ] )
@@ -769,7 +825,7 @@ function makeIcon( iconName, iconTitle, extraClass = "" )
 
     const icon = document.createElement( "a" );
     icon.title = iconTitle ?? "";
-    icon.className = "lexicon " + extraClass;
+    icon.className = "lexicon " + ( iconClass ?? "" );
     icon.appendChild( svg );
 
     return icon;
@@ -1368,6 +1424,19 @@ function init( options = { } )
 
 LX.init = init;
 
+/**
+ * @method setStrictViewport
+ * @param {Boolean} value
+ */
+
+function setStrictViewport( value )
+{
+    this.usingStrictViewport = value ?? true;
+    document.documentElement.setAttribute( "data-strictVP", ( this.usingStrictViewport ) ? "true" : "false" );
+}
+
+LX.setStrictViewport = setStrictViewport;
+
 /**
  * @method setCommandbarState
  * @param {Boolean} value
@@ -2232,6 +2301,8 @@ class ColorPicker {
 
         doAsync( this._svToPosition.bind( this, this.currentColor.hsv.s, this.currentColor.hsv.v ) );
 
+        let pickerRect = null;
+
         let innerMouseDown = e => {
             var doc = this.root.ownerDocument;
             doc.addEventListener( 'mousemove', innerMouseMove );
@@ -2246,15 +2317,15 @@ class ColorPicker {
             this.intSatMarker.style.top = currentTop + "px";
             this._positionToSv( currentLeft, currentTop );
             this._updateColorValue();
+
+            pickerRect = this.colorPickerBackground.getBoundingClientRect();
         }
 
         let innerMouseMove = e => {
             const dX = e.movementX;
             const dY = e.movementY;
-
-            const rect = this.colorPickerBackground.getBoundingClientRect();
-            const mouseX = e.offsetX - rect.x;
-            const mouseY = e.offsetY - rect.y;
+            const mouseX = e.x - pickerRect.x;
+            const mouseY = e.y - pickerRect.y;
 
             if ( dX != 0 && ( mouseX >= 0 || dX < 0 ) && ( mouseX < this.colorPickerBackground.offsetWidth || dX > 0 ) )
             {
@@ -2324,6 +2395,8 @@ class ColorPicker {
             this._updateColorValue();
         };
 
+        let hueTrackerRect = null;
+
         let innerMouseDownHue = e => {
             const doc = this.root.ownerDocument;
             doc.addEventListener( 'mousemove', innerMouseMoveHue );
@@ -2334,15 +2407,15 @@ class ColorPicker {
 
             const hueX = clamp( e.offsetX - this.markerHalfSize, 0, this.colorPickerTracker.offsetWidth - this.markerSize );
             _fromHueX( hueX );
+
+            hueTrackerRect = this.colorPickerTracker.getBoundingClientRect();
         }
 
         let innerMouseMoveHue = e => {
-            let dX = e.movementX;
-
-            const rect = this.colorPickerTracker.getBoundingClientRect();
-            const mouseX = e.offsetX - rect.x;
+            const dX = e.movementX;
+            const mouseX = e.x - hueTrackerRect.x;
 
-            if ( dX != 0 && ( mouseX >= 0 || dX < 0 ) && ( mouseX < this.colorPickerTracker.offsetWidth || dX > 0 ) )
+            if ( dX != 0 && ( mouseX >= this.markerHalfSize || dX < 0 ) && ( mouseX < ( this.colorPickerTracker.offsetWidth - this.markerHalfSize ) || dX > 0 ) )
             {
                 const hueX = LX.clamp( parseInt( this.hueMarker.style.left ) + dX, 0, this.colorPickerTracker.offsetWidth - this.markerSize );
                 _fromHueX( hueX )
@@ -2387,6 +2460,8 @@ class ColorPicker {
                 this.alphaMarker.style.backgroundColor = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b },${ this.currentColor.css.a })`;
             };
 
+            let alphaTrackerRect = null;
+
             let innerMouseDownAlpha = e => {
                 const doc = this.root.ownerDocument;
                 doc.addEventListener( 'mousemove', innerMouseMoveAlpha );
@@ -2396,15 +2471,14 @@ class ColorPicker {
                 e.stopPropagation();
                 const alphaX = clamp( e.offsetX - this.markerHalfSize, 0, this.alphaTracker.offsetWidth - this.markerSize );
                 _fromAlphaX( alphaX );
+                alphaTrackerRect = this.alphaTracker.getBoundingClientRect();
             }
 
             let innerMouseMoveAlpha = e => {
-                let dX = e.movementX;
-
-                const rect = this.alphaTracker.getBoundingClientRect();
-                const mouseX = e.offsetX - rect.x;
+                const dX = e.movementX;
+                const mouseX = e.x - alphaTrackerRect.x;
 
-                if ( dX != 0 && ( mouseX >= 0 || dX < 0 ) && ( mouseX < this.alphaTracker.offsetWidth || dX > 0 ) )
+                if ( dX != 0 && ( mouseX >= this.markerHalfSize || dX < 0 ) && ( mouseX < ( this.alphaTracker.offsetWidth - this.markerHalfSize ) || dX > 0 ) )
                 {
                     const alphaX = LX.clamp( parseInt( this.alphaMarker.style.left ) + dX, 0, this.alphaTracker.offsetWidth - this.markerSize );
                     _fromAlphaX( alphaX );
@@ -2435,9 +2509,23 @@ class ColorPicker {
         this.labelWidget = new TextInput( null, "", null, { inputClass: "bg-none", fit: true, disabled: true } );
         colorLabel.appendChild( this.labelWidget.root );
 
-        colorLabel.appendChild( new Button(null, "eyedrop",  async () => {
-            navigator.clipboard.writeText( this.labelWidget.value() );
-        }, { icon: "copy", buttonClass: "bg-none", className: "ml-auto", title: "Copy" }).root );
+        // Copy button
+        {
+            const copyButtonWidget = new Button(null, "copy",  async () => {
+                navigator.clipboard.writeText( this.labelWidget.value() );
+                copyButtonWidget.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "none";
+
+                doAsync( () => {
+                    copyButtonWidget.root.swap( true );
+                    copyButtonWidget.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "auto";
+                }, 3000 );
+
+            }, { swap: "check", icon: "copy", buttonClass: "bg-none", className: "ml-auto", title: "Copy" })
+
+            copyButtonWidget.root.querySelector( ".swap-on svg path" ).style.fill = "#42d065";
+
+            colorLabel.appendChild( copyButtonWidget.root );
+        }
 
         this._updateColorValue( hexValue, true );
 
@@ -2511,7 +2599,7 @@ class ColorPicker {
 
         if( this.useAlpha )
         {
-            this.alphaTracker.style.color = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b },${ this.currentColor.css.a })`;
+            this.alphaTracker.style.color = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b })`;
         }
 
         const toFixed = ( s, n = 2) => { return s.toFixed( n ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' ) };
@@ -2519,7 +2607,7 @@ class ColorPicker {
         if( this.colorModel == "CSS" )
         {
             const { r, g, b, a } = this.currentColor.css;
-            this.labelWidget.set( `rgba(${ r },${ g },${ b }${ this.useAlpha ? ',' + toFixed( a ) : '' })` );
+            this.labelWidget.set( `rgb${ this.useAlpha ? 'a' : '' }(${ r },${ g },${ b }${ this.useAlpha ? ',' + toFixed( a ) : '' })` );
         }
         else if( this.colorModel == "Hex" )
         {
@@ -2828,7 +2916,7 @@ class Area {
      * @method split
      * @param {Object} options
      * type: Split mode (horizontal, vertical) ["horizontal"]
-     * sizes: Size of each new area (Array) ["50%", "50%"]
+     * sizes: CSS Size of each new area (Array) ["50%", "50%"]
      * resize: Allow area manual resizing [true]
      * sizes: "Allow the area to be minimized [false]
      */
@@ -2843,11 +2931,12 @@ class Area {
             this.root = this.sections[ 1 ].root;
         }
 
-        const type = options.type || "horizontal";
+        const type = options.type ?? "horizontal";
         const sizes = options.sizes || [ "50%", "50%" ];
         const auto = (options.sizes === 'auto') || ( options.sizes && options.sizes[ 0 ] == "auto" && options.sizes[ 1 ] == "auto" );
 
-        if( !sizes[ 1 ] )
+        // Secondary area fills space
+        if( !sizes[ 1 ] || ( sizes[ 0 ] != "auto" && sizes[ 1 ] == "auto" ) )
         {
             let size = sizes[ 0 ];
             let margin = options.top ? options.top : 0;
@@ -2860,17 +2949,13 @@ class Area {
             sizes[ 1 ] = "calc( 100% - " + size + " )";
         }
 
-        // Create areas
-        let area1 = new Area( { skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
-        let area2 = new Area( { skipAppend: true, className: "split" } );
-
-        area1.parentArea = this;
-        area2.parentArea = this;
-
         let minimizable = options.minimizable ?? false;
         let resize = ( options.resize ?? true ) || minimizable;
+        let fixedSize = options.fixedSize ?? !resize;
+        let splitbarOffset = 0;
+        let primarySize = [];
+        let secondarySize = [];
 
-        let data = "0px";
         this.offset = 0;
 
         if( resize )
@@ -2890,93 +2975,104 @@ class Area {
 
             this.splitBar.addEventListener( 'mousedown', innerMouseDown );
 
-            data = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ) + "px"; // updates
-
-            // Being minimizable means it's also resizeable!
-            if( minimizable )
-            {
-                this.splitExtended = false;
-
-                // Keep state of the animation when ends...
-                area2.root.addEventListener('animationend', e => {
-                    const opacity = getComputedStyle( area2.root ).opacity;
-                    area2.root.classList.remove( e.animationName + "-" + type );
-                    area2.root.style.opacity = opacity;
-                    flushCss(area2.root);
-                });
-
-                this.splitBar.addEventListener("contextmenu", e => {
-                    e.preventDefault();
-                    addContextMenu(null, e, c => {
-                        c.add("Extend", { disabled: this.splitExtended, callback: () => { this.extend() } });
-                        c.add("Reduce", { disabled: !this.splitExtended, callback: () => { this.reduce() } });
-                    });
-                });
-            }
+            splitbarOffset = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ); // updates
         }
 
         if( type == "horizontal" )
         {
-            let width1 = sizes[ 0 ],
-                width2 = sizes[ 1 ];
+            this.root.style.display = "flex";
 
-            if( width1.constructor == Number )
+            if( !fixedSize )
             {
-                width1 += "px";
-            }
+                const parentWidth = this.root.offsetWidth;
+                const leftPx = parsePixelSize( sizes[ 0 ], parentWidth );
+                const rightPx = parsePixelSize(  sizes[ 1 ], parentWidth );
+                const leftPercent = ( leftPx / parentWidth ) * 100;
+                const rightPercent = ( rightPx / parentWidth ) * 100;
 
-            if( width2.constructor == Number )
+                // Style using percentages
+                primarySize[ 0 ] = `calc(${ leftPercent }% - ${ splitbarOffset }px)`;
+                secondarySize[ 0 ] = `calc(${ rightPercent }% - ${ splitbarOffset }px)`;
+            }
+            else
             {
-                width2 += "px";
+                primarySize[ 0 ] = `calc(${ sizes[ 0 ] } - ${ splitbarOffset }px)`;
+                secondarySize[ 0 ] = `calc(${ sizes[ 1 ] } - ${ splitbarOffset }px)`;
             }
 
-            area1.root.style.width = "calc( " + width1 + " - " + data + " )";
-            area1.root.style.height = "calc(100% - 0px)";
-            area2.root.style.width = "calc( " + width2 + " - " + data + " )";
-            area2.root.style.height = "calc(100% - 0px)";
-            this.root.style.display = "flex";
+            primarySize[ 1 ] = "100%";
+            secondarySize[ 1 ] = "100%";
         }
         else // vertical
         {
-            area1.root.style.width = "100%";
-            area2.root.style.width = "100%";
-
             if( auto )
             {
-                area1.root.style.height = "auto";
-
-                // Listen resize event on first area
-                const resizeObserver = new ResizeObserver( entries => {
-                    for ( const entry of entries )
-                    {
-                        const size = entry.target.getComputedSize();
-                        area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
-                    }
-                });
+                primarySize[ 1 ] = "auto";
+            }
+            else if( !fixedSize )
+            {
+                const parentHeight = this.root.offsetHeight;
+                const topPx = parsePixelSize( sizes[ 0 ], parentHeight );
+                const bottomPx = parsePixelSize( sizes[ 1 ], parentHeight );
+                const topPercent = ( topPx / parentHeight ) * 100;
+                const bottomPercent = ( bottomPx / parentHeight ) * 100;
 
-                resizeObserver.observe( area1.root );
+                primarySize[ 1 ] = ( sizes[ 0 ] == "auto" ? "auto" : `calc(${ topPercent }% - ${ splitbarOffset }px)`);
+                secondarySize[ 1 ] = ( sizes[ 1 ] == "auto" ? "auto" : `calc(${ bottomPercent }% - ${ splitbarOffset }px)`);
             }
             else
             {
-                let height1 = sizes[ 0 ],
-                    height2 = sizes[ 1 ];
+                primarySize[ 1 ] = ( sizes[ 0 ] == "auto" ? "auto" : `calc(${ sizes[ 0 ] } - ${ splitbarOffset }px)`);
+                secondarySize[ 1 ] = ( sizes[ 1 ] == "auto" ? "auto" : `calc(${ sizes[ 1 ] } - ${ splitbarOffset }px)`);
+            }
 
-                if( height1.constructor == Number )
-                {
-                    height1 += "px";
-                }
+            primarySize[ 0 ] = "100%";
+            secondarySize[ 0 ] = "100%";
+        }
+
+        // Create areas
+        let area1 = new Area( { width: primarySize[ 0 ], height: primarySize[ 1 ], skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
+        let area2 = new Area( { width: secondarySize[ 0 ], height: secondarySize[ 1 ], skipAppend: true, className: "split" } );
 
-                if( height2.constructor == Number )
+        if( auto && type == "vertical" )
+        {
+            // Listen resize event on first area
+            const resizeObserver = new ResizeObserver( entries => {
+                for ( const entry of entries )
                 {
-                    height2 += "px";
+                    const size = entry.target.getComputedSize();
+                    area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
                 }
+            });
 
-                area1.root.style.width = "100%";
-                area1.root.style.height = ( height1 == "auto" ? height1 : "calc( " + height1 + " - " + data + " )");
-                area2.root.style.height = ( height2 == "auto" ? height2 : "calc( " + height2 + " - " + data + " )");
-            }
+            resizeObserver.observe( area1.root );
         }
 
+        // Being minimizable means it's also resizeable!
+        if( resize && minimizable )
+        {
+            this.splitExtended = false;
+
+            // Keep state of the animation when ends...
+            area2.root.addEventListener('animationend', e => {
+                const opacity = getComputedStyle( area2.root ).opacity;
+                area2.root.classList.remove( e.animationName + "-" + type );
+                area2.root.style.opacity = opacity;
+                flushCss( area2.root );
+            });
+
+            this.splitBar.addEventListener("contextmenu", e => {
+                e.preventDefault();
+                addContextMenu(null, e, c => {
+                    c.add("Extend", { disabled: this.splitExtended, callback: () => { this.extend() } });
+                    c.add("Reduce", { disabled: !this.splitExtended, callback: () => { this.reduce() } });
+                });
+            });
+        }
+
+        area1.parentArea = this;
+        area2.parentArea = this;
+
         this.root.appendChild( area1.root );
 
         if( resize )
@@ -2985,6 +3081,7 @@ class Area {
         }
 
         this.root.appendChild( area2.root );
+
         this.sections = [ area1, area2 ];
         this.type = type;
 
@@ -3098,10 +3195,10 @@ class Area {
             return;
         }
 
-        let [area1, area2] = this.sections;
+        let [ area1, area2 ] = this.sections;
         this.splitExtended = true;
 
-        if( this.type == "vertical")
+        if( this.type == "vertical" )
         {
             this.offset = area2.root.offsetHeight;
             area2.root.classList.add("fadeout-vertical");
@@ -3112,7 +3209,7 @@ class Area {
         {
             this.offset = area2.root.offsetWidth - 8; // Force some height here...
             area2.root.classList.add("fadeout-horizontal");
-            this._moveSplit(-Infinity, true, 8);
+            this._moveSplit( -Infinity, true, 8 );
         }
 
         doAsync( () => this.propagateEvent('onresize'), 150 );
@@ -3219,8 +3316,7 @@ class Area {
 
         LX.menubars.push( menubar );
 
-        const height = 48; // pixels
-        const [ bar, content ] = this.split({ type: 'vertical', sizes: [height, null], resize: false, menubar: true });
+        const [ bar, content ] = this.split({ type: 'vertical', sizes: ["48px", null], resize: false, menubar: true });
         menubar.siblingArea = content;
 
         bar.attach( menubar );
@@ -3337,7 +3433,8 @@ class Area {
                 img: b.img,
                 className: b.class ?? "",
                 title: b.name,
-                overflowContainerX: overlayPanel.root
+                overflowContainerX: overlayPanel.root,
+                swap: b.swap
             };
 
             if( group )
@@ -3474,7 +3571,7 @@ class Area {
 
         const a2 = this.sections[ 1 ];
         const a2Root = a2.root;
-        const splitData = " - "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
+        const splitData = "- "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
 
         let transition = null;
         if( !forceAnimation )
@@ -3482,30 +3579,47 @@ class Area {
             // Remove transitions for this change..
             transition = a1Root.style.transition;
             a1Root.style.transition = a2Root.style.transition = "none";
-            flushCss( a1Root );
-            flushCss( a2Root );
+            // flushCss( a1Root );
         }
 
         if( this.type == "horizontal" )
         {
             var size = Math.max( a2Root.offsetWidth + dt, parseInt( a2.minWidth ) );
             if( forceWidth ) size = forceWidth;
-            a1Root.style.width = "-moz-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.width = "-webkit-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.width = "calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.minWidth = parseInt( a1.minWidth ) + "px";
-            a2Root.style.width = size + "px";
-            if( a1.maxWidth != Infinity ) a2Root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
+
+            const parentWidth = this.size[ 0 ];
+            const rightPercent = ( size / parentWidth ) * 100;
+            const leftPercent = Math.max( 0, 100 - rightPercent );
+
+            a1Root.style.width = `-moz-calc(${ leftPercent }% ${ splitData })`;
+            a1Root.style.width = `-webkit-calc( ${ leftPercent }% ${ splitData })`;
+            a1Root.style.width = `calc( ${ leftPercent }% ${ splitData })`;
+            a2Root.style.width = `${ rightPercent }%`;
+            a2Root.style.width = `${ rightPercent }%`;
+            a2Root.style.width = `${ rightPercent }%`;
+
+            if( a1.maxWidth != Infinity )
+            {
+                a2Root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
+            }
         }
         else
         {
-            var size = Math.max((a2Root.offsetHeight + dt) + a2.offset, parseInt(a2.minHeight));
+            var size = Math.max( ( a2Root.offsetHeight + dt ) + a2.offset, parseInt(a2.minHeight) );
             if( forceWidth ) size = forceWidth;
-            a1Root.style.height = "-moz-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.height = "-webkit-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.height = "calc( 100% - " + size + "px " + splitData + " )";
+
+            const parentHeight = this.size[ 1 ];
+            const bottomPercent = ( size / parentHeight ) * 100;
+            const topPercent = Math.max( 0, 100 - bottomPercent );
+
+            a1Root.style.height = `-moz-calc(${ topPercent }% ${ splitData })`;
+            a1Root.style.height = `-webkit-calc( ${ topPercent }% ${ splitData })`;
+            a1Root.style.height = `calc( ${ topPercent }% ${ splitData })`;
+            a2Root.style.height = `${ bottomPercent }%`;
+            a2Root.style.height = `${ bottomPercent }%`;
+            a2Root.style.height = `${ bottomPercent }%`;
+
             a1Root.style.minHeight = a1.minHeight + "px";
-            a2Root.style.height = ( size - a2.offset ) + "px";
         }
 
         if( !forceAnimation )
@@ -3514,10 +3628,10 @@ class Area {
             a1Root.style.transition = a2Root.style.transition = transition;
         }
 
-        this._update();
-
-        // Resize events
-        this.propagateEvent( 'onresize' );
+        doAsync( () => {
+            this._update();
+            this.propagateEvent( 'onresize' );
+        }, 10 );
     }
 
     _disableSplitResize() {
@@ -4396,7 +4510,7 @@ class Menubar {
         // Otherwise, create it
         button = document.createElement('div');
         const disabled = options.disabled ?? false;
-        button.className = "lexmenubutton" + (disabled ? " disabled" : "");
+        button.className = "lexmenubutton main" + (disabled ? " disabled" : "");
         button.title = name;
         button.innerHTML = "<a><image src='" + src + "' class='lexicon' style='height:32px;'></a>";
 
@@ -4560,7 +4674,7 @@ class SideBar {
 
             if( this.collapsable )
             {
-                const icon = LX.makeIcon( "sidebar", "Toggle Sidebar", "toggler" );
+                const icon = LX.makeIcon( "sidebar", { title: "Toggle Sidebar", iconClass: "toggler" } );
                 this.header.appendChild( icon );
 
                 icon.addEventListener( "click", (e) => {
@@ -5047,7 +5161,7 @@ class SideBar {
 
             if( options.action )
             {
-                const actionIcon = LX.makeIcon( options.action.icon ?? "more-horizontal", options.action.name );
+                const actionIcon = LX.makeIcon( options.action.icon ?? "more-horizontal", { title: options.action.name } );
                 itemDom.appendChild( actionIcon );
 
                 actionIcon.addEventListener( "click", (e) => {
@@ -5107,7 +5221,7 @@ class SideBar {
 
                 if( suboptions.action )
                 {
-                    const actionIcon = LX.makeIcon( suboptions.action.icon ?? "more-horizontal", suboptions.action.name );
+                    const actionIcon = LX.makeIcon( suboptions.action.icon ?? "more-horizontal", { title: suboptions.action.name } );
                     subentry.appendChild( actionIcon );
 
                     actionIcon.addEventListener( "click", (e) => {
@@ -5299,7 +5413,7 @@ class Widget {
 
     _addResetProperty( container, callback ) {
 
-        const domEl = LX.makeIcon( "rotate-left", "Reset" )
+        const domEl = LX.makeIcon( "rotate-left", { title: "Reset" } )
         domEl.style.display = "none";
         domEl.style.marginRight = "6px";
         domEl.style.marginLeft = "0";
@@ -6083,7 +6197,17 @@ class NodeTree {
 
         this.data = newData ?? this.data;
         this.domEl.querySelector( "ul" ).innerHTML = "";
-        this._createItem( null, this.data, 0, selectedId );
+        if( this.data.constructor === Object )
+        {
+            this._createItem( null, this.data, 0, selectedId );
+        }
+        else
+        {
+            for( let d of this.data )
+            {
+                this._createItem( null, d, 0, selectedId );
+            }
+        }
     }
 
     /* Refreshes the tree and focuses current element */
@@ -6210,8 +6334,8 @@ class TextInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         this.valid = ( v ) => {
@@ -6349,8 +6473,8 @@ class TextArea extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         let container = document.createElement( "div" );
@@ -6443,8 +6567,8 @@ class Button extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            wValue.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            wValue.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var wValue = document.createElement( 'button' );
@@ -6506,10 +6630,20 @@ class Button extends Widget {
             const input = document.createElement( "input" );
             input.type = "checkbox";
             wValue.prepend( input );
-            // trigger = input;
 
-            const swapIcon = document.createElement( "a" );
-            swapIcon.className = options.swap + " swap-on lexicon";
+            let swapIcon = null;
+
+            // @legacy
+            if( options.swap.includes( "fa-" ) )
+            {
+                swapIcon = document.createElement( 'a' );
+                swapIcon.className = options.swap + " swap-on lexicon";
+            }
+            else
+            {
+                swapIcon = LX.makeIcon( options.swap, { iconClass: "swap-on" } );
+            }
+
             wValue.appendChild( swapIcon );
 
             this.root.swap = function( skipCallback ) {
@@ -6696,8 +6830,8 @@ class ComboButtons extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         this.root.appendChild( container );
@@ -6913,8 +7047,8 @@ class Select extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         let container = document.createElement( "div" );
@@ -7261,11 +7395,8 @@ class Curve extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
-            flushCss( container );
-            curveInstance.canvas.width = container.offsetWidth;
-            curveInstance.redraw();
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( "div" );
@@ -7282,6 +7413,16 @@ class Curve extends Widget {
         container.appendChild( curveInstance.element );
         this.curveInstance = curveInstance;
 
+        const observer = new ResizeObserver( entries => {
+            for ( const entry of entries )
+            {
+                curveInstance.canvas.width = entry.contentRect.width;
+                curveInstance.redraw();
+            }
+        });
+
+        observer.observe( container );
+
         doAsync( this.onResize.bind( this ) );
     }
 }
@@ -7315,8 +7456,8 @@ class Dial extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
             flushCss( container );
             dialInstance.element.style.height = dialInstance.element.offsetWidth + "px";
             dialInstance.canvas.width = dialInstance.element.offsetWidth;
@@ -7370,8 +7511,8 @@ class Layers extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( "div" );
@@ -7595,8 +7736,8 @@ class List extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            listContainer.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            listContainer.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         this._updateValues = ( newValues ) => {
@@ -7672,8 +7813,8 @@ class Tags extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            tagsContainer.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            tagsContainer.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         // Show tags
@@ -7773,8 +7914,8 @@ class Checkbox extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( "div" );
@@ -7856,8 +7997,8 @@ class Toggle extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement('div');
@@ -8039,8 +8180,8 @@ class ColorInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( 'span' );
@@ -8130,8 +8271,8 @@ class RangeInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         const container = document.createElement( 'div' );
@@ -8244,8 +8385,8 @@ class NumberInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( 'div' );
@@ -8400,7 +8541,6 @@ class NumberInput extends Widget {
                 else if( e.altKey ) mult *= 0.1;
                 value = ( +vecinput.valueAsNumber + mult * dt );
                 this.set( value, false, e );
-                // vecinput.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
             }
 
             e.stopPropagation();
@@ -8481,8 +8621,8 @@ class Vector extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         const vectorInputs = [];
@@ -8835,8 +8975,8 @@ class OTPInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         this.disabled = options.disabled ?? false;
@@ -8981,8 +9121,8 @@ class Pad extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( 'div' );
@@ -9101,8 +9241,8 @@ class Progress extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         const container = document.createElement('div');
@@ -9228,8 +9368,8 @@ class FileInput extends Widget {
         let read = options.read ?? true;
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            input.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            input.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         // Create hidden input
@@ -9555,8 +9695,8 @@ class Table extends Widget {
         super( Widget.TABLE, name, null, options );
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         const container = document.createElement('div');
@@ -9615,7 +9755,7 @@ class Table extends Widget {
 
             if( this.customFilters )
             {
-                const icon = LX.makeIcon( "circle-plus", null, "sm" );
+                const icon = LX.makeIcon( "circle-plus", { svgClass: "sm" } );
 
                 for( let f of this.customFilters )
                 {
@@ -9640,7 +9780,6 @@ class Table extends Widget {
                     headerContainer.appendChild( customFilterBtn.root );
                 }
 
-                // const resetIcon = LX.makeIcon( "xmark", null, "sm" );
                 this._resetCustomFiltersBtn = new Button(null, "resetButton", ( v ) => {
                     this.activeCustomFilters = {};
                     this.refresh();
@@ -9652,7 +9791,7 @@ class Table extends Widget {
 
             if( this.toggleColumns )
             {
-                const icon = LX.makeIcon( "sliders" );
+                const icon = LX.makeIcon( "sliders-large" );
                 const toggleColumnsBtn = new Button( "toggleColumnsBtn", icon.innerHTML + "View", (value, e) => {
                     const menuOptions = data.head.map( ( colName, idx ) => {
                         const item = {
@@ -9735,7 +9874,7 @@ class Table extends Widget {
                 {
                     const th = document.createElement( 'th' );
                     th.innerHTML = `<span>${ headData }</span>`;
-                    th.querySelector( "span" ).appendChild( LX.makeIcon( "menu-arrows", null, "sm" ) );
+                    th.querySelector( "span" ).appendChild( LX.makeIcon( "menu-arrows", { svgClass: "sm" } ) );
 
                     const idx = data.head.indexOf( headData );
                     if( this.centered && this.centered.indexOf( idx ) > -1 )
@@ -9986,7 +10125,7 @@ class Table extends Widget {
 
                             if( action == "delete" )
                             {
-                                button = LX.makeIcon( "trash-can", "Delete Row" );
+                                button = LX.makeIcon( "trash-can", { title: "Delete Row" } );
                                 button.addEventListener( 'click', function() {
                                     // Don't need to refresh table..
                                     data.body.splice( r, 1 );
@@ -9995,7 +10134,7 @@ class Table extends Widget {
                             }
                             else if( action == "menu" )
                             {
-                                button = LX.makeIcon( "more-horizontal", "Menu" );
+                                button = LX.makeIcon( "more-horizontal", { title: "Menu" } );
                                 button.addEventListener( 'click', function( event ) {
                                     if( !options.onMenuAction )
                                     {
@@ -10011,7 +10150,7 @@ class Table extends Widget {
                             else // custom actions
                             {
                                 console.assert( action.constructor == Object );
-                                button = LX.makeIcon( action.icon, action.title );
+                                button = LX.makeIcon( action.icon, { title: action.title } );
 
                                 if( action.callback )
                                 {
@@ -12308,12 +12447,6 @@ class CanvasCurve {
             if( o.xrange ) element.xrange = o.xrange;
             if( o.yrange ) element.yrange = o.yrange;
             if( o.smooth ) element.smooth = o.smooth;
-            var rect = canvas.parentElement.getBoundingClientRect();
-            if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
-            if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
-            {
-                canvas.width = rect.width;
-            }
 
             var ctx = canvas.getContext( "2d" );
             ctx.setTransform( 1, 0, 0, 1, 0, 0 );
@@ -12648,12 +12781,6 @@ class CanvasDial {
             if( o.xrange ) element.xrange = o.xrange;
             if( o.yrange ) element.yrange = o.yrange;
             if( o.smooth ) element.smooth = o.smooth;
-            var rect = canvas.parentElement.getBoundingClientRect();
-            if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
-            if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
-            {
-                canvas.width = rect.width;
-            }
 
             var ctx = canvas.getContext( "2d" );
             ctx.setTransform( 1, 0, 0, 1, 0, 0 );