sidepanel.tsx

import React from "react";
import "./sidepanel.css";

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 { Node } from "../../common/graph/node";
import { NodeType, NodeTypeData } from "../../common/graph/nodetype";
import { EditorSettings, NodeDataChangeRequest } from "../editor";
import TabHeader from "./tabheader";

interface SidepanelProps {
    graph: DynamicGraph;
    onCheckpointRequest: (id: number) => void;
    onRedo: () => void;
    onUndo: () => void;
    onNodeTypeSelect: (type: NodeType) => void;
    onNodeTypeCreation: () => NodeType;
    onNodeTypeDelete: (id: number[]) => void;
    onNodeTypeDataChange: (
        requests: NodeTypeData[],
        createCheckpoint?: boolean
    ) => void;
    onSettingsChange: (settings: EditorSettings) => void;
    onNodeDataChange: (
        requests: NodeDataChangeRequest[],
        createCheckpoint?: boolean
    ) => void;
    createCheckpoint: (description: string) => void;
    onSave: () => void;
    selectedNodes: Node[];
    settings: EditorSettings;
}

function Sidepanel({
    graph,
    onCheckpointRequest,
    onUndo,
    onRedo,
    onNodeTypeSelect,
    onNodeTypeCreation,
    onNodeTypeDelete,
    onNodeTypeDataChange,
    onSettingsChange,
    onNodeDataChange,
    onSave,
    createCheckpoint,
    selectedNodes,
    settings,
}: SidepanelProps) {
    return (
        <div className={"editor-sidepanel"}>
            <div className={"editor-sidepanel-topbar"}>
                <HistoryNavigator
                    history={graph.history}
                    onCheckpointRequest={onCheckpointRequest}
                    onUndo={onUndo}
                    onRedo={onRedo}
                />
                <button onClick={onSave}>Save</button>
            </div>
            <hr />
            <TabHeader tabs={["Edit", "Types", "Help"]}>
                {/* Edit-Tab */}
                <NodeDetails
                    selectedNodes={selectedNodes}
                    idToObjectType={graph.idToObjectGroup}
                    onNodeDataChange={onNodeDataChange}
                    createCheckpoint={createCheckpoint}
                />

                {/* Types-Tab */}
                <NodeTypesEditor
                    nodeTypes={graph.objectGroups}
                    onNodeTypeSelect={onNodeTypeSelect}
                    onNodeTypeCreation={onNodeTypeCreation}
                    onNodeTypeDelete={onNodeTypeDelete}
                    onNodeTypeDataChange={onNodeTypeDataChange}
                    createCheckpoint={createCheckpoint}
                />

                {/* Help-Tab */}
                <div>
                    <Settings
                        settings={settings}
                        onSettingsChange={onSettingsChange}
                    />
                    <hr />

                    <Instructions
                        connectOnDragEnabled={settings.connectOnDrag}
                    />
                </div>
            </TabHeader>
        </div>
    );
}

export default Sidepanel;