mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-28 22:10:31 -04:00
Fix up vertical text field editor (#415)
* Move animated FONTSIZE properties to horizontal/vertical-specific rendering * Set FIELD_WIDTH_MAX_EDIT in vertical until we fix truncation problem * Conditional animation/truncation of field_textinputs * Tinker with constants to get things in the right position * Adjust FIELD_WIDTH_MAX_EDIT * Prefix FONTSIZE_INITIAL and FONTSIZE_FINAL * Fix no-op
This commit is contained in:
Tim Mickel
GitHub
parent
4f28d1fb61
commit
051921e1a0
4 changed files with 88 additions and 35 deletions
|
|
@ -239,6 +239,30 @@ Blockly.BlockSvg.renderingMetrics_ = null;
|
|||
*/
|
||||
Blockly.BlockSvg.MAX_DISPLAY_LENGTH = 4;
|
||||
|
||||
/**
|
||||
* Point size of text field before animation. Must match size in CSS.
|
||||
* See implementation in field_textinput.
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_INITIAL = 12;
|
||||
|
||||
/**
|
||||
* Point size of text field after animation.
|
||||
* See implementation in field_textinput.
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_FINAL = 14;
|
||||
|
||||
/**
|
||||
* Whether text fields are allowed to expand past their truncated block size.
|
||||
* @const{boolean}
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_EXPAND_PAST_TRUNCATION = true;
|
||||
|
||||
/**
|
||||
* Whether text fields should animate their positioning.
|
||||
* @const{boolean}
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_ANIMATE_POSITIONING = true;
|
||||
|
||||
/**
|
||||
* @param {!Object} first An object containing computed measurements of a
|
||||
* block.
|
||||
|
|
|
|||
|
|
@ -324,7 +324,7 @@ Blockly.BlockSvg.FIELD_WIDTH_MIN_EDIT = 8 * Blockly.BlockSvg.GRID_UNIT;
|
|||
* Maximum width of user inputs during editing
|
||||
* @const
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_WIDTH_MAX_EDIT = Infinity;
|
||||
Blockly.BlockSvg.FIELD_WIDTH_MAX_EDIT = 52 * Blockly.BlockSvg.GRID_UNIT;
|
||||
|
||||
/**
|
||||
* Maximum height of user inputs during editing
|
||||
|
|
@ -375,6 +375,30 @@ Blockly.BlockSvg.NO_PREVIOUS_INPUT_X_MIN = 12 * Blockly.BlockSvg.GRID_UNIT;
|
|||
*/
|
||||
Blockly.BlockSvg.INLINE_PADDING_Y = 2 * Blockly.BlockSvg.GRID_UNIT;
|
||||
|
||||
/**
|
||||
* Point size of text field before animation. Must match size in CSS.
|
||||
* See implementation in field_textinput.
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_INITIAL = 12;
|
||||
|
||||
/**
|
||||
* Point size of text field after animation.
|
||||
* See implementation in field_textinput.
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_FINAL = 12;
|
||||
|
||||
/**
|
||||
* Whether text fields are allowed to expand past their truncated block size.
|
||||
* @const{boolean}
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_EXPAND_PAST_TRUNCATION = false;
|
||||
|
||||
/**
|
||||
* Whether text fields should animate their positioning.
|
||||
* @const{boolean}
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_TEXTINPUT_ANIMATE_POSITIONING = false;
|
||||
|
||||
/**
|
||||
* Change the colour of a block.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -449,7 +449,7 @@ Blockly.Css.CONTENT = [
|
|||
'margin: 0;',
|
||||
'outline: none;',
|
||||
'box-sizing: border-box;',
|
||||
'padding: 2px 8px 0 8px;',
|
||||
'padding: 2px 0 0 0;',
|
||||
'width: 100%;',
|
||||
'text-align: center;',
|
||||
'color: $colour_text;',
|
||||
|
|
|
|||
|
|
@ -52,16 +52,6 @@ Blockly.FieldTextInput = function(text, opt_validator) {
|
|||
};
|
||||
goog.inherits(Blockly.FieldTextInput, Blockly.Field);
|
||||
|
||||
/**
|
||||
* Point size of text before animation. Must match size in CSS.
|
||||
*/
|
||||
Blockly.FieldTextInput.FONTSIZE_INITIAL = 12;
|
||||
|
||||
/**
|
||||
* Point size of text after animation.
|
||||
*/
|
||||
Blockly.FieldTextInput.FONTSIZE_FINAL = 14;
|
||||
|
||||
/**
|
||||
* Length of animations in seconds.
|
||||
*/
|
||||
|
|
@ -171,14 +161,17 @@ Blockly.FieldTextInput.prototype.showEditor_ = function(opt_quietInput, opt_read
|
|||
this.workspace_.addChangeListener(htmlInput.onWorkspaceChangeWrapper_);
|
||||
|
||||
// Add animation transition properties
|
||||
div.style.transition = 'padding ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'width ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'height ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'margin-left ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'box-shadow ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
|
||||
var transitionProperties = 'box-shadow ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
|
||||
if (Blockly.BlockSvg.FIELD_TEXTINPUT_ANIMATE_POSITIONING) {
|
||||
div.style.transition += ',padding ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'width ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'height ' + Blockly.FieldTextInput.ANIMATION_TIME + 's,' +
|
||||
'margin-left ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
|
||||
}
|
||||
div.style.transition = transitionProperties;
|
||||
htmlInput.style.transition = 'font-size ' + Blockly.FieldTextInput.ANIMATION_TIME + 's';
|
||||
// The animated properties themselves
|
||||
htmlInput.style.fontSize = Blockly.FieldTextInput.FONTSIZE_FINAL + 'pt';
|
||||
htmlInput.style.fontSize = Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_FINAL + 'pt';
|
||||
div.style.boxShadow = '0px 0px 0px 4px ' + Blockly.Colours.fieldShadow;
|
||||
};
|
||||
|
||||
|
|
@ -249,18 +242,26 @@ Blockly.FieldTextInput.prototype.validate_ = function() {
|
|||
Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
|
||||
var scale = this.sourceBlock_.workspace.scale;
|
||||
var div = Blockly.WidgetDiv.DIV;
|
||||
// Resize the box based on the measured width of the text, pre-truncation
|
||||
var textWidth = Blockly.measureText(
|
||||
Blockly.FieldTextInput.htmlInput_.style.fontSize,
|
||||
Blockly.FieldTextInput.htmlInput_.style.fontFamily,
|
||||
Blockly.FieldTextInput.htmlInput_.style.fontWeight,
|
||||
Blockly.FieldTextInput.htmlInput_.value
|
||||
);
|
||||
// Size drawn in the canvas needs padding and scaling
|
||||
textWidth += Blockly.FieldTextInput.TEXT_MEASURE_PADDING_MAGIC;
|
||||
textWidth *= scale;
|
||||
|
||||
var width;
|
||||
if (Blockly.BlockSvg.FIELD_TEXTINPUT_EXPAND_PAST_TRUNCATION) {
|
||||
// Resize the box based on the measured width of the text, pre-truncation
|
||||
var textWidth = Blockly.measureText(
|
||||
Blockly.FieldTextInput.htmlInput_.style.fontSize,
|
||||
Blockly.FieldTextInput.htmlInput_.style.fontFamily,
|
||||
Blockly.FieldTextInput.htmlInput_.style.fontWeight,
|
||||
Blockly.FieldTextInput.htmlInput_.value
|
||||
);
|
||||
// Size drawn in the canvas needs padding and scaling
|
||||
textWidth += Blockly.FieldTextInput.TEXT_MEASURE_PADDING_MAGIC;
|
||||
textWidth *= scale;
|
||||
width = textWidth;
|
||||
} else {
|
||||
// Set width to (truncated) block size.
|
||||
width = this.sourceBlock_.getHeightWidth().width * scale;
|
||||
}
|
||||
// The width must be at least FIELD_WIDTH and at most FIELD_WIDTH_MAX_EDIT
|
||||
var width = Math.max(textWidth, Blockly.BlockSvg.FIELD_WIDTH_MIN_EDIT * scale);
|
||||
width = Math.max(width, Blockly.BlockSvg.FIELD_WIDTH_MIN_EDIT * scale);
|
||||
width = Math.min(width, Blockly.BlockSvg.FIELD_WIDTH_MAX_EDIT * scale);
|
||||
// Add 1px to width and height to account for border (pre-scale)
|
||||
div.style.width = (width / scale + 1) + 'px';
|
||||
|
|
@ -270,7 +271,8 @@ Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
|
|||
// Use margin-left to animate repositioning of the box (value is unscaled).
|
||||
// This is the difference between the default position and the positioning
|
||||
// after growing the box.
|
||||
var initialWidth = Blockly.BlockSvg.FIELD_WIDTH * scale;
|
||||
var fieldWidth = this.sourceBlock_.getHeightWidth().width;
|
||||
var initialWidth = fieldWidth * scale;
|
||||
var finalWidth = width;
|
||||
div.style.marginLeft = -0.5 * (finalWidth - initialWidth) + 'px';
|
||||
|
||||
|
|
@ -289,7 +291,7 @@ Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
|
|||
// whereas the right edge is fixed. Reposition the editor.
|
||||
if (this.sourceBlock_.RTL) {
|
||||
xy.x += width;
|
||||
xy.x -= div.offsetWidth;
|
||||
xy.x -= div.offsetWidth * scale;
|
||||
}
|
||||
// Shift by a few pixels to line up exactly.
|
||||
xy.y += 1 * scale;
|
||||
|
|
@ -300,7 +302,6 @@ Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
|
|||
xy.y += 1 * scale;
|
||||
}
|
||||
if (goog.userAgent.WEBKIT) {
|
||||
xy.x += 0.5;
|
||||
xy.y -= 1 * scale;
|
||||
}
|
||||
// Finally, set the actual style
|
||||
|
|
@ -347,10 +348,14 @@ Blockly.FieldTextInput.prototype.widgetDispose_ = function() {
|
|||
htmlInput.onWorkspaceChangeWrapper_);
|
||||
|
||||
// Animation of disposal
|
||||
htmlInput.style.fontSize = Blockly.FieldTextInput.FONTSIZE_INITIAL + 'pt';
|
||||
htmlInput.style.fontSize = Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_INITIAL + 'pt';
|
||||
div.style.boxShadow = '';
|
||||
div.style.width = Blockly.BlockSvg.FIELD_WIDTH + 'px';
|
||||
div.style.height = Blockly.BlockSvg.FIELD_HEIGHT + 'px';
|
||||
// Resize to actual size of final source block.
|
||||
if (thisField.sourceBlock_) {
|
||||
var size = thisField.sourceBlock_.getHeightWidth();
|
||||
div.style.width = (size.width + 1) + 'px';
|
||||
div.style.height = (size.height + 1) + 'px';
|
||||
}
|
||||
div.style.marginLeft = 0;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue