Allows color input to be edited

src/editor/js/components/nodetypeentry.tsx

@@ -18,10 +18,11 @@ export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
         super(props);
         this.deleteType = this.deleteType.bind(this);
         this.handleTextChange = this.handleTextChange.bind(this);
+        this.handleColorChange = this.handleColorChange.bind(this);
 
-        this.setState({
+        this.state = {
             temporaryColor: undefined,
-        });
+        };
     }
 
     private deleteType() {
@@ -29,17 +30,39 @@ export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
     }
 
     private isValidColor(color: string): boolean {
-        if (color.length <= 0 || color[0] !== "#") {
+        if (color.length <= 0) {
             return false;
         }
 
-        const colorCode = color.substring(1);
+        // Source: https://stackoverflow.com/a/8027444
+        return /^#([0-9A-F]{3}){1,2}$/i.test(color);
+    }
 
-        if (!(colorCode.length === 3 || colorCode.length === 6)) {
-            return false;
+    private handleColorChange(event: any) {
+        const newColor = event.target.value;
+
+        if (this.isValidColor(newColor)) {
+            // Is actual change?
+            if (this.props.type.color !== newColor) {
+                // Update proper color
+                this.props.type.color = newColor;
+                this.props.type.graph.storeCurrentData(
+                    "Changed color of type [" + this.props.type + "]"
+                );
+            }
+
+            // Reset temporary value
+            this.setState({
+                temporaryColor: undefined,
+            });
+        } else {
+            // Only set as temporary value
+            this.setState({
+                temporaryColor: newColor,
+            });
         }
 
-        colorCode;
+        this.props.onChange();
     }
 
     /**
@@ -77,11 +100,11 @@ export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
                     className="node-type-color"
                     type={"text"}
                     value={
-                        this.state.temporaryColor
+                        this.state.temporaryColor !== undefined
                             ? this.state.temporaryColor
                             : this.props.type.color
                     }
-                    onChange={(event) => this.handleTextChange(event, "color")}
+                    onChange={(event) => this.handleColorChange(event)}
                 />
                 {this.props.graph && this.props.graph.types.length > 1 ? (
                     <button onClick={this.deleteType}>Delete</button>