Property Editor
Below the Figure Navigator is the Property Editor, which is by far the most complicated component in Figure Composer's user interface. It is here where you view and edit the individual attributes, or properties, of the currently selected node in a figure. The component is really a collection of node-specific editor panels that manage a set of property controls, or widgets, by which the user modifies the definition of the selected node. Only one such editor panel is visible at a time. Whenever the selection shifts to a node of a different class, the corresponding editor panel is brought into view to display/edit that node's properties. The property editor's title bar reflects the type of node currently displayed -- "Figure Properties", "Graph Properties", and so on.
The subsections of this chapter offer more detailed descriptions of the different kinds of nodes in a FypML figure and how to use the node-specific property editor panel to edit each type of node.
The best way to learn how to use the Property Editor is to just try it out. Start Figure Composer and create a brand-new figure, then start adding a few elements to it and make some changes to their properties. Whenever you change the value of any property, the rendering in the Figure Canvas is updated accordingly (unless the change you made has no effect on the figure's appearance). If you don't like the result, simply Undo it!
New in V4.7.3: Editing multiply-selected objects in a figure
When you use the Figure Navigator or Figure Canvas to select more than one object in the current figure, the Property Editor is hidden because you cannot edit more than one object at a time. However, as of version 4.7.3, if all of the objects selected are of the same type, then multi-object property edits are possible. For example, when you select three different text labels in the figure, the Text Label Properties editor remains visible and displays the properties of the label node that is the current anchor for the multiple selection (highlighted by a bright blue outline). The color of the editor panel's border and title bar changes to a light red to indicate that you're now editing multiple objects. If you change the font size in the editor, the same change is applied to all three selected labels at once. If you're not happy with the result, Undo it.
When multiple graphs -- or components (axes, legend) of multiple graphs -- are selected, the Graph Properties editor can be used to change the properties of all of the graphs -- or any of their components -- at the same time. Click X tab to make changes to the X axes of all of the selected graphs, the Y tab to update the Y axes, and so on.
Certain object properties may not be changed across a multiple selection -- usually because it makes little sense to do so: the object ID associated with graph, label, and several other node types; the data set attached to any data presentation node; the data group fill colors and legend labels for a pie, bar or area chart; the formula for a function node. If you edit any of these properties when multiple objects are selected, only the anchor node is affected.
Custom widgets for some properties
For the most part, using the widgets on the various node-specific editor panels is self-explanatory. An exhaustive description of every individual widget would be tedious to prepare and impossible to read! Most are standard widgets like combo boxes, check boxes, pushbuttons, and text fields. When in doubt about the purpose of a particular widget, simply hover the mouse over it -- a tooltip will appear that describes the relevant property and, in many cases, indicates the allowed range of values. However, there are a number of custom widgets that merit further explanation.
Numeric text field
Some graphic object properties are just integer or floating-point values that must fall within some reasonable range. The rotate property, for example, is restricted to [-180.0 .. 180.0]. Such properties are displayed and edited in a numeric text field, which looks just like a normal text field, but with stricter input constraints. Non-numeric characters cannot be entered in this field (you'll just hear a beep if your sound card is working!). If an integer is required, one cannot type in a decimal point; if the minimum value is positive or zero, a minus sign ('-') is not allowed. The length of the numeric string is restricted, and any out-of-bounds value is auto-corrected. Essentially, the user is prevented from entering an illegal value. The field also limits the number of decimal digits in a floating-point value.
Measurement field
Many object properties -- stroke width, coordinates and bounding box dimensions, tick mark lengths, symbol sizes, and many more -- are linear measurements. Four physical units of measurement are supported: inches (in), centimeters (cm), millimeters (mm), and typographical points (pt = 1/72 in). In addition, two relative units are supported for some properties, percentage (%) and user (u) units. Percentage units let the author position and size an object relative to the bounding box dimensions of that object's parent; thus, when the parent is resized, the child object is automatically resized with it. User units make sense only in the context of a graph object, since they refer to the native coordinate system in which data is plotted within a graph. One common use for user units is to position an annotation symbol or text label near or on top of a particular data point of interest.
A measured property is compactly presented on an editor panel in a measurement field, which is a modified numeric text field accompanied by a label reflecting the units of measurement. When you click inside the text field, the current contents are selected so that you can enter a new value immediately. Simply type the numeric value, followed immediately by a units character: i for inches, c for cm, m for mm, p for pt, % (or n) for percentage units, and u for user units. The letter you type will not appear in the text field, but the accompanying label will be updated accordingly. If you only want to convert units, leave the numeric value unchanged and type the first character of the desired units; the numerical value will be converted to the new units so that the measured length is unchanged -- to the degree possible given the constraints imposed on the property being edited. These constraints include the range of allowed values, measurement precision (maximum number of decimal digits), and whether or not relative units are permitted. Any user input that violates these constraints is either rejected or auto-corrected.
Stroke pattern field
This combo box control presents the stroke pattern property, an alternating sequence of dashes and gaps that define how a line is stroked. The dash-gap sequence is an array of 1-6 positive integers, where each integer represents the length of the dash or gap in increments of 0.1 stroke widths (by measuring dashes and gaps in line-width units, the stroke pattern will look relatively consistent as the line width changes). Each integer dash/gap length is restricted to the range [1..99]. Since the first integer in the array is always the length of the first dash, any stroke pattern of length 1 is a solid stroke.
To change the stroke pattern, highlight the field's contents and type in a sequence of up to six integers (separated by spaces); the field will reject any invalid character input. Alternatively, use the dropdown list to select from among five common stroke patterns: solid, dotted (a synonym for the dash-gap sequence [10 30]), dashed (synonym for [30 30]), dashdot (synonym for [30 30 10 30]), or dashdotdot (synonym for [30 30 10 30 10 30]). If you enter an integer sequence that is identical to one of the common stroke patterns, that sequence is immediately replaced with the name of that pattern.
There are also keyboard shortcuts for each of the common stroke patterns. When the keyboard focus is on a stroke pattern field, type s for solid, d for dotted, a for dashed, t for dashdot, and o for dashdotdot.
Font family chooser
Every graphic object that may render text content has a font family property specifying the font in which text should be drawn. The font family chooser is an editable combo box with a customized dropdown list. This list displays the names of all font families installed on the host system that have glyphs for the ASCII characters "a-zA-Z0-9". In addition, the list includes the most recent 10 font family selections made since application startup. All entries from this "input history" appear at the top of the dropdown list, with a solid line dividing these entries from the installed font list. In addition, recent entries are rendered in the named font, if it is installed on the host. If you need to select a font that's not installed on the computer, simply type its name in the chooser's edit field; any non-empty string is accepted.
Entering special characters into certain text fields
Some FypML elements have text-valued properties or content that accept characters -- such as Greek letters, arrow shapes, or mathematical symbols -- that are not readily accessible from a standard keyboard. Figure Composer includes a modeless, non-focusable "character map" tool from which you can select such characters. To raise this floating tool panel, select Special Characters from the View menu. The panel initially appears just to the right of the Property Editor, but you can move and resize it as you wish. It includes a combo box that selects among several different character sets supported by the program, plus a table of the the characters in the selected character set that can be rendered in the current object's display font; in fact, the characters in the map are actually drawn in that font so that the user has a "preview" of what they'll look like. The name of the chosen font appears below the character table. Whenever you select a different node in the figure, the character map tool panel is updated appropriately.
To insert a special character into a text component in the Property Editor, simply double-click on the desired glyph in the character table. If the keyboard focus is currently on a text field that accepts extended characters, the selected character will be inserted into the text field at the current caret position, replacing any selected text. Of course, the change will not be reflected in the figure until you "submit" the change by hitting the Enter key, or by shifting the focus to another widget. If the keyboard focus is not on a text component, or if that text component does not accept special characters (such as the numeric text field described above), then double-clicking on characters in the character map tool panel will have no effect.
RGB color picker
This customized push button provides a compact way of displaying and editing an opaque, translucent, or fully transparent color from the standard RGB colorspace. An RGB color consists of red, green and blue components, each specified as an 8-bit unsigned integer (0-255). A fourth component sets the color's "alpha" transparency (0 = fully transparent .. 255 = opaque). The RGB color associated with the component is displayed as a solid square swatch on the button's face. If the color is not opaque, the swatch has a gray-and-white background, half of which is covered bythe translucent color and half by its opaque version. If the color is fully transparent, a red "X" is drawn over the checkerboard.
To change the color, simply click on the button. A compact popup window appears nearby. This window is divided vertically into three different sections:
MRU colors. The five most recently used colors are displayed in small swatches, with the most recently used color on the left and the least recently used on the right.
Basic colors. This section is an array of 25 different color swatches that are commonly used. Each color represented in this array has a common name like "black", "royal blue", "yellow", and so on. Hover the mouse over a swatch and a tooltip will appear indicating the color's common name.
The current color. The bottom portion of the popup includes a large swatch that reflects the current color of the picker button that was just clicked. Below this swatch are four sets of spinner/text field pairs, one pair for each component of the RGB color.
To select a color, either click on one of the swatches in the upper two sections, or use the spinners and/or text fields to manually change the color, then click on the larger swatch to select the color you specified. Clicking on any swatch extinguishes the popup panel, and the RGB color picker button should reflect the color you chose. Clicking outside the popup panel will also extinguish it; in this case, the color is changed only if you have used the manual controls to do so.
Note that, if a particular color attribute does not allow transparency, the Alpha text field and spinner will be disabled.
Background fill picker
This custom control lets the user select a solid or gradient background fill for a FypML figure, textbox, image, or shape node. The control looks and acts like a square push-button, 50x50 pixels in size. The button's face is painted with the solid or gradient fill currently associated with the component. To change the current fill, click on the button to raise a small pop-up window, as shown on the right. Use the combo box at the top to choose one of three supported fill types:
Solid. The background is filled with a single uniform color, which can be opaque, translucent, or fully transparent. Use the RGB color picker button to change this color. The "preview swatch" displays the currently selected color (as described above for the RGB color picker). All other controls in the window are disabled.
Axial gradient. The gradient is defined by two "color stops" and an orientation angle. Use the two RGB color pickers to select the colors at the start and end points of the gradient (both must be opaque colors, and they cannot be the same), and use the Angle field to specify its orientation with respect to the bounding box of the graphic object. Note that the color along the gradient's axial line will vary linearly from the starting color to the ending color. The endpoints are calculated so that a single cycle of the gradient just spans the object's bounding box.
Radial gradient. In this case, color varies linearly from a specified focus inside the graphic object's bounding box to the perimeter of the circle that circumscribes that box. Use the RGB color pickers to define the color at the focus and the color on the circle; both must be opaque. Specify the X and Y coordinates of the focal point as an integer percentage of the object bounding box width and height, respectively. You'll get a circular gradient if the focus is at (50%, 50%); otherwise, you'll get a cone-shaped shading -- as in the screenshot above.
As you make changes in the pop-up window, the preview swatch on the right is updated to reflect the new background fill. To accept the new value and dismiss the pop-up, simply click on the swatch itself or anywhere outside the pop-up panel.
