[RSS]

Element Fonts & Colors


NOTE: Until this note is removed, all specs about Font & Color preferences and editing are purely suggestive and does not currently indicate the intended implementation. The final spec may be modified based on project resource contraints.

Currently, font and color preference defaults for all the different types of elements in all projects and diagrams can be customized. This options panel will be modified to provide an improve UI experience. Multiple elements on a diagram can be selected and the font and color of the name compartment and the background color of the element can be customized all at once, but the attribute and operation compartments (or other such sub-compartments of other element types) can only be customized one element at a time. In addition, the font and color menu actions for the element name compartment is under one submenu while the other compartments (like attributes) have font and color actions under another submenu.

The intent is to be able to customize font and color of all the different sections of an element using one a single editor. This editor will always be accessible with one action in the contextual menu no matter which section or sections of the element you wish to customize.

Global Font & Color Options

The editor for the global fonts and colors can be accessed by going to main menu Toos -> Options, select the UML options category, and on the General tab, there is a button named Set Global Colors and Fonts.... Clicking this button will display the element types' fonts and colors editor. The current editor will be replaced with a new easier to use UI.
Global font and color options editor with the Class element selected

The Element Types panel allows you to select a single element type to edit its fonts and colors. The Show combobox allows you to filter the listbox contents by diagram type or just nodes or edges. The selected element type is displayed in a generic format so that all subsections of the elment type's visual representation can be selected for customization. For the Class element, there are many subsections available for customization: name, stereotypes, tagged names/values, Attributes and Operations compartment titles, all attributes or operations of all scopes or individually by scope (public, package, protected or private), and package owner (not displayed in above screen shot). The element border color would also be editable when the name compartment is selected (border color field not shown in above screenshot).

Element Font & Color Editing

Single Element Editing

To edit the font & colors of a single element on a diagram, right-click the desired element, select Fonts & Colors, and the Fonts& Colors editor dialog will be displayed. This dialog presents an exact representation of the selected element in an interactive preview mode with font attributes (family, size and style) and foreground and background colors fields to customize the look of the element. The interactive preivew allows you to select different sections of the element for customization. By default, the name compartment is selected.
Single element selected for font & color customizing

You can click on Attributes or Operations to select all of the entries in that compartment for customization. Double-click Attributes or Operations to select these compartment titles for customization.

All attributes selected for font & color customizing

You can click on an individual operation for customizing

One operation selected for font & color customizing

You can use standard multi-selection techniques to select mutliple operations (and/or attributes) for customizing

Many operations selected for font & color customizing (multi-selection could include attribute entries as well)

Multiple Element Editing

If multiple elements of the same family type (elements with the same visual attribues: Class, Interface, Enumeration would be considered in the same family type) on a diagram are selected, then you can right-click one of the selected elements, then select Font & Colors, the same Font & Colors editor will be displayed as for single element font and color editing, however, the interactive preview will display a generic element of the same family type as the selected elements. The following image shows the Font & Color editor with the name compartment selected by default.
Multiple selected Class and Interface elements are represented by a generic respresentation of the element family type

You can customize all attribute or operation entries by clicking on the generic representations, respectively. The following image shows the public scoped attribute entries selected for editing.

Customizing public attributes for selected elements
Customizing non-public attributes for selected elements

Simple Font & Color UI Alternatives

The following image are proposed first steps to the holy grail font & color editors from above. Rather than the WYSIWYGelment subsections and all attribute and operations is presented. interactive element preview, a simpler listbox with options for the element type's subsections. Perhaps a filter for the listbox would be useful as well.
Name compartment
Public operations

Multi-tiered Application of Fonts & Colors

An element's font and color settings can come from one of two storage locations, or tiers: global and element. Global default font and color preferences are applied when an element has not been customized. As an element is added to a diagram, the global default font and color preferences are used to visually render the element on the diagram but those settings are not stored with that element in that diagram. All elements on a diagram can be customized, one at a time or in groups of the same element family type. These custom font and color preferences are stored with the element(s) in the diagram file. The same element on two different diagrams can have different custom font and color settings because the custom settings are stored per element, per diagram.

When a diagram is opened and elements are rendered for display, specific element font and color settings are used if such settings are found in the diagram file. If an element has not had its font and colors customized then such settings will not exist for that element in that diagram file. In this case, the global default preferences for that element type are applied.

Global Font & Color Preference Modification Effects Modifying the global font and color preferences in the global UML options panel will only affect those elements that have not been customized. Open diagrams that are visible when the global font and color preferences are modified will be forced to refresh (repaint) in order to apply the new preferences. Of course, any elements that have custom font and color settings will not be affected.

Pushing & Pulling Font & Color Preferences

Pushing Preferences
The concept of pushing preferences means that preferences from a lower (more fine-grained) tier can be applied, or pushed, to higher (more coarse-grained) tier. We have demonstrated above how an element can derive font and color settings from the global default preferences or from custom settings that were applied directly to the element in the diagram, or diagrams, in which it lives. Let's imagine you have customized the font and color for a particular Class element on a diagram. You decide that you rather like the way it looks and would like for all Class elements (that haven't been customized as well) in all your diagrams to display with the font and colors. You could just go to the UML options panel and repeat all the same steps you just performed to custom that one Class element, but it would be much more convenient if you could just tell the global preferences to use that Class element's custom font and color settings. And so, an action will be available in the context menu for all elements on diagrams that will push the custom font and color settings of the element into the global preferences for that particular element type.

Pulling Preferences
Pulling preferences is just the inverse of pushing preferences. Preferences from a higher tier can be applied to a lower tier, essentially just restoring it to use the global default preferences. Let's suppose like the scenario above that you have customized a Class element but this time you are not particularly happy with the end result and decide that the current global font and color preferences are much better. Again, you could bring up the font and color editor for the element and try to remember all the global default preferences and set them accordingly for the element, but there is much room for error, and if you change the global default preferences, even if this Class element had the same settings at the global default preferences, the new global default preferences would not be applied to this Class element because it has custom localized settings. And so, an action will be made available in the context menu for all elements on diagrams that will pull the global font and color preferences for that particular element type reseting the the element to use the defaults. It is important to understand that the element's custom font and color settings in that digram are just removed rather than changed to the global default preferences. In other words, an elment with no custom font and color settings just uses the settings in the global default preferences.

Dealing with Custom Attributes and Operations
TODO

Font & Color Contextual Menu Layout

Three different diagram element actions regarding font and color have been discussed: editing settings, pushing settings and restoring (pulling) settings. Each element on a digram will have options for these three actions. These actions will be grouped under one submenu option. The submenu option will be named Font and Color and the three actions will be named Customize, Update Global Preferences and Restore using Global Preferences, respectively.