Newer
Older
import React from "react";
import { ReactNode } from "react";
import { Node } from "../structures/graph/node";
import { NodeType } from "../structures/graph/nodetype";
type propTypes = {
selectedNode: Node;
allTypes: NodeType[];
};
export class NodeDetails extends React.Component<propTypes> {
constructor(props: propTypes) {
super(props);
this.handleNodeTypeChange = this.handleNodeTypeChange.bind(this);
this.handleTextChange = this.handleTextChange.bind(this);
}
private handleNodeTypeChange(event: any) {
this.props.selectedNode.setType(event.target.value);
this.props.onChange();
}
/**
* Generic function for handeling a changing text input and applying the new value to the currently selected node.
* @param event Change event of text input.
* @param property Property to give new value.
*/
private handleTextChange(event: any, property: string) {
// Actual change?
if ((this.props.selectedNode as any)[property] == newValue) {
return;
}
//TODO: Make sure, that this event is not triggered to quickly!
(this.props.selectedNode as any)[property] = newValue;
this.props.selectedNode.graph.storeCurrentData(
"Changed " +
property +
" of node [" +
if (this.props.selectedNode === undefined) {
return <p>No Node selected.</p>;
}
return (
<div id="tooldetails">
<p>
<label htmlFor="node-name" hidden>
Name
</label>
<input
type="text"
id="node-name"
name="node-name"
placeholder="Enter name"
className="bottom-space"
value={this.props.selectedNode.label}
onChange={(event) =>
this.handleTextChange(event, "label")
}
></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={(event) =>
this.handleTextChange(event, "description")
}
></textarea>
</p>
<p>
<label htmlFor="node-image">Node Image</label>
<br />
{this.props.selectedNode.icon ? (
<div>
<img
id="node-image-preview"
className="preview-image"
src={this.props.selectedNode.icon}
/>
<br />
</div>
) : (
""
)}
<input
type="text"
id="node-image"
name="node-image"
placeholder="Image URL"
value={this.props.selectedNode.icon}
onChange={(event) =>
this.handleTextChange(event, "icon")
/>
</p>
<p>
<label htmlFor="node-detail-image">Info Image</label>
<br />
{this.props.selectedNode.banner ? (
<div>
<img
id="node-image-preview"
className="preview-image"
src={this.props.selectedNode.banner}
/>
<br />
</div>
) : (
""
)}
<input
type="text"
id="node-detail-image"
name="node-detail-image"
placeholder="Image URL"
value={this.props.selectedNode.banner}
onChange={(event) =>
this.handleTextChange(event, "banner")
/>
</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
></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>
);
}
}