@ustutt/grapheditor-webcomponent

Grapheditor Webcomponent

This repository contains the grapheditor component developed for the mico project.

The grapheditor is a standalone webcomponent to realize rich graph editors. It supports templates for nodes, drag and drop, styling with css classes, dynamic node content, edge markers and more. For a full feature list please consult the documentation on redthedocs.

Using the library

There is a Quickstart available in the documentation and also a Demo HTML for experimentation.

The library is packaged in three different formats on npm.

Browsercompatibility: The library uses Webcomponents, slots, ResizeObserver and shadow dom. It should work on current Chrome and Firefox browsers.

Documentation

The full documentation is available on READTHEDOCS (stable). The documentation for the version in development can be found here: READTHEDOCS (latest)

---

Development

Running locally

# install
npm install

# start dev server
npm run start

The test.html file can be used as a playground to test the features of the grapheditor webcomponent. The file is served by npm run start on port 9009.

Compiling the documentation locally

npm install

cd docs
pipenv install
pipenv run doc

The compiled documentation can be found under docs/_build/html.

Publishing to npm

Before publishing to npm make sure to update the versions in the package.json and changelog and run npm install again.

npm run package-all
npm publish

Changelog

[0.3.1] - 2019-12-02

Known Issue: this version was compiled using typescript 3.7! The resulting .d.ts are only compatible with typescript versions >= 3.6. See typescript 3.7 release notes for more information.

Added

• Added 'backgroundclick' event
• Added api for node selection (selectNode, deselectNode, changeSelected and selected)

Fixed

• Fixed all possible classes in the classes attribute of the network-graph beeing applied to nodes/edges if setNodeClass/setEdgeClass was null
• Fixed marker for MarkerStart not beeing rotated 180° like the line attachement point
• Fixed removeEdge not working correctly with edges with explicit id