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:
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 | Example |
---|---|---|---|
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 | Example |
---|---|---|---|
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 | Example |
---|---|---|---|
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 |
Recent Discussions on Kanvas
- 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
- Sep 28 | Trying to add screenshots of Containerd & Curiefense integration by Raman Thakur