fix: Wrap toolbox refreshes in a timeout when modifying variables (#8980)

blocks/variables.ts

@@ -21,7 +21,6 @@ import '../core/field_label.js';
 import {FieldVariable} from '../core/field_variable.js';
 import {Msg} from '../core/msg.js';
 import * as Variables from '../core/variables.js';
-import type {WorkspaceSvg} from '../core/workspace_svg.js';
 
 /**
  * A dictionary of the block definitions provided by this module.
@@ -170,7 +169,6 @@ const deleteOptionCallbackFactory = function (
     if (variable) {
       Variables.deleteVariable(variable.getWorkspace(), variable, block);
     }
-    (block.workspace as WorkspaceSvg).refreshToolboxSelection();
   };
 };
 

blocks/variables_dynamic.ts

@@ -22,7 +22,6 @@ import '../core/field_label.js';
 import {FieldVariable} from '../core/field_variable.js';
 import {Msg} from '../core/msg.js';
 import * as Variables from '../core/variables.js';
-import type {WorkspaceSvg} from '../core/workspace_svg.js';
 
 /**
  * A dictionary of the block definitions provided by this module.
@@ -181,7 +180,6 @@ const deleteOptionCallbackFactory = function (block: VariableBlock) {
     if (variable) {
       Variables.deleteVariable(variable.getWorkspace(), variable, block);
     }
-    (block.workspace as WorkspaceSvg).refreshToolboxSelection();
   };
 };
 

core/field_variable.ts

@@ -32,7 +32,6 @@ import * as dom from './utils/dom.js';
 import * as parsing from './utils/parsing.js';
 import {Size} from './utils/size.js';
 import * as Variables from './variables.js';
-import {WorkspaceSvg} from './workspace_svg.js';
 import * as Xml from './xml.js';
 
 /**
@@ -523,9 +522,6 @@ export class FieldVariable extends FieldDropdown {
         // Delete variable.
         const workspace = this.variable.getWorkspace();
         Variables.deleteVariable(workspace, this.variable, this.sourceBlock_);
-        if (workspace instanceof WorkspaceSvg) {
-          workspace.refreshToolboxSelection();
-        }
         return;
       }
     }

core/variable_map.ts

@@ -27,7 +27,6 @@ import * as deprecation from './utils/deprecation.js';
 import * as idGenerator from './utils/idgenerator.js';
 import {deleteVariable, getVariableUsesById} from './variables.js';
 import type {Workspace} from './workspace.js';
-import {WorkspaceSvg} from './workspace_svg.js';
 
 /**
  * Class for a variable map.  This contains a dictionary data structure with
@@ -93,9 +92,6 @@ export class VariableMap
     } finally {
       eventUtils.setGroup(existingGroup);
     }
-    if (this.workspace instanceof WorkspaceSvg) {
-      this.workspace.refreshToolboxSelection();
-    }
     return variable;
   }
 
@@ -112,9 +108,6 @@ export class VariableMap
     if (!this.variableMap.has(newType)) {
       this.variableMap.set(newType, newTypeVariables);
     }
-    if (this.workspace instanceof WorkspaceSvg) {
-      this.workspace.refreshToolboxSelection();
-    }
     return variable;
   }
 
@@ -161,9 +154,6 @@ export class VariableMap
     for (let i = 0; i < blocks.length; i++) {
       blocks[i].updateVarName(variable);
     }
-    if (this.workspace instanceof WorkspaceSvg) {
-      this.workspace.refreshToolboxSelection();
-    }
   }
 
   /**
@@ -259,9 +249,6 @@ export class VariableMap
       this.variableMap.set(type, variables);
     }
     eventUtils.fire(new (eventUtils.get(EventType.VAR_CREATE))(variable));
-    if (this.workspace instanceof WorkspaceSvg) {
-      this.workspace.refreshToolboxSelection();
-    }
     return variable;
   }
 
@@ -279,9 +266,6 @@ export class VariableMap
       );
     }
     this.variableMap.get(type)?.set(variable.getId(), variable);
-    if (this.workspace instanceof WorkspaceSvg) {
-      this.workspace.refreshToolboxSelection();
-    }
   }
 
   /* Begin functions for variable deletion. */
@@ -310,9 +294,6 @@ export class VariableMap
     } finally {
       eventUtils.setGroup(existingGroup);
     }
-    if (this.workspace instanceof WorkspaceSvg) {
-      this.workspace.refreshToolboxSelection();
-    }
   }
 
   /**

core/workspace_svg.ts

@@ -33,6 +33,7 @@ import {
   ContextMenuRegistry,
 } from './contextmenu_registry.js';
 import * as dropDownDiv from './dropdowndiv.js';
+import {Abstract as AbstractEvent} from './events/events.js';
 import {EventType} from './events/type.js';
 import * as eventUtils from './events/utils.js';
 import {Flyout} from './flyout_base.js';
@@ -399,6 +400,9 @@ export class WorkspaceSvg
       this.addChangeListener(Procedures.mutatorOpenListener);
     }
 
+    // Set up callbacks to refresh the toolbox when variables change
+    this.addChangeListener(this.variableChangeCallback.bind(this));
+
     /** Object in charge of storing and updating the workspace theme. */
     this.themeManager_ = this.options.parentWorkspace
       ? this.options.parentWorkspace.getThemeManager()
@@ -1361,6 +1365,23 @@ export class WorkspaceSvg
     }
   }
 
+  /**
+   * Handles any necessary updates when a variable changes.
+   *
+   * @internal
+   */
+  variableChangeCallback(event: AbstractEvent) {
+    switch (event.type) {
+      case EventType.VAR_CREATE:
+      case EventType.VAR_DELETE:
+      case EventType.VAR_RENAME:
+      case EventType.VAR_TYPE_CHANGE:
+        this.refreshToolboxSelection();
+        break;
+      default:
+    }
+  }
+
   /**
    * Refresh the toolbox unless there's a drag in progress.
    *