Customizable toolbox - Githubissues

bartbutenaers commented 3 years ago

Hi @cymplecy, @jsccjj,

In the last years there were some people asking how to load their own blocks into this node. However that kind of stuff was not possible, since the loading of the libraries was completely hardcoded and very inflexible.

This is also a disadvantage when we want to start using extra Blockly plugins. So I really wanted to solve this in this major version, to make sure we can easily introduce minor releases in the future.

This was a "huge" change to the code, so it would be nice if you could do some test!!!!

The config node now contains two tabsheets. The tabsheet "Categories" will become active when the checkbox "customize toolbox" is selected. Categories can be moved/removed/added/changed. And there is a "reset" button to go back to the original categories (i.e. our categories):

In the above demo you can see that when I move the "Objects" categorie on top in the editableList, then this category will also be on top in the workspace toolbox.
When a category is removed, you might end up with conflicts. When a block of that category is currently being used in the workspace, the I show this error:

This way the user is aware that of the problem that he has caused. Then I show the workspace without the blocks whose category is being removed.
A user can also add a new category, and specify the required resources in the editableList. The resources can be files in an npm module or in a folder. For example I have added following line:

With those resources:
```
[
"blockly-contrib/file/c:/temp/myblocks/myBlocksCodeGen.js",
"blockly-contrib/file/c:/temp/myblocks/myBlocksDefs.js",
"blockly-contrib/file/c:/temp/myblocks/myToolbox.xml",
"blockly-contrib/file/c:/temp/myblocks/my_messages/en.js"
]
```
Which specifies the backend part to get the files in this case from this folder:

The myToolbox.xml file specifies that one of my custom blocks need to be displayed in my custom category, and the other one needs to be displayed in the existing Node-RED library:
```
<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">
  <category name="MyCategory" colour="#FF0000">
     <block type="my_own_block"></block>
  </category>   
  <category name="Node-RED" colour="#BB8FCE">
     <block type="my_nodered_block"></block>
  </category>
</xml>
```
Which will result in this:

The following zip contains the files of my custom category: myblocks.zip
Of course the user can also use copy our (e.g. toolbox.xml) files to his own folder, modify them and add links to those modified copies.

I think that advanced users can now do whatever they want.

bartbutenaers commented 3 years ago

Note that you only need to specify where the (optional) en.js file is stored. When another language is selected, the corresponding language file (e.g. nl.js) will automatically be fetched from the same directory:

cymplecy commented 3 years ago

Clever stuff :)

bartbutenaers / node-red-contrib-blockly

Customizable toolbox #76