cytoscape - npm Package Compare versions

Comparing version 2.2.8 to 2.2.9

bower.json

 {
   "name": "cytoscape",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "main": "dist/cytoscape.js",
@@ -5,0 +5,0 @@ "ignore": [

documentation/docmaker.js

@@ -128,5 +128,24 @@ var fs = require('fs');
         demo.srcUrl = 'http://jsbin.com/' + demo.id + '/latest/edit?js,output';
+        demo.imgUrl = 'img/demos/' + demo.id + '.png';
       }
     }
 
+    if( section.extensions ){
+      var exts = section.extensions;
+
+      for( var j = 0; j < exts.length; j++ ){
+        var ext = exts[j];
+
+        ext.url = 'https://github.com/' + ext.github;
+      }
+
+      section.extensions = exts.sort(function(a, b){
+        if( a.name < b.name ){
+          return -1;
+        } else {
+          return 1;
+        }
+      });
+    }
+
     if( section.fns ){
@@ -192,9 +211,15 @@ var fns = section.fns;
 
-compileConfig( config );
+module.exports = function( next ){
+  compileConfig( config );
 
-var htmlTemplate = fs.readFileSync('./template.html', encoding);
-var template = Handlebars.compile( htmlTemplate );
-var context = config;
-var html = template( context );
+  var htmlTemplate = fs.readFileSync('./template.html', encoding);
+  var template = Handlebars.compile( htmlTemplate );
+  var context = config;
+  var html = template( context );
 
-fs.writeFileSync('index.html', html, encoding);
+  fs.writeFileSync('index.html', html, encoding);
+
+  next && next();
+};
+
+

documentation/md/core/init.md

@@ -52,3 +52,3 @@ ### Script includes
 
-If you've included jQuery on a HTML document, you can alternatively initialise Cytoscape.js on a HTML DOM element using the traditional jQuery style: 
+You can alternatively initialise Cytoscape.js on a HTML DOM element using jQuery: 
 
@@ -90,31 +90,7 @@ ```js
 
-All of your code that uses the core object API, i.e. through the `cy` object in the examples above, must do so after the `ready` callback function has executed.  You can specify the `ready` callback in the initialisation options, outlined in the following section.
+<span class="important-indicator"></span> Part of initialising Cytoscape.js is synchronous and part is asynchronous.  The potentially asynchronous part is the initial layout, which may be used for setting the initial positions of nodes.  If you use an asynchronous layout at initialisation, you may want to use `ready`.  You can guarantee that the initial layout takes no time if you specify all node positions manually and use the `preset` layout &mdash; which does nothing unless you pass specific layout options to it.
 
-Because the `ready` event may occur before you can bind to the core, you can use this shortcut to spread your code among several JavaScript files without having to call a bunch of global functions in `options.ready`.
 
-<span class="important-indicator"></span> You should never call layouts, load elements into the graph, etc on ready.  The graph is still performing the initial load at that point, so you can't modify things like that.  You should use the initialisation options to properly set the elements and layout you want to use.
 
-```js
-// in foo.js
-$(function(){ // on jquery ready
 
-  $('#cy').cytoscape(function(eventObject){ // on Cytoscape.js ready on the `cy` div
-    // this code executes when Cytoscape.js is ready even though we
-    // don't actually initialise Cytoscape.js on the `cy` div until
-    // bar.js is loaded
-
-    var cy = this; // `this` holds the reference to the core object
-
-    console.log('Ready, Freddie!');
-  });
-
-});
-
-// in bar.js (should be after foo.js in your js includes)
-$(function(){ // on jquery ready
-  $('#cy').cytoscape(options);
-});
-```
-
-
 ### Initialisation options
@@ -124,4 +100,6 @@
 
+<span class="important-indicator"></span> Note that everything is optional.  By default, you get an empty graph with the default stylesheet.
+
 ```js
-$('#cy').cytoscape({
+cytoscape({
   selectionType: (isTouchDevice ? 'additive' : 'single'),
@@ -151,3 +129,3 @@ layout: { name: 'grid' /* , ... */ },
 
-**`layout`** : A plain object that specifies layout options.  Which layout is initially run is specified by the `name` field.  Refer to a layout's documentation for the options it supports, as described in [`cy.layout()`](#core/visuals/cy.layout).
+**`layout`** : A plain object that specifies layout options.  Which layout is initially run is specified by the `name` field.  Refer to a [layout's documentation](#layouts) for the options it supports.  If you want to specify your node positions yourself in your elements JSON, you can use the `preset` layout &mdash; by default it does not set any positions, leaving your nodes in their current positions (e.g. specified in `options.elements` at initialisation time).
 
@@ -186,12 +164,19 @@ **`zoom`** : The initial zoom level of the graph.  Make sure to disable viewport manipulation options, such as `fit`, in your layout so that it is not overridden when the layout is applied.  You can set **`options.minZoom`** and **`options.maxZoom`** to set restrictions on the zoom level.
 
-  style: cytoscape.stylesheet()
-    .selector('node')
-      .css({
+  // could be JSON, functional style, or string (probably pulled from a file)
+  style: [
+    { 
+      selector: 'node',
+      css: {
         'background-color': 'red',
         'border-color': '#ffff00'
-      })
-    .selector('edge')
-      .css({
+      }
+    },  
+    
+    { 
+      selector: 'edge',
+      css: {
         'line-color': 'blue'
-      })
+      }
+    }
+  ]
 
@@ -202,3 +187,3 @@ /* ... */
 
-**`ready`** : A callback function that is called when Cytoscape.js is ready to be interacted with.  You can not call functions on the `cy` object before this function executes.
+**`ready`** : A callback function that is called when Cytoscape.js has loaded the graph and the layout has specified initial positions of the nodes.  After this point, rendering can happen, the user can interact with the graph, et cetera.
 
@@ -205,0 +190,0 @@ **`initrender`** : A callback function that is called when Cytoscape.js has rendered its first frame.  This is useful for grabbing screenshots etc after initialision, but in general you should use `ready` instead.

documentation/md/extensions.md

@@ -0,4 +1,6 @@
+The above extensions are a curated list.  To add your extension, please submit a pull request that adds your extension to [the documentation configuration JSON file](https://github.com/cytoscape/cytoscape.js/blob/master/documentation/docmaker.json).  Once pulled in, your extension will be listed with the next publish of the documentation.
+
 ## API
 
-The extensions API is very simple, following this format:
+The API makes it very easy to write an extension, following this format:
 
@@ -5,0 +7,0 @@ ```

gulpfile.js

@@ -18,5 +18,7 @@ var gulp = require('gulp');
 var jshStylish = require('jshint-stylish');
+var exec = require('child_process').exec;
+var docsConf = require('./documentation/docmaker.json');
+var runSequence = require('run-sequence');
 
-var now = new Date();
-var version = process.env['VERSION'] || ['snapshot', +now].join('-');
+var version; // used for marking builds w/ version etc
 
@@ -71,4 +73,22 @@ var paths = {
 
-gulp.task('version', function(){
-  console.log('Using version number `%s` for building', version);
+gulp.task('version', function( next ){
+  var now = new Date();
+  version = process.env['VERSION'];
+
+  if( version ){
+    done();
+  } else {
+    exec('git rev-parse HEAD', function( error, stdout, stderr ){
+      var sha = stdout.substring(0, 10); // shorten so not huge filename
+
+      version = [ 'snapshot', sha, +now ].join('-');
+      done();
+    });
+  }
+
+  function done(){
+    console.log('Using version number `%s` for building', version);
+    next();
+  }
+  
 });
@@ -82,3 +102,3 @@
 
-gulp.task('concat', function(){
+gulp.task('concat', ['version'], function(){
   return gulp.src( paths.sources )
@@ -93,3 +113,3 @@ .pipe( replace('{{VERSION}}', version) )
 
-gulp.task('build', function(){
+gulp.task('build', ['version'], function(){
   return gulp.src( paths.sources )
@@ -153,3 +173,3 @@ .pipe( replace('{{VERSION}}', version) )
 
-gulp.task('zip', ['build'], function(){
+gulp.task('zip', ['version', 'build'], function(){
   return gulp.src(['build/cytoscape.js', 'build/cytoscape.min.js', 'LGPL-LICENSE.txt', 'lib/arbor.js'])
@@ -170,3 +190,3 @@ .pipe( zip('cytoscape.js-' + version + '.zip') )
 
-gulp.task('docsver', function(){
+gulp.task('docsver', ['version'], function(){
   return gulp.src('documentation/docmaker.json')
@@ -179,3 +199,3 @@ .pipe( replace(/\"version\"\:\s*\".*?\"/, '"version": "' + version + '"') )
 
-gulp.task('docsjs', ['build'], function(){
+gulp.task('docsjs', ['version', 'build'], function(){
   return gulp.src([
@@ -194,3 +214,3 @@ 'build/cytoscape.js',
 
-gulp.task('docsdl', ['zip'], function(){
+gulp.task('docsdl', ['version', 'zip'], function(){
   return gulp.src('build/cytoscape.js-' + version + '.zip')
@@ -201,2 +221,18 @@ .pipe( gulp.dest('documentation/download') )
 
+gulp.task('docsbuildlist', ['docsdl'], function(next){
+  var cwd = process.cwd();
+
+  process.chdir('./documentation/download');
+  require('./documentation/download/dlmaker')(function(){
+    process.chdir( cwd );
+
+    next();
+  });
+  
+});
+
+gulp.task('snapshotpush', ['docsbuildlist'], shell.task([
+  './publish-buildlist.sh'
+]));
+
 gulp.task('docs', function(next){
@@ -206,6 +242,8 @@ var cwd = process.cwd();
   process.chdir('./documentation');
-  require('./documentation/docmaker');
-  process.chdir( cwd );
+  require('./documentation/docmaker')( function(){
+    process.chdir( cwd );
 
-  next();
+    next();
+  } );
+  
 });
@@ -278,7 +316,18 @@
 
-gulp.task('docspub', ['docsver', 'docsjs', 'docsdl'], function(){
-  return gulp.start('docsmin');
+gulp.task('docsdemoshots', function(next){
+  var cwd = process.cwd();
+
+  process.chdir('./documentation');
+  require('./documentation/demoshots')( function(){
+    process.chdir( cwd );
+
+    next();
+  } );
 });
 
-gulp.task('pkgver', function(){
+gulp.task('docspub', function(next){
+  runSequence( ['version', 'docsver', 'docsjs', 'docsbuildlist'], 'docsdemoshots', 'docsmin', next );
+});
+
+gulp.task('pkgver', ['version'], function(){
   return gulp.src([
@@ -285,0 +334,0 @@ 'package.json',

package.json

 {
   "name": "cytoscape",
   "description": "A JavaScript graph library for analysis and visualisation",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "license": "LGPL",
@@ -71,4 +71,6 @@ "engines": {
     "gulp-jshint": "~1.5.5",
-    "jshint-stylish": "~0.2.0"
+    "jshint-stylish": "~0.2.0",
+    "bluebird": "^2.0.2",
+    "run-sequence": "^0.3.6"
   }
 }

README.md

@@ -72,2 +72,3 @@ # Cytoscape.js
  * `docs` : build the documentation template
+ * `docsdemoshots` : get snapshots of demos referenced in the docs (requires PhantomJS, e.g. `brew update && brew install phantomjs`)
  * `docsmin` : build the documentation template with all resources minified
@@ -74,0 +75,0 @@ * `docspub` : build the documentation for publishing (ZIPs, JS refs, etc.)

src/core-viewport.js

@@ -324,2 +324,57 @@ ;(function($$){ 'use strict';
     },
+
+    viewport: function( opts ){ 
+      var _p = this._private;
+      var zoomDefd = true;
+      var panDefd = true;
+      var events = []; // to trigger
+      var zoomFailed = false;
+      var panFailed = false;
+
+      if( !opts ){ return this; }
+      if( !$$.is.number(opts.zoom) ){ zoomDefd = false; }
+      if( !$$.is.plainObject(opts.pan) ){ panDefd = false; }
+      if( !zoomDefd && !panDefd ){ return this; }
+
+      if( zoomDefd ){
+        var z = opts.zoom;
+
+        if( z < _p.minZoom || z > _p.maxZoom || !_p.zoomingEnabled ){
+          zoomFailed = true;
+
+        } else {
+          _p.zoom = z;
+
+          events.push('zoom');
+        }
+      }
+
+      if( panDefd && !zoomFailed && _p.panningEnabled ){
+        var p = opts.pan;
+
+        if( $$.is.number(p.x) ){
+          _p.pan.x = p.x;
+          panFailed = false;
+        }
+
+        if( $$.is.number(p.y) ){
+          _p.pan.y = p.y;
+          panFailed = false;
+        }
+
+        if( !panFailed ){
+          events.push('pan');
+        }
+      }
+
+      if( events.length > 0 ){
+        this.trigger( events.join(' ') );
+      }
+
+      this.notify({
+        type: 'viewport'
+      });
+
+      return this; // chaining
+    },
     
@@ -326,0 +381,0 @@ // get the bounding box of the elements (in raw model position)

src/extensions/renderer.canvas.define-and-init-etc.js

@@ -67,2 +67,3 @@ /*
     containerStyle.zIndex = '0';
+    containerStyle.overflow = 'hidden';
 
@@ -69,0 +70,0 @@ this.data.container.appendChild( this.data.canvasContainer );

src/extensions/renderer.canvas.load-and-listeners.js

@@ -994,3 +994,3 @@ ;(function($$){ 'use strict';
         // consider context tap
-        if( distance1 < 200 ){
+        if( distance1 < 200 && !e.touches[2] ){
 
@@ -1240,3 +1240,3 @@ var near1 = r.findNearestElement(now[0], now[1], true);
 
-      if( capture && r.touchData.cxt ){
+      if( capture && r.touchData.cxt ){ 
         var cxtEvt = new $$.Event(e, {
@@ -1286,3 +1286,3 @@ type: 'cxtdrag',
 
-      } else if( capture && e.touches[2] && cy.boxSelectionEnabled() ){
+      } else if( capture && e.touches[2] && cy.boxSelectionEnabled() ){ 
         r.data.bgActivePosistion = undefined;
@@ -1312,2 +1312,12 @@ clearTimeout( this.threeFingerSelectTimeout );
 
+        var draggedEles = r.dragData.touchDragEles;
+        if( draggedEles ){ 
+          r.data.canvasNeedsRedraw[CanvasRenderer.DRAG] = true;
+
+          for( var i = 0; i < draggedEles.length; i++ ){
+            draggedEles[i]._private.grabbed = false;
+            draggedEles[i]._private.rscratch.inDragLayer = false;
+          }
+        }
+
         // console.log('touchmove ptz');
@@ -1393,8 +1403,6 @@
 
-          cy._private.zoom = zoom2;
-          cy._private.pan = pan2;
-          cy
-            .trigger('pan zoom')
-            .notify('viewport')
-          ;
+          cy.viewport({
+            zoom: zoom2,
+            pan: pan2
+          });
 
@@ -1418,8 +1426,4 @@ distance1 = distance2;
         var last = r.touchData.last;
-        var near = null;
+        var near = near || r.findNearestElement(now[0], now[1], true);;
 
-        if( !r.hoverData.draggingEles ){
-          r.findNearestElement(now[0], now[1], true);
-        }
-
         if ( start != null && start._private.group == 'nodes' && r.nodeIsDraggable(start)) {
@@ -1545,2 +1549,4 @@ var draggedEles = r.dragData.touchDragEles;
             r.data.canvasNeedsRedraw[CanvasRenderer.SELECT_BOX] = true;
+
+            r.touchData.start = null;
           }
@@ -1547,0 +1553,0 @@

src/style-apply.js

@@ -64,5 +64,5 @@ ;(function($$){ 'use strict';
             removedCxts.push( context );
+
+            delete _p.styleCxts[i];
           }
-
-          delete _p.styleCxts[i];
         }
@@ -69,0 +69,0 @@ } // for context

src/util.js

@@ -1,2 +0,2 @@
-;(function($$){ 'use strict';
+;(function($$, window){ 'use strict';
   
@@ -734,9 +734,11 @@ // utility functions only for internal use
 
-  var requestAnimationFrame = typeof window === 'undefined' ? function(fn){ if(fn){ fn(); } } : ( window.requestAnimationFrame || window.mozRequestAnimationFrame ||  
+  var raf = !window ? null : ( window.requestAnimationFrame || window.mozRequestAnimationFrame ||  
         window.webkitRequestAnimationFrame || window.msRequestAnimationFrame );
 
+  raf = raf || function(fn){ if(fn){ setTimeout(fn, 1000/60) } };
+
   $$.util.requestAnimationFrame = function(fn){
-    requestAnimationFrame(fn);
+    raf( fn );
   };
 
-})( cytoscape );
+})( cytoscape, typeof window === 'undefined' ? null : window  );

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

Improved metrics

Total package byte prevSize

27042796

increased by12.58%

Number of package files

441

increased by6.52%

Lines of code

394696

increased by4.38%

Number of lines in readme file

117

increased by0.86%

Worsened metrics

Dev dependency count

21

increased by10.53%

Number of low supply chain risk alerts

25

increased by8.7%

Number of medium supply chain risk alerts

15

increased by15.38%

No dependency changes