Skip to content
Snippets Groups Projects
Commit 22566c23 authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Moved sidepanel to its own component

parent 0574d98c
No related branches found
No related tags found
No related merge requests found
import React from "react"; import React from "react";
interface SettingsProps { interface SettingsProps {
labelVisibility: boolean; labelVisibility: boolean; // TODO: Refactor to one settings object
onLabelVisibilityChange: (state: boolean) => void; onLabelVisibilityChange: (state: boolean) => void;
connectOnDrag: boolean; connectOnDrag: boolean;
......
import React from "react";
import HistoryNavigator from "./historynavigator";
import { DynamicGraph } from "../graph";
import NodeDetails from "./nodedetails";
import { NodeTypesEditor } from "./nodetypeseditor";
import Settings from "./settings";
import Instructions from "./instructions";
import { Checkpoint, History } from "../../common/history";
import { Node } from "../../common/graph/node";
import { NodeType } from "../../common/graph/nodetype";
import { SimGraphData } from "../../common/graph/graph";
import { NodeDataChangeRequest } from "../editor";
interface SidepanelProps {
graph: DynamicGraph;
onCheckpointLoad: { (checkpoint: Checkpoint<SimGraphData>): void };
onNodeTypeSelect: (type: NodeType) => void;
onConnectOnDragChange: (connectOnDrag: boolean) => void;
onLabelVisibilityChange: (state: boolean) => void;
onNodeDataChange: { (requests: NodeDataChangeRequest[]): void };
selectedNodes: Node[];
visibleLabels: boolean;
connectOnDrag: boolean;
}
function Sidepanel({
graph,
onCheckpointLoad,
onNodeTypeSelect,
onConnectOnDragChange,
onLabelVisibilityChange,
onNodeDataChange,
selectedNodes,
visibleLabels,
connectOnDrag,
}: SidepanelProps) {
return (
<div id="sidepanel">
<HistoryNavigator
history={graph.history}
onCheckpointLoad={onCheckpointLoad}
/>
<hr />
<NodeDetails
selectedNodes={selectedNodes}
nameToObjectType={graph.nameToObjectGroup} // TODO: Change to id
onNodeDataChange={onNodeDataChange}
/>
<hr />
<NodeTypesEditor
onChange={() =>
console.log("Refactor onChange for nodetypes editor!")
} // TODO: Refactor
graph={graph}
onSelectAll={onNodeTypeSelect}
/>
<hr />
<Settings
labelVisibility={visibleLabels}
onLabelVisibilityChange={onLabelVisibilityChange}
connectOnDrag={connectOnDrag}
onConnectOnDragChange={onConnectOnDragChange}
/>
<hr />
<Instructions connectOnDragEnabled={connectOnDrag} />
</div>
);
}
export default Sidepanel;
import React from "react"; import React from "react";
import { DynamicGraph } from "./graph"; import { DynamicGraph } from "./graph";
import { listAllSpaces, loadGraphJson } from "../common/datasets"; import { listAllSpaces, loadGraphJson } from "../common/datasets";
import NodeDetails from "./components/nodedetails";
import SpaceSelect from "./components/spaceselect"; import SpaceSelect from "./components/spaceselect";
import "./editor.css"; import "./editor.css";
import * as Helpers from "../common/helpers"; import * as Helpers from "../common/helpers";
import { Node, NodeProperties } from "../common/graph/node"; import { Node, NodeProperties } from "../common/graph/node";
import { NodeTypesEditor } from "./components/nodetypeseditor";
import { SpaceManager } from "./components/spacemanager"; import { SpaceManager } from "./components/spacemanager";
import { SelectLayer } from "./components/selectlayer"; import { SelectLayer } from "./components/selectlayer";
import { GraphData } from "../common/graph/graph"; import { GraphData } from "../common/graph/graph";
import { NodeType } from "../common/graph/nodetype"; import { NodeType } from "../common/graph/nodetype";
import { GraphRenderer2D } from "./renderer"; import { GraphRenderer2D } from "./renderer";
import Instructions from "./components/instructions";
import Settings from "./components/settings";
import HistoryNavigator from "./components/historynavigator";
import * as Config from "../config"; import * as Config from "../config";
import Sidepanel from "./components/sidepanel";
export interface NodeDataChangeRequest extends NodeProperties { export interface NodeDataChangeRequest extends NodeProperties {
id: number; id: number;
type: NodeType; type: NodeType;
} }
type propTypes = {};
type stateTypes = { type stateTypes = {
/** /**
* Graph structure holding the basic information. * Graph structure holding the basic information.
...@@ -63,11 +58,11 @@ type stateTypes = { ...@@ -63,11 +58,11 @@ type stateTypes = {
/** /**
* Knowledge space graph editor. Allows easy editing of the graph structure. * Knowledge space graph editor. Allows easy editing of the graph structure.
*/ */
export class Editor extends React.PureComponent<propTypes, stateTypes> { export class Editor extends React.PureComponent<any, stateTypes> {
private graphContainer: React.RefObject<HTMLDivElement>; private graphContainer: React.RefObject<HTMLDivElement>;
private rendererRef: React.RefObject<GraphRenderer2D>; private rendererRef: React.RefObject<GraphRenderer2D>;
constructor(props: propTypes) { constructor(props: any) {
super(props); super(props);
// Making sure, all functions retain the proper this-bind // Making sure, all functions retain the proper this-bind
...@@ -273,55 +268,36 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> { ...@@ -273,55 +268,36 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
/> />
</SelectLayer> </SelectLayer>
</div> </div>
<div id="sidepanel">
<HistoryNavigator
history={this.state.graph.history}
onCheckpointLoad={(checkpoint) => {
const graph = new DynamicGraph();
this.setState({
graph: graph.fromSerializedObject(
checkpoint.data
),
});
}}
/>
<hr />
<NodeDetails
selectedNodes={this.state.selectedNodes}
nameToObjectType={
this.state.graph.nameToObjectGroup
} // TODO: Change to id
onNodeDataChange={this.handleNodeDataChange}
/>
<hr />
<NodeTypesEditor
onChange={this.forceUpdate}
graph={this.state.graph}
onSelectAll={this.handleNodeTypeSelect}
/>
<hr />
<Settings
labelVisibility={this.state.visibleLabels}
onLabelVisibilityChange={(visible) =>
this.setState({
visibleLabels: visible,
})
}
connectOnDrag={this.state.connectOnDrag}
onConnectOnDragChange={(connectOnDrag) =>
this.setState({
connectOnDrag: connectOnDrag,
})
}
/>
<hr />
<Instructions
connectOnDragEnabled={this.state.connectOnDrag}
/>
</div>
</div> </div>
)} )}
{this.state.graph && (
<Sidepanel
graph={this.state.graph}
onCheckpointLoad={(checkpoint) => {
const graph = new DynamicGraph();
this.setState({
graph: graph.fromSerializedObject(
checkpoint.data
),
});
}}
onNodeTypeSelect={this.handleNodeTypeSelect}
onConnectOnDragChange={(connectOnDrag) =>
this.setState({
connectOnDrag: connectOnDrag,
})
}
onLabelVisibilityChange={(visible) =>
this.setState({
visibleLabels: visible,
})
}
selectedNodes={this.state.selectedNodes}
visibleLabels={this.state.visibleLabels}
connectOnDrag={this.state.connectOnDrag}
onNodeDataChange={this.handleNodeDataChange}
/>
)}
</div> </div>
); );
} }
......
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