Merge pull request #268 from Steve-Mcl/update-wiring-tips

Update wiring info

Author: knolleary

css/simplegrid.css

@@ -147,3 +147,26 @@ body {
 		padding-right: 0px !important;
 	}
 }
+
+
+
+.row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 100%;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 1
+}
+
+.double-column {
+	display: flex;
+	flex-direction: column;
+	flex-basis: 100%;
+	flex: 2
+}

docs/user-guide/editor/images/delete-node-keep-wires.gif

@@ -51,6 +51,66 @@ the wire is deleted.
 If a port has multiple wires connected to it, if none of them is selected when
 button is pressed with the `Shift` key held, all of the wires will move.
 
+#### Selecting multiple wires
+
+You can also select multiple wires by holding <kbd>ctrl</kbd> while clicking on them.
+
+When you select multiple nodes, we also highlight any wires between them. This can make it easier to follow a flow once you have selected it.
+
+<div class="figure">
+  <img src="../images/select-multiple-wires.png" alt="">
+  <p class="caption">Selecting multiple wires</p>
+</div>
+
+
 #### Deleting wires
 
-To delete a wire, first select it by clicking on it and then press the `delete` key.
+1. Select one or more wires 
+    1. To select a single wire, left click 1 wire.
+    1. To select multiple wires, left click 1 wire then while holding <kbd>ctrl/⌘</kbd>, click on the other wires.
+1. Press the <kbd>delete</kbd> key
+
+
+#### Slicing wires
+You can also remove wires by slicing through them. You do this by holding the ctrl (or cmd) key, then dragging the mouse with the right-hand button pressed:
+
+<div class="figure">
+  <img src="../images/slicing-wires.gif" alt="">
+  <p class="caption">Slicing wires</p>
+</div>
+
+
+#### Detaching nodes
+
+##### Delete Node, keep wires
+You can delete a node from the middle of a flow and have the wiring automatically repair itself in the background:
+
+
+<div class="row">
+  <div class="figure column">
+    <img src="../images/delete-node-keep-wires.gif" alt="">
+    <p class="caption">Delete Node, keep wires</p>
+  </div>
+  <table class="action-ref double-column">
+    <tr><th colspan="2">Reference</th></tr>
+    <tr><td>Action</td><td><code>core:core:delete-selection-and-reconnect</code></td></tr>
+    <tr><td>Key shortcut</td><td><kbd>Ctrl/⌘-delete</kbd></td></tr>
+  </table>
+</div>
+
+##### Detach Node from wires
+You can also detach a node from the flow without deleting it:
+
+<div class="row">
+  <div class="figure column">
+    <img src="../images/detatch-node-from-wire.gif" alt="">
+    <p class="caption">Detach Node from wires</p>
+  </div>
+  <table class="action-ref double-column">
+    <tr><th colspan="2">Reference</th></tr>
+    <tr><td>Action</td><td><code>core:detach-selected-nodes</code></td></tr>
+    <tr><td>Key shortcut</td><td><code>*Not assigned</code></td></tr>
+  </table>
+</div>
+
+<i>\* There is no default shortcut for **Detach Node from wires**, but you can assign one yourself in the Keyboard pane of the Settings dialog.</i>