Understanding Tool Modes

Kanvas Designer offers three modes: Default, Pencil, and Connector, which behave differently based on the context in which they are used. Learn how to interact with components and the canvas in each mode.
Tags:
Categories:

Tool Modes

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

  • : Temporarily enables the alternative mouse mode (default mode vs pan mode)
  • : Switches to pan mode (hand icon)
  • : 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)”

Connector Tool Mode

The Connector tool operates as a creator of annotation relationships. Note that the connector tool has two behaviors depending upon the context in which you initiate the connection.

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: “connector (pen)” (might change in the future)

Mouse down and drag: Nothing

Creating connections happens in three phases.

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

Cursor style: “connector (pen)”

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

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

  1. Click while connecting: Establish and render connection.

Cursor style: “connector (pen)”

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”

Last modified November 26, 2024: add png and gifs for understanding-tool-modes page (25b27d7)

Recent Discussions on Kanvas