You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs.
66
-
<ul>
67
-
<li><b>Hover:</b> Nothing
68
-
<br />Cursor style: “custom(pencil)”</li>
69
-
<br />
70
-
<li><b>Mouse down:</b> Initiates the pencil tool.
71
-
<br />Cursor style: “custom(pencil)”</li>
72
-
<br />
73
-
<li><b>Mouse down and drag:</b> Start drawing a freeform line.
74
-
<imgstyle="width:500px;"src="./pencil.gif" />
75
-
<br />Cursor style: “custom(pencil)”</li>
76
-
<br />
77
-
<li><b>Mouse down + CTRL/CMD:</b> Start drawing a straight line in the direction of the mouse, which will initiate and remain as either a vertical or horizontal line.
78
-
<br />Cursor style: “custom(pencil)”</li>
79
-
<br />
80
-
<li><b>Mouse down + SHIFT:</b> Start drawing a straight line in the direction of the mouse, which will initiate and remain as either a vertical or horizontal line.
81
-
<br />Cursor style: “custom(pencil)”</li>
82
-
<br />
83
-
<li><b>Mouse up</b>: Complete the line and renders into a component with full styling capabilities.
84
-
<br />Cursor style: “custom(pencil)”</li>
85
-
<br />
86
-
<li><b>Click</b>: Draws ink from the pencil.
87
-
<br />Cursor style: “custom(pencil)”</li>
88
-
<br />
89
-
<li><b>Scroll wheel</b>: Nothing
90
-
<br />Cursor style: “custom(pencil)”</li>
91
-
<br />
92
-
<li><b>Scroll wheel \+ CMD/CTL</b>: Nothing
93
-
<br />Cursor style: “custom(pencil)”</li>
94
-
</ul>
95
-
<!-- *Developer notes:*
96
47
97
-
1. *In the future, the canvas moves with the pen/pencil as they near the edge of the viewport.*
1. *In the future, the canvas moves with the pen/pencil as they near the edge of the viewport.*
98
60
2. *In the future, the scroll wheel will behave as it normally does in default mode.* -->
99
61
100
62
{{< /tab >}}
101
-
{{< tab header="Pen Tool" lang="en" >}}
102
-
103
-
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.
104
63
105
-
The Pen Tool Mode is activated using <buttonclass="kbc-button kbc-button-xs"style="max-width:fit-content;margin:0px;position:relative;display:inline;">CMD+E</button>
**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.
66
+
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.
109
67
110
-
**Canvas-connect Behavior**: When you click an empty spot on the canvas, and drag to an existing component, you get an annotation edge relationship.
-**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.
74
+
-**Canvas-connect Behavior**: When you click an empty spot on the canvas, and drag to an existing component, you get an annotation edge relationship.
121
75
122
-
<b>Click</b> (press primary mouse button and release):
|**2. Click-and-move**|`pen`| Move the ghost edge around if a connection was initiated ||
82
+
|**3. Click while connecting**|`pen`| Establish and render the connection ||
126
83
127
-
<br />Cursor style: “pen”</li>
128
-
<br />
129
-
<li><b>Click and move:</b> if a connection was initiated, moves the ghost edge around else does nothing.
84
+
<!--
85
+
*Developer notes:*
86
+
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.*
87
+
2. *Rename PenTerminalNode to “**Joint**”, unless there’s something better to call it.*
The table below outlines the mouse interaction modes available in <strong>Kanvas</strong> while using, detailing cursor styles and their expected behavior.
142
95
143
-
<br />Cursor style: “pen” and the annotation edge following the mouse around.</li>
144
-
<br />
145
-
<li><b>Click while connecting</b>: Establish and render connection.
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.*
159
-
2. *Rename PenTerminalNode to “**Joint**”, unless there’s something better to call it.* -->
160
-
{{< /tab >}}
161
-
{{< tab header="Pan Tool" lang="en" >}}
162
-
<ul>
163
-
<li><b>Hover:</b> Nothing</b>
164
-
<br />Cursor style: “hand”</li>
165
-
<br />
166
-
<li><b>Click-and-hold:</b> Grab the canvas and pan in the direction of mouse movement.
167
-
<br />Cursor style: “grabbing-hand”</li>
168
-
<br />
169
-
<li><b>Scroll wheel \+ CMD/CTL</b>: Zoom in/out in the direction of the mouse.
170
-
<br />Cursor style: “grabbing-hand”</li>
171
-
<br />
172
-
<li><b>Horizontal scroll wheel</b>: Pan left or right in the direction of the mouse.
0 commit comments