Add localization to toolbox categories

Author: alan412

src/App.tsx

@@ -48,6 +48,7 @@ import { mutatorOpenListener } from './blocks/mrc_param_container'
 import { TOOLBOX_UPDATE_EVENT } from './blocks/mrc_mechanism_component_holder';
 import { antdThemeFromString } from './reactComponents/ThemeModal';
 import { useTranslation } from 'react-i18next';
+import { setup } from './blocks/mrc_event_handler';
 
 /** Storage key for shown toolbox categories. */
 const SHOWN_TOOLBOX_CATEGORIES_KEY = 'shownPythonToolboxCategories';
@@ -87,7 +88,7 @@ const LAYOUT_BACKGROUND_COLOR = '#0F0';
  * project management, and user interface layout.
  */
 const App: React.FC = (): React.JSX.Element => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const [alertErrorMessage, setAlertErrorMessage] = React.useState('');
   const [storage, setStorage] = React.useState<commonStorage.Storage | null>(null);
@@ -263,7 +264,7 @@ const App: React.FC = (): React.JSX.Element => {
     if (blocksEditor.current && currentModule) {
       blocksEditor.current.updateToolbox(shownPythonToolboxCategories);
     }
-  }, [currentModule, shownPythonToolboxCategories]);
+  }, [currentModule, shownPythonToolboxCategories, i18n.language]);
 
   // Add event listener for toolbox updates
   React.useEffect(() => {
@@ -294,6 +295,23 @@ const App: React.FC = (): React.JSX.Element => {
     }
   }, [currentModule]); 
 
+  const setupWorkspace = (newWorkspace: Blockly.WorkspaceSvg) => {
+     if (!blocklyComponent.current || !storage) {
+      return;
+    }
+    // Recreate workspace when Blockly component is ready
+    ChangeFramework.setup(newWorkspace);
+    newWorkspace.addChangeListener(mutatorOpenListener);
+    newWorkspace.addChangeListener(handleBlocksChanged);
+    generatorContext.current = createGeneratorContext();
+    
+    if (currentModule) {
+      generatorContext.current.setModule(currentModule);
+    }
+
+    blocksEditor.current = new editor.Editor(newWorkspace, generatorContext.current, storage);
+    blocksEditor.current.updateToolbox(shownPythonToolboxCategories);
+  };
 
   // Initialize Blockly workspace and editor when component and storage are ready
   React.useEffect(() => {
@@ -303,17 +321,8 @@ const App: React.FC = (): React.JSX.Element => {
 
     const blocklyWorkspace = blocklyComponent.current.getBlocklyWorkspace();
     if (blocklyWorkspace) {
-      ChangeFramework.setup(blocklyWorkspace);
-      blocklyWorkspace.addChangeListener(mutatorOpenListener);
-      blocklyWorkspace.addChangeListener(handleBlocksChanged);
-    }
-
-    generatorContext.current = createGeneratorContext();
-    if (currentModule) {
-      generatorContext.current.setModule(currentModule);
+      setupWorkspace(blocklyWorkspace);
     }
-
-    blocksEditor.current = new editor.Editor(blocklyWorkspace, generatorContext.current, storage);
   }, [blocklyComponent, storage]);
 
   // Generate code when module or regeneration trigger changes
@@ -395,6 +404,7 @@ const App: React.FC = (): React.JSX.Element => {
               <Content>
                 <BlocklyComponent 
                   theme={theme}
+                  onWorkspaceRecreated={setupWorkspace}
                   ref={blocklyComponent} 
                 />
               </Content>

src/blocks/tokens.ts

@@ -27,5 +27,20 @@ export const customTokens = (t: (key: string) => string): typeof Blockly.Msg =>
     OPMODE_ENABLED_TOOLTIP: t('BLOCKLY.TOOLTIP.OPMODE_ENABLED_TOOLTIP'),
     OPMODE_NAME_TOOLTIP: t('BLOCKLY.TOOLTIP.OPMODE_NAME_TOOLTIP'),
     OPMODE_GROUP_TOOLTIP: t('BLOCKLY.TOOLTIP.OPMODE_GROUP_TOOLTIP'),
+    MRC_CATEGORY_HARDWARE: t('BLOCKLY.CATEGORY.HARDWARE'),
+    MRC_CATEGORY_ROBOT: t('BLOCKLY.CATEGORY.ROBOT'),
+    MRC_CATEGORY_COMPONENTS: t('BLOCKLY.CATEGORY.COMPONENTS'),
+    MRC_CATEGORY_MECHANISMS: t('BLOCKLY.CATEGORY.MECHANISMS'),
+    MRC_CATEGORY_LOGIC: t('BLOCKLY.CATEGORY.LOGIC'),
+    MRC_CATEGORY_LOOPS: t('BLOCKLY.CATEGORY.LOOPS'),
+    MRC_CATEGORY_LISTS: t('BLOCKLY.CATEGORY.LISTS'),
+    MRC_CATEGORY_MATH: t('BLOCKLY.CATEGORY.MATH'),
+    MRC_CATEGORY_TEXT: t('BLOCKLY.CATEGORY.TEXT'),
+    MRC_CATEGORY_MISC: t('BLOCKLY.CATEGORY.MISC'),
+    MRC_CATEGORY_VARIABLES: t('BLOCKLY.CATEGORY.VARIABLES'),
+    MRC_CATEGORY_METHODS: t('BLOCKLY.CATEGORY.METHODS'),
+    MRC_CATEGORY_EVENTS: t('BLOCKLY.CATEGORY.EVENTS'),
+    MRC_CATEGORY_ADD_MECHANISM: t('BLOCKLY.CATEGORY.ADD_MECHANISM'),
+    MRC_CATEGORY_ADD_COMPONENT: t('BLOCKLY.CATEGORY.ADD_COMPONENT'),
   };
 };

src/i18n/locales/en/translation.json

@@ -57,6 +57,23 @@
             "OPMODE_ENABLED": "Whether the OpMode is shown on Driver Station",
             "OPMODE_NAME": "The name shown on the Driver Station.  If blank will use the class name.",
             "OPMODE_GROUP": "An optional group to group OpModes on Driver Station"
+        },
+        "CATEGORY":{
+            "LISTS": "Lists",
+            "HARDWARE": "Hardware",
+            "COMPONENTS": "Components",
+            "ROBOT": "Robot",
+            "MECHANISMS": "Mechanisms",
+            "LOGIC": "Logic",
+            "LOOPS": "Loops",
+            "MATH": "Math",
+            "TEXT": "Text",
+            "MISC": "Miscellaneous",
+            "VARIABLES": "Variables",
+            "METHODS": "Methods",
+            "EVENTS": "Events",
+            "ADD_MECHANISM": "+ Mechanism",
+            "ADD_COMPONENT": "+ Component"
         }
     }   
 }

src/i18n/locales/es/translation.json

@@ -57,6 +57,22 @@
             "OPMODE_ENABLED": "Si el OpMode se muestra en la Estación del Conductor",
             "OPMODE_NAME": "El nombre mostrado en la Estación del Conductor. Si está en blanco usará el nombre de la clase.",
             "OPMODE_GROUP": "Un grupo opcional para agrupar OpModes en la Estación del Conductor"
-        }
+        },
+        "CATEGORY":{
+            "LISTS": "Listas",
+            "HARDWARE": "Hardware",
+            "COMPONENTS": "Componentes",
+            "ROBOT": "Robot",
+            "MECHANISMS": "Mecanismos",
+            "LOGIC": "Lógica",
+            "LOOPS": "Bucles",
+            "MATH": "Matemáticas",
+            "TEXT": "Texto",
+            "MISC": "Varios",
+            "VARIABLES": "Variables",
+            "METHODS": "Métodos",
+            "EVENTS": "Eventos",
+            "ADD_MECHANISM": "+ Mecanismo",
+            "ADD_COMPONENT": "+ Componente"
     }   
 }

src/reactComponents/BlocklyComponent.tsx

@@ -39,6 +39,7 @@ export interface BlocklyComponentType {
 /** Interface for props passed to the BlocklyComponent. */
 export interface BlocklyComponentProps {
   theme: string;
+  onWorkspaceRecreated: (workspace: Blockly.WorkspaceSvg) => void;
 }
 
 /** Grid spacing for the Blockly workspace. */
@@ -79,15 +80,15 @@ const WORKSPACE_STYLE: React.CSSProperties = {
  * cleanup, and resize handling.
  */
 const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyComponentProps>(
-    ({ theme }, ref): React.JSX.Element => {
+    (props, ref): React.JSX.Element => {
       const blocklyDiv = React.useRef<HTMLDivElement | null>(null);
       const workspaceRef = React.useRef<Blockly.WorkspaceSvg | null>(null);
 
       const { t, i18n } = useTranslation();
 
 
       const getBlocklyTheme = (): Blockly.Theme => {
-        const blocklyTheme = 'mrc_theme_' + theme.replace(/-/g, '_');
+        const blocklyTheme = 'mrc_theme_' + props.theme.replace(/-/g, '_');
         // Find the theme by key
         const themeObj = themes.find(t => t.name === blocklyTheme);
         if (!themeObj) {
@@ -140,12 +141,6 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
           return;
         }
 
-        // Save the current workspace state
-        const workspaceXml = Blockly.Xml.workspaceToDom(workspaceRef.current);
-        
-        // Dispose of the current workspace
-        workspaceRef.current.dispose();
-        
         // Set new locale
         switch (i18n.language) {
           case 'es':
@@ -162,16 +157,26 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
         // Apply custom tokens
         Blockly.setLocale(customTokens(t));
 
-        // Re-create workspace with new locale
-        const workspaceConfig = createWorkspaceConfig();
-        const newWorkspace = Blockly.inject(blocklyDiv.current!, workspaceConfig);
-        workspaceRef.current = newWorkspace;
+        // Save workspace state
+        const workspaceXml = Blockly.Xml.workspaceToDom(workspaceRef.current);
 
-        // Restore the workspace state (this will create blocks with new locale)
-        Blockly.Xml.domToWorkspace(workspaceXml, newWorkspace);
+        // Clear the workspace
+        workspaceRef.current.clear();
+        
+        // Restore workspace with new locale (blocks will be recreated with new text)
+        if (workspaceXml.hasChildNodes()) {
+          Blockly.Xml.domToWorkspace(workspaceXml, workspaceRef.current);
+        }
+        
+        // Refresh the toolbox
+        const toolbox = workspaceRef.current.getToolbox();
+        if (toolbox) {
+          // Force toolbox to rebuild with new locale
+          toolbox.refreshSelection();
+        }
 
-        // Re-apply any event listeners that were on the original workspace
-        // You may need to call your setup functions here again
+        // Trigger workspace refresh
+        Blockly.svgResize(workspaceRef.current);
       };
 
       /** Initializes the Blockly workspace. */
@@ -250,7 +255,7 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
           const newTheme = getBlocklyTheme();
           workspaceRef.current.setTheme(newTheme);
         }
-      }, [theme]);
+      }, [props.theme]);
 
       React.useEffect(() => {
         updateBlocklyLocale();

src/toolbox/event_category.ts

@@ -29,12 +29,12 @@ import { RETURN_TYPE_NONE, FunctionKind } from '../blocks/mrc_call_python_functi
 
 const CUSTOM_CATEGORY_EVENTS = 'EVENTS';
 
-export const category = {
+export const getCategory = () => ({
   kind: 'category',
   categorystyle: MRC_CATEGORY_STYLE_METHODS,
-  name: 'Events',
+  name: Blockly.Msg['MRC_CATEGORY_EVENTS'],
   custom: CUSTOM_CATEGORY_EVENTS,
-};
+});
 
 export class EventsCategory {
   private currentModule: commonStorage.Module | null = null;

src/toolbox/hardware_category.ts

@@ -30,7 +30,7 @@ export function getHardwareCategory(currentModule: commonStorage.Module) {
   if (currentModule.moduleType === commonStorage.MODULE_TYPE_ROBOT) {
     return {
       kind: 'category',
-      name: 'Hardware',
+      name: Blockly.Msg['MRC_CATEGORY_HARDWARE'],
       contents: [
         getRobotMechanismsBlocks(currentModule),
         getComponentsBlocks(currentModule, false),
@@ -43,7 +43,7 @@ export function getHardwareCategory(currentModule: commonStorage.Module) {
   if (currentModule.moduleType === commonStorage.MODULE_TYPE_OPMODE) {
     return {
       kind: 'category',
-      name: 'Robot',
+      name: Blockly.Msg['MRC_CATEGORY_ROBOT'],
       contents: [
         getRobotMechanismsBlocks(currentModule),
         getRobotComponentsBlocks(currentModule),
@@ -67,7 +67,7 @@ function getRobotMechanismsBlocks(currentModule: commonStorage.Module) {
   if (currentModule.moduleType === commonStorage.MODULE_TYPE_ROBOT) {
     contents.push({
       kind: 'category',
-      name: '+ Mechanism',
+      name: Blockly.Msg['MRC_CATEGORY_ADD_MECHANISM'],
       contents: getAllPossibleMechanisms(),
     });
   }
@@ -203,7 +203,7 @@ function getRobotMechanismsBlocks(currentModule: commonStorage.Module) {
 
   return {
     kind: 'category',
-    name: 'Mechanisms',
+    name: Blockly.Msg['MRC_CATEGORY_MECHANISMS'],
     contents,
   };
 }
@@ -233,7 +233,7 @@ function getRobotComponentsBlocks(currentModule: commonStorage.Module) {
 
   return {
     kind: 'category',
-    name: 'Components',
+    name: Blockly.Msg['MRC_CATEGORY_COMPONENTS'],
     contents,
   };
 }
@@ -246,7 +246,7 @@ function getRobotMethodsBlocks(currentModule: commonStorage.Module) {
 
   return {
     kind: 'category',
-    name: 'Methods',
+    name: Blockly.Msg['MRC_CATEGORY_METHODS'],
     contents,
   };
 }
@@ -260,7 +260,7 @@ function getComponentsBlocks(currentModule: commonStorage.Module, hideParams : b
   // Add the "+ Component" category
   contents.push({
     kind: 'category',
-    name: '+ Component',
+    name: Blockly.Msg['MRC_CATEGORY_ADD_COMPONENT'],
     contents: Component.getAllPossibleComponents(hideParams)
   });
 
@@ -283,7 +283,7 @@ function getComponentsBlocks(currentModule: commonStorage.Module, hideParams : b
 
   return {
     kind: 'category',
-    name: 'Components',
+    name: Blockly.Msg['MRC_CATEGORY_COMPONENTS'],
     contents,
   };
 }

src/toolbox/lists_category.ts

@@ -1,6 +1,8 @@
-export const category = {
+import * as Blockly from 'blockly/core';
+
+export const getCategory = () => ({
     kind: 'category',
-    name: 'Lists',
+    name: Blockly.Msg['MRC_CATEGORY_LISTS'],
     categorystyle: 'list_category',
     contents: [
       {
@@ -151,4 +153,4 @@ export const category = {
         type: 'lists_reverse',
       },
     ],
-  }
+  });

src/toolbox/logic_category.ts

@@ -1,7 +1,9 @@
-export const category =
+import * as Blockly from 'blockly/core';
+
+export const getCategory = () => (
 {
     kind: 'category',
-    name: 'Logic',
+    name: Blockly.Msg['MRC_CATEGORY_LOGIC'],
     categorystyle: 'logic_category',
     contents: [
         {
@@ -48,4 +50,4 @@ export const category =
             type: 'logic_ternary',
         },
     ],
-}
+});

src/toolbox/loop_category.ts

@@ -1,7 +1,8 @@
-export const category = 
-{
+import * as Blockly from 'blockly/core';
+
+export const getCategory = () => ({
     kind: 'category',
-    name: 'Loops',
+    name: Blockly.Msg['MRC_CATEGORY_LOOPS'],
     categorystyle: 'loop_category',
     contents: [
       {
@@ -61,4 +62,4 @@ export const category =
         type: 'controls_flow_statements',
       },
     ],
-  }
+  });