From 1916d100694cefea1afc9b7a87cee0fe7ea96382 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Thu, 21 Jul 2022 12:07:52 +0200
Subject: [PATCH] Adjusts interactions for links
---
src/editor/js/components/editor.tsx | 57 +++++++++++++++--------------
1 file changed, 30 insertions(+), 27 deletions(-)
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index 6c33719..71a9433 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>
);
--
GitLab