Thread through name and position updates

src/components/StringInput.js

@@ -1,6 +1,12 @@
 import React from "react";
+import PropTypes from "prop-types";
 import styles from "./StringInput.scss";
 
-export default function StringInput(props) {
-  return <input className={styles.stringInput} />;
+export default function StringInput({ value, onChange }) {
+  return <input className={styles.stringInput} value={value} onChange={onChange} />;
 }
+
+StringInput.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func
+};

src/components/Vector3Input.js

@@ -7,11 +7,11 @@ export default function Vector3Input({ value, onChange, ...rest }) {
   return (
     <div className={styles.vector3Input}>
       <div className={styles.label}>X:</div>
-      <NumericInput value={value.x} onChange={x => onChange("x", x)} {...rest} />
+      <NumericInput value={value.x} onChange={x => onChange({ x, y: value.y, z: value.z })} {...rest} />
       <div className={styles.label}>Y:</div>
-      <NumericInput value={value.y} onChange={y => onChange("y", y)} {...rest} />
+      <NumericInput value={value.y} onChange={y => onChange({ x: value.y, y, z: value.z })} {...rest} />
       <div className={styles.label}>Z:</div>
-      <NumericInput value={value.z} onChange={z => onChange("z", z)} {...rest} />
+      <NumericInput value={value.z} onChange={z => onChange({ x: value.y, y: value.y, z })} {...rest} />
     </div>
   );
 }

src/containers/NodePropertyGroupContainer.js

@@ -1,18 +1,50 @@
 import React, { Component } from "react";
+import THREE from "../vendor/three";
+import PropTypes from "prop-types";
+import { withEditor } from "./EditorContext";
 import PropertyGroup from "../components/PropertyGroup";
 import InputGroup from "../components/InputGroup";
 import Vector3Input from "../components/Vector3Input";
 import StringInput from "../components/StringInput";
+import SetValueCommand from "../editor/commands/SetValueCommand";
+import SetPositionCommand from "../editor/commands/SetPositionCommand";
 
-export default class NodePropertyGroupContainer extends Component {
+class NodePropertyGroupContainer extends Component {
+  static propTypes = {
+    editor: PropTypes.object
+  };
+  constructor(props) {
+    super(props);
+    this.props.editor.signals.objectSelected.add(this.updateNode);
+    this.props.editor.signals.objectChanged.add(this.updateStateFromNode);
+    this.state = { node: {} };
+  }
+  updateNode = node => {
+    this.setState({ node }, () => this.updateStateFromNode(node));
+  };
+  updateStateFromNode = node => {
+    // Ignore objectChanged signals if they are for another node.
+    if (!this.state.node || this.state.node !== node) return;
+    this.setState({
+      name: node.name
+    });
+  };
+  updateName = e => {
+    if (!this.state.node) return;
+    this.props.editor.execute(new SetValueCommand(this.state.node, "name", e.target.value));
+  };
+  updatePosition = newPosition => {
+    if (!this.state.node) return;
+    this.props.editor.execute(new SetPositionCommand(this.state.node, new THREE.Vector3().copy(newPosition)));
+  };
   render() {
     return (
       <PropertyGroup name="Node">
         <InputGroup name="Name">
-          <StringInput />
+          <StringInput value={this.state.name} onChange={this.updateName} />
         </InputGroup>
         <InputGroup name="Position">
-          <Vector3Input />
+          <Vector3Input value={this.state.node.position} onChange={this.updatePosition} />
         </InputGroup>
         <InputGroup name="Rotation">
           <Vector3Input />
@@ -24,3 +56,5 @@ export default class NodePropertyGroupContainer extends Component {
     );
   }
 }
+
+export default withEditor(NodePropertyGroupContainer);