@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

# install is needed to run typedoc later as part of the sphix build
npm install

cd docs
poetry install
poetry run make html

# debug docs build
poetry run make html SPHINXOPTS="-v"

# list all reference keys of known to sphinx (only available after building the documentation!)
poetry run python -m sphinx.ext.intersphinx _build/html/objects.inv

# update requirements.txt from poetry dependencies
poetry export --format requirements.txt --output requirements.txt

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.7.0] - 2024-01-10

Added

• Added more fine grained options for controlling how the user can interact with the grapheditor
• "select" attribute to control the default selection behaviour (default: multiple; other: none, single)
• "node-click" attribute to control the default node click behaviour (default: select; other: none, link)
• "node-drag" attribute to control the default node drag behaviour (default: move; other: none, link)
• "edge-drag" attribute to control the default edge drag behaviour (default: link; other: none)
• "background-drag" attribute to control the default node drag behaviour (default: move; other: none, select, zoom, custom)
• "brushdrag" and "brush" events. Used when "background-drag" is set to select, zoom or custom
• Added flag in text components to mark them as draggable (defaults to true)
• Added padding parameter to zoomToBox to allow changing or removing the added padding
• All relevant interfaces and functions are now (re)exported at top level

Deprecated

• Deprecated "mode" attribute on the network-graph html node. See the list of added attributes that allow more fine grained control
• Passing JSON via HTML attributes with nonstandard ' as quote is deprecated.
  Deprecated: nodes="[{'id': 1, 'x': 0, 'y': 0}]" (also edges and classes)
  Replace with: nodes='[{"id": 1, "x": 0, "y": 0}]'

Incompatible changes

• Updated to TypeScript 4.6 compiler
• Updated D3 dependecies to version 7. Please carfeully read about the changes in version 6 and 7 (changelog) if your code uses D3 functions.
• Removed the style slot in the default template as it did not work to isolate style anyway
• Removed deprecated rotation property of edge markers
• Partially removed support for deprecated "mode" attribute on the network-graph html node
• Removed event, getter and setter associated with the "mode" attribute
• Removed deprecated style slot
• Wrapping text now generates less data-* attributes in the dom and is faster when the text does not need to be wrapped again
• Wrapping text now re-wraps text when (some) style attributes change
• Node and edge IDs now use a data-id attribute without any prefixes. CSS selectors relying on matching nodes by ID need to be changed (use getSingleNodeSelection or getSingleEdgeSelection if possible)