Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

cytoscape-cxtmenu

Package Overview
Dependencies
Maintainers
3
Versions
40
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cytoscape-cxtmenu - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

demo-adaptative.html

84

cytoscape-cxtmenu.js

@@ -153,3 +153,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

function createMenuItems() {
function createMenuItems(r, rs) {
removeEles('.cxtmenu-item', parent);

@@ -164,5 +164,11 @@ var dtheta = 2 * Math.PI / commands.length;

var midtheta = (theta1 + theta2) / 2;
var rx1 = 0.66 * r * Math.cos(midtheta);
var ry1 = 0.66 * r * Math.sin(midtheta);
var rx1 = (r + rs) / 2 * Math.cos(midtheta);
var ry1 = (r + rs) / 2 * Math.sin(midtheta);
// Arbitrary multiplier to increase the sizing of the space
// available for the item.
var width = 1 * Math.abs((r - rs) * Math.cos(midtheta));
var height = 1 * Math.abs((r - rs) * Math.sin(midtheta));
width = Math.max(width, height);
var item = createElement({ class: 'cxtmenu-item' });

@@ -179,7 +185,7 @@ setStyles(item, {

top: '50%',
'min-height': r * 0.66 + 'px',
width: r * 0.66 + 'px',
height: r * 0.66 + 'px',
marginLeft: rx1 - r * 0.33 + 'px',
marginTop: -ry1 - r * 0.33 + 'px'
'min-height': width + 'px',
width: width + 'px',
height: width + 'px',
marginLeft: rx1 - width / 2 + 'px',
marginTop: -ry1 - width / 2 + 'px'
});

@@ -196,4 +202,4 @@

setStyles(content, {
'width': r * 0.66 + 'px',
'height': r * 0.66 + 'px',
'width': width + 'px',
'height': width + 'px',
'vertical-align': 'middle',

@@ -222,3 +228,2 @@ 'display': 'table-cell'

function drawBg(radius, rspotlight) {
rspotlight = rspotlight !== undefined ? rspotlight : rs;
c2d.globalCompositeOperation = 'source-over';

@@ -282,7 +287,7 @@

function queueDrawCommands(rx, ry, radius, theta) {
redrawQueue.drawCommands = [rx, ry, radius, theta];
function queueDrawCommands(rx, ry, radius, theta, rspotlight) {
redrawQueue.drawCommands = [rx, ry, radius, theta, rspotlight];
}
function drawCommands(rx, ry, radius, theta) {
function drawCommands(rx, ry, radius, theta, rs) {
var dtheta = 2 * Math.PI / commands.length;

@@ -315,4 +320,7 @@ var theta1 = Math.PI / 2;

// clear the indicator
// The indicator size (arrow) depends on the node size as well. If the indicator size is bigger and the rendered node size + padding,
// use the rendered node size + padding as the indicator size.
var indicatorSize = options.indicatorSize > rs + options.spotlightPadding ? rs + options.spotlightPadding : options.indicatorSize;
c2d.beginPath();
c2d.fillRect(-options.indicatorSize / 2, -options.indicatorSize / 2, options.indicatorSize, options.indicatorSize);
c2d.fillRect(-indicatorSize / 2, -indicatorSize / 2, indicatorSize, indicatorSize);
c2d.closePath();

@@ -504,11 +512,21 @@ c2d.fill();

rw = void 0,
rh = void 0;
if (!isCy && ele.isNode() && !ele.isParent() && !options.atMouse) {
rh = void 0,
rs = void 0;
if (!isCy && ele && ele.isNode instanceof Function && ele.isNode() && !ele.isParent() && !options.atMouse) {
// If it's a node, the default spotlight radius for a node is the node width
rp = ele.renderedPosition();
rw = ele.renderedOuterWidth();
rh = ele.renderedOuterHeight();
rs = rw / 2;
// If adaptativeNodespotlightRadius is not enabled and min|maxSpotlighrRadius is defined, use those instead
rs = !options.adaptativeNodeSpotlightRadius && options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius) : rs;
rs = !options.adaptativeNodeSpotlightRadius && options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius) : rs;
} else {
// If it's the background or an edge, the spotlight radius is the min|maxSpotlightRadius
rp = e.renderedPosition || e.cyRenderedPosition;
rw = 1;
rh = 1;
rs = rw / 2;
rs = options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius) : rs;
rs = options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius) : rs;
}

@@ -520,3 +538,2 @@

ctry = rp.y;
r = rw / 2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));

@@ -533,10 +550,5 @@ containerSize = (r + options.activePadding) * 2;

});
createMenuItems();
createMenuItems(r, rs);
queueDrawBg(r, rs);
rs = Math.max(rw, rh) / 2;
rs = Math.max(rs, options.minSpotlightRadius);
rs = Math.min(rs, options.maxSpotlightRadius);
queueDrawBg(r);
activeCommandI = undefined;

@@ -574,5 +586,14 @@

if (target && target.isNode instanceof Function && target.isNode() && !target.isParent() && !options.atMouse) {
// If it's a node, the default spotlight radius for a node is the node width
rw = target.renderedOuterWidth();
rs = rw / 2;
// If adaptativeNodespotlightRadius is not enabled and min|maxSpotlighrRadius is defined, use those instead
rs = !options.adaptativeNodeSpotlightRadius && options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius) : rs;
rs = !options.adaptativeNodeSpotlightRadius && options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius) : rs;
} else {
// If it's the background or an edge, the spotlight radius is the min|maxSpotlightRadius
rw = 1;
rs = rw / 2;
rs = options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius) : rs;
rs = options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius) : rs;
}

@@ -582,6 +603,6 @@

if (d < rs + options.spotlightPadding) {
queueDrawBg(r);
queueDrawBg(r, rs);
return;
}
queueDrawBg(r);
queueDrawBg(r, rs);

@@ -617,3 +638,3 @@ var rx = dx * r / d;

queueDrawCommands(rx, ry, r, theta);
queueDrawCommands(rx, ry, r, theta, rs);
}).on('tapdrag', dragHandler).on('cxttapend tapend', function () {

@@ -725,7 +746,8 @@ parent.style.display = 'none';

activePadding: 20, // additional size in pixels for the active command
indicatorSize: 24, // the size in pixels of the pointer to the active command
indicatorSize: 24, // the size in pixels of the pointer to the active command, will default to the node size if the node size is smaller than the indicator size,
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
adaptativeNodeSpotlightRadius: false, // specify whether the spotlight radius should adapt to the node size
minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here

@@ -732,0 +754,0 @@ itemColor: 'white', // the colour of text in the command's content

2

package.json
{
"name": "cytoscape-cxtmenu",
"version": "3.2.0",
"version": "3.3.0",
"description": "A circular, swipeable context menu extension for Cytoscape.js",

@@ -5,0 +5,0 @@ "main": "cytoscape-cxtmenu.js",

13

README.md

@@ -10,3 +10,5 @@ cytoscape-cxtmenu

A circular, swipeable context menu extension for Cytoscape.js ([demo](https://cytoscape.github.io/cytoscape.js-cxtmenu))
A circular, swipeable context menu extension for Cytoscape.js
- Demo without adaptative spotlight radius features: [demo](https://cytoscape.github.io/cytoscape.js-cxtmenu)
- Demo with adaptative spotlight radius features: [demo](https://cytoscape.github.io/cytoscape.js-cxtmenu/demo-adaptative.html)

@@ -76,3 +78,3 @@ This extension creates a widget that lets the user operate circular context menus on nodes in Cytoscape.js. The user swipes along the circular menu to select a menu item and perform a command on either a node, a edge, or the graph background.

let defaults = {
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.
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. Can either be a number or function as in the example.
selector: 'node', // elements matching this Cytoscape.js selector will trigger cxtmenus

@@ -95,7 +97,8 @@ commands: [ // an array of commands to list in the menu or a function that returns the array

activePadding: 20, // additional size in pixels for the active command
indicatorSize: 24, // the size in pixels of the pointer to the active command
indicatorSize: 24, // the size in pixels of the pointer to the active command, will default to the node size if the node size is smaller than the indicator size,
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
adaptativeNodeSpotlightRadius: false, // specify whether the spotlight radius should adapt to the node size
minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here

@@ -102,0 +105,0 @@ itemColor: 'white', // the colour of text in the command's content

78

src/cxtmenu.js

@@ -62,3 +62,3 @@ const defaults = require('./defaults');

function createMenuItems() {
function createMenuItems(r, rs) {
removeEles('.cxtmenu-item', parent);

@@ -73,5 +73,11 @@ let dtheta = 2 * Math.PI / (commands.length);

let midtheta = (theta1 + theta2) / 2;
let rx1 = 0.66 * r * Math.cos(midtheta);
let ry1 = 0.66 * r * Math.sin(midtheta);
let rx1 = ((r + rs)/2) * Math.cos(midtheta);
let ry1 = ((r + rs)/2) * Math.sin(midtheta);
// Arbitrary multiplier to increase the sizing of the space
// available for the item.
let width = 1 * Math.abs((r - rs) * Math.cos(midtheta));
let height = 1 * Math.abs((r - rs) * Math.sin(midtheta));
width = Math.max(width, height)
let item = createElement({class: 'cxtmenu-item'});

@@ -88,7 +94,7 @@ setStyles(item, {

top: '50%',
'min-height': (r * 0.66) + 'px',
width: (r * 0.66) + 'px',
height: (r * 0.66) + 'px',
marginLeft: (rx1 - r * 0.33) + 'px',
marginTop: (-ry1 - r * 0.33) + 'px'
'min-height': width + 'px',
width: width + 'px',
height: width + 'px',
marginLeft: (rx1 - width/2) + 'px',
marginTop: (-ry1 - width/2) + 'px'
});

@@ -105,6 +111,6 @@

setStyles(content, {
'width': (r * 0.66) + 'px',
'height': (r * 0.66) + 'px',
'width': width + 'px',
'height': width + 'px',
'vertical-align': 'middle',
'display': 'table-cell'
'display': 'table-cell',
});

@@ -131,3 +137,2 @@

function drawBg( radius, rspotlight ){
rspotlight = rspotlight !== undefined ? rspotlight : rs;
c2d.globalCompositeOperation = 'source-over';

@@ -192,7 +197,7 @@

function queueDrawCommands( rx, ry, radius, theta ){
redrawQueue.drawCommands = [ rx, ry, radius, theta ];
function queueDrawCommands( rx, ry, radius, theta, rspotlight ){
redrawQueue.drawCommands = [ rx, ry, radius, theta, rspotlight ];
}
function drawCommands( rx, ry, radius, theta ){
function drawCommands( rx, ry, radius, theta, rs ){
let dtheta = 2*Math.PI/(commands.length);

@@ -225,4 +230,7 @@ let theta1 = Math.PI/2;

// clear the indicator
// The indicator size (arrow) depends on the node size as well. If the indicator size is bigger and the rendered node size + padding,
// use the rendered node size + padding as the indicator size.
let indicatorSize = options.indicatorSize > rs + options.spotlightPadding ? rs + options.spotlightPadding : options.indicatorSize
c2d.beginPath();
c2d.fillRect(-options.indicatorSize/2, -options.indicatorSize/2, options.indicatorSize, options.indicatorSize);
c2d.fillRect(-indicatorSize/2, -indicatorSize/2, indicatorSize, indicatorSize);
c2d.closePath();

@@ -414,11 +422,20 @@ c2d.fill();

let rp, rw, rh;
if( !isCy && ele.isNode() && !ele.isParent() && !options.atMouse ){
let rp, rw, rh, rs;
if( !isCy && ele && ele.isNode instanceof Function && ele.isNode() && !ele.isParent() && !options.atMouse ){
// If it's a node, the default spotlight radius for a node is the node width
rp = ele.renderedPosition();
rw = ele.renderedOuterWidth();
rh = ele.renderedOuterHeight();
rs = rw/2;
// If adaptativeNodespotlightRadius is not enabled and min|maxSpotlighrRadius is defined, use those instead
rs = !options.adaptativeNodeSpotlightRadius && options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius): rs;
rs = !options.adaptativeNodeSpotlightRadius && options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius): rs;
} else {
// If it's the background or an edge, the spotlight radius is the min|maxSpotlightRadius
rp = e.renderedPosition || e.cyRenderedPosition;
rw = 1;
rh = 1;
rs = rw/2;
rs = options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius): rs;
rs = options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius): rs;
}

@@ -430,3 +447,2 @@

ctry = rp.y;
r = rw/2 + (options.menuRadius instanceof Function ? options.menuRadius(target) : Number(options.menuRadius));

@@ -443,10 +459,5 @@ containerSize = (r + options.activePadding)*2;

});
createMenuItems();
createMenuItems(r, rs);
queueDrawBg(r, rs);
rs = Math.max(rw, rh)/2;
rs = Math.max(rs, options.minSpotlightRadius);
rs = Math.min(rs, options.maxSpotlightRadius);
queueDrawBg(r);
activeCommandI = undefined;

@@ -483,5 +494,14 @@

if(target && target.isNode instanceof Function && target.isNode() && !target.isParent() && !options.atMouse ){
// If it's a node, the default spotlight radius for a node is the node width
rw = target.renderedOuterWidth();
rs = rw/2;
// If adaptativeNodespotlightRadius is not enabled and min|maxSpotlighrRadius is defined, use those instead
rs = !options.adaptativeNodeSpotlightRadius && options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius): rs;
rs = !options.adaptativeNodeSpotlightRadius && options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius): rs;
} else {
// If it's the background or an edge, the spotlight radius is the min|maxSpotlightRadius
rw = 1;
rs = rw/2;
rs = options.minSpotlightRadius ? Math.max(rs, options.minSpotlightRadius): rs;
rs = options.maxSpotlightRadius ? Math.min(rs, options.maxSpotlightRadius): rs;
}

@@ -491,6 +511,6 @@

if( d < rs + options.spotlightPadding ){
queueDrawBg(r);
queueDrawBg(r, rs);
return;
}
queueDrawBg(r);
queueDrawBg(r, rs);

@@ -527,3 +547,3 @@ let rx = dx*r / d;

queueDrawCommands( rx, ry, r, theta );
queueDrawCommands( rx, ry, r, theta, rs );
})

@@ -530,0 +550,0 @@

7

src/defaults.js

@@ -20,7 +20,8 @@ let defaults = {

activePadding: 20, // additional size in pixels for the active command
indicatorSize: 24, // the size in pixels of the pointer to the active command
indicatorSize: 24, // the size in pixels of the pointer to the active command, will default to the node size if the node size is smaller than the indicator size,
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
adaptativeNodeSpotlightRadius: false, // specify whether the spotlight radius should adapt to the node size
minSpotlightRadius: 24, // the minimum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
maxSpotlightRadius: 38, // the maximum radius in pixels of the spotlight (ignored for the node if adaptativeNodeSpotlightRadius is enabled but still used for the edge & background)
openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here

@@ -27,0 +28,0 @@ itemColor: 'white', // the colour of text in the command's content

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc