cytoscape-cxtmenu - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

bower.json

 {
   "name": "cytoscape-cxtmenu",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A context menu for Cytoscape.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-cxtmenu.js",

cytoscape-cxtmenu.js

@@ -6,12 +6,12 @@ ;(function( $ ){ 'use strict';
     selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
-    commands: [ // an array of commands to list in the menu
+    commands: [ // an array of commands to list in the menu or a function that returns the array
       /*
       { // example command
         content: 'a command name' // html/text content to be displayed in the menu
-        select: function(){ // a function to execute when the command is selected
-          console.log( this.id() ) // `this` holds the reference to the active element
+        select: function(ele){ // a function to execute when the command is selected
+          console.log( ele.id() ) // `ele` holds the reference to the active element
         }
       }
       */
-    ],
+    ], // function( ele ){ return [ /*...*/ ] }, // example function for commands
     fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
@@ -60,2 +60,3 @@ activeFillColor: 'rgba(92, 194, 237, 0.75)', // the colour used to indicate the selected command
       var $canvas = $('<canvas></canvas>');
+      var commands = [];
       var c2d = $canvas[0].getContext('2d');
@@ -67,3 +68,3 @@ var r = options.menuRadius;
 
-      $container.append( $wrapper );
+      $container.prepend( $wrapper );
       $wrapper.append( $parent );
@@ -89,14 +90,14 @@ $parent.append( $canvas );
 
-      var commands = options.commands;
-      var dtheta = 2*Math.PI/(commands.length);
-      var theta1 = commands.length % 2 !== 0 ? Math.PI/2 : 0;
+    function createMenuItems() {
+      $('.cxtmenu-item').remove();
+      var dtheta = 2 * Math.PI / (commands.length);
+      var theta1 = commands.length % 2 !== 0 ? Math.PI / 2 : 0;
       var theta2 = theta1 + dtheta;
-      var $items = [];
 
-      for( var i = 0; i < commands.length; i++ ){
+      for (var i = 0; i < commands.length; i++) {
         var command = commands[i];
 
-        var midtheta = (theta1 + theta2)/2;
-        var rx1 = 0.66 * r * Math.cos( midtheta );
-        var ry1 = 0.66 * r * Math.sin( midtheta );
+        var midtheta = (theta1 + theta2) / 2;
+        var rx1 = 0.66 * r * Math.cos(midtheta);
+        var ry1 = 0.66 * r * Math.sin(midtheta);
 
@@ -118,3 +119,3 @@ var $item = $('<div class="cxtmenu-item"></div>');
           marginLeft: rx1 - r * 0.33,
-          marginTop: -ry1 -r * 0.33
+          marginTop: -ry1 - r * 0.33
         });
@@ -130,8 +131,8 @@
 
-        if( command.disabled ){
+        if (command.disabled) {
           $content.addClass('cxtmenu-disabled');
         }
 
-        $parent.append( $item );
-        $item.append( $content );
+        $parent.append($item);
+        $item.append($content);
 
@@ -142,3 +143,3 @@
       }
-
+    }
       var hideParentOnClick, selectOnClickWrapper;
@@ -166,3 +167,2 @@
         c2d.lineWidth = options.separatorWidth;
-        var commands = options.commands;
         var dtheta = 2*Math.PI/(commands.length);
@@ -203,3 +203,2 @@ var theta1 = commands.length % 2 !== 0 ? Math.PI/2 : 0;
       function drawCommands( rx, ry, theta ){
-        var commands = options.commands;
         var dtheta = 2*Math.PI/(commands.length);
@@ -320,2 +319,10 @@ var theta1 = commands.length % 2 !== 0 ? Math.PI/2 : 0;
 
+            if( typeof options.commands === 'function' ){
+              commands = options.commands(target);
+            } else {
+              commands = options.commands;
+            }
+
+            if( !commands || commands.length == 0 ){ return; }
+
             zoomEnabled = cy.userZoomingEnabled();
@@ -350,2 +357,4 @@ cy.userZoomingEnabled( false );
 
+            createMenuItems();
+
             $parent.show().css({
@@ -402,3 +411,2 @@ 'left': rp.x - r + 'px',
 
-            var commands = options.commands;
             var dtheta = 2*Math.PI/(commands.length);
@@ -437,6 +445,6 @@ var theta1 = commands.length % 2 !== 0 ? Math.PI/2 : 0;
             if( activeCommandI !== undefined ){
-              var select = options.commands[ activeCommandI ].select;
+              var select = commands[ activeCommandI ].select;
 
               if( select ){
-                select.apply( ele );
+                select.apply( ele, [ele] );
                 activeCommandI = undefined;
@@ -443,0 +451,0 @@ }

package.json

 {
   "name": "cytoscape-cxtmenu",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A context menu for Cytoscape.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-cxtmenu.js",

README.md

@@ -67,25 +67,25 @@ cytoscape-cxtmenu
 var defaults = {
-	menuRadius: 100, // the radius of the circular menu in pixels
-	selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
-	commands: [ // an array of commands to list in the menu
-		/*
-		{ // example command
-			content: 'a command name', // html/text content to be displayed in the menu
-			select: function(){ // a function to execute when the command is selected
-				console.log( this.id() ) // `this` holds the reference to the active element
-			}
-		}
-		*/
-	], 
-	fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
-	activeFillColor: 'rgba(92, 194, 237, 0.75)', // the colour used to indicate the selected command
-	activePadding: 20, // additional size in pixels for the active command
-	indicatorSize: 24, // the size in pixels of the pointer to the active command
-	separatorWidth: 3, // the empty spacing in pixels between successive commands
-	spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
-	minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight
-	maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight
-	itemColor: 'white', // the colour of text in the command's content
-	itemTextShadowColor: 'black', // the text shadow colour of the command's content
-	zIndex: 9999 // the z-index of the ui div
+  menuRadius: 100, // the radius of the circular menu in pixels
+  selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
+  commands: [ // an array of commands to list in the menu or a function that returns the array
+    /*
+    { // example command
+      content: 'a command name' // html/text content to be displayed in the menu
+      select: function(ele){ // a function to execute when the command is selected
+        console.log( ele.id() ) // `ele` holds the reference to the active element
+      }
+    }
+    */
+  ], // function( ele ){ return [ /*...*/ ] }, // example function for commands
+  fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu
+  activeFillColor: 'rgba(92, 194, 237, 0.75)', // the colour used to indicate the selected command
+  activePadding: 20, // additional size in pixels for the active command
+  indicatorSize: 24, // the size in pixels of the pointer to the active command
+  separatorWidth: 3, // the empty spacing in pixels between successive commands
+  spotlightPadding: 4, // extra spacing in pixels between the element and the spotlight
+  minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight
+  maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight
+  itemColor: 'white', // the colour of text in the command's content
+  itemTextShadowColor: 'black', // the text shadow colour of the command's content
+  zIndex: 9999 // the z-index of the ui div
 };
@@ -92,0 +92,0 @@

No alert changes

Improved metrics

Total package byte prevSize

599045

increased by0.08%

Lines of code

1845

increased by0.33%

No dependency changes