Field constants (#3423)

* Move field text sizing constants to renderer constants

core/field.js

@@ -129,6 +129,13 @@ Blockly.Field = function(value, opt_validator, opt_config) {
    */
   this.mouseDownWrapper_ = null;
 
+  /**
+   * Constants associated with the source block's renderer.
+   * @type {Blockly.blockRendering.ConstantProvider}
+   * @protected
+   */
+  this.constants_ = null;
+
   opt_config && this.configure_(opt_config);
   this.setValue(value);
   opt_validator && this.setValidator(opt_validator);
@@ -257,24 +264,6 @@ Blockly.Field.prototype.EDITABLE = true;
  */
 Blockly.Field.prototype.SERIALIZABLE = false;
 
-/**
- * Point size of text.  Should match blocklyText's font-size in CSS.
- * @const {number}
- */
-Blockly.Field.FONTSIZE = 11;
-
-/**
- * Text font weight.  Should match blocklyText's font-weight in CSS.
- * @const {string}
- */
-Blockly.Field.FONTWEIGHT = 'normal';
-
-/**
- * Text font family.  Should match blocklyText's font-family in CSS.
- * @const {string}
- */
-Blockly.Field.FONTFAMILY = 'sans-serif';
-
 /**
  * Process the configuration map passed to the field.
  * @param {!Object} config A map of options used to configure the field. See
@@ -303,6 +292,9 @@ Blockly.Field.prototype.setSourceBlock = function(block) {
     throw Error('Field already bound to a block.');
   }
   this.sourceBlock_ = block;
+  if (block.workspace.rendered) {
+    this.constants_ = block.workspace.getRenderer().getConstants();
+  }
 };
 
 /**
@@ -661,8 +653,9 @@ Blockly.Field.prototype.updateWidth = function() {
 Blockly.Field.prototype.updateSize_ = function() {
   var textWidth = Blockly.utils.dom.getFastTextWidth(
       /** @type {!SVGTextElement} */ (this.textElement_),
-      Blockly.Field.FONTSIZE, Blockly.Field.FONTWEIGHT,
-      Blockly.Field.FONTFAMILY);
+      this.constants_.FIELD_TEXT_FONTSIZE,
+      this.constants_.FIELD_TEXT_FONTWEIGHT,
+      this.constants_.FIELD_TEXT_FONTFAMILY);
   var totalWidth = textWidth;
   if (this.borderRect_) {
     totalWidth += Blockly.Field.X_PADDING;

core/field_dropdown.js

@@ -516,8 +516,9 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) {
 
   var arrowWidth = Blockly.utils.dom.getFastTextWidth(
       /** @type {!SVGTSpanElement} */ (this.arrow_),
-      Blockly.Field.FONTSIZE, Blockly.Field.FONTWEIGHT,
-      Blockly.Field.FONTFAMILY);
+      this.constants_.FIELD_TEXT_FONTSIZE,
+      this.constants_.FIELD_TEXT_FONTWEIGHT,
+      this.constants_.FIELD_TEXT_FONTFAMILY);
 
   var imageHeight = Number(imageJson.height);
   var imageWidth = Number(imageJson.width);
@@ -552,8 +553,9 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() {
   // Height and width include the border rect.
   this.size_.height = Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT;
   this.size_.width = Blockly.utils.dom.getFastTextWidth(this.textElement_,
-      Blockly.Field.FONTSIZE, Blockly.Field.FONTWEIGHT,
-      Blockly.Field.FONTFAMILY) +
+      this.constants_.FIELD_TEXT_FONTSIZE,
+      this.constants_.FIELD_TEXT_FONTWEIGHT,
+      this.constants_.FIELD_TEXT_FONTFAMILY) +
       Blockly.Field.X_PADDING;
 };
 

core/field_multilineinput.js

@@ -245,7 +245,7 @@ Blockly.FieldMultilineInput.prototype.widgetCreate_ = function() {
   var htmlInput = /** @type {HTMLTextAreaElement} */ (document.createElement('textarea'));
   htmlInput.className = 'blocklyHtmlInput blocklyHtmlTextAreaInput';
   htmlInput.setAttribute('spellcheck', this.spellcheck_);
-  var fontSize = (Blockly.Field.FONTSIZE * scale) + 'pt';
+  var fontSize = (this.constants_.FIELD_TEXT_FONTSIZE * scale) + 'pt';
   div.style.fontSize = fontSize;
   htmlInput.style.fontSize = fontSize;
   var borderRadius = (Blockly.FieldTextInput.BORDERRADIUS * scale) + 'px';

core/field_textinput.js

@@ -286,7 +286,7 @@ Blockly.FieldTextInput.prototype.widgetCreate_ = function() {
   htmlInput.className = 'blocklyHtmlInput';
   htmlInput.setAttribute('spellcheck', this.spellcheck_);
   var fontSize =
-      (Blockly.Field.FONTSIZE * this.workspace_.scale) + 'pt';
+      (this.constants_.FIELD_TEXT_FONTSIZE * this.workspace_.scale) + 'pt';
   div.style.fontSize = fontSize;
   htmlInput.style.fontSize = fontSize;
   var borderRadius =

core/renderers/common/constants.js

@@ -136,6 +136,27 @@ Blockly.blockRendering.ConstantProvider = function() {
    */
   this.JAGGED_TEETH_WIDTH = 6;
 
+  /**
+   * Point size of text.  Should match blocklyText's font-size in CSS.
+   * @type {number}
+   * @const
+   */
+  this.FIELD_TEXT_FONTSIZE = 11;
+
+  /**
+   * Text font weight.  Should match blocklyText's font-weight in CSS.
+   * @type {string}
+   * @const
+   */
+  this.FIELD_TEXT_FONTWEIGHT = 'normal';
+
+  /**
+   * Text font family.  Should match blocklyText's font-family in CSS.
+   * @type {string}
+   * @const
+   */
+  this.FIELD_TEXT_FONTFAMILY = 'sans-serif';
+
   /**
    * The ID of the emboss filter, or the empty string if no filter is set.
    * @type {string}

tests/mocha/field_textinput_test.js

@@ -228,6 +228,11 @@ suite('Text Input Fields', function() {
               scale: 1
             }
           };
+          field.constants_ = {
+            FIELD_TEXT_FONTSIZE: 11,
+            FIELD_TEXT_FONTWEIGHT: 'normal',
+            FIELD_TEXT_FONTFAMILY: 'sans-serif'
+          };
           Blockly.WidgetDiv.DIV = document.createElement('div');
           this.stub = sinon.stub(field, 'resizeEditor_');
         };