diff --git a/core/field.js b/core/field.js index 45083993a..9f584f53f 100644 --- a/core/field.js +++ b/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_(); diff --git a/core/field_angle.js b/core/field_angle.js index f776d0a95..535e63711 100644 --- a/core/field_angle.js +++ b/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; }; /** diff --git a/core/field_colour.js b/core/field_colour.js index 9838669fc..57dffb9f7 100644 --- a/core/field_colour.js +++ b/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. diff --git a/core/field_label.js b/core/field_label.js index 7050c6b7a..c7a899df4 100644 --- a/core/field_label.js +++ b/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_(); }; /** diff --git a/tests/blocks/test_blocks.js b/tests/blocks/test_blocks.js index e3e473415..5849ed698 100644 --- a/tests/blocks/test_blocks.js +++ b/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", diff --git a/tests/playground.html b/tests/playground.html index 680b9fb2d..5f5a58444 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -1223,6 +1223,10 @@ h1 { + + + +