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 {
-
+