18 Editing graphics

The document model which underlies Thot allows graphics and text to be handled with the same tools. Strictly speaking there is no graphical editor in Thot although graphics can be edited and managed within documents. To do this, you just have to define structure schemas (see section 1) representing the graphics to be handled and the corresponding presentation schemas (see section 8). Some schemas are available in the Thot standard environment. They enable the user to manage structured graphics and trees. The following two sections explain how to use these schemas. By developing other schemas (see section 24), you can edit other types of graphics.

18.1 Structured graphics

Structured graphics are defined by the Draw2 structure schema. In this schema, the structure represents nested elements. Attributes specify the geometric relationships between elements such as centering, alignment, and so on. With this schema, the commands for changing the position or the dimension (Control-Click, see section 8.3.5) are very useful.

18.1.1 Example

The drawing of Figure 6 is constructed according to the Draw2 schema. In this drawing, you can modify the height of the ``Structure schema'' box by dragging the mouse while holding down the Control key and the left mouse button. This procedure causes the text in the box to be centered automatically and the ``Presentation schema'' box to be moved vertically to remain centered. Both arrows are also adjusted as required. You can also move (using the Control key and the left mouse button) the ``Thot Editor'' box, which causes both the text in the box and the arrows to be moved as required.

Figure 6 - A structured graphic

18.1.2 Creating graphical elements

With the Draw2 schema, a drawing is composed of a set of individual Objects created successively. An Object is created in the same way as any other element in Thot with the ``Insert'' command from the ``Edit'' menu, with the right mouse button or with the Return key (see section 4.3). As soon as it is created, an Object must be positioned and sized with the mouse: providing no other button is pressed, the ``ghost'' object follows the movements of the mouse. When the object is located at the desired position, hold down the left mouse button while dragging the mouse in order to resize the object as required. As soon as you release the button, the object is frozen but it can be moved and resized with Control-Click (see section 8.3.5).

The type of an Object can be chosen through a menu which is displayed when an Object is created. An Object can be:

• a basic Graphic_object: a rectangle, a circle, an ellipse, a curved or broken line, etc. When you create such an object, a palette is displayed: it allows you to choose the shape of the object. This palette also appears as soon as a basic graphical object is selected. It allows the shape of this object to be changed at any time. Curved and broken lines are dealt with in section 18.1.6.
• a Text_object: a character string or a sequence of character and elements called units. Units can be references to other document elements (sections, notes, figures, etc.) according to the context in which the drawing is placed. This allows references to be included within the text that appears in a drawing. The Alignment attribute applied to a Text_object determines the position of text lines in the box.
• a Picture_object: a picture such as those presented in section 17.
• a Box: a text (type Label) with a rectangular frame. The Aspect attribute applied to the Box element allows you to choose the style of the frame: a simple transparent box, a filled box or a filled box with shadow. Filled boxes, with shadow or not, can be colored (see section 8.3.3). The position of the text in the frame is determined by the Label_position attribute applied to the Label element.
• a Group: a set of Objects which are handled together. You can select the Group by clicking on it once (the mouse must be located in the rectangle that encompasses Objects of the Group and not in one of these Objects). You can move all Objects of the Group, change their style or color with a single command, copy or cut them, and so on. When a Group is created, the type of the first Object of the Group is immediately asked by the editor and created in the same way as any other Object. The position of this first Object (in fact the position of its upper left corner) determines the position of the Group. Objects of the Group are positioned relative to the upper left corner of the Group element (see section 18.1.4). Once they have been created, they can be moved within the Group but without exceeding its left or upper edge. To avoid this constraint, you can move the whole Group.
• an Other: an object built according to another structure schema (a table or a tree for instance). When you create this Object, you choose its type among the available structure schemas (see section 16).
• a link, i.e. a basic graphical element like a Graphic_object but whose opposite corner of the circumscribed rectangle are linked to two different Objects. Any move of either of two Objects distorts the link. When a link is created, the editor requires that you click successively on both Objects which specify the origin and the end of the link. A grey rectangle then appears at the position of the link. Choose the link shape in the palette of basic graphical elements. Once you have created it, you can change one or the other (or both) Objects to which the link is attached. To do this, select the link element (not the basic graphic, but its enclosing box) and modify one of the two attributes Org_linkX or End_linkX. For all types of available links, the origin is at the center of the Object designated by the Org_linkX attribute (the first designated when the link is created). The position of the end of the link relating to the object designated by the End_linkX attribute depends on the type of the link:
  • Link_to_center: the link reaches the center of the second object.
  • Link_to_bottom: the link reaches the middle of the lower side of the second object.
  • Link_to_top: the link reaches the middle of the upper side of the second object.
  • Link_to_left: the link reaches the middle of the left side of the second object.
  • Link_to_right: the link reaches the middle of the right side of the second object.

18.1.3 Element dimensions

Attributes Height and Width control the dimensions of Objects. There are two methods for modifying the value of these attributes:

• With the mouse: Control-click (see section 8.3.5) automatically updates the attributes Height and Width.
• With the ``Attributes'' menu (see section 6.2) which allows you to display and to modify the numeric value (expressed in points) of the dimensions of the selected Object. In particular, this allows you to make sure that several Objects have exactly the same dimensions.

18.1.4 Relative positions of elements

When they are created, Objects are positioned with the mouse. You can then move them by using Control-click (see section 8.3.5). Vert_position and Horiz_position attributes allow you to display and to modify the element position according to the horizontal and vertical axes. These attributes indicate the distance, expressed in points, between the upper left corner of the Objectand the upper left corner of the enclosing element (the Draw2 element or the Group). They are automatically updated when you move the Object with the mouse.

The positions of different Objects are independent of each other (except for Links and Objects of the same Group). However, the following attributes enable the user to express the positional dependencies between Objects:

• Attributes Top_aligned, Horiz_centered and Bottom_aligned allow the user to modify the vertical position of the element by aligning it relative to another element. Just click with the left mouse button to indicate the latter element.
• Attributes Left_aligned, Vert_centered and Right_aligned allow the user to modify the horizontal position of the element by aligning it relative to another element. Just click with the left mouse button to indicate the latter element.

Attributes that set the vertical position are mutually exclusive. The same is true for attributes that fix the horizontal position of graphical elements. The ``Attributes'' menu displays the attributes which apply to each element by marking them with a star.

When the user requires a graphical element to be aligned with another graphical element (designated once the attribute has been chosen), the alignment is immediately applied and if the latter element is moved, the aligned element also moves. Once the element has been aligned (see section 8.3.5), the user can move the aligned element forward by moving the reference element. This shift is then stored when the reference element is moved. The shift is lost when elements are aligned by the user once again.

18.1.5 Overlays

The Depth attribute can be applied to any Object. It allows you to avoid the problem posed by overlapping Objects: it determines the depth at which graphical elements are displayed. The depth 0 corresponds to the foreground of the screen. Higher values (1, 2, 3, etc.) correspond to deeper positions. The depth assigned to elements are taken into account by display and selection. Elements with the smallest value of depth can hide (if these elements have an opaque background) the elements whose value is higher.

The Aspect attribute allows Boxes to have a frame with background and shadow. The Label, the frame and the shadow have different depths so that overlay produces the desired result. Another Object can slip between the Label and the frame or between the frame and the shadow: it depends on its Depth attribute. To ensure that this Object is placed behind the shadow, in case of overlay, it must have a Depth value higher at least by 3 than the Box.

18.1.6 Entering and modifying curves and broken lines

Links and Graphic_objects can be straight or curved, opened or closed, terminated or not by arrows: the palette of basic graphical elements allows these forms to be selected (last twelve cells of the palette). These lines are determined by their control points.

All changes made on the graphical aspect and on color (see sections 8.3.2 and 8.3.3) can be applied to these lines, but some specific operations can be performed only on these lines:

Creating a line

When a line is created, the left mouse button allows you to choose the control points: each time you press this button you create a new control point. To quit the input mode of control points, click on the last point with the middle mouse button. If it is a closed line, the closing procedure occurs at this time.

Adding control points in a line

To add one or more control points to an existing line, select one of the existing control points by clicking on it with the left mouse button. To make the selection easier, display all control points in the line by clicking on the line with the left mouse button. Once a control point has been selected, switch to the control point creation mode by pressing the right mouse button (insertion button). You can then add new control points after the selected point in the same way as when creating a line (see above).

Removing a control point in a line

To remove a control point, select this point by clicking on it with the left mouse button. Use the Delete key or Control D to remove the control point.

Moving a control point in a line

To move a control point, click on it with the left mouse button while pressing the Control key on the keyboard. The point follows the mouse movements until the button is released.

Moving a line

To move a line as a whole, click with the left mouse button within the enclosing rectangle of the line while pressing the Control key. The line follows the mouse movements until the button is released. If the mouse is located on a control point when you start the operation, only this point will be moved (see above).

Distorting a line

You can distort a line by distorting its enclosing rectangle. To do this, just click with the middle mouse button inside the rectangle enclosing the line while pressing the Control key. The curve is distorted according to the mouse movements until you release the button.

18.2 Trees

The drawing in Figure 7 is a structured drawing but it is not built according to the Draw2 schema (see section 18.1); it uses a more specialized structure schema, i.e. the tree (the structure schema is called Tree).

• This is the root of the tree
  • This is the first child of the root
  • Second child of the root
    • First node at the third level
    • This is at the third level
  • Third child of the root [8]

Figure 7 - A tree

18.2.1 Logical structure of trees

A Tree element is composed of two elements: a root Node and a Descendants element. The Descendants element contains one or more Subtrees elements, each of them having the same structure as Tree. Thus, it is a recursive structure; for example, select one of the leaves of the tree and travel the structure with the Esc key.

Like a Text_object in a drawing, a Node contains a character string (TEXT) or a sequence of character strings and elements called Units which can be references to other elements of the document (sections, notes, figures, etc.). This allows references to be included within the text that appears in a tree, as in the third child of the root in Figure 7.

This structure is manipulated with the same commands as the rest of the document (see section 4).

18.2.2 Graphical aspect of trees

There are different ways to present the graphical appearance of the same tree. Just select the whole tree (for instance, click next to the root element) and modify one or more of the following attributes: Layout, Node_width or Node_frame.

The graphical organization of the tree varies according to the value of the Layout attribute:

• The Vertical_tree value makes the tree grow vertically towards the bottom (computer scientists place the roots of trees at the top and the leaves at the bottom, in contrast with nature).
• The Horizontal_tree value makes the tree grow horizontally from left to right.
• The Indented_list value presents the tree under the form of a list with an indentation for each hierarchical level.

The Node_width attribute allows the user to control the width of the tree nodes:

• The Fixed value applies the same width to all nodes. If the contents of the node cannot fit in this width, they are split into lines; thus, the node height can vary.
• The Variable value applies to each node the width of its content: each node contains a single line (this is particularly interesting when the tree is laid out horizontally).

When you use an indented list layout, you can remove this attribute: each node then uses the available width for the tree.

The Node_frame attribute allows you to control the presence and the aspect of the frame around the nodes. This attribute can be applied to the whole tree or to a Subtree. Different subtrees can then be displayed with nodes with different aspects.

You can also modify the graphical aspect of the nodes of a subtree by selecting the subtree and applying a command from the ``Presentation'' menu (see section 8).

The color palette (see section 8.3.3) allows you to set the background color of the nodes of a subtree or the color of text and lines.

A node or a subtree can be moved with the mouse (by holding down the Control key as explained in section 8.3.5). The extent of a node can also be modified by using the same method, except when you have chosen a variable node width.

[Section 19] [Table of contents]