shows categories with blocks

src/components/blockly/PBBlocklyWorkspace.tsx

@@ -7,7 +7,8 @@ import { useEffect, useState, useRef } from "react";
 import Blockly from "blockly/core"
 import { useThemeContext } from "../../theme/ThemeContext";
 
-/*
+/* inject options https://developers.google.com/blockly/reference/js/blockly.blocklyoptions_interface.md
+
 collapse
 comments
 css
@@ -42,7 +43,7 @@ export type PBBlocklyWorkspaceProps = {
   workspaceConfiguration?: Blockly.BlocklyOptions;
 }
 
-const MyBlockly = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWorkspaceProps) => {
+export const PBBlocklyWorkspace = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWorkspaceProps) => {
   const wrapperRef = useRef();
   const [workspace, setWorkspace] = useState<Blockly.WorkspaceSvg>();
   const [wasCategorized, setWasCategorized] = useState<Boolean | null>(null)
@@ -57,10 +58,10 @@ const MyBlockly = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWork
   setupBlocklyBlocks(t)
 
   useEffect(() => {
-    if( workspace )
+    if (workspace)
       workspace.setTheme(blocklyTheme)
   }, [blocklyTheme]);
-  
+
   useEffect(() => {
     if (wrapperRef.current && workspace) {
       if (wasCategorized !== null && categorized !== wasCategorized) {
@@ -72,8 +73,10 @@ const MyBlockly = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWork
           ...props.workspaceConfiguration
         }));
       }
-      else
+      else {
         workspace.updateToolbox(toolbox)
+        workspace.getToolbox()?.clearSelection()
+      }
 
       setWasCategorized(categorized)
     }
@@ -102,19 +105,10 @@ const MyBlockly = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWork
     };
   }, []);
 
-  return (<Box width="100%" height="100%" ref={wrapperRef} className="blockly" />)
-}
-
-
-export const PBBlocklyWorkspace = ({ blockIds, categorized, sx, title, ...props }: PBBlocklyWorkspaceProps) => {
-  const { t } = useTranslation("blocks")
-  console.log(blockIds.join(","))
-  return <PBCard sx={{ ...sx }}>
-    {title && <Typography>{t('preview')}</Typography>}
-    <MyBlockly
-      data-testid={blockIds.join(",")}
-      blockIds={blockIds}
-      categorized={categorized}
-      {...props} />
-  </PBCard>
+  return (
+    <PBCard sx={{ ...sx }}>
+      {title && <Typography>{t('preview')}</Typography>}
+      <Box width="100%" height="100%" ref={wrapperRef} className="blockly" />
+    </PBCard>
+  )
 }

src/components/blockly/blockly.ts

@@ -1,4 +1,4 @@
-import { BlockType } from "./blocks"
+import { BlockType, categories } from "./blocks"
 import Es from 'blockly/msg/es';
 import Blockly from "blockly/core"
 import { javascriptGenerator, Order } from 'blockly/javascript'
@@ -28,7 +28,7 @@ type BlocklyBlockDefinition = {
 export type Toolbox = { kind: "categoryToolbox" | "flyoutToolbox", contents: ToolboxItem[] }
 type ToolboxItem = ToolboxBlock | ToolBoxCategory
 type ToolboxBlock = { kind: "block", type: string }
-type ToolBoxCategory = { kind: "category", name: string, contents: ToolboxItem[] }
+type ToolBoxCategory = { kind: "category" | '', name: string, contents: ToolboxItem[] }
 
 const primitivesColor = '#4a6cd4';
 const controlColor = '#ee7d16';
@@ -154,7 +154,10 @@ const createValueBlock = (id: string, message: string, options: optionType, icon
   })
 
   if (icon) {
-    jsonInit.message0 = `%1 ${message}`
+    if (message.includes('%1'))
+      jsonInit.message0 = `%2 ${message}`
+    else
+      jsonInit.message0 = `%1 ${message}`
     jsonInit.args0.push({
       "type": "field_image",
       "src": `imagenes/iconos/${icon}`,
@@ -469,7 +472,7 @@ const createPrimitiveBlocks = (t: (key: string) => string) => {
 
   createPrimitiveBlock('IrseEnYacare', t("blocks.goInAlligator"), {
     'comportamiento': 'IrseEnYacare',
-    'argumentos': `{}`,
+    'argumentos': '{}',
   }, 'icono.yacare.png'
   );
 
@@ -709,7 +712,7 @@ const createPrimitiveBlocks = (t: (key: string) => string) => {
   }, 'icono.letter-c.svg'
   );
 
-  createPrimitiveBlock('MoverA', t(`blocks.moveTo`), { 'comportamiento': '', 'argumentos': '{}' }, '',
+  createPrimitiveBlock('MoverA', `${t(`blocks.moveTo`)} %1`, { 'comportamiento': '', 'argumentos': '{}' }, '',
     {
       message0: `${t(`blocks.moveTo`)} %1`,
       colour: primitivesColor,
@@ -1376,44 +1379,6 @@ const createOthersBlocks = (t: (key: string) => string) => {
     init: Blockly.Blocks["logic_compare"].init,
     categoryId: 'operators',
   }
-/*
-  Blockly.Blocks['OpComparacion'] = {
-    init: function () {
-      this.jsonInit(
-        {
-          'type': 'logic_compare',
-          'message0': '%1 %2 %3',
-          'args0': [
-            {
-              'type': 'input_value',
-              'name': 'A',
-            },
-            {
-              'type': 'field_dropdown',
-              'name': 'OP',
-              'options': [
-                ['=', 'EQ'],
-                ['\u2260', 'NEQ'],
-                ['\u200F<', 'LT'],
-                ['\u200F\u2264', 'LTE'],
-                ['\u200F>', 'GT'],
-                ['\u200F\u2265', 'GTE'],
-              ],
-            },
-            {
-              'type': 'input_value',
-              'name': 'B',
-            },
-          ],
-          'inputsInline': true,
-          'output': 'Boolean',
-          'style': 'logic_blocks',
-          'helpUrl': '%{BKY_LOGIC_COMPARE_HELPURL}',
-          'extensions': ['logic_compare', 'logic_op_tooltip'],
-          categoryId: 'operators',
-        })
-    }
-  } */
 }
 
 const createCommonCode = () => {
@@ -1471,61 +1436,38 @@ const defineBlocklyTranslations = (t: (key: string) => string) => {
   disableUnwantedProcedureBlocks()
 }
 
-export const categorizedToolbox = (t: (key: string) => string, blocks: BlockType[]): Toolbox => ({
-  kind: "categoryToolbox",
-  contents: [
-    {
-      kind: "category",
-      name: `${t('categories.primitives')}`,
-      contents: blocks.filter(block => block.categoryId === "primitives").map(blockTypeToToolboxBlock)
-    },
-    {
-      kind: "category",
-      name: `${t('categories.myprocedures')}`,
-      contents: blocks.filter(block => block.categoryId === "myprocedures").map(blockTypeToToolboxBlock)
-    },
-    {
-      kind: "category",
-      name: `${t('categories.repetitions')}`,
-      contents: blocks.filter(block => block.categoryId === "repetitions").map(blockTypeToToolboxBlock)
-    },
-    {
-      kind: "category",
-      name: `${t('categories.alternatives')}`,
-      contents: blocks.filter(block => block.categoryId === "alternatives").map(blockTypeToToolboxBlock)
-    },
-    {
-      kind: "category",
-      name: `${t('categories.variables')}`,
-      contents: blocks.filter(block => block.categoryId === "variables").map(blockTypeToToolboxBlock)
-    },
-    {
-      kind: "category",
-      name: `${t('categories.values')}`,
-      contents: blocks.filter(block => block.categoryId === "values").map(blockTypeToToolboxBlock)
-    },
-    {
-      kind: "category",
-      name: `${t('categories.sensors')}`,
-      contents: blocks.filter(block => block.categoryId === "sensors").map(blockTypeToToolboxBlock)
-    },
-    {
+
+
+export const categorizedToolbox = (t: (key: string) => string, blocks: BlockType[]): Toolbox => {
+
+  const categoryBlocksFor = (categoryId: string): ToolboxItem => {
+    const contents = blocks.filter(block => block.categoryId === categoryId).map(blockTypeToToolboxBlock)
+    return contents.length ? {
       kind: "category",
-      name: `${t('categories.operators')}`,
-      contents: blocks.filter(block => block.categoryId === "operators").map(blockTypeToToolboxBlock)
+      name: `${t(`categories.${categoryId}`)}`,
+      contents: contents
+    } : {
+      kind: '',
+      name: '',
+      contents: []
     }
-  ]
-})
+  }
+
+  return ({
+    kind: "categoryToolbox",
+    contents: categories.map(category => categoryBlocksFor(category) ) 
+  })
+}
 
 export const uncategorizedToolbox = (blocks: BlockType[]): Toolbox => ({
   kind: "flyoutToolbox",
   contents: blocks.map(blockTypeToToolboxBlock)
 })
 
 export const setupBlocklyBlocks = (t: (key: string) => string) => {
-  
+
   defineBlocklyTranslations(t)
-  
+
   createFirstBlock(t)
 
   createPrimitiveBlocks(t)

src/components/blockly/blocks.ts

@@ -7,7 +7,7 @@ export const categories: string[] = [
   'alternatives',
   'values',
   'sensors',
-  'variables',
+  //'variables',
   'operators'
 ]
 

src/components/creator/Editor/ChallengeDetailsEdition/ToolBoxEditor/ToolboxPreview.tsx

@@ -1,5 +1,4 @@
 import { PBBlocklyWorkspace } from "../../../../blockly/PBBlocklyWorkspace"
-import Blockly from "blockly";
 
 type ToolboxPreviewProps = {
     categorized: boolean,
@@ -13,7 +12,6 @@ export const ToolboxPreview = ( {categorized, blockIds} : ToolboxPreviewProps )
             blockIds={blockIds}
             categorized={categorized}
             workspaceConfiguration={{trashcan:false, scrollbars: false}} //Needed to make it look like this is only the toolbox
-            //onWorkspaceChange={() => {Blockly.getMainWorkspace().clear()}} //Needed to make it look like this is only the toolbox
         />
 
 }