Canvas View
The Canvas View allows users to create and edit content on a canvas. The editable area, or canvas, is positioned in the center of the page, while all corresponding panels and toolbars surround the canvas. Users can drag items from the toolbox, onto the canvas and arrange the items as needed. Follow the Drag and Drop framework for specifics on the interaction.
The canvas can be viewed as a single receptacle onto which toolbox items can be dragged anywhere. Or, in some cases, there may be container objects on the canvas into which toolbox items can be dragged.
In some cases items on the canvas can be ordered or connected to represent a particular flow or interaction. All tools associated with the items can be found above the canvas in the Editor Toolbar.
Layout
Example with Left-aligned Toolbox
The Canvas View is typically embedded into a page that has breadcrumbs and some navigation framework.
Canvas View
- Editor Toolbar: The Editor Toolbar includes a mechanism to open and close the Toolbox as well as actions pertaining to the items on the canvas. The Toolbar can also optionally include zoom/pan actions, find, and view types.
- Canvas: A grid based background should cover the working area of the Canvas View. Users can drag items from the toolbox, onto the canvas and arrange the items as needed.
- Toolbox:
- All items that can be dragged onto the canvas are available in the Toolbox.
- The toolbox can be left-aligned or top-aligned depending on the use case.
- Canvas Items: Canvas items are things that have been dragged from the toolbox onto the canvas. In some cases items can be ordered or connected to represent a particular flow of information.
- Properties Panel (optional):
- Users may need to view or edit the properties of individual canvas items.
- When a user selects an item to view the properties, a panel should appear on the right side of the canvas.
- It should be clear which item properties are being displayed and users should have the ability to hide or collapse the properties panel as needed.
Example of Left-aligned Toolbox with Fly-out Menus
- Toolbar: If more than one type of toolbox must exist, a button group may be used in the Editor Toolbar to open and close one toolbox at a time.
- Toolbox: With left-aligned toolboxes, fly-out menus can be used as needed for scalability.
Example of Top-aligned Toolbox
- Toolbox: With top-aligned toolboxes, tabs and scroll capability can be used as needed for scalability.
- Canvas Items: When a user clicks on a canvas item, the selected state should be visually indicated. For cases where multiple actions are available, a contextual menu of canvas item actions is recommended on hover.
Zooming and Panning on the Canvas
Implementing the pan and zoom functionality is optional, but is recommended for any canvas view that has the potential for becoming overcrowded with canvas items.
Zooming
- The fa-minus and fa-plus icons should be used as the action buttons for zooming in and out of the canvas.
- The default zoom level will be considered 100% zoom. The + button is disabled at this zoom level.
- Clicking the fa-minus button once will cause the canvas to transition to 75% of the original zoom level.
- Zooming out a second time will redraw the canvas at 50% of the original size. This will be the most zoomed-out state of the canvas.
Panning
- Clicking and dragging on the canvas background when the cursor is in the all-scroll state will pan the canvas.
- When the canvas is not zoomed out all the way, hovering over the canvas background will change the mouse pointer to “cursor:all-scroll”.
- When it is zoomed out all the way, the cursor property will be set to “cursor: default”.
Canvas Containers
Containers are optional elements that contain, or nest, certain toolbox elements. They are not toolbox elements themselves and have their own properties.
- Containers:
- When a user clicks on a container, the selected state is visually indicated.
- When a container is selected, container actions are shown on the Editor Toolbar.
- For cases where multiple actions are available, a contextual menu of container actions is recommended on hover.
- Like canvas items, containers can be ordered or connected to represent a particular flow of information.
- Background Disabled: Some toolbox elements can only be added to containers. When such elements are selected in the toolbox, the canvas area outside of the containers is disabled so that items cannot be dropped into this area. The disabled area is indicated visually by graying out the canvas.
- Adding Containers: A control is placed on the canvas for adding new containers. This control should always be “on top” so that elements dragged onto the canvas cannot hide the control. Once a container has been added to the canvas it can be clicked and dragged around the canvas just like toolbox elements.
- Properties Panel (optional): As with canvas items, when a container is selected an optional properties panel will appear on the right side of the canvas.