Merge pull request #2382 from BeksOmega/feature/FieldIsDirty

Added isDirty_ Property to Fields

core/field.js

@@ -137,6 +137,13 @@ Blockly.Field.prototype.text_ = '';
  */
 Blockly.Field.prototype.sourceBlock_ = null;
 
+/**
+ * Does this block need to be re-rendered?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Field.prototype.isDirty_ = true;
+
 /**
  * Is the field visible, or hidden due to the block being collapsed?
  * @type {boolean}
@@ -379,6 +386,7 @@ Blockly.Field.prototype.render_ = function() {
   // Replace the text.
   this.textElement_.textContent = this.getDisplayText_();
   this.updateWidth();
+  this.isDirty_ = false;
 };
 
 /**
@@ -458,10 +466,18 @@ Blockly.Field.stopCache = function() {
 
 /**
  * Returns the height and width of the field.
+ *
+ * This should *in general* be the only place render_ gets called from.
  * @return {!goog.math.Size} Height and width.
  */
 Blockly.Field.prototype.getSize = function() {
-  if (!this.size_.width) {
+  if (this.isDirty_) {
+    this.render_();
+  } else if (this.visible_ && this.size_.width == 0) {
+    // If the field is not visible the width will be 0 as well, one of the
+    // problems with the old system.
+    console.warn('Deprecated use of setting size_.width to 0 to rerender a' +
+      ' field. Set field.isDirty_ to true instead.');
     this.render_();
   }
   return this.size_;
@@ -546,9 +562,7 @@ Blockly.Field.prototype.setText = function(newText) {
  * @package
  */
 Blockly.Field.prototype.forceRerender = function() {
-  // Set width to 0 to force a rerender of this field.
-  this.size_.width = 0;
-
+  this.isDirty_ = true;
   if (this.sourceBlock_ && this.sourceBlock_.rendered) {
     this.sourceBlock_.render();
     this.sourceBlock_.bumpNeighbours_();

core/field_angle.js

@@ -280,8 +280,6 @@ Blockly.FieldAngle.prototype.setText = function(text) {
     return;
   }
   this.updateGraph_();
-  // Cached width is obsolete.  Clear it.
-  this.size_.width = 0;
 };
 
 /**

core/field_colour.js

@@ -120,9 +120,11 @@ Blockly.FieldColour.prototype.DROPDOWN_BACKGROUND_COLOUR = 'white';
  */
 Blockly.FieldColour.prototype.init = function() {
   Blockly.FieldColour.superClass_.init.call(this);
-  this.borderRect_.style['fillOpacity'] = 1;
   this.size_ = new goog.math.Size(Blockly.FieldColour.DEFAULT_WIDTH,
       Blockly.FieldColour.DEFAULT_HEIGHT);
+  this.borderRect_.style['fillOpacity'] = 1;
+  this.borderRect_.setAttribute('width',
+      this.size_.width + Blockly.BlockSvg.SEP_SPACE_X);
   this.setValue(this.getValue());
 };
 
@@ -139,6 +141,13 @@ Blockly.FieldColour.prototype.dispose = function() {
   Blockly.FieldColour.superClass_.dispose.call(this);
 };
 
+/**
+ * Colour fields are fixed with, no need to update.
+ */
+Blockly.FieldColour.prototype.updateWidth = function() {
+  // NOP
+};
+
 /**
  * Return the current colour.
  * @return {string} Current colour in '#rrggbb' format.
@@ -147,31 +156,6 @@ Blockly.FieldColour.prototype.getValue = function() {
   return this.colour_;
 };
 
-/**
- * Get the size, and rerender if necessary.
- * @return {!goog.math.Size} Height and width.
- */
-Blockly.FieldColour.prototype.getSize = function() {
-  if (!this.size_.width) {
-    this.render_();
-  }
-
-  return this.size_;
-};
-
-/**
- * Updates the width of the field.  Colour fields have a constant width, but
- * the width is sometimes reset to force a rerender.
- */
-Blockly.FieldColour.prototype.updateWidth = function() {
-  var width = Blockly.FieldColour.DEFAULT_WIDTH;
-  if (this.borderRect_) {
-    this.borderRect_.setAttribute('width',
-        width + Blockly.BlockSvg.SEP_SPACE_X);
-  }
-  this.size_.width = width;
-};
-
 /**
  * Set the colour.
  * @param {string} colour The new colour in '#rrggbb' format.

core/field_label.js

@@ -92,8 +92,6 @@ Blockly.FieldLabel.prototype.init = function() {
     this.textElement_.tooltip = this.sourceBlock_;
   }
   Blockly.Tooltip.bindMouseEvents(this.textElement_);
-  // Force a render.
-  this.render_();
 };
 
 /**

tests/blocks/test_blocks.js

@@ -190,7 +190,64 @@ Blockly.defineBlocksWithJsonArray([  // BEGIN JSON EXTRACT
             "text": "NO DATE FIELD"
           }
       }
-    ]
+    ],
+    "colour": 230
+  },
+  {
+    "type": "test_fields_text_input",
+    "message0": "text input %1",
+    "args0": [
+      {
+        "type": "field_input",
+        "name": "TEXT_INPUT",
+        "text": "default"
+      }
+    ],
+    "colour": 230,
+    "tooltip": "",
+    "helpUrl": ""
+  },
+  {
+    "type": "test_fields_checkbox",
+    "message0": "checkbox %1",
+    "args0": [
+      {
+        "type": "field_checkbox",
+        "name": "CHECKBOX",
+        "checked": true
+      }
+    ],
+    "colour": 230,
+    "tooltip": "",
+    "helpUrl": ""
+  },
+  {
+    "type": "test_fields_colour",
+    "message0": "colour %1",
+    "args0": [
+      {
+        "type": "field_colour",
+        "name": "COLOUR",
+        "colour": "#ff0000"
+      }
+    ],
+    "colour": 230,
+    "tooltip": "",
+    "helpUrl": ""
+  },
+  {
+    "type": "test_fields_variable",
+    "message0": "variable %1",
+    "args0": [
+      {
+        "type": "field_variable",
+        "name": "VARIABLE",
+        "variable": "item"
+      }
+    ],
+    "colour": 230,
+    "tooltip": "",
+    "helpUrl": ""
   },
   {
     "type": "test_fields_number",

tests/playground.html

@@ -1223,6 +1223,10 @@ h1 {
       <label text="Others"></label>
       <block type="test_fields_angle"></block>
       <block type="test_fields_date"></block>
+      <block type="test_fields_text_input"></block>
+      <block type="test_fields_checkbox"></block>
+      <block type="test_fields_colour"></block>
+      <block type="test_fields_variable"></block>
     </category>
     <category name="Mutators">
       <label text="logic_compare"></label>