Skip to content

Curved Connectors

ZZzzaaKK edited this page Jun 8, 2023 · 3 revisions

Showcase

Curved Connectors

Functional Description

This feature allows a user to display relations of an element by clicking on it. In Getaviz, connectors between elements were traditionally drawn as straight lines. With this feature, they can also be drawn as curved instead. This is meant to increase the clarity of the visualization.

Technical Description

A new file ui/scripts/Relation/RelationCurvedConnectionHelper.js defines a function object named createCurvedRelationConnectionHelper. This function object takes a controllerConfig as input and contains all necessary logic for drawing curved connectors. Based on configuration, either straight or curved connectors will be created in the activate() function in ui/scripts/Relation/RelationController.js.

To react to user clicks, a new selected event has been introduced. A new controller CanvasSelectController.js publishes this new event based on user input.

Configuration

The Curved Connectors feature can be enabled or disabled as part of the controllerConfig in a setup. It is enabled by default in the example setup ui/setups/relations.js.

Test Case

This feature can be tested using the relations setup under ui/setups/relations.js and the example model under ui/model/example.

http://127.0.0.1:8080/ui/?setup=relations&model=example

Clone this wiki locally