Most likely, an application would use FlowChartX to enable users to interactively create diagrams, flowcharts and other kinds of presentation documents. A user composes or edits a diagram by drawing its items on the FlowChartX document area. With the help of a mouse or other pointing device, users create boxes, tables and arrows, possibly connecting them in complex hierarchies, graphs, trees or other structures they might need.

Creating new items

A new item is created by pressing a mouse button and dragging. While a user draws with the mouse, the view of the control is updated to show what the new item would look like at the pointer location. If the operation cannot be completed at current mouse position, the cursor changes to a crossed out circle. When the user releases the button, the item is created. Arrows can be created only between two nodes. Drawing of zero-size boxes is not permitted.

Modifying items

A user modifies an item by dragging its selection handles. The ModificationStart property specifies when these handles appear. The first option, msAutoHandles, makes the handles appear when the mouse hovers over an item; modification of the item can start immediately by pointing it and dragging a handle. The second option is msSelectedOnly: in order to be modified, an item should first be selected. Selection handles appear around the item to indicate that now it can be moved or resized. Their number and functionality depends on the item type and the value of item's SelStyle property. It is possible to implement own drawing and hit-testing of selection handles by assigning sstCustom to SelStyle and handling the DrawSelHandles and HitTestSelHandles events.

Modifying a box

Usually boxes provide 9 handles. If the one at the center is dragged, the box moves. Four handles at the corners resize the box by moving the two sides adjacent to the corresponding corner. Handles placed at the center of the four sides resize in horizontal or vertical directions only. Each handle can be enabled or disabled by setting or clearing the respective bit in MnpHandlesMask.

Modifying an arrow

Variety and behavior of arrow manipulation handles depend on arrow's Style and number of Segments. Control-points stay at both ends of each segment that constitutes an arrow. FlowChartX offers three arrow styles. Following sections discuss how to modify each of them.

• The first style called asPolyline defines arrows, which consist of numerous straight segments, drawn between control-points. There are no restrictions as to number of segments. Dragging a control-point modifies each segment adjacent to the point. If the ArrowsSplittable property is enabled, users are allowed to insert new control points or to remove existing ones. Inserting a control point is done by pressing the left mouse button over a segment and dragging. The new point appears at the mouse location and splits the pointed segment in two.
• If arrow's style is set to asBezier, each segment has 4 manipulation handles that define a curve. Each curve goes through the end-points, which are shaped as circles. Bend of the curve is defined by the middle two points shaped as rectangles. If a user drags an end-point modification handle, the adjacent control points will be moved with same translation vector as that of the end-point. If a bend control point is dragged, the symmetric control point of the neighboring curve is also moved to assure the two stay on the same line with the end-point and on the same distance from it.
• asPerpendicular arrows consist of straight horizontal and vertical segments, each one orthogonal to its neighbors. If a control-point is dragged, the segments adjacent to it are moved and resized preserving their orthogonal orientation to each other. If the ArrowsSplittable property is enabled, users are allowed to insert new control points to asPerpendicular arrows or remove existing ones. The orientation of the arrow segments can be changed if PrpStartOrientation is set to soAuto.

Modifying a table

The default table modification handles are drawn as dotted lines over its borders. Dragging table's caption areas moves it. Dragging any table's side or corner resizes it.

Selecting items

Multiple items are selected by dragging while CTRL key is down. Selection can also be toggled with CTRL + clicking an item. A rectangle appears around selected items, allowing a user to move all of them at once.

Scrolling and panning

The ShowScrollers method displays scrollbars, which can be used by a user to scroll the diagram's drawing area. Pressing the left mouse button and dragging while the ALT key is down pans the diagram view. Panning could be done also with the middle mouse button, as set in MiddleButtonAction.

Interpreting users actions

Mouse operations can be interpreted in different ways depending on the value of the Behavior property. It defines if for example dragging the mouse creates a box or selects existing items. Check the property description for more information.