lexgui 0.1.33 → 0.1.34

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.33",
+        version: "0.1.34",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -25,8 +25,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     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 )
     {
@@ -4033,37 +4036,39 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         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;
@@ -4074,14 +4079,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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 });
 
@@ -4225,7 +4231,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @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 = {} ) {
 
@@ -4235,34 +4248,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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 + ")";
 
@@ -4271,16 +4286,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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;
         }
 
@@ -4729,19 +4746,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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 => {
 
@@ -4749,7 +4766,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( flag.disabled )
                     return;
     
-                const skipCallback = (e.detail.constructor == Number ? null : skipCallback);
+                const skipCallback = ( e.detail.constructor == Number ? null : e.detail );
 
                 let check = toggle.querySelector( ".checkbox a" );
     
@@ -6404,78 +6421,80 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     class Curve {
 
-        constructor(panel, value, options = {}) {
-
-            let element = document.createElement("div");
-            element.className = "curve " + (options.className ? options.className : "");
+        constructor( panel, value, options = {} ) {
+    
+            let element = document.createElement( "div" );
+            element.className = "curve " + ( options.className ? options.className : "" );
             element.style.minHeight = "50px";
             element.style.width = options.width || "100%";
-
-            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.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.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.defaulty = options.defaulty != null ? options.defaulty : 0.0;
+            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.getValueAt = function(x) {
-
-                if(x < element.xrange[0] || x > element.xrange[1])
+    
+            element.addEventListener( "mousedown", onmousedown );
+    
+            element.getValueAt = function( x ) {
+    
+                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) );
                 }
                 return r;
             }
-
+    
             element.addValue = function(v) {
-
+    
                 for(var i = 0; i < element.value; i++) {
                     var value = element.value[i];
                     if(value[0] < v[0]) continue;
@@ -6483,231 +6502,247 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     redraw();
                     return;
                 }
-
+    
                 element.value.push(v);
                 redraw();
             }
-
+    
             //value to canvas
             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);
-
+    
                 ctx.strokeStyle = element.linecolor;
                 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);
                 }
-
-                //draw points
-                for(var i = 0; i < element.value.length; i += 1) {
-                    var value = element.value[i];
-                    pos = convert(value);
-                    if(selected == i)
+                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 )
                         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();
                 }
-
+    
                 if(element.show_samples) {
                     var samples = element.resample(element.show_samples);
                     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];
-
-            function onmousedown(evt) {
-                document.addEventListener("mousemove",onmousemove);
-                document.addEventListener("mouseup",onmouseup);
-
+    
+            var last_mouse = [ 0, 0 ];
+    
+            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;
-
-                selected = computeSelected(mousex,canvas.height-mousey);
-
+                var mousex = e.clientX - rect.left;
+                var mousey = e.clientY - rect.top;
+    
+                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;
-
-                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 )
+                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;
+    
+                // 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];
-
-                    if(element.no_trespassing)
+    
+                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 ];
+    
+                    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);
-
-                evt.preventDefault();
-                evt.stopPropagation();
+                last_mouse[ 0 ] = mousex;
+                last_mouse[ 1 ] = mousey;
+                onchange( e );
+    
+                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) {
-
-                var min_dist = 100000;
-                var max_dist = 8; //pixels
+    
+            function computeSelected( x, y ) {
+    
+                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;
                     }
                 }
                 return selected;
             }
-
+    
             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 );
         }
     }