cytoscape-grid-guide - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

package.json

 {
   "name": "cytoscape-grid-guide",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A sophisticated and highly customizable Cytoscape.js extension for grid and guideline interactions.",
@@ -25,3 +25,3 @@ "main": "src/index.js",
   "peerDependencies": {
-    "cytoscape": ">=1.6.10"
+    "cytoscape": "^3.3.0"
   },
@@ -28,0 +28,0 @@ "homepage": "https://github.com/iVis-at-Bilkent/cytoscape.js-grid-guide",

README.md

@@ -33,6 +33,7 @@ cytoscape-grid-guide
 - whether or not edge to center alignment should be ignored
+- whether to snap nodes to the center of the grid or to the lines of the grid
 
 ## Demo
 
-Click [here](https://rawgit.com/iVis-at-Bilkent/cytoscape.js-grid-guide/master/demo.html) for demo
+Click [here](https://ivis-at-bilkent.github.io/cytoscape.js-grid-guide/demo.html) for demo
 
@@ -81,2 +82,3 @@ ## API
     gridSpacing: 20, // Distance between the lines of the grid.
+    snapToGridCenter: true, // Snaps nodes to center of gridlines. When false, snaps to gridlines themselves. Note that either snapToGridOnRelease or snapToGridDuringDrag must be true.
 
@@ -115,4 +117,3 @@ // Draw Grid
 
- * Cytoscape.js >=1.6.10
- * jQuery ^1.4 || ^2.0 || ^3.0
+ * Cytoscape.js ^3.3.0
 
@@ -132,6 +133,5 @@
 var cytoscape = require('cytoscape');
-var jquery = require('jquery');
 var gridGuide = require('cytoscape-grid-guide');
 
-gridGuide( cytoscape, jquery ); // register extension
+gridGuide( cytoscape ); // register extension
 ```
@@ -141,4 +141,4 @@
 ```js
-require(['cytoscape', 'jquery', 'cytoscape-grid-guide'], function( cytoscape, jquery, gridGuide ){
-    gridGuide( cytoscape, jquery ); // register extension
+require(['cytoscape', 'cytoscape-grid-guide'], function( cytoscape, gridGuide ){
+    gridGuide( cytoscape ); // register extension
 });
@@ -145,0 +145,0 @@ ```

src/alignment.js

@@ -1,2 +0,2 @@
-module.exports = function (cytoscape, cy,  $, apiRegistered) {
+module.exports = function (cytoscape, cy, apiRegistered) {
 
@@ -77,4 +77,4 @@ // Needed because parent nodes cannot be moved in Cytoscape.js < v3.2
               var node = eles[i];
-              var oldPos = $.extend({}, node.position());
-              var newPos = $.extend({}, node.position());
+              var oldPos = Object.assign({}, node.position());
+              var newPos = Object.assign({}, node.position());
 
@@ -81,0 +81,0 @@ if (vertical != "none")

src/draw_grid.js

@@ -1,2 +0,2 @@
-module.exports = function (opts, cy, $, debounce) {
+module.exports = function (opts, cy, debounce) {
 
@@ -9,18 +9,23 @@ var options = opts;
 
+    var offset = function(elt) {
+        var rect = elt.getBoundingClientRect();
 
-    var $canvas = $( '<canvas></canvas>' );
-    var $container = $( cy.container() );
-    var ctx = $canvas[ 0 ].getContext( '2d' );
+        return {
+          top: rect.top + document.documentElement.scrollTop,
+          left: rect.left + document.documentElement.scrollLeft
+        }
+    };
+
+    var $canvas = document.createElement('canvas');
+    var $container = cy.container();
+    var ctx = $canvas.getContext( '2d' );
     $container.append( $canvas );
 
     var resetCanvas = function () {
-        $canvas
-            .attr('height', 0)
-            .attr('width', 0)
-            .css( {
-                'position': 'absolute',
-                'top': 0,
-                'left': 0,
-                'z-index': options.gridStackOrder
-            });
+        $canvas.height = 0;
+        $canvas.width = 0;
+        $canvas.style.position = 'absolute';
+        $canvas.style.top = 0;
+        $canvas.style.left = 0;
+        $canvas.style.zIndex = options.gridStackOrder;
     };
@@ -32,4 +37,4 @@
         var zoom = cy.zoom();
-        var canvasWidth = $container.width();
-        var canvasHeight = $container.height();
+        var canvasWidth = cy.width();
+        var canvasHeight = cy.height();
         var increment = options.gridSpacing*zoom;
@@ -68,4 +73,4 @@ var pan = cy.pan();
     var clearDrawing = function() {
-        var width = $container.width();
-        var height = $container.height();
+        var width = cy.width();
+        var height = cy.height();
 
@@ -76,25 +81,19 @@ ctx.clearRect( 0, 0, width, height );
     var resizeCanvas = debounce(function() {
-            $canvas
-                .attr( 'height', $container.height() )
-                .attr( 'width', $container.width() )
-                .css( {
-                    'position': 'absolute',
-                    'top': 0,
-                    'left': 0,
-                    'z-index': options.gridStackOrder
-                } );
+        $canvas.height = cy.height();
+        $canvas.width = cy.width();
+        $canvas.style.position = 'absolute';
+        $canvas.style.top = 0;
+        $canvas.style.left = 0;
+        $canvas.style.zIndex = options.gridStackOrder;
 
-            setTimeout( function() {
-                var canvasBb = $canvas.offset();
-                var containerBb = $container.offset();
+        setTimeout( function() {
+            $canvas.height = cy.height();
+            $canvas.width = cy.width();
 
-                $canvas
-                    .attr( 'height', $container.height() )
-                    .attr( 'width', $container.width() )
-                    .css( {
-                        'top': -( canvasBb.top - containerBb.top ),
-                        'left': -( canvasBb.left - containerBb.left )
-                    } );
-                drawGrid();
-            }, 0 );
+            var canvasBb = offset($canvas);
+            var containerBb = offset($container);
+            $canvas.style.top = -(canvasBb.top - containerBb.top);
+            $canvas.style.left = -(canvasBb.left - containerBb.left);
+            drawGrid();
+        }, 0 );
 
@@ -101,0 +100,0 @@ }, 250);

src/events_controller.js

@@ -1,2 +0,2 @@
-module.exports = function (cy, snap, resize, snapToGridDuringDrag, drawGrid, guidelines, parentPadding, $, opts) {
+module.exports = function (cy, snap, resize, snapToGridDuringDrag, drawGrid, guidelines, parentPadding, opts) {
 
@@ -102,7 +102,7 @@ var feature = function (func) {
 			drawGrid.initCanvas();
-			$(window).on('resize', drawGrid.resizeCanvas);
+			window.addEventListener('resize', drawGrid.resizeCanvas);
 		} else {
 			drawGrid.clearCanvas();
 			drawGrid.resetCanvas();
-			$(window).off('resize', drawGrid.resizeCanvas);
+			window.removeEventListener('resize', drawGrid.resizeCanvas);
 		}
@@ -154,3 +154,3 @@ }
 			cy.on("free", guidelinesFreeHandler);
-			$(window).on("resize", guidelinesWindowResizeHandler);
+			window.addEventListener('resize', guidelinesWindowResizeHandler);
 		}
@@ -164,3 +164,3 @@ else{
 			guidelines.resetCanvas();
-			$(window).off("resize", guidelinesWindowResizeHandler);
+			window.removeEventListener('resize', guidelinesWindowResizeHandler);
 		}
@@ -195,7 +195,7 @@ }
 		parentPadding: ["gridSpacing", "parentSpacing"],
-		snapToGridOnRelease: ["gridSpacing"]
+		snapToGridOnRelease: ["gridSpacing", "snapToGridCenter"]
 	};
 
 	function syncWithOptions(options) {
-		currentOptions = $.extend(true, {}, options);
+		currentOptions = Object.extend({}, options);
 		options.guidelines = options.initPosAlignment ||  options.distributionGuidelines || options.geometricGuideline;
@@ -238,3 +238,3 @@ for (var key in options)
 				}
-		latestOptions = $.extend(true, latestOptions, options);
+		latestOptions = Object.extend({}, latestOptions, options);
 	}
@@ -241,0 +241,0 @@

src/guidelines.js

@@ -1,2 +0,2 @@
-module.exports = function (opts, cy, $, debounce) {
+module.exports = function (opts, cy, debounce) {
 
@@ -17,2 +17,11 @@
 
+	var offset = function(elt) {
+		var rect = elt.getBoundingClientRect();
+
+		return {
+			top: rect.top + document.documentElement.scrollTop,
+			left: rect.left + document.documentElement.scrollLeft
+		}
+	};
+
 	var getCyScratch = function () {
@@ -29,22 +38,18 @@ var sc = cy.scratch("_guidelines");
 		clearDrawing();
-		$canvas
-			.attr('height', $container.height())
-			.attr('width', $container.width())
-			.css({
-				'position': 'absolute',
-				'top': 0,
-				'left': 0,
-				'z-index': options.guidelinesStackOrder
-			});
+		$canvas.height = cy.height();
+		$canvas.width = cy.width();
+		$canvas.style.position = 'absolute';
+		$canvas.style.top = 0;
+		$canvas.style.left = 0;
+		$canvas.style.zIndex = options.guidelinesStackOrder;
+
 		setTimeout(function () {
-			var canvasBb = $canvas.offset();
-			var containerBb = $container.offset();
 
-			$canvas
-				.attr('height', $container.height())
-				.attr('width', $container.width())
-				.css({
-					'top': -( canvasBb.top - containerBb.top ),
-					'left': -( canvasBb.left - containerBb.left )
-				});
+			$canvas.height = cy.height();
+			$canvas.width = cy.width();
+
+			var canvasBb = offset($canvas);
+			var containerBb = offset($container);
+			$canvas.style.top = -(canvasBb.top - containerBb.top);
+			$canvas.style.left = -(canvasBb.left - containerBb.left);
 		}, 0);
@@ -55,4 +60,4 @@ }, 250);
 	var clearDrawing = function () {
-		var width = $container.width();
-		var height = $container.height();
+		var width = cy.width();
+		var height = cy.height();
 		ctx.clearRect(0, 0, width, height);
@@ -62,17 +67,14 @@ };
 	/* Create a canvas */
-	var $canvas = $('<canvas></canvas>');
-	var $container = $(cy.container());
-	var ctx = $canvas[0].getContext('2d');
+	var $canvas = document.createElement('canvas');
+	var $container = cy.container();
+	var ctx = $canvas.getContext('2d');
 	$container.append($canvas);
 
 	var resetCanvas = function () {
-		$canvas
-			.attr('height', 0)
-			.attr('width', 0)
-			.css( {
-				'position': 'absolute',
-				'top': 0,
-				'left': 0,
-				'z-index': options.gridStackOrder
-			});
+		$canvas.height = 0;
+		$canvas.width = 0;
+		$canvas.style.position = 'absolute';
+		$canvas.style.top = 0;
+		$canvas.style.left = 0;
+		$canvas.style.zIndex = options.guidelinesStackOrder;
 	};
@@ -140,5 +142,5 @@
 		nodes.not(excludedNodes).each(function (node, i) {
-            if(typeof node === "number") {
-              node = i;
-            }
+			if(typeof node === "number") {
+				node = i;
+			}
 			var dims = lines.getDims(node);
@@ -149,5 +151,5 @@
 				if (HTree.get(hKey))
-				HTree.get(hKey).push(node);
+					HTree.get(hKey).push(node);
 				else
-				HTree = HTree.insert(hKey, [node]);
+					HTree = HTree.insert(hKey, [node]);
 			});
@@ -158,5 +160,5 @@
 				if (VTree.get(vKey))
-				VTree.get(vKey).push(node);
+					VTree.get(vKey).push(node);
 				else
-				VTree = VTree.insert(vKey, [node]);
+					VTree = VTree.insert(vKey, [node]);
 			});
@@ -258,3 +260,3 @@
 	};
-	
+
 	/**
@@ -266,21 +268,21 @@ * Calculate the amount of offset for distribution guidelines
 	calculateOffset = function(nodes, type){
-			var minNode = nodes[0], min = lines.getDims(minNode)[type]["center"];
-			var maxNode = nodes[0], max = lines.getDims(maxNode)[type]["center"];
+		var minNode = nodes[0], min = lines.getDims(minNode)[type]["center"];
+		var maxNode = nodes[0], max = lines.getDims(maxNode)[type]["center"];
 
-			for (var i = 0; i < nodes.length; i++){
-				var node = nodes[i];
-				if (lines.getDims(node)[type]["center"] < min){
-					min = lines.getDims(node)[type]["center"]; minNode = node;
-				}
-				if (lines.getDims(node)[type]["center"] > max){
-					max = lines.getDims(node)[type]["center"]; maxNode = node;
-				}
+		for (var i = 0; i < nodes.length; i++){
+			var node = nodes[i];
+			if (lines.getDims(node)[type]["center"] < min){
+				min = lines.getDims(node)[type]["center"]; minNode = node;
 			}
+			if (lines.getDims(node)[type]["center"] > max){
+				max = lines.getDims(node)[type]["center"]; maxNode = node;
+			}
+		}
 
-			if (type == "horizontal")
-				var offset = (min + max) / 2 < lines.getDims(nodes[1])[type]["center"] ? max + (0.5*maxNode.width() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom() : min - (0.5*minNode.width() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom();
-			else
-				var offset = (min + max) / 2 < lines.getDims(nodes[1])[type]["center"] ? max + (0.5*maxNode.height() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom() : min - (0.5*minNode.height() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom();
+		if (type == "horizontal")
+			var offset = (min + max) / 2 < lines.getDims(nodes[1])[type]["center"] ? max + (0.5*maxNode.width() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom() : min - (0.5*minNode.width() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom();
+		else
+			var offset = (min + max) / 2 < lines.getDims(nodes[1])[type]["center"] ? max + (0.5*maxNode.height() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom() : min - (0.5*minNode.height() + options.guidelinesStyle.distGuidelineOffset)*cy.zoom();
 
-			return offset;
+		return offset;
 	}
@@ -305,14 +307,14 @@ /** Guidelines for horizontally distributed alignment
 						nodeDim["horizontal"]["left"] - leftDim["horizontal"]["right"] > options.guidelinesStyle.minDistRange){
-							var ripo = Math.round(2*Xcenter)-key;
-							HTree.forEach(function($, rightNodes){
-								for (var j = 0; j < rightNodes.length; j++){
-									var right = rightNodes[j];
-									if (Math.abs(lines.getDims(right)["vertical"]["center"] - Ycenter) < options.guidelinesStyle.range*cy.zoom()){
-										if (Math.abs(ripo - lines.getDims(right)["horizontal"]["left"]) < 2*options.guidelinesTolerance){
-											leftNode = left; rightNode = right;
-										}
+						var ripo = Math.round(2*Xcenter)-key;
+						HTree.forEach(function($, rightNodes){
+							for (var j = 0; j < rightNodes.length; j++){
+								var right = rightNodes[j];
+								if (Math.abs(lines.getDims(right)["vertical"]["center"] - Ycenter) < options.guidelinesStyle.range*cy.zoom()){
+									if (Math.abs(ripo - lines.getDims(right)["horizontal"]["left"]) < 2*options.guidelinesTolerance){
+										leftNode = left; rightNode = right;
 									}
 								}
-							}, ripo - options.guidelinesTolerance, ripo + options.guidelinesTolerance);
-						}
+							}
+						}, ripo - options.guidelinesTolerance, ripo + options.guidelinesTolerance);
+					}
 				}
@@ -329,3 +331,3 @@ }
 			var offset = calculateOffset([leftNode, node, rightNode], "vertical");
-	
+
 			lines.drawLine({
@@ -422,16 +424,16 @@ x: lines.getDims(leftNode)["horizontal"]["right"],
 						nodeDim["vertical"]["top"] - belowDim["vertical"]["bottom"] > options.guidelinesStyle.minDistRange){
-							var abpo = Math.round((2*Ycenter)-key);
-							VTree.forEach(function($, aboveNodes){
-								//if (aboveNodes){
-								for (var j = 0; j < aboveNodes.length; j++){
-									var above = aboveNodes[j];
-									if (Math.abs(lines.getDims(above)["horizontal"]["center"] - Xcenter) < options.guidelinesStyle.range*cy.zoom()){
-										if (Math.abs(abpo - lines.getDims(above)["vertical"]["top"]) < 2*options.guidelinesTolerance){
-											belowNode = below; aboveNode = above;
-										}
+						var abpo = Math.round((2*Ycenter)-key);
+						VTree.forEach(function($, aboveNodes){
+							//if (aboveNodes){
+							for (var j = 0; j < aboveNodes.length; j++){
+								var above = aboveNodes[j];
+								if (Math.abs(lines.getDims(above)["horizontal"]["center"] - Xcenter) < options.guidelinesStyle.range*cy.zoom()){
+									if (Math.abs(abpo - lines.getDims(above)["vertical"]["top"]) < 2*options.guidelinesTolerance){
+										belowNode = below; aboveNode = above;
 									}
 								}
-								//}
-							}, abpo - options.guidelinesTolerance, abpo + options.guidelinesTolerance);
-						}
+							}
+							//}
+						}, abpo - options.guidelinesTolerance, abpo + options.guidelinesTolerance);
+					}
 				}
@@ -505,3 +507,3 @@ }
 				x: offset,
-			y: lines.getDims(aboveNode)["vertical"]["top"]}, "bottom");
+				y: lines.getDims(aboveNode)["vertical"]["top"]}, "bottom");
 
@@ -511,3 +513,3 @@ lines.drawArrow({
 				y: nodeDim["vertical"]["bottom"]}, "top");
-			}
+		}
 		else{
@@ -557,9 +559,9 @@ var state = lines.verticalDistributionNext(node,"below" );
 					if (options.centerToEdgeAlignment || (dimKey != "center" && n.renderedPosition(otherAxis) != exKey) || (dimKey == "center" && n.renderedPosition(otherAxis) == exKey)){
-					var dif = Math.abs(center - n.renderedPosition(axis));
-					if ( dif < targetKey && dif < options.guidelinesStyle.geometricGuidelineRange*cy.zoom()){
-						target = n;
-						targetKey = dif;
-						closestKey = exKey;
+						var dif = Math.abs(center - n.renderedPosition(axis));
+						if ( dif < targetKey && dif < options.guidelinesStyle.geometricGuidelineRange*cy.zoom()){
+							target = n;
+							targetKey = dif;
+							closestKey = exKey;
+						}
 					}
-					}
 				}
@@ -571,3 +573,3 @@ }, position - Number(options.guidelinesTolerance), position + Number(options.guidelinesTolerance));
 				targetKey = lines.getDims(node)[type][dimKey];
-				
+
 				// Draw horizontal or vertical alignment line
@@ -625,14 +627,14 @@ if (type == "horizontal") {
 						compare[type](leftDim["horizontal"][otherSide], nodeDim["horizontal"][side])){
-							var ll = leftDim["horizontal"][side]-(nodeDim["horizontal"][side] - key);
-							HTree.forEach(function($, rightNodes){
-								for (var j = 0; j < rightNodes.length; j++){
-									var right = rightNodes[j];
-									if (Math.abs(lines.getDims(right)["vertical"]["center"] - Ycenter) < options.guidelinesStyle.range*cy.zoom()){
-										if (Math.abs(ll - lines.getDims(right)["horizontal"][otherSide]) < 2*options.guidelinesTolerance){
-											leftNode = left; rightNode = right;
-										}
+						var ll = leftDim["horizontal"][side]-(nodeDim["horizontal"][side] - key);
+						HTree.forEach(function($, rightNodes){
+							for (var j = 0; j < rightNodes.length; j++){
+								var right = rightNodes[j];
+								if (Math.abs(lines.getDims(right)["vertical"]["center"] - Ycenter) < options.guidelinesStyle.range*cy.zoom()){
+									if (Math.abs(ll - lines.getDims(right)["horizontal"][otherSide]) < 2*options.guidelinesTolerance){
+										leftNode = left; rightNode = right;
 									}
 								}
-							}, ll - options.guidelinesTolerance, ll + options.guidelinesTolerance);
-						}
+							}
+						}, ll - options.guidelinesTolerance, ll + options.guidelinesTolerance);
+					}
 				}
@@ -648,3 +650,3 @@ }
 			}
-			
+
 			lines.drawDH(node, leftNode, rightNode, type);
@@ -759,14 +761,14 @@ return true;
 						compare[type](belowDim["vertical"][otherSide], nodeDim["vertical"][side])){
-							var ll = belowDim["vertical"][side]-(nodeDim["vertical"][side]-key);
-							VTree.forEach(function($, aboveNodes){
-								for (var j = 0; j < aboveNodes.length; j++){
-									var above = aboveNodes[j];
-									if (Math.abs(lines.getDims(above)["horizontal"]["center"] - Xcenter) < options.guidelinesStyle.range*cy.zoom()){
-										if (Math.abs(ll - lines.getDims(above)["vertical"][otherSide]) < 2*options.guidelinesTolerance){
-											belowNode = below; aboveNode = above;
-										}
+						var ll = belowDim["vertical"][side]-(nodeDim["vertical"][side]-key);
+						VTree.forEach(function($, aboveNodes){
+							for (var j = 0; j < aboveNodes.length; j++){
+								var above = aboveNodes[j];
+								if (Math.abs(lines.getDims(above)["horizontal"]["center"] - Xcenter) < options.guidelinesStyle.range*cy.zoom()){
+									if (Math.abs(ll - lines.getDims(above)["vertical"][otherSide]) < 2*options.guidelinesTolerance){
+										belowNode = below; aboveNode = above;
 									}
 								}
-							}, ll - options.guidelinesTolerance, ll + options.guidelinesTolerance);
-						}
+							}
+						}, ll - options.guidelinesTolerance, ll + options.guidelinesTolerance);
+					}
 				}
@@ -874,5 +876,5 @@ }
 		activeNodes.each(function (node, i) {
-            if(typeof node === "number") {
-              node = i;
-            }
+			if(typeof node === "number") {
+				node = i;
+			}
 			if (options.geometricGuideline){
@@ -903,6 +905,6 @@ lines.searchForLine("horizontal", node);
 		var roots = nodes.filter(function (ele, i) {
-            if(typeof ele === "number") {
-              ele = i;
-            }
-            
+			if(typeof ele === "number") {
+				ele = i;
+			}
+
 			var parent = ele.parent()[0];
@@ -974,3 +976,3 @@ while (parent != null) {
 			if(typeof node === "number") {
-			  node = i;
+				node = i;
 			}
@@ -991,16 +993,16 @@ var newPos = {x: positionDiff.x + node.renderedPosition("x"),
 		if (nodeToAlign)
-		nodeToAlign.each(function (node, i){
-			if(typeof node === "number") {
-			  node = i;
-			}
-		if (node.locked() && (Math.abs(currMousePos.x - oldMousePos.x) > 2*options.guidelinesTolerance
-			|| Math.abs(currMousePos.y - oldMousePos.y) > 2*options.guidelinesTolerance)){
+			nodeToAlign.each(function (node, i){
+				if(typeof node === "number") {
+					node = i;
+				}
+				if (node.locked() && (Math.abs(currMousePos.x - oldMousePos.x) > 2*options.guidelinesTolerance
+					|| Math.abs(currMousePos.y - oldMousePos.y) > 2*options.guidelinesTolerance)){
 
-			node.unlock();
-			var diff = {};
-			diff.x = currMousePos.x - tappedNode.renderedPosition("x");
-			diff.y = currMousePos.y - tappedNode.renderedPosition("y");;
-			moveNodes(diff, node);
-		};
-    });
+					node.unlock();
+					var diff = {};
+					diff.x = currMousePos.x - tappedNode.renderedPosition("x");
+					diff.y = currMousePos.y - tappedNode.renderedPosition("y");;
+					moveNodes(diff, node);
+				};
+			});
 
@@ -1013,3 +1015,3 @@ });
 			if(typeof node === "number") {
-			  node = i;
+				node = i;
 			}
@@ -1016,0 +1018,0 @@ var newPos = node.renderedPosition();

src/index.js

 ;(function(){ 'use strict';
 
 	// registers the extension on a cytoscape lib ref
-	var register = function(cytoscape, $){
+	var register = function(cytoscape){
 
-		if(!cytoscape || !$){ return; } // can't register if cytoscape unspecified
+		if(!cytoscape){ return; } // can't register if cytoscape unspecified
+		require("./extend");
 
@@ -30,2 +31,3 @@ // flag that indicates if extension api functions are registed to cytoscape
 			gridSpacing: 20, // Distance between the lines of the grid.
+			snapToGridCenter: true, // Snaps nodes to center of gridlines. When false, snaps to gridlines themselves.
 			zoomDash: true, // Determines whether the size of the dashes should change when the drawing is zoomed in and out if grid is drawn.
@@ -81,3 +83,3 @@ panGrid: false, // Determines whether the grid should move then the user moves the graph if grid is drawn.
 			// extend the already existing options for the instance or the default options
-			var options = $.extend(true, {}, scratchPad.options || defaults, opts);
+			var options = Object.extend({}, scratchPad.options || defaults, opts);
 
@@ -91,12 +93,12 @@ // reset the options for the instance
 
-				snap = _snapOnRelease(cy, options.gridSpacing);
+				snap = _snapOnRelease(cy, options.gridSpacing, options.snapToGridCenter);
 				resize = _resize(options.gridSpacing);
 				snapToGridDuringDrag = _snapToGridDuringDrag(cy, snap);
-				drawGrid = _drawGrid(options, cy, $, debounce);
-				guidelines = _guidelines(options, cy, $, debounce);
+				drawGrid = _drawGrid(options, cy, debounce);
+				guidelines = _guidelines(options, cy, debounce);
 				parentPadding = _parentPadding(options, cy);
 
-				eventsController = _eventsController(cy, snap, resize, snapToGridDuringDrag, drawGrid, guidelines, parentPadding, $, options);
+				eventsController = _eventsController(cy, snap, resize, snapToGridDuringDrag, drawGrid, guidelines, parentPadding, options);
 
-				alignment = _alignment(cytoscape, cy, $, apiRegistered);
+				alignment = _alignment(cytoscape, cy, apiRegistered);
 
@@ -132,6 +134,6 @@ // mark that api functions are registered to cytoscape
 
-	if( typeof cytoscape !== 'undefined' && $ ){ // expose to global cytoscape (i.e. window.cytoscape)
-		register( cytoscape, $ );
+	if( typeof cytoscape !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape)
+		register( cytoscape );
 	}
 
 })();

src/snap_on_release.js

@@ -1,2 +0,2 @@
-module.exports = function (cy, gridSpacing) {
+module.exports = function (cy, gridSpacing, gridSpacingOffset) {
 
@@ -7,2 +7,3 @@ var snap = { };
         gridSpacing = opts.gridSpacing;
+        gridSpacingOffset = opts.snapToGridCenter ? 0.5 : 0;
     };
@@ -18,5 +19,7 @@
     snap.snapPos = function (pos) {
+        var xPosition = gridSpacingOffset ? Math.floor(pos.x / gridSpacing) : Math.round(pos.x / gridSpacing);
+        var yPosition = gridSpacingOffset ? Math.floor(pos.y / gridSpacing) : Math.round(pos.y / gridSpacing);
         var newPos = {
-            x: (Math.floor(pos.x / gridSpacing) + 0.5) * gridSpacing,
-            y: (Math.floor(pos.y / gridSpacing) + 0.5) * gridSpacing
+            x: (xPosition + gridSpacingOffset) * gridSpacing,
+            y: (yPosition + gridSpacingOffset) * gridSpacing
         };
@@ -23,0 +26,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

260448

1.01%

Number of package files

20

5.26%

Lines of code

4761

1.17%

Worsened metrics

Number of medium supply chain risk alerts

3

50%

No dependency changes