Introduction

Creating shapes is an important activity of design tasks within the diagram.

You can create shapes in the following ways:

Multiple possible accesses to start the command, inside or outside the diagram
By clicks or by drag and drop
Selection contexts: the set of Currently Selected Objects (CSO) may or may not be empty

The creation of shapes is a specific command where the user experiments two UI worlds:

The form/dialog world where components have a fixed font-driven size (menus, fields, buttons, toolbars), structured in a finite layout, with all elements on screen.
The diagram world where elements can be reshaped, zoomed, moved in an infinite canvas with only a part of it visible though a “viewport”.

The purpose of this guideline is to list the different ways of interacting during the creation of a shape and to define them in details.

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?

Creating Shapes

Each shape type has its own specific command.

All creation commands, like any other commands applicable on the diagram, can be started through one or several of these components:

The contextual toolbar, displayed only when a shape is selected
The context menu, called with a right-click on the canvas or a selected shape
The main toolbar
A diagram toolbar, a toolbar above the diagram, used in some floorplans (see details guideline Diagrams Component, section: Usage)
The diagram palette, the contextual toolbar of the canvas (under specification)

A shape creation command is usually represented by an icon button and eventually by an icon with a text in a menu, never by a text only.

information

The Contextual Toolbar should be implemented so that it can be displayed indistinctly horizontally or vertically. For readability purposes, the Contextual Toolbar is mainly displayed horizontally in the illustrations below.

Note: In this document, we will use the horizontal display for practical display reasons only. All behaviors are the same with a vertical display.

The contextual toolbar is visible when a shape is selected (SA or SB) and hidden when the shape is not selected (A).

The position of the contextual toolbar can be horizontal at the top left of the shape (SA) or vertical on the right center (SB).

Icons in the contextual toolbar can be clicked (SC) or dragged (SG-SJ) and provide two ways to position the created shape: automatically or manually.

Automatic Positioning of the New Shape

When the user clicks on the icon (step SE), the new shape is automatically created:

The new shape is linked to the previously selected shape.
The new shape position depends on the orientation of the diagram (on the right or on the bottom). The shape can also be inserted between two shapes.
The new shape is selected and the previous one is no longer selected (SF).

Note: If the user presses the mouse button, move the mouse within the button area and then releases it, it is still considered as a click gesture. After the press, the click gesture can be interrupted by using the Esc key.

Manual Positioning of the New Shape

When the user anticipates the position of the new shape that would be set automatically (SF) and wants a different one (SL), he can decide to position the shape directly instead of creating one using automatic positioning and then moving it at another position.

After pressing the mouse button (SI), the user leaves the area of the button (A) while having the mouse button pressed. At that moment (SJ):

The selected shape is visually deselected, and the contextual toolbar disappears. Note that the currently selected objects (CSO) is not modified until the mouse is released. In other terms, the other areas depending on the CSO, like a properties panel, will not be updated until the interaction is finished, and a new shape selected (SL).
The new shape appears in ghost style (B), centered under the mouse cursor.
The connector (C) is displayed in ghost style between the shape and the ghost.

During the drag (SK):

The shape follows the mouse cursor, centered on it.
The connector path is modified to link the two shapes.

At the mouse release (SL):

The shape is positioned and selected.
The contextual toolbar appears (as it is always the case when an object is selected).
The connector style is normal.

As a consequence of the new selection, other areas’ content in the page depending on the CSO, for example the property panel, are updated.

The Esc key interrupts the command and restore the selection feedback on the initial shape.

Case of Multi-Selection

When several objects are selected, a specific contextual toolbar appears on top of the selection area (SM). This toolbar can contain two types of creation commands:

Creation of one shape linked to all selected shapes (SN)
Creation of new shapes for each selected shape (SP)

As in single selection, manual positioning is available by dragging the icon (SQ or SS) and then continuing dragging the ghost (SR or ST). When the created shape can be connected to all selected shapes (SQ), it follows the mouse cursor during the drag (SR). When one shape needs to be created per selected shape (SS), the nearest shape to the mouse pointer when the command started is taken as the reference (A). The dragged icon will be connected to it. All the other new ghosts (C) will be created with the same relative position to other selected shapes (B) and will be connected (D) in the same manner.

The context menu appears when the user right-clicks on the mouse. The standard behavior of the context menu in regard of the CSO is applied in the diagram:

When the user right-clicks on the canvas:

The previously selected shapes and connectors (if any) are deselected.
The context menu appears.

When the user right-clicks on a shape that was not selected:

The previously selected shapes and connectors (if any) are deselected.
The pointed shape or connector is selected.
The context menu appears (SB, SD).
The contextual toolbar does not appear.

When the user right-clicks on one shape that is already selected:

All selected shapes and connectors remain selected.
The contextual toolbar disappears.
The context menu appears.

When the canvas is pointed by the mouse while the contextual menu is called, i.e., when no shape nor connector has been pointed, the contextual menu concerns both the diagram as a whole (the assembly of shapes and connectors) and the diagram component. This contextual menu should contain the creation commands of shapes regrouped in a sub menu (B). These commands should create shapes without any connection to other shapes.

Once started, the command does not immediately create the shape at the position of the pointed location: the shape appears and remains under the mouse cursor as a ghost (SE). Once at the appropriate position, the user clicks to drop it (SD).

The Esc key interrupts the command during the move (SC), but does not restore the selection of objects that were selected before calling the context menu.

Note: If the diagram cannot get the mouse position (C) when the user clicks on the menu (B) - because no mouse position event has been sent to the diagram, the diagram needs to wait for a little move of the mouse (D) over the diagram to have an event and be able to display the ghost. Because it is not always the case - for example, the right-click (A) can start on the diagram and the click C can ends out of the diagram - the ghost will be displayed at the position (A) 0.5 seconds after the start of the command (click C) if by the meantime no mouse cursor position has been received.

When the context menu points on a single shape, the creation commands based of that selected shapes will have two different behaviors whether they create a new shape that is connected to the selected one or not.

Creating a Connected Shape

Once the command has been chosen in the context menu (SF), the new shape and the connector is automatically and positioned (SG). The position is against the selected shape. The new created shape becomes selected.

Note: The mechanism to manually drag the icon that is proposed with the contextual toolbar is not recommended in the case of the context menu. This for two reasons: No contextual menu has this kind of behavior and it is difficult to drag with the right button pressed.

Creating a Non-Connected Shape

Some commands can create shapes based on the selection without being connected to it.

In this case, there is no reason to position automatically the new shape against the existing one. The solution consists in keeping the shape under the mouse cursor as a ghost (SJ) since the command has been started (SI). Once at the appropriate position, the user clicks to drop it there (SK).

During the move (SI), the Esc key interrupts the command and the selected shape(s) when the content menu appeared remain selected.

Creating Shapes with Toolbars

These toolbars can be:

The main toolbar
The diagram toolbar: A specific toolbar above the diagram used in some floorplans

These toolbars have the following characteristics:

All creation commands are displayed. It allows to have an overview on all types of objects can be created.
Creation commands are displayed as icons or as icon+text in menus.
Menus and submenus allow to structure the offering and also to support a large number of types.
The toolbar is displayed outside the diagram.

Prefer to use menu than icons because:

Menus contain text that explicitly the names of the object’s types.
The text after the icon allows the user to quickly learn the symbolism.
Even if the interactivity is lower than a direct access to the icon in the toolbar, it’s not a problem because the high interactivity level request by the user will be solved by using the contextual toolbar or the palette or eventually keyboard shortcuts.

Starting Position of the Ghost

When a shape creation command is started, the ghost must be shown. Seeing this ghost, the user will understand, while he is moving the mouse, that he needs to position it in the diagram.

Depending on the technology used, the diagram may or may not be notified of the position of the mouse cursor when the command has been started until the moment the mouse cursor enters in the diagram. So, the challenge is to find out where the ghost needs to be displayed while the mouse is outside the diagram.

Case 1: the diagram is notified when the mouse cursor is outside the diagram

In this case (SA), when the user clicks on the command icon, the diagram knows the position of the mouse cursor (A). The center of the shape (C) can be calculated and positioned at the intersection of the border of the diagram and the segment between the mouse position (A) and the center of the diagram’s viewport (B).

When the mouse moves outside the diagram (SB), the center (F) is recalculated according to the new position (E).

When the pointer enters in the diagram (SC), the shape center is exactly under the mouse (G)

Then the shape moves inside the diagram (SD), the shape seamlessly follows the mouse, until the user clicks to position the shape (SE). Once created, the shape is selected.

Case 2: the diagram cannot be notified when the cursor is outside

In this case, when the user clicks on the command icon (SG), the diagram doesn’t know where this button is positioned. We need to approximate the behavior and find a trick: We will use the last position know (I) of the of the mouse cursor when the user left the diagram (SF).

If this position exists and if this position is on the top border of the diagram (I), then the shape will be positioned at that position (I) otherwise it will be placed at the middle of the top border of the diagram viewport.

When the mouse enters in the diagram (SH), the shape previously positioned in (I) jumps (animation of 0.5 second) to (J). And after that, the shape follows the cursor (SI) until the user clicks to position it (SJ).

When the command is accessed through a menu (SK), there is the chance that the user clicks on an item and the pointer is over the diagram (K). In this case, to avoid displaying an animation between the point (I) and the point of the first position notification (L), we will adopt the same rule as the one used for the context menu. We will use a 0.2 second delay before displaying the ghost at the position (I) if no notification has been received to position in (L). Then the use moves the mouse to position the object at the right place (SN).

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.

Introduction