scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve handling of field border radius and colour

Browse source
This commit is contained in:
Tim Mickel 2016-04-05 19:37:32 -04:00
parent 154d4e1851
commit 5d71c82203
3 changed files with 27 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

6
core/block_render_svg_horizontal.js
View file

@ -315,11 +315,7 @@ Blockly.BlockSvg.prototype.renderCompute_ = function() {
var fieldBBox = field.textElement_.getBBox();
metrics.fieldWidth = fieldBBox.width + Blockly.BlockSvg.SEP_SPACE_X;
metrics.fieldHeight = fieldBBox.height;
if (field.sourceBlock_.type === 'math_number') {
metrics.fieldRadius = Blockly.BlockSvg.NUMBER_FIELD_CORNER_RADIUS;
} else {
metrics.fieldRadius = Blockly.BlockSvg.TEXT_FIELD_CORNER_RADIUS;
}
metrics.fieldRadius = field.getBorderRadius();
}
}
}

5
core/block_svg.js
View file

@ -304,6 +304,11 @@ Blockly.BlockSvg.prototype.setParent = function(newParent) {
var newXY = this.getRelativeToSurfaceXY();
// Move the connections to match the child's new position.
this.moveConnections_(newXY.x - oldXY.x, newXY.y - oldXY.y);
// If we are a shadow block, inherit tertiary colour.
if (this.isShadow()) {
this.setColour(this.getColour(), this.getColourSecondary(),
newParent.getColourTertiary());
}
}
};

38
core/field_textinput.js
View file

@ -225,36 +225,28 @@ Blockly.FieldTextInput.prototype.validate_ = function() {
* @private
*/
Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
// Pull stroke colour from the existing SVG shadow block
// XXX: how to do this better...
var strokeColour = this.sourceBlock_.getSvgRoot().childNodes[0].getAttribute('stroke');
var scale = this.sourceBlock_.workspace.scale;
var div = Blockly.WidgetDiv.DIV;
var bBox = this.getScaledBBox_();
// Add 1px to width and height to account for border (pre-scale)
// The width of this box must be at least FIELD_WIDTH * scale.
// It may be smaller as bBox is based on the content size.
var width = Math.max(bBox.width, Blockly.BlockSvg.FIELD_WIDTH * scale);
// Add 1px to width and height to account for border (pre-scale)
div.style.width = (width / scale + 1) + 'px';
div.style.height = (bBox.height / scale + 1) + 'px';
div.style.transform = 'scale(' + scale + ')';
// This is the same check as in block_render.
// Possibly we should switch to a different check in the future.
// XXX: move this out
var borderRadius = Blockly.BlockSvg.TEXT_FIELD_CORNER_RADIUS;
if (this.sourceBlock_.type === 'math_number') {
borderRadius = Blockly.BlockSvg.NUMBER_FIELD_CORNER_RADIUS;
}
borderRadius += 0.5; // Add 0.5px to account for slight difference between SVG and CSS border
div.style.borderColor = strokeColour;
// Add 0.5px to account for slight difference between SVG and CSS border
var borderRadius = this.getBorderRadius() + 0.5;
div.style.borderRadius = borderRadius + 'px';
// Pull stroke colour from the existing shadow block
var strokeColour = this.sourceBlock_.getColourTertiary();
div.style.borderColor = strokeColour;
var xy = this.getAbsoluteXY_();
// Account for border post-scale
// Account for border width, post-scale
xy.x -= scale / 2;
xy.y -= scale / 2;
// In RTL mode block fields and LTR input fields the left edge moves,
// whereas the right edge is fixed. Reposition the editor.
if (this.sourceBlock_.RTL) {
@ -276,6 +268,18 @@ Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
div.style.top = xy.y + 'px';
};
/**
* Determine border radius based on the type of the owning shadow block.
* @return {Number} Border radius in px.
*/
Blockly.Field.prototype.getBorderRadius = function() {
if (this.sourceBlock_.type === 'math_number') {
return Blockly.BlockSvg.NUMBER_FIELD_CORNER_RADIUS;
} else {
return Blockly.BlockSvg.TEXT_FIELD_CORNER_RADIUS;
}
};
/**
* Close the editor, save the results, and dispose of the editable
* text field's elements.