Skip to content

Commit 9d8400b

Browse files
leecalcoteleecalcote
committed
[Designer] Tool Modes
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 8a3a866 commit 9d8400b

File tree

3 files changed

+191
-1
lines changed

3 files changed

+191
-1
lines changed

‎content/en/kanvas/designer/comments/_index.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ Customize your notification preferences to mute email notifications for comments
9191
- You'll never miss an important mention, as notifications for mentions outside the muted thread remain active.
9292
{{< /alert >}}
9393

94-
9594
## Best Practices for Effective Design Reviews
9695

9796
### Be specific and actionable

‎content/en/kanvas/designer/understandingr-tool-modes/_index.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
title: Understanding Tool Modes
3+
description: >
4+
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.
5+
weight: 7
6+
categories: [Designer]
7+
tags: [designs]
8+
aliases:
9+
---
10+
# Tool Modes
11+
12+
You can switch between mouse modes using hotkeys or tool selection. Here are hotkeys that control your mode:
13+
14+
**Spacebar**: Temporarily enables the alternative mouse mode (default mode vs pan mode)
15+
**Escape**: Switches to default mode irrespective of which mode you are currently using.
16+
17+
## Interacting with Components
18+
19+
### Default Mode (no tool selected)
20+
21+
**Hover**: Displays subtle indication of focus by outlining the component with a light green color.
22+
Cursor style: “default (arrow)”
23+
**Click-and-drag:** Moves component in the direction of the mouse.
24+
Cursor style: “move”
25+
**Click**: Displays the component toolbar, resize box, and connections handles.
26+
27+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
28+
29+
**Double-click**:
30+
31+
- Components \- Opens the component configurator.
32+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
33+
34+
Cursor style: “pointer”
35+
36+
- Textbox \- Enables text editing inside the component.
37+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
38+
39+
Cursor style: “text”
40+
41+
**Right-click**: Opens the circular component context menu.
42+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
43+
44+
## Interacting with the Canvas
45+
46+
### Default Mode (no tool selected)
47+
48+
**Hover:** Nothing
49+
Cursor style: “default (arrow)”
50+
**Click**: Nothing
51+
Cursor style: “default (arrow)”
52+
**Double-click**: Opens the quick component configurator.
53+
54+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
55+
56+
Cursor style: “pointer”
57+
58+
**Right-click**: Opens design context menu
59+
60+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
61+
62+
Cursor style: “default (arrow)”, with “pointer” on hover of a menu item.
63+
64+
**Click-and-hold:** Initiates box selection for selecting of multiple components.
65+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
66+
67+
Cursor style: “crosshair”
68+
**Scroll wheel**: Pan up or down in the direction of the mouse.
69+
70+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
71+
72+
Cursor style: “grabbing-hand”
73+
74+
**Scroll wheel \+ CMD/CTL**: Zoom in/out in the direction of the mouse.
75+
Cursor style: “grabbing-hand”
76+
77+
**Horizontal scroll wheel**: Pan left or right in the direction of the mouse.
78+
Cursor style: “grabbing-hand”
79+
80+
#### Pencil Mouse Mode
81+
82+
Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs.
83+
**Hover:** Nothing
84+
Cursor style: “custom(pencil)”
85+
**Mouse down and drag:** Start drawing a freeform line.
86+
87+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
88+
89+
Cursor style: “custom(pencil)”
90+
**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.
91+
Cursor style: “custom(pencil)”
92+
**Mouse up**: Complete the line and renders into a component with full styling capabilities.
93+
Cursor style: “custom(pencil)”
94+
**Click**: Draws ink from the pencil.
95+
Cursor style: “custom(pencil)”
96+
**Scroll wheel**: Nothing
97+
Cursor style: “custom(pencil)”
98+
**Scroll wheel \+ CMD/CTL**: Nothing
99+
Cursor style: “custom(pencil)”
100+
101+
<!-- *Developer notes:*
102+
103+
1. *In the future, the canvas moves with the pen/pencil as they near the edge of the viewport.*
104+
2. *In the future, the scroll wheel will behave as it normally does in default mode.* -->
105+
106+
#### Connector Tool Mode
107+
108+
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.
109+
110+
{{< alert title="Connector Behaviors">}}
111+
**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.
112+
113+
**Canvas-connect Behavior**: When you click an empty spot on the canvas, and drag to an existing component, you get an annotation edge relationship.
114+
115+
{{< /alert >}}
116+
117+
**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.
118+
119+
**Canvas-connect Behavior**: When you click an empty spot on the canvas, and drag to an existing component, you get an annotation edge relationship.
120+
121+
**Hover:** Nothing
122+
123+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
124+
125+
Cursor style: “connector (pen)” (*might* change in the future)
126+
127+
**Mouse down and drag:** Nothing
128+
129+
Creating connections happens in three phases.
130+
131+
1. **Click** (press primary mouse button and release)**:** Initiate connection.
132+
133+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
134+
135+
Cursor style: “connector (pen)”
136+
1. **Click and move:** if a connection was initiated, moves the ghost edge around else does nothing.
137+
138+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
139+
140+
Cursor style: “connector (pen)” and the annotation edge following the mouse around.
141+
1. **Click while connecting**: Establish and render connection.
142+
143+
<img style="width:250px;" src="./tool-mode-placeholder.svg" />
144+
145+
Cursor style: “connector (pen)”
146+
147+
<!--
148+
*Developer notes:*
149+
150+
1. *In future, when the connector is released on an empty spot on the canvas, offer a component picker from which users can always choose a “Joint” component.*
151+
2. *Rename PenTerminalNode to “**Joint**”, unless there’s something better to call it.* -->
152+
153+
#### Pan Mouse Mode
154+
155+
**Hover:** Nothing
156+
Cursor style: “hand”
157+
**Click-and-hold:** Grab the canvas and pan in the direction of mouse movement.
158+
Cursor style: “grabbing-hand”
159+
**Scroll wheel \+ CMD/CTL**: Zoom in/out in the direction of the mouse.
160+
Cursor style: “grabbing-hand”
161+
**Horizontal scroll wheel**: Pan left or right in the direction of the mouse.
162+
Cursor style: “grabbing-hand”

0 commit comments

Comments
 (0)