Working with the Graphic Canvas: Editing a Graphic

What is the Graphic Canvas?

The Graphic Canvas is the area of the Graphics Editor that holds all the elements of a graphic. Elements is a generic term for the components that can be placed on the Graphic Canvas, including shapes, images, text, and symbols.

What is the size of the Graphic Canvas?

The size of the Graphic Canvas is 1920 by 1080 pixels. At viewing time, the entire Graphic Canvas displays in the Graphics widget at a relative zoom level, which is based on the size of the web browser. The Graphic Canvas resizes and fits into the Graphics Widget and is considered at 100% zoom level. Be mindful of white space and the bounding areas of the Graphic Canvas when designing your Metasys UI graphics.

How do I zoom in or zoom out of the Graphic Canvas?

To zoom in to the Graphic Canvas, click . You can also use your mouse wheel.

To zoom out of the Graphic Canvas, click . You can also use your mouse wheel.

To reset the zoom level to 100%, click .

How do I pan or move around the Graphic Canvas when zoomed in?

To pan or move around the Graphic Canvas, select the (keyboard shortcut: h). Or you can use your mouse scroll button (center button).

What keyboard shortcuts are available in the Graphics Editor?

There are several keyboard shortcuts available in the Graphics Editor. Some keyboard shortcuts are available only when a panel is open. The table below lists the keyboard shortcuts.

Table 1. Keyboard Shortcuts
Action performed	Keyboard shortcut
Select all shapes, images (excluding the background image), and symbols on the Graphic Canvas.	A
Copy selected shape, image, or symbol.	Ctrl + C
Paste shape, image, or symbol from clipboard (previously copied shape, image, or symbol).	Ctrl + V
Cuts selected shape, image, or symbol.	Ctrl + X
Move the selected shape, image, or symbol forward one layer.	Ctrl + ]
Move the selected shape, image, or symbol back one layer.	Ctrl + [
Move the selected shape, image, or symbol to the top layer.	Ctrl + Shift+ ]
Move the selected shape, image, or symbol to the bottom layer.	Ctrl + Shift + [
Group selected shapes, images, and symbols into a group.	Ctrl + G
Grouping selected grouped shapes, images, and symbols into one group.	Ctrl + U
Pastes a duplicate of the selected shape, image, or symbol on the canvas, including its properties.	D
Select the Select Tool from the Drawing Tools and Basic Shapes Panel.	V
Select a Circle from the Drawing Tools and Basic Shapes Panel.	C
Select an Ellipse from the Drawing Tools and Basic Shapes Panel.	E
Select a Rectangle from the Drawing Tools and Basic Shapes Panel.	R
Select a Square from the Drawing Tools and Basic Shapes Panel.	S
Select the Path Tool from the Drawing Tools and Basic Shapes Panel.	P
Select a line from the Drawing Tools and Basic Shapes Panel.	L

How do I select a shape, image or symbol?

Click the shape, image, or symbol to select it. Selection boxes appear around the shape, image, or symbol when it is selected.

If you have another tool selected, click from the Drawing Tools and Shapes panel and then click the shape, image, or symbol. Or press A on your keyboard to select all elements on the Graphic Canvas.

How do I add a shape or symbol to the Graphic Canvas?

To add a shape or symbol to the Graphic Canvas, you can:

Select a shape or symbol and click and drag the mouse cursor on the Graphic Canvas to draw the shape or symbol.
Click and drag the shape or symbol onto the Graphic Canvas. The shape, image, symbol appears on the Graphic Canvas.

How do I resize a shape, image, or symbol?

To resize a shape, image, or symbol:

Click on a shape, image, or symbol. The selection handles appear around the shape, image, symbol.
Click and drag any of the corner or side selection handles to resize the shape, image, symbol.

Notes:

After resizing a symbol, the snapping feature may not function as expected. Snapping works best on symbols in their default size.
You can resize a grouping of elements (shapes, images, and symbols) and the elements within the grouping maintain their aspect ratio.

How do I copy, paste, or delete a shape, image, or symbol?

To copy and paste (duplicate) a shape, image, or symbol:

Click on a shape, image, or symbol.
From the Edit Toolbar, click . Or press D on your keyboard. Alternatively, you can press Ctrl + C and then Ctrl + V to copy and paste the image.

To delete a shape, image, or symbol:

Click on a shape, image, or symbol.
From the Edit Toolbar, click the trash can button. Alternatively, you can press Del or Delete on your keyboard when using the Graphics Editor in Google Chrome or Apple Safari web browsers.

You can also use Ctrl + X to cut a shape, image, or symbol from the Graphic Canvas. These procedures also work when multiple shapes, images, or symbols are selected.

How do I rotate a shape, image, or symbol?

To rotate a shape, image, or symbol:

Click on a shape, image, or symbol. The selection handles appear around the shape, image, symbol.
Click and drag the top-most, center selection handle to rotate the shape, image, symbol.
Figure: Rotate shape example

Notes:

When you work with MAC IOS version 10.13.1 (Safari version 11.0.1), the shape, image, or symbol reverts to its original position when you first rotate and then resize it. To prevent this, complete the following steps:
1. Click on the shape, image, or symbol. The selection handles appear around the shape, image, symbol.
2. Click and drag any of the corner or side selection handles to resize the shape, image, symbol.
3. Click and drag the top-most, center selection handle to rotate the shape, image, symbol.

How do I group shapes, images, or symbols?

To group shapes, images, or symbols:

Press Ctrl + Shift to select multiple shapes, images, or symbols. The Edit toolbar appears.
Click . Or press Ctrl + G.

How do I ungroup shapes, images, or symbols?

To ungroup a grouping of shapes, images, or symbols:

Click on a group of shapes, images, or symbols.
Click . Or press Ctrl + U.

How do I undo an action? How do I reverse an undo?

To undo an action, press Ctrl + Z or click the undo button to undo the previous action.

Undo is available for editing actions that occurred since you started the Graphics Editor, except:

Undoing an align action after rotating and then aligning an element or group of elements. When doing so, the element or group of elements may undo both actions and appear in its original orientation and alignment or appear in an unexpected position. We recommend you first align and then rotate an element or group of elements. Furthermore, you cannot undo these actions in this scenario.
Undoing a binding action. When doing so, the action that occurred before the binding action is reversed. To delete a binding, click the trash can button in the Binding drop-down of the Edit Toolbar.
Undoing changes in binding properties, including units.

To reverse an undo, press Ctrl + Y or click the redo button. The redo button is available only after you have undone an action.

The following symbol categories and symbols do not support the undo and redo functions: Air Coils, Air Fans, Chilled Beams, Fan Coil Units (Packaged), Pipes, symbols for pipe assemblies, symbols for coil assemblies, Absorption Chiller, Cloud symbol, Home symbol, Monitor symbol, and Weather station symbol.

I want to overlap elements on the Graphics Canvas. Can I lock an element on the Graphic Canvas so that it cannot be moved or edited?

No, there is no locking function for elements on the Graphic Canvas. Add elements on different layers so that you can overlap elements without accidentally moving or editing the wrong element.