Implemented alternative connect mechanic

src/editor/js/components/editor.css

@@ -18,6 +18,13 @@ div#ks-editor #sidepanel > * {
     margin: 0.25rem;
 }
 
+div#ks-editor #sidepanel .instruction {
+    border-radius: 4px;
+    background-color: #EEE;
+    padding-left: 3px;
+    padding-right: 2px;
+}
+
 div#ks-editor #content {
     display: flex;
 }

src/editor/js/components/editor.tsx

@@ -221,13 +221,28 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         };
     }
 
+    private selectNode(node: Node) {
+        this.setState({
+            selectedNode: node,
+        });
+    }
+
     private handleNodeClick(node: Node) {
-        if (this.state.keys["Control"]) {
+        if (this.state.keys["Shift"]) {
+            // Connect two nodes when second select while shift is pressed
+            if (this.state.selectedNode == undefined) {
+                // Have no node connected, so select
+                this.selectNode(node);
+            } else if (!this.state.selectedNode.equals(node)) {
+                // Already have *other* node selected, so connect
+                this.state.selectedNode.connect(node);
+            }
+        } else if (this.state.keys["Control"]) {
+            // Delete node when control is pressed
             node.delete();
         } else {
-            this.setState({
-                selectedNode: node,
-            });
+            // By default, simply select node
+            this.selectNode(node);
         }
         this.forceUpdate();
     }
@@ -376,11 +391,35 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                         />
                         <hr />
                         <ul>
-                            <li>Click background to create node</li>
-                            <li>Click node to select and edit</li>
-                            <li>CTRL+Click node to delete</li>
-                            <li>Click link to delete</li>
-                            <li>Drag node close to other node to connect</li>
+                            <li>
+                                <div className="instruction">
+                                    Click background to create node
+                                </div>
+                            </li>
+                            <li>
+                                <div className="instruction">
+                                    Click node to select and edit
+                                </div>
+                            </li>
+                            <li>
+                                <div className="instruction">
+                                    CTRL+Click node to delete
+                                </div>
+                            </li>
+                            <li>
+                                <div className="instruction">
+                                    Click link to delete
+                                </div>
+                            </li>
+                            <li>
+                                <div className="instruction">
+                                    SHIFT+Click a second node to connect
+                                </div>
+                                or
+                                <div className="instruction">
+                                    Drag node close to other node to connect
+                                </div>
+                            </li>
                         </ul>
                         <hr />
                         <NodeDetails