Figure Canvas

The Figure Canvas fills the right-hand side of the main content panel in Figure Composer's frame window. The canvas provides a WYSIWYG ("what you see is what you get") rendering of the currently selected figure. It is updated each time the user makes any change to an object within the figure. Under the hood, all content rendering takes place on a working buffer in a background thread. This is important because it could take several seconds or more to draw a complex figure with large data sets. When a rendering is completed, the working buffer is copied to the canvas window.

The canvas offers a number of useful interactive features:

• Different display modes.  Typically you will keep the canvas in the default Scale-to-fit display mode, in which the figure is scaled up or down as needed (while preserving the X-Y aspect ratio) to use as much of the canvas area as possible. As the canvas is resized, so is the rendered figure. If you uncheck Scale-to-fit in the View menu (or press the corresponding toggle button in the bottom toolbar), then the figure is drawn at its actual measured size (based on the screen "dots-per-inch" setting in user preferences). Alternatively, you can put the canvas in Print Preview mode (via the View menu or the relevant button on the toolbar) if you want to see the figure drawn as it would appear on the printed page -- given the current page setup.

• Rulers. Narrow rulers below and to the left of the canvas window help the user gauge the size of the graphics currently visible within the canvas window. Labelled major tick marks are typically drawn at 1-in intervals, but these may be scaled up to 10-in or down to 0.01-in intervals depending upon the current measured size of the canvas viewport. Shorter unlabeled ticks subdivide each major tick interval. The viewport's origin always lies at the bottom-left corner of the current figure, the x-axis increases rightward, and the y-axis increases upward. Thus, in Print Preview mode, the bottom-left corner of the printed page will have negative x- and y-coordinates. The rulers self-adjust as the user zooms and pans the graphic. In addition, whenever the mouse cursor falls within the canvas boundaries, translucent blue arrows in the rulers track the cursor position and display its X,Y coordinates. To hide the rulers, uncheck the View|Rulers menu item.

• Selecting an object in the figure. At least one element in the displayed figure always has the current "selection" for editing purposes. The selected node is covered by a light-blue translucent overlay with a bright blue outline on the Figure Canvas (unless the root figure node is selected, since the overlay would cover the entire graphic). To select a different node, simply put the mouse cursor over the object on the canvas and click the left mouse button. The selected node is highlighted in both the canvas and the Figure Navigator, and the Property Editor is updated to reflect the properties and content of that element. Note that, as you move the mouse over the canvas, a translucent gold rectangle transiently highlights the node currently "under" the mouse. This can help when selecting among different objects that overlap each other -- as is often true for multiple data traces in a graph. If you still have trouble selecting a particular node, use the Figure Navigator instead. 

• Selecting multiple objects. As of version 4.5.0, multi-node selection is supported. Whenever the mouse is the crosshair shape, you can press and drag to select all nodes that intersect the animated drag rectangle. If the Ctrl key (Command key in Mac OSX) is depressed when the drag gesture stops, the intersecting nodes are added to the current selection; otherwise, they replace the current selection. All selected objects are highlighted with same blue translucent overlay, but only one object gets the bright blue outline; this is the focus or anchor node within the selection. You can change the selection state of any object on the canvas by "left-clicking" on it while holding down the Ctrl/Command key: if the object is not yet selected, it is added to the current selection and is made the anchor node; if it was already selected but is not the anchor node, then it becomes the anchor node; if it is the current anchor node for the selection, then it is de-selected (unless it is the only node selected). Note that if you click anywhere on the canvas where there is no graphic object, you'll end up selecting the root figure node. This may not be readily apparent because no selection highlight is rendered on the figure node (but it will be highlighted in the node tree in Figure Navigator). Only a few editing operations are applicable to a multi-node selection: copying, cutting, moving, applying a style set, and aligning. Whenever more than one object is selected in a figure, the Property Editor is hidden because you cannot edit the properties of multiple objects at the same time. However, as of version 4.7.3, the editor will remain visible if all of the objects in the selection are of the same kind. In this case, the editor displays the properties of the anchor node in the selection, and any property changes are applied to ALL of the nodes in the selection. For more details, go here.

• Editing a text label, axis label, or text box content "in place". Normally, when you want to make changes to the appearance of a graphic element, you put the focus on that element, then edit its properties within the Property Editor. As of version 4.6.0, you can quickly change the text of a label, axis or text box node by double-clicking on that node in the canvas. This raises an "in-place" pop-up window in which you can quickly enter new text without having to shift your attention to the Property Editor. The same feature is available in the Figure Navigator; for more details about how the pop-up window works, go here.

• Moving an object. Try this -- select a label or shape node in your figure, then move the mouse cursor inside the blue selection overlay for that node. Observe that the mouse cursor changes from the usual crosshair shape to a custom "move" cursor. When the move cursor appears, "grab" the node by depressing the left-hand mouse button; a dotted black outline appears around the selected node. Drag the mouse and observe that the dotted outline follows the cursor (assuming the host machine isn't too slow!). In addition, a tool tip follows the cursor, displaying the changing coordinates of the selected node's location. Release the mouse, and the element is moved to the new location. Text labels, text boxes, images, line segments, shapes, calibration bars, legends, and entire graphs can all be repositioned in this way. Furthermore, if multiple nodes are currently selected, you can "grab" any one object and move the whole set at once -- try it!

• "Nudging" an object. Select a relocatable object on the canvas, hold down the Alt key, and press the Left, Right, Up, or Down arrow key to "nudge" the object in that direction by 0.05 inches. Alternatively, if both the Alt and Shift keys are held down, the object is nudged by 0.005 inches instead. The X- or Y-coordinate of the object's location is updated accordingly (preserving that coordinate's current unit of measure), and the object is redrawn at the new location. You can use the same keystrokes to tweak the locations of all relocatable objects in a multi-node selection as well. [NOTE: As of V4.7.0, Alt+Shift+arrow replaced Alt+Ctrl+arrow. The latter keyboard shortcut has OS-specific uses on Windows 8 and Linux.]

• Aligning objects. Whenever two or more relocatable objects (graph, line segment, text label, text box, calibration bar, image, shape) are selected in a figure, you can use the Edit|Align submenu to adjust their current locations in a single, reversible operation so that they are all aligned with respect to the anchor node in the selection.

• Resizing an object. When the (singly) selected node is a graph (2D or 3D), image, text box, shape, or line segment, you should see -- in addition to the usual blue selection overlay -- a blue and white dotted rectangular outline. The presence of this outline indicates that the object can be interactively resized on the canvas using a mouse-drag gesture. Move the mouse so that the cursor rests on an edge or corner of the resize outline; observe that it changes into one of the system-defined resize cursors (north, south, east, west edge; or NW, SW, NE, SE corner) or a custom, non-directional resize cursor. Depress the mouse and observe that the resize outline is now drawn with a dotted black line. Drag the mouse to resize the object. The dotted black outline changes to reflect the approximate extents of the object, and a dynamic tool tip indicates what node properties are changing as you resize it. Again, upon releasing the mouse, the node is resized accordingly. For graph, graph3d, image, and textbox nodes, you can resize the node by grabbing and dragging any edge or corner, and the interactive drag-resize operation will be restricted depending on which edge or corner you chose. For a shape node, the dragged edge or corner is irrelevant. In this case, you're only changing a single property; experiment a bit and you'll get a feel for it. Finally, resizing a line node is very different: you "grab" either endpoint and drag it to a new location to resize the line. If you "grab" the line anywhere between the endpoints, you'll move the line instead.

• Changing the orientation of a 3D graph. The graph3d node has two properties that control the orientation of the graph in the "3D world", a rotation R about its Z-axis and a subsequent rotation E about its X-axis. These "rotation" and "elevation" angles can be set individually in the 3D Graph Properties editor, but it's often useful to adjust both simultaneously on the figure canvas. Move the mouse inside the graph's 3D "data box" and observe that the cursor changes to a "rotate" icon. Depress the mouse button and drag the mouse in any direction. Both R and E will change as the mouse is moved, and a dotted black outline of the 3D box shows what the graph's orientation would be if the mouse were released at the current location. Release the mouse to update the graph accordingly. If you're not happy with the result, simply "Undo" it and try again.

• Cropping an image. The image node embeds a PNG or JPEG image within a FypML figure, scaled and centered within a rectangular bounding box, minus an optional margin. When an image node is selected and the cursor moves over the canvas area occupied by the scaled image itself, a translucent white overlay covers the image and the cursor changes into a "crop" cursor. As you move the mouse over the image (without pressing the mouse buttons), the dynamic tool tip displays the corresponding pixel location within the image (note that, in image space, the origin is at the top-left corner rather than the bottom left). You can crop the image by depressing the mouse anywhere in the image, dragging the mouse to a new location, and releasing. The cropped section is re-scaled and re-centered appropriately. Of course, the FypML figure retains the original source image. To reset the crop rectangle so that you see the entire image, press the Reset button in the Image Properties editor. 

• Zooming. Sometimes it may be useful to zoom in on a portion of a figure to make fine adjustments in its appearance, then zoom back out after making the changes. To do so, simply hold down the space bar while the cursor is over the figure canvas. [NOTE: Make sure the keyboard focus is not on a text component -- else you'll just enter a bunch of spaces in that field!] The usual crosshair cursor is replaced by a small magnifying glass to indicate that the canvas is temporarily in "zoom mode"; releasing the space bar immediately returns the canvas to the normal "select mode". In zoom mode, left-click anywhere on the figure to "zoom in" by a factor of two and re-center over the clicked location; similarly, a right click will zoom out on the figure by a factor of 1/2 and again re-center the graphic (if possible). Alternatively, the user can zoom in on a particular region in the figure by depressing the left mouse button and dragging in any direction. A translucent gray rectangle follows the mouse around the canvas -- albeit while maintaining the aspect ratio of the rendered figure; this is roughly the area that will be magnified upon releasing the mouse. To return the figure to its actual, measured size, choose View|Actual size in the main menu (or the corresponding button in the toolbar). Alternatively, return to the Scale-to-fit display mode.

• Panning. The canvas does not come with the traditional scroll bars. Regardless the display mode, if the rendered content is not entirely visible within the canvas window, the user can "pan" the graphic in any direction by depressing the right mouse button and dragging the mouse over the canvas. The canvas graphic "follows" the mouse -- subject to the limitation that the edges of the graphic cannot be panned past the corresponding edges of the canvas. Of course, this pan-by-drag gesture has no effect in Scale-to-fit display mode, since the entire figure is always visible in that mode.

• Right-click "context menu". As long you're not in "zoom mode", a right-click anywhere on the canvas will raise a context menu for convenient access to many of the commands in the Edit menu that are relevant to the graphic element(s) currently selected on the canvas, as well as those commands in the View menu that pertain to the canvas itself. This is merely a convenience to users who tend to work more with the mouse and would like to access menu commands without having to move the cursor up to the application's main menu bar, and without having to remember the various keyboard shortcuts.