Generate the css classes for event handler buttons with the correct color for each theme.

Author: lizlooney

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';
@@ -421,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 = makeButtonText(workspace, SENDER_VALUE_ROBOT, event.name);
-      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));
     }
@@ -464,23 +462,22 @@ 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 = makeButtonText(workspace, 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 makeButtonText(
-    workspace: Blockly.WorkspaceSvg, senderName: string, eventName: string): string {
-  // Add non-breakable spaces so it looks more like an event handler block.
+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';
-  if (workspace.RTL) {
-    return spaces + eventName + spaces + senderName + spaces + Blockly.Msg.WHEN + spaces;
-  }
-  return spaces + Blockly.Msg.WHEN + spaces + senderName + spaces + eventName + spaces;
+  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(

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();