@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.