Using Blockly in React

[Nitesh Jha]

Hello,

I am using 'react-blockly-drawer' to include blockly in my React web app. My app crashes whenever the user creates a 'variable' and sets the variable to any other variable, something like (k = k+1). I can create custom blocks for this, but it is not solving the code crashing problem. Also, I cannot edit the code to create variables.

Is there any way to add a custom block for creating variables?

Is there any way to add blockly to react other than react-blockly-drawer?

I am new to this area. Kindly help me if possible.  

Thank you

--

Nitesh Kumar Jha

[Maribeth Bottorff]

Hi, the Blockly team doesn't own/support that package so if the crashing problem is only happening when using that package, you'll have to report it to them unless someone in the community here is familiar with it. If you can reproduce it in Blockly itself and provide repro steps and hopefully a stack trace, that would be helpful.

If you don't want to use that package, we have an example of using Blockly with React. Note this is not a published package, just one example setup. There is also the react-blockly project, which is also not owned by the Blockly team.

If you want to create custom blocks, you can learn more here but hopefully that's not necessary just to re-implement the variable blocks. Hope that helps,

Maribeth

[Nitesh Jha]

Thank you for your reply. I will provide the stack trace for this problem.

Is there any official package for Blockly in React?

Has anybody completed the integration of Blockly in React, Kindly help and provide your guidance.

 

Thank you

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/c8c9930a-863c-4192-9bf1-c86217afa0e3n%40googlegroups.com.

--

Nitesh Kumar Jha

Research Scholar

Advanced Technology and Development Center

Indian Institute of Technology, Kharagpur

[Nitesh Jha]

Hello all,

I have created a custom block using to add two variables or numbers namely 'addvar'. It is generating python code as presented below.

{
        name: 'addvar',
        category: 'Logic',
        block: {
          init: function () {
            this.jsonInit({
                type: "add_to_var",
                message0: "Add %1 with %2",
                args0: [
                  {
                    type: "input_value",
                    name: "First",
                    //check: "Number"
                  },
                  {
                    type: "input_value",
                    name: "Second",
                    //check: "Number"
                  }
                ],
                //previousBlock: "Action",
                //nextStatement: true,
                output: 'Number',
                colour: 285,
                tooltip: "Add two variables",
                helpUrl: ""
              });
          },
        },
        generator: (block) => {
            var value_first = Blockly.Python.valueToCode(block, 'First', Blockly.Python.ORDER_ATOMIC);
            var value_second = Blockly.Python.valueToCode(block, 'Second', Blockly.Python.ORDER_ATOMIC);
   
            var code = '('+value_first+"+"+value_second+')\n';
            return code;
         
        },
      }

 The code crashes whenever I use the set var function in the variables section to set a variable equaling the sum of two variables (k = m+n). I am sharing the stack trace part for my crashed code. I am using React application to render the Blockly environment. I am using BlocklyDrawer to code blocks. 

If anybody knows how to fix the problem please help.

If there is any other way to render blocks please help? I am stuck in this problem for a long time. Please help.   

[Jason Schanker]

Hi Nitesh,

The error you are getting is originating from this line of code here: https://github.com/google/blockly/blob/master/core/generator.js#L250 .  As indicated two lines above, an expression block needs to return information about the operator with the weakest precedence from its generated code that could be "split" if surrounded by operators of the same or higher precedence so that parentheses could be added as needed.  So, here you'd want to return the following pair (code string for 0th item, numerical constant for 1st):

[value_first + ' + ' + value_second, Blockly.Python.ORDER_ADDITIVE]

Notice that I removed the parentheses because they will automatically be added whenever they are needed and won't be when they're not.  For example, suppose value_first were the string 'foo1' and value_second were the string 'foo2', the generated code from this block would be:

foo1 + foo2

If placed inside the left-hand slot of a greater than block (with a 0 in the right-hand side), then the following code would be generated:

foo1 + foo2 > 0

Here, parentheses would not be needed because addition is performed before checking inequality so foo1 + foo2 would be treated as a single unit.  But if the > block were instead a multiplication block, the generated code would be:

(foo1 + foo2) * 0

This ensures that foo1 + foo2 is treated as a single unit, with the addition being performed before the multiplication.  Without the parentheses, foo2 would be multiplied by 0 first so foo1 + foo2 would be ripped apart, i.e., it would not be treated as a single unit.

I also removed the '\n' so you don't get extra line breaks.  The way you can think about this is that you wouldn't want to hit Enter after you're writing code to add two expressions unless that happens to be the end of the statement.  Otherwise, if you nested these blocks, it would generate code like this:

foo1 + foo2

+ foo3

+ foo4

Best,

Jason

[Jason Schanker]

To follow up, you'll also want to change Blockly.Python.ORDER_ATOMIC to  Blockly.Python.ORDER_ADDITIVE for both value_first and value_second.  

While the return statement provides information about when parentheses are needed when this block is placed inside of another one, the numerical constant arguments in calls to valueToCode provide information about when parentheses are needed when blocks are placed inside of this one.  When placing a block inside of the First input, its generated code will appear to the left of the + so it can be ripped apart by anything with lesser/same precedence.  So, on the first line, you'd want to pass Blockly.Python.ORDER_ADDITIVE instead of Blockly.Python.ORDER_ATOMIC.  Similarly, on the second line, you'd also want to use Blockly.Python.ORDER_ADDITIVE since the generated code from a block on the right will appear to the right of the + so it too can have its code ripped apart by anything with lesser/same precedence than addition.  With ORDER_ATOMIC, you're essentially saying that any input that generates a code with an operator needs to be surrounded by parentheses.  So if you placed say a -5 in the left side and 2 * 4, in the right, the generated code would needlessly have parentheses:

(-5) + (2 * 4)

Note, these constants will generally not be the same for each input nor will they necessarily be the same as the one appearing in the return value.  However, with only one operation of addition, any lower precedence operator from the input blocks will cause their generated code to be split and similarly any operation stronger than addition will cause the entire block's generated code to be split.  An example where all would be different would be a block generating code like this:

f(!A or B)

Here, you'd use Blockly.Python.ORDER_LOGICAL_NOT for input A since any code with lower precedence than the ! will be split; it could also be split by the ||, mainly anything with lower/same precedence than LOGICAL_OR, but anything with precedence less than LOGICAL_OR will automatically have lesser precedence than LOGICAL_NOT.  Meanwhile, the return value would use Blockly.Python.ORDER_FUNCTION_CALL since when placed inside another block, only the function f could potentially be split as the ! and or appear in parentheses.

[Nitesh Jha]

Thank you for your help!! It works and I have implemented the same for subtraction, multiplication, and division.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/913359f0-ad56-45ab-949b-36682b4235dan%40googlegroups.com.