From 2dea7038d5b5221791ee3419e6771d9ec60352ba Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Wed, 13 Nov 2019 16:41:35 -0800 Subject: [PATCH] Moves field layout constants into the renderer (#3437) * Add field constants into renderer constants --- core/field.js | 60 +++++----------- core/field_checkbox.js | 19 +---- core/field_colour.js | 28 +------- core/field_dropdown.js | 27 ++++--- core/field_label.js | 13 +--- core/field_multilineinput.js | 9 ++- core/field_textinput.js | 31 ++++---- core/renderers/common/constants.js | 75 ++++++++++++++++++++ core/renderers/geras/constants.js | 5 ++ core/renderers/zelos/constants.js | 15 ++++ demos/custom-fields/turtle/field_turtle.js | 7 +- tests/mocha/field_checkbox_test.js | 4 ++ tests/mocha/field_label_serializable_test.js | 9 +++ tests/mocha/field_label_test.js | 9 +++ 14 files changed, 184 insertions(+), 127 deletions(-) diff --git a/core/field.js b/core/field.js index 3853b26f6..3055d06d0 100644 --- a/core/field.js +++ b/core/field.js @@ -31,9 +31,10 @@ goog.require('Blockly.Gesture'); goog.require('Blockly.utils'); goog.require('Blockly.utils.dom'); goog.require('Blockly.utils.Size'); +goog.require('Blockly.utils.style'); goog.require('Blockly.utils.userAgent'); -goog.require('Blockly.utils.style'); +goog.requireType('Blockly.blockRendering.ConstantProvider'); /** @@ -141,41 +142,6 @@ Blockly.Field = function(value, opt_validator, opt_config) { opt_validator && this.setValidator(opt_validator); }; -/** - * The default height of the border rect on any field. - * @type {number} - * @package - */ -Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT = 16; - -/** - * The default height of the text element on any field. - * @type {number} - * @package - */ -Blockly.Field.TEXT_DEFAULT_HEIGHT = 12.5; - -/** - * The padding added to the width by the border rect, if it exists. - * @type {number} - * @package - */ -Blockly.Field.X_PADDING = 10; - -/** - * The padding added to the height by the border rect, if it exists. - * @type {number} - * @package - */ -Blockly.Field.Y_PADDING = 10; - -/** - * The default offset between the left of the text element and the left of the - * border rect, if the border rect exists. - * @type {number} - */ -Blockly.Field.DEFAULT_TEXT_OFFSET = Blockly.Field.X_PADDING / 2; - /** * Name of field. Unique within each block. * Static labels are usually unnamed. @@ -354,9 +320,9 @@ Blockly.Field.prototype.initModel = function() { */ Blockly.Field.prototype.createBorderRect_ = function() { this.size_.height = - Math.max(this.size_.height, Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT); + Math.max(this.size_.height, this.constants_.FIELD_BORDER_RECT_HEIGHT); this.size_.width = - Math.max(this.size_.width, Blockly.Field.X_PADDING); + Math.max(this.size_.width, this.constants_.FIELD_BORDER_RECT_X_PADDING * 2); this.borderRect_ = /** @type {!SVGRectElement} **/ (Blockly.utils.dom.createSvgElement('rect', { @@ -376,15 +342,25 @@ Blockly.Field.prototype.createBorderRect_ = function() { * @protected */ Blockly.Field.prototype.createTextElement_ = function() { - var xOffset = this.borderRect_ ? Blockly.Field.DEFAULT_TEXT_OFFSET : 0; + var xOffset = this.borderRect_ ? + this.constants_.FIELD_BORDER_RECT_X_PADDING : 0; + this.size_.height = Math.max(this.size_.height, + this.constants_.FIELD_TEXT_BASELINE_CENTER ? + this.constants_.FIELD_TEXT_HEIGHT : + this.constants_.FIELD_TEXT_BASELINE_Y); this.textElement_ = /** @type {!SVGTextElement} **/ (Blockly.utils.dom.createSvgElement('text', { 'class': 'blocklyText', - // The y position is the baseline of the text. - 'y': Blockly.Field.TEXT_DEFAULT_HEIGHT, + 'y': this.size_.height / 2, 'x': xOffset }, this.fieldGroup_)); + if (this.constants_.FIELD_TEXT_BASELINE_CENTER) { + this.textElement_.setAttribute('dominant-baseline', 'central'); + } else { + this.textElement_.setAttribute('dy', + this.constants_.FIELD_TEXT_BASELINE_Y - this.size_.height / 2); + } this.textContent_ = document.createTextNode(''); this.textElement_.appendChild(this.textContent_); }; @@ -658,7 +634,7 @@ Blockly.Field.prototype.updateSize_ = function() { this.constants_.FIELD_TEXT_FONTFAMILY); var totalWidth = textWidth; if (this.borderRect_) { - totalWidth += Blockly.Field.X_PADDING; + totalWidth += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2; this.borderRect_.setAttribute('width', totalWidth); } this.size_.width = totalWidth; diff --git a/core/field_checkbox.js b/core/field_checkbox.js index e3c83fc78..0d9c362f1 100644 --- a/core/field_checkbox.js +++ b/core/field_checkbox.js @@ -91,20 +91,6 @@ Blockly.FieldCheckbox.WIDTH = 15; */ Blockly.FieldCheckbox.CHECK_CHAR = '\u2713'; -/** - * Used to correctly position the check mark. - * @type {number} - * @const - */ -Blockly.FieldCheckbox.CHECK_X_OFFSET = Blockly.Field.DEFAULT_TEXT_OFFSET - 3; - -/** - * Used to correctly position the check mark. - * @type {number} - * @const - */ -Blockly.FieldCheckbox.CHECK_Y_OFFSET = 14; - /** * Serializable fields are saved by the XML renderer, non-serializable fields * are not. Editable fields should also be serializable. @@ -145,8 +131,9 @@ Blockly.FieldCheckbox.prototype.configure_ = function(config) { Blockly.FieldCheckbox.prototype.initView = function() { Blockly.FieldCheckbox.superClass_.initView.call(this); - this.textElement_.setAttribute('x', Blockly.FieldCheckbox.CHECK_X_OFFSET); - this.textElement_.setAttribute('y', Blockly.FieldCheckbox.CHECK_Y_OFFSET); + this.textElement_.setAttribute('x', this.constants_.FIELD_CHECKBOX_X_OFFSET); + this.textElement_.setAttribute('y', this.constants_.FIELD_CHECKBOX_Y_OFFSET); + this.textElement_.removeAttribute('dominant-baseline'); Blockly.utils.dom.addClass(this.textElement_, 'blocklyCheckbox'); this.textContent_.nodeValue = diff --git a/core/field_colour.js b/core/field_colour.js index 54204553e..76701eeb5 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -57,15 +57,6 @@ Blockly.FieldColour = function(opt_value, opt_validator, opt_config) { this, opt_value || Blockly.FieldColour.COLOURS[0], opt_validator, opt_config); - /** - * The size of the area rendered by the field. - * @type {Blockly.utils.Size} - * @protected - * @override - */ - this.size_ = new Blockly.utils.Size(Blockly.FieldColour.DEFAULT_WIDTH, - Blockly.FieldColour.DEFAULT_HEIGHT); - /** * The field's colour picker element. * @type {Element} @@ -128,22 +119,6 @@ Blockly.FieldColour.fromJson = function(options) { return new Blockly.FieldColour(options['colour'], undefined, options); }; -/** - * Default width of a colour field. - * @type {number} - * @private - * @const - */ -Blockly.FieldColour.DEFAULT_WIDTH = 26; - -/** - * Default height of a colour field. - * @type {number} - * @private - * @const - */ -Blockly.FieldColour.DEFAULT_HEIGHT = Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT; - /** * Serializable fields are saved by the XML renderer, non-serializable fields * are not. Editable fields should also be serializable. @@ -208,6 +183,9 @@ Blockly.FieldColour.prototype.configure_ = function(config) { * @package */ Blockly.FieldColour.prototype.initView = function() { + this.size_ = new Blockly.utils.Size( + this.constants_.FIELD_COLOUR_DEFAULT_WIDTH, + this.constants_.FIELD_COLOUR_DEFAULT_HEIGHT); this.createBorderRect_(); this.borderRect_.style['fillOpacity'] = '1'; this.borderRect_.style.fill = this.value_; diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 8b7e7a93a..be570ad36 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -525,19 +525,20 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { // Height and width include the border rect. this.size_.height = imageHeight + Blockly.FieldDropdown.IMAGE_Y_PADDING; - this.size_.width = imageWidth + arrowWidth + Blockly.Field.X_PADDING; + var xPadding = this.constants_.FIELD_BORDER_RECT_X_PADDING; + this.size_.width = imageWidth + arrowWidth + xPadding * 2; if (this.sourceBlock_.RTL) { - var imageX = Blockly.Field.DEFAULT_TEXT_OFFSET + arrowWidth; - var arrowX = Blockly.Field.DEFAULT_TEXT_OFFSET - 1; + var imageX = xPadding + arrowWidth; + var arrowX = xPadding - 1; this.imageElement_.setAttribute('x', imageX); this.textElement_.setAttribute('x', arrowX); } else { var arrowX = - imageWidth + arrowWidth + Blockly.Field.DEFAULT_TEXT_OFFSET + 1; + imageWidth + arrowWidth + xPadding + 1; this.textElement_.setAttribute('text-anchor', 'end'); this.textElement_.setAttribute('x', arrowX); - this.imageElement_.setAttribute('x', Blockly.Field.DEFAULT_TEXT_OFFSET); + this.imageElement_.setAttribute('x', xPadding); } }; @@ -549,14 +550,24 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() { // Retrieves the selected option to display through getText_. this.textContent_.nodeValue = this.getDisplayText_(); this.textElement_.setAttribute('text-anchor', 'start'); - this.textElement_.setAttribute('x', Blockly.Field.DEFAULT_TEXT_OFFSET); + this.textElement_.setAttribute('x', + this.constants_.FIELD_BORDER_RECT_X_PADDING); // Height and width include the border rect. - this.size_.height = Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT; + this.size_.height = Math.max( + this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT, + this.constants_.FIELD_TEXT_HEIGHT + + this.constants_.FIELD_BORDER_RECT_Y_PADDING * 2); this.size_.width = Blockly.utils.dom.getFastTextWidth(this.textElement_, this.constants_.FIELD_TEXT_FONTSIZE, this.constants_.FIELD_TEXT_FONTWEIGHT, this.constants_.FIELD_TEXT_FONTFAMILY) + - Blockly.Field.X_PADDING; + this.constants_.FIELD_BORDER_RECT_X_PADDING * 2; + + this.textElement_.setAttribute('y', this.size_.height / 2); + if (!this.constants_.FIELD_TEXT_BASELINE_CENTER) { + this.textElement_.setAttribute('dy', + this.constants_.FIELD_TEXT_BASELINE_Y - this.size_.height / 2); + } }; /** diff --git a/core/field_label.js b/core/field_label.js index a7bf7d156..510a457d7 100644 --- a/core/field_label.js +++ b/core/field_label.js @@ -60,14 +60,6 @@ Blockly.FieldLabel = function(opt_value, opt_class, opt_config) { if (!opt_config) { // If the config was not passed use old configuration. this.class_ = opt_class || null; } - - /** - * The size of the area rendered by the field. - * @type {Blockly.utils.Size} - * @protected - * @override - */ - this.size_ = new Blockly.utils.Size(0, Blockly.Field.TEXT_DEFAULT_HEIGHT); }; Blockly.utils.object.inherits(Blockly.FieldLabel, Blockly.Field); @@ -105,10 +97,9 @@ Blockly.FieldLabel.prototype.configure_ = function(config) { */ Blockly.FieldLabel.prototype.initView = function() { this.createTextElement_(); - // The y attribute of an SVG text element is the baseline. - this.textElement_.setAttribute('y', this.size_.height); if (this.class_) { - Blockly.utils.dom.addClass(this.textElement_, this.class_); + Blockly.utils.dom.addClass( + /** @type {!SVGTextElement} */ (this.textElement_), this.class_); } }; diff --git a/core/field_multilineinput.js b/core/field_multilineinput.js index 11cf73fb1..df4293e5b 100644 --- a/core/field_multilineinput.js +++ b/core/field_multilineinput.js @@ -152,13 +152,12 @@ Blockly.FieldMultilineInput.prototype.render_ = function() { // Add in text elements into the group. var lines = this.getDisplayText_().split('\n'); - var yOffset = Blockly.Field.Y_PADDING / 2; var y = 0; for (var i = 0; i < lines.length; i++) { var span = Blockly.utils.dom.createSvgElement('text', { 'class': 'blocklyText blocklyMultilineText', - x: Blockly.Field.DEFAULT_TEXT_OFFSET, - y: y + yOffset, + x: this.constants_.FIELD_BORDER_RECT_X_PADDING, + y: y + this.constants_.FIELD_BORDER_RECT_Y_PADDING, dy: Blockly.FieldMultilineInput.LINE_HEIGHT / 2 }, this.textGroup_); span.appendChild(document.createTextNode(lines[i])); @@ -206,7 +205,7 @@ Blockly.FieldMultilineInput.prototype.updateSize_ = function() { totalHeight += Blockly.FieldMultilineInput.LINE_HEIGHT; } if (this.borderRect_) { - totalWidth += Blockly.Field.X_PADDING; + totalWidth += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2; this.borderRect_.setAttribute('width', totalWidth); this.borderRect_.setAttribute('height', totalHeight); } @@ -250,7 +249,7 @@ Blockly.FieldMultilineInput.prototype.widgetCreate_ = function() { htmlInput.style.fontSize = fontSize; var borderRadius = (Blockly.FieldTextInput.BORDERRADIUS * scale) + 'px'; htmlInput.style.borderRadius = borderRadius; - var padding = Blockly.Field.DEFAULT_TEXT_OFFSET * scale; + var padding = this.constants_.FIELD_BORDER_RECT_X_PADDING * scale; htmlInput.style.paddingLeft = padding + 'px'; htmlInput.style.width = 'calc(100% - ' + padding + 'px)'; htmlInput.style.lineHeight = diff --git a/core/field_textinput.js b/core/field_textinput.js index 4573d3e09..1cd030af5 100644 --- a/core/field_textinput.js +++ b/core/field_textinput.js @@ -85,19 +85,19 @@ Blockly.FieldTextInput = function(opt_value, opt_validator, opt_config) { */ this.onKeyInputWrapper_ = null; - /** - * Whether the field should consider the whole parent block to be its click - * target. - * @type {?boolean} - */ - this.fullBlockClickTarget_ = false; - /** * Blur input event data. * @type {?Blockly.EventData} * @private */ this.onBlurInputWrapper_ = null; + + /** + * Whether the field should consider the whole parent block to be its click + * target. + * @type {?boolean} + */ + this.fullBlockClickTarget_ = false; }; Blockly.utils.object.inherits(Blockly.FieldTextInput, Blockly.Field); @@ -146,8 +146,11 @@ Blockly.FieldTextInput.prototype.configure_ = function(config) { * @override */ Blockly.FieldTextInput.prototype.initView = function() { - var renderer = this.sourceBlock_.workspace.getRenderer(); - if (renderer.getConstants().FULL_BLOCK_FIELDS) { + this.size_.height = Math.max(this.constants_.FIELD_BORDER_RECT_HEIGHT, + this.constants_.FIELD_TEXT_BASELINE_CENTER ? + this.constants_.FIELD_TEXT_HEIGHT : + this.constants_.FIELD_TEXT_BASELINE_Y); + if (this.constants_.FULL_BLOCK_FIELDS) { // Step one: figure out if this is the only field on this block. // Rendering is quite different in that case. var nFields = 0; @@ -173,16 +176,14 @@ Blockly.FieldTextInput.prototype.initView = function() { } if (this.fullBlockClickTarget_) { - // Don't create a border rect. - this.size_.height = - Math.max(this.size_.height, Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT); - this.size_.width = - Math.max(this.size_.width, Blockly.Field.X_PADDING); this.clickTarget_ = this.sourceBlock_.getSvgRoot(); } else { this.createBorderRect_(); } this.createTextElement_(); + if (this.constants_.FIELD_TEXT_BASELINE_CENTER) { + this.textElement_.setAttribute('dominant-baseline', 'central'); + } }; /** @@ -352,7 +353,7 @@ Blockly.FieldTextInput.prototype.widgetCreate_ = function() { if (this.fullBlockClickTarget_) { var bBox = this.getScaledBBox(); // Override border radius. - borderRadius = (bBox.bottom - bBox.top) / 2; + borderRadius = (bBox.bottom - bBox.top) / 2 + 'px'; // Pull stroke colour from the existing shadow block var strokeColour = this.sourceBlock_.style.colourTertiary; div.style.borderColor = strokeColour; diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index e7aa35efe..92eaf8c7d 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -25,6 +25,7 @@ goog.provide('Blockly.blockRendering.ConstantProvider'); goog.require('Blockly.utils.dom'); goog.require('Blockly.utils.svgPaths'); +goog.require('Blockly.utils.userAgent'); /** @@ -143,6 +144,12 @@ Blockly.blockRendering.ConstantProvider = function() { */ this.FIELD_TEXT_FONTSIZE = 11; + /** + * Height of text. + * @type {number} + */ + this.FIELD_TEXT_HEIGHT = 13; + /** * Text font weight. Should match blocklyText's font-weight in CSS. * @type {string} @@ -157,6 +164,74 @@ Blockly.blockRendering.ConstantProvider = function() { */ this.FIELD_TEXT_FONTFAMILY = 'sans-serif'; + /** + * A field's border rect corner radius. + * @type {number} + */ + this.FIELD_BORDER_RECT_RADIUS = 4; + + /** + * A field's border rect default height. + * @type {number} + */ + this.FIELD_BORDER_RECT_HEIGHT = 16; + + /** + * A field's border rect X padding. + * @type {number} + */ + this.FIELD_BORDER_RECT_X_PADDING = 5; + + /** + * A field's border rect Y padding. + * @type {number} + */ + this.FIELD_BORDER_RECT_Y_PADDING = 3; + + /** + * Field text baseline. This is only used if `FIELD_TEXT_BASELINE_CENTER` is + * set to false. + * @type {number} + */ + this.FIELD_TEXT_BASELINE_Y = 13; + + /** + * A field's text element's dominant baseline. + * @type {boolean} + */ + this.FIELD_TEXT_BASELINE_CENTER = + !Blockly.utils.userAgent.IE && !Blockly.utils.userAgent.EDGE; + + /** + * A dropdown field's border rect height. + * @type {number} + */ + this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = this.FIELD_BORDER_RECT_HEIGHT; + + /** + * A colour field's default width. + * @type {number} + */ + this.FIELD_COLOUR_DEFAULT_WIDTH = 26; + + /** + * A colour field's default height. + * @type {number} + */ + this.FIELD_COLOUR_DEFAULT_HEIGHT = this.FIELD_BORDER_RECT_HEIGHT; + + /** + * A checkbox field's X offset. + * @type {number} + */ + this.FIELD_CHECKBOX_X_OFFSET = this.FIELD_BORDER_RECT_X_PADDING - 3; + + /** + * A checkbox field's Y offset. + * @type {number} + */ + this.FIELD_CHECKBOX_Y_OFFSET = 14; + /** * The ID of the emboss filter, or the empty string if no filter is set. * @type {string} diff --git a/core/renderers/geras/constants.js b/core/renderers/geras/constants.js index fd20f14ba..771a7fb57 100644 --- a/core/renderers/geras/constants.js +++ b/core/renderers/geras/constants.js @@ -37,6 +37,11 @@ goog.require('Blockly.utils.object'); Blockly.geras.ConstantProvider = function() { Blockly.geras.ConstantProvider.superClass_.constructor.call(this); + /** + * @override + */ + this.FIELD_TEXT_BASELINE_CENTER = false; + // The dark/shadow path in classic rendering is the same as the normal block // path, but translated down one and right one. this.DARK_PATH_OFFSET = 1; diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index 1e1fb86b9..90f888969 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -127,6 +127,21 @@ Blockly.zelos.ConstantProvider = function() { */ this.DUMMY_INPUT_MIN_HEIGHT = 6 * this.GRID_UNIT; + /** + * @override + */ + this.FIELD_BORDER_RECT_RADIUS = this.CORNER_RADIUS; + + /** + * @override + */ + this.FIELD_BORDER_RECT_X_PADDING = 2 * this.GRID_UNIT; + + /** + * @override + */ + this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT; + /** * The ID of the highlight glow filter, or the empty string if no filter is * set. diff --git a/demos/custom-fields/turtle/field_turtle.js b/demos/custom-fields/turtle/field_turtle.js index 8a4a08301..ddce28417 100644 --- a/demos/custom-fields/turtle/field_turtle.js +++ b/demos/custom-fields/turtle/field_turtle.js @@ -88,9 +88,6 @@ CustomFields.FieldTurtle.prototype.CURSOR = 'pointer'; // May change if the turtle gets fancy enough. CustomFields.FieldTurtle.prototype.TEXT_OFFSET_X = 80; -// Padding that the border rect adds around the turtle and its name. -CustomFields.FieldTurtle.prototype.PADDING = Blockly.Field.X_PADDING; - // These are the different options for our turtle. Being declared this way // means they are static, and not translatable. If you want to do something // similar, but make it translatable you should set up your options like a @@ -320,8 +317,8 @@ CustomFields.FieldTurtle.prototype.updateSize_ = function() { var width = bbox.width; var height = bbox.height; if (this.borderRect_) { - width += this.PADDING; - height += this.PADDING; + width += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2; + height += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2; this.borderRect_.setAttribute('width', width); this.borderRect_.setAttribute('height', height); } diff --git a/tests/mocha/field_checkbox_test.js b/tests/mocha/field_checkbox_test.js index 76084a63a..d9c3aa899 100644 --- a/tests/mocha/field_checkbox_test.js +++ b/tests/mocha/field_checkbox_test.js @@ -175,6 +175,10 @@ suite('Checkbox Fields', function() { suite('Check Character', function() { function assertCharacter(field, char) { field.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + field.constants_ = { + FIELD_CHECKBOX_X_OFFSET: 2, + FIELD_CHECKBOX_Y_OFFSET: 2 + }; field.initView(); chai.assert(field.textContent_.nodeValue, char); } diff --git a/tests/mocha/field_label_serializable_test.js b/tests/mocha/field_label_serializable_test.js index adb0dc06d..911198038 100644 --- a/tests/mocha/field_label_serializable_test.js +++ b/tests/mocha/field_label_serializable_test.js @@ -27,12 +27,18 @@ suite('Label Serializable Fields', function() { } function assertHasClass(labelField, cssClass) { labelField.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + labelField.constants_ = { + FIELD_TEXT_BASELINE_Y: 13 + }; labelField.initView(); chai.assert.isTrue(Blockly.utils.dom.hasClass( labelField.textElement_, cssClass)); } function assertDoesNotHaveClass(labelField, cssClass) { labelField.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + labelField.constants_ = { + FIELD_TEXT_BASELINE_Y: 13 + }; labelField.initView(); chai.assert.isFalse(Blockly.utils.dom.hasClass( labelField.textElement_, cssClass)); @@ -216,6 +222,9 @@ suite('Label Serializable Fields', function() { test('setClass', function() { var field = new Blockly.FieldLabelSerializable(); field.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + field.constants_ = { + FIELD_TEXT_BASELINE_Y: 13 + }; field.initView(); field.setClass('testClass'); // Don't call assertHasClass b/c we don't want to re-initialize. diff --git a/tests/mocha/field_label_test.js b/tests/mocha/field_label_test.js index b707a7252..1e3578eb0 100644 --- a/tests/mocha/field_label_test.js +++ b/tests/mocha/field_label_test.js @@ -27,12 +27,18 @@ suite('Label Fields', function() { } function assertHasClass(labelField, cssClass) { labelField.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + labelField.constants_ = { + FIELD_TEXT_BASELINE_Y: 13 + }; labelField.initView(); chai.assert.isTrue(Blockly.utils.dom.hasClass( labelField.textElement_, cssClass)); } function assertDoesNotHaveClass(labelField, cssClass) { labelField.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + labelField.constants_ = { + FIELD_TEXT_BASELINE_Y: 13 + }; labelField.initView(); chai.assert.isFalse(Blockly.utils.dom.hasClass( labelField.textElement_, cssClass)); @@ -205,6 +211,9 @@ suite('Label Fields', function() { test('setClass', function() { var field = new Blockly.FieldLabel(); field.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); + field.constants_ = { + FIELD_TEXT_BASELINE_Y: 13 + }; field.initView(); field.setClass('testClass'); // Don't call assertHasClass b/c we don't want to re-initialize.