Diagram Widget Interactive Behavioral Styles

In an interactive diagram there are many actions that can be taken on a diagram element: moving it, resizing it, editing its textual elements, selecting it (so that it can be used as an argument to other operations such as cut, copy, paste). The challenge is how to present these options to the author as the diagram is being worked on. This page provides a forum for discussing the interactive behavioral styles to be implemented in the Diagram widget.

Resize Handles

Experience has shown that it is less confusing when some capabilities only become enabled when the element is selected. For example, rather than always displaying the resize handles for an element (which can be visually confusing), the resize handles are only displayed when the element is selected (and when it is the only element selected). This is the proposed approach for the Diagram widget.

For a node, there will be eight resize handles: one at each corner and one at the mid-point of each side. Dragging these handles will resize the node.

For a link, these will be the end-points of the line and, if there are any breakpoints in the line, the breakpoints. Dragging the endpoint handles moves the endpoint and has additional behavior as well. If the endpoint is connected to an element, there is additional behavior. Connections are made to graphical regions on the target (which we will refer to as pads). For example, the default pad for a node is a rectangle on the perimeter of the node. If the endpoint is dragged along this pad, the drag simply repositions the endpoint to the new location on the pad. If it is moved away from the pad and over another pad, this causes the endpoint to be attached to the new pad. If the endpoint is dragged into any other area (i.e. not over another pad), it will snap back to its original location. Dragging breakpoints in the path simply repositions those breakpoints.

Selection

Another interactive operation is the selection itself. While one or more elements may be selected programmatically by the application using the Diagram widget, interactive selection is also important. The proposal is that a left mouse click anywhere on a diagram element will select that element (and only that element). Implicitly this de-selects all other elements. The fact that an element is selected is indicated by using the highlight color on the graphical components of the element. For a node, this is the graphic (which defaults to a box) that surrounds the node contents. For a link, these are the graphic line elements and decorations on the line.

Extending a selection is accomplished by using the key in conjunction with the left mouse button. The behavior is that <LEFT_MOUSE> on an element toggles the membership of the element in the selection set: if it is presently a member, it is removed from the selection set; if it is not a member it is removed.