From d488c0bcff058b00cb0c24b50cd5f88b31739f87 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Mon, 18 Jul 2022 23:22:18 +0200
Subject: [PATCH] Makes connect on drag optional and implementes proper labels
for checkboxes
---
src/editor/js/components/editor.tsx | 39 +++++++++++++++++++++++++++--
1 file changed, 37 insertions(+), 2 deletions(-)
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index c602df4..ac1d650 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -15,6 +15,7 @@ type propTypes = any;
type stateTypes = {
graph: Graph;
visibleLabels: boolean;
+ connectOnDrag: boolean;
selectedNode: Node;
keys: { [name: string]: boolean };
};
@@ -60,6 +61,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
this.state = {
graph: undefined,
visibleLabels: true,
+ connectOnDrag: true,
selectedNode: undefined,
keys: {},
};
@@ -338,6 +340,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
private handleNodeDrag(node: Node, translate: positionTranslate) {
this.selectNode(node);
+ // Should run connect logic?
+ if (!this.state.connectOnDrag) {
+ return;
+ }
+
const closest = this.state.graph.getClosestOtherNode(node);
// Is close enough for new link?
@@ -396,7 +403,13 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<li>CTRL+Click node to delete</li>
<li>Click link to delete</li>
<li>SHIFT+Click a second node to connect</li>
- <li>Drag node close to other node to connect</li>
+ {this.state.connectOnDrag ? (
+ <li>
+ Drag node close to other node to connect
+ </li>
+ ) : (
+ ""
+ )}
</ul>
<hr />
<NodeDetails
@@ -409,6 +422,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<hr />
<div>
<input
+ id="node-labe-visibility"
type={"checkbox"}
checked={this.state.visibleLabels}
onChange={(event) => {
@@ -422,7 +436,28 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
});
}}
/>
- Node labels // TODO: Proper label for checkbox
+ <label htmlFor="node-labe-visibility">
+ Node labels
+ </label>
+ <br />
+ <input
+ id="connect-on-drag"
+ type={"checkbox"}
+ checked={this.state.connectOnDrag}
+ onChange={(event) => {
+ const newValue = event.target.checked;
+ if (newValue == this.state.connectOnDrag) {
+ return;
+ }
+
+ this.setState({
+ connectOnDrag: newValue,
+ });
+ }}
+ />
+ <label htmlFor="connect-on-drag">
+ Connect nodes when dragged
+ </label>
</div>
</div>
{this.state.graph ? (
--
GitLab