Support change background

[kubitre]

Hello! I want to upgrade your wonderful library so that it allows you to change the background. just pass the background setting (color)(change naming, this color is GridLinesColor):

cytoscape.js-grid-guide/src/index.js

Line 35 in 296adb1

gridColor: '#dedede', // Color of grid lines

Change as:

gridColor: '#fff', // Color of grid background
gridLinesColor: '#dedede' // Color of grid lines

, and after need add in svg rendering

cytoscape.js-grid-guide/src/draw_grid.js

Lines 55 to 56 in 296adb1

	<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\

following code:

<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.gridLinesColor + '" stroke-width="' + options.lineWidth + '" />\n\
                </pattern>\n\
                <pattern id="verticalLines" width="' + increment + '" height="' + increment + '" patternUnits="userSpaceOnUse">\n\
                    <path d="M ' + 0 + ' 0 L 0 0 0 ' + increment + '" fill="none" stroke="' + options.gridLinesColor + '" stroke-width="' + options.lineWidth + '" />\n\
                </pattern>\n\
            </defs>\n\
<rect width="100%" height="100%"  fill="' + options.gridColor + '" />\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\

This result i showed on attached image:

[kubitre]

@ugurdogrusoz

[kubitre]

@kinimesi @royludo @metincansiper please, asnwer, this is feature

[ugurdogrusoz]

@kubitre Feel free to do a PR to the unstable branch please

[kinimesi]

@kubitre why don't you just set the background color of cytoscape div?

[kubitre]

@kinimesi it seems that this option is a crutch =) The point is not to do it well for me, but to everyone who possibly uses this lib. If you change the background through the configuration, besides, this is not a super global change, backward compatible, I see no reason not to support it

[kubitre]

@ugurdogrusoz check my pr please

[kinimesi]

@kubitre I'm sorry, but I think it's redundant to have such an option in this extension while the same feature can be achieved by just setting the CSS background color for Cytoscape div

#cy {
  background: #000;
}

Also the default fill option must be none so that it doesn't overlay the Cytoscape canvas in case someone set its background to a different color.

[ugurdogrusoz]

I think @kinimesi is right.

[kubitre]

Ok, but this not work

[kubitre]

all lines are colored as background color of this div

[kubitre]

this work if i change alpha level to 0.9, but If you have to bother like that, then this is some kind of game

[kubitre]

[kubitre]

but if i change grid lines color to white for example, i get full fill color as background color of div

[kubitre]

ok, this problem i also solve, but the solution is not obvious, the parameter would solve it much better, let me make it so that if the user does not set anything, then the parameter will be substituted as none, as you wrote, then it will just be more obvious to everyone, and there will be no extra z-index manipulation to do

I Solve this by change Z-index at the div to 0, but after i get small artifacts on grid lines on size lines small then 2

[canbax]

@kubitre how do those rectangular white dots appear?

I agree with @kinimesi. The background color of your canvas is not related to this extension. By using CSS, you can set the background color of your canvas. If you set a background color, z-index should also be set. You can play with gridColor option for different colored grid lines.