@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.1] - 2020-11-08

Added

• Added svg-template attribute to specify a css selector of a html template containing the svg to load
• Added isolation of grapheditor styles when loading the svg from an html template
• Added ability to vertically center wrapped text (with data-text-center-y attribute)
• Added data-wrap-lines attribute for wrapping text in lines with different max widths
• Added ability to wrap text into more complex shapes (e.g. circles) with the data-wrap-lines attribute

Refactored

• Refactored text wrapping code to cause less dom updates

Fixed

• Text wrapping only worked if the text tag also had a text css class. Now all text tags will be wrapped automatically.