Makes connect on drag optional and implementes proper labels for checkboxes

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 ? (