Skip to content
Snippets Groups Projects
Commit 51bb2af4 authored by Maximilian Giller's avatar Maximilian Giller :squid:
Browse files

Implemented alternative connect mechanic

parent 0e479f02
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56730 passed
...@@ -18,6 +18,13 @@ div#ks-editor #sidepanel > * { ...@@ -18,6 +18,13 @@ div#ks-editor #sidepanel > * {
margin: 0.25rem; margin: 0.25rem;
} }
div#ks-editor #sidepanel .instruction {
border-radius: 4px;
background-color: #EEE;
padding-left: 3px;
padding-right: 2px;
}
div#ks-editor #content { div#ks-editor #content {
display: flex; display: flex;
} }
......
...@@ -221,13 +221,28 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> { ...@@ -221,13 +221,28 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
}; };
} }
private selectNode(node: Node) {
this.setState({
selectedNode: node,
});
}
private handleNodeClick(node: Node) { private handleNodeClick(node: Node) {
if (this.state.keys["Control"]) { if (this.state.keys["Shift"]) {
// Connect two nodes when second select while shift is pressed
if (this.state.selectedNode == undefined) {
// Have no node connected, so select
this.selectNode(node);
} else if (!this.state.selectedNode.equals(node)) {
// Already have *other* node selected, so connect
this.state.selectedNode.connect(node);
}
} else if (this.state.keys["Control"]) {
// Delete node when control is pressed
node.delete(); node.delete();
} else { } else {
this.setState({ // By default, simply select node
selectedNode: node, this.selectNode(node);
});
} }
this.forceUpdate(); this.forceUpdate();
} }
...@@ -376,11 +391,35 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> { ...@@ -376,11 +391,35 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
/> />
<hr /> <hr />
<ul> <ul>
<li>Click background to create node</li> <li>
<li>Click node to select and edit</li> <div className="instruction">
<li>CTRL+Click node to delete</li> Click background to create node
<li>Click link to delete</li> </div>
<li>Drag node close to other node to connect</li> </li>
<li>
<div className="instruction">
Click node to select and edit
</div>
</li>
<li>
<div className="instruction">
CTRL+Click node to delete
</div>
</li>
<li>
<div className="instruction">
Click link to delete
</div>
</li>
<li>
<div className="instruction">
SHIFT+Click a second node to connect
</div>
or
<div className="instruction">
Drag node close to other node to connect
</div>
</li>
</ul> </ul>
<hr /> <hr />
<NodeDetails <NodeDetails
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment