cytoscape-edgehandles - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

bower.json

 {
   "name": "cytoscape-edgehandles",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Edge creation extension for Cytoscape.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-edgehandles.js",

cytoscape-edgehandles.js

@@ -1,9 +0,14 @@
-;(function( $$, $ ){ 'use strict';
+;
+( function( $$, $ ) {
+  'use strict';
 
   // registers the extension on a cytoscape lib ref
-  var register = function( $$, $ ){
-    if( !cytoscape ){ return; } // can't register if cytoscape unspecified
+  var register = function( $$, $ ) {
+    if( !cytoscape ) {
+      return;
+    } // can't register if cytoscape unspecified
 
     var defaults = {
       preview: true, // whether to show added edges preview before releasing selection
+      stackOrder: 4, // Controls stack order of edgehandles canvas element by setting it's z-index
       handleSize: 10, // the size of the edge handle put on nodes
@@ -18,3 +23,3 @@ handleColor: '#ff0000', // the colour of the handle and the line drawn from it
       toggleOffOnLeave: false, // whether an edge is cancelled by leaving a node (true), or whether you need to go over again to cancel (false; allows multiple edges in one pass)
-      edgeType: function( sourceNode, targetNode ){
+      edgeType: function( sourceNode, targetNode ) {
         // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them
@@ -24,3 +29,3 @@ // returning null/undefined means an edge can't be added between the two nodes
       },
-      loopAllowed: function( node ){
+      loopAllowed: function( node ) {
         // for the specified node, return whether edges from itself to itself are allowed
@@ -30,3 +35,3 @@ return false;
       nodeLoopOffset: -50, // offset for edgeType: 'node' loops
-      nodeParams: function( sourceNode, targetNode ){
+      nodeParams: function( sourceNode, targetNode ) {
         // for edges between the specified source and target
@@ -36,3 +41,3 @@ // return element object to be passed to cy.add() for intermediary node
       },
-      edgeParams: function( sourceNode, targetNode, i ){
+      edgeParams: function( sourceNode, targetNode, i ) {
         // for edges between the specified source and target
@@ -43,9 +48,9 @@ // return element object to be passed to cy.add() for edge
       },
-      start: function( sourceNode ){
+      start: function( sourceNode ) {
         // fired when edgehandles interaction starts (drag on handle)
       },
-      complete: function( sourceNode, targetNodes, addedEntities ){
+      complete: function( sourceNode, targetNodes, addedEntities ) {
         // fired when edgehandles is done and entities are added
       },
-      stop: function( sourceNode ){
+      stop: function( sourceNode ) {
         // fired when edgehandles interaction is stopped (either complete with added edges or incomplete)
@@ -55,11 +60,11 @@ }
 
-    $.fn.cytoscapeEdgehandles = function( params ){
+    $.fn.cytoscapeEdgehandles = function( params ) {
       var fn = params;
 
       var functions = {
-        destroy: function(){
-          var $container = $(this);
-          var data = $container.data('cyedgehandles');
+        destroy: function() {
+          var $container = $( this );
+          var data = $container.data( 'cyedgehandles' );
 
-          if( data == null ){
+          if( data == null ) {
             return;
@@ -69,3 +74,3 @@ }
           data.unbind();
-          $container.data('cyedgehandles', {});
+          $container.data( 'cyedgehandles', {} );
 
@@ -75,7 +80,7 @@ return $container;
 
-        option: function(name, value){
-          var $container = $(this);
-          var data = $container.data('cyedgehandles');
+        option: function( name, value ) {
+          var $container = $( this );
+          var data = $container.data( 'cyedgehandles' );
 
-          if( data == null ){
+          if( data == null ) {
             return;
@@ -86,6 +91,6 @@ }
 
-          if( value === undefined ){
-            if( typeof name == typeof {} ){
+          if( value === undefined ) {
+            if( typeof name == typeof {} ) {
               var newOpts = name;
-              options = $.extend(true, {}, defaults, newOpts);
+              options = $.extend( true, {}, defaults, newOpts );
               data.options = options;
@@ -99,3 +104,3 @@ } else {
 
-          $container.data('cyedgehandles', data);
+          $container.data( 'cyedgehandles', data );
 
@@ -105,30 +110,30 @@ return $container;
 
-        disable: function(){
-          return functions.option.apply(this, ['enabled', false]);
+        disable: function() {
+          return functions.option.apply( this, [ 'enabled', false ] );
         },
 
-        enable: function(){
-          return functions.option.apply(this, ['enabled', true]);
+        enable: function() {
+          return functions.option.apply( this, [ 'enabled', true ] );
         },
 
-        resize: function(){
-          var $container = $(this);
+        resize: function() {
+          var $container = $( this );
 
-          $container.trigger('cyedgehandles.resize');
+          $container.trigger( 'cyedgehandles.resize' );
         },
 
-        drawon: function(){
-          $(this).trigger('cyedgehandles.drawon');
+        drawon: function() {
+          $( this ).trigger( 'cyedgehandles.drawon' );
         },
 
-        drawoff: function(){
-          $(this).trigger('cyedgehandles.drawoff');
+        drawoff: function() {
+          $( this ).trigger( 'cyedgehandles.drawoff' );
         },
 
-        init: function(){
+        init: function() {
           var self = this;
-          var opts = $.extend(true, {}, defaults, params);
-          var $container = $(this);
+          var opts = $.extend( true, {}, defaults, params );
+          var $container = $( this );
           var cy;
-          var $canvas = $('<canvas></canvas>');
+          var $canvas = $( '<canvas></canvas>' );
           var handle;
@@ -149,11 +154,10 @@ var line, linePoints;
 
-          function sizeCanvas(){
+          function sizeCanvas() {
             $canvas
-              .attr('height', $container.height())
-              .attr('width', $container.width())
-              .css({
+              .attr( 'height', $container.height() )
+              .attr( 'width', $container.width() )
+              .css( {
                 'position': 'absolute',
-                'z-index': '999'
-              })
-            ;
+                'z-index': opts.stackOrder,
+              } );
           }
@@ -163,14 +167,14 @@ sizeCanvas();
           var winResizeHandler;
-          $(window).bind('resize', winResizeHandler = function(){
+          $( window ).bind( 'resize', winResizeHandler = function() {
             sizeCanvas();
-          });
+          } );
 
           var ctrResizeHandler;
-          $container.bind('cyedgehandles.resize', ctrResizeHandler = function(){
+          $container.bind( 'cyedgehandles.resize', ctrResizeHandler = function() {
             sizeCanvas();
-          });
+          } );
 
           var prevUngrabifyState;
           var ctrDrawonHandler;
-          $container.on('cyedgehandles.drawon', ctrDrawonHandler = function(){
+          $container.on( 'cyedgehandles.drawon', ctrDrawonHandler = function() {
             drawMode = true;
@@ -180,17 +184,17 @@
 
-            cy.autoungrabify(true);
-          });
+            cy.autoungrabify( true );
+          } );
 
           var ctrDrawoffHandler;
-          $container.on('cyedgehandles.drawoff', ctrDrawoffHandler = function(){
+          $container.on( 'cyedgehandles.drawoff', ctrDrawoffHandler = function() {
             drawMode = false;
 
-            cy.autoungrabify(prevUngrabifyState);
-          });
+            cy.autoungrabify( prevUngrabifyState );
+          } );
 
-          var ctx = $canvas[0].getContext('2d');
+          var ctx = $canvas[ 0 ].getContext( '2d' );
 
           // write options to data
-          var data = $container.data('cyedgehandles');
-          if( data == null ){
+          var data = $container.data( 'cyedgehandles' );
+          if( data == null ) {
             data = {};
@@ -201,17 +205,20 @@ }
           var optCache;
-          function options(){
-            return optCache || (optCache = $container.data('cyedgehandles').options);
+
+          function options() {
+            return optCache || ( optCache = $container.data( 'cyedgehandles' ).options );
           }
 
-          function enabled(){
+          function enabled() {
             return options().enabled;
           }
 
-          function disabled(){
+          function disabled() {
             return !enabled();
           }
 
-          function clearDraws(){
+          function clearDraws() {
 
-            if( drawsClear ){ return; } // break early to be efficient
+            if( drawsClear ) {
+              return;
+            } // break early to be efficient
 
@@ -226,3 +233,4 @@ var w = $container.width();
           var lastPanningEnabled, lastZoomingEnabled, lastBoxSelectionEnabled;
-          function disableGestures(){
+
+          function disableGestures() {
             lastPanningEnabled = cy.panningEnabled();
@@ -233,17 +241,15 @@ lastZoomingEnabled = cy.zoomingEnabled();
             cy
-              .zoomingEnabled(false)
-              .panningEnabled(false)
-              .boxSelectionEnabled(false)
-            ;
+              .zoomingEnabled( false )
+              .panningEnabled( false )
+              .boxSelectionEnabled( false );
           }
 
-          function resetGestures(){
+          function resetGestures() {
             cy
-              .zoomingEnabled(lastZoomingEnabled)
-              .panningEnabled(lastPanningEnabled)
-              .boxSelectionEnabled(lastBoxSelectionEnabled)
-            ;
+              .zoomingEnabled( lastZoomingEnabled )
+              .panningEnabled( lastPanningEnabled )
+              .boxSelectionEnabled( lastBoxSelectionEnabled );
           }
 
-          function resetToDefaultState(){
+          function resetToDefaultState() {
 
@@ -253,9 +259,8 @@ clearDraws();
             //setTimeout(function(){
-              cy.nodes()
-                .removeClass('edgehandles-hover')
-                .removeClass('edgehandles-source')
-                .removeClass('edgehandles-target')
-              ;
+            cy.nodes()
+              .removeClass( 'edgehandles-hover' )
+              .removeClass( 'edgehandles-source' )
+              .removeClass( 'edgehandles-target' );
 
-              cy.$('.edgehandles-ghost').remove();
+            cy.$( '.edgehandles-ghost' ).remove();
             //}, 1);
@@ -271,21 +276,21 @@
 
-          function makePreview( source, target ){
+          function makePreview( source, target ) {
             makeEdges( true );
 
-            target.trigger('cyedgehandles.addpreview');
+            target.trigger( 'cyedgehandles.addpreview' );
           }
 
-          function removePreview( source, target ){
-            source.edgesWith(target).filter('.edgehandles-preview').remove();
+          function removePreview( source, target ) {
+            source.edgesWith( target ).filter( '.edgehandles-preview' ).remove();
 
             target
-              .neighborhood('node.edgehandles-preview')
-              .closedNeighborhood('.edgehandles-preview')
+              .neighborhood( 'node.edgehandles-preview' )
+              .closedNeighborhood( '.edgehandles-preview' )
               .remove();
 
-            target.trigger('cyedgehandles.removepreview');
+            target.trigger( 'cyedgehandles.removepreview' );
 
           }
 
-          function drawHandle(hx, hy, hr){
+          function drawHandle( hx, hy, hr ) {
             ctx.fillStyle = options().handleColor;
@@ -295,3 +300,3 @@ ctx.strokeStyle = options().handleColor;
             ctx.beginPath();
-            ctx.arc(hx, hy, hr, 0 , 2*Math.PI);
+            ctx.arc( hx, hy, hr, 0, 2 * Math.PI );
             ctx.closePath();
@@ -303,8 +308,8 @@ ctx.fill();
 
-          var lineDrawRate = 1000/30;
+          var lineDrawRate = 1000 / 30;
           var lastDrawLine = 0;
-          var drawLine = function(hx, hy, x, y){
+          var drawLine = function( hx, hy, x, y ) {
             var now = +new Date();
 
-            if( now - lastDrawLine < lineDrawRate ){
+            if( now - lastDrawLine < lineDrawRate ) {
               return;
@@ -315,3 +320,3 @@ }
 
-            if( options().handleLineType !== 'ghost' ){
+            if( options().handleLineType !== 'ghost' ) {
               ctx.fillStyle = options().handleColor;
@@ -323,76 +328,76 @@ ctx.strokeStyle = options().handleColor;
             // draw line based on type
-            switch( options().handleLineType ){
-            case 'ghost':
+            switch( options().handleLineType ) {
+              case 'ghost':
 
-              if( !ghostNode || ghostNode.removed() ){
+                if( !ghostNode || ghostNode.removed() ) {
 
-                drawHandle();
+                  drawHandle();
 
-                ghostNode = cy.add({
-                  group: 'nodes',
-                  classes: 'edgehandles-ghost edgehandles-ghost-node',
-                  css: {
-                    'background-color': 'blue',
-                    'width': 0.0001,
-                    'height': 0.0001,
-                    'opacity': 0
-                  },
-                  position: {
-                    x: 0,
-                    y: 0
-                  }
-                });
+                  ghostNode = cy.add( {
+                    group: 'nodes',
+                    classes: 'edgehandles-ghost edgehandles-ghost-node',
+                    css: {
+                      'background-color': 'blue',
+                      'width': 0.0001,
+                      'height': 0.0001,
+                      'opacity': 0
+                    },
+                    position: {
+                      x: 0,
+                      y: 0
+                    }
+                  } );
 
-                ghostEdge = cy.add({
-                  group: 'edges',
-                  classes: 'edgehandles-ghost edgehandles-ghost-edge',
-                  data: {
-                    source: sourceNode.id(),
-                    target: ghostNode.id()
-                  }
-                });
+                  ghostEdge = cy.add( {
+                    group: 'edges',
+                    classes: 'edgehandles-ghost edgehandles-ghost-edge',
+                    data: {
+                      source: sourceNode.id(),
+                      target: ghostNode.id()
+                    }
+                  } );
 
-              }
+                }
 
-              ghostNode.renderedPosition({
-                x: x,
-                y: y
-              });
+                ghostNode.renderedPosition( {
+                  x: x,
+                  y: y
+                } );
 
 
-              break;
+                break;
 
-            case 'straight':
+              case 'straight':
 
-              ctx.beginPath();
-              ctx.moveTo(hx, hy);
-              ctx.lineTo(x, y);
-              ctx.closePath();
-              ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo( hx, hy );
+                ctx.lineTo( x, y );
+                ctx.closePath();
+                ctx.stroke();
 
-              break;
-            case 'draw':
-            default:
+                break;
+              case 'draw':
+              default:
 
-              if( linePoints == null ){
-                linePoints = [ [x, y] ];
-              } else {
-                linePoints.push([ x, y ]);
-              }
+                if( linePoints == null ) {
+                  linePoints = [ [ x, y ] ];
+                } else {
+                  linePoints.push( [ x, y ] );
+                }
 
-              ctx.beginPath();
-              ctx.moveTo(hx, hy);
+                ctx.beginPath();
+                ctx.moveTo( hx, hy );
 
-              for( var i = 0; i < linePoints.length; i++ ){
-                var pt = linePoints[i];
+                for( var i = 0; i < linePoints.length; i++ ) {
+                  var pt = linePoints[ i ];
 
-                ctx.lineTo(pt[0], pt[1]);
-              }
+                  ctx.lineTo( pt[ 0 ], pt[ 1 ] );
+                }
 
-              ctx.stroke();
+                ctx.stroke();
 
-              break;
+                break;
             }
 
-            if( options().handleLineType !== 'ghost' ){
+            if( options().handleLineType !== 'ghost' ) {
               drawsClear = false;
@@ -402,16 +407,16 @@ }
 
-          function makeEdges( preview, src, tgt ){
+          function makeEdges( preview, src, tgt ) {
 
             // console.log('make edges', preview);
 
-            var source = src ? src : cy.nodes('.edgehandles-source');
-            var targets = tgt ? tgt : cy.nodes('.edgehandles-target');
+            var source = src ? src : cy.nodes( '.edgehandles-source' );
+            var targets = tgt ? tgt : cy.nodes( '.edgehandles-target' );
             var classes = preview ? 'edgehandles-preview' : '';
             var added = cy.collection();
 
-            if( !src && !tgt && !preview && options().preview ){
-              cy.$('.edgehandles-ghost').remove();
+            if( !src && !tgt && !preview && options().preview ) {
+              cy.$( '.edgehandles-ghost' ).remove();
             }
 
-            if( source.size() === 0 || targets.size() === 0 ){
+            if( source.size() === 0 || targets.size() === 0 ) {
               return; // nothing to do :(
@@ -421,107 +426,109 @@ }
             // just remove preview class if we already have the edges
-            if( !src && !tgt ){
-              if( !preview && options().preview ){
-                added = cy.elements('.edgehandles-preview').removeClass('edgehandles-preview');
+            if( !src && !tgt ) {
+              if( !preview && options().preview ) {
+                added = cy.elements( '.edgehandles-preview' ).removeClass( 'edgehandles-preview' );
 
                 options().complete( source, targets, added );
-                source.trigger('cyedgehandles.complete');
+                source.trigger( 'cyedgehandles.complete' );
                 return;
               } else {
                 // remove old previews
-                cy.elements('.edgehandles-preview').remove();
+                cy.elements( '.edgehandles-preview' ).remove();
               }
             }
 
-            for( var i = 0; i < targets.length; i++ ){
-              var target = targets[i];
+            for( var i = 0; i < targets.length; i++ ) {
+              var target = targets[ i ];
 
-              switch( options().edgeType( source, target ) ){
-              case 'node':
+              switch( options().edgeType( source, target ) ) {
+                case 'node':
 
-                var p1 = source.position();
-                var p2 = target.position();
-                var p;
+                  var p1 = source.position();
+                  var p2 = target.position();
+                  var p;
 
-                if( source.id() === target.id() ){
-                  p = {
-                    x: p1.x + options().nodeLoopOffset,
-                    y: p1.y + options().nodeLoopOffset
-                  };
-                } else {
-                  p = {
-                    x: (p1.x + p2.x)/2,
-                    y: (p1.y + p2.y)/2
-                  };
-                }
+                  if( source.id() === target.id() ) {
+                    p = {
+                      x: p1.x + options().nodeLoopOffset,
+                      y: p1.y + options().nodeLoopOffset
+                    };
+                  } else {
+                    p = {
+                      x: ( p1.x + p2.x ) / 2,
+                      y: ( p1.y + p2.y ) / 2
+                    };
+                  }
 
-                var interNode = cy.add($.extend( true, {
-                  group: 'nodes',
-                  position: p
-                }, options().nodeParams(source, target) )).addClass(classes);
+                  var interNode = cy.add( $.extend( true, {
+                    group: 'nodes',
+                    position: p
+                  }, options().nodeParams( source, target ) ) ).addClass( classes );
 
-                var source2inter = cy.add($.extend( true, {
-                  group: 'edges',
-                  data: {
-                    source: source.id(),
-                    target: interNode.id()
-                  }
-                }, options().edgeParams(source, target, 0) )).addClass(classes);
+                  var source2inter = cy.add( $.extend( true, {
+                    group: 'edges',
+                    data: {
+                      source: source.id(),
+                      target: interNode.id()
+                    }
+                  }, options().edgeParams( source, target, 0 ) ) ).addClass( classes );
 
-                var inter2target = cy.add($.extend( true, {
-                  group: 'edges',
-                  data: {
-                    source: interNode.id(),
-                    target: target.id()
-                  }
-                }, options().edgeParams(source, target, 1) )).addClass(classes);
+                  var inter2target = cy.add( $.extend( true, {
+                    group: 'edges',
+                    data: {
+                      source: interNode.id(),
+                      target: target.id()
+                    }
+                  }, options().edgeParams( source, target, 1 ) ) ).addClass( classes );
 
-                added = added.add( interNode ).add( source2inter ).add( inter2target );
+                  added = added.add( interNode ).add( source2inter ).add( inter2target );
 
-                break;
+                  break;
 
-              case 'flat':
-                var edge = cy.add($.extend( true, {
-                  group: 'edges',
-                  data: {
-                    source: source.id(),
-                    target: target.id()
-                  }
-                }, options().edgeParams(source, target, 0) )).addClass(classes);
+                case 'flat':
+                  var edge = cy.add( $.extend( true, {
+                    group: 'edges',
+                    data: {
+                      source: source.id(),
+                      target: target.id()
+                    }
+                  }, options().edgeParams( source, target, 0 ) ) ).addClass( classes );
 
-                added = added.add( edge );
+                  added = added.add( edge );
 
-                break;
+                  break;
 
-              default:
-                target.removeClass('edgehandles-target');
-                break; // don't add anything
+                default:
+                  target.removeClass( 'edgehandles-target' );
+                  break; // don't add anything
               }
             }
 
-            if( !preview ){
+            if( !preview ) {
               options().complete( source, targets, added );
-              source.trigger('cyedgehandles.complete');
+              source.trigger( 'cyedgehandles.complete' );
             }
           }
 
-          function hoverOver( node ){
+          function hoverOver( node ) {
             var target = node;
 
             clearTimeout( hoverTimeout );
-            hoverTimeout = setTimeout(function(){
-              var source = cy.nodes('.edgehandles-source');
+            hoverTimeout = setTimeout( function() {
+              var source = cy.nodes( '.edgehandles-source' );
 
-              var isLoop = node.hasClass('edgehandles-source');
+              var isLoop = node.hasClass( 'edgehandles-source' );
               var loopAllowed = options().loopAllowed( node );
-              var isGhost = node.hasClass('edgehandles-ghost-node');
+              var isGhost = node.hasClass( 'edgehandles-ghost-node' );
               var noEdge = options().edgeType( source, node ) == null;
 
-              if( isGhost || noEdge ){ return; }
+              if( isGhost || noEdge ) {
+                return;
+              }
 
-              if( !isLoop || (isLoop && loopAllowed) ){
-                node.addClass('edgehandles-hover');
-                node.toggleClass('edgehandles-target');
+              if( !isLoop || ( isLoop && loopAllowed ) ) {
+                node.addClass( 'edgehandles-hover' );
+                node.toggleClass( 'edgehandles-target' );
 
-                if( options().preview ){
-                  if( node.hasClass('edgehandles-target') ){
+                if( options().preview ) {
+                  if( node.hasClass( 'edgehandles-target' ) ) {
                     makePreview( source, target );
@@ -533,16 +540,16 @@ } else {
               }
-            }, options().hoverDelay);
+            }, options().hoverDelay );
           }
 
-          function hoverOut( node ){
+          function hoverOut( node ) {
             var target = node;
 
-            node.removeClass('edgehandles-hover');
+            node.removeClass( 'edgehandles-hover' );
 
-            clearTimeout(hoverTimeout);
+            clearTimeout( hoverTimeout );
 
-            if( options().toggleOffOnLeave ){
+            if( options().toggleOffOnLeave ) {
               var source = sourceNode;
 
-              node.removeClass('edgehandles-target');
+              node.removeClass( 'edgehandles-target' );
               removePreview( source, target );
@@ -552,3 +559,3 @@ }
 
-          $container.cytoscape(function(e){
+          $container.cytoscape( function( e ) {
             cy = this;
@@ -565,5 +572,5 @@
             var transformHandler;
-            cy.bind('zoom pan', transformHandler = function(){
+            cy.bind( 'zoom pan', transformHandler = function() {
               clearDraws();
-            });
+            } );
 
@@ -573,6 +580,6 @@ var lastMdownHandler;
             var startHandler, hoverHandler, leaveHandler, grabNodeHandler, freeNodeHandler, dragNodeHandler, forceStartHandler, removeHandler, cxtstartHandler, tapToStartHandler, cxtdragHandler, cxtdragoverHandler, cxtdragoutHandler, cxtendHandler, dragHandler, grabHandler;
-            cy.on('mouseover tap', 'node', startHandler = function(e){
+            cy.on( 'mouseover tap', 'node', startHandler = function( e ) {
               var node = this;
 
-              if( disabled() || drawMode || mdownOnHandle || grabbingNode || this.hasClass('edgehandles-preview') || inForceStart || this.hasClass('edgehandles-ghost-node') || node.filter(options().handleNodes).length === 0 ){
+              if( disabled() || drawMode || mdownOnHandle || grabbingNode || this.hasClass( 'edgehandles-preview' ) || inForceStart || this.hasClass( 'edgehandles-ghost-node' ) || node.filter( options().handleNodes ).length === 0 ) {
                 return; // don't override existing handle that's being dragged
@@ -584,5 +591,5 @@ // also don't trigger when grabbing a node etc
 
-              if( lastMdownHandler ){
-                $container[0].removeEventListener('mousedown', lastMdownHandler, true);
-                $container[0].removeEventListener('touchstart', lastMdownHandler, true);
+              if( lastMdownHandler ) {
+                $container[ 0 ].removeEventListener( 'mousedown', lastMdownHandler, true );
+                $container[ 0 ].removeEventListener( 'touchstart', lastMdownHandler, true );
               }
@@ -599,18 +606,18 @@
 
-              hr = options().handleSize/2 * cy.zoom();
+              hr = options().handleSize / 2 * cy.zoom();
               hx = p.x;
-              hy = p.y - h/2;
+              hy = p.y - h / 2;
 
               // add new handle
-              drawHandle(hx, hy, hr);
+              drawHandle( hx, hy, hr );
 
-              node.trigger('cyedgehandles.showhandle');
+              node.trigger( 'cyedgehandles.showhandle' );
 
 
-              function mdownHandler(e){
-                $container[0].removeEventListener('mousedown', mdownHandler, true);
-                $container[0].removeEventListener('touchstart', mdownHandler, true);
+              function mdownHandler( e ) {
+                $container[ 0 ].removeEventListener( 'mousedown', mdownHandler, true );
+                $container[ 0 ].removeEventListener( 'touchstart', mdownHandler, true );
 
-                var pageX = !e.touches ? e.pageX : e.touches[0].pageX;
-                var pageY = !e.touches ? e.pageY : e.touches[0].pageY;
+                var pageX = !e.touches ? e.pageX : e.touches[ 0 ].pageX;
+                var pageY = !e.touches ? e.pageY : e.touches[ 0 ].pageY;
                 var x = pageX - $container.offset().left;
@@ -620,11 +627,11 @@ var y = pageY - $container.offset().top;
 
-                if( e.button !== 0 && !e.touches ){
+                if( e.button !== 0 && !e.touches ) {
                   return; // sorry, no right clicks allowed
                 }
 
-                if( Math.abs(x - hx) > hrTarget || Math.abs(y - hy) > hrTarget ){
+                if( Math.abs( x - hx ) > hrTarget || Math.abs( y - hy ) > hrTarget ) {
                   return; // only consider this a proper mousedown if on the handle
                 }
 
-                if( inForceStart ){
+                if( inForceStart ) {
                   return; // we don't want this going off if we have the forced start to consider
@@ -642,15 +649,15 @@ }
 
-                node.addClass('edgehandles-source');
-                node.trigger('cyedgehandles.start');
+                node.addClass( 'edgehandles-source' );
+                node.trigger( 'cyedgehandles.start' );
 
-                function doneMoving(dmEvent){
+                function doneMoving( dmEvent ) {
                   // console.log('doneMoving %s %o', node.id(), node);
 
-                  if( !mdownOnHandle || inForceStart ){
+                  if( !mdownOnHandle || inForceStart ) {
                     return;
                   }
 
-                  var $this = $(this);
+                  var $this = $( this );
                   mdownOnHandle = false;
-                  $(window).unbind('mousemove touchmove', moveHandler);
+                  $( window ).unbind( 'mousemove touchmove', moveHandler );
 
@@ -661,6 +668,6 @@ makeEdges();
                   options().stop( node );
-                  node.trigger('cyedgehandles.stop');
+                  node.trigger( 'cyedgehandles.stop' );
                 }
 
-                $(window).one('mouseup touchend touchcancel blur', doneMoving).bind('mousemove touchmove', moveHandler);
+                $( window ).one( 'mouseup touchend touchcancel blur', doneMoving ).bind( 'mousemove touchmove', moveHandler );
                 disableGestures();
@@ -673,15 +680,15 @@
 
-              function moveHandler(e){
+              function moveHandler( e ) {
                 // console.log('mousemove moveHandler %s %o', node.id(), node);
 
-                var pageX = !e.originalEvent.touches ? e.pageX : e.originalEvent.touches[0].pageX;
-                var pageY = !e.originalEvent.touches ? e.pageY : e.originalEvent.touches[0].pageY;
+                var pageX = !e.originalEvent.touches ? e.pageX : e.originalEvent.touches[ 0 ].pageX;
+                var pageY = !e.originalEvent.touches ? e.pageY : e.originalEvent.touches[ 0 ].pageY;
                 var x = pageX - $container.offset().left;
                 var y = pageY - $container.offset().top;
 
-                if( options().handleLineType !== 'ghost' ){
+                if( options().handleLineType !== 'ghost' ) {
                   clearDraws();
-                  drawHandle(hx, hy, hr);
+                  drawHandle( hx, hy, hr );
                 }
-                drawLine(hx, hy, x, y);
+                drawLine( hx, hy, x, y );
 
@@ -691,18 +698,18 @@ return false;
 
-              $container[0].addEventListener('mousedown', mdownHandler, true);
-              $container[0].addEventListener('touchstart', mdownHandler, true);
+              $container[ 0 ].addEventListener( 'mousedown', mdownHandler, true );
+              $container[ 0 ].addEventListener( 'touchstart', mdownHandler, true );
               lastMdownHandler = mdownHandler;
 
 
-            }).on('mouseover tapdragover', 'node', hoverHandler = function(){
+            } ).on( 'mouseover tapdragover', 'node', hoverHandler = function() {
               var node = this;
               var target = this;
 
-            // console.log('mouseover hoverHandler')
+              // console.log('mouseover hoverHandler')
 
-              if( disabled() || drawMode || this.hasClass('edgehandles-preview') ){
+              if( disabled() || drawMode || this.hasClass( 'edgehandles-preview' ) ) {
                 return; // ignore preview nodes
               }
 
-              if( mdownOnHandle ){ // only handle mdown case
+              if( mdownOnHandle ) { // only handle mdown case
 
@@ -716,39 +723,43 @@ // console.log( 'mouseover hoverHandler %s $o', node.id(), node );
 
-            }).on('mouseout tapdragout', 'node', leaveHandler = function(){
+            } ).on( 'mouseout tapdragout', 'node', leaveHandler = function() {
               var node = this;
 
-              if( drawMode ){ return; }
+              if( drawMode ) {
+                return;
+              }
 
-              if( mdownOnHandle ){
-                hoverOut(node);
+              if( mdownOnHandle ) {
+                hoverOut( node );
               }
 
-            }).on('drag position', 'node', dragNodeHandler = function(){
-              if( drawMode ){ return; }
+            } ).on( 'drag position', 'node', dragNodeHandler = function() {
+              if( drawMode ) {
+                return;
+              }
 
               var node = this;
 
-              if( !node.hasClass('edgehandles-ghost') ){
-                setTimeout(clearDraws, 50);
+              if( !node.hasClass( 'edgehandles-ghost' ) ) {
+                setTimeout( clearDraws, 50 );
               }
 
-            }).on('grab', 'node', grabHandler = function(){
+            } ).on( 'grab', 'node', grabHandler = function() {
               //grabbingNode = true;
 
               //setTimeout(function(){
-                clearDraws();
+              clearDraws();
               //}, 5);
 
 
-            }).on('drag', 'node', dragHandler = function(){
+            } ).on( 'drag', 'node', dragHandler = function() {
               grabbingNode = true;
 
 
-            }).on('free', 'node', freeNodeHandler = function(){
+            } ).on( 'free', 'node', freeNodeHandler = function() {
               grabbingNode = false;
 
-            }).on('cyedgehandles.forcestart', 'node', forceStartHandler = function(){
+            } ).on( 'cyedgehandles.forcestart', 'node', forceStartHandler = function() {
               var node = this;
 
-              if( node.filter(options().handleNodes).length === 0 ){
+              if( node.filter( options().handleNodes ).length === 0 ) {
                 return; // skip if node not allowed
@@ -764,4 +775,4 @@ }
 
-              node.trigger('cyedgehandles.start');
-              node.addClass('edgehandles-source');
+              node.trigger( 'cyedgehandles.start' );
+              node.addClass( 'edgehandles-source' );
 
@@ -772,43 +783,42 @@ var p = node.renderedPosition();
 
-              var hr = options().handleSize/2 * cy.zoom();
+              var hr = options().handleSize / 2 * cy.zoom();
               var hx = p.x;
-              var hy = p.y - h/2;
+              var hy = p.y - h / 2;
 
-              drawHandle(hx, hy, hr);
+              drawHandle( hx, hy, hr );
 
-              node.trigger('cyedgehandles.showhandle');
+              node.trigger( 'cyedgehandles.showhandle' );
 
               // case: down and drag as normal
-              var downHandler = function(e){
+              var downHandler = function( e ) {
 
-                $container[0].removeEventListener('mousedown', downHandler, true);
-                $container[0].removeEventListener('touchstart', downHandler, true);
+                $container[ 0 ].removeEventListener( 'mousedown', downHandler, true );
+                $container[ 0 ].removeEventListener( 'touchstart', downHandler, true );
 
-                var x = (e.pageX !== undefined ? e.pageX : e.originalEvent.touches[0].pageX) - $container.offset().left;
-                var y = (e.pageY !== undefined ? e.pageY : e.originalEvent.touches[0].pageY) - $container.offset().top;
-                var d = hr/2;
-                var onNode = p.x - w/2 - d <= x && x <= p.x + w/2 + d
-                  && p.y - h/2 - d <= y && y <= p.y + h/2 + d;
+                var x = ( e.pageX !== undefined ? e.pageX : e.originalEvent.touches[ 0 ].pageX ) - $container.offset().left;
+                var y = ( e.pageY !== undefined ? e.pageY : e.originalEvent.touches[ 0 ].pageY ) - $container.offset().top;
+                var d = hr / 2;
+                var onNode = p.x - w / 2 - d <= x && x <= p.x + w / 2 + d && p.y - h / 2 - d <= y && y <= p.y + h / 2 + d;
 
-                if( onNode ){
+                if( onNode ) {
                   disableGestures();
                   mdownOnHandle = true; // enable the regular logic for handling going over target nodes
 
-                  var moveHandler = function(me){
-                    var x = (me.pageX !== undefined ? me.pageX : me.originalEvent.touches[0].pageX) - $container.offset().left;
-                    var y = (me.pageY !== undefined ? me.pageY : me.originalEvent.touches[0].pageY) - $container.offset().top;
+                  var moveHandler = function( me ) {
+                    var x = ( me.pageX !== undefined ? me.pageX : me.originalEvent.touches[ 0 ].pageX ) - $container.offset().left;
+                    var y = ( me.pageY !== undefined ? me.pageY : me.originalEvent.touches[ 0 ].pageY ) - $container.offset().top;
 
-                    if( options().handleLineType !== 'ghost' ){
+                    if( options().handleLineType !== 'ghost' ) {
                       clearDraws();
-                      drawHandle(hx, hy, hr);
+                      drawHandle( hx, hy, hr );
                     }
-                    drawLine(hx, hy, x, y);
+                    drawLine( hx, hy, x, y );
                   }
 
-                  $container[0].addEventListener('mousemove', moveHandler, true);
-                  $container[0].addEventListener('touchmove', moveHandler, true);
+                  $container[ 0 ].addEventListener( 'mousemove', moveHandler, true );
+                  $container[ 0 ].addEventListener( 'touchmove', moveHandler, true );
 
-                  $(window).one('mouseup touchend blur', function(){
-                    $container[0].removeEventListener('mousemove', moveHandler, true);
-                    $container[0].removeEventListener('touchmove', moveHandler, true);
+                  $( window ).one( 'mouseup touchend blur', function() {
+                    $container[ 0 ].removeEventListener( 'mousemove', moveHandler, true );
+                    $container[ 0 ].removeEventListener( 'touchmove', moveHandler, true );
 
@@ -821,8 +831,8 @@ inForceStart = false; // now we're done so reset the flag
                     options().stop( node );
-                    node.trigger('cyedgehandles.stop');
+                    node.trigger( 'cyedgehandles.stop' );
 
-                    cy.off('tap', 'node', tapHandler);
-                    node.off('remove', removeBeforeHandler);
+                    cy.off( 'tap', 'node', tapHandler );
+                    node.off( 'remove', removeBeforeHandler );
                     resetToDefaultState();
-                  });
+                  } );
 
@@ -835,15 +845,15 @@ e.stopPropagation();
 
-              $container[0].addEventListener('mousedown', downHandler, true);
-              $container[0].addEventListener('touchstart', downHandler, true);
+              $container[ 0 ].addEventListener( 'mousedown', downHandler, true );
+              $container[ 0 ].addEventListener( 'touchstart', downHandler, true );
 
               var removeBeforeHandler;
-              node.one('remove', function(){
-                $container[0].removeEventListener('mousedown', downHandler, true);
-                $container[0].removeEventListener('touchstart', downHandler, true);
-                cy.off('tap', 'node', tapHandler);
-              });
+              node.one( 'remove', function() {
+                $container[ 0 ].removeEventListener( 'mousedown', downHandler, true );
+                $container[ 0 ].removeEventListener( 'touchstart', downHandler, true );
+                cy.off( 'tap', 'node', tapHandler );
+              } );
 
               // case: tap a target node
               var tapHandler;
-              cy.one('tap', 'node', tapHandler = function(){
+              cy.one( 'tap', 'node', tapHandler = function() {
                 var target = this;
@@ -854,4 +864,4 @@
 
-                if( !isLoop || (isLoop && loopAllowed) ){
-                  makeEdges(false, source, target);
+                if( !isLoop || ( isLoop && loopAllowed ) ) {
+                  makeEdges( false, source, target );
 
@@ -865,25 +875,25 @@ //options().complete( node );
                 options().stop( node );
-                node.trigger('cyedgehandles.stop');
+                node.trigger( 'cyedgehandles.stop' );
 
-                $container[0].removeEventListener('mousedown', downHandler, true);
-                $container[0].removeEventListener('touchstart', downHandler, true);
-                node.off('remove', removeBeforeHandler);
+                $container[ 0 ].removeEventListener( 'mousedown', downHandler, true );
+                $container[ 0 ].removeEventListener( 'touchstart', downHandler, true );
+                node.off( 'remove', removeBeforeHandler );
                 resetToDefaultState();
-              });
+              } );
 
 
-            }).on('remove', 'node', removeHandler = function(){
+            } ).on( 'remove', 'node', removeHandler = function() {
               var id = this.id();
 
-              if( id === lastActiveId ){
-                setTimeout(function(){
+              if( id === lastActiveId ) {
+                setTimeout( function() {
                   resetToDefaultState();
-                }, 5);
+                }, 5 );
               }
 
 
-            }).on('cxttapstart tapstart', 'node', cxtstartHandler = function(e){
+            } ).on( 'cxttapstart tapstart', 'node', cxtstartHandler = function( e ) {
               var node = this;
 
-              if( node.filter(options().handleNodes).length === 0 ){
+              if( node.filter( options().handleNodes ).length === 0 ) {
                 return; // skip if node not allowed
@@ -895,3 +905,3 @@ }
 
-              if( cxtOk || tapOk ){
+              if( cxtOk || tapOk ) {
 
@@ -905,4 +915,4 @@ clearDraws(); // clear just in case
 
-                node.trigger('cyedgehandles.start');
-                node.addClass('edgehandles-source');
+                node.trigger( 'cyedgehandles.start' );
+                node.addClass( 'edgehandles-source' );
 
@@ -913,23 +923,23 @@ var p = node.renderedPosition();
 
-                hr = options().handleSize/2 * cy.zoom();
+                hr = options().handleSize / 2 * cy.zoom();
                 hx = p.x;
-                hy = p.y - h/2 - hr/2;
+                hy = p.y - h / 2 - hr / 2;
 
-                drawHandle(hx, hy, hr);
+                drawHandle( hx, hy, hr );
 
-                node.trigger('cyedgehandles.showhandle');
+                node.trigger( 'cyedgehandles.showhandle' );
 
                 options().start( node );
-                node.trigger('cyedgehandles.start');
+                node.trigger( 'cyedgehandles.start' );
               }
 
 
-            }).on('cxtdrag tapdrag', cxtdragHandler = function(e){
+            } ).on( 'cxtdrag tapdrag', cxtdragHandler = function( e ) {
               var cxtOk = options().cxt && e.type === 'cxtdrag';
               var tapOk = drawMode && e.type === 'tapdrag';
 
-              if( ( cxtOk || tapOk ) && sourceNode ){
+              if( ( cxtOk || tapOk ) && sourceNode ) {
                 var rpos = e.cyRenderedPosition;
 
-                drawLine(hx, hy, rpos.x, rpos.y);
+                drawLine( hx, hy, rpos.x, rpos.y );
 
@@ -939,7 +949,7 @@ }
 
-            }).on('cxtdragover tapdragover', 'node', cxtdragoverHandler = function(e){
+            } ).on( 'cxtdragover tapdragover', 'node', cxtdragoverHandler = function( e ) {
               var cxtOk = options().cxt && e.type === 'cxtdragover';
               var tapOk = drawMode && e.type === 'tapdragover';
 
-              if( (cxtOk || tapOk) && sourceNode ){
+              if( ( cxtOk || tapOk ) && sourceNode ) {
                 var node = this;
@@ -951,7 +961,7 @@
 
-            }).on('cxtdragout tapdragout', 'node', cxtdragoutHandler = function(e){
+            } ).on( 'cxtdragout tapdragout', 'node', cxtdragoutHandler = function( e ) {
               var cxtOk = options().cxt && e.type === 'cxtdragout';
               var tapOk = drawMode && e.type === 'tapdragout';
 
-              if( (cxtOk || tapOk) && sourceNode ){
+              if( ( cxtOk || tapOk ) && sourceNode ) {
                 var node = this;
@@ -963,7 +973,7 @@
 
-            }).on('cxttapend tapend', cxtendHandler = function(e){
+            } ).on( 'cxttapend tapend', cxtendHandler = function( e ) {
               var cxtOk = options().cxt && e.type === 'cxttapend';
               var tapOk = drawMode && e.type === 'tapend';
 
-              if( cxtOk || tapOk ){
+              if( cxtOk || tapOk ) {
 
@@ -974,5 +984,5 @@ makeEdges();
 
-                if( sourceNode ){
+                if( sourceNode ) {
                   options().stop( sourceNode );
-                  node.trigger('cyedgehandles.stop');
+                  node.trigger( 'cyedgehandles.stop' );
 
@@ -983,8 +993,9 @@ options().complete( sourceNode );
 
-            }).on('tap', 'node', tapToStartHandler = function(){ return;
+            } ).on( 'tap', 'node', tapToStartHandler = function() {
+              return;
               var node = this;
 
-              if( !sourceNode ){ // must not be active
-                setTimeout(function(){
-                  if( node.filter(options().handleNodes).length === 0 ){
+              if( !sourceNode ) { // must not be active
+                setTimeout( function() {
+                  if( node.filter( options().handleNodes ).length === 0 ) {
                     return; // skip if node not allowed
@@ -999,36 +1010,35 @@ }
 
-                  var hr = options().handleSize/2 * cy.zoom();
+                  var hr = options().handleSize / 2 * cy.zoom();
                   var hx = p.x;
-                  var hy = p.y - h/2;
+                  var hy = p.y - h / 2;
 
-                  drawHandle(hx, hy, hr);
+                  drawHandle( hx, hy, hr );
 
-                  node.trigger('cyedgehandles.showhandle');
-                }, 16);
+                  node.trigger( 'cyedgehandles.showhandle' );
+                }, 16 );
               }
 
-            });
+            } );
 
 
-            data.unbind = function(){
+            data.unbind = function() {
               cy
-                .off('mouseover', 'node', startHandler)
-                .off('mouseover', 'node', hoverHandler)
-                .off('mouseout', 'node', leaveHandler)
-                .off('drag position', 'node', dragNodeHandler)
-                .off('grab', 'node', grabNodeHandler)
-                .off('free', 'node', freeNodeHandler)
-                .off('cyedgehandles.forcestart', 'node', forceStartHandler)
-                .off('remove', 'node', removeHandler)
-                .off('cxttapstart', 'node', cxtstartHandler)
-                .off('cxttapend', cxtendHandler)
-                .off('cxtdrag', cxtdragHandler)
-                .off('cxtdragover', 'node', cxtdragoverHandler)
-                .off('cxtdragout', 'node', cxtdragoutHandler)
-                .off('tap', 'node', tapToStartHandler)
-              ;
+                .off( 'mouseover', 'node', startHandler )
+                .off( 'mouseover', 'node', hoverHandler )
+                .off( 'mouseout', 'node', leaveHandler )
+                .off( 'drag position', 'node', dragNodeHandler )
+                .off( 'grab', 'node', grabNodeHandler )
+                .off( 'free', 'node', freeNodeHandler )
+                .off( 'cyedgehandles.forcestart', 'node', forceStartHandler )
+                .off( 'remove', 'node', removeHandler )
+                .off( 'cxttapstart', 'node', cxtstartHandler )
+                .off( 'cxttapend', cxtendHandler )
+                .off( 'cxtdrag', cxtdragHandler )
+                .off( 'cxtdragover', 'node', cxtdragoverHandler )
+                .off( 'cxtdragout', 'node', cxtdragoutHandler )
+                .off( 'tap', 'node', tapToStartHandler );
 
-              cy.unbind('zoom pan', transformHandler);
+              cy.unbind( 'zoom pan', transformHandler );
 
-              $(window).off( 'resize', winResizeHandler );
+              $( window ).off( 'resize', winResizeHandler );
 
@@ -1038,30 +1048,29 @@ $container
                 .off( 'cyedgehandles.drawon', ctrDrawonHandler )
-                .off( 'cyedgehandles.drawoff', ctrDrawoffHandler )
-              ;
+                .off( 'cyedgehandles.drawoff', ctrDrawoffHandler );
             };
-          });
+          } );
 
-          $container.data('cyedgehandles', data);
+          $container.data( 'cyedgehandles', data );
         },
 
-        start: function( id ){
-          var $container = $(this);
+        start: function( id ) {
+          var $container = $( this );
 
-          $container.cytoscape(function(e){
+          $container.cytoscape( function( e ) {
             var cy = this;
 
-            cy.$('#' + id).trigger('cyedgehandles.forcestart');
-          });
+            cy.$( '#' + id ).trigger( 'cyedgehandles.forcestart' );
+          } );
         }
       };
 
-      if( functions[fn] ){
-        return functions[fn].apply(this, Array.prototype.slice.call( arguments, 1 ));
+      if( functions[ fn ] ) {
+        return functions[ fn ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
       } else if( typeof fn == 'object' || !fn ) {
         return functions.init.apply( this, arguments );
       } else {
-        $.error('No such function `'+ fn +'` for jquery.cytoscapeEdgeHandles');
+        $.error( 'No such function `' + fn + '` for jquery.cytoscapeEdgeHandles' );
       }
 
-      return $(this);
+      return $( this );
     };
@@ -1071,24 +1080,24 @@
 
-    $$('core', 'edgehandles', function( options ){
+    $$( 'core', 'edgehandles', function( options ) {
       var cy = this;
 
       return $( cy.container() ).cytoscapeEdgehandles( options );
-    });
+    } );
 
   };
 
-  if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
+  if( typeof module !== 'undefined' && module.exports ) { // expose as a commonjs module
     module.exports = register;
   }
 
-  if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
-    define('cytoscape-edgehandles', function(){
+  if( typeof define !== 'undefined' && define.amd ) { // expose as an amd/requirejs module
+    define( 'cytoscape-edgehandles', function() {
       return register;
-    });
+    } );
   }
 
-  if( $ && $$ ){ // expose to global cytoscape (i.e. window.cytoscape)
+  if( $ && $$ ) { // expose to global cytoscape (i.e. window.cytoscape)
     register( $$, $ );
   }
 
-})( cytoscape, jQuery );
+} )( cytoscape, jQuery );

package.json

 {
   "name": "cytoscape-edgehandles",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Edge creation extension for Cytoscape.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-edgehandles.js",

README.md

@@ -61,2 +61,3 @@ cytoscape-edgehandles
   preview: true, // whether to show added edges preview before releasing selection
+  stackOrder: 4, // Controls stack order of edgehandles canvas element by setting it's z-index
   handleSize: 10, // the size of the edge handle put on nodes
@@ -68,11 +69,11 @@ handleColor: '#ff0000', // the colour of the handle and the line drawn from it
   hoverDelay: 150, // time spend over a target node before it is considered a target selection
-  cxt: true, // whether cxt events trigger edgehandles (useful on touch)
+  cxt: false, // whether cxt events trigger edgehandles (useful on touch)
   enabled: true, // whether to start the plugin in the enabled state
   toggleOffOnLeave: false, // whether an edge is cancelled by leaving a node (true), or whether you need to go over again to cancel (false; allows multiple edges in one pass)
-  edgeType: function( sourceNode, targetNode ){
+  edgeType: function( sourceNode, targetNode ) {
     // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them
     // returning null/undefined means an edge can't be added between the two nodes
-    return 'flat'; 
+    return 'flat';
   },
-  loopAllowed: function( node ){
+  loopAllowed: function( node ) {
     // for the specified node, return whether edges from itself to itself are allowed
@@ -82,3 +83,3 @@ return false;
   nodeLoopOffset: -50, // offset for edgeType: 'node' loops
-  nodeParams: function( sourceNode, targetNode ){
+  nodeParams: function( sourceNode, targetNode ) {
     // for edges between the specified source and target
@@ -88,3 +89,3 @@ // return element object to be passed to cy.add() for intermediary node
   },
-  edgeParams: function( sourceNode, targetNode, i ){
+  edgeParams: function( sourceNode, targetNode, i ) {
     // for edges between the specified source and target
@@ -95,9 +96,9 @@ // return element object to be passed to cy.add() for edge
   },
-  start: function( sourceNode ){
+  start: function( sourceNode ) {
     // fired when edgehandles interaction starts (drag on handle)
   },
-  complete: function( sourceNode, targetNodes, addedEntities ){
+  complete: function( sourceNode, targetNodes, addedEntities ) {
     // fired when edgehandles is done and entities are added
   },
-  stop: function( sourceNode ){
+  stop: function( sourceNode ) {
     // fired when edgehandles interaction is stopped (either complete with added edges or incomplete)
@@ -104,0 +105,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

69766

increased by1.66%

Lines of code

880

increased by0.8%

Number of lines in readme file

166

increased by0.61%

No dependency changes