nodedetails.tsx

import React from "react";
import { ReactNode } from "react";
import { Node } from "../structures/graph/node";
import { NodeType } from "../structures/graph/nodetype";
import "./nodedetails.css";

type propTypes = {
    selectedNode: Node;
    allTypes: NodeType[];
    onChange: { (): void };
};

export class NodeDetails extends React.Component<propTypes> {
    constructor(props: propTypes) {
        super(props);
        this.handleNodeTypeChange = this.handleNodeTypeChange.bind(this);
        this.handleLabelChange = this.handleLabelChange.bind(this);
        this.handleDescriptionChange = this.handleDescriptionChange.bind(this);
    }

    private handleNodeTypeChange(event: any) {
        this.props.selectedNode.setType(event.target.value);
        this.props.onChange();
    }

    private handleLabelChange(event: any) {
        const newValue = event.target.value;

        // Actual change?
        if (this.props.selectedNode.label == newValue) {
            return;
        }

        //TODO: Make sure, that this event is not triggered to quickly!
        this.props.selectedNode.label = newValue;
        this.props.selectedNode.graph.storeCurrentData(
            "Changed label of node [" + this.props.selectedNode.toString() + "]"
        );

        this.props.onChange();
    }

    private handleDescriptionChange(event: any) {
        const newValue = event.target.value;

        // Actual change?
        if (this.props.selectedNode.description == newValue) {
            return;
        }

        //TODO: Make sure, that this event is not triggered to quickly!
        this.props.selectedNode.description = newValue;
        this.props.selectedNode.graph.storeCurrentData(
            "Changed description of node [" + this.props.selectedNode.toString() + "]"
        );

        this.props.onChange();
    }

    render(): ReactNode {
        if (this.props.selectedNode === undefined) {
            return <p>No Node selected.</p>;
        }

        return (
            <div id="tooldetails">
                <p>
                    <label htmlFor="node-name" hidden>
                        Name
                    </label>
                    <br />
                    <input
                        type="text"
                        id="node-name"
                        name="node-name"
                        placeholder="Enter name"
                        className="bottom-space"
                        value={this.props.selectedNode.label}
                        onChange={this.handleLabelChange}
                    ></input>
                </p>
                <p>
                    <label htmlFor="node-description">Description</label>
                    <br />
                    <textarea
                        id="node-description"
                        name="node-description"
                        className="bottom-space"
                        value={this.props.selectedNode.description}
                        onChange={this.handleDescriptionChange}
                    ></textarea>
                </p>
                <p>
                    <label htmlFor="node-image">Node Image</label>
                    <br />
                    <img
                        id="node-image-preview"
                        className="preview-image"
                        src={
                            this.props.selectedNode.icon
                                ? this.props.selectedNode.icon.link
                                : undefined
                        }
                    />
                    <br />
                    <input
                        type="text"
                        id="node-image"
                        name="node-image"
                        placeholder="Enter file name or URL"
                        className="bottom-space"
                        value={
                            this.props.selectedNode.icon
                                ? this.props.selectedNode.icon.link
                                : undefined
                        }
                    />
                </p>
                <p>
                    <label htmlFor="node-detail-image">Info Image</label>
                    <br />
                    <img
                        id="node-detail-image-preview"
                        className="preview-image"
                        src={
                            this.props.selectedNode.banner
                                ? this.props.selectedNode.banner.link
                                : undefined
                        }
                    />
                    <br />
                    <input
                        type="text"
                        id="node-detail-image"
                        name="node-detail-image"
                        placeholder="Enter file name or URL"
                        className="bottom-space"
                        value={
                            this.props.selectedNode.banner
                                ? this.props.selectedNode.banner.link
                                : undefined
                        }
                    />
                </p>
                <p>
                    <label htmlFor="node-type">Type</label>
                    <br />
                    <select
                        id="node-type"
                        name="node-type"
                        className="bottom-space"
                        value={this.props.selectedNode.type.id}
                        onChange={this.handleNodeTypeChange}
                    >
                        {this.props.allTypes.map((type) => (
                            <option key={type.id} value={type.id}>
                                {type.name}
                            </option>
                        ))}
                    </select>
                </p>
                <p>
                    <label htmlFor="node-video">Video</label>
                    <br />
                    <input
                        type="text"
                        placeholder="Video URL"
                        id="node-video"
                        name="node-video"
                        value={
                            this.props.selectedNode.video
                                ? this.props.selectedNode.video.link
                                : undefined
                        }
                    ></input>
                </p>
                <p>
                    <label htmlFor="node-references">References</label>{" "}
                    <small>One URL per line</small>
                    <br />
                    <textarea
                        id="node-references"
                        name="node-references"
                        className="bottom-space"
                        value={
                            this.props.selectedNode.references
                                ? this.props.selectedNode.references.join("\n")
                                : undefined
                        }
                    ></textarea>
                </p>
            </div>
        );
    }
}