cytoscape-cxtmenu - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

bower.json

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

cytoscape-cxtmenu.js

@@ -99,4 +99,2 @@ ;(function( $ ){ 'use strict';
 
-        // console.log(rx1, ry1, theta1, theta2)
-
         var $item = $('<div class="cxtmenu-item"></div>');
@@ -127,3 +125,3 @@ $item.css({
         });
-        
+
         if( command.disabled ){
@@ -143,26 +141,6 @@ $content.addClass('cxtmenu-disabled');
 
-      function addDomListeners(){
-        // Left click hides menu and triggers command
-        $(document).on('click', hideParentOnClick = function() {
-          $parent.hide();
-        });
-
-        $wrapper.on('click', selectOnClickWrapper = function() {
-          if (activeCommandI !== undefined && !!target) {
-            var select = options.commands[activeCommandI].select;
-
-            if (select) {
-              select.apply(target);
-              activeCommandI = undefined;
-            }
-          }
-        });
+      function queueDrawBg( rspotlight ){
+        redrawQueue.drawBg = [ rspotlight ];
       }
 
-      function removeDomListeners(){
-        $(document).off('click', hideParentOnClick);
-        $wrapper.off('click', selectOnClickWrapper);
-      }
-
-
       function drawBg( rspotlight ){
@@ -200,8 +178,2 @@ rspotlight = rspotlight !== undefined ? rspotlight : rs;
 
-          // var rx2 = r * Math.cos(theta2);
-          // var ry2 = r * Math.sin(theta2);
-          // c2d.moveTo(r, r);
-          // c2d.lineTo(r + rx2, r + ry2);
-          // c2d.stroke();
-
           theta1 += dtheta;
@@ -222,25 +194,68 @@ theta2 += dtheta;
 
-      var lastCallTime = 0;
-      var minCallDelta = 1000/30;
-      var endCallTimeout;
-      var firstCall = true;
-      function rateLimitedCall( fn ){
-        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-        var now = +new Date;
+      function queueDrawCommands( rx, ry, theta ){
+        redrawQueue.drawCommands = [ rx, ry, theta ];
+      }
 
-        clearTimeout( endCallTimeout );
+      function drawCommands( rx, ry, theta ){
+        var commands = options.commands;
+        var dtheta = 2*Math.PI/(commands.length);
+        var theta1 = commands.length % 2 !== 0 ? Math.PI/2 : 0;
+        var theta2 = theta1 + dtheta;
 
-        if( firstCall || now >= lastCallTime + minCallDelta ){
-          requestAnimationFrame(fn);
-          lastCallTime = now;
-          firstCall = false;
-        } else {
-          endCallTimeout = setTimeout(function(){
-            requestAnimationFrame(fn);
-            lastCallTime = now;
-          }, minCallDelta * 2);
-        }
+        theta1 += dtheta * activeCommandI;
+        theta2 += dtheta * activeCommandI;
+
+        c2d.fillStyle = options.activeFillColor;
+        c2d.strokeStyle = 'black';
+        c2d.lineWidth = 1;
+        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.closePath();
+        c2d.fill();
+
+        c2d.fillStyle = 'white';
+        c2d.globalCompositeOperation = 'destination-out';
+
+        // clear the indicator
+        c2d.beginPath();
+        c2d.translate( r + options.activePadding + rx/r*(rs + options.spotlightPadding - options.indicatorSize/4), r + options.activePadding + ry/r*(rs + options.spotlightPadding - options.indicatorSize/4) );
+        c2d.rotate( Math.PI/4 - theta );
+        c2d.fillRect(-options.indicatorSize/2, -options.indicatorSize/2, options.indicatorSize, options.indicatorSize);
+        c2d.closePath();
+        c2d.fill();
+
+        c2d.setTransform(1, 0, 0, 1, 0, 0);
+
+        // clear the spotlight
+        c2d.beginPath();
+        c2d.arc(r + options.activePadding, r + options.activePadding, rs + options.spotlightPadding, 0, Math.PI*2, true);
+        c2d.closePath();
+        c2d.fill();
+
+        c2d.globalCompositeOperation = 'source-over';
       }
 
-      var ctrx, ctry, rs;
+      var redrawing = true;
+      var redrawQueue = {};
+      var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
+      var redraw = function(){
+        if( redrawQueue.drawBg ){
+          drawBg.apply( null, redrawQueue.drawBg );
+        }
+
+        if( redrawQueue.drawCommands ){
+          drawCommands.apply( null, redrawQueue.drawCommands );
+        }
+
+        redrawQueue = {};
+
+        if( redrawing ){
+          raf( redraw );
+        }
+      };
+
+      redraw(); // kick off
+
+      var ctrx, ctry, rs, theta;
       var tapendHandler;
@@ -275,2 +290,3 @@
         var zoomEnabled;
+        var panEnabled;
 
@@ -289,2 +305,8 @@ var restoreZoom = function(){
 
+        var restorePan = function(){
+          if( panEnabled ){
+            cy.userPanningEnabled( true );
+          }
+        };
+
         bindings
@@ -299,2 +321,5 @@ .on('cxttapstart taphold', options.selector, function(e){
 
+            panEnabled = cy.userPanningEnabled();
+            cy.userPanningEnabled( false );
+
             grabbable = target.grabbable &&  target.grabbable();
@@ -332,3 +357,3 @@ if( grabbable ){
 
-            drawBg();
+            queueDrawBg();
 
@@ -340,3 +365,3 @@ activeCommandI = undefined;
 
-          .on('cxtdrag tapdrag', options.selector, dragHandler = function(e){ rateLimitedCall(function(){
+          .on('cxtdrag tapdrag', options.selector, dragHandler = function(e){
 
@@ -351,2 +376,4 @@ if( !inGesture ){ return; }
 
+            activeCommandI = undefined;
+
             var dx = pageX - offset.left - ctrx;
@@ -361,10 +388,8 @@ var dy = pageY - offset.top - ctry;
 
-            activeCommandI = undefined;
-
             if( d < rs + options.spotlightPadding ){
-              drawBg();
+              queueDrawBg();
               return;
             }
 
-            drawBg();
+            queueDrawBg();
 
@@ -386,8 +411,5 @@ var rx = dx*r / d;
 
-
-              // console.log(i, theta1, theta, theta2);
-
               var inThisCommand = theta1 <= theta && theta <= theta2
                 || theta1 <= theta + 2*Math.PI && theta + 2*Math.PI <= theta2;
-                
+
               if( command.disabled ){
@@ -398,16 +420,3 @@ inThisCommand = false;
               if( inThisCommand ){
-                // console.log('in command ' + i)
-
-                c2d.fillStyle = options.activeFillColor;
-                c2d.strokeStyle = 'black';
-                c2d.lineWidth = 1;
-                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.closePath();
-                c2d.fill();
-                //c2d.stroke();
-
                 activeCommandI = i;
-
                 break;
@@ -420,26 +429,5 @@ }
 
-            c2d.fillStyle = 'white';
-            c2d.globalCompositeOperation = 'destination-out';
+            queueDrawCommands( rx, ry, theta );
+          })
 
-            // clear the indicator
-            c2d.beginPath();
-            //c2d.arc(r + rx/r*(rs + options.spotlightPadding), r + ry/r*(rs + options.spotlightPadding), options.indicatorSize, 0, 2*Math.PI, true);
-
-            c2d.translate( r + options.activePadding + rx/r*(rs + options.spotlightPadding - options.indicatorSize/4), r + options.activePadding + ry/r*(rs + options.spotlightPadding - options.indicatorSize/4) );
-            c2d.rotate( Math.PI/4 - theta );
-            c2d.fillRect(-options.indicatorSize/2, -options.indicatorSize/2, options.indicatorSize, options.indicatorSize);
-            c2d.closePath();
-            c2d.fill();
-
-            c2d.setTransform(1, 0, 0, 1, 0, 0);
-
-            // clear the spotlight
-            c2d.beginPath();
-            c2d.arc(r + options.activePadding, r + options.activePadding, rs + options.spotlightPadding, 0, Math.PI*2, true);
-            c2d.closePath();
-            c2d.fill();
-
-            c2d.globalCompositeOperation = 'source-over';
-          }) })
-
           .on('tapdrag', dragHandler)
@@ -464,2 +452,3 @@
             restoreZoom();
+            restorePan();
           })
@@ -474,2 +463,3 @@
             restoreZoom();
+            restorePan();
           })
@@ -494,5 +484,6 @@ ;
       function destroyInstance(){
+        redrawing = false;
+
         removeEventListeners();
 
-        removeDomListeners();
         $wrapper.remove();
@@ -499,0 +490,0 @@ }

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

598588

decreased by-0.11%

Lines of code

1839

decreased by-0.38%

No dependency changes