Implements input debounce for node type label

src/editor/js/components/nodetypeentry.tsx

@@ -14,6 +14,10 @@ type stateTypes = {
 };
 
 export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
+    debounceTimeout: NodeJS.Timeout;
+    debounceArgs: any[];
+    debounceFunc: any;
+
     constructor(props: propTypes) {
         super(props);
         this.deleteType = this.deleteType.bind(this);
@@ -80,11 +84,40 @@ export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
 
         //TODO: Make sure, that this event is not triggered to quickly!
         (this.props.type as any)[property] = newValue;
-        this.props.type.graph.storeCurrentData(
-            "Changed " + property + " of type [" + this.props.type + "]"
+        this.props.onChange();
+
+        // Save change, but debounce, so it doesn't trigger too quickly
+        this.debounce(
+            (property: string) => {
+                this.props.type.graph.storeCurrentData(
+                    "Changed " + property + " of type [" + this.props.type + "]"
+                );
+                this.props.onChange();
+            },
+            500,
+            property
         );
+    }
 
-        this.props.onChange();
+    debounce(func: any, wait: number, ...args: any[]) {
+        // It works, don't question it
+        const later = () => {
+            this.debounceTimeout = null;
+            this.debounceFunc(...this.debounceArgs);
+        };
+
+        clearTimeout(this.debounceTimeout);
+        if (
+            this.debounceArgs !== undefined &&
+            args[0] !== this.debounceArgs[0] &&
+            this.debounceFunc !== undefined
+        ) {
+            this.debounceFunc(...this.debounceArgs);
+        }
+
+        this.debounceArgs = args;
+        this.debounceFunc = func;
+        this.debounceTimeout = setTimeout(later, wait);
     }
 
     render(): ReactNode {