Figure Navigator

The hierarchical nature of a FypML figure is not apparent when it is rendered on the Figure Canvas. The Figure Navigator, occupying the top-left corner in Figure Composer's application window, exposes this tree structure so that you can locate and select any graphic node in the figure. It also allows you to change the order in which the individual nodes are drawn -- which can be important when several graphic objects overlap visually.

The Navigator offers a typical tree-like view of the figure's node hierarchy. Each row displays one object in the node tree, with a representative icon and a node title. The latter is often the value of the node's title attribute, if the node has that attribute and you have set it to something other than an empty string. In general, when composing a very complex figure, it is good practice to give each node a unique title because that can help you locate the node when you revisit the figure later. If the node lacks a title property (line or calib nodes) or if the title is blank, then the node type ("Line Segment", "Graph", and so on) is displayed instead.

If an object like a graph contains other objects as "children", then its corresponding line item in the Navigator will include a black arrow to the left of the node icon; this is the expand/collapse toggle. When a figure is loaded, all of the "parent" nodes are initially collapsed, with the toggle arrow pointing to the right. (The root figure node in the top row is an exception; it is always in the expanded state and lacks the expand/collapse toggle.) To expand a collapsed node, click on the arrow; the node's children are revealed (immediately under the parent and indented to the right), and the arrow points downward rather than rightward. Click the arrow again to collapse the node. Expand nodes as needed and scroll up and down to examine all of the graphic nodes comprising your figure; click on any node in the tree to select it.

As of version 4.5.0, Figure Composer supports multiple object selection, which is useful when you want to copy, delete, or move several objects at once, or apply the same styling properties to several objects, or align the objects with respect to one another. There are various ways to form a multi-node selection in the Navigator's tree view. To toggle the selection state of any object, hold down the Ctrl key (Command key in Mac OSX) and click on the relevant row in the node tree. To select a range of nodes, you can drag the mouse over two or more rows in the tree; upon releasing the mouse, the nodes "under" the drag rectangle replace the figure's current selection (to add them to the current selection instead, depress the Ctrl/Command key when you release the mouse). Alternatively, hold down the Shift key and use the up/down arrow keys or the mouse to select a range of nodes in the tree. Observe that each time you make a change in the selection, all nodes in the updated selection list are highlighted by a translucent blue overlay in both the Navigator and in the Figure Canvas. The anchor node for the selection is distinguished by a bright blue outline in addition to the translucent overlay (the blue outline is not shown in the screenshot above).

There are several useful keyboard shortcuts related to the tree view:

• • Use ↑ or ↓ to shift the selection up or down one row in the node tree list. If the Shift key is depressed, the current selection range is updated accordingly.

  • Press the → to expand a collapsed parent node and put the selection on its first child node. Conversely, press the ← to move the selection to the parent of the current node (but the parent is not "collapsed").

  • Press the Home key (fn-← on Mac OS X keyboard lacking numeric pad) to put the selection on the root figure node.

  • Ctrl-↑ (Command-↑ on Mac) decrements the "Z-order" of the currently selected node (if possible), while Ctrl-↓ (Command-↓ on Mac) increments it. If two "sibling" nodes overlap, the node with the higher Z-order is drawn on top of the other. (Essentially what you're doing here is changing the node's ordinal position in its parent's child node list; child nodes are rendered in the order they appear in this list.)

The node Property Editor -- discussed in the next section -- is part of the Navigator panel, located immediately below the tree view. In general, whenever you select a different graphic node in the figure -- either by clicking on it in the Figure Canvas or by using the up/down arrow keys --, the corresponding row in the tree view is highlighted (see screenshot), and the properties of that node are loaded into the Property Editor. However, if you click on an axis or the legend of a graph element, you'll notice that there is no corresponding node in the figure tree; instead, the parent graph itself is highlighted. This is because the axes and legend are intrinsic, required components of a graph; they cannot be added nor removed from the graph. The properties of these component nodes are included in the Property Editor, in separate tab panes. For example, if you select a graph's Y axis, the graph node is highlighted in the Figure Navigator, its properties are loaded into the Property Editor, and the "Y" tab pane is brought to the front so the user can immediately review and/or revise the properties governing that axis.

When two or more nodes are selected in the figure, observe that the Property Editor is hidden. You cannot edit the properties of multiple objects at the same time, even if they happen to be objects of the same type.

In-place editing of a node's title property. As of version 4.6.0, double-clicking on the currently selected node in the Navigator's node tree will raise a compact pop-up window in which you can quickly make changes to that node's title. This is particularly useful when you want to quickly change the titles of the root figure and any graphs in that figure -- without having to shift your attention to the Property Editor to update each title. Similarly, you can double-click on the rendering of a label, text box, or graph axis in the Figure Canvas to raise the same pop-up window in order to update the text associated with any of those nodes.

The pop-up window comes in two forms. If the selected node allows multiple lines (by inserting line-break characters) in its title string -- such as a text box element --, then the window includes a scrollable text area in which you enter the text lines, plus an iconic "enter" button which confirms the changes and hides the window.