diff --git a/src/editor/js/components/editor.css b/src/editor/js/components/editor.css index 9325b6f384ff07a85dfcbab153c9ae8d9116d9f6..d99dc6e1a0549f673a984944424e4a0ec61228a2 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 71a9433e20a7c033ce9c9e95cf17e53641d04b2d..cb406dc438a357edf2d605434b6dbeef73fa228e 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 d40ed0ccc10a894c3735d648301530b74d7a5e93..77ce5329177215d5a8196683c0273b0d55495d93 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 {