Introduction

A connector is a symbolic representation of a relationship between objects. A connector connects two shapes.

All relationships between objects are not necessarily represented in a diagram; it depends on the purpose of the diagram and the tasks the user can do with it.

All relationships that are displayed in the diagram are not necessarily done with a connector: Shape containers give a description of the relationship with the shapes they contain.

In addition to the relationship, connectors can carry some content by text displayed near it or by the style of the connector (color, dotted line, thickness).

information

Disclaimer:

  • This guideline is aligned with the UX Consistency Product Standard for colors, theming, typography and iconography (Fiori 3 Quartz Light), which might not be implemented yet in the product on which you’re working.
  • For designers who work on modeling, this guideline describes how we want to unify modeling across our products. For developers of the Galilei library, this guideline acts as specifications for future developments.

What does this mean for you?

Anatomy

A connector is composed of a line with two extremities.

If the relationship is between three or more objects, it may mean that there are in fact more than one relationship or that there is an intermediate object that is in relation with the tree or more objects.

Line

The line links the two shapes participating to the relationship.

The line styles are straight (A), elbow (B), or curved (C).

When connected in elbow or curved style, each line extremity is orthogonal to the border of the shape.

Using horizontal or vertical strait lines rather than elbow lines makes the diagram simpler and easier to read. It depends in fact on the position of the shapes but also of the position of ports or the connecting points used.

Align the shapes by using auto-layout whenever possible to avoid elbows.

When displaying a connector, it is possible to cheat and display a straight line instead of a double elbow when the non-alignment is less than 5px [value to be checked and reviewed] at zoom scale 100% and when the connection is through a connecting point or the port dimensions allows it.

The line doesn’t carry any information about the symmetry or non-symmetry of the relationship.

Extremities

The extremities of a connector indicate the direction of the relationship. When the relationship is symmetric, the two extremities are similar. When the relationship has a direction, the two extremities are different and one of the must give the direction.

Label or Icon

Labels or icons can be added to the connector to add detailed information on the relationship:

Positions are text alignment are specified here

Resize Handles

The resize handles of connectors are the same as the ones used for shapes.

The normal state (A) and the selected state (B) are used.

The handle is centered at the extremity of the connector (E)

Resize handles are displayed when the connector is selected (C & D) but only if the connector extremity can be moved to be connected on another port.

Badges

Badges are displayed on the line. The logic of displaying different types of badges on connectors follows, with some constraints, the logic used for positioning badges on shapes.

Badges are not placed on the extremity to keep the extremity visible and selectable but also to avoid confusion with a badge over the shape.

States

Pointing Device States

: The pointing device, usually a mouse, is over the connector. This state is used to give a feedback to the user before selecting, dragging or calling the right click menu on the object.

: This is the default state.

Keyboard Device States

: The keyboard focus is put on the shape with the navigation keys. In that state a Space Key will select or unselect it.

: This is the default state.

Interaction States

: This is the default state.

: The connector is selected. The associated relationship object is a member of the “Currently Selected Objects” set (CSO). Components that are outside of the diagram reacts to this CSO. For example, the content of the properties side panel depends on the shape that is selected in the diagram.

: The relationship does not exist but the connector is positioned at the port location, connected to it on one extremity and with an handle on the other extremity.

: From the NotCreated state, the extremity of the connector is dragged to be connected to another shape.

: The user is dragging one of the extremity handle of an existing connector to connect it to another shape or a different port or a different connecting point of the same shape. In that state, the relationship of the model is not changed until the extremity has been dropped.

: The connector, having no extremity connected, is moving with the mouse, over the diagram before the user position the first extremity. (feedback TBD)

: The default display (pointing device state is not "Hover" and interaction state is "None")

: Represents two cases:

: Interaction state is "Selected" and connector can be resized/disconnected

: Interaction state is "NotCreated", with the shape pre-connected to the start extremity (D) or the end extremity (E)

Only one handle is displayed. The connector is under that handle between the border of the shape and the center on the handle that sticks to it.

: Interaction state is "Creating" or "Reconnecting" with the start extremity (F) or the end extremity (G)

Behavior and Interactions

Creating a Connector

A connector can be created only:

The possible ways to create a connector are:

<div> <div>Interaction</div> <div>Command Result</div> </div> <div> <div>Selecting or dragging a connector icon of the contextual menu of a shape or a contextual button of the shape</div> <div>A connector will be created between the central connecting point of the first shape and the selected connecting point of the target shape.</div> </div> <div> <div>Selecting or dragging a port to another port</div> <div>A connector will be created between the two ports.</div> </div> <div> <div>Dragging a sub-element from one already selected shape and dropping it on a sub-element of another shape when these sub-elements participate to the definition of the link</div> <div>A connector will be created between the two shapes and, in some states, the two sub-elements that have been linked will be selected too.</div> </div>

Once created, the connector can stay selected in order to edit its properties (if any) in the properties pane.

If one of the connected shape was previously selected, this shape can stay selected if there is no need to edit connectors properties.

Dragging a Shape Port to Another Shape Port

This is one way to create a connector.

: The port is in reality a connector with the end extremity handle that sticks at the border of the shape.

: When hover, the extremity handle reacts.

: During the drag of the handle, the end of the connector follows the handle, the start of the connector does not have any handle and the collector is displayed in the selected state.

: When hover the shape to connect the handle extremity snaps to the nearest possible port location.

: When the user ends the drag, the shape remains selected if the workflow needs to edit relationship parameters (E) or not (F). In both cases, the shape remains in the NotHover state until the mouse is moved after the ends of the drag.

Selecting

Connectors are selected when the user clicks anywhere on it.

Ctrl-Click adds or removes the connector in the currently selected objects set.

Moving

A connector cannot be moved: the position of its extremities and its layout depends on the position of the shapes and how it has been connected.

Changing Line Style

The style of the connector line gives the information of the type of relationship.

Even if most of the diagrams needs only one type of relationship to link objects together, some of them need to represent each type of relationship by using connectors of a different style.

To change the style the user can:

Changing Type

The connector can have several types. These types are for example Straight/Elbow/Curved.

The access to this change is in the context menu of the connector. This menu contains all items in the sub-menu “Connector Types”.

The connector type used by default when creating a new connector is the one that has been chosen at the last type change in one of the connectors of the diagram.

When creating the first connector of a diagram, a default type can be defined for each type of diagram. If not, it is an elbow.

Don’t mix up the type and the style.

Do provide the same list of connector types for all connectors’ styles within a diagram.

Reshaping

Some portions of the connectors (A) can be moved to change the visual path (B) between the two extremities.

The reshaping is done by moving one handle of the connector or moving a portion of the connector if no handle has been defined for that connector.

Editing Connector Properties

The edition of the properties is not done in the diagram but in the properties panel that appears because the connector has been selected.

Deleting

Deleting connectors can delete the link in the model at the same time. The logic is similar to deleting shapes that can delete the object in the model at the same time.

Deleting a connector will never delete connected shapes.

Design System - Components - Shapes

Visual Core Wiki - Diagram (Fiori 3) - Connector

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.