JSON definitions for colour blocks (#838)

Replaces old colour block definitions with a Blockly.defineBlocksWithJsonArray(..) call. Generator unit tests continue to load and pass, signifying compatibility with prior block definitions. Replaces extension 'math_number_tooltip' with the reusable 'parent_tooltip_when_inline' extension, also used by colour_picker. Includes tests.
2026-01-14 12:27:10 +01:00 · 2017-01-18 13:48:46 -08:00
parent 8aa8b1b3ba
commit 78dc5ed9c2
4 changed files with 188 additions and 121 deletions
--- a/blocks/colour.js
+++ b/blocks/colour.js
@@ -20,6 +20,11 @@

 /**
 * @fileoverview Colour blocks for Blockly.
+ *
+ * This file is scraped to extract .json file definitions. The array passed to
+ * defineBlocksWithJsonArray(..) must be strict JSON: double quotes only, no
+ * outside references, no functions, no trailing commasa, etc. The one
+ * exception is end-of-line comments, which the scraper will remove.
 * @author fraser@google.com (Neil Fraser)
 */
 'use strict';
@@ -31,103 +36,96 @@ goog.require('Blockly.Blocks');

 /**
 * Common HSV hue for all blocks in this category.
+ * This should be the same as Blockly.Msg.COLOUR_HUE.
 */
 Blockly.Blocks.colour.HUE = 20;

-Blockly.Blocks['colour_picker'] = {
-  /**
-   * Block for colour picker.
-   * @this Blockly.Block
-   */
-  init: function() {
-    this.jsonInit({
-      "message0": "%1",
-      "args0": [
-        {
-          "type": "field_colour",
-          "name": "COLOUR",
-          "colour": "#ff0000"
-        }
-      ],
-      "output": "Colour",
-      "colour": Blockly.Blocks.colour.HUE,
-      "helpUrl": Blockly.Msg.COLOUR_PICKER_HELPURL
-    });
-    // Assign 'this' to a variable for use in the tooltip closure below.
-    var thisBlock = this;
-    // Colour block is trivial.  Use tooltip of parent block if it exists.
-    this.setTooltip(function() {
-      var parent = thisBlock.getParent();
-      return (parent && parent.getInputsInline() && parent.tooltip) ||
-          Blockly.Msg.COLOUR_PICKER_TOOLTIP;
-    });
-  }
-};
+Blockly.defineBlocksWithJsonArray([
+  // Block for colour picker.
+  {
+    "type": "colour_picker",
+    "message0": "%1",
+    "args0": [
+      {
+        "type": "field_colour",
+        "name": "COLOUR",
+        "colour": "#ff0000"
+      }
+    ],
+    "output": "Colour",
+    "colour": "%{BKY_COLOUR_HUE}",
+    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
+    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
+    "extensions": ["parent_tooltip_when_inline"]
+  },

-Blockly.Blocks['colour_random'] = {
-  /**
-   * Block for random colour.
-   * @this Blockly.Block
-   */
-  init: function() {
-    this.jsonInit({
-      "message0": Blockly.Msg.COLOUR_RANDOM_TITLE,
-      "output": "Colour",
-      "colour": Blockly.Blocks.colour.HUE,
-      "tooltip": Blockly.Msg.COLOUR_RANDOM_TOOLTIP,
-      "helpUrl": Blockly.Msg.COLOUR_RANDOM_HELPURL
-    });
-  }
-};
+  // Block for random colour.
+  {
+    "type": "colour_random",
+    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
+    "output": "Colour",
+    "colour": "%{BKY_COLOUR_HUE}",
+    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
+    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
+  },

-Blockly.Blocks['colour_rgb'] = {
-  /**
-   * Block for composing a colour from RGB components.
-   * @this Blockly.Block
-   */
-  init: function() {
-    this.setHelpUrl(Blockly.Msg.COLOUR_RGB_HELPURL);
-    this.setColour(Blockly.Blocks.colour.HUE);
-    this.appendValueInput('RED')
-        .setCheck('Number')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.COLOUR_RGB_TITLE)
-        .appendField(Blockly.Msg.COLOUR_RGB_RED);
-    this.appendValueInput('GREEN')
-        .setCheck('Number')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.COLOUR_RGB_GREEN);
-    this.appendValueInput('BLUE')
-        .setCheck('Number')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.COLOUR_RGB_BLUE);
-    this.setOutput(true, 'Colour');
-    this.setTooltip(Blockly.Msg.COLOUR_RGB_TOOLTIP);
-  }
-};
+  // Block for composing a colour from RGB components.
+  {
+    "type": "colour_rgb",
+    "message0": "%{BKY_COLOUR_RGB_TITLE} %{BKY_COLOUR_RGB_RED} %1 %{BKY_COLOUR_RGB_GREEN} %2 %{BKY_COLOUR_RGB_BLUE} %3",
+    "args0": [
+      {
+        "type": "input_value",
+        "name": "RED",
+        "check": "Number",
+        "align": "RIGHT"
+      },
+      {
+        "type": "input_value",
+        "name": "GREEN",
+        "check": "Number",
+        "align": "RIGHT"
+      },
+      {
+        "type": "input_value",
+        "name": "BLUE",
+        "check": "Number",
+        "align": "RIGHT"
+      }
+    ],
+    "output": "Colour",
+    "colour": "%{BKY_COLOUR_HUE}",
+    "helpUrl": "%{BKY_COLOUR_RGB_HELPURL}",
+    "tooltip": "%{BKY_COLOUR_RGB_TOOLTIP}"
+  },

-Blockly.Blocks['colour_blend'] = {
-  /**
-   * Block for blending two colours together.
-   * @this Blockly.Block
-   */
-  init: function() {
-    this.setHelpUrl(Blockly.Msg.COLOUR_BLEND_HELPURL);
-    this.setColour(Blockly.Blocks.colour.HUE);
-    this.appendValueInput('COLOUR1')
-        .setCheck('Colour')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.COLOUR_BLEND_TITLE)
-        .appendField(Blockly.Msg.COLOUR_BLEND_COLOUR1);
-    this.appendValueInput('COLOUR2')
-        .setCheck('Colour')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.COLOUR_BLEND_COLOUR2);
-    this.appendValueInput('RATIO')
-        .setCheck('Number')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.COLOUR_BLEND_RATIO);
-    this.setOutput(true, 'Colour');
-    this.setTooltip(Blockly.Msg.COLOUR_BLEND_TOOLTIP);
+  // Block for blending two colours together.
+  {
+    "type": "colour_blend",
+    "message0": "%{BKY_COLOUR_BLEND_TITLE} %{BKY_COLOUR_BLEND_COLOUR1} %1 %{BKY_COLOUR_BLEND_COLOUR2} %2 %{BKY_COLOUR_BLEND_RATIO} %3",
+    "args0": [
+      {
+        "type": "input_value",
+        "name": "COLOUR1",
+        "check": "Colour",
+        "align": "RIGHT"
+      },
+      {
+        "type": "input_value",
+        "name": "COLOUR2",
+        "check": "Colour",
+        "align": "RIGHT"
+      },
+      {
+        "type": "input_value",
+        "name": "RATIO",
+        "check": "Number",
+        "align": "RIGHT"
+      }
+    ],
+    "output": "Colour",
+    "colour": "%{BKY_COLOUR_HUE}",
+    "helpUrl": "%{BKY_COLOUR_BLEND_HELPURL}",
+    "tooltip": "%{BKY_COLOUR_BLEND_TOOLTIP}"
  }
-};
+]);  // End of defineBlocksWithJsonArray(...) DO NOT DELETE
--- a/blocks/math.js
+++ b/blocks/math.js
@@ -34,31 +34,23 @@ goog.require('Blockly.Blocks');
 */
 Blockly.Blocks.math.HUE = 230;

-// Block for numeric value.
-Blockly.defineBlocksWithJsonArray([{
-  "type": "math_number",
-  "message0": "%1",
-  "args0": [{
-    "type": "field_number",
-    "name": "NUM",
-    "value": 0
-  }],
-  "output": "Number",
-  "colour": "%{BKY_MATH_HUE}",
-  "helpUrl": "%{BKY_MATH_NUMBER_HELPURL}",
-  "extensions": ["math_number_tooltip"]
-}]);
-
-Blockly.Extensions.register('math_number_tooltip', function() {
-  // Use the parent's tooltip when attached to an inline value input.
-  this.setTooltip(function() {
-    var parent = this.getParent();
-    return (parent &&
-      parent.getInputsInline() &&
-      parent.tooltip) ||
-      Blockly.Msg.MATH_NUMBER_TOOLTIP;
-  }.bind(this));
-});
+Blockly.defineBlocksWithJsonArray([
+  // Block for numeric value.
+  {
+    "type": "math_number",
+    "message0": "%1",
+    "args0": [{
+      "type": "field_number",
+      "name": "NUM",
+      "value": 0
+    }],
+    "output": "Number",
+    "colour": "%{BKY_MATH_HUE}",
+    "helpUrl": "%{BKY_MATH_NUMBER_HELPURL}",
+    "tooltip": "%{BKY_MATH_NUMBER_TOOLTIP}",
+    "extensions": ["parent_tooltip_when_inline"]
+  }
+]);

 Blockly.Blocks['math_arithmetic'] = {
  /**
--- a/core/extensions.js
+++ b/core/extensions.js
@@ -73,3 +73,24 @@ Blockly.Extensions.apply = function(name, block) {
  }
  extensionFn.apply(block);
 };
+
+/**
+ * Configures the tooltip to mimic the parent block when connected. Otherwise,
+ * uses the tooltip text at the time this extension is initialized. This takes
+ * advantage of the fact that all other values from JSON are initialized before
+ * extensions.
+ * @this {Blockly.Block}
+ * @private
+ */
+Blockly.Extensions.extensionParentTooltip_ = function() {
+  this.tooltipWhenNotConnected_ = this.tooltip;
+  this.setTooltip(function() {
+    var parent = this.getParent();
+    return (parent &&
+      parent.getInputsInline() &&
+      parent.tooltip) ||
+      this.tooltipWhenNotConnected_;
+  }.bind(this));
+};
+Blockly.Extensions.register('parent_tooltip_when_inline',
+    Blockly.Extensions.extensionParentTooltip_);
--- a/tests/jsunit/extensions_test.js
+++ b/tests/jsunit/extensions_test.js
@@ -98,7 +98,7 @@ function test_extension_not_a_function() {
    // Expected.
    exceptionWasThrown = true;
  } finally {
-    delete Blockly.Blocks['extension_just_a_string'];
+    delete Blockly.Extensions.ALL_['extension_just_a_string'];
  }
  assert(exceptionWasThrown);

@@ -110,7 +110,7 @@ function test_extension_not_a_function() {
    // Expected.
    exceptionWasThrown = true;
  } finally {
-    delete Blockly.Blocks['extension_is_null'];
+    delete Blockly.Extensions.ALL_['extension_is_null'];
  }
  assert(exceptionWasThrown);

@@ -122,7 +122,63 @@ function test_extension_not_a_function() {
    // Expected.
    exceptionWasThrown = true;
  } finally {
-    delete Blockly.Blocks['extension_is_undefined'];
+    delete Blockly.Extensions.ALL_['extension_is_undefined'];
  }
  assert(exceptionWasThrown);
 }
+
+function test_parent_tooltip_when_inline() {
+  var defaultTooltip = "defaultTooltip";
+  var parentTooltip = "parentTooltip";
+  try {
+    Blockly.defineBlocksWithJsonArray([
+      {
+        "type": "test_parent_tooltip_when_inline",
+        "message0": "test_parent_tooltip_when_inline",
+        "output": true,
+        "tooltip": defaultTooltip,
+        "extensions": ["parent_tooltip_when_inline"]
+      },
+      {
+        "type": "test_parent",
+        "message0": "%1",
+        "args0": [
+          {
+            "type": "input_value",
+            "name": "INPUT"
+          }
+        ],
+        "tooltip": parentTooltip
+      }
+    ]);
+
+    var workspace = new Blockly.Workspace();
+    var block = new Blockly.Block(workspace, 'test_parent_tooltip_when_inline');
+
+    // Tooltip is dynamic after extension initialization.
+    assert(goog.isFunction(block.tooltip));
+    assertEquals(block.tooltip(), defaultTooltip);
+
+    // Tooltip is normal before connected to parent.
+    var parent = new Blockly.Block(workspace, 'test_parent');
+    assertEquals(parent.tooltip, parentTooltip);
+    assertFalse(!!parent.inputsInline);
+
+    // Tooltip is normal when parent is not inline.
+    parent.getInput('INPUT').connection.connect(block.outputConnection);
+    assertEquals(block.getParent(), parent);
+    assertEquals(block.tooltip(), defaultTooltip);
+
+    // Tooltip is parent's when parent is inline.
+    parent.setInputsInline(true);
+    assertEquals(block.tooltip(), parentTooltip);
+
+    // Tooltip revert when disconnected.
+    parent.getInput('INPUT').connection.disconnect();
+    assert(!block.getParent());
+    assertEquals(block.tooltip(), defaultTooltip);
+  } finally {
+    delete Blockly.Blocks['test_parent_tooltip_when_inline'];
+    delete Blockly.Blocks['test_parent'];
+  }
+}