Tool Modes
Categories:
The canvas has four tool modes. The mode decides what a mouse drag does: move an object, pan the view, draw freehand or draw a connecting line. Select is the default. This page lists how to enter and leave each mode, what every mouse gesture does in it, and the wheel and zoom controls that work in all of them.
Modes at a glance 🔗
| Mode | Purpose | Enter | Leave | Drag on empty canvas | Box selection |
|---|---|---|---|---|---|
| Select | Select, move, configure and style objects. The default. | V or Esc | Choose another mode | Draws a selection box | On |
| Pan | Move the view without touching objects. | H, or hold Space | V, Esc, or release Space | Pans the view | Off |
| Pencil | Draw freehand annotations. | Ctrl/Cmd + P, or the Pencil tool in the dock | The same shortcut, V or Esc | Draws a stroke | Off |
| Pen | Draw connecting lines and annotation edges. | Ctrl/Cmd + E, or the Pen tool in the dock | The same shortcut, V or Esc | Places points and lines | Off |
The Pencil and Pen dock icons turn green while their mode is active. The mode shortcuts work in Designer mode. Select and Pan also work in Operator mode.
Releasing Space returns you to Select, not to the mode you held it from. If you were drawing with Pencil or Pen, re-enter that mode afterward.
Kanvas ignores single-key shortcuts while you type in a text field, so typing a label or a comment never changes the mode.
Select mode 🔗
| Gesture | Result |
|---|---|
| Hover | No effect. |
| Click an object | Selects it and shows its style toolbar, resize handles and connection handles. |
| Drag an object | Moves it. Locked objects do not move. |
| Double-click a component | Opens its configurator. |
| Double-click a textbox or comment | Edits its text inline. |
| Right-click, or press and hold, on an object | Opens the object menu. |
| Right-click on empty canvas | Opens the canvas menu. See Canvas Actions. |
| Drag on empty canvas | Draws a selection box that selects the objects it covers. |
| Ctrl/Cmd + click | Adds an object to the selection or removes it. |
The cursor shows an arrow while hovering, a move cursor while dragging an object and a crosshair while you draw a selection box.
Object actions are listed in Canvas Objects.
Pan mode 🔗
Pan mode turns a drag on the canvas into a pan. The cursor is an open hand, and a closed hand while you drag. Hold Space to pan for as long as the key is down, or press H to stay in Pan mode until you leave it.
Pencil mode 🔗
Pencil draws freehand. Each stroke you release becomes one annotation object on the canvas.
| Gesture | Result |
|---|---|
| Press and drag | Draws a freehand stroke. |
| Release | Completes the stroke and turns it into an object. |
A new stroke is caribbean green, with thickness 1 and full opacity. Pencil has no color or thickness control before you draw. Select the stroke afterward and change its fill, border and opacity in the style toolbar. See Canvas Objects.
Pencil strokes connect to nothing. They annotate. Pan and box selection are off while Pencil is active.
Pen mode 🔗
Pen draws lines. Each line is an annotation edge, a non-binding relationship that carries no configuration, so it explains a design without changing it.
| Step | Result |
|---|---|
| Click on empty canvas | Places a small point to start from. |
| Click again elsewhere on empty canvas | Places another point and draws an edge between the two. Repeating this draws a connected line of segments. |
| Start from a component’s connection handle and release on another component or a point | Draws an edge between them. |
| Cancel mid-draw | Removes the dangling point. |
Points are small borderless shapes. Edges drawn with Pen use the same style controls as every other edge: color, line style, curve, arrowhead, label and animation. See Canvas Objects. Pan and box selection are off while Pen is active.
Edges between registry-defined components, which configure the components they join, are drawn in Select mode from a component’s connection handle. See Relationships.
Wheel and zoom controls 🔗
These are registered in Designer and Operator mode.
| Input | Result |
|---|---|
| Scroll wheel | Pans vertically. |
| Horizontal scroll, or Shift + scroll wheel | Pans horizontally. Each Shift step moves 50 pixels. |
| Ctrl/Cmd + scroll wheel | Zooms toward the pointer. Each step changes the zoom by 0.1. |
| Ctrl/Cmd + + and Ctrl/Cmd + - | Zooms in and out by the same step. |
The Options drawer sets the zoom range: a minimum from 0.1 to 5 (default 0.1) and a maximum from 0.1 to 30 (default 30). Zooming the page itself is left to the browser.
Object controls and badges appear only when the canvas is zoomed in far enough. When you are zoomed out, Kanvas shows a hint to zoom in to interact with elements.
Related reading 🔗
- Keyboard Shortcuts - every shortcut in one list.
- Whiteboarding - a task guide to drawing on a design.
- Designer - what Designer mode is for.
Related Reading
- Canvas Actions
- Add and Configure Components
- Build Designs
- Canvas Objects
- Clone a Design
- Collaborate and Review
Recent Discussions on Kanvas
- Jul 12 | Unleash Visual Power: Import Your Configs by zihan kuang
- Oct 14 | Explore Meshery's Published Relationship Design Examples by Awani Alero
- Oct 03 | Design Review RFC: Kanvas Empty State Enhancement by Lee Calcote
- Jul 19 | [For Discussion] Visual indication of semantically vs non-semantically meaningful Meshery components by Lee Calcote
- Jun 07 | What are the conditions for a "System is unhealthy" warning? by James
- May 30 | Looking for a meshmate to help with first PR by Faisal Imtiyaz123
- Feb 28 | For Discussion: Capturing potential, but unrealized Relationships in Design Snapshots by Lee Calcote
- Feb 12 | Hint on Scaling & Verifying Cronjob in Playground by Sandra Ashipala