diff --git a/core/field.js b/core/field.js index 63bed0787..854bfad85 100644 --- a/core/field.js +++ b/core/field.js @@ -202,15 +202,26 @@ Blockly.Field.prototype.setSourceBlock = function(block) { }; /** - * Install this field on a block. + * Initialize everything to render this field. Override + * methods initModel and initView rather than this method. + * @package */ Blockly.Field.prototype.init = function() { if (this.fieldGroup_) { // Field has already been initialized once. return; } - // Build the DOM. this.fieldGroup_ = Blockly.utils.createSvgElement('g', {}, null); + this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_); + this.initView(); + this.initModel(); +}; + +/** + * Create the block UI for this field. + * @package + */ +Blockly.Field.prototype.initView = function() { if (!this.visible_) { this.fieldGroup_.style.display = 'none'; } @@ -230,7 +241,6 @@ Blockly.Field.prototype.init = function() { this.updateEditable(); this.clickTarget_ = this.getSvgRoot(); - this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_); this.mouseDownWrapper_ = Blockly.bindEventWithChecks_( this.clickTarget_, 'mousedown', this, this.onMouseDown_); @@ -239,6 +249,7 @@ Blockly.Field.prototype.init = function() { /** * Initializes the model of the field after it has been installed on a block. * No-op by default. + * @package */ Blockly.Field.prototype.initModel = function() { }; diff --git a/core/field_checkbox.js b/core/field_checkbox.js index 005476f69..b37217068 100644 --- a/core/field_checkbox.js +++ b/core/field_checkbox.js @@ -77,14 +77,12 @@ Blockly.FieldCheckbox.CHECK_CHAR = '\u2713'; Blockly.FieldCheckbox.prototype.CURSOR = 'default'; /** - * Install this checkbox on a block. + * Create the block UI for this checkbox. + * @package */ -Blockly.FieldCheckbox.prototype.init = function() { - if (this.fieldGroup_) { - // Checkbox has already been initialized once. - return; - } - Blockly.FieldCheckbox.superClass_.init.call(this); +Blockly.FieldCheckbox.prototype.initView = function() { + Blockly.FieldCheckbox.superClass_.initView.call(this); + // The checkbox doesn't use the inherited text element. // Instead it uses a custom checkmark element that is either visible or not. this.checkElement_ = Blockly.utils.createSvgElement('text', diff --git a/core/field_colour.js b/core/field_colour.js index 1ac5382bc..8ec1bc223 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -124,10 +124,12 @@ Blockly.FieldColour.prototype.DROPDOWN_BORDER_COLOUR = 'silver'; Blockly.FieldColour.prototype.DROPDOWN_BACKGROUND_COLOUR = 'white'; /** - * Install this field on a block. + * Create the block UI for this colour field. + * @package */ -Blockly.FieldColour.prototype.init = function() { - Blockly.FieldColour.superClass_.init.call(this); +Blockly.FieldColour.prototype.initView = function() { + Blockly.FieldColour.superClass_.initView.call(this); + this.size_ = new goog.math.Size(Blockly.FieldColour.DEFAULT_WIDTH, Blockly.FieldColour.DEFAULT_HEIGHT); this.borderRect_.style['fillOpacity'] = 1; diff --git a/core/field_dropdown.js b/core/field_dropdown.js index e6c6f267e..ac2475f3a 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -127,20 +127,17 @@ Blockly.FieldDropdown.prototype.imageElement_ = null; Blockly.FieldDropdown.prototype.imageJson_ = null; /** - * Install this dropdown on a block. + * Create the block UI for this dropdown. + * @package */ -Blockly.FieldDropdown.prototype.init = function() { - if (this.fieldGroup_) { - // Dropdown has already been initialized once. - return; - } +Blockly.FieldDropdown.prototype.initView = function() { + Blockly.FieldDropdown.superClass_.initView.call(this); + // Add dropdown arrow: "option ▾" (LTR) or "▾ אופציה" (RTL) this.arrow_ = Blockly.utils.createSvgElement('tspan', {}, null); this.arrow_.appendChild(document.createTextNode(this.sourceBlock_.RTL ? Blockly.FieldDropdown.ARROW_CHAR + ' ' : ' ' + Blockly.FieldDropdown.ARROW_CHAR)); - - Blockly.FieldDropdown.superClass_.init.call(this); }; /** diff --git a/core/field_image.js b/core/field_image.js index 5feaa9562..dfebb2d2c 100644 --- a/core/field_image.js +++ b/core/field_image.js @@ -92,20 +92,10 @@ Blockly.FieldImage.fromJson = function(options) { Blockly.FieldImage.prototype.EDITABLE = false; /** - * Install this image on a block. + * Create the block UI for this image. + * @package */ -Blockly.FieldImage.prototype.init = function() { - if (this.fieldGroup_) { - // Image has already been initialized once. - return; - } - // Build the DOM. - /** @type {SVGElement} */ - this.fieldGroup_ = Blockly.utils.createSvgElement('g', {}, null); - if (!this.visible_) { - this.fieldGroup_.style.display = 'none'; - } - /** @type {SVGElement} */ +Blockly.FieldImage.prototype.initView = function() { this.imageElement_ = Blockly.utils.createSvgElement( 'image', { diff --git a/core/field_label.js b/core/field_label.js index d2f951863..cecf2b8c0 100644 --- a/core/field_label.js +++ b/core/field_label.js @@ -71,23 +71,18 @@ Blockly.FieldLabel.fromJson = function(options) { Blockly.FieldLabel.prototype.EDITABLE = false; /** - * Install this text on a block. + * Create block UI for this label. + * @package */ -Blockly.FieldLabel.prototype.init = function() { - if (this.textElement_) { - // Text has already been initialized once. - return; - } - // Build the DOM. +Blockly.FieldLabel.prototype.initView = function() { this.textElement_ = Blockly.utils.createSvgElement('text', - {'class': 'blocklyText', 'y': this.size_.height - 5}, null); + { + 'class': 'blocklyText', + 'y': this.size_.height - 5 + }, this.fieldGroup_); if (this.class_) { Blockly.utils.addClass(this.textElement_, this.class_); } - if (!this.visible_) { - this.textElement_.style.display = 'none'; - } - this.sourceBlock_.getSvgRoot().appendChild(this.textElement_); if (this.tooltip_) { this.textElement_.tooltip = this.tooltip_; @@ -108,15 +103,6 @@ Blockly.FieldLabel.prototype.dispose = function() { } }; -/** - * Gets the group element for this field. - * Used for measuring the size and for positioning. - * @return {!Element} The group element. - */ -Blockly.FieldLabel.prototype.getSvgRoot = function() { - return /** @type {!Element} */ (this.textElement_); -}; - /** * Change the tooltip text for this field. * @param {string|!Element} newTip Text for tooltip or a parent element to diff --git a/core/field_variable.js b/core/field_variable.js index 29c6af878..6c5561a7f 100644 --- a/core/field_variable.js +++ b/core/field_variable.js @@ -86,22 +86,6 @@ Blockly.FieldVariable.fromJson = function(options) { */ Blockly.FieldVariable.prototype.SERIALIZABLE = true; -/** - * Initialize everything needed to render this field. This includes making sure - * that the field's value is valid. - * @public - */ -Blockly.FieldVariable.prototype.init = function() { - if (this.fieldGroup_) { - // Dropdown has already been initialized once. - return; - } - Blockly.FieldVariable.superClass_.init.call(this); - - // TODO (#1010): Change from init/initModel to initView/initModel - this.initModel(); -}; - /** * Initialize the model for this field if it has not already been initialized. * If the value has not been set to a variable by the first render, we make up a diff --git a/tests/playground.html b/tests/playground.html index a46d88164..72d5dbd5d 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -1288,7 +1288,7 @@ h1 { - +