cytoscape-cxtmenu - npm Package Compare versions

Comparing version 2.10.0 to 2.10.1

cytoscape-cxtmenu.js

@@ -40,3 +40,3 @@ /*!
     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
+    activeFillColor: 'rgba(1, 105, 217, 0.75)', // the colour used to indicate the selected command
     activePadding: 20, // additional size in pixels for the active command
@@ -50,3 +50,3 @@ indicatorSize: 24, // the size in pixels of the pointer to the active command
     itemColor: 'white', // the colour of text in the command's content
-    itemTextShadowColor: 'black', // the text shadow colour of the command's content
+    itemTextShadowColor: 'transparent', // the text shadow colour of the command's content
     zIndex: 9999, // the z-index of the ui div
@@ -113,2 +113,6 @@ atMouse: false // draw menu at mouse position
 
+  var getPixelRatio = function(){
+    return window.devicePixelRatio || 1;
+  };
+
   // registers the extension on a cytoscape lib ref
@@ -145,2 +149,3 @@ var register = function(cytoscape){
       var canvas = createElement({tag: 'canvas'});
+      var pxRatio;
       var commands = [];
@@ -196,3 +201,3 @@ var c2d = canvas.getContext('2d');
             position: 'absolute',
-            'text-shadow': '-1px -1px ' + options.itemTextShadowColor + ', 1px -1px ' + options.itemTextShadowColor + ', -1px 1px ' + options.itemTextShadowColor + ', 1px 1px ' + options.itemTextShadowColor,
+            'text-shadow': '-1px -1px 2px ' + options.itemTextShadowColor + ', 1px -1px 2px ' + options.itemTextShadowColor + ', -1px 1px 2px ' + options.itemTextShadowColor + ', 1px 1px 1px ' + options.itemTextShadowColor,
             left: '50%',
@@ -318,6 +323,11 @@ top: '50%',
 
+        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 rot = Math.PI/4 - theta;
+
+        c2d.translate( tx, ty );
+        c2d.rotate( rot );
+
         // 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);
@@ -327,4 +337,7 @@ c2d.closePath();
 
-        c2d.setTransform(1, 0, 0, 1, 0, 0);
+        c2d.rotate( -rot );
+        c2d.translate( -tx, -ty );
 
+        // c2d.setTransform( 1, 0, 0, 1, 0, 0 );
+
         // clear the spotlight
@@ -339,2 +352,17 @@ c2d.beginPath();
 
+      function updatePixelRatio(){
+        var pxr = getPixelRatio();
+        var w = container.clientWidth;
+        var h = container.clientHeight;
+
+        canvas.width = w * pxr;
+        canvas.height = h * pxr;
+
+        canvas.style.width = w + 'px';
+        canvas.style.height = h + 'px';
+
+        c2d.setTransform( 1, 0, 0, 1, 0, 0 );
+        c2d.scale( pxr, pxr );
+      }
+
       var redrawing = true;
@@ -344,2 +372,4 @@ var redrawQueue = {};
       var redraw = function(){
+        var pxr = getPixelRatio();
+
         if( redrawQueue.drawBg ){
@@ -360,3 +390,5 @@ drawBg.apply( null, redrawQueue.drawBg );
 
-      redraw(); // kick off
+      // kick off
+      updatePixelRatio();
+      redraw();
 
@@ -433,3 +465,9 @@ var ctrx, ctry, rs;
 
+        window.addEventListener('resize', updatePixelRatio);
+
         bindings
+          .on('resize', function(e){
+            updatePixelRatio();
+          })
+
           .on(options.openMenuEvents, options.selector, function(e){
@@ -600,2 +638,4 @@ target = this; // Remember which node the context menu is for
         }
+
+        window.removeEventListener('resize', updatePixelRatio);
       }
@@ -602,0 +642,0 @@

package.json

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

605169

increased by0.15%

Lines of code

1966

increased by1.44%

Number of medium supply chain risk alerts

6

decreased by-14.29%

No dependency changes