Merge pull request #2427 from BeksOmega/fixes/InitView

Refactored field.init into field.initView and field.initModel

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() {
 };

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',

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;

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);
 };
 
 /**

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',
       {

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

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

tests/playground.html

@@ -1288,7 +1288,7 @@ h1 {
         <block type="test_images_missing"></block>
         <block type="test_images_many_icons"></block>
       </category>
-      <category name="Emoji! o((*>ᴗ<*))o">
+      <category name="Emoji! o((*^ᴗ^*))o">
         <label text="Unicode & Emojis"></label>
         <block type="test_style_emoji"></block>
         <block type="text">