lexgui 0.1.32 → 0.1.34

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.32",
+    version: "0.1.34",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -21,8 +21,11 @@ LX.MOUSE_RIGHT_CLICK    = 2;
 LX.MOUSE_DOUBLE_CLICK = 2;
 LX.MOUSE_TRIPLE_CLICK = 3;
 
-function clamp (num, min, max) { return Math.min(Math.max(num, min), max) }
-function round(num, n) { return +num.toFixed(n); }
+LX.CURVE_MOVEOUT_CLAMP = 0;
+LX.CURVE_MOVEOUT_DELETE = 1;
+
+function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
+function round( num, n ) { return +num.toFixed( n ); }
 
 function getSupportedDOMName( string )
 {
@@ -624,6 +627,7 @@ class TreeEvent {
         this.node = node;
         this.value = value;
         this.multiple = false; // Multiple selection
+        this.panel = null;
     }
     
     string() {
@@ -744,6 +748,27 @@ class Area {
         {
             this.root.classList.add("overlay-" + overlay);
 
+            if(options.left) {
+                this.root.style.left = options.left;
+            }
+            if(options.right) {
+                this.root.style.right = options.right;
+            }
+            if(options.top) {
+                this.root.style.top = options.top;
+            }
+            if(options.bottom) {
+                this.root.style.bottom = options.bottom;
+            }
+            
+            const draggable = options.draggable ?? true;
+            if( draggable )
+                makeDraggable( root );
+
+            if( options.resizeable ) {
+                root.classList.add("resizeable");
+            }
+            
             if(options.resize)
             {                  
                 this.split_bar = document.createElement("div");
@@ -2575,7 +2600,8 @@ LX.ADD_CUSTOM_WIDGET = ADD_CUSTOM_WIDGET;
 
 class NodeTree {
         
-    constructor(domEl, data, options) {
+    constructor( domEl, data, options ) {
+
         this.domEl = domEl;
         this.data = data;
         this.onevent = options.onevent;
@@ -2583,10 +2609,10 @@ class NodeTree {
         this.selected = [];
 
         if(data.constructor === Object)
-            this._create_item(null, data);
+            this._create_item( null, data );
         else
             for( let d of data )
-                this._create_item(null, d);
+                this._create_item( null, d );
     }
 
     _create_item( parent, node, level = 0, selectedId ) {
@@ -2653,32 +2679,32 @@ class NodeTree {
                 return;
             }
 
-            if(!e.shiftKey) {
-                list.querySelectorAll("li").forEach( e => { e.classList.remove('selected'); } );
+            if( !e.shiftKey ) {
+                list.querySelectorAll( "li" ).forEach( e => { e.classList.remove( 'selected' ); } );
                 this.selected.length = 0;
             }
             
             // Add or remove
             const idx = this.selected.indexOf( node );
             if( idx > -1 ) {
-                item.classList.remove('selected');
-                this.selected.splice(idx, 1);
+                item.classList.remove( 'selected' );
+                this.selected.splice( idx, 1 );
             }else {
-                item.classList.add('selected');
+                item.classList.add( 'selected' );
                 this.selected.push( node );
             }
 
             // Only Show children...
-            if(is_parent && node.id.length > 1 /* Strange case... */) {
+            if( is_parent && node.id.length > 1 /* Strange case... */) {
                 node.closed = false;
-                if(that.onevent) {
+                if( that.onevent ) {
                     const event = new TreeEvent(TreeEvent.NODE_CARETCHANGED, node, node.closed);
                     that.onevent( event );
                 }
                 that.frefresh( node.id );
             }
 
-            if(that.onevent) {
+            if( that.onevent ) {
                 const event = new TreeEvent(TreeEvent.NODE_SELECTED, e.shiftKey ? this.selected : node );
                 event.multiple = e.shiftKey;
                 that.onevent( event );
@@ -2686,15 +2712,17 @@ class NodeTree {
         });
 
         item.addEventListener("dblclick", function() {
+
             if( that.options.rename ?? true )
             {
                 // Trigger rename
                 node.rename = true;
                 that.refresh();
             }
+
             if( that.onevent )
             {
-                const event = new TreeEvent(TreeEvent.NODE_DBLCLICKED, node);
+                const event = new TreeEvent( TreeEvent.NODE_DBLCLICKED, node );
                 that.onevent( event );
             }
         });
@@ -2704,19 +2732,88 @@ class NodeTree {
             if(that.onevent) {
                 const event = new TreeEvent(TreeEvent.NODE_CONTEXTMENU, this.selected.length > 1 ? this.selected : node, e);
                 event.multiple = this.selected.length > 1;
+
+                LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+                    event.panel = m;
+                });
+
                 that.onevent( event );
+
+                if( ( this.options.addDefault ?? false ) == true )
+                {
+                    if( event.panel.items )
+                    {
+                        event.panel.add( "" );
+                    }
+    
+                    event.panel.add( "Select Children", () => {
+    
+                        const selectChildren = ( n ) => {
+                            
+                            if( n.closed )
+                            {
+                                return;
+                            }
+    
+                            for( let child of n.children ?? [] )
+                            {
+                                if( !child )
+                                {
+                                    continue;   
+                                }
+    
+                                let nodeItem = this.domEl.querySelector( '#' + child.id );
+                                nodeItem.classList.add('selected');
+                                this.selected.push( child ); 
+                                selectChildren( child );
+                            }
+                        };
+    
+                        // Add childs of the clicked node
+                        selectChildren( node );
+    
+                    } );
+                    
+                    // event.panel.add( "Clone", { callback: () => {
+    
+                    // } } );
+    
+                    event.panel.add( "Delete", { callback: () => {
+    
+                        // It's the root node
+                        if( !node.parent )
+                        {
+                            return;
+                        }
+    
+                        if( that.onevent ) {
+                            const event = new TreeEvent( TreeEvent.NODE_DELETED, node, e );
+                            that.onevent( event );
+                        }
+    
+                        // Delete nodes now
+                        let childs = node.parent.children;
+                        const index = childs.indexOf( node );
+                        childs.splice( index, 1 );
+    
+                        this.refresh();
+                    } } );
+                }
             }
         });
 
         item.addEventListener("keydown", e => {
-            if(node.rename)
-            return;
+
+            if( node.rename )
+                return;
+
             e.preventDefault();
+
             if( e.key == "Delete" )
             {
                 // Send event now so we have the info in selected array..
-                if(that.onevent) {
-                    const event = new TreeEvent(TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e);
+                if( that.onevent ) {
+                    const event = new TreeEvent( TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e );
                     event.multiple = this.selected.length > 1;
                     that.onevent( event );
                 }
@@ -2734,8 +2831,8 @@ class NodeTree {
             }
             else if( e.key == "ArrowUp" || e.key == "ArrowDown" ) // Unique or zero selected
             {
-                var selected = this.selected.length > 1 ? (e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop()) : this.selected[0];
-                var el = this.domEl.querySelector("#" + LX.getSupportedDOMName( selected.id ) );
+                var selected = this.selected.length > 1 ? ( e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop() ) : this.selected[ 0 ];
+                var el = this.domEl.querySelector( "#" + LX.getSupportedDOMName( selected.id ) );
                 var sibling = e.key == "ArrowUp" ? el.previousSibling : el.nextSibling;
                 if( sibling ) sibling.click();
             }
@@ -3227,6 +3324,10 @@ class Panel {
             {
                 let domName = document.createElement('div');
                 domName.className = "lexwidgetname";
+                if( options.justifyName )
+                {
+                    domName.classList.add( "float-" + options.justifyName );
+                }
                 domName.innerHTML = name || "";
                 domName.title = options.title ?? domName.innerHTML;
                 domName.style.width = options.nameWidth || LX.DEFAULT_NAME_WIDTH;
@@ -3532,8 +3633,9 @@ class Panel {
      * placeholder: Add input placeholder
      * trigger: Choose onchange trigger (default, input) [default]
      * inputWidth: Width of the text input
-     * float: Justify text
      * skipReset: Don't add the reset value button when value changes
+     * float: Justify input text content
+     * justifyName: Justify name content
      */
 
     addText( name, value, callback, options = {} ) {
@@ -3857,7 +3959,10 @@ class Panel {
 
             if(options.selected == b.value) 
                 buttonEl.classList.add("selected");
-                
+            
+            if(b.id) 
+                buttonEl.id = b.id;
+            
             buttonEl.innerHTML = (b.icon ? "<a class='" + b.icon +"'></a>" : "") + "<span>" + (b.icon ? "" : b.value) + "</span>";
             
             if(options.disabled)
@@ -4017,37 +4122,39 @@ class Panel {
 
     addDropdown( name, values, value, callback, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.DROPDOWN, options);
+        let widget = this.create_widget( name, Widget.DROPDOWN, options );
+
         widget.onGetValue = () => {
-            return element.querySelector("li.selected").getAttribute('value');
+            return element.querySelector( "li.selected" ).getAttribute( 'value' );
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (newValue != wValue.iValue ? "block" : "none");
+            let btn = element.querySelector( ".lexwidgetname .lexicon" );
+            if( btn ) btn.style.display = ( newValue != wValue.iValue ? "block" : "none" );
             value = newValue;
-            list.querySelectorAll('li').forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
-            if( !skipCallback ) this._trigger( new IEvent(name, value, null), callback ); 
+            list.querySelectorAll( 'li' ).forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
+            if( !skipCallback ) this._trigger( new IEvent( name, value, null ), callback );
         };
 
         let element = widget.domEl;
         let that = this;
 
         // Add reset functionality
-        if(widget.name && !(options.skipReset ?? false))
+        if(widget.name && !( options.skipReset ?? false ))
         {
-            Panel._add_reset_property(element.domName, function() {
+            Panel._add_reset_property( element.domName, function() {
                 value = wValue.iValue;
-                list.querySelectorAll('li').forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
+                list.querySelectorAll( 'li' ).forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
                 this.style.display = "none";
             });
         }
 
-        let container = document.createElement('div');
+        let container = document.createElement( 'div' );
         container.className = "lexdropdown";
         container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
         
         // Add widget value
-        let wValue = document.createElement('div');
+        let wValue = document.createElement( 'div' );
         wValue.className = "lexdropdown lexoption";
         wValue.name = name;
         wValue.iValue = value;
@@ -4058,14 +4165,15 @@ class Panel {
 
         this.queue(container);
 
-        let selectedOption = this.addButton(null, buttonName, (value, event) => {
+        let selectedOption = this.addButton( null, buttonName, (value, event) => {
             if( list.unfocus_event ) {
                 delete list.unfocus_event;
                 return;
             }
-            element.querySelector(".lexoptions").style.top = (selectedOption.offsetTop + selectedOption.offsetHeight) + 'px';
-            element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
-            element.querySelector(".lexoptions").toggleAttribute('hidden');
+            const topPosition = selectedOption.getBoundingClientRect().y;
+            list.style.top = (topPosition + selectedOption.offsetHeight) + 'px';
+            list.style.width = (event.currentTarget.clientWidth) + 'px';
+            list.toggleAttribute('hidden');
             list.focus();
         }, { buttonClass: 'array', skipInlineCount: true });
 
@@ -4209,7 +4317,14 @@ class Panel {
      * @param {Function} callback Callback function on change
      * @param {*} options:
      * skipReset: Don't add the reset value button when value changes
-     */
+     * bgColor: Widget background color
+     * pointsColor: Curve points color
+     * lineColor: Curve line color
+     * noOverlap: Points do not overlap, replacing themselves if necessary
+     * allowAddValues: Support adding values on click
+     * smooth: Curve smoothness
+     * moveOutAction: Clamp or delete points moved out of the curve (LX.CURVE_MOVEOUT_CLAMP, LX.CURVE_MOVEOUT_DELETE)
+    */
 
     addCurve( name, values, callback, options = {} ) {
 
@@ -4219,34 +4334,36 @@ class Panel {
 
         let that = this;
         let widget = this.create_widget(name, Widget.CURVE, options);
+
         widget.onGetValue = () => {
-            return JSON.parse(JSON.stringify(curve_instance.element.value));
+            return JSON.parse(JSON.stringify(curveInstance.element.value));
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (newValue != curve_instance.element.value ? "block" : "none");
-            curve_instance.element.value = JSON.parse(JSON.stringify(newValue));
-            curve_instance.redraw();
-            if( !skipCallback ) that._trigger( new IEvent(name, curve_instance.element.value, null), callback );
+            let btn = element.querySelector( ".lexwidgetname .lexicon" );
+            if( btn ) btn.style.display = ( newValue != curveInstance.element.value ? "block" : "none" );
+            curveInstance.element.value = JSON.parse( JSON.stringify( newValue ) );
+            curveInstance.redraw();
+            if( !skipCallback ) that._trigger( new IEvent( name, curveInstance.element.value, null ), callback );
         };
 
         let element = widget.domEl;
-        let defaultValues = JSON.parse(JSON.stringify(values));
+        let defaultValues = JSON.parse( JSON.stringify( values ) );
 
         // Add reset functionality
         if( !(options.skipReset ?? false) )
         {
             Panel._add_reset_property(element.domName, function(e) {
                 this.style.display = "none";
-                curve_instance.element.value = JSON.parse(JSON.stringify(defaultValues));
-                curve_instance.redraw();
-                that._trigger( new IEvent(name, curve_instance.element.value, e), callback );
+                curveInstance.element.value = JSON.parse( JSON.stringify( defaultValues ) );
+                curveInstance.redraw();
+                that._trigger( new IEvent( name, curveInstance.element.value, e ), callback );
             });
         }
 
         // Add widget value
 
-        var container = document.createElement('div');
+        var container = document.createElement( 'div' );
         container.className = "lexcurve";
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
@@ -4255,16 +4372,18 @@ class Panel {
             if(btn) btn.style.display = (v != defaultValues ? "block" : "none");
             that._trigger( new IEvent(name, v, e), callback );
         };
+
         options.name = name;
-        let curve_instance = new Curve(this, values, options);
-        container.appendChild(curve_instance.element);
-        element.appendChild(container);
+
+        let curveInstance = new Curve( this, values, options );
+        container.appendChild( curveInstance.element );
+        element.appendChild( container );
 
         // Resize
-        curve_instance.canvas.width = container.offsetWidth;
-        curve_instance.redraw();
-        widget.onresize = curve_instance.redraw.bind(curve_instance);
-        widget.curve_instance = curve_instance;
+        curveInstance.canvas.width = container.offsetWidth;
+        curveInstance.redraw();
+        widget.onresize = curveInstance.redraw.bind( curveInstance );
+        widget.curveInstance = curveInstance;
         return widget;
     }
 
@@ -4713,19 +4832,19 @@ class Panel {
         flag.id = "checkbox"+simple_guidGenerator();
         flag.innerHTML = "<a class='fa-solid fa-check' style='display: " + (flag.value ? "block" : "none") + "'></a>";
         
-        if(options.disabled) {
+        if( options.disabled ) {
             flag.disabled = true;
             toggle.className += " disabled";
         }
 
-        toggle.appendChild(flag);
+        toggle.appendChild( flag );
 
-        let value_name = document.createElement('span');
+        let value_name = document.createElement( 'span' );
         value_name.id = "checkboxtext";
         value_name.innerHTML = "On";
 
-        container.appendChild(toggle);
-        container.appendChild(value_name);
+        container.appendChild( toggle );
+        container.appendChild( value_name );
 
         toggle.addEventListener( "click" , e => {
 
@@ -4733,7 +4852,7 @@ class Panel {
             if( flag.disabled )
                 return;
 
-            const skipCallback = e.detail;
+            const skipCallback = ( e.detail.constructor == Number ? null : e.detail );
 
             let check = toggle.querySelector( ".checkbox a" );
 
@@ -5426,6 +5545,11 @@ class Panel {
                 callback( files[ 0 ] );
         });
 
+        input.addEventListener( 'cancel', function( e ) {
+
+            callback( null );
+        });
+
         element.appendChild( input );
 
         this.queue( element );
@@ -6388,69 +6512,71 @@ LX.addContextMenu = addContextMenu;
 
 class Curve {
 
-    constructor(panel, value, options = {}) {
+    constructor( panel, value, options = {} ) {
 
-        let element = document.createElement("div");
-        element.className = "curve " + (options.className ? options.className : "");
+        let element = document.createElement( "div" );
+        element.className = "curve " + ( options.className ? options.className : "" );
         element.style.minHeight = "50px";
         element.style.width = options.width || "100%";
+        element.style.minWidth = "50px";
+        element.style.minHeight = "20px";
 
-        element.bgcolor = options.bgcolor || LX.getThemeColor("global-dark-background");
-        element.pointscolor = options.pointscolor || LX.getThemeColor("global-selected-light");
-        element.linecolor = options.linecolor || "#555";
-
+        element.bgcolor = options.bgColor || LX.getThemeColor( "global-dark-background" );
+        element.pointscolor = options.pointsColor || LX.getThemeColor( "global-selected-light" );
+        element.linecolor = options.lineColor || "#555";
         element.value = value || [];
-        element.xrange = options.xrange || [0,1]; //min,max
-        element.yrange = options.yrange || [0,1]; //min,max
+        element.xrange = options.xrange || [ 0, 1 ]; // min, max
+        element.yrange = options.yrange || [ 0, 1 ]; // min, max
         element.defaulty = options.defaulty != null ? options.defaulty : 0.0;
-        element.no_trespassing = options.no_trespassing || false;
-        element.show_samples = options.show_samples || 0;
-        element.allow_add_values = options.allow_add_values ?? true;
-        element.draggable_x = options.draggable_x ?? true;
-        element.draggable_y = options.draggable_y ?? true;
-        element.smooth = (options.smooth && typeof(options.smooth) == 'number' ? options.smooth : 0.3) || false;
-        element.options = options;
-        element.style.minWidth = "50px";
-        element.style.minHeight = "20px";
+        element.no_overlap = options.noOverlap || false;
+        element.show_samples = options.showSamples || 0;
+        element.allow_add_values = options.allowAddValues ?? true;
+        element.draggable_x = options.draggableX ?? true;
+        element.draggable_y = options.draggableY ?? true;
+        element.smooth = (options.smooth && typeof( options.smooth ) == 'number' ? options.smooth : 0.3) || false;
+        element.move_out = options.moveOutAction ?? LX.CURVE_MOVEOUT_DELETE;
 
         this.element = element;
 
-        let canvas = document.createElement("canvas");
+        let canvas = document.createElement( "canvas" );
         canvas.width = options.width || 200;
         canvas.height = options.height || 50;
         element.appendChild( canvas );
         this.canvas = canvas;
 
-        element.addEventListener("mousedown", onmousedown);
+        element.addEventListener( "mousedown", onmousedown );
 
-        element.getValueAt = function(x) {
+        element.getValueAt = function( x ) {
 
-            if(x < element.xrange[0] || x > element.xrange[1])
+            if( x < element.xrange[ 0 ] || x > element.xrange[ 1 ] )
+            {
                 return element.defaulty;
+            }
 
-            var last = [ element.xrange[0], element.defaulty ];
+            var last = [ element.xrange[ 0 ], element.defaulty ];
             var f = 0;
-            for(var i = 0; i < element.value.length; i += 1)
+            for( var i = 0; i < element.value.length; i += 1 )
             {
-                var v = element.value[i];
-                if(x == v[0]) return v[1];
-                if(x < v[0])
+                var v = element.value[ i ];
+                if( x == v[ 0 ] ) return v[ 1 ];
+                if( x < v[ 0 ] )
                 {
-                    f = (x - last[0]) / (v[0] - last[0]);
-                    return last[1] * (1-f) + v[1] * f;
+                    f = ( x - last[ 0 ] ) / (v[ 0 ] - last[ 0 ]);
+                    return last[ 1 ] * ( 1 - f ) + v[ 1 ] * f;
                 }
+
                 last = v;
             }
 
-            v = [ element.xrange[1], element.defaulty ];
-            f = (x - last[0]) / (v[0] - last[0]);
-            return last[1] * (1-f) + v[1] * f;
+            v = [ element.xrange[ 1 ], element.defaulty ];
+            f = (x - last[ 0 ]) / (v[ 0 ] - last[ 0 ]);
+            return last[ 1 ] * ( 1 - f ) + v[ 1 ] * f;
         }
 
-        element.resample = function(samples) {
+        element.resample = function( samples ) {
 
             var r = [];
-            var dx = (element.xrange[1] - element.xrange[0]) / samples;
+            var dx = (element.xrange[1] - element.xrange[ 0 ]) / samples;
             for(var i = element.xrange[0]; i <= element.xrange[1]; i += dx)
             {
                 r.push( element.getValueAt(i) );
@@ -6476,37 +6602,33 @@ class Curve {
         function convert(v) {
             return [ canvas.width * ( v[0] - element.xrange[0])/ (element.xrange[1]),
                 canvas.height * (v[1] - element.yrange[0])/ (element.yrange[1])];
-            // return [ canvas.width * ( (element.xrange[1] - element.xrange[0]) * v[0] + element.xrange[0]),
-            //     canvas.height * ((element.yrange[1] - element.yrange[0]) * v[1] + element.yrange[0])];
         }
 
         //canvas to value
         function unconvert(v) {
             return [(v[0] * element.xrange[1] / canvas.width + element.xrange[0]),
                     (v[1] * element.yrange[1] / canvas.height + element.yrange[0])];
-            // return [(v[0] / canvas.width - element.xrange[0]) / (element.xrange[1] - element.xrange[0]),
-            //         (v[1] / canvas.height - element.yrange[0]) / (element.yrange[1] - element.yrange[0])];
         }
 
         var selected = -1;
 
-        element.redraw = function(o = {} )  {
+        element.redraw = function( o = {} )  {
             
-            if(o.value) element.value = o.value;
-            if(o.xrange) element.xrange = o.xrange;
-            if(o.yrange) element.yrange = o.yrange;
-            if(o.smooth) element.smooth = o.smooth;
+            if( o.value ) element.value = o.value;
+            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)
+            if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
+            if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
+            {
                 canvas.width = rect.width;
-            // if(rect && canvas.height != rect.height && rect.height && rect.height < 1000)
-            //     canvas.height = rect.height;
+            }
 
-            var ctx = canvas.getContext("2d");
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.translate(0,canvas.height);
-            ctx.scale(1,-1);
+            var ctx = canvas.getContext( "2d" );
+            ctx.setTransform( 1, 0, 0, 1, 0, 0 );
+            ctx.translate( 0, canvas.height );
+            ctx.scale( 1, -1 );
 
             ctx.fillStyle = element.bgcolor;
             ctx.fillRect(0,0,canvas.width,canvas.height);
@@ -6515,40 +6637,42 @@ class Curve {
             ctx.beginPath();
 
             //draw line
-            var pos = convert([element.xrange[0],element.defaulty]);
-            ctx.moveTo( pos[0], pos[1] );
-            let values = [pos[0], pos[1]];
+            var pos = convert([ element.xrange[ 0 ],element.defaulty ]);
+            ctx.moveTo( pos[ 0 ], pos[ 1 ] );
+            let values = [pos[ 0 ], pos[ 1 ]];
 
             for(var i in element.value) {
                 var value = element.value[i];
                 pos = convert(value);
-                values.push(pos[0]);
-                values.push(pos[1]);
+                values.push(pos[ 0 ]);
+                values.push(pos[ 1 ]);
                 if(!element.smooth)
-                    ctx.lineTo( pos[0], pos[1] );
+                    ctx.lineTo( pos[ 0 ], pos[ 1 ] );
             }
 
-            pos = convert([element.xrange[1],element.defaulty]);
-            values.push(pos[0]);
-            values.push(pos[1]);
-            if(!element.smooth) {
-                ctx.lineTo( pos[0], pos[1] );
+            pos = convert([ element.xrange[ 1 ], element.defaulty ]);
+            values.push(pos[ 0 ]);
+            values.push(pos[ 1 ]);
+            if( !element.smooth )
+            {
+                ctx.lineTo( pos[ 0 ], pos[ 1 ] );
                 ctx.stroke();
-            } else {
-
-                LX.UTILS.drawSpline(ctx, values, element.smooth);
+            }
+            else
+            {
+                LX.UTILS.drawSpline( ctx, values, element.smooth );
             }
 
-            //draw points
-            for(var i = 0; i < element.value.length; i += 1) {
-                var value = element.value[i];
-                pos = convert(value);
-                if(selected == i)
+            // Draw points
+            for( var i = 0; i < element.value.length; i += 1 ) {
+                var value = element.value[ i ];
+                pos = convert( value );
+                if( selected == i )
                     ctx.fillStyle = "white";
                 else
                     ctx.fillStyle = element.pointscolor;
                 ctx.beginPath();
-                ctx.arc( pos[0], pos[1], selected == i ? 4 : 3, 0, Math.PI * 2);
+                ctx.arc( pos[ 0 ], pos[ 1 ], selected == i ? 4 : 3, 0, Math.PI * 2);
                 ctx.fill();
             }
 
@@ -6557,120 +6681,134 @@ class Curve {
                 ctx.fillStyle = "#888";
                 for(var i = 0; i < samples.length; i += 1)
                 {
-                    var value = [ i * ((element.xrange[1] - element.xrange[0]) / element.show_samples) + element.xrange[0], samples[i] ];
+                    var value = [ i * ((element.xrange[ 1 ] - element.xrange[ 0 ]) / element.show_samples) + element.xrange[ 0 ], samples[ i ] ];
                     pos = convert(value);
                     ctx.beginPath();
-                    ctx.arc( pos[0], pos[1], 2, 0, Math.PI * 2);
+                    ctx.arc( pos[ 0 ], pos[ 1 ], 2, 0, Math.PI * 2);
                     ctx.fill();
                 }
             }
         }
 
-        var last_mouse = [0,0];
+        var last_mouse = [ 0, 0 ];
 
-        function onmousedown(evt) {
-            document.addEventListener("mousemove",onmousemove);
-            document.addEventListener("mouseup",onmouseup);
+        function onmousedown( e ) {
+            document.addEventListener( "mousemove", onmousemove );
+            document.addEventListener( "mouseup", onmouseup );
 
             var rect = canvas.getBoundingClientRect();
-            var mousex = evt.clientX - rect.left;
-            var mousey = evt.clientY - rect.top;
+            var mousex = e.clientX - rect.left;
+            var mousey = e.clientY - rect.top;
 
-            selected = computeSelected(mousex,canvas.height-mousey);
+            selected = computeSelected( mousex, canvas.height - mousey );
 
             if(selected == -1 && element.allow_add_values) {
-                var v = unconvert([mousex,canvas.height-mousey]);
+                var v = unconvert([ mousex, canvas.height-mousey ]);
                 element.value.push(v);
                 sortValues();
                 selected = element.value.indexOf(v);
             }
 
-            last_mouse = [mousex,mousey];
+            last_mouse = [ mousex, mousey ];
             element.redraw();
-            evt.preventDefault();
-            evt.stopPropagation();
+            e.preventDefault();
+            e.stopPropagation();
         }
 
-        function onmousemove(evt) {
+        function onmousemove( e ) {
+
             var rect = canvas.getBoundingClientRect();
-            var mousex = evt.clientX - rect.left;
-            var mousey = evt.clientY - rect.top;
+            var mousex = e.clientX - rect.left;
+            var mousey = e.clientY - rect.top;
 
-            if(mousex < 0) mousex = 0;
-            else if(mousex > canvas.width) mousex = canvas.width;
-            if(mousey < 0) mousey = 0;
-            else if(mousey > canvas.height) mousey = canvas.height;
+            if( mousex < 0 ) mousex = 0;
+            else if( mousex > canvas.width ) mousex = canvas.width;
+            if( mousey < 0 ) mousey = 0;
+            else if( mousey > canvas.height ) mousey = canvas.height;
 
-            //dragging to remove
-            if( selected != -1 && distance( [evt.clientX - rect.left, evt.clientY - rect.top], [mousex,mousey] ) > canvas.height * 0.5 )
+            // Dragging to remove
+            const currentMouseDiff = [ e.clientX - rect.left, e.clientY - rect.top ];
+            if( selected != -1 && distance( currentMouseDiff, [ mousex, mousey ] ) > canvas.height * 0.5 )
             {
-                element.value.splice(selected,1);
-                onmouseup(evt);
+                if( element.move_out == LX.CURVE_MOVEOUT_DELETE)
+                {
+                    element.value.splice( selected, 1 );
+                }
+                else
+                {
+                    const d = [ currentMouseDiff[ 0 ] - mousex, currentMouseDiff[ 1 ] - mousey ];
+                    let value = element.value[ selected ];
+                    value[ 0 ] = ( d[ 0 ] == 0.0 ) ? value[ 0 ] : ( d[ 0 ] < 0.0 ? element.xrange[ 1 ] : element.xrange[ 0 ] );
+                    value[ 1 ] = ( d[ 1 ] == 0.0 ) ? value[ 1 ] : ( d[ 1 ] < 0.0 ? element.yrange[ 1 ] : element.yrange[ 0 ] );
+                }
+
+                onmouseup( e );
                 return;
             }
 
-            var dx = element.draggable_x ? last_mouse[0] - mousex : 0;
-            var dy = element.draggable_y ? last_mouse[1] - mousey : 0;
-            var delta = unconvert([-dx,dy]);
-            if(selected != -1) {
-                var minx = element.xrange[0];
-                var maxx = element.xrange[1];
+            var dx = element.draggable_x ? last_mouse[ 0 ] - mousex : 0;
+            var dy = element.draggable_y ? last_mouse[ 1 ] - mousey : 0;
+            var delta = unconvert([ -dx, dy ]);
 
-                if(element.no_trespassing)
+            if( selected != -1 ) {
+                var minx = element.xrange[ 0 ];
+                var maxx = element.xrange[ 1 ];
+
+                if( element.no_overlap )
                 {
-                    if(selected > 0) minx = element.value[selected-1][0];
-                    if(selected < (element.value.length-1) ) maxx = element.value[selected+1][0];
+                    if( selected > 0) minx = element.value[ selected - 1 ][ 0 ];
+                    if( selected < ( element.value.length - 1 ) ) maxx = element.value[ selected + 1 ][ 0 ];
                 }
 
                 var v = element.value[selected];
-                v[0] += delta[0];
-                v[1] += delta[1];
-                if(v[0] < minx) v[0] = minx;
-                else if(v[0] > maxx) v[0] = maxx;
-                if(v[1] < element.yrange[0]) v[1] = element.yrange[0];
-                else if(v[1] > element.yrange[1]) v[1] = element.yrange[1];
+                v[ 0 ] += delta[ 0 ];
+                v[ 1 ] += delta[ 1 ];
+                if(v[ 0 ] < minx) v[ 0 ] = minx;
+                else if(v[ 0 ] > maxx) v[ 0 ] = maxx;
+                if(v[ 1 ] < element.yrange[ 0 ]) v[ 1 ] = element.yrange[ 0 ];
+                else if(v[ 1 ] > element.yrange[ 1 ]) v[ 1 ] = element.yrange[ 1 ];
             }
 
             sortValues();
             element.redraw();
-            last_mouse[0] = mousex;
-            last_mouse[1] = mousey;
-            onchange(evt);
+            last_mouse[ 0 ] = mousex;
+            last_mouse[ 1 ] = mousey;
+            onchange( e );
 
-            evt.preventDefault();
-            evt.stopPropagation();
+            e.preventDefault();
+            e.stopPropagation();
         }
 
-        function onmouseup(evt) {
+        function onmouseup( e ) {
             selected = -1;
             element.redraw();
             document.removeEventListener("mousemove", onmousemove);
             document.removeEventListener("mouseup", onmouseup);
-            onchange(evt);
-            evt.preventDefault();
-            evt.stopPropagation();
+            onchange(e);
+            e.preventDefault();
+            e.stopPropagation();
         }
         
-        function onchange(e) {
-            if(options.callback)
-                options.callback.call(element, element.value, e);
+        function onchange( e ) {
+            if( options.callback )
+                options.callback.call( element, element.value, e );
         }
 
         function distance(a,b) { return Math.sqrt( Math.pow(b[0]-a[0],2) + Math.pow(b[1]-a[1],2) ); };
 
-        function computeSelected(x,y) {
+        function computeSelected( x, y ) {
 
-            var min_dist = 100000;
-            var max_dist = 8; //pixels
+            var minDistance = 100000;
+            var maxDistance = 8; //pixels
             var selected = -1;
-            for(var i=0; i < element.value.length; i++)
+            for( var i = 0; i < element.value.length; i++ )
             {
-                var value = element.value[i];
-                var pos = convert(value);
-                var dist = distance([x,y],pos);
-                if(dist < min_dist && dist < max_dist)
+                var value = element.value[ i ];
+                var pos = convert( value );
+                var dist = distance( [ x,y ], pos );
+                if( dist < minDistance && dist < maxDistance )
                 {
-                    min_dist = dist;
+                    minDistance = dist;
                     selected = i;
                 }
             }
@@ -6679,19 +6817,23 @@ class Curve {
 
         function sortValues() {
             var v = null;
-            if(selected != -1)
-                v = element.value[selected];
-            element.value.sort(function(a,b) { return a[0] - b[0]; });
-            if(v)
-                selected = element.value.indexOf(v);
+            if( selected != -1 )
+            {
+                v = element.value[ selected ];
+            }
+            element.value.sort(function( a,b ) { return a[ 0 ] - b[ 0 ]; });
+            if( v )
+            {
+                selected = element.value.indexOf( v );
+            }
         }
         
         element.redraw();
         return this;
     }
 
-    redraw(options = {}) {
-        this.element.redraw(options);
+    redraw( options = {} ) {
+        this.element.redraw( options );
     }
 }
 
@@ -6706,6 +6848,7 @@ class AssetViewEvent {
     static ASSET_CLONED     = 4;
     static ASSET_DBLCLICKED = 5;
     static ENTER_FOLDER     = 6;
+    static ASSET_CHECKED    = 7;
 
     constructor( type, item, value ) {
         this.type = type || TreeEvent.NONE;
@@ -6723,6 +6866,7 @@ class AssetViewEvent {
             case AssetViewEvent.ASSET_CLONED: return "assetview_event_cloned";
             case AssetViewEvent.ASSET_DBLCLICKED: return "assetview_event_dblclicked";
             case AssetViewEvent.ENTER_FOLDER: return "assetview_event_enter_folder";
+            case AssetViewEvent.ASSET_CHECKED: return "assetview_event_checked";
         }
     }
 };
@@ -6746,7 +6890,7 @@ class AssetView {
     constructor( options = {} ) {
 
         this.rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
-        this.layout = AssetView.LAYOUT_CONTENT;
+        this.layout = options.layout ?? AssetView.LAYOUT_CONTENT;
         this.contentPage = 1;
 
         if(options.root_path)
@@ -7081,6 +7225,27 @@ class AssetView {
             itemEl.tabIndex = -1;
             that.content.appendChild(itemEl);
 
+            if(item.selected != undefined) {
+                let span = document.createElement('span');
+                span.className = "lexcheckbox"; 
+                let checkbox_input = document.createElement('input');
+                checkbox_input.type = "checkbox";
+                checkbox_input.className = "checkbox";
+                checkbox_input.checked = item.selected;
+                checkbox_input.addEventListener('change', (e, v) => {
+                    item.selected = !item.selected;
+                    if(that.onevent) {
+                        const event = new AssetViewEvent(AssetViewEvent.ASSET_CHECKED, e.shiftKey ? [item] : item );
+                        event.multiple = !!e.shiftKey;
+                        that.onevent( event );
+                    }
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                })
+                span.appendChild(checkbox_input);
+                itemEl.appendChild(span);
+                
+            }
             let title = document.createElement('span');
             title.className = "lexassettitle";
             title.innerText = item.id;