The diva.canvas demo

The canvas demo shows off the basic architecture and feature of the canvas. At the top level of the window, the canvas contains an instance of GraphicsPane contains several figures.

1. Click with button 1 to select figures (the two large figures are different -- see below.
2. Shift-click with button 1 to toggle figures into and out of the selection.
3. Selected figures have a set of grab-handles placed on them. Click and drag on a grab-handle with button 1 to reshape the figure.
4. Drag out a region of the canvas with button 1 to select multiple figures. Shift-drag to toggle items covered by the drag-rectangle.
5. Click on the background to clear the selection.

The six sliders to the right of the window control the transform of the top-level canvas pane. They can be used to control the scale, rotation, translation (two sliders), and shear (two sliders) of the top-level pane with respect to the containing canvas. Note that all of the figure selection and editing operations work in the presence of arbitrary transforms.

The two larger figures are nested canvas panes. Each of them has a background, and contains a complex canvas pane of their own. Thus, visualization and editing components can be arbitrarily nested to any depth. (In a later release, we will provide level-of-detail and control to make this more useful.) In the example, the magenta "swatch" pane contains figures that can be selected but not reshaped, while the "cloud" blue pane contains the same graph editor pane shown in the graph example. (Nodes can be added and connected with edges.)

By default, mousing inside one of these embedded processes acts on the internals of the pane. To move and reshape the pane as a unit, first select it by drag-selecting on the top-level background, then drag it to move it or drag a grab-handle to reshape it.