Understanding Tool Modes

Tool Modes

You can switch between mouse modes using hotkeys or tool selection. Here are hotkeys that control your mode:

Spacebar: Temporarily enables the alternative mouse mode (default mode vs pan mode)
Escape: Switches to default mode irrespective of which mode you are currently using.

Interacting with Components

Default Mode (no tool selected)

Hover: Displays subtle indication of focus by outlining the component with a light green color.
Cursor style: “default (arrow)”
Click-and-drag: Moves component in the direction of the mouse.
Cursor style: “move”
Click: Displays the component toolbar, resize box, and connections handles.

Double-click:

• Components - Opens the component configurator.
  

Cursor style: “pointer”

• Textbox - Enables text editing inside the component.
  

Cursor style: “text”

Right-click: Opens the circular component context menu.

Interacting with the Canvas

Default Mode (no tool selected)

Hover: Nothing
Cursor style: “default (arrow)”
Click: Nothing
Cursor style: “default (arrow)”
Double-click: Opens the quick component configurator.

Cursor style: “pointer”

Right-click: Opens design context menu

Cursor style: “default (arrow)”, with “pointer” on hover of a menu item.

Click-and-hold: Initiates box selection for selecting of multiple components.

Cursor style: “crosshair”
Scroll wheel: Pan up or down in the direction of the mouse.

Cursor style: “grabbing-hand”

Scroll wheel + CMD/CTL: Zoom in/out in the direction of the mouse.
Cursor style: “grabbing-hand”

Horizontal scroll wheel: Pan left or right in the direction of the mouse.
Cursor style: “grabbing-hand”

Pencil Mouse Mode

Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs.
Hover: Nothing
Cursor style: “custom(pencil)”
Mouse down and drag: Start drawing a freeform line.

Cursor style: “custom(pencil)”
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.
Cursor style: “custom(pencil)”
Mouse up: Complete the line and renders into a component with full styling capabilities.
Cursor style: “custom(pencil)”
Click: Draws ink from the pencil.
Cursor style: “custom(pencil)”
Scroll wheel: Nothing Cursor style: “custom(pencil)”
Scroll wheel + CMD/CTL: Nothing
Cursor style: “custom(pencil)”

Connector Tool Mode

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.

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.

Hover: Nothing

Cursor style: “connector (pen)” (might change in the future)

Mouse down and drag: Nothing

Creating connections happens in three phases.

1. Click (press primary mouse button and release): Initiate connection.

Cursor style: “connector (pen)”

1. Click and move: if a connection was initiated, moves the ghost edge around else does nothing.

Cursor style: “connector (pen)” and the annotation edge following the mouse around.

1. Click while connecting: Establish and render connection.

Cursor style: “connector (pen)”

Pan Mouse Mode

Hover: Nothing Cursor style: “hand”
Click-and-hold: Grab the canvas and pan in the direction of mouse movement.
Cursor style: “grabbing-hand”
Scroll wheel + CMD/CTL: Zoom in/out in the direction of the mouse.
Cursor style: “grabbing-hand”
Horizontal scroll wheel: Pan left or right in the direction of the mouse.
Cursor style: “grabbing-hand”

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