Understanding Tool Modes

Tool Modes

You can switch between mouse modes using hotkeys or tool selection. Here are hotkeys that control your mode:

• Spacebar: Temporarily enables the alternative mouse mode (default mode vs pan mode)
• H: Switches to pan mode (hand icon)
• Escape / V: Switches to default mode irrespective of which mode you are currently using.

Interacting with Components

Default Mode (no tool selected)

Hover: Nothing
Cursor style: “default (arrow)”

Click-and-drag: Moves component in the direction of the mouse.
Cursor style: “move”

Click: Displays the component toolbar, resize box, and connections handles.
Cursor style: “default (arrow)”

Double-click:
Cursor style: “pointer”

• Components - Opens the component configurator.
  

• Textbox - Enables text editing inside the component.
  Cursor style: “text”
  

Right-click: Opens the circular component context menu.
Cursor style: “default (arrow)”

Click-and-hold: Initiates box selection for selecting of multiple components.
Cursor style: “crosshair”

Scroll wheel: Pan up or down in the direction of the mouse.
Cursor style: “default (arrow)”

Scroll wheel + CMD/CTL: Zoom in/out in the direction of the mouse.
Cursor style: “default (arrow)”

Horizontal scroll wheel: Pan left or right in the direction of the mouse.
Cursor style: “default (arrow)”

Pencil Mouse Mode

Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs.
Hover: Nothing
Cursor style: “custom(pencil)”
Mouse down and drag: Start drawing a freeform line.
Cursor style: “custom(pencil)”

Mouse down + SHIFT: Start drawing a straight line in the direction of the mouse, which will initiate and remain as either a vertical or horizontal line.
Cursor style: “custom(pencil)”
Mouse up: Complete the line and renders into a component with full styling capabilities.
Cursor style: “custom(pencil)”
Click: Draws ink from the pencil.
Cursor style: “custom(pencil)”
Scroll wheel: Nothing Cursor style: “custom(pencil)”
Scroll wheel + CMD/CTL: Nothing
Cursor style: “custom(pencil)”

Pen Tool Mode

The Pen tool operates as a creator of annotation edges. Note that the pen tool has two behaviors depending upon the context in which you initiate the connection.

The Pen Tool Mode is activated using CMD+E.

Component-connect Behavior: When you click an empty spot on the canvas, and drag to another empty spot on the canvas, you get a joint (aka a terminal node) from which you can create new connections as well as new edge relationships.

Canvas-connect Behavior: When you click an empty spot on the canvas, and drag to an existing component, you get an annotation edge relationship.

Hover: Nothing

Cursor style: “pen”

Mouse down and drag: Nothing

Creating connections happens in three phases.

1. Click (press primary mouse button and release): Initiate connection.

Cursor style: “pen”

1. Click and move: if a connection was initiated, moves the ghost edge around else does nothing.

Cursor style: “pen” and the annotation edge following the mouse around.

1. Click while connecting: Establish and render connection.

Cursor style: “pen”

How to Draw and Connect Lines

How to customize nodes at the ends of connections

Pan Mouse Mode

Hover: Nothing Cursor style: “hand”
Click-and-hold: Grab the canvas and pan in the direction of mouse movement.
Cursor style: “grabbing-hand”
Scroll wheel + CMD/CTL: Zoom in/out in the direction of the mouse.
Cursor style: “grabbing-hand”
Horizontal scroll wheel: Pan left or right in the direction of the mouse.
Cursor style: “grabbing-hand”