From 8d6ff39e6423bbe8b6feac2b464fa40a32631d52 Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Mon, 6 Jan 2020 13:16:59 -0800 Subject: [PATCH] [zelos] Support dropdown fields with no border rect (#3547) * Dropdown fields without a border rect. --- core/field_dropdown.js | 39 +++++++++++++++++++++++------- core/field_variable.js | 11 ++++++++- core/renderers/common/constants.js | 7 ++++++ core/renderers/zelos/constants.js | 5 ++++ 4 files changed, 52 insertions(+), 10 deletions(-) diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 45a6b7c40..42232dbb1 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -202,7 +202,12 @@ Blockly.FieldDropdown.prototype.CURSOR = 'default'; * @package */ Blockly.FieldDropdown.prototype.initView = function() { - Blockly.FieldDropdown.superClass_.initView.call(this); + if (this.shouldAddBorderRect_()) { + this.createBorderRect_(); + } else { + this.clickTarget_ = this.sourceBlock_.getSvgRoot(); + } + this.createTextElement_(); this.imageElement_ = /** @type {!SVGImageElement} */ (Blockly.utils.dom.createSvgElement('image', {}, this.fieldGroup_)); @@ -213,8 +218,20 @@ Blockly.FieldDropdown.prototype.initView = function() { this.createTextArrow_(); } - Blockly.utils.dom.addClass(/** @type {!SVGRectElement} */ (this.borderRect_), - 'blocklyDropdownRect'); + if (this.borderRect_) { + Blockly.utils.dom.addClass(this.borderRect_, 'blocklyDropdownRect'); + } +}; + +/** + * Whether or not the dropdown should add a border rect. + * @return {boolean} True if the dropdown field should add a border rect. + * @protected + */ +Blockly.FieldDropdown.prototype.shouldAddBorderRect_ = function() { + return !this.constants_.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW || + (this.constants_.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW && + !this.sourceBlock_.isShadow()); }; /** @@ -549,8 +566,10 @@ Blockly.FieldDropdown.prototype.render_ = function() { } else { this.renderSelectedText_(); } - this.borderRect_.setAttribute('height', this.size_.height); - this.borderRect_.setAttribute('width', this.size_.width); + if (this.borderRect_) { + this.borderRect_.setAttribute('height', this.size_.height); + this.borderRect_.setAttribute('width', this.size_.width); + } }; /** @@ -570,11 +589,12 @@ Blockly.FieldDropdown.prototype.renderSelectedImage_ = function(imageJson) { var imageWidth = Number(imageJson.width); // Height and width include the border rect. + var hasBorder = !!this.borderRect_; this.size_.height = Math.max( - this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT, + hasBorder ? this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, imageHeight + Blockly.FieldDropdown.IMAGE_Y_PADDING); var halfHeight = this.size_.height / 2; - var xPadding = this.constants_.FIELD_BORDER_RECT_X_PADDING; + var xPadding = hasBorder ? this.constants_.FIELD_BORDER_RECT_X_PADDING : 0; var arrowWidth = 0; if (this.svgArrow_) { arrowWidth = this.positionSVGArrow_(imageWidth + xPadding, halfHeight - @@ -614,15 +634,16 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() { this.textElement_.setAttribute('text-anchor', 'start'); // Height and width include the border rect. + var hasBorder = !!this.borderRect_; this.size_.height = Math.max( - this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT, + hasBorder ? this.constants_.FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0, this.constants_.FIELD_TEXT_HEIGHT); var halfHeight = this.size_.height / 2; var textWidth = Blockly.utils.dom.getFastTextWidth(this.textElement_, this.constants_.FIELD_TEXT_FONTSIZE, this.constants_.FIELD_TEXT_FONTWEIGHT, this.constants_.FIELD_TEXT_FONTFAMILY); - var xPadding = this.constants_.FIELD_BORDER_RECT_X_PADDING; + var xPadding = hasBorder ? this.constants_.FIELD_BORDER_RECT_X_PADDING : 0; var arrowWidth = 0; if (this.svgArrow_) { arrowWidth = this.positionSVGArrow_(textWidth + xPadding, halfHeight - diff --git a/core/field_variable.js b/core/field_variable.js index 336c84a02..8d486d197 100644 --- a/core/field_variable.js +++ b/core/field_variable.js @@ -83,7 +83,7 @@ Blockly.FieldVariable = function(varName, opt_validator, opt_variableTypes, * @protected * @override */ - this.size_ = new Blockly.utils.Size(0, Blockly.BlockSvg.MIN_BLOCK_Y); + this.size_ = new Blockly.utils.Size(0, 0); opt_config && this.configure_(opt_config); opt_validator && this.setValidator(opt_validator); @@ -151,6 +151,15 @@ Blockly.FieldVariable.prototype.initModel = function() { this.doValueUpdate_(variable.getId()); }; +/** + * @override + */ +Blockly.FieldVariable.prototype.shouldAddBorderRect_ = function() { + return Blockly.FieldVariable.superClass_.shouldAddBorderRect_.call(this) && + (!this.constants_.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW || + this.sourceBlock_.type != 'variables_get'); +}; + /** * Initialize this field based on the given XML. * @param {!Element} fieldElement The element containing information about the diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index a7cd56e0d..4956188ea 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -322,6 +322,13 @@ Blockly.blockRendering.ConstantProvider = function() { */ this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = this.FIELD_BORDER_RECT_HEIGHT; + /** + * Whether or not a dropdown field should add a border rect when in a shadow + * block. + * @type {boolean} + */ + this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = false; + /** * Whether or not a dropdown field's div should be coloured to match the * block colours. diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index c0ca26000..806a4a60b 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -288,6 +288,11 @@ Blockly.zelos.ConstantProvider = function() { */ this.FIELD_DROPDOWN_BORDER_RECT_HEIGHT = 8 * this.GRID_UNIT; + /** + * @override + */ + this.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW = true; + /** * @override */