Proceds blockly

package.json

@@ -56,6 +56,7 @@
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
     "blockly": "^10.4.3",
+    "blockly-proceds": "^1.0.15",
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",

src/components/blockly/PBBlocklyWorkspace.tsx

@@ -4,7 +4,7 @@ import { Toolbox, categorizedToolbox, setupBlockly, setupBlocklyBlocks, setXml,
 import { PBCard } from "../PBCard";
 import { Box, PaperProps, Typography } from "@mui/material";
 import { useState } from "react";
-import Blockly from "blockly/core"
+import * as Blockly from 'blockly/core'
 import { useThemeContext } from "../../theme/ThemeContext";
 
 // inject options https://developers.google.com/blockly/reference/js/blockly.blocklyoptions_interface.md
@@ -31,7 +31,7 @@ export const PBBlocklyWorkspace = ({ blockIds, categorized, sx, title, ...props
 
   setupBlocklyBlocks(t)
 
-  if (blocklyContainer)  setupBlockly(blocklyContainer, { theme: blocklyTheme, toolbox, ...props.workspaceConfiguration } ) 
+  if (blocklyContainer) setupBlockly(blocklyContainer, { theme: blocklyTheme, toolbox, ...props.workspaceConfiguration } ) 
 
   if (blocklyContainer && props.initialXml) setXml(props.initialXml )
 

src/components/blockly/blockly.ts

@@ -32,7 +32,7 @@ export 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[], custom?: string }
 
 export const xmlBloqueEmpezarAEjecutar = `<xml xmlns="http://www.w3.org/1999/xhtml">
               <block type="al_empezar_a_ejecutar" x="15" y="15"></block>
@@ -67,7 +67,8 @@ export const setXml = (xml: string) => {
 export const setupBlockly = (container: Element, workspaceConfiguration: Blockly.BlocklyOptions) => {
   container.replaceChildren() //Removes previous injection, otherwise it might keep inserting below the current workspace
   container.ariaValueText = 'child-blockly'
-  Blockly.inject(container, workspaceConfiguration)
+  const workspace = Blockly.inject(container, workspaceConfiguration)
+  workspace.addChangeListener(Blockly.Events.disableOrphans);
 }
 
 export const workspaceToCode = () => javascriptGenerator.workspaceToCode(Blockly.getMainWorkspace())
@@ -109,15 +110,17 @@ export const messageBlock = (message: string) => {
 }
 
 const createCommonCode = () => {
-  javascriptGenerator.addReservedWords('main', 'hacer', 'out_hacer', 'evaluar');
+  javascriptGenerator.addReservedWords('main,hacer,out_hacer,evaluar');
 
+  /*
   javascriptGenerator.required_value = function () {
     return null
   };
 
   javascriptGenerator.required_statement = function () {
     return null
   };
+*/
 
   javascriptGenerator.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
   javascriptGenerator.addReservedWords('highlightBlock');
@@ -155,7 +158,6 @@ const defineBlocklyTranslations = (t: (key: string) => string) => {
   Blockly.Msg.CLEAN_UP = t("contextMenu.cleanUp")
   Blockly.Msg.EXTERNAL_INPUTS = t("contextMenu.externalInputs")
 
-
   // ProcedsBlockly.init() needs all procedure blocks to work, so we need to put them back
   // After calling init(), we disable unwanted toolbox blocks again
   enableUnwantedProcedureBlocks()
@@ -167,10 +169,15 @@ export const categorizedToolbox = (t: (key: string) => string, blocks: BlockType
 
   const categoryBlocksFor = (categoryId: string): ToolboxItem => {
     const contents = blocks.filter(block => block.categoryId === categoryId).map(blockTypeToToolboxBlock)
-    return contents.length ? {
+    return contents.length ? categoryId === 'myprocedures' ? {
+      kind: "category",
+      name: `${t(`categories.${categoryId}`)}`,
+      contents: contents,
+      custom: "PROCEDURE"
+    } : {
       kind: "category",
       name: `${t(`categories.${categoryId}`)}`,
-      contents: contents
+      contents: contents,
     } : {
       kind: '',
       name: '',
@@ -187,4 +194,4 @@ export const categorizedToolbox = (t: (key: string) => string, blocks: BlockType
 export const uncategorizedToolbox = (blocks: BlockType[]): Toolbox => ({
   kind: "flyoutToolbox",
   contents: blocks.map(blockTypeToToolboxBlock)
-})
+})

src/components/blockly/blocksGallery/others.ts

@@ -1,7 +1,8 @@
-import { createCommonBlocklyBlocks } from "../utils";
+import { createCommonBlocklyBlocks, disableUnwantedProcedureBlocks, enableUnwantedProcedureBlocks } from "../utils";
 import Blockly, { Block } from "blockly/core"
 import { sensorsColor } from "./sensors";
 import { javascriptGenerator, Order } from "blockly/javascript";
+import { procedsBlocklyInit } from 'blockly-proceds'
 
 const othersColor = '#cc5b22';
 const eventsColor = '#00a65a'; // == boton ejecutar
@@ -138,4 +139,10 @@ export const createOthersBlocks = (t: (key: string) => string) => {
         init: Blockly.Blocks["logic_compare"].init,
         categoryId: 'operators',
     }
+
+    enableUnwantedProcedureBlocks()
+
+    procedsBlocklyInit(Blockly)
+
+    disableUnwantedProcedureBlocks()
 }