From 4e19db355329e73d53782b20a21f28f693a153aa Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Tue, 30 Aug 2022 00:11:42 +0200
Subject: [PATCH] Graph will now center according to width of free space
---
src/editor/js/components/editor.css | 1 +
src/editor/js/components/editor.tsx | 21 ++++++++++++++++++---
2 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/src/editor/js/components/editor.css b/src/editor/js/components/editor.css
index ad012a7..5869026 100644
--- a/src/editor/js/components/editor.css
+++ b/src/editor/js/components/editor.css
@@ -1,6 +1,7 @@
div#ks-editor #force-graph-renderer {
width: auto;
overflow-x: hidden;
+ flex-grow: 1;
}
div#ks-editor #sidepanel {
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index afdfb84..6e6adb8 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -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,
--
GitLab