From e1e746b845c907c22091ad8f537f9658a360619a Mon Sep 17 00:00:00 2001 From: Beka Westberg Date: Sat, 25 May 2019 13:22:11 -0700 Subject: [PATCH] Fixed how fields handle size. --- core/field.js | 32 ++++++++++++++++++++++++-------- core/field_angle.js | 2 +- core/field_checkbox.js | 17 +++++++++-------- core/field_colour.js | 27 ++++++++++++++------------- core/field_dropdown.js | 22 ---------------------- core/field_image.js | 18 +++++++++--------- 6 files changed, 57 insertions(+), 61 deletions(-) diff --git a/core/field.js b/core/field.js index debb7411f..70b97f7f0 100644 --- a/core/field.js +++ b/core/field.js @@ -230,6 +230,9 @@ Blockly.Field.prototype.init = function() { return; } this.fieldGroup_ = Blockly.utils.createSvgElement('g', {}, null); + if (!this.isVisible()) { + this.fieldGroup_.style.display = 'none'; + } this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_); this.initView(); this.initModel(); @@ -240,9 +243,6 @@ Blockly.Field.prototype.init = function() { * @package */ Blockly.Field.prototype.initView = function() { - if (!this.visible_) { - this.fieldGroup_.style.display = 'none'; - } this.borderRect_ = Blockly.utils.createSvgElement('rect', { 'rx': 4, @@ -386,7 +386,6 @@ Blockly.Field.prototype.setVisible = function(visible) { var root = this.getSvgRoot(); if (root) { root.style.display = visible ? 'block' : 'none'; - this.size_.width = 0; } }; @@ -483,15 +482,28 @@ Blockly.Field.prototype.updateColour = function() { */ Blockly.Field.prototype.render_ = function() { this.textElement_.textContent = this.getDisplayText_(); - this.updateWidth(); + this.updateSize_(); }; /** - * Updates the width of the field. This calls getCachedWidth which won't cache - * the approximated width on IE/Edge when `getComputedTextLength` fails. Once - * it eventually does succeed, the result will be cached. + * Updates the width of the field. Redirects to updateSize_(). + * @deprecated May 2019 Use Blockly.Field.updateSize_() to force an update + * to the size of the field, or Blockly.Field.getCachedWidth() to check the + * size of the field.. */ Blockly.Field.prototype.updateWidth = function() { + console.warn('Deprecated call to updateWidth, call' + + ' Blockly.Field.updateSize_ to force an update to the size of the' + + ' field, or Blockly.Field.getCachedWidth() to check the size of the' + + ' field.'); + this.updateSize_(); +}; + +/** + * Updates the size of the field based on the text. + * @protected + */ +Blockly.Field.prototype.updateSize_ = function() { var width = Blockly.Field.getCachedWidth(this.textElement_); if (this.borderRect_) { this.borderRect_.setAttribute('width', @@ -568,6 +580,10 @@ Blockly.Field.stopCache = function() { * @return {!goog.math.Size} Height and width. */ Blockly.Field.prototype.getSize = function() { + if (!this.isVisible()) { + return new goog.math.Size(0, 0); + } + if (this.isDirty_) { this.render_(); this.isDirty_ = false; diff --git a/core/field_angle.js b/core/field_angle.js index 7f521ec9d..f5f189730 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -135,7 +135,7 @@ Blockly.FieldAngle.prototype.initView = function() { Blockly.FieldAngle.prototype.render_ = function() { this.textElement_.textContent = this.getDisplayText_(); this.textElement_.appendChild(this.symbol_); - this.updateWidth(); + this.updateSize_(); this.updateGraph_(); }; diff --git a/core/field_checkbox.js b/core/field_checkbox.js index 74d6c115a..43f3cd6a3 100644 --- a/core/field_checkbox.js +++ b/core/field_checkbox.js @@ -91,6 +91,15 @@ Blockly.FieldCheckbox.prototype.SERIALIZABLE = true; */ Blockly.FieldCheckbox.prototype.CURSOR = 'default'; +/** + * Used to tell if the field needs to be rendered the next time the block is + * rendered. Checkbox fields are statically sized, and only need to be + * rendered at initialization. + * @type {boolean} + * @private + */ +Blockly.FieldCheckbox.prototype.isDirty_ = false; + /** * Create the block UI for this checkbox. * @package @@ -113,14 +122,6 @@ Blockly.FieldCheckbox.prototype.initView = function() { } }; -/** - * Checkboxes have a constant width. - * @private - */ -Blockly.FieldCheckbox.prototype.render_ = function() { - this.size_.width = Blockly.FieldCheckbox.WIDTH; -}; - /** * Toggle the state of the checkbox on click. * @protected diff --git a/core/field_colour.js b/core/field_colour.js index e92328bb2..c01aaafea 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -96,6 +96,20 @@ Blockly.FieldColour.COLOUR_REGEX = new RegExp('#[0-9a-fA-F]{6}'); */ Blockly.FieldColour.prototype.SERIALIZABLE = true; +/** + * Mouse cursor style when over the hotspot that initiates the editor. + */ +Blockly.FieldColour.prototype.CURSOR = 'default'; + +/** + * Used to tell if the field needs to be rendered the next time the block is + * rendered. Colour fields are statically sized, and only need to be + * rendered at initialization. + * @type {boolean} + * @private + */ +Blockly.FieldColour.prototype.isDirty_ = false; + /** * Array of colours used by this field. If null, use the global list. * @type {Array.} @@ -149,11 +163,6 @@ Blockly.FieldColour.prototype.initView = function() { this.borderRect_.style.fill = this.value_; }; -/** - * Mouse cursor style when over the hotspot that initiates the editor. - */ -Blockly.FieldColour.prototype.CURSOR = 'default'; - /** * Close the colour picker if this input is being deleted. */ @@ -162,14 +171,6 @@ Blockly.FieldColour.prototype.dispose = function() { Blockly.FieldColour.superClass_.dispose.call(this); }; -/** - * Render the colour field. - * @private - */ -Blockly.FieldColour.prototype.render_ = function() { - this.size_.width = Blockly.FieldColour.DEFAULT_WIDTH; -}; - /** * Ensure that the input value is a valid colour. * @param {string=} newValue The input value. diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 4083e231c..4b9d6f850 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -510,28 +510,6 @@ Blockly.FieldDropdown.prototype.renderSelectedText_ = function() { this.size_.width = Blockly.Field.getCachedWidth(this.textElement_); }; -/** - * Updates the width of the field. Overrides field.prototype.updateWidth to - * deal with image selections on IE and Edge. If the selected item is not an - * image, or if the browser is not IE / Edge, this simply calls the parent - * implementation. - */ -Blockly.FieldDropdown.prototype.updateWidth = function() { - if (this.imageJson_ && - (Blockly.userAgent.IE || Blockly.userAgent.EDGE)) { - // Recalculate the full width. - var arrowWidth = Blockly.Field.getCachedWidth(this.arrow_); - var width = Number(this.imageJson_.width) + arrowWidth + - Blockly.BlockSvg.SEP_SPACE_X; - if (this.borderRect_) { - this.borderRect_.setAttribute('width', width); - } - this.size_.width = width; - } else { - Blockly.Field.prototype.updateWidth.call(this); - } -}; - /** * Close the dropdown menu if this input is being deleted. */ diff --git a/core/field_image.js b/core/field_image.js index 0d39a9fce..44bc0c2b2 100644 --- a/core/field_image.js +++ b/core/field_image.js @@ -103,6 +103,15 @@ Blockly.FieldImage.fromJson = function(options) { */ Blockly.FieldImage.prototype.EDITABLE = false; +/** + * Used to tell if the field needs to be rendered the next time the block is + * rendered. Image fields are statically sized, and only need to be + * rendered at initialization. + * @type {boolean} + * @private + */ +Blockly.FieldImage.prototype.isDirty_ = false; + /** * Create the block UI for this image. * @package @@ -217,15 +226,6 @@ Blockly.FieldImage.prototype.setText = function(alt) { } }; -/** - * Images are fixed width, no need to render. - * @private - */ -Blockly.FieldImage.prototype.render_ = function() { - this.size_.width = this.width_; - this.size_.height = this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y; -}; - /** * If field click is called, and click handler defined, * call the handler.