From 8718ac96ec4a70109816394096963426d98c2cc3 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Mon, 25 Jul 2022 12:33:22 +0200
Subject: [PATCH] Fixes some visual layout bugs
---
src/editor/js/components/editor.css | 10 ++++-
src/editor/js/components/editor.tsx | 51 ++++++++++++----------
src/editor/js/components/nodetypeentry.css | 2 +-
3 files changed, 37 insertions(+), 26 deletions(-)
diff --git a/src/editor/js/components/editor.css b/src/editor/js/components/editor.css
index 9325b6f..d99dc6e 100644
--- a/src/editor/js/components/editor.css
+++ b/src/editor/js/components/editor.css
@@ -1,11 +1,19 @@
+div#ks-editor #force-graph-renderer {
+ width: auto;
+ overflow-x: hidden;
+}
+
div#ks-editor #sidepanel {
- resize: horizontal;
+ /* resize: horizontal; */
overflow: auto;
min-width: 250px;
max-width: 40%;
height: inherit;
margin: 0.3rem;
+ margin-right: 0.3rem;
+ margin-left: auto;
padding: 0.25rem;
+ float: right;
background-color: white;
border: 1px lightgrey solid;
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index 71a9433..cb406dc 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -394,30 +394,33 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<h1>Interface</h1>
<SpaceSelect onLoadSpace={this.loadSpace} />
<div id="content">
- {this.state.graph ? (
- <ReactForceGraph2d
- ref={this.renderer}
- graphData={this.state.graph.data}
- onNodeClick={this.handleNodeClick}
- autoPauseRedraw={false}
- cooldownTicks={0}
- warmupTicks={this.warmupTicks}
- onEngineStop={this.handleEngineStop}
- nodeCanvasObject={this.handleNodeCanvasObject}
- nodeCanvasObjectMode={() => "after"}
- linkCanvasObject={this.handleLinkCanvasObject}
- linkCanvasObjectMode={() => "replace"}
- onNodeDrag={this.handleNodeDrag}
- onNodeDragEnd={this.handleNodeDragEnd}
- onLinkClick={this.handleLinkClick}
- onBackgroundClick={(event) =>
- this.handleBackgroundClick(
- event,
- this.extractPositions(event)
- )
- }
- />
- ) : undefined}
+ <div id="force-graph-renderer">
+ {this.state.graph ? (
+ <ReactForceGraph2d
+ ref={this.renderer}
+ width={2000}
+ graphData={this.state.graph.data}
+ onNodeClick={this.handleNodeClick}
+ autoPauseRedraw={false}
+ cooldownTicks={0}
+ warmupTicks={this.warmupTicks}
+ onEngineStop={this.handleEngineStop}
+ nodeCanvasObject={this.handleNodeCanvasObject}
+ nodeCanvasObjectMode={() => "after"}
+ linkCanvasObject={this.handleLinkCanvasObject}
+ linkCanvasObjectMode={() => "replace"}
+ onNodeDrag={this.handleNodeDrag}
+ onNodeDragEnd={this.handleNodeDragEnd}
+ onLinkClick={this.handleLinkClick}
+ onBackgroundClick={(event) =>
+ this.handleBackgroundClick(
+ event,
+ this.extractPositions(event)
+ )
+ }
+ />
+ ) : undefined}
+ </div>
<div id="sidepanel">
<HistoryNavigator
spaceId="space"
diff --git a/src/editor/js/components/nodetypeentry.css b/src/editor/js/components/nodetypeentry.css
index d40ed0c..77ce532 100644
--- a/src/editor/js/components/nodetypeentry.css
+++ b/src/editor/js/components/nodetypeentry.css
@@ -1,5 +1,5 @@
div#ks-editor .node-type-name {
- width: 45%;
+ width: auto;
}
div#ks-editor .node-type-color {
--
GitLab