Skip to content

enhance conguration for changing background grid #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

enhance conguration for changing background grid #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions src/draw_grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@ module.exports = function (opts, cy, debounce) {
var options = opts;

var changeOptions = function (opts) {
options = opts;
options = opts;
};

var offset = function(elt) {
var offset = function (elt) {
var rect = elt.getBoundingClientRect();

return {
top: rect.top + document.documentElement.scrollTop,
left: rect.left + document.documentElement.scrollLeft
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.appendChild( $canvas );
var ctx = $canvas.getContext('2d');
$container.appendChild($canvas);

var resetCanvas = function () {
$canvas.height = 0;
Expand All @@ -31,19 +31,19 @@ module.exports = function (opts, cy, debounce) {

resetCanvas();

var drawGrid = function() {
var drawGrid = function () {
var zoom = cy.zoom();
var canvasWidth = cy.width();
var canvasHeight = cy.height();
var increment = options.gridSpacing*zoom;
var increment = options.gridSpacing * zoom;
var pan = cy.pan();
var initialValueX = pan.x%increment;
var initialValueY = pan.y%increment;
var initialValueX = pan.x % increment;
var initialValueY = pan.y % increment;

ctx.strokeStyle = options.gridColor;
ctx.lineWidth = options.lineWidth;

var data = '\t<svg width="'+ canvasWidth + '" height="'+ canvasHeight + '" xmlns="http://www.w3.org/2000/svg">\n\
var data = '\t<svg width="' + canvasWidth + '" height="' + canvasHeight + '" xmlns="http://www.w3.org/2000/svg">\n\
<defs>\n\
<pattern id="horizontalLines" width="' + increment + '" height="' + increment + '" patternUnits="userSpaceOnUse">\n\
<path d="M ' + increment + ' 0 L 0 0 0 ' + 0 + '" fill="none" stroke="' + options.gridColor + '" stroke-width="' + options.lineWidth + '" />\n\
Expand All @@ -52,37 +52,38 @@ module.exports = function (opts, cy, debounce) {
<path d="M ' + 0 + ' 0 L 0 0 0 ' + increment + '" fill="none" stroke="' + options.gridColor + '" stroke-width="' + options.lineWidth + '" />\n\
</pattern>\n\
</defs>\n\
<rect width="100%" height="100%" fill="' + options.gridBackgroundColor + '" />\n\
<rect width="100%" height="100%" fill="url(#horizontalLines)" transform="translate('+ 0 + ', ' + initialValueY + ')" />\n\
<rect width="100%" height="100%" fill="url(#verticalLines)" transform="translate('+ initialValueX + ', ' + 0 + ')" />\n\
</svg>\n';

var img = new Image();
data = encodeURIComponent(data);

img.onload = function () {
clearDrawing();
ctx.drawImage(img, 0, 0);
};

img.src = "data:image/svg+xml," + data;
};
var clearDrawing = function() {

var clearDrawing = function () {
var width = cy.width();
var height = cy.height();

ctx.clearRect( 0, 0, width, height );
ctx.clearRect(0, 0, width, height);
};

var resizeCanvas = debounce(function() {
var resizeCanvas = debounce(function () {
$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() {
setTimeout(function () {
$canvas.height = cy.height();
$canvas.width = cy.width();

Expand All @@ -91,7 +92,7 @@ module.exports = function (opts, cy, debounce) {
$canvas.style.top = -(canvasBb.top - containerBb.top);
$canvas.style.left = -(canvasBb.left - containerBb.left);
drawGrid();
}, 0 );
}, 0);

}, 250);

Expand Down
26 changes: 14 additions & 12 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
;(function(){ 'use strict';
; (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");

// flag that indicates if extension api functions are registed to cytoscape
Expand Down Expand Up @@ -32,7 +33,8 @@
zoomDash: true, // Determines whether the size of the dashes should change when the drawing is zoomed in and out if grid is drawn.
panGrid: false, // Determines whether the grid should move then the user moves the graph if grid is drawn.
gridStackOrder: -1, // Namely z-index
gridColor: '#dedede', // Color of grid lines
gridBackgroundColor: '#fff', // Color for grid background
gridColor: "#dedede", // color for grid lines
lineWidth: 1.0, // Width of grid lines
guidelinesStackOrder: 4, // z-index of guidelines
guidelinesTolerance: 2.00, // Tolerance distance for rendered positions of nodes' interaction.
Expand Down Expand Up @@ -66,13 +68,13 @@

function getScratch(cy) {
if (!cy.scratch("_gridGuide")) {
cy.scratch("_gridGuide", { });
cy.scratch("_gridGuide", {});
}

return cy.scratch("_gridGuide");
}

cytoscape( 'core', 'gridGuide', function(opts){
cytoscape('core', 'gridGuide', function (opts) {
var cy = this;

// access the scratch pad for cy
Expand Down Expand Up @@ -114,22 +116,22 @@
}

return this; // chainability
} ) ;
});

};

if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
if (typeof module !== 'undefined' && module.exports) { // expose as a commonjs module
module.exports = register;
}

if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
define('cytoscape-grid-guide', function(){
if (typeof define !== 'undefined' && define.amd) { // expose as an amd/requirejs module
define('cytoscape-grid-guide', function () {
return register;
});
}

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);
}

})();