Show button instead of event handler block in toolbox if the event handler has already been used

src/blocks/mrc_event_handler.ts

@@ -36,7 +36,7 @@ import * as storageModuleContent from '../storage/module_content';
 export const BLOCK_NAME = 'mrc_event_handler';
 
 const BUTTON_CALLBACK_KEY = 'EVENT_HANDLER_ALREADY_ON_WORKSPACE';
-const BUTTON_STYLE = 'eventHandlerButtonStyle';
+const BUTTON_STYLE_PREFIX = 'eventHandlerButtonStyle_';
 
 const FIELD_SENDER = 'SENDER';
 const FIELD_EVENT_NAME = 'EVENT_NAME';
@@ -409,6 +409,7 @@ function generateRegisterEventHandler(
 // Functions used for creating blocks for the toolbox.
 
 export function addRobotEventHandlerBlocks(
+    workspace: Blockly.WorkspaceSvg,
     events: storageModuleContent.Event[],
     eventHandlerBlocks: EventHandlerBlock[],
     contents: toolboxItems.ContentsType[]) {
@@ -420,9 +421,7 @@ export function addRobotEventHandlerBlocks(
   events.forEach(event => {
     if (eventIds.includes(event.eventId)) {
       // If there is already an event handler for this event, put a button in the toolbox.
-      const text = '\u00A0\u00A0when\u00A0\u00A0' + SENDER_VALUE_ROBOT + '\u00A0\u00A0' + event.name + '\u00A0\u00A0';
-      const button = new toolboxItems.Button(text, BUTTON_CALLBACK_KEY, BUTTON_STYLE);
-      contents.push(button);
+      contents.push(createButton(workspace, SENDER_VALUE_ROBOT, event.name));
     } else {
       contents.push(createRobotEventHandlerBlock(event));
     }
@@ -450,6 +449,7 @@ function createRobotEventHandlerBlock(
 }
 
 export function addMechanismEventHandlerBlocks(
+    workspace: Blockly.WorkspaceSvg,
     mechanismInRobot: storageModuleContent.MechanismInRobot,
     events: storageModuleContent.Event[],
     eventHandlerBlocks: EventHandlerBlock[],
@@ -462,15 +462,24 @@ export function addMechanismEventHandlerBlocks(
   events.forEach(event => {
     if (eventIds.includes(event.eventId)) {
       // If there is already an event handler for this event, put a button in the toolbox.
-      const text = 'when ' + mechanismInRobot.name + ' ' + event.name;
-      const button = new toolboxItems.Button(text, BUTTON_CALLBACK_KEY, BUTTON_STYLE);
-      contents.push(button);
+      contents.push(createButton(workspace, mechanismInRobot.name, event.name));
     } else {
       contents.push(createMechanismEventHandlerBlock(mechanismInRobot, event));
     }
   });
 }
 
+function createButton(
+    workspace: Blockly.WorkspaceSvg, senderName: string, eventName: string): toolboxItems.Button {
+  // Use non-breakable spaces so it looks more like an event handler block.
+  const spaces = '\u00A0\u00A0';
+  const text = workspace.RTL
+      ? (spaces + eventName + spaces + senderName + spaces + Blockly.Msg.WHEN + spaces)
+      : (spaces + Blockly.Msg.WHEN + spaces + senderName + spaces + eventName + spaces);
+  const style = BUTTON_STYLE_PREFIX + workspace.getTheme().name;
+  return new toolboxItems.Button(text, BUTTON_CALLBACK_KEY, style);
+}
+
 function createMechanismEventHandlerBlock(
     mechanismInRobot: storageModuleContent.MechanismInRobot,
     event: storageModuleContent.Event): toolboxItems.Block {

src/index.css

@@ -61,8 +61,4 @@ code {
 /* Ensure smooth scrolling for the entire toolbox content */
 .blocklyToolboxContents {
   scroll-behavior: smooth !important;
-}
-
-.eventHandlerButtonStyle {
-    fill: #995ba5;
-}
+}

src/themes/mrc_themes.ts

@@ -4,7 +4,7 @@ import DeuteranopiaTheme from '@blockly/theme-deuteranopia';
 import TritanopiaTheme from '@blockly/theme-tritanopia';
 import HighContrastTheme from '@blockly/theme-highcontrast';
 
-import { add_mrc_styles } from './styles';
+import { add_mrc_styles, MRC_STYLE_EVENT_HANDLER } from './styles';
 
 export const DARK_THEME_NAME = 'mrc_theme_dark';
 export const LIGHT_THEME_NAME = 'mrc_theme_light';
@@ -39,7 +39,7 @@ const create_theme = function (name: string, base: Blockly.Theme, dark: boolean
 };
 
 const create_themes = function (): Blockly.Theme[] {
-    return [
+    const themes: Blockly.Theme[] = [
         create_theme(DARK_THEME_NAME, Blockly.Themes.Classic, true),
         create_theme(LIGHT_THEME_NAME, Blockly.Themes.Classic),
         create_theme(DEUTERANOPIA_THEME_NAME, DeuteranopiaTheme),
@@ -49,6 +49,30 @@ const create_themes = function (): Blockly.Theme[] {
         create_theme(TRITANOPIA_DARK_THEME_NAME, TritanopiaTheme, true),
         create_theme(HIGHCONTRAST_DARK_THEME_NAME, HighContrastTheme, true),
     ];
+
+    // Create CSS classes for event handler buttons, which are placed in the toolbox when an event
+    // handler already exists on the workspace.
+    let cssClasses = '';
+    themes.forEach(theme => {
+        let fill = theme.blockStyles[MRC_STYLE_EVENT_HANDLER].colourPrimary;
+        if (!fill.startsWith('#')) {
+            try {
+                fill = Blockly.utils.colour.hueToHex(Number(fill));
+            } catch (e) {
+                console.error(
+                    'Unable to determine event handler block color for theme ' + theme.name);
+            }
+        }
+        cssClasses +=
+            '.eventHandlerButtonStyle_' + theme.name + ' {\n' +
+            '    fill: ' + fill + ';\n' +
+            '}\n';
+    });
+    const styleElement = document.createElement('style');
+    styleElement.innerHTML = cssClasses;
+    document.head.appendChild(styleElement);
+
+    return themes;
 };
 
-export const themes = create_themes();
+export const themes = create_themes();

src/toolbox/event_handlers_category.ts

@@ -97,7 +97,7 @@ class EventHandlersCategory {
     // Get the list of events from the robot.
     const eventsFromRobot = editor.getEventsFromRobot();
     const eventHandlerBlocks = editor.getRobotEventHandlersAlreadyInWorkspace();
-    addRobotEventHandlerBlocks(eventsFromRobot, eventHandlerBlocks, contents);
+    addRobotEventHandlerBlocks(workspace, eventsFromRobot, eventHandlerBlocks, contents);
 
     const toolboxInfo = {
       contents: contents,
@@ -124,7 +124,7 @@ class EventHandlersCategory {
       const eventHandlerBlocks = editor.getMechanismEventHandlersAlreadyInWorkspace(
           this.mechanismInRobot);
       addMechanismEventHandlerBlocks(
-          this.mechanismInRobot, eventsFromMechanism, eventHandlerBlocks, contents);
+          workspace, this.mechanismInRobot, eventsFromMechanism, eventHandlerBlocks, contents);
       if (contents.length === 0) {
         const label : toolboxItems.Label = new toolboxItems.Label(Blockly.Msg['NO_MECHANISM_CONTENTS']);
         contents.push(label);