Added class Button to toolbox/items.ts.

Added support for making a category initially expanded.
Cleaned up other classes in toolbox/items.ts.

Modified getHardwareCategory in toolbox/hardware_category.ts so the Hardware or Robot category are initially expanded.

Modified getToolboxJSON in toolbox/toolbox.ts so it prevent a problem with blockly choking on our Category class.

Modified code that puts event handler blocks in the toolbox so that if an event handler is already on the workspace, a button for that event is put in the toolbox. If the user hits the button, an info message tells the user that the event handler is already on the workspace.

Author: lizlooney

src/App.tsx

@@ -46,6 +46,7 @@ import * as CustomBlocks from './blocks/setup_custom_blocks';
 
 import { initialize as initializePythonBlocks } from './blocks/utils/python';
 import * as ChangeFramework from './blocks/utils/change_framework'
+import { registerToolboxButton } from './blocks/mrc_event_handler'
 import { mutatorOpenListener } from './blocks/mrc_param_container'
 import { TOOLBOX_UPDATE_EVENT } from './blocks/mrc_mechanism_component_holder';
 import { antdThemeFromString } from './reactComponents/ThemeModal';
@@ -432,6 +433,9 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
     ChangeFramework.setup(newWorkspace);
     newWorkspace.addChangeListener(mutatorOpenListener);
     newWorkspace.addChangeListener(handleBlocksChanged);
+
+    registerToolboxButton(newWorkspace, messageApi);
+
     generatorContext.current = createGeneratorContext();
 
     if (currentModule) {

src/blocks/mrc_event_handler.ts

@@ -23,6 +23,7 @@
 import * as Blockly from 'blockly';
 import {Order} from 'blockly/python';
 
+import type { MessageInstance } from 'antd/es/message/interface';
 import { Editor } from '../editor/editor';
 import { ExtendedPythonGenerator } from '../editor/extended_python_generator';
 import { createFieldFlydown } from '../fields/field_flydown';
@@ -34,6 +35,9 @@ 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 FIELD_SENDER = 'SENDER';
 const FIELD_EVENT_NAME = 'EVENT_NAME';
 
@@ -48,6 +52,7 @@ export interface Parameter {
   type?: string;
 }
 
+const SENDER_VALUE_ROBOT = 'robot';
 const WARNING_ID_EVENT_CHANGED = 'event changed';
 
 export type EventHandlerBlock = Blockly.Block & EventHandlerMixin & Blockly.BlockSvg;
@@ -405,9 +410,22 @@ function generateRegisterEventHandler(
 
 export function addRobotEventHandlerBlocks(
     events: storageModuleContent.Event[],
+    eventHandlerBlocks: EventHandlerBlock[],
     contents: toolboxItems.ContentsType[]) {
+  // Collect the ids of events for which there is already an event handler.
+  const eventIds: string[] = [];
+  eventHandlerBlocks.forEach(eventHandlerBlock => {
+    eventIds.push(eventHandlerBlock.getEventId());
+  });
   events.forEach(event => {
-    contents.push(createRobotEventHandlerBlock(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);
+    } else {
+      contents.push(createRobotEventHandlerBlock(event));
+    }
   });
 }
 
@@ -425,7 +443,7 @@ function createRobotEventHandlerBlock(
     });
   });
   const fields: {[key: string]: any} = {};
-  fields[FIELD_SENDER] = 'robot';
+  fields[FIELD_SENDER] = SENDER_VALUE_ROBOT;
   fields[FIELD_EVENT_NAME] = event.name;
   const inputs: {[key: string]: any} = {};
   return new toolboxItems.Block(BLOCK_NAME, extraState, fields, Object.keys(inputs).length ? inputs : null);
@@ -434,9 +452,22 @@ function createRobotEventHandlerBlock(
 export function addMechanismEventHandlerBlocks(
     mechanismInRobot: storageModuleContent.MechanismInRobot,
     events: storageModuleContent.Event[],
+    eventHandlerBlocks: EventHandlerBlock[],
     contents: toolboxItems.ContentsType[]) {
+  // Collect the ids of events for which there is already an event handler.
+  const eventIds: string[] = [];
+  eventHandlerBlocks.forEach(eventHandlerBlock => {
+    eventIds.push(eventHandlerBlock.getEventId());
+  });
   events.forEach(event => {
-    contents.push(createMechanismEventHandlerBlock(mechanismInRobot, 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);
+    } else {
+      contents.push(createMechanismEventHandlerBlock(mechanismInRobot, event));
+    }
   });
 }
 
@@ -502,3 +533,9 @@ export function renameMechanismName(workspace: Blockly.Workspace, mechanismId: s
     (block as EventHandlerBlock).renameMechanismName(mechanismId, newName);
   });
 }
+
+export function registerToolboxButton(workspace: Blockly.WorkspaceSvg, messageApi: MessageInstance) {
+  workspace.registerButtonCallback(BUTTON_CALLBACK_KEY, function (_button) {
+    messageApi.info(Blockly.Msg.EVENT_HANDLER_ALREADY_ON_WORKSPACE);
+  });
+}

src/blocks/tokens.ts

@@ -35,6 +35,8 @@ export function customTokens(t: (key: string) => string): typeof Blockly.Msg {
     PARAMETER: t('BLOCKLY.PARAMETER'),
     PARAMETERS_CAN_ONLY_GO_IN_THEIR_METHODS_BLOCK:
       t('BLOCKLY.PARAMETERS_CAN_ONLY_GO_IN_THEIR_METHODS_BLOCK'),
+    EVENT_HANDLER_ALREADY_ON_WORKSPACE:
+      t('BLOCKLY.EVENT_HANDLER_ALREADY_ON_WORKSPACE'),
     MECHANISMS: t('MECHANISMS'),
     OPMODES: t('OPMODES'),
     COMPONENTS: t('BLOCKLY.COMPONENTS'),

src/editor/editor.ts

@@ -174,6 +174,7 @@ export class Editor {
   private clearBlocklyWorkspace() {
     if (this.bindedOnChange) {
       this.blocklyWorkspace.removeChangeListener(this.bindedOnChange);
+      this.bindedOnChange = null;
     }
     this.blocklyWorkspace.hideChaff();
     this.blocklyWorkspace.clear();

src/i18n/locales/en/translation.json

@@ -45,6 +45,7 @@
         "WHEN": "when",
         "PARAMETER": "parameter",
         "PARAMETERS_CAN_ONLY_GO_IN_THEIR_METHODS_BLOCK": "Parameters can only go in their method's block",
+        "EVENT_HANDLER_ALREADY_ON_WORKSPACE": "This event handler is already on the workspace.",
         "COMPONENTS": "Components",
         "EVENTS": "Events",
         "EVALUATE_BUT_IGNORE_RESULT": "evaluate but ignore result",

src/i18n/locales/es/translation.json

@@ -46,6 +46,7 @@
         "WHEN": "cuando",
         "PARAMETER": "parámetro",
         "PARAMETERS_CAN_ONLY_GO_IN_THEIR_METHODS_BLOCK": "Los parámetros solo pueden ir en el bloque de su método",
+        "EVENT_HANDLER_ALREADY_ON_WORKSPACE": "Este controlador de eventos ya está en el área de trabajo.",
         "COMPONENTS": "Componentes",
         "EVENTS": "Eventos",
         "EVALUATE_BUT_IGNORE_RESULT": "evaluar pero ignorar resultado",

src/i18n/locales/he/translation.json

@@ -45,6 +45,7 @@
         "WHEN": "כאשר",
         "PARAMETER": "פרמטר",
         "PARAMETERS_CAN_ONLY_GO_IN_THEIR_METHODS_BLOCK": "פרמטרים יכולים להיכנס רק בבלוק השיטה שלהם",
+        "EVENT_HANDLER_ALREADY_ON_WORKSPACE": "מטפל אירועים זה כבר נמצא בסביבת העבודה.",
         "COMPONENTS": "רכיבים",
         "EVENTS": "אירועים",
         "EVALUATE_BUT_IGNORE_RESULT": "הערך אך התעלם מהתוצאה",

src/index.css

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

src/toolbox/event_handlers_category.ts

@@ -96,16 +96,8 @@ class EventHandlersCategory {
 
     // Get the list of events from the robot.
     const eventsFromRobot = editor.getEventsFromRobot();
-    // Remove events if there is already a corresponding handler in the workspace.
     const eventHandlerBlocks = editor.getRobotEventHandlersAlreadyInWorkspace();
-    const eventIds: string[] = [];
-    eventHandlerBlocks.forEach(eventHandlerBlock => {
-      eventIds.push(eventHandlerBlock.getEventId());
-    });
-    const eventsToShow = eventsFromRobot.filter(event => {
-      return !eventIds.includes(event.eventId);
-    });
-    addRobotEventHandlerBlocks(eventsToShow, contents);
+    addRobotEventHandlerBlocks(eventsFromRobot, eventHandlerBlocks, contents);
 
     const toolboxInfo = {
       contents: contents,
@@ -129,17 +121,10 @@ class EventHandlersCategory {
     const mechanism = editor.getMechanism(this.mechanismInRobot);
     if (mechanism) {
       const eventsFromMechanism = editor.getEventsFromMechanism(mechanism);
-      // Remove events if there is already a corresponding handler in the workspace.
       const eventHandlerBlocks = editor.getMechanismEventHandlersAlreadyInWorkspace(
           this.mechanismInRobot);
-      const eventIds: string[] = [];
-      eventHandlerBlocks.forEach(eventHandlerBlock => {
-        eventIds.push(eventHandlerBlock.getEventId());
-      });
-      const eventsToShow = eventsFromMechanism.filter(event => {
-        return !eventIds.includes(event.eventId);
-      });
-      addMechanismEventHandlerBlocks(this.mechanismInRobot, eventsToShow, contents);
+      addMechanismEventHandlerBlocks(
+          this.mechanismInRobot, eventsFromMechanism, eventHandlerBlocks, contents);
       if (contents.length === 0) {
         const label : toolboxItems.Label = new toolboxItems.Label(Blockly.Msg['NO_MECHANISM_CONTENTS']);
         contents.push(label);

src/toolbox/hardware_category.ts

@@ -31,33 +31,29 @@ import {
     addInstanceMechanismBlocks } from '../blocks/mrc_call_python_function';
 import { Editor } from '../editor/editor';
 
-export function getHardwareCategory(
-    editor: Editor): toolboxItems.Category {
-
+export function getHardwareCategory(editor: Editor): toolboxItems.Category {
   const moduleType = editor.getCurrentModuleType();
   switch (moduleType) {
     case storageModule.ModuleType.ROBOT:
-      return {
-        kind: 'category',
-        name: Blockly.Msg['MRC_CATEGORY_HARDWARE'],
-        contents: [
-          getRobotMechanismsCategory(editor),
-          getComponentsCategory(editor, moduleType),
-        ],
-      };
+      return new toolboxItems.Category(
+          Blockly.Msg['MRC_CATEGORY_HARDWARE'],
+          [
+            getRobotMechanismsCategory(editor),
+            getComponentsCategory(editor, moduleType),
+          ],
+          toolboxItems.ExpandedState.EXPANDED);
     case storageModule.ModuleType.MECHANISM:
       return getComponentsCategory(editor, moduleType);
     case storageModule.ModuleType.OPMODE:
-      return {
-        kind: 'category',
-        name: Blockly.Msg['MRC_CATEGORY_ROBOT'],
-        contents: [
-          getRobotMechanismsCategory(editor),
-          getRobotComponentsCategory(editor),
-          getRobotMethodsCategory(editor),
-          getRobotEventHandlersCategory(editor),
-        ],
-      };
+      return new toolboxItems.Category(
+          Blockly.Msg['MRC_CATEGORY_ROBOT'],
+          [
+            getRobotMechanismsCategory(editor),
+            getRobotComponentsCategory(editor),
+            getRobotMethodsCategory(editor),
+            getRobotEventHandlersCategory(editor),
+          ],
+          toolboxItems.ExpandedState.EXPANDED);
   }
   throw new Error('moduleType has unexpected value: ' + moduleType);
 }