cytoscape-cxtmenu - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

cytoscape-cxtmenu.js

@@ -113,3 +113,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var c2d = canvas.getContext('2d');
-  var r = options.menuRadius;
+
+  var r = 100; // defailt radius;
   var containerSize = (r + options.activePadding) * 2;
@@ -213,9 +214,8 @@ var activeCommandI = void 0;
 
-  function queueDrawBg(rspotlight) {
-    redrawQueue.drawBg = [rspotlight];
+  function queueDrawBg(radius, rspotlight) {
+    redrawQueue.drawBg = [radius, rspotlight];
   }
 
-  function drawBg(rspotlight) {
+  function drawBg(radius, rspotlight) {
     rspotlight = rspotlight !== undefined ? rspotlight : rs;
-
     c2d.globalCompositeOperation = 'source-over';
@@ -238,4 +238,4 @@
       c2d.beginPath();
-      c2d.moveTo(r + options.activePadding, r + options.activePadding);
-      c2d.arc(r + options.activePadding, r + options.activePadding, r, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
+      c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
+      c2d.arc(radius + options.activePadding, radius + options.activePadding, radius, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
       c2d.closePath();
@@ -258,7 +258,7 @@ c2d.fill();
     for (var i = 0; i < commands.length; i++) {
-      var rx1 = r * Math.cos(theta1);
-      var ry1 = r * Math.sin(theta1);
+      var rx1 = radius * Math.cos(theta1);
+      var ry1 = radius * Math.sin(theta1);
       c2d.beginPath();
-      c2d.moveTo(r + options.activePadding, r + options.activePadding);
-      c2d.lineTo(r + options.activePadding + rx1, r + options.activePadding - ry1);
+      c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
+      c2d.lineTo(radius + options.activePadding + rx1, radius + options.activePadding - ry1);
       c2d.closePath();
@@ -274,3 +274,3 @@ c2d.stroke();
     c2d.beginPath();
-    c2d.arc(r + options.activePadding, r + options.activePadding, rspotlight + options.spotlightPadding, 0, Math.PI * 2, true);
+    c2d.arc(radius + options.activePadding, radius + options.activePadding, rspotlight + options.spotlightPadding, 0, Math.PI * 2, true);
     c2d.closePath();
@@ -282,7 +282,7 @@ c2d.fill();
 
-  function queueDrawCommands(rx, ry, theta) {
-    redrawQueue.drawCommands = [rx, ry, theta];
+  function queueDrawCommands(rx, ry, radius, theta) {
+    redrawQueue.drawCommands = [rx, ry, radius, theta];
   }
 
-  function drawCommands(rx, ry, theta) {
+  function drawCommands(rx, ry, radius, theta) {
     var dtheta = 2 * Math.PI / commands.length;
@@ -299,4 +299,4 @@ var theta1 = Math.PI / 2;
     c2d.beginPath();
-    c2d.moveTo(r + options.activePadding, r + options.activePadding);
-    c2d.arc(r + options.activePadding, r + options.activePadding, r + options.activePadding, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
+    c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
+    c2d.arc(radius + options.activePadding, radius + options.activePadding, radius + options.activePadding, 2 * Math.PI - theta1, 2 * Math.PI - theta2, true);
     c2d.closePath();
@@ -308,4 +308,4 @@ c2d.fill();
 
-    var tx = r + options.activePadding + rx / r * (rs + options.spotlightPadding - options.indicatorSize / 4);
-    var ty = r + options.activePadding + ry / r * (rs + options.spotlightPadding - options.indicatorSize / 4);
+    var tx = radius + options.activePadding + rx / radius * (rs + options.spotlightPadding - options.indicatorSize / 4);
+    var ty = radius + options.activePadding + ry / radius * (rs + options.spotlightPadding - options.indicatorSize / 4);
     var rot = Math.PI / 4 - theta;
@@ -329,3 +329,3 @@
     c2d.beginPath();
-    c2d.arc(r + options.activePadding, r + options.activePadding, rs + options.spotlightPadding, 0, Math.PI * 2, true);
+    c2d.arc(radius + options.activePadding, radius + options.activePadding, rs + options.spotlightPadding, 0, Math.PI * 2, true);
     c2d.closePath();
@@ -509,4 +509,4 @@ c2d.fill();
           rp = ele.renderedPosition();
-          rw = ele.renderedWidth();
-          rh = ele.renderedHeight();
+          rw = ele.renderedOuterWidth();
+          rh = ele.renderedOuterHeight();
         } else {
@@ -523,5 +523,9 @@ rp = e.renderedPosition || e.cyRenderedPosition;
 
-        createMenuItems();
+        r = rw / 2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));
+        containerSize = (r + options.activePadding) * 2;
+        updatePixelRatio();
 
         setStyles(parent, {
+          width: containerSize + 'px',
+          height: containerSize + 'px',
           display: 'block',
@@ -531,2 +535,3 @@ left: rp.x - r + 'px',
         });
+        createMenuItems();
 
@@ -537,3 +542,3 @@ rs = Math.max(rw, rh) / 2;
 
-        queueDrawBg();
+        queueDrawBg(r);
 
@@ -570,9 +575,16 @@ activeCommandI = undefined;
 
+      var rw = void 0;
+      if (target && target.isNode instanceof Function && target.isNode() && !target.isParent() && !options.atMouse) {
+        rw = target.renderedOuterWidth();
+      } else {
+        rw = 1;
+      }
+
+      r = rw / 2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));
       if (d < rs + options.spotlightPadding) {
-        queueDrawBg();
+        queueDrawBg(r);
         return;
       }
+      queueDrawBg(r);
 
-      queueDrawBg();
-
       var rx = dx * r / d;
@@ -607,3 +619,3 @@ var ry = dy * r / d;
 
-      queueDrawCommands(rx, ry, theta);
+      queueDrawCommands(rx, ry, r, theta);
     }).on('tapdrag', dragHandler).on('cxttapend tapend', function () {
@@ -695,3 +707,5 @@ parent.style.display = 'none';
 var defaults = {
-  menuRadius: 100, // the radius of the circular menu in pixels
+  menuRadius: function menuRadius(ele) {
+    return 100;
+  }, // the radius of the circular menu in pixels
   selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
@@ -698,0 +712,0 @@ commands: [// an array of commands to list in the menu or a function that returns the array

package.json

 {
   "name": "cytoscape-cxtmenu",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "A circular, swipeable context menu extension for Cytoscape.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-cxtmenu.js",

README.md

@@ -75,3 +75,3 @@ cytoscape-cxtmenu
 let defaults = {
-  menuRadius: 100, // the radius of the circular menu in pixels
+  menuRadius: function(ele){ return 100; }, // the outer radius (node center to the end of the menu) in pixels. It is added to the rendered size of the node. 
   selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
@@ -78,0 +78,0 @@ commands: [ // an array of commands to list in the menu or a function that returns the array

src/cxtmenu.js

@@ -22,3 +22,4 @@ const defaults = require('./defaults');
   let c2d = canvas.getContext('2d');
-  let r = options.menuRadius;
+
+  let r = 100; // defailt radius;
   let containerSize = (r + options.activePadding)*2;
@@ -122,9 +123,8 @@ let activeCommandI;
 
-  function queueDrawBg( rspotlight ){
-    redrawQueue.drawBg = [ rspotlight ];
+  function queueDrawBg( radius, rspotlight ){
+    redrawQueue.drawBg = [ radius, rspotlight ];
   }
 
-  function drawBg( rspotlight ){
+  function drawBg( radius, rspotlight ){
     rspotlight = rspotlight !== undefined ? rspotlight : rs;
-
     c2d.globalCompositeOperation = 'source-over';
@@ -147,4 +147,4 @@
       c2d.beginPath();
-      c2d.moveTo(r + options.activePadding, r + options.activePadding);
-      c2d.arc(r + options.activePadding, r + options.activePadding, r, 2*Math.PI - theta1, 2*Math.PI - theta2, true);
+      c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
+      c2d.arc(radius + options.activePadding, radius + options.activePadding, radius, 2*Math.PI - theta1, 2*Math.PI - theta2, true);
       c2d.closePath();
@@ -167,7 +167,7 @@ c2d.fill();
     for( let i = 0; i < commands.length; i++ ){
-      let rx1 = r * Math.cos(theta1);
-      let ry1 = r * Math.sin(theta1);
+      let rx1 = radius * Math.cos(theta1);
+      let ry1 = radius * Math.sin(theta1);
       c2d.beginPath();
-      c2d.moveTo(r + options.activePadding, r + options.activePadding);
-      c2d.lineTo(r + options.activePadding + rx1, r + options.activePadding - ry1);
+      c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
+      c2d.lineTo(radius + options.activePadding + rx1, radius + options.activePadding - ry1);
       c2d.closePath();
@@ -184,3 +184,3 @@ c2d.stroke();
     c2d.beginPath();
-    c2d.arc(r + options.activePadding, r + options.activePadding, rspotlight + options.spotlightPadding, 0, Math.PI*2, true);
+    c2d.arc(radius + options.activePadding, radius + options.activePadding, rspotlight + options.spotlightPadding, 0, Math.PI*2, true);
     c2d.closePath();
@@ -192,7 +192,7 @@ c2d.fill();
 
-  function queueDrawCommands( rx, ry, theta ){
-    redrawQueue.drawCommands = [ rx, ry, theta ];
+  function queueDrawCommands( rx, ry, radius, theta ){
+    redrawQueue.drawCommands = [ rx, ry, radius, theta ];
   }
 
-  function drawCommands( rx, ry, theta ){
+  function drawCommands( rx, ry, radius, theta ){
     let dtheta = 2*Math.PI/(commands.length);
@@ -209,4 +209,4 @@ let theta1 = Math.PI/2;
     c2d.beginPath();
-    c2d.moveTo(r + options.activePadding, r + options.activePadding);
-    c2d.arc(r + options.activePadding, r + options.activePadding, r + options.activePadding, 2*Math.PI - theta1, 2*Math.PI - theta2, true);
+    c2d.moveTo(radius + options.activePadding, radius + options.activePadding);
+    c2d.arc(radius + options.activePadding, radius + options.activePadding, radius + options.activePadding, 2*Math.PI - theta1, 2*Math.PI - theta2, true);
     c2d.closePath();
@@ -218,4 +218,4 @@ c2d.fill();
 
-    let tx = r + options.activePadding + rx/r*(rs + options.spotlightPadding - options.indicatorSize/4);
-    let ty = r + options.activePadding + ry/r*(rs + options.spotlightPadding - options.indicatorSize/4);
+    let tx = radius + options.activePadding + rx/radius*(rs + options.spotlightPadding - options.indicatorSize/4);
+    let ty = radius + options.activePadding + ry/radius*(rs + options.spotlightPadding - options.indicatorSize/4);
     let rot = Math.PI/4 - theta;
@@ -239,3 +239,3 @@
     c2d.beginPath();
-    c2d.arc(r + options.activePadding, r + options.activePadding, rs + options.spotlightPadding, 0, Math.PI*2, true);
+    c2d.arc(radius + options.activePadding, radius + options.activePadding, rs + options.spotlightPadding, 0, Math.PI*2, true);
     c2d.closePath();
@@ -419,4 +419,4 @@ c2d.fill();
             rp = ele.renderedPosition();
-            rw = ele.renderedWidth();
-            rh = ele.renderedHeight();
+            rw = ele.renderedOuterWidth();
+            rh = ele.renderedOuterHeight();
           } else {
@@ -433,5 +433,9 @@ rp = e.renderedPosition || e.cyRenderedPosition;
 
-          createMenuItems();
+          r = rw/2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));
+          containerSize = (r + options.activePadding)*2;
+          updatePixelRatio();
 
           setStyles(parent, {
+            width: containerSize + 'px',
+            height: containerSize + 'px',   
             display: 'block',
@@ -441,2 +445,3 @@ left: (rp.x - r) + 'px',
           });
+          createMenuItems();
 
@@ -447,3 +452,3 @@ rs = Math.max(rw, rh)/2;
 
-          queueDrawBg();
+          queueDrawBg(r);
 
@@ -478,9 +483,17 @@ activeCommandI = undefined;
 
+
+        let rw;
+        if(target && target.isNode instanceof Function && target.isNode() && !target.isParent() && !options.atMouse ){
+          rw = target.renderedOuterWidth();
+        } else {
+          rw = 1;
+        }
+
+        r = rw/2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));
         if( d < rs + options.spotlightPadding ){
-          queueDrawBg();
+          queueDrawBg(r);
           return;
         }
+        queueDrawBg(r);
 
-        queueDrawBg();
-
         let rx = dx*r / d;
@@ -516,3 +529,3 @@ let ry = dy*r / d;
 
-        queueDrawCommands( rx, ry, theta );
+        queueDrawCommands( rx, ry, r, theta );
       })
@@ -519,0 +532,0 @@

src/defaults.js

 let defaults = {
-  menuRadius: 100, // the radius of the circular menu in pixels
+  menuRadius: function(ele){ return 100 }, // the radius of the circular menu in pixels
   selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus
@@ -4,0 +4,0 @@ commands: [ // an array of commands to list in the menu or a function that returns the array

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

85754

increased by2.14%

Lines of code

1237

increased by2.15%

No dependency changes