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.

Categories:

Designer

Kanvas Designer offers three modes: Default, Pencil, and Connector, which behave differently based on the context in which they are used. Understanding these modes is essential for effectively interacting with components and the canvas.

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

Hotkeys	Description
	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 🔗

Action	Cursor Style	Behavior
Hover	`default (arrow)`	Nothing
Click-and-drag	`move`	Moves component in the direction of the mouse
Click	`default (arrow)`	Displays component toolbar, resize box, and connection handles
Double-click (component)	`pointer`	Opens the component configurator
Double-click (textbox)	`text`	Enables text editing inside the component
Right-click	`default (arrow)`	Opens the circular component context menu
Click-and-hold	`crosshair`	Initiates box selection for selecting multiple components
Scroll wheel	`default (arrow)`	Pan up or down
Scroll wheel + CMD/CTRL	`default (arrow)`	Zoom in/out
Horizontal scroll wheel	`default (arrow)`	Pan left or right

Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs.

Action	Cursor Style	Behavior
Hover	`custom(pencil)`	Nothing
Mouse down + drag	`custom(pencil)`	Start drawing a freeform line
Mouse down + SHIFT	`custom(pencil)`	Start drawing a straight vertical or horizontal line
Mouse up	`custom(pencil)`	Complete the line and render into a styled component
Click	`custom(pencil)`	Draws ink from the pencil
Scroll wheel	`custom(pencil)`	Nothing
Scroll wheel + CMD/CTRL	`custom(pencil)`	Nothing

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.

To Activate: (CMD/CTRL)+E

Connector Behaviors

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.

Phase	Cursor Style	Behavior
1. Click & release	`pen`	Initiate connection
2. Click-and-move	`pen`	Move the ghost edge around if a connection was initiated
3. Click while connecting	`pen`	Establish and render the connection

The table below outlines the mouse interaction modes available in Kanvas while using, detailing cursor styles and their expected behavior.

Action	Cursor Style	Behavior
Hover	`hand`	Nothing
Click-and-hold	`grabbing-hand`	Grab the canvas and pan in the direction of mouse movement
Scroll wheel + CMD/CTRL	`grabbing-hand`	Zoom in/out in the direction of the mouse
Horizontal scroll wheel	`grabbing-hand`	Pan left or right in the direction of the mouse