cytoscape - npm Package Compare versions

Comparing version 2.2.4 to 2.2.5

bower.json

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

documentation/docmaker.js

@@ -138,3 +138,3 @@ var fs = require('fs');
         var formatsHaveDiffNames = false;
-        if( fn.formats && !fn.formatsSameFn ){
+        if( fn.formats ){
           var formats = fn.formats;
@@ -146,3 +146,10 @@
             format.name = format.name || fn.name; // copy name to format if not specified
+            format.descr = marked( format.descr || '' );
 
+            if( format.args ){
+              for( var m = 0; m < format.args.length; m++ ){
+                format.args[m].descr = marked( format.args[m].descr || '' );
+              }
+            }
+
             if( format.name !== fn.name ){
@@ -149,0 +156,0 @@ formatsHaveDiffNames = true;

documentation/md/collection/codirectedEdges.md

 ## Details
 
-Two edges are said to be codirected if they connect the same two nodes in the same direction.  That is, `edge1.source() === edge2.source() && edge1.target() === edge2.target()`.
+Two edges are said to be codirected if they connect the same two nodes in the same direction.  That is, `edge1.source().id() === edge2.source().id() && edge1.target().id() === edge2.target().id()`.

documentation/md/collection/each.md

@@ -0,1 +1,14 @@
+## Details
+
+<span class="important-indicator"></span> Note that although this function is convenient in some cases, it is less efficient than making your own loop:
+
+```js
+var eles = cy.elements();
+for( var i = 0; i < eles.length; i++ ){
+	var ele = ele[i];
+
+	console.log( ele.id() + ' is ' + ( ele.selected() ? 'selected' : 'not selected' ) );
+}
+```
+
 ## Examples
@@ -2,0 +15,0 @@

documentation/md/collection/group.md

 ## Details
 
-The group strings are `"nodes"` for nodes and `"edges"` for edges.  In general, you should be using `ele.isEdge()` and `ele.isNode()` instead of `ele.group()`.
+The group strings are `'nodes'` for nodes and `'edges'` for edges.  In general, you should be using `ele.isEdge()` and `ele.isNode()` instead of `ele.group()`.

documentation/md/collection/parallelEdges.md

@@ -5,3 +5,3 @@ ## Details
 
- * `edge1.source() === edge2.source() && edge1.target() === edge2.target()` or 
- * `edge1.source() === edge2.target() && edge1.target() === edge2.source()`.
+ * `edge1.source().id() === edge2.source().id() && edge1.target().id() === edge2.target().id()` or 
+ * `edge1.source().id() === edge2.target().id() && edge1.target().id() === edge2.source().id()`.

documentation/md/collection/remove.md

@@ -5,3 +5,3 @@ ## Details
 
-**NB: A removed element just exists to be added back to its originating core instance or some other core instance.  A removed element is not functional, because it is no longer a part of the graph: Nothing really makes sense for it anymore outside of the context of a graph.  It merely exists in this limbo state so you can later add it back to some core instance.**
+<span class="important-indicator"></span> A removed element just exists to be added back to its originating core instance or some other core instance.  A removed element is not functional, because it is no longer a part of the graph: Nothing really makes sense for it anymore outside of the context of a graph.  It merely exists in this limbo state so you can later add it back to some core instance.
 
@@ -8,0 +8,0 @@ ## Examples

documentation/md/collection/size.md

 ## Details
 
-Note that as a non-functional alternative, you may read `eles.length` instead of `eles.size()`.  The two are interchangeable.
+Note that as an alternative, you may read `eles.length` instead of `eles.size()`.  The two are interchangeable.

documentation/md/core/add.md

@@ -7,3 +7,3 @@ ## Details
 
-**NB: If a collection of existing elements is specified, then copies of those elements are added, which allows for elements to be effectively transferred between instances of Cytoscape.js.  If you want to add removed elements back to the graph, use `eles.restore()` instead.**
+<span class="important-indicator"></span> If a collection of existing elements is specified, then copies of those elements are added, which allows for elements to be effectively transferred between instances of Cytoscape.js.  If you want to add removed elements back to the graph, use `eles.restore()` instead.
 
@@ -10,0 +10,0 @@ ## Examples

documentation/md/core/collection.md

@@ -10,5 +10,5 @@ ## Details
 var collection = cy.collection();
-cy.nodes().live("click", function(){
+cy.nodes().on("click", function(){
   collection = collection.add(this);
 });
 ```

documentation/md/core/core.md

@@ -1,1 +0,1 @@
-The core object is your interface to the Cytoscape.js visualisation.  It is your entry point to Cytoscape.js:  All of Cytoscape.js's features are accessed through this object.
+The core object is your interface to the Cytoscape.js visualisation.  It is your entry point to Cytoscape.js:  All of the library's features are accessed through this object.

documentation/md/core/forceRender.md

 ## Details
 
-This function is useful where manually causing the graph to visually update is required.  For example, if your code resizes the graph's dimensions (i.e. by changing the size of the HTML DOM element that holds the graph), you will want to call `cy.forceRender()` to have the graph resize and redraw itself.
+This function forces the renderer to draw a new frame.  It is useful for very specific edgecases, such as in certain UI plugins, but it should not be needed for most developers.

documentation/md/core/init.md

@@ -9,4 +9,12 @@ ### Script includes
 
-**Cytoscape.js uses the dimensions of your HTML DOM element container for layouts and rendering at initialisation.  Thus, it is very important to place your CSS stylesheets in the `<head>` before any Cytoscape.js scripts.  Otherwise, dimensions may be sporadically reported incorrectly, resulting in undesired behaviour.**
+<span class="important-indicator"></span> Note that Cytoscape.js uses the dimensions of your HTML DOM element container for layouts and rendering at initialisation.  Thus, it is very important to place your CSS stylesheets in the `<head>` before any Cytoscape.js scripts.  Otherwise, dimensions may be sporadically reported incorrectly, resulting in undesired behaviour.
 
+<span class="important-indicator"></span> Also note that you should call [`cy.resize()`](#core/viewport-manipulation/cy.resize) when your code resizes the viewport.
+
+To install Cytoscape.js via npm:
+
+```
+npm install cytoscape
+```
+
 To use Cytoscape.js in a CommonJS environment like Node.js:
@@ -86,3 +94,3 @@
 
-**NB: 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.**
+<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.
 
@@ -154,4 +162,2 @@ ```js
 
-**`userPanningEnabled`** : Whether panning the graph is enabled by user events.
-
 **`userPanningEnabled`** : Whether user events (e.g. dragging the graph background) are allowed to pan the graph.  Programmatic changes to pan are unaffected by this option.
@@ -171,3 +177,3 @@
 
-**`style`** : The stylesheet used to style the document.
+**`style`** : The [stylesheet](#style) used to style the document.
 
@@ -199,3 +205,3 @@ For example:
 
-**`elements`** : An array of elements specified as plain objects.
+**`elements`** : An array of [elements specified as plain objects](#notation/elements-json).
 
@@ -202,0 +208,0 @@ For example:

documentation/md/core/load.md

@@ -43,3 +43,3 @@ ## Details
   console.log("cy loaded elements");
-}).one("layoutstop", function(e){
+}).one("done", function(e){
   console.log("cy laid out elements");
@@ -46,0 +46,0 @@ });

documentation/md/core/on.md

@@ -10,3 +10,2 @@ ## Examples
   console.log( 'tapped ' + node.id() );
-  debugger;
 });
@@ -13,0 +12,0 @@ ```

documentation/md/core/trigger.md

 ## Examples
 
 ```js
-cy.bind('tap', function(evt, foo, bar){
-  console.log('tap');
+cy.bind('tap', function(evt, f, b){
+  console.log('tap', f, b);
 });
@@ -7,0 +7,0 @@

documentation/md/events.md

@@ -80,3 +80,3 @@ ## Event object
  * `layoutstart` : when a layout starts running
- * `layoutready` : when a layout has set positions for all the nodes
+ * `layoutready` : when a layout has set initial positions for all the nodes (but perhaps not final positions)
  * `layoutstop` : when a layout has finished running completely or otherwise stopped running
@@ -83,0 +83,0 @@ * `load` : when a new graph is loaded via initialisation or `cy.load()`

documentation/md/intro.md

@@ -17,5 +17,5 @@ ## About
 
-Though Cytoscape.js shares its name with [Cytoscape](http://www.cytoscape.org/), Cytoscape.js is not Cytoscape.  Cytoscape.js is a JavaScript library for _programmers_.  It is not an app for end-users, nor can you just copy-paste some code to "automagically" make you a webapp.
+Though Cytoscape.js shares its name with [Cytoscape](http://www.cytoscape.org/), Cytoscape.js is not exactly the same as Cytoscape desktop.  Cytoscape.js is a JavaScript library for _programmers_.  It is not an app for end-users, and developers need to write code around Cytoscape.js to build graphcentric webapps.
 
-Cytoscape.js is a JavaScript library:  It gives you a reusable graph widget that you can integrate with the rest of your webapp with your own JavaScript code.  The keen members of the audience will point out that this means that Cytoscape plugins — written in Java — will obviously not work in Cytoscape.js — written in Java_Script_.
+Cytoscape.js is a JavaScript library:  It gives you a reusable graph widget that you can integrate with the rest of your webapp with your own JavaScript code.  The keen members of the audience will point out that this means that Cytoscape plugins — written in Java — will obviously not work in Cytoscape.js — written in Java_Script_.  However, Cytoscape.js supports its own ecosystem of UI plugins and API extensions.
 
@@ -22,0 +22,0 @@ We are trying to make the two projects intercompatible as possible, and we do share philosophies with Cytoscape:  Graph style and data should be separate, the library should provide core functionality with extensions adding functionality on top of the library, and so on.

documentation/md/notation.md

@@ -12,13 +12,11 @@ ## Architecture & API
 
-```
-Notation       Works on
---------       --------
-cy ........... the core
-eles ......... a collection of one or more elements (nodes and edges)
-ele .......... a collection of a single element (node or edge)
-nodes ........ a collection of one or more nodes
-node ......... a collection of a single node
-edges ........ a collection of one or more edges
-edge ......... a collection of a single edge
- ```
+| Shorthand     | Works on                                                |
+| ------------- | ------------------------------------------------------- |
+| cy            | the core                                                |
+| eles          | a collection of one or more elements (nodes and edges)  |
+| ele           | a collection of a single element (node or edge)         |
+| nodes         | a collection of one or more nodes                       |
+| node          | a collection of a single node                           |
+| edges         | a collection of one or more edges                       |
+| edge          | a collection of a single edge                           |
 
@@ -25,0 +23,0 @@ By default, a function returns a reference back to the calling object to allow for jQuery-like chaining (e.g. `obj.fn1().fn2().fn3()`).  Unless otherwise indicated in this documentation, a function is chainable in this manner unless a different return value is specified.  This applies both to the core and to collections.

documentation/md/selectors.md

@@ -43,4 +43,7 @@ ## Notes & caveats
 **`[name]`**  
-Matches elements if they have the specified data attribute defined aka not `undefined` (e.g. `[foo]` for an attribute named "foo").  Here, `null` is considered a defined value.
+Matches elements if they have the specified data attribute defined, i.e. not `undefined` (e.g. `[foo]` for an attribute named "foo").  Here, `null` is considered a defined value.
 
+**`[^name]`**  
+Matches elements if the specified data attribute is not defined, i.e. `undefined` (e.g `[^foo]`).  Here, `null` is considered a defined value.
+
 **`[?name]`**  
@@ -52,5 +55,2 @@ Matches elements if the specified data attribute is a [truthy](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/) value (e.g. `[?foo]`).
 
-**`[^name]`**  
-Matches elements if the specified data attribute is not defined aka `undefined` (e.g `[^foo]`).  Here, `null` is considered a defined value.
-
 **`[name = value]`**  
@@ -127,4 +127,4 @@ Matches elements if their data attribute matches a specified value (e.g. `[foo = 'bar']` or `[num = 2]`).
 * **`:visible`** : Matches elements that are visible (i.e. `display: element` and `visibility: visible`).
-* **`:hidden`** : Matches elements that are hidden.
-* **`:transparent`** : Matches elements that are transparent (i.e. `opacity: 0`).
+* **`:hidden`** : Matches elements that are hidden (i.e. `display: none` or `visibility: hidden`).
+* **`:transparent`** : Matches elements that are transparent (i.e. `opacity: 0` for self or parents).
 
@@ -131,0 +131,0 @@

documentation/md/style.md

@@ -9,3 +9,3 @@ Style in Cytoscape.js follows CSS conventions as closely as possible.  In most cases, a property has the same name and behaviour as its corresponding CSS namesake.  However, the properties in CSS are not sufficient to specify the style of some parts of the graph.  In that case, additional properties are introduced that are unique to Cytoscape.js.
 
-The style specified at [initialisation](#core/initialisation) can be in a functional format, in a plain JSON format, or in a string format — the plain JSON format and string format being more useful if you want to pull down the style from the server.  If you pull the style from the server, you must initialise Cytoscape.js after the style has been loaded.
+The style specified at [initialisation](#core/initialisation) can be in a functional format, in a plain JSON format, or in a string format — the plain JSON format and string formats being more useful if you want to pull down the style from the server.  If you pull the style from the server, you must initialise Cytoscape.js after the style has been loaded.
 
@@ -33,3 +33,3 @@
 
-  style: aStyleString // probably previously loaded via ajax
+  style: 'node { background-color: green; }' // probably previously loaded via ajax rather than hardcoded
 
@@ -126,3 +126,3 @@ // , ...
  * **`transition-duration`** : The length of the transition in seconds (e.g. `0.5s`).
- * **`transition-delay`** : The length of the delay in seconds before the transition occurs (e.g. `0.25`).
+ * **`transition-delay`** : The length of the delay in seconds before the transition occurs (e.g. `0.25s`).
 
@@ -148,3 +148,3 @@
  * **`height`** : The height of the node's body.
- * **`shape`** : The shape of the node's body; may be `rectangle`, `roundrectangle`, `ellipse`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `star`.  Note that each shape fits with the specified `width` and `height`, and so you may have to adjust `width` and `height` if you desire an equilateral shape (i.e. `width !== height` for several equilateral shapes).
+ * **`shape`** : The shape of the node's body; may be `rectangle`, `roundrectangle`, `ellipse`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `star`.  Note that each shape fits within the specified `width` and `height`, and so you may have to adjust `width` and `height` if you desire an equilateral shape (i.e. `width !== height` for several equilateral shapes).
 
@@ -158,3 +158,3 @@ Background image:
  * **`background-position-y`** : The y position of the background image, measured in percent (e.g. `50%`) or pixels (e.g. `10px`).
- * **`background-clip`** : How background image clipping is handles; may be `node` for clipped to node shape or `none` for no clipping.
+ * **`background-clip`** : How background image clipping is handled; may be `node` for clipped to node shape or `none` for no clipping.
 
@@ -187,3 +187,3 @@
  * **`curve-style`** : The curving method used to separate two or more edges between two nodes; may be `bezier` (default) or `haystack` (for which loops are unsupported).  Note that `haystack` edges work best with `ellipse`, `rectangle`, or similar nodes.  Smaller node shapes, like `triangle`, will not be as aesthetically pleasing.  Also note that edge arrows are unsupported for `haystack` edges.
- * **`control-point-step-size`** : From the line perpendicular from source to target, this value specifies the inter-control-point distance.
+ * **`control-point-step-size`** : From the line perpendicular from source to target, this value specifies the distance between successive bezier edges.
  * **`control-point-distance`** : Overrides `control-point-step-size` with a manual value.  Because it overrides the step size, bezier edges with the same value will overlap.  Thus, it's best to use this as a one-off value for particular edges if need be.
@@ -190,0 +190,0 @@ * **`control-point-weight`** : Weights control points along the line from source to target.  This value ranges on [0, 1], with 0 towards the source node and 1 towards the target node.

gulpfile.js

@@ -15,2 +15,3 @@ var gulp = require('gulp');
 var cssmin = require('gulp-cssmin');
+var shell = require('gulp-shell')
 
@@ -295,2 +296,14 @@ var now = new Date();
 
+gulp.task('tag', shell.task([
+  './publish-tag.sh'
+]));
+
+gulp.task('docspush', shell.task([
+  './publish-docs.sh'
+]));
+
+gulp.task('npm', shell.task([
+  './publish-npm.sh'
+]));
+
 gulp.task('watch', function(next){
@@ -297,0 +310,0 @@ var watcher = gulp.watch(paths.sources, ['testrefs','debugrefs']);

package.json

 {
   "name": "cytoscape",
   "description": "A JavaScript graph library for analysis and visualisation",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "license": "LGPL",
@@ -67,5 +67,6 @@ "engines": {
     "gulp-cssmin": "~0.1.4",
-    "handlebars": "~2.0.0-alpha.2",
-    "highlight.js": "~8.0.0"
+    "handlebars": "~1.3.0",
+    "highlight.js": "~8.0.0",
+    "gulp-shell": "~0.2.4"
   }
 }

README.md

@@ -76,5 +76,5 @@ # cytoscape.js
   1. Make sure all your changes are pushed.
-  1. Create a tag for this version in `git` (e.g. `./publish-tag.sh`)
-  1. Copy the docs in `documentation` to the `gh-pages` branch and push (e.g. `./publish-docs.sh`)
-  1. Publish to npm (e.g. `./publish-npm.sh`)
+  1. Create a tag for this version in `git` (e.g. `gulp tag`)
+  1. Copy the docs in `documentation` to the `gh-pages` branch and push (e.g. `gulp docspush`)
+  1. Publish to npm (e.g. `gulp npm`)
 
@@ -81,0 +81,0 @@

src/collection-data-functions.js

@@ -23,3 +23,3 @@ ;(function($$){ 'use strict';
       },
-      updateMappers: true
+      updateStyle: true
     }),
@@ -38,3 +38,3 @@
       },
-      updateMappers: true
+      updateStyle: true
     }),
@@ -52,3 +52,3 @@
       },
-      updateMappers: true
+      updateStyle: true
     }),
@@ -55,0 +55,0 @@

src/core-data-functions.js

@@ -32,3 +32,3 @@ ;(function($$){ 'use strict';
       },
-      updateMappers: true
+      updateStyle: true
     }),
@@ -35,0 +35,0 @@

src/define.js

@@ -27,3 +27,3 @@ ;(function($$){ 'use strict';
         immutableKeys: {}, // key => true if immutable
-        updateMappers: false,
+        updateStyle: false,
         onSet: function( self ){},
@@ -64,3 +64,3 @@ canSet: function( self ){ return true }
               // update mappers if asked
-              if( p.updateMappers ){ self.updateMappers(); }
+              if( p.updateStyle ){ self.updateStyle(); }
 
@@ -95,3 +95,3 @@ // call onSet callback
           // update mappers if asked
-          if( p.updateMappers ){ self.updateMappers(); }
+          if( p.updateStyle ){ self.updateStyle(); }
 
@@ -129,3 +129,3 @@ // call onSet callback
         immutableKeys: {}, // key => true if immutable
-        updateMappers: false
+        updateStyle: false
       };
@@ -165,3 +165,3 @@ var p = params = $$.util.extend({}, defaults, params);
         var coln = new $$.Collection(cy, eles);
-        if( p.updateMappers ){ coln.updateMappers(); }
+        if( p.updateStyle ){ coln.updateStyle(); }
 
@@ -168,0 +168,0 @@ coln[ p.triggerFnName ]( p.event );

src/extensions/layout.concentric.js

@@ -64,3 +64,3 @@ ;(function($$){ 'use strict';
     // in case we used the `concentric` in style
-    nodes.updateMappers();
+    nodes.updateStyle();
 
@@ -67,0 +67,0 @@ // calculate max size now based on potentially updated mappers

src/extensions/layout.cose.js

@@ -178,3 +178,5 @@ /*
       edgeSize     : cy.edges().size(),
-      temperature  : options.initialTemp
+      temperature  : options.initialTemp,
+      clientWidth  : cy.container().clientWidth,
+      clientHeight : cy.container().clientHeight
     }; 
@@ -471,4 +473,4 @@
     var container = cy.container();
-    var width     = container.clientWidth;
-    var height    = container.clientHeight;
+    var width     = layoutInfo.clientWidth;
+    var height    = layoutInfo.clientHeight;
 
@@ -494,4 +496,4 @@ for (var i = 0; i < layoutInfo.nodeSize; i++) {
     var container = cy.container();
-    var width     = container.clientWidth;
-    var height    = container.clientHeight;
+    var width     = layoutInfo.clientWidth;
+    var height    = layoutInfo.clientHeight;
     
@@ -826,4 +828,4 @@ var s = 'Refreshing positions';
       var container = cy.container();    
-      var centerX   = container.clientHeight / 2;
-      var centerY   = container.clientWidth  / 2;    
+      var centerX   = layoutInfo.clientHeight / 2;
+      var centerY   = layoutInfo.clientWidth  / 2;    
       } else {
@@ -830,0 +832,0 @@ // Get Parent node for this graph, and use its position as center

src/extensions/renderer.canvas.coord-ele-math.js

@@ -6,16 +6,13 @@ ;(function($$){ 'use strict';
   // Project mouse
-  CanvasRenderer.prototype.projectIntoViewport = function(pageX, pageY) {
+  CanvasRenderer.prototype.projectIntoViewport = function(clientX, clientY) {
     
     var n = this.data.container;
       
-    var offsets = this.findContainerPageCoords();
+    var offsets = this.findContainerClientCoords();
     var offsetLeft = offsets[0];
     var offsetTop = offsets[1];
     
-//    console.log('calce');
+    var x = clientX - offsetLeft; 
+    var y = clientY - offsetTop;
     
-    // By here, offsetLeft and offsetTop represent the "pageX/pageY" of the top-left corner of the div. So, do subtraction to find relative position.
-    var x = pageX - offsetLeft; 
-    var y = pageY - offsetTop;
-    
     x -= this.data.cy.pan().x; y -= this.data.cy.pan().y; x /= this.data.cy.zoom(); y /= this.data.cy.zoom();
@@ -25,43 +22,8 @@ return [x, y];
 
-  CanvasRenderer.prototype.findContainerPageCoords = function() {
-    var offsetLeft = 0;
-    var offsetTop = 0;
+  CanvasRenderer.prototype.findContainerClientCoords = function() {
     var container = this.data.container;
-    var n = container;
-        
-    while (n != null) {
-      var style = window.getComputedStyle(n); 
-      if (typeof(n.offsetLeft) === 'number') {
-        var position = style.getPropertyValue('position').toLowerCase();
-        var borderLeft = parseFloat( style.getPropertyValue('border-left-width') );
-        var borderTop = parseFloat( style.getPropertyValue('border-top-width') );
 
-        offsetLeft += n.offsetLeft;
-        offsetTop += n.offsetTop;
+    var bb = this.containerBB = this.containerBB || container.getBoundingClientRect();
 
-        if( position !== 'static' || n === container ){
-          offsetLeft += borderLeft;
-          offsetTop += borderTop;
-        }
-
-        if( position === 'fixed' ){
-          offsetLeft += window.scrollX;
-          offsetTop += window.scrollY;
-          
-          break; // don't want to check any more parents after position:fixed
-        }
-        
-        if (n == document.body || n == document.header) {
-          // offsetLeft -= n.scrollLeft;
-          // offsetTop -= n.scrollTop;
-
-          break;
-        }
-      }
-
-      if( n ){ n = n.offsetParent };
-    }
-    
-    // By here, offsetLeft and offsetTop represent the "pageX/pageY" of the top-left corner of the div.
-    return [offsetLeft, offsetTop];
+    return [bb.left, bb.top, bb.right - bb.left, bb.bottom - bb.top];
   }
@@ -68,0 +30,0 @@

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

@@ -142,2 +142,4 @@ ;(function($$){ 'use strict';
     r.registerBinding(window, 'resize', $$.util.debounce( function(e) {
+      r.containerBB = null; // invalidate bb cache
+
       r.matchCanvasSize(r.data.container);
@@ -148,2 +150,22 @@ r.data.canvasNeedsRedraw[CanvasRenderer.NODE] = true;
 
+    var invalCtnrBBOnScroll = function(domEle){
+      r.registerBinding(domEle, 'scroll', function(e){
+        r.containerBB = null; // invalidate bb cache
+      } );
+    };
+
+    var bbCtnr = r.data.cy.container();
+
+    for( ;; ){
+      
+      invalCtnrBBOnScroll( bbCtnr );
+
+      if( bbCtnr.parentNode ){
+        bbCtnr = bbCtnr.parentNode;
+      } else {
+        break;
+      }
+      
+    }
+
     // stop right click menu from appearing on cy
@@ -164,3 +186,3 @@ r.registerBinding(r.data.container, 'contextmenu', function(e){
       
-      var cy = r.data.cy; var pos = r.projectIntoViewport(e.pageX, e.pageY);
+      var cy = r.data.cy; var pos = r.projectIntoViewport(e.clientX, e.clientY);
       var select = r.data.select;
@@ -343,6 +365,6 @@ var near = r.findNearestElement(pos[0], pos[1], true);
         
-        var containerPageCoords = r.findContainerPageCoords();
+        var containerPageCoords = r.findContainerClientCoords();
         
-        if (e.pageX > containerPageCoords[0] && e.pageX < containerPageCoords[0] + r.data.container.clientWidth
-          && e.pageY > containerPageCoords[1] && e.pageY < containerPageCoords[1] + r.data.container.clientHeight) {
+        if (e.clientX > containerPageCoords[0] && e.clientX < containerPageCoords[0] + r.canvasWidth
+          && e.clientY > containerPageCoords[1] && e.clientY < containerPageCoords[1] + r.canvasHeight) {
           
@@ -355,3 +377,3 @@ } else {
       var cy = r.data.cy;
-      var pos = r.projectIntoViewport(e.pageX, e.pageY);
+      var pos = r.projectIntoViewport(e.clientX, e.clientY);
       var select = r.data.select;
@@ -466,3 +488,3 @@
         // Needs reproject due to pan changing viewport
-        pos = r.projectIntoViewport(e.pageX, e.pageY);
+        pos = r.projectIntoViewport(e.clientX, e.clientY);
 
@@ -575,3 +597,3 @@ // Checks primary button down & out of time & mouse not moved much
     
-      var cy = r.data.cy; var pos = r.projectIntoViewport(e.pageX, e.pageY); var select = r.data.select;
+      var cy = r.data.cy; var pos = r.projectIntoViewport(e.clientX, e.clientY); var select = r.data.select;
       var near = r.findNearestElement(pos[0], pos[1], true);
@@ -829,6 +851,7 @@ var nodes = r.getCachedNodes(); var edges = r.getCachedEdges();
           
-          for (var i=0;i<draggedElements.length;i++) {
+          for (var i=0; i<draggedElements.length; i++) {
             
             if (draggedElements[i]._private.group == 'nodes') { 
               draggedElements[i]._private.rscratch.inDragLayer = false;
+              draggedElements[i]._private.grabbed = false;
               
@@ -868,3 +891,3 @@ var sEdges = draggedElements[i]._private.edges;
       var cy = r.data.cy;
-      var pos = r.projectIntoViewport(e.pageX, e.pageY);
+      var pos = r.projectIntoViewport(e.clientX, e.clientY);
       var rpos = [pos[0] * cy.zoom() + cy.pan().x,
@@ -911,3 +934,3 @@ pos[1] * cy.zoom() + cy.pan().y];
     r.registerBinding(r.data.container, 'mouseout', function(e) { 
-      var pos = r.projectIntoViewport(e.pageX, e.pageY);
+      var pos = r.projectIntoViewport(e.clientX, e.clientY);
 
@@ -921,3 +944,3 @@ r.data.cy.trigger(new $$.Event(e, {
     r.registerBinding(r.data.container, 'mouseover', function(e) { 
-      var pos = r.projectIntoViewport(e.pageX, e.pageY);
+      var pos = r.projectIntoViewport(e.clientX, e.clientY);
 
@@ -934,3 +957,3 @@ r.data.cy.trigger(new $$.Event(e, {
     var offsetLeft, offsetTop;
-    var containerWidth = r.data.container.clientWidth, containerHeight = r.data.container.clientHeight;
+    var containerWidth, containerHeight;
     var twoFingersStartInside;
@@ -957,5 +980,5 @@
       
-      if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY); now[0] = pos[0]; now[1] = pos[1]; }
-      if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].pageX, e.touches[1].pageY); now[2] = pos[0]; now[3] = pos[1]; }
-      if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].pageX, e.touches[2].pageY); now[4] = pos[0]; now[5] = pos[1]; }
+      if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].clientX, e.touches[0].clientY); now[0] = pos[0]; now[1] = pos[1]; }
+      if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].clientX, e.touches[1].clientY); now[2] = pos[0]; now[3] = pos[1]; }
+      if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].clientX, e.touches[2].clientY); now[4] = pos[0]; now[5] = pos[1]; }
       
@@ -976,11 +999,13 @@ // record starting points for pinch-to-zoom
 
-        var offsets = r.findContainerPageCoords();
+        var offsets = r.findContainerClientCoords();
+        offsetLeft = offsets[0];
         offsetTop = offsets[1];
-        offsetLeft = offsets[0];
+        containerWidth = offsets[2];
+        containerHeight = offsets[3];
 
-        f1x1 = e.touches[0].pageX - offsetLeft;
-        f1y1 = e.touches[0].pageY - offsetTop;
+        f1x1 = e.touches[0].clientX - offsetLeft;
+        f1y1 = e.touches[0].clientY - offsetTop;
         
-        f2x1 = e.touches[1].pageX - offsetLeft;
-        f2y1 = e.touches[1].pageY - offsetTop;
+        f2x1 = e.touches[1].clientX - offsetLeft;
+        f2y1 = e.touches[1].clientY - offsetTop;
 
@@ -1217,5 +1242,5 @@ twoFingersStartInside =
       
-      if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY); now[0] = pos[0]; now[1] = pos[1]; }
-      if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].pageX, e.touches[1].pageY); now[2] = pos[0]; now[3] = pos[1]; }
-      if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].pageX, e.touches[2].pageY); now[4] = pos[0]; now[5] = pos[1]; }
+      if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].clientX, e.touches[0].clientY); now[0] = pos[0]; now[1] = pos[1]; }
+      if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].clientX, e.touches[1].clientY); now[2] = pos[0]; now[3] = pos[1]; }
+      if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].clientX, e.touches[2].clientY); now[4] = pos[0]; now[5] = pos[1]; }
       var disp = []; for (var j=0;j<now.length;j++) { disp[j] = now[j] - earlier[j]; }
@@ -1225,4 +1250,4 @@
       if( capture && r.touchData.cxt ){
-        var f1x2 = e.touches[0].pageX - offsetLeft, f1y2 = e.touches[0].pageY - offsetTop;
-        var f2x2 = e.touches[1].pageX - offsetLeft, f2y2 = e.touches[1].pageY - offsetTop;
+        var f1x2 = e.touches[0].clientX - offsetLeft, f1y2 = e.touches[0].clientY - offsetTop;
+        var f2x2 = e.touches[1].clientX - offsetLeft, f2y2 = e.touches[1].clientY - offsetTop;
         var distance2 = distance( f1x2, f1y2, f2x2, f2y2 );
@@ -1326,4 +1351,4 @@ var factor = distance2 / distance1;
         // (x2, y2) for fingers 1 and 2
-        var f1x2 = e.touches[0].pageX - offsetLeft, f1y2 = e.touches[0].pageY - offsetTop;
-        var f2x2 = e.touches[1].pageX - offsetLeft, f2y2 = e.touches[1].pageY - offsetTop;
+        var f1x2 = e.touches[0].clientX - offsetLeft, f1y2 = e.touches[0].clientY - offsetTop;
+        var f2x2 = e.touches[1].clientX - offsetLeft, f2y2 = e.touches[1].clientY - offsetTop;
 
@@ -1383,2 +1408,23 @@ // console.log( f1x2, f1y2 )
 
+          // remove dragged eles
+          if( r.touchData.start ){
+            var draggedEles = r.dragData.touchDragEles;
+
+            if( draggedEles ){ for( var i = 0; i < draggedEles.length; i++ ){
+              draggedEles[i]._private.grabbed = false;
+              draggedEles[i]._private.rscratch.inDragLayer = false;
+            } }
+
+            r.touchData.start._private.active = false;
+            r.touchData.start._private.grabbed = false;
+            r.touchData.start._private.rscratch.inDragLayer = false;
+
+            r.data.canvasNeedsRedraw[CanvasRenderer.DRAG] = true;
+
+            r.touchData.start
+              .trigger('free')
+              .trigger('unactivate')
+            ;
+          }
+
           cy._private.zoom = zoom2;
@@ -1401,5 +1447,5 @@ cy._private.pan = pan2;
         // Re-project
-        if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY); now[0] = pos[0]; now[1] = pos[1]; }
-        if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].pageX, e.touches[1].pageY); now[2] = pos[0]; now[3] = pos[1]; }
-        if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].pageX, e.touches[2].pageY); now[4] = pos[0]; now[5] = pos[1]; }
+        if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].clientX, e.touches[0].clientY); now[0] = pos[0]; now[1] = pos[1]; }
+        if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].clientX, e.touches[1].clientY); now[2] = pos[0]; now[3] = pos[1]; }
+        if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].clientX, e.touches[2].clientY); now[4] = pos[0]; now[5] = pos[1]; }
 
@@ -1541,3 +1587,3 @@ } else if (e.touches[0]) {
           // Re-project
-          var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY);
+          var pos = r.projectIntoViewport(e.touches[0].clientX, e.touches[0].clientY);
           now[0] = pos[0]; now[1] = pos[1];
@@ -1583,5 +1629,5 @@ }
 
-      if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].pageX, e.touches[0].pageY); now[0] = pos[0]; now[1] = pos[1]; }
-      if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].pageX, e.touches[1].pageY); now[2] = pos[0]; now[3] = pos[1]; }
-      if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].pageX, e.touches[2].pageY); now[4] = pos[0]; now[5] = pos[1]; }
+      if (e.touches[0]) { var pos = r.projectIntoViewport(e.touches[0].clientX, e.touches[0].clientY); now[0] = pos[0]; now[1] = pos[1]; }
+      if (e.touches[1]) { var pos = r.projectIntoViewport(e.touches[1].clientX, e.touches[1].clientY); now[2] = pos[0]; now[3] = pos[1]; }
+      if (e.touches[2]) { var pos = r.projectIntoViewport(e.touches[2].clientX, e.touches[2].clientY); now[4] = pos[0]; now[5] = pos[1]; }
       
@@ -1715,2 +1761,3 @@ if( start ){
               selectedNode._private.rscratch.inDragLayer = false;
+              selectedNode._private.grabbed = false;
 
@@ -1717,0 +1764,0 @@ var sEdges = selectedNode._private.edges;

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

21276312

increased by9.9%

Number of package files

403

increased by2.81%

Lines of code

330554

increased by5.6%

Worsened metrics

Dev dependency count

17

increased by6.25%

No dependency changes