Adjusts interactions for links

src/editor/js/components/editor.tsx

@@ -368,8 +368,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     }
 
     private handleLinkClick(link: Link) {
-        link.delete();
-        this.forceUpdate();
+        if (this.state.keys["Control"]) {
+            // Delete link when control is pressed
+            link.delete();
+            this.forceUpdate();
+        }
     }
 
     private handleEngineStop() {
@@ -391,6 +394,30 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                 <h1>Interface</h1>
                 <SpaceSelect onLoadSpace={this.loadSpace} />
                 <div id="content">
+                    {this.state.graph ? (
+                        <ReactForceGraph2d
+                            ref={this.renderer}
+                            graphData={this.state.graph.data}
+                            onNodeClick={this.handleNodeClick}
+                            autoPauseRedraw={false}
+                            cooldownTicks={0}
+                            warmupTicks={this.warmupTicks}
+                            onEngineStop={this.handleEngineStop}
+                            nodeCanvasObject={this.handleNodeCanvasObject}
+                            nodeCanvasObjectMode={() => "after"}
+                            linkCanvasObject={this.handleLinkCanvasObject}
+                            linkCanvasObjectMode={() => "replace"}
+                            onNodeDrag={this.handleNodeDrag}
+                            onNodeDragEnd={this.handleNodeDragEnd}
+                            onLinkClick={this.handleLinkClick}
+                            onBackgroundClick={(event) =>
+                                this.handleBackgroundClick(
+                                    event,
+                                    this.extractPositions(event)
+                                )
+                            }
+                        />
+                    ) : undefined}
                     <div id="sidepanel">
                         <HistoryNavigator
                             spaceId="space"
@@ -402,7 +429,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                             <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>CTRL+Click link to delete</li>
                             <li>SHIFT+Click a second node to connect</li>
                             {this.state.connectOnDrag ? (
                                 <li>
@@ -466,30 +493,6 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                             Connect nodes when dragged
                         </label>
                     </div>
-                    {this.state.graph ? (
-                        <ReactForceGraph2d
-                            ref={this.renderer}
-                            graphData={this.state.graph.data}
-                            onNodeClick={this.handleNodeClick}
-                            autoPauseRedraw={false}
-                            cooldownTicks={0}
-                            warmupTicks={this.warmupTicks}
-                            onEngineStop={this.handleEngineStop}
-                            nodeCanvasObject={this.handleNodeCanvasObject}
-                            nodeCanvasObjectMode={() => "after"}
-                            linkCanvasObject={this.handleLinkCanvasObject}
-                            linkCanvasObjectMode={() => "replace"}
-                            onNodeDrag={this.handleNodeDrag}
-                            onNodeDragEnd={this.handleNodeDragEnd}
-                            onLinkClick={this.handleLinkClick}
-                            onBackgroundClick={(event) =>
-                                this.handleBackgroundClick(
-                                    event,
-                                    this.extractPositions(event)
-                                )
-                            }
-                        />
-                    ) : undefined}
                 </div>
             </div>
         );