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 > * {
margin: 0.25rem;
}
div#ks-editor #sidepanel .instruction {
border-radius: 4px;
background-color: #EEE;
padding-left: 3px;
padding-right: 2px;
}
div#ks-editor #content {
display: flex;
}
......
......@@ -221,13 +221,28 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
};
}
private selectNode(node: Node) {
this.setState({
selectedNode: 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();
} else {
this.setState({
selectedNode: node,
});
// By default, simply select node
this.selectNode(node);
}
this.forceUpdate();
}
......@@ -376,11 +391,35 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
/>
<hr />
<ul>
<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>Drag node close to other node to connect</li>
<li>
<div className="instruction">
Click background to create node
</div>
</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>
<hr />
<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