Simple Wires Help

- Getting Started: /manual/docs/getting-started.html
- Projects Dashboard: /manual/docs/projects.html
- Sharing Projects: /manual/docs/sharing.html
- Drawings and the Start Page: /manual/docs/drawings.html
- The Drawing Editor: /manual/docs/editor.html
- Functional Blocks and Ports: /manual/docs/blocks.html
- Master Library: /manual/docs/equipment-library.html
- Warehouses: /manual/docs/warehouses.html
- Racks and Rack Panels: /manual/docs/racks.html
- Drawing Cables: /manual/docs/cables.html
- Off Sheet Pointers: /manual/docs/off-sheet-pointers.html
- Shapes, Text and Images: /manual/docs/shapes-text-images.html
- Page Setup and Drawing Settings: /manual/docs/page-setup.html
- Printing and Exporting: /manual/docs/print-export.html
- Project Data Grids: /manual/docs/project-data.html
- Signal Types: /manual/docs/signal-types.html
- Drawing Revisions: /manual/docs/revisions.html
- Teams: /manual/docs/teams.html
- Billing and Plans: /manual/docs/billing.html
- Your Account: /manual/docs/account.html
- Themes and Appearance: /manual/docs/appearance.html
- Keyboard Shortcuts: /manual/docs/keyboard-shortcuts.html
- FAQ and Troubleshooting: /manual/docs/faq.html


# The Drawing Editor

The drawing editor is where you build block diagrams, rack layouts and concept drawings. This page is a
tour of its parts: the menu bar, the library pane on the left, the canvas in the middle and the properties
pane on the right.

{{< screenshot name="editor-overview" alt="The drawing editor with the library pane, the canvas and the properties pane open" >}}

## Start Page and drawing view

When you open a project, the editor shows the **Start Page**: the project's drawings, tutorial videos and
answers to common questions. Opening a drawing switches to the drawing view, with the canvas in the middle
and both side panes open.

To go back to the Start Page, use any of these:

- **Start Page** at the top of the library pane
- the Simple Wires logo or the menu icon beside it at the left of the menu bar
- **View > Start Page**

See [Drawings and the Start Page]({{< relref "drawings" >}}) for creating, opening and managing drawings.

The menu bar shows where you are as **Project / Drawing**. It adds **View Only** when you can't change the
project, and **Saving changes...** while a save is in progress.

## The menu bar

The menus change with the view. The **Edit** and **Settings** menus, and the drawing commands on the
**File** menu, appear only while a drawing is open.

| Menu | What it's for | More |
|---|---|---|
| **File** | **New ...**, **Open**, **Rename ...**, **Save (Ctrl + S)**, **Save As ...** and **Delete** for drawings; **Print** and **Export to PDF**, **DWG**, **PNG** and **SVG**. In a data grid it shows **Export to Excel** instead. | [Drawings]({{< relref "drawings" >}}), [Printing and Exporting]({{< relref "print-export" >}}) |
| **Edit** | **Undo**, **Redo**, **Cut**, **Copy**, **Paste**, **Delete**, and the **Grouping**, **Alignment** and **Z-Order** submenus. | [Grouping, aligning and stacking]({{< relref "blocks#grouping-aligning-and-stacking" >}}) |
| **Cables** | **Number All**, **Number Remaining** and **Reset All** for cable numbers. | [Drawing Cables]({{< relref "cables" >}}) |
| **View** | **Zoom In**, **Zoom Out**, **Zoom Fit**, **Show Grid**, **Snap to Grid**, **Show Guidelines**, **Show/Hide Signal Types for Editing** and **Start Page**. | [Grid, snap and guidelines](#grid-snap-and-guidelines) |
| **Project Data** | The project-wide grids: **Signal Types**, **Drawings and Revisions**, **Equipment**, **Bill of Materials** and **Cables**. | [Project Data Grids]({{< relref "project-data" >}}), [Signal Types]({{< relref "signal-types" >}}), [Drawing Revisions]({{< relref "revisions" >}}) |
| **Settings** | **Active Stroke**, **Active Fill** and **Active Text Style** for new items, **Page Settings**, and **Cable Behavior**. | [Page Setup and Drawing Settings]({{< relref "page-setup" >}}) |
| **Help** | **Help Contents**, **Help for This View**, **Forum**, and **Submit this drawing to support**. | [Getting help](#getting-help) |

The avatar with your initials at the right end of the menu bar opens your account menu: **Upgrade** (on
the Free plan), **Projects Dashboard**, **Billing**, **Manage Password**, **Theme** and **Logout**. See
[Projects Dashboard]({{< relref "projects" >}}), [Billing and Plans]({{< relref "billing" >}}),
[Your Account]({{< relref "account" >}}) and [Themes and Appearance]({{< relref "appearance" >}}).

> [!NOTE]
> What you see depends on your permissions. If you can only view a project, the commands that change a
> drawing are hidden. Team members with the **VIEWER** role also don't see the print and export commands.
> See [Sharing Projects]({{< relref "sharing" >}}) and [Teams]({{< relref "teams" >}}).

## The library pane

The left pane holds everything you can drag onto the canvas. Click a section header to expand or collapse
it, then drag an item from the section and drop it on the canvas.

| Section | Contains | More |
|---|---|---|
| **Start Page** | Returns to the project's Start Page. | [Drawings and the Start Page]({{< relref "drawings" >}}) |
| **Warehouses** | Your own saved items and the ones shared with the project, reusable in any drawing. | [Warehouses]({{< relref "warehouses" >}}) |
| **Master Library** | Opens the Master Library dialog to search for equipment by manufacturer and model. | [Master Library]({{< relref "equipment-library" >}}) |
| **Functional Block Prototypes** | Generic blocks with ports, ready to name. | [Functional Blocks and Ports]({{< relref "blocks" >}}) |
| **Off Sheet Pointers** | Pointers that link a cable to another drawing. | [Off Sheet Pointers]({{< relref "off-sheet-pointers" >}}) |
| **Resizable Rack Panels** | Rack panels to mount in racks. | [Racks and Rack Panels]({{< relref "racks" >}}) |
| **Resizable Racks** | Equipment racks you size in rack units. | [Racks and Rack Panels]({{< relref "racks" >}}) |
| **Page Borders** | Title blocks for the drawing sheet. | [Page borders]({{< relref "shapes-text-images#page-borders" >}}) |

<!-- VERIFY: does expanding one library section collapse the others (Bootstrap collapse with data-parent="#MainMenu")? -->

{{< screenshot name="editor-library-pane" alt="The library pane with the Functional Block Prototypes section expanded" >}}

### Icons or list

**Functional Block Prototypes**, **Off Sheet Pointers**, **Resizable Rack Panels**, **Resizable Racks** and
**Page Borders** each show an **Icons** and a **List** button at the top.

- **Icons** shows two drawings of each item per row.
- **List** shows one item per row, grouped under headings such as **Numbered bottom-up** or **Half width**,
  with its name and a line describing it, for example 42 rack units, U1 at the bottom. Click a heading to
  fold that group away.

The choice applies to all five sections at once and is remembered in your browser. Dragging works the same
in both views.

{{< screenshot name="editor-palette-icons" alt="The Resizable Racks section of the library pane in Icons view, showing racks as small drawings" >}}

{{< screenshot name="editor-palette-list" alt="The Resizable Racks section of the library pane in List view, with headings and a description beside each rack" >}}

## The canvas

The canvas shows the drawing sheet. The page outline and margins come from **Settings > Page Settings**
(see [Page Setup and Drawing Settings]({{< relref "page-setup" >}})). Keep your drawing inside the page
outline so it lands on the sheet when you print or export.

<!-- VERIFY: what happens to content outside the page outline when printing/exporting (clipped, or included)? -->

### Zooming and panning

- Turn the mouse wheel to zoom in and out.
- **View > Zoom In** and **View > Zoom Out** zoom in steps.
- **View > Zoom Fit** zooms so that everything in the drawing fits the canvas.
- Use the scroll bars, or drag on an empty part of the canvas, to move around.

<!-- VERIFY: dragging on the empty canvas with the Select tool pans; pressing and holding before dragging draws a selection box (GoJS default delay). Confirm both in the current app. -->

### Selecting and editing

With the **Select** tool active (the arrow button under **Active Tool**):

- Click an item to select it. <kbd>Shift</kbd>+click or <kbd>Ctrl</kbd>+click adds items to the
  selection, and dragging a box around items selects them all.
- Drag a selected item to move it. The arrow keys nudge the selection; hold <kbd>Ctrl</kbd> to move one
  pixel at a time.
- Drag the square handles to resize, and the round handle to rotate.
- Click a piece of text, such as a port name or a block's **SysName**, to edit it in a small card beside
  it. Press <kbd>Enter</kbd> or click elsewhere to save, or <kbd>Esc</kbd> to cancel. See
  [Naming blocks]({{< relref "blocks#naming-blocks" >}}).
- Drag from a port to another port to draw a cable. See [Drawing Cables]({{< relref "cables" >}}).
- Right-click a block, port, rack, rack panel or group to open its context menu.

<!-- VERIFY: Shift+click and Ctrl+click behavior (GoJS defaults: Shift adds, Ctrl toggles). -->

Common shortcuts include <kbd>Ctrl</kbd>+<kbd>S</kbd> to save, <kbd>Ctrl</kbd>+<kbd>C</kbd>,
<kbd>Ctrl</kbd>+<kbd>X</kbd> and <kbd>Ctrl</kbd>+<kbd>V</kbd> to copy, cut and paste, and
<kbd>Delete</kbd> to delete the selection. See [Keyboard Shortcuts]({{< relref "keyboard-shortcuts" >}})
for the full list.

## Grid, snap and guidelines

The **View** menu has switches that help you line things up. Each is saved with the drawing.

- **Show Grid** shows or hides the background grid.
- **Snap to Grid** makes items snap to the grid as you move and resize them.
- **Show Guidelines** draws temporary lines while you drag an item, when its edges or center line up with
  a nearby item.
- **Show/Hide Signal Types for Editing** swaps the connector labels on every functional block in the
  drawing for their signal types, so you can change them. See
  [Port signal types]({{< relref "blocks#port-signal-types" >}}).

{{< screenshot name="editor-view-menu" alt="The View menu with the grid, snap and guideline switches" >}}

## The properties pane

The right pane has two parts.

**Active Tool** picks what a click or drag on the canvas does: **Select**, **Polyline**, **Polygon**,
**Text**, **Image** or **Shape**. A drawing tool stays active until you pick another one, so click
**Select** when you are done drawing. See [Drawing tools]({{< relref "shapes-text-images#drawing-tools" >}}).

**Properties** shows the settings of the current selection on four tabs, labelled with icons:

| Tab | Settings | More |
|---|---|---|
| **General** (paint bucket) | **Count in BOM**, **Lock Position**, **Shape**, **Stroke** and **Fill** | [Lock Position and Count in BOM]({{< relref "blocks#lock-position-and-count-in-bom" >}}), [Shape formatting]({{< relref "shapes-text-images#shape-formatting" >}}) |
| **Text** (letter A) | **Text Kind**, bold, italic, visibility, **Font**, **Size**, **Foreground** and **Rotation** | [Text]({{< relref "shapes-text-images#text" >}}) |
| **Image** (picture) | **Image URL**, **Visible**, **Stretch**, **Upload Image** and **Uploaded Images** | [Images]({{< relref "shapes-text-images#images" >}}) |
| **Cable** (cable) | Cable labels, lock, length, stroke and cable type | [Cable properties]({{< relref "cables#cable-properties" >}}) |

When you select a cable the pane switches to the **Cable** tab; when you select anything else it switches
to **General**. With nothing selected the settings are disabled. If you select several items whose values
differ, that field shows blank; setting it applies the value to all of them.

{{< screenshot name="editor-properties-pane" alt="The properties pane showing the Active Tool buttons and the General tab for a selected block" >}}

## Resizing and hiding the side panes

Both side panes open when you open a drawing, and close when you go to the Start Page or a Project Data
grid.

- To make a pane wider or narrower, drag the handle on its inner edge, between the pane and the canvas.
- To hide a pane, click the small arrow button in the middle of its handle. A narrow strip stays at the edge
  of the window.
- To bring the pane back, click the arrow button on that strip.

The canvas grows and shrinks to fill the space.

<!-- VERIFY: clicking the closed strip itself (not the arrow) slides the pane out over the canvas temporarily (jQuery UI Layout "slidable" default). -->

{{< screenshot name="editor-pane-handles" alt="The drawing editor with the right pane hidden, showing the pane handle and its arrow button" >}}

## Getting help

Press <kbd>F1</kbd> anywhere in the editor to open the Help panel at the topic for what you are doing.
For example, in a drawing it opens this page, with the **Cable** tab showing it opens
[Cable properties]({{< relref "cables#cable-properties" >}}), and in the **Add Ports** dialog it opens
[Adding ports]({{< relref "blocks#adding-ports" >}}). <kbd>F1</kbd> works inside dialogs and while the
**Settings** menu is open.

- Press <kbd>Esc</kbd> or click the close button to hide the panel.
- Click the new-tab button at the top of the panel to open the page in its own browser tab.
- **Help > Help Contents** opens the manual's contents in the panel, and **Help > Help for This View**
  does the same as <kbd>F1</kbd>.
- Round **?** buttons, such as the one on the **Off Sheet Pointers** header, open the topic for that
  feature.

The **Help** menu also has **Forum**, which opens the Simple Wires forum in a new tab, and **Submit this
drawing to support**, which asks for a message and then sends a copy of the open drawing to the support
team.

<!-- VERIFY: does Submit this drawing to support send the last saved version, or include unsaved changes? -->

{{< screenshot name="editor-help-panel" alt="The Help panel open beside the drawing editor after pressing F1" >}}