diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx index 6c33719d0ed2a519a606d27db565bd5c103b4a17..71a9433e20a7c033ce9c9e95cf17e53641d04b2d 100644 --- a/src/editor/js/components/editor.tsx +++ b/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> );