@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.6.0] - 2020-7-23

Added

• Added ResizeManager that allows node resizing via api and drag and drop
• Added 'noderesize' event fired when resizing a node with the resize manager
• Added 'svginitialized' event when the grapheditor initializes a new svg
• Added methods getSVG, getGraphGroup, getNodesGroup, getEdgesGroup, getEdgeSelection and getDraggedEdgeSelection to grapheditor
• Added utility methods removeAllChildNodes and copyTemplateSelectionIntoNode n util to help working with static templates
• Added public updateEdgeGroupClasses to only update the classes of edges

Fixed

• Fixed removeEdge not working with string ids
• Fixed cancelling 'edgeremove' event leaving the original edge with the ghost class until completeRender was called
• Potentially fixed removing edge throwing an error when the edge is removed from the object cache