Make and/or blocks mutatable (#2184)

* Make and/or blocks mutatable
Co-authored-by: Xueqi Fan <xueqifan@mit.edu>

Change-Id: I9962994dd63381016f9ca187d5e49ac1193c1596

* Update documentation for and/or blocks

Change-Id: I817a4e3362fc089b86d3473858f7be13a538211c

* Fix logic bug with operator dropdown

Change-Id: Id6739a0e534e63d20963a70e23b94d8dfc6968f6

* Fix synchronization of dropdown and label fields on load

Change-Id: Ie68a5d67a0e749232c832f7840a20f3f92622899

* Handle primary slots more robustly in mutator

Change-Id: I3ca5118684b37751ed4ef3d11006dfa224efaff3

appinventor/blocklyeditor/src/generators/yail/logic.js

@@ -51,7 +51,12 @@ Blockly.Yail['logic_operation'] = function() {
   var argument1 = Blockly.Yail.valueToCode(this, 'B', order) || Blockly.Yail.YAIL_FALSE;
   var code = Blockly.Yail.YAIL_OPEN_COMBINATION + operator
       + Blockly.Yail.YAIL_SPACER + argument0 + Blockly.Yail.YAIL_SPACER
-      + argument1 + Blockly.Yail.YAIL_CLOSE_COMBINATION;
+      + argument1;
+  for (var i = 2; i < this.itemCount_; i++) {
+    var arg = Blockly.Yail.valueToCode(this, this.repeatingInputName + i, order) || Blockly.Yail.YAIL_FALSE;
+    code += Blockly.Yail.YAIL_SPACER + arg;
+  }
+  code += Blockly.Yail.YAIL_CLOSE_COMBINATION;
   return [ code, Blockly.Yail.ORDER_ATOMIC ];
 };
 

appinventor/blocklyeditor/src/versioning.js

@@ -1823,7 +1823,10 @@ Blockly.Versioning.AllUpgradeMaps =
     30: "noUpgrade",
 
     // AI2: Added "replace all mappings" block
-    31: "noUpgrade"
+    31: "noUpgrade",
+
+    // AI2: Added mutators for and/or blocks
+    32: "noUpgrade"
 
   }, // End Language upgraders
 

appinventor/components/src/com/google/appinventor/components/common/YaVersion.java

@@ -510,8 +510,10 @@ public class YaVersion {
   // - BLOCKS_LANGUAGE_VERSION was incremented to 31
   // For YOUNG_ANDROID_VERSION 206:
   // - YANDEX_COMPONENT_VERSION was incremented to 2.
+  // For YOUNG_ANDROID_VERSION 207:
+  // - BLOCKS_LANGUAGE_VERSION was incremented to 32
 
-  public static final int YOUNG_ANDROID_VERSION = 206;
+  public static final int YOUNG_ANDROID_VERSION = 207;
 
   // ............................... Blocks Language Version Number ...............................
 
@@ -591,8 +593,10 @@ public class YaVersion {
   // - The Reverse Text block was added
   // For BLOCKS_LANGUAGE_VERSION 31
   // - The replace-all-mappings block was added.
+  // For BLOCKS_LANGUAGE_VERSION 32
+  // - The and/or blocks gained mutators.
 
-  public static final int BLOCKS_LANGUAGE_VERSION = 31;
+  public static final int BLOCKS_LANGUAGE_VERSION = 32;
 
   // ................................. Target SDK Version Number ..................................
 

appinventor/docs/html/reference/blocks/logic.html

@@ -176,15 +176,15 @@
 
 <h3 id="and">and</h3>
 
-<p><img src="images/logic/and.png" alt="" /></p>
+<p><img src="images/logic/and.png" alt="" height="36" /></p>
 
-<p>Tests whether all of a set of logical conditions are true. The result is true if and only if all the tested conditions are true. When you plug a condition into the test socket, another socket appears so you can add another condition. The conditions are tested left to right, and the testing stops as soon as one of the conditions is false. If there are no conditions to test, then the result if true. You can consider this to be a logician’s joke.</p>
+<p>Tests whether all of a set of logical conditions are true. The result is true if and only if all the tested conditions are true. The number of tests can be expanded using the <a href="../concepts/mutators.html">mutator</a>. The conditions are tested left to right, and the testing stops as soon as one of the conditions is false. If there are no conditions to test, then the result is true. You can consider this to be a logician’s joke.</p>
 
 <h3 id="or">or</h3>
 
-<p><img src="images/logic/or.png" alt="" /></p>
+<p><img src="images/logic/or.png" alt="" height="36" /></p>
 
-<p>Tests whether any of a set of logical conditions are true. The result is true if one or more of the tested conditions are true. When you plug a condition into the test socket, another socket appears so you can add another condition. The conditions are tested left to right, and the testing stops as soon as one of the conditions is true. If there are no conditions to test, then the result is false.</p>
+<p>Tests whether any of a set of logical conditions are true. The result is true if one or more of the tested conditions are true. The number of tests can be expanded using the <a href="../concepts/mutators.html">mutator</a>. The conditions are tested left to right, and the testing stops as soon as one of the conditions is true. If there are no conditions to test, then the result is false.</p>
 
 </article>
 <script>

appinventor/docs/markdown/reference/blocks/logic.md

@@ -50,12 +50,12 @@ Tests to see whether two arguments are not equal.
 
 ### and   {#and}
 
-![](images/logic/and.png)
+![](images/logic/and.png){:height="36"}
 
-Tests whether all of a set of logical conditions are true. The result is true if and only if all the tested conditions are true. When you plug a condition into the test socket, another socket appears so you can add another condition. The conditions are tested left to right, and the testing stops as soon as one of the conditions is false. If there are no conditions to test, then the result if true. You can consider this to be a logician's joke.
+Tests whether all of a set of logical conditions are true. The result is true if and only if all the tested conditions are true. The number of tests can be expanded using the [mutator](../concepts/mutators.html). The conditions are tested left to right, and the testing stops as soon as one of the conditions is false. If there are no conditions to test, then the result is true. You can consider this to be a logician's joke.
 
 ### or   {#or}
 
-![](images/logic/or.png)
+![](images/logic/or.png){:height="36"}
 
-Tests whether any of a set of logical conditions are true. The result is true if one or more of the tested conditions are true. When you plug a condition into the test socket, another socket appears so you can add another condition. The conditions are tested left to right, and the testing stops as soon as one of the conditions is true. If there are no conditions to test, then the result is false.
+Tests whether any of a set of logical conditions are true. The result is true if one or more of the tested conditions are true. The number of tests can be expanded using the [mutator](../concepts/mutators.html). The conditions are tested left to right, and the testing stops as soon as one of the conditions is true. If there are no conditions to test, then the result is false.

appinventor/docs/markdown/reference/concepts/mutators.md

+---
+title: Mutators
+layout: documentation
+---
+
+App Inventor 2 introduced a new feature that allows certain blocks to expand, shrink, or even change their functionality.
+
+![Picture of the mutator icon](images/mutatoricon.png)
+
+Any block that has a blue box with a white gear on top that matches the image to the right is considered a mutator block.
+
+## What does a mutator do?
+
+Mutators change shape. By clicking the blue icon, the user can drag additional smaller blocks into the larger mutator block, thus changing the shape and functionality of the original block. Clicking the icon again will minimize the extra blocks window and show the modified block.
+
+The example below shows the <span class="math block">min</span> mutator block:
+
+![Example of using the mutator to extend a min block](images/minmutator.gif)<br>
+**Explanation of the min mutator block.**
+
+The user wants to find the minimum number of a list of 3 values. Currently there is only space for 2 to connect to the min block.
+
+To fix this, the user clicks the blue gear icon on the min block and drags another item over.
+
+Now there are three sockets for blocks to plug into.
+
+What are the different mutators?
+
+* [if](../blocks/controls.html#if)
+* [and](../blocks/logic.html#and)
+* [or](../blocks/logic.html#or)
+* [+](../blocks/math.html#add)
+* [*](../blocks/math.html#multiply)
+* [min](../blocks/math.html#min)
+* [max](../blocks/math.html#max)
+* [join](../blocks/text.html#join)
+* [make a list](../blocks/lists.html#makealist)
+* [add items to list](../blocks/lists.html#additems)
+* [make a dictionary](../blocks/dictionaries.html#make-a-dictionary)
+* [initialize local name in (do)](../blocks/variables.html#do)
+* [initialize local name in (return)](../blocks/variables.html#return)
+* [procedure do](../blocks/procedures.html#do)
+* [procedure return](../blocks/procedures.html#return)