initial implementation of typed variables

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@blockly/block-plus-minus": "^2.0.8",
     "@blockly/field-slider": "^2.0.7",
+    "@blockly/plugin-typed-variable-modal": "^3.1.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",

src/components/Blockly/BlocklyComponent.jsx

@@ -35,10 +35,12 @@ import { Card } from '@material-ui/core';
 Blockly.setLocale(locale);
 
 class BlocklyComponent extends React.Component {
+    
     constructor(props) {
         super(props);
         this.blocklyDiv = React.createRef();
         this.toolbox = React.createRef();
+        this.state = {workspace: undefined};
     }
 
     componentDidMount() {
@@ -50,6 +52,7 @@ class BlocklyComponent extends React.Component {
                 ...rest
             },
         );
+        this.setState({workspace: this.primaryWorkspace})
 
         if (initialXml) {
             Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), this.primaryWorkspace);
@@ -65,11 +68,9 @@ class BlocklyComponent extends React.Component {
     }
 
     render() {
-
-
         return <React.Fragment>
             <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}}/>
-            <Toolbox toolbox={this.toolbox} />
+            <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
         </React.Fragment>;
     }
 }

src/components/Blockly/toolbox/Toolbox.js

@@ -3,9 +3,53 @@ import { Block, Value, Field, Shadow, Category } from '../';
 import { getColour } from '../helpers/colour'
 import '@blockly/block-plus-minus';
 
+import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal';
+import * as Blockly from 'blockly/core';
+import BlocklyComponent from '../BlocklyComponent';
+
+
+
 
 class Toolbox extends React.Component {
 
+    componentDidMount() {
+        /**
+         
+         const workspace = this.props;
+         console.log()
+         
+         this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
+         
+         const typedVarModal = new TypedVariableModal(workspace, 'callbackName', [["PENGUIN", "Penguin"], ["GIRAFFE", "Giraffe"]]);
+         typedVarModal.init();
+       */
+      console.log(this.props)
+    }
+
+    componentDidUpdate() {
+        console.log(this.props)
+        this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
+         
+         const typedVarModal = new TypedVariableModal(this.props.workspace, 'callbackName', [['char', 'SHORT_NUMBER'], ['int', 'NUMBER'], ['long', 'DECIMAL'], ['String','TEXT'], ['char', 'CHARACTER'], ['boolean', 'BOOLEAN'], [ 'void' , 'NULL'], ['undefined', 'UNDEF']]);
+         typedVarModal.init();
+    }
+
+    createFlyout(workspace) {
+        let xmlList = [];
+        // Add your button and give it a callback name.
+        const button = document.createElement('button');
+        button.setAttribute('text', 'Create Typed Variable');
+        button.setAttribute('callbackKey', 'callbackName');
+    
+        xmlList.push(button);
+    
+        // This gets all the variables that the user creates and adds them to the
+        // flyout.
+        const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
+        xmlList = xmlList.concat(blockList);
+        return xmlList;
+    };
+
     render() {
         return (
             <xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
@@ -293,7 +337,9 @@ class Toolbox extends React.Component {
                     </Block>
                     <Block type="io_notone"></Block>
                 </Category>
-                <Category name="Variablen" colour={getColour().variables} custom="VARIABLE"></Category>`;
+                <Category name="Colours" custom="CREATE_TYPED_VARIABLE"></Category>    
+                <Category name="Variablen" colour={getColour().variables} custom="CREATE_TYPED_VARIABLE">
+                </Category>`;
                 <sep></sep>
                 <Category name="Input/Output" colour={getColour().io}>
                     <Block type="io_digitalwrite"></Block>