Working with the Canvas - McManning/BlueGraph GitHub Wiki

Double click on a graph asset in your project to open the Canvas window. Here is where you (or your designer) will add and remove nodes from a graph, make edges between nodes, and set values in editable fields on each node instance.

Mouse Controls

  • Left click on a node to select it or left click and drag an empty space on the canvas to select multiple nodes at once.
  • Left click and drag from a port onto another node's port to make a connection. When dragging the edge, any ports that can safely accept that connection will light up.
  • Left click and drag from a port onto an empty space on the canvas to open a search window filtered to only nodes that can connect to that port.
  • Right click a node or comment to get a context menu of actions (copy, delete, etc).
  • Double left click the text of a comment to edit it. Press enter or click out of the comment once you're done.
  • Middle click and drag to pan around the canvas
  • Scroll wheel to zoom in and out of the canvas

Keyboard Shortcuts

  • Space - Open a search window search to add a new node to the graph.
  • Delete - Delete selected nodes or comments from the graph
  • C - Add a comment block at the cursor or around the selected nodes
  • H - Horizontally align selected nodes
  • V - Vertically align selected nodes
  • Ctrl+C / Cmd+C - Copy selected nodes on the graph into the clipboard
  • Ctrl+X / Cmd+X - Cut selected nodes off the graph and into the clipboard
  • Ctrl+V / Cmd+V - Paste nodes from the clipboard, centered around the cursor's current position

Undo / Redo Support

Typical undo / redo commands within Unity will work with the following actions:

  • Adding a new node
  • Removing selected node(s)
  • Pasting a set of previously copied nodes
  • Adding a comment
  • Removing a comment
  • Adding an edge between two nodes
  • Removing an edge between two nodes

Context Menus

The graph contains a right click context menu for adding/duplicating/manipulating nodes.

Each node also contain a context menu for manipulation, as well as shortcuts for opening the Node's script file in your editor. By adding the [ContextMenu] attribute to a method in your node, you can add additional items to this menu.