Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
cytoscape-edge-editing
Advanced tools
Readme
A Cytoscape.js extension enabling interactive editing of edge bend and control points for segment and unbundled bezier edges, respectively. It also allows for reconnection of edges to other source/target nodes. The extension is distributed under The MIT License.
Please cite the following paper when using this extension:
U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "Efficient methods and readily customizable libraries for managing complexity of large networks", PLoS ONE, 13(5): e0197238, 2018.
Click here for demo
Download the library:
npm install cytoscape-edge-editing
,bower install cytoscape-edge-editing
, orrequire()
the library as appropriate for your project:
CommonJS:
var cytoscape = require('cytoscape');
var jquery = require('jquery');
var konva = require('konva');
var edgeEditing = require('cytoscape-edge-editing');
edgeEditing( cytoscape, jquery, konva ); // register extension
AMD:
require(['cytoscape', 'cytoscape-edge-editing', 'jquery', 'konva'], function( cytoscape, edge-editing, jquery, konva ){
edge-editing( cytoscape, jquery, konva ); // register extension
});
Plain HTML/JS has the extension registered for you automatically, because no require()
is needed.
var instance = cy.edgeEditing( options );
An instance has a number of functions available:
/*
* Get anchors of the given edge in an array A,
* A[2 * i] is the x coordinate and A[2 * i + 1] is the y coordinate
* of the ith anchor. (Returns undefined if the curve style is not segments nor unbundled bezier)
*/
instance.getAnchorsAsArray(ele);
// Initilize anchors for the given edges using 'options.bendPositionsFunction' and 'options.controlPositionsFunction'
instance.initAnchorPoints(eles);
// Removes anchor with some index from an edge
instance.deleteSelectedAnchor(ele, index);
// Get type of an edge as `bend`, `control` or `none`
instance.getEdgeType(ele);
You can also get an existing instance:
cy.edgeEditing('get'); // Returns undefined if the extension is not initialized yet
Or you can check if the extension is initilized before
cy.edgeEditing('initialized');
var options = {
// A function parameter to get bend point positions, should return positions of bend points
bendPositionsFunction: function(ele) {
return ele.data('bendPointPositions');
},
// A function parameter to get control point positions, should return positions of control points
controlPositionsFunction: function(ele) {
return ele.data('controlPointPositions');
},
// A function parameter to set bend point positions
bendPointPositionsSetterFunction: function(ele, bendPointPositions) {
ele.data('bendPointPositions', bendPointPositions);
},
// A function parameter to set bend point positions
controlPointPositionsSetterFunction: function(ele, controlPointPositions) {
ele.data('controlPointPositions', controlPointPositions);
},
// whether to initilize bend and control points on creation of this extension automatically
initAnchorsAutomatically: true,
// the classes of those edges that should be ignored
ignoredClasses: [],
// whether the bend editing operations are undoable (requires cytoscape-undo-redo.js)
undoable: false,
// the size of bend and control point shape is obtained by multipling width of edge with this parameter
anchorShapeSizeFactor: 3,
// z-index value of the canvas in which bend points are drawn
zIndex: 999,
/*An option that controls the distance (in pixels) within which a bend point is considered near the line segment between
its two neighbors and will be automatically removed
min value = 0 , max value = 20 , values less than 0 are set to 0 and values greater than 20 are set to 20
*/
bendRemovalSensitivity : 8,
// title of add bend point menu item (User may need to adjust width of menu items according to length of this option)
addBendMenuItemTitle: "Add Bend Point",
// title of remove bend point menu item (User may need to adjust width of menu items according to length of this option)
removeBendMenuItemTitle: "Remove Bend Point",
// title of remove all bend points menu item
removeAllBendMenuItemTitle: "Remove All Bend Points",
// title of add control point menu item (User may need to adjust width of menu items according to length of this option)
addControlMenuItemTitle: "Add Control Point",
// title of remove control point menu item (User may need to adjust width of menu items according to length of this option)
removeControlMenuItemTitle: "Remove Control Point",
// title of remove all control points menu item
removeAllControlMenuItemTitle: "Remove All Control Points",
// whether 'Remove all bend points' and 'Remove all control points' options should be presented to the user
enableMultipleAnchorRemovalOption: false,
// whether the bend and control points can be moved by arrows
moveSelectedAnchorsOnKeyEvents: function () {
return true;
},
// this function handles reconnection of the edge, if undefined simply connect edge to its new source/target
// handleReconnectEdge (newSource.id(), newTarget.id(), edge.data())
handleReconnectEdge: undefined,
// this function checks validation of the edge and its new source/target
validateEdge: function (edge, newSource, newTarget) {
return 'valid';
},
// this function is called if reconnected edge is not valid according to validateEdge function
actOnUnsuccessfulReconnection: undefined,
// specifically for edge-editing menu items, whether trailing dividers should be used
useTrailingDividersAfterContextMenuOptions: false,
// Enable / disable drag creation of anchor points when there is at least one anchor already on the edge
enableCreateAnchorOnDrag: true
};
npm run build
: Build ./src/**
into cytoscape-edge-editing.js
in production environment and minimize the file.npm run build:dev
: Build ./src/**
into cytoscape-edge-editing.js
in development environment without minimizing the file.This project is set up to automatically be published to npm and bower. To publish:
npm run build
git commit -am "Build for release"
npm version major|minor|patch
git push && git push --tags
npm publish .
bower register cytoscape-edge-editing https://github.com/iVis-at-Bilkent/cytoscape.js-edge-editing.git
FAQs
A Cytoscape.js extension that enables editing edges by adding and modifying anchor points
The npm package cytoscape-edge-editing receives a total of 144 weekly downloads. As such, cytoscape-edge-editing popularity was classified as not popular.
We found that cytoscape-edge-editing demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.