README
@scoped-elements/cytoscape
This is the cytoscape library packaged using the scoped custom elements registries pattern using @open-wc/scoped-elements.
Installation
npm i @scoped-elements/cytoscape
Usage
As an sub element in your own custom element
import { CytoscapeDagre } from '@scoped-elements/cytoscape';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
export class CustomElement extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return {
'cytoscape-dagre': CytoscapeDagre,
};
}
render() {
return html`
<cytoscape-dagre
style="width: 100px; height: 100px;"
.elements=${[
{
// node a
data: { id: 'a' },
},
{
// node b
data: { id: 'b' },
},
{
// edge ab
data: { id: 'ab', source: 'a', target: 'b' },
},
]}
.options=${{
autoungrabify: false,
}}
></cytoscape-dagre>
`;
}
}
As a globally defined custom element
import { CytoscapeDagre } from '@scoped-elements/markdown-renderer';
customElements.define('cytoscape-dagre', CytoscapeDagre);
Documentation for the elements
As this package is just a re-export, you can find the documentation for cytoscape here.