sidepanel.tsx

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;