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.
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:

HotkeysDescription
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

ActionCursor StyleBehaviorExample
Hoverdefault (arrow)Nothing
Click
Click-and-dragmoveMoves component in the direction of the mouse
Click and drag
Clickdefault (arrow)Displays component toolbar, resize box, and connection handles
Click
Double-click (component)pointerOpens the component configurator
Double-click component
Double-click (textbox)textEnables text editing inside the component
Double-click textbox
Right-clickdefault (arrow)Opens the circular component context menu
Right-click
Click-and-holdcrosshairInitiates box selection for selecting multiple components
Box selection
Scroll wheeldefault (arrow)Pan up or down
Scroll
Scroll wheel + CMD/CTRLdefault (arrow)Zoom in/out
Zoom
Horizontal scroll wheeldefault (arrow)Pan left or right
Scroll left/right

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

ActionCursor StyleBehaviorExample
Hovercustom(pencil)Nothing
Pencil hover
Mouse down + dragcustom(pencil)Start drawing a freeform line
Freeform line
Mouse down + SHIFTcustom(pencil)Start drawing a straight vertical or horizontal line
Straight line
Mouse upcustom(pencil)Complete the line and render into a styled component
Mouse up
Clickcustom(pencil)Draws ink from the pencil
Ink
Scroll wheelcustom(pencil)Nothing
Mouse down
Scroll wheel + CMD/CTRLcustom(pencil)Nothing
Zoom

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.
PhaseCursor StyleBehaviorExample
1. Click & releasepenInitiate connection
Phase 1
2. Click-and-movepenMove the ghost edge around if a connection was initiated
Phase 2
3. Click while connectingpenEstablish and render the connection
Phase 3

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

ActionCursor StyleBehavior
HoverhandNothing
Click-and-holdgrabbing-handGrab the canvas and pan in the direction of mouse movement
Scroll wheel + CMD/CTRLgrabbing-handZoom in/out in the direction of the mouse
Horizontal scroll wheelgrabbing-handPan left or right in the direction of the mouse

Recent Discussions on Kanvas