https://github.com/lukethacoder/cytoscape-css-variables
🎨 add CSS Variable functionality to cytoscape.js
https://github.com/lukethacoder/cytoscape-css-variables
css-variables cytoscapejs cytoscapejs-extension
Last synced: 3 months ago
JSON representation
🎨 add CSS Variable functionality to cytoscape.js
- Host: GitHub
- URL: https://github.com/lukethacoder/cytoscape-css-variables
- Owner: lukethacoder
- License: mit
- Created: 2020-09-28T23:10:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T18:26:31.000Z (8 months ago)
- Last Synced: 2024-10-29T20:33:36.850Z (8 months ago)
- Topics: css-variables, cytoscapejs, cytoscapejs-extension
- Language: TypeScript
- Homepage: https://cytoscape-css-variables.lukesecomb.digital
- Size: 720 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
cytoscape-css-variables
Add CSS Variable functionality to Cytoscape graphs
## 🎨 Example
[](https://cytoscape-css-variables.netlify.app/)
## 📦 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:
```js
import cytoscape from 'cytoscape';
import cssVars from 'cytoscape-css-variables';
cytoscape.use( cssVars );
```
CommonJS require:
```js
let cytoscape = require('cytoscape');
let cssVars = require('cytoscape-css-variables');
cytoscape.use( cssVars ); // register extension
```
AMD:
```js
require(['cytoscape', 'cytoscape-css-variables'], function( cytoscape, cssVars ){
cssVars( cytoscape ); // register extension
});
```
Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
## 🔥 API
```javascript
// core cytoscape instance
let cy
// cssVars extension instance
let css_vars
// Can't call css_vars before it is initiated, so declaring the function here
const getVar = (variable) => (css_vars ? css_vars.getVar(variable) : null)
cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
// Use getVar() with the css variable name to use it
// - this can be used for more than just colors
// - getVar() here is a local function, NOT the extension function
'background-color': () => getVar('--theme-primary'),
},
},
],
// your array elements go here
elements: [],
})
// cssVars takes two (optional) values,
// initialVars object and the domEl to assign the vars to/from
cy.cssVars({
initialVars: {
'--theme-primary': 'rgb(245, 204, 0)',
'--theme-secondary': 'rgb(0, 8, 20)',
'--theme-tertiary': 'rgb(234,84,85)',
'--cy-node-size': 30,
},
domEl: document.body,
})
// no updates will be made until update() is called (even on init)
// this allows you to bulk change css vars but only run one update
// NOTE: this will need to be run after any set of set/get/remove functions
css_vars.update()
// assigns a value to a variable
css_vars.setVar('--theme-primary', 'rgb(245, 204, 0)')
// removes a variable and its value by the variable name
css_vars.removeVar()
// returns an object of css variables and their values
// will match the initialVars object to be passed in on init
css_vars.getVars()
// bulk add variables
// will match the initialVars object to be passed in on init
css_vars.addVars()
// removes all variables and their values
css_vars.resetVars()
// sets the current active DOM element
css_vars.setDomEl()
```
## 📢 Publishing
> Make sure you have [np](https://github.com/sindresorhus/np) installed
1. Commit changes to Github
2. Run `yarn publish`
3. Profit 💰