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

Graph will now center according to width of free space

parent 09891d72
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56904 passed
div#ks-editor #force-graph-renderer {
width: auto;
overflow-x: hidden;
flex-grow: 1;
}
div#ks-editor #sidepanel {
......
......@@ -20,6 +20,7 @@ type stateTypes = {
connectOnDrag: boolean;
selectedNode: Node;
keys: { [name: string]: boolean };
graphWidth: number;
};
type clickPosition = {
graph: { x: number; y: number };
......@@ -36,6 +37,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
private defaultWarmupTicks = 100;
private warmupTicks = 100;
private renderer: any;
private graphContainer: any;
private graphInFocus = false;
constructor(props: propTypes) {
......@@ -57,8 +59,10 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
this.handleNodeDragEnd = this.handleNodeDragEnd.bind(this);
this.handleLinkClick = this.handleLinkClick.bind(this);
this.selectNode = this.selectNode.bind(this);
this.handleResize = this.handleResize.bind(this);
this.renderer = React.createRef();
this.graphContainer = React.createRef();
// Set as new state
this.state = {
......@@ -67,6 +71,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
connectOnDrag: false,
selectedNode: undefined,
keys: {},
graphWidth: 1000,
};
Interactions.initInteractions();
......@@ -111,10 +116,13 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
this.state.graph.onChangeCallbacks.push(this.onHistoryChange);
// Subscribe to global key-press events
// Subscribe to global events
document.onkeydown = this.handleKeyDown;
document.onkeyup = this.handleKeyUp;
document.onmousedown = this.handleMouseDown;
window.onresize = this.handleResize;
this.handleResize();
return true;
}
......@@ -157,6 +165,13 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
});
}
private handleResize() {
const newGraphWidth = this.graphContainer.current.clientWidth;
this.setState({
graphWidth: newGraphWidth,
});
}
/**
* Handler for background click event on force graph. Adds new node by default.
* @param event Click event.
......@@ -436,11 +451,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<SpaceSelect onLoadSpace={this.loadSpace} />
<SpaceManager />
<div id="content">
<div id="force-graph-renderer">
<div id="force-graph-renderer" ref={this.graphContainer}>
{this.state.graph ? (
<ReactForceGraph2d
ref={this.renderer}
width={2000}
width={this.state.graphWidth}
graphData={{
nodes: this.state.graph.data.nodes,
links: this.state.graph.links,
......
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