cytoscape-edgehandles - npm Package Compare versions

Comparing version 2.15.0 to 3.0.0

bower.json

 {
   "name": "cytoscape-edgehandles",
-  "description": "Edge creation extension for Cytoscape.js",
+  "description": "Edge creation UI extension for Cytoscape",
   "main": "cytoscape-edgehandles.js",
+  "dependencies": {
+    "cytoscape": "^3.2.0"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/cytoscape/cytoscape.js-edgehandles.git"
+    "url": "https://github.com/cytoscape/edgehandles.git"
   },
@@ -18,8 +21,5 @@ "ignore": [
     "cytoscape",
-    "cyext"
+    "cytoscape-extension"
   ],
-  "license": "MIT",
-  "dependencies": {
-    "cytoscape": "^2.2.8 || ^3.0.0"
-  }
+  "license": "MIT"
 }

package.json

 {
   "name": "cytoscape-edgehandles",
-  "version": "2.15.0",
-  "description": "Edge creation extension for Cytoscape.js",
+  "version": "3.0.0",
+  "description": "Edge creation UI extension for Cytoscape",
   "main": "cytoscape-edgehandles.js",
+  "author": {
+    "name": "Max Franz",
+    "email": "[e-mail]"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "postpublish": "run-s gh-pages:demo gh-pages:deploy",
+    "gh-pages:demo": "cpy demo.html . --rename=index.html",
+    "gh-pages:deploy": "gh-pages -d .",
+    "lint": "eslint src",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:min": "cross-env NODE_ENV=production MIN=true webpack",
+    "watch": "webpack --progress --watch",
+    "dev": "webpack-dev-server --open",
+    "test": "mocha"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/cytoscape/cytoscape.js-edgehandles.git"
+    "url": "https://github.com/cytoscape/edgehandles.git"
   },
   "keywords": [
     "cytoscape",
-    "cyext"
+    "cytoscape-extension"
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/cytoscape/cytoscape.js-edgehandles/issues"
+    "url": "https://github.com/cytoscape/edgehandles/issues"
   },
-  "homepage": "https://github.com/cytoscape/cytoscape.js-edgehandles",
+  "homepage": "https://github.com/cytoscape/edgehandles",
   "devDependencies": {
-    "gulp": "^3.8.8",
-    "gulp-eslint": "^3.0.1",
-    "gulp-prompt": "^0.1.1",
-    "gulp-replace": "^0.4.0",
-    "gulp-shell": "^0.2.9",
-    "run-sequence": "^1.0.0"
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
+    "camelcase": "^4.1.0",
+    "chai": "4.0.2",
+    "cross-env": "^5.0.0",
+    "eslint": "^3.9.1",
+    "mocha": "3.4.2",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5",
+    "cpy-cli": "^1.0.1",
+    "npm-run-all": "^4.1.2",
+    "gh-pages": "^1.0.0"
   },
-  "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1"
-  },
   "peerDependencies": {
-    "cytoscape": "^2.2.8 || ^3.0.0"
+    "cytoscape": "^3.2.0"
   }
 }

README.md

 cytoscape-edgehandles
 ================================================================================
+
 [![DOI](https://zenodo.org/badge/16078488.svg)](https://zenodo.org/badge/latestdoi/16078488)
@@ -7,5 +8,5 @@
 
-
 ## Description
 
+
 This extension creates handles on nodes that can be dragged to create edges between nodes.
@@ -16,4 +17,3 @@
 
- * Cytoscape.js ^2.2.8 || ^3.0.0
- * Lodash ^4.17.0, if not using dependency management
+ * Cytoscape.js ^3.2.0
 
@@ -28,13 +28,24 @@
 
-`require()` the library as appropriate for your project:
+Import the library as appropriate for your project:
 
-CommonJS:
+ES import:
+
 ```js
-var cytoscape = require('cytoscape');
-var edgehandles = require('cytoscape-edgehandles');
+import cytoscape from 'cytoscape';
+import edgehandles from 'cytoscape-edgehandles';
 
-edgehandles( cytoscape ); // register extension
+cytoscape.use( edgehandles );
 ```
 
+CommonJS require:
+
+```js
+let cytoscape = require('cytoscape');
+let edgehandles = require('cytoscape-edgehandles');
+
+cytoscape.use( edgehandles ); // register extension
+```
+
 AMD:
+
 ```js
@@ -49,2 +60,3 @@ require(['cytoscape', 'cytoscape-edgehandles'], function( cytoscape, edgehandles ){
 
+
 ## Initialisation
@@ -56,3 +68,3 @@
 
-var cy = cytoscape({
+let cy = cytoscape({
   container: document.getElementById('#cy'),
@@ -63,20 +75,9 @@ /* ... */
 // the default values of each option are outlined below:
-var defaults = {
+let defaults = {
   preview: true, // whether to show added edges preview before releasing selection
-  stackOrder: 4, // Controls stack order of edgehandles canvas element by setting it's z-index
-  handleSize: 10, // the size of the edge handle put on nodes
-  handleHitThreshold: 6, // a threshold for hit detection that makes it easier to grab the handle
-  handleIcon: false, // an image to put on the handle
-  handleColor: '#ff0000', // the colour of the handle and the line drawn from it
-  handleLineType: 'ghost', // can be 'ghost' for real edge, 'straight' for a straight line, or 'draw' for a draw-as-you-go line
-  handleLineWidth: 1, // width of handle line in pixels
-  handleOutlineColor: '#000000', // the colour of the handle outline
-  handleOutlineWidth: 0, // the width of the handle outline in pixels
+  hoverDelay: 150, // time spent hovering over a target node before it is considered selected
   handleNodes: 'node', // selector/filter function for whether edges can be made from a given node
   handlePosition: 'middle top', // sets the position of the handle in the format of "X-AXIS Y-AXIS" such as "left top", "middle top"
-  hoverDelay: 150, // time spend over a target node before it is considered a target selection
-  cxt: false, // whether cxt events trigger edgehandles (useful on touch)
-  enabled: true, // whether to start the plugin in the enabled state
-  toggleOffOnLeave: false, // whether an edge is cancelled by leaving a node (true), or whether you need to go over again to cancel (false; allows multiple edges in one pass)
-  edgeType: function( sourceNode, targetNode ) {
+  handleInDrawMode: false, // whether to show the handle in draw mode
+  edgeType: function( sourceNode, targetNode ){
     // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them
@@ -86,3 +87,3 @@ // returning null/undefined means an edge can't be added between the two nodes
   },
-  loopAllowed: function( node ) {
+  loopAllowed: function( node ){
     // for the specified node, return whether edges from itself to itself are allowed
@@ -92,3 +93,3 @@ return false;
   nodeLoopOffset: -50, // offset for edgeType: 'node' loops
-  nodeParams: function( sourceNode, targetNode ) {
+  nodeParams: function( sourceNode, targetNode ){
     // for edges between the specified source and target
@@ -98,3 +99,3 @@ // return element object to be passed to cy.add() for intermediary node
   },
-  edgeParams: function( sourceNode, targetNode, i ) {
+  edgeParams: function( sourceNode, targetNode, i ){
     // for edges between the specified source and target
@@ -105,27 +106,58 @@ // return element object to be passed to cy.add() for edge
   },
-  start: function( sourceNode ) {
+  show: function( sourceNode ){
+    // fired when handle is shown
+  },
+  hide: function( sourceNode ){
+    // fired when the handle is hidden
+  },
+  start: function( sourceNode ){
     // fired when edgehandles interaction starts (drag on handle)
   },
-  complete: function( sourceNode, targetNodes, addedEntities ) {
-    // fired when edgehandles is done and entities are added
+  complete: function( sourceNode, targetNode, addedEles ){
+    // fired when edgehandles is done and elements are added
   },
-  stop: function( sourceNode ) {
+  stop: function( sourceNode ){
     // fired when edgehandles interaction is stopped (either complete with added edges or incomplete)
   },
-  cancel: function( sourceNode, renderedPosition, invalidTarget ){
-    // fired when edgehandles are cancelled ( incomplete - nothing has been added ) - renderedPosition is where the edgehandle was released, invalidTarget is
-        // a collection on which the handle was released, but which for other reasons (loopAllowed | edgeType) is an invalid target
+  cancel: function( sourceNode, cancelledTargets ){
+    // fired when edgehandles are cancelled (incomplete gesture)
   },
-  hoverover: function( targetNode ) {
+  hoverover: function( sourceNode, targetNode ){
     // fired when a target is hovered
   },
-  hoverout: function( targetNode ) {
+  hoverout: function( sourceNode, targetNode ){
     // fired when a target isn't hovered anymore
+  },
+  previewon: function( sourceNode, targetNode, previewEles ){
+    // fired when preview is shown
+  },
+  previewoff: function( sourceNode, targetNode, previewEles ){
+    // fired when preview is hidden
+  },
+  drawon: function(){
+    // fired when draw mode enabled
+  },
+  drawoff: function(){
+    // fired when draw mode disabled
   }
 };
 
-cy.edgehandles( defaults );
+let eh = cy.edgehandles( defaults );
 
 ```
 
+
+## API
+
+The object returned by `cy.edgehandles()` has several functions available on it:
+
+* `start()` : manually start the gesture (as if the handle were already held)
+* `stop()` : manually completes or cancels the gesture
+* `disable()` : disables edgehandles behaviour
+* `enable()` : enables edgehandles behaviour
+* `enableDrawMode()` : turn on draw mode (the entire node body acts like the handle)
+* `disableDrawMode()` : turn off draw mode
+* `destroy()` : remove edgehandles behaviour
+
+
 ## Classes
@@ -135,8 +167,8 @@
 
-* `edgehandles-source` : The source node
-* `edgehandles-target` : A target node
-* `edgehandles-preview` : Preview elements (used with `options.preview: true`)
-* `edgehandles-hover` : Added to nodes as they are hovered over as targets
-* `edgehandles-ghost-edge` : The ghost handle line edge
-* `edgehandles-presumptive-target` : A node that, during an edge drag, may become a target when released
+* `eh-source` : The source node
+* `eh-target` : A target node
+* `eh-preview` : Preview elements (used with `options.preview: true`)
+* `eh-hover` : Added to nodes as they are hovered over as targets
+* `eh-ghost-edge` : The ghost handle line edge
+* `eh-presumptive-target` : A node that, during an edge drag, may become a target when released
 
@@ -146,42 +178,58 @@
 
-During the course of a user's interaction with the extension, several events are generated and triggered on the corresponding elements:
+During the course of a user's interaction with the extension, several events are generated and triggered on the core.  Each event callback has a number of extra parameters, and certain events have associated positions.
 
-On the source node:
+* `eh-show` : when the handle is shown
+  * `(event, sourceNode)`
+  * `event.position` : handle position
+* `eh-hide` : when the handle is hidden
+  * `(event, sourceNode)`
+  * `event.position` : handle position
+* `eh-start` : when the edge creation gesture starts
+  * `(event, sourceNode)`
+  * `event.position` : handle position
+* `eh-complete` : when the edge creation gesture is successfully completed
+  * `(event, sourceNode, targetNode, addedEles)`
+  * `event.position` : cursor/finger position
+* `eh-stop` : when the edge creation gesture is stopped (either successfully completed or cancelled)
+  * `(event, sourceNode)`
+  * `event.position` : cursor/finger position
+* `eh-cancel` : when the edge creation gesture is cancelled
+  * `(event, sourceNode, cancelledTargets)`
+  * `event.position` : cursor/finger position
+* `eh-hoverover` : when hovering over a target
+  * `(event, sourceNode, targetNode)`
+  * `event.position` : cursor/finger position
+* `eh-hoverout` : when leaving a target node
+  * `(event, sourceNode, targetNode)`
+  * `event.position` : cursor/finger position
+* `eh-previewon` : when a preview is shown
+  * `(event, sourceNode, targetNode, previewEles)`
+  * `event.position` : cursor/finger position
+* `eh-previewoff` : when the preview is removed
+  * `(event, sourceNode, targetNode, previewEles)`
+  * `event.position` : cursor/finger position
+* `eh-drawon` : when draw mode is enabled
+  * `(event)`
+* `eh-drawoff` : when draw mode is disabled
+  * `(event)`
 
- * `cyedgehandles.showhandle` : when the handle is shown
- * `cyedgehandles.start` : when starting to drag on the handle
- * `cyedgehandles.stop` : when the handle is released
- * `cyedgehandles.complete` : when the handle has been released and edges are created
- * `cyedgehandles.cancel` : when the handle has been released but not on a valid target. The handler receives two arguments - the renderedPosition at which the handle was released and a collection of presumptive targets. Presumptive targets are nodes that would have become targets but were, for some reason, deemed invalid. Possible reasons include `edgeType` or `loopAllowed` returning null.
-
-On the target node:
-
- * `cyedgehandles.hoverover` : when a target is hovered
- * `cyedgehandles.hoverout` : when a target isn't hovered anymore
- * `cyedgehandles.addpreview` : when a preview is shown (i.e. target selected)
- * `cyedgehandles.removepreview` : when a preview is removed (i.e. target unselected)
-
 Example binding:
 
 ```js
-cy.on('cyedgehandles.start', 'node', function(e){
-	var srcNode = this;
+cy.on('eh-complete', (event, sourceNode, targetNode, addedEles) => {
+	let { position } = event;
 
-	// ...
+  // ...
 });
 ```
 
-## Extension functions
+## Build targets
 
-All function can be called via `cy.edgehandles('function-name')`:
+* `npm run test` : Run Mocha tests in `./test`
+* `npm run build` : Build `./src/**` into `cytoscape-edgehandles.js`
+* `npm run watch` : Automatically build on changes with live reloading (N.b. you must already have an HTTP server running)
+* `npm run dev` : Automatically build on changes with live reloading with webpack dev server
+* `npm run lint` : Run eslint on the source
 
- * `cy.edgehandles('enable')` : enable the extension
- * `cy.edgehandles('disable')` : disable the extension
- * `cy.edgehandles('option', 'preview', false)` : set individual option (e.g. `'preview'`)
- * `cy.edgehandles('option', { /* options */ })` : set all options
- * `cy.edgehandles('option', 'preview')` : get option value (e.g. `'preview'`)
- * `cy.edgehandles('destroy')` : destroy the extension instance
- * `cy.edgehandles('start', 'some-node-id')` : start the handle drag state on node with specified id (e.g. `'some-node-id'`)
- * `cy.edgehandles('drawon')` : enable draw mode
- * `cy.edgehandles('drawoff')` : disable draw mode
+N.b. all builds use babel, so modern ES features can be used in the `src`.
 
@@ -193,5 +241,7 @@
 
-1. Set the version number environment variable: `export VERSION=1.2.3`
-1. Publish: `gulp publish`
-1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-edgehandles https://github.com/cytoscape/cytoscape.js-edgehandles.git`
-1. Make a release on GitHub to automatically register a new Zenodo DOI
+1. Build the extension : `npm run build`
+1. Commit the build : `git commit -am "Build for release"`
+1. Bump the version number and tag: `npm version major|minor|patch`
+1. Push to origin: `git push && git push --tags`
+1. Publish to npm: `npm publish .`
+1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-edgehandles https://github.com/cytoscape/edgehandles.git`

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

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

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110462

increased by21.11%

Dependency count

1

decreased by-66.67%

Number of package files

23

increased by130%

Lines of code

1732

increased by53.96%

Number of lines in readme file

235

increased by27.03%

Number of low supply chain risk alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

13

increased by116.67%

Dependency changes

• - Removedlodash.debounce@^4.0.8

• - Removedlodash.throttle@^4.1.1

• - Removedlodash.debounce@4.0.8(transitive)

• - Removedlodash.throttle@4.1.1(transitive)