cytoscape-css-variables

Add CSS Variable functionality to Cytoscape graphs

🎨 Example

📦 Install

Download the library:

• via npm: npm install cytoscape-css-variables,
• via unpkg: https://unpkg.com/cytoscape-css-variables/dist/cytoscape-css-variables.js

Import the library as appropriate for your project:

ES import:

1import cytoscape from 'cytoscape';
2import cssVars from 'cytoscape-css-variables';
3
4cytoscape.use( cssVars );

CommonJS require:

1let cytoscape = require('cytoscape');
2let cssVars = require('cytoscape-css-variables');
3
4cytoscape.use( cssVars ); // register extension

AMD:

1require(['cytoscape', 'cytoscape-css-variables'], function( cytoscape, cssVars ){
2  cssVars( cytoscape ); // register extension
3});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

🔥 API

1// core cytoscape instance
2let cy
3
4// cssVars extension instance
5let css_vars
6
7// Can't call css_vars before it is initiated, so declaring the function here
8const getVar = (variable) => (css_vars ? css_vars.getVar(variable) : null)
9
10cy = cytoscape({
11  container: document.getElementById('cy'),
12  style: [
13    {
14      selector: 'node',
15      style: {
16        // Use getVar() with the css variable name to use it
17        // - this can be used for more than just colors
18        // - getVar() here is a local function, NOT the extension function
19        'background-color': () => getVar('--theme-primary'),
20      },
21    },
22  ],
23  // your array elements go here
24  elements: [],
25})
26
27// cssVars takes two (optional) values,
28// initialVars object and the domEl to assign the vars to/from
29cy.cssVars({
30  initialVars: {
31    '--theme-primary': 'rgb(245, 204, 0)',
32    '--theme-secondary': 'rgb(0, 8, 20)',
33    '--theme-tertiary': 'rgb(234,84,85)',
34    '--cy-node-size': 30,
35  },
36  domEl: document.body,
37})
38
39// no updates will be made until update() is called (even on init)
40// this allows you to bulk change css vars but only run one update
41// NOTE: this will need to be run after any set of set/get/remove functions
42css_vars.update()
43
44// assigns a value to a variable
45css_vars.setVar('--theme-primary', 'rgb(245, 204, 0)')
46
47// removes a variable and its value by the variable name
48css_vars.removeVar()
49
50// returns an object of css variables and their values
51// will match the initialVars object to be passed in on init
52css_vars.getVars()
53
54// bulk add variables
55// will match the initialVars object to be passed in on init
56css_vars.addVars()
57
58// removes all variables and their values
59css_vars.resetVars()
60
61// sets the current active DOM element
62css_vars.setDomEl()
63

📢 Publishing

Make sure you have np installed

1. Commit changes to Github
2. Run yarn publish
3. Profit 💰