Skip to content

Fix up vertical text field editor #415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 15, 2016
Merged

Fix up vertical text field editor #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4026baf
Move animated FONTSIZE properties to horizontal/vertical-specific ren…
tmickel Jun 14, 2016
e5640a6
Set FIELD_WIDTH_MAX_EDIT in vertical until we fix truncation problem
tmickel Jun 14, 2016
9cdb9cf
Conditional animation/truncation of field_textinputs
tmickel Jun 14, 2016
57f5171
Tinker with constants to get things in the right position
tmickel Jun 15, 2016
397df0b
Adjust FIELD_WIDTH_MAX_EDIT
tmickel Jun 15, 2016
e714b3b
Prefix FONTSIZE_INITIAL and FONTSIZE_FINAL
tmickel Jun 15, 2016
21a59f7
Fix no-op
tmickel Jun 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions core/block_render_svg_horizontal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
26 changes: 25 additions & 1 deletion core/block_render_svg_vertical.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
*/
Expand Down
2 changes: 1 addition & 1 deletion core/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;',
Expand Down
71 changes: 38 additions & 33 deletions core/field_textinput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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;
};

Expand Down Expand Up @@ -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);

This comment was marked as abuse.

Sign in to view

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';
Expand All @@ -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';

Expand All @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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;
};
};
Expand Down