diff --git a/src/editor/js/components/nodetypeentry.tsx b/src/editor/js/components/nodetypeentry.tsx index 3d2d9c7b9f62f73f0958deeb55b30ee91eab4399..a5a1cc3b52bd1056d45ba36ad49abc7ef91199ef 100644 --- a/src/editor/js/components/nodetypeentry.tsx +++ b/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 {