mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-28 22:10:31 -04:00
Update inputs to match spec
This commit is contained in:
Ray Schamp
parent
7de680b718
commit
9d82e79e9c
4 changed files with 82 additions and 33 deletions
|
|
@ -779,6 +779,26 @@ Blockly.BlockSvg.SEP_SPACE_Y = 8;
|
|||
* @const
|
||||
*/
|
||||
Blockly.BlockSvg.INLINE_PADDING_Y = 5;
|
||||
/**
|
||||
* Height of user inputs
|
||||
* @const
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_HEIGHT = 32;
|
||||
/**
|
||||
* Width of user inputs
|
||||
* @const
|
||||
*/
|
||||
Blockly.BlockSvg.FIELD_WIDTH = 48;
|
||||
/**
|
||||
* Corner radius of number inputs
|
||||
* @const
|
||||
*/
|
||||
Blockly.BlockSvg.NUMBER_FIELD_CORNER_RADIUS = 16;
|
||||
/**
|
||||
* Corner radius of text inputs
|
||||
* @const
|
||||
*/
|
||||
Blockly.BlockSvg.TEXT_FIELD_CORNER_RADIUS = 4;
|
||||
/**
|
||||
* Minimum width of a block.
|
||||
* @const
|
||||
|
|
@ -1122,13 +1142,13 @@ Blockly.BlockSvg.disconnectUiStop_.group = null;
|
|||
*/
|
||||
Blockly.BlockSvg.prototype.updateColour = function() {
|
||||
// Render block fill
|
||||
var hexColour = this.getColour();
|
||||
var hexColour = this.parentBlock_ ? this.parentBlock_.getColour() : this.getColour();
|
||||
var rgb = goog.color.hexToRgb(hexColour);
|
||||
if (this.isShadow()) {
|
||||
rgb = goog.color.lighten(rgb, 0.6);
|
||||
hexColour = goog.color.rgbArrayToHex(rgb);
|
||||
this.svgPath_.setAttribute('fill', '#ffffff');
|
||||
} else {
|
||||
this.svgPath_.setAttribute('fill', hexColour);
|
||||
}
|
||||
this.svgPath_.setAttribute('fill', hexColour);
|
||||
|
||||
// Render block stroke
|
||||
var colorShift = goog.color.darken(rgb, 0.1);
|
||||
|
|
@ -1351,6 +1371,9 @@ Blockly.BlockSvg.prototype.renderCompute_ = function() {
|
|||
height: 0,
|
||||
bayHeight: 0,
|
||||
bayWidth: 0,
|
||||
fieldWidth: 0,
|
||||
fieldHeight: 0,
|
||||
fieldRadius: 0,
|
||||
startHat: false,
|
||||
endHat: false
|
||||
};
|
||||
|
|
@ -1386,6 +1409,16 @@ Blockly.BlockSvg.prototype.renderCompute_ = function() {
|
|||
if (field instanceof Blockly.FieldImage) {
|
||||
metrics.icon = field;
|
||||
}
|
||||
if (field instanceof Blockly.FieldTextInput) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1402,7 +1435,8 @@ Blockly.BlockSvg.prototype.renderCompute_ = function() {
|
|||
metrics.width += 2 * Blockly.BlockSvg.CORNER_RADIUS + 8;
|
||||
}
|
||||
if (this.outputConnection) {
|
||||
metrics.height = 2 * Blockly.BlockSvg.SEP_SPACE_Y + 2 * Blockly.BlockSvg.CORNER_RADIUS + 8;
|
||||
metrics.height = Blockly.BlockSvg.FIELD_HEIGHT;
|
||||
metrics.width = Blockly.BlockSvg.FIELD_WIDTH;
|
||||
} else {
|
||||
metrics.height = Math.max(
|
||||
Blockly.BlockSvg.SEP_SPACE_Y * 2 + iconSize.height,
|
||||
|
|
@ -1457,10 +1491,10 @@ Blockly.BlockSvg.prototype.renderDraw_ = function(metrics) {
|
|||
// Position value input
|
||||
if (metrics.valueInput) {
|
||||
var input = metrics.valueInput.getSvgRoot();
|
||||
var xOffset = (metrics.bayWidth ? metrics.width - metrics.bayWidth - Blockly.BlockSvg.NOTCH_WIDTH*3 : metrics.width) / 2;
|
||||
var transformation = 'translate(' +
|
||||
(metrics.width - xOffset - metrics.valueInput.width/2) + ',' +
|
||||
(metrics.height - metrics.valueInput.height/4) + ')';
|
||||
var inputBBox = input.getBBox();
|
||||
var transformation = 'translate(' +
|
||||
(Blockly.BlockSvg.NOTCH_WIDTH + (metrics.bayWidth ? 8 + Blockly.BlockSvg.NOTCH_WIDTH*2 : 0) + metrics.bayWidth) + ',' +
|
||||
(metrics.height - 8) + ')';
|
||||
input.setAttribute('transform', transformation);
|
||||
}
|
||||
};
|
||||
|
|
@ -1501,10 +1535,13 @@ Blockly.BlockSvg.prototype.renderDrawLeft_ =
|
|||
} else {
|
||||
// Input
|
||||
// Position the cursor at the top-left starting point.
|
||||
steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER_START);
|
||||
steps.push('m', metrics.fieldRadius + ',0');
|
||||
// Top-left rounded corner.
|
||||
steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER);
|
||||
steps.push('V', 8);
|
||||
steps.push(
|
||||
'A', metrics.fieldRadius + ',' + metrics.fieldRadius,
|
||||
'0', '0,0', '0,' + metrics.fieldRadius);
|
||||
steps.push(
|
||||
'V', metrics.height - metrics.fieldRadius);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1533,10 +1570,9 @@ Blockly.BlockSvg.prototype.renderDrawBottom_ = function(steps,
|
|||
Blockly.BlockSvg.CORNER_RADIUS);
|
||||
} else {
|
||||
// Input
|
||||
steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS + ',' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS);
|
||||
steps.push(
|
||||
'a', metrics.fieldRadius + ',' + metrics.fieldRadius,
|
||||
'0', '0,0', metrics.fieldRadius + ',' + metrics.fieldRadius);
|
||||
}
|
||||
|
||||
// Has statement
|
||||
|
|
@ -1584,7 +1620,7 @@ Blockly.BlockSvg.prototype.renderDrawBottom_ = function(steps,
|
|||
steps.push('H', metrics.width - Blockly.BlockSvg.CORNER_RADIUS);
|
||||
} else {
|
||||
// input
|
||||
steps.push('H', metrics.width - Blockly.BlockSvg.CORNER_RADIUS);
|
||||
steps.push('H', metrics.width - metrics.fieldRadius);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1611,11 +1647,10 @@ Blockly.BlockSvg.prototype.renderDrawRight_ =
|
|||
steps.push('v', -8);
|
||||
} else {
|
||||
// Input
|
||||
steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS + ',-' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS);
|
||||
steps.push('v', -4);
|
||||
steps.push(
|
||||
'a', metrics.fieldRadius + ',' + metrics.fieldRadius,
|
||||
'0', '0,0', metrics.fieldRadius + ',' + -1*metrics.fieldRadius);
|
||||
steps.push('v', -1*(metrics.height - metrics.fieldRadius*2));
|
||||
}
|
||||
|
||||
if (metrics.endHat) {
|
||||
|
|
@ -1660,10 +1695,9 @@ Blockly.BlockSvg.prototype.renderDrawTop_ =
|
|||
Blockly.BlockSvg.CORNER_RADIUS + ',-' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS);
|
||||
} else {
|
||||
steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 -' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS + ',-' +
|
||||
Blockly.BlockSvg.CORNER_RADIUS);
|
||||
steps.push(
|
||||
'a', metrics.fieldRadius + ',' + metrics.fieldRadius,
|
||||
'0', '0,0', '-' + metrics.fieldRadius + ',-' + metrics.fieldRadius);
|
||||
}
|
||||
steps.push('z');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -288,7 +288,8 @@ Blockly.Css.CONTENT = [
|
|||
'margin: 0;',
|
||||
'outline: none;',
|
||||
'padding: 0 1px;',
|
||||
'width: 100%',
|
||||
'width: 100%;',
|
||||
'text-align: center',
|
||||
'}',
|
||||
|
||||
'.blocklyMainBackground {',
|
||||
|
|
|
|||
|
|
@ -45,7 +45,9 @@ goog.require('goog.userAgent');
|
|||
* @constructor
|
||||
*/
|
||||
Blockly.Field = function(text, opt_validator) {
|
||||
this.size_ = new goog.math.Size(0, 25);
|
||||
this.size_ = new goog.math.Size(
|
||||
Blockly.BlockSvg.FIELD_WIDTH,
|
||||
Blockly.BlockSvg.FIELD_HEIGHT);
|
||||
this.setValue(text);
|
||||
this.setValidator(opt_validator);
|
||||
};
|
||||
|
|
@ -76,7 +78,7 @@ Blockly.Field.prototype.name = undefined;
|
|||
* Maximum characters of text to display before adding an ellipsis.
|
||||
* @type {number}
|
||||
*/
|
||||
Blockly.Field.prototype.maxDisplayLength = 50;
|
||||
Blockly.Field.prototype.maxDisplayLength = 5;
|
||||
|
||||
/**
|
||||
* Visible text to display.
|
||||
|
|
@ -137,10 +139,14 @@ Blockly.Field.prototype.init = function(block) {
|
|||
'ry': 4,
|
||||
'x': -Blockly.BlockSvg.SEP_SPACE_X / 2,
|
||||
'y': 0,
|
||||
'height': 16}, this.fieldGroup_, this.sourceBlock_.workspace);
|
||||
'height': Blockly.BlockSvg.FIELD_HEIGHT}, this.fieldGroup_, this.sourceBlock_.workspace);
|
||||
/** @type {!Element} */
|
||||
this.textElement_ = Blockly.createSvgElement('text',
|
||||
{'class': 'blocklyText', 'y': this.size_.height - 12.5},
|
||||
{'class': 'blocklyText',
|
||||
'y': this.size_.height/2 + 6.25,
|
||||
'x': Blockly.BlockSvg.FIELD_WIDTH / 2,
|
||||
'width': Blockly.BlockSvg.FIELD_WIDTH - Blockly.BlockSvg.SEP_SPACE_X,
|
||||
'text-anchor': 'middle'},
|
||||
this.fieldGroup_);
|
||||
|
||||
this.updateEditable();
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
|
||||
goog.provide('Blockly.FieldTextInput');
|
||||
|
||||
goog.require('Blockly.BlockSvg');
|
||||
goog.require('Blockly.Field');
|
||||
goog.require('Blockly.Msg');
|
||||
goog.require('goog.asserts');
|
||||
|
|
@ -225,9 +226,16 @@ Blockly.FieldTextInput.prototype.validate_ = function() {
|
|||
Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
|
||||
var div = Blockly.WidgetDiv.DIV;
|
||||
var bBox = this.fieldGroup_.getBBox();
|
||||
div.style.width = bBox.width * this.sourceBlock_.workspace.scale + 'px';
|
||||
div.style.height = bBox.height * this.sourceBlock_.workspace.scale + 'px';
|
||||
var height = bBox.height * this.sourceBlock_.workspace.scale;
|
||||
var width = Math.max(
|
||||
bBox.width, Blockly.BlockSvg.FIELD_WIDTH-Blockly.BlockSvg.SEP_SPACE_X) *
|
||||
this.sourceBlock_.workspace.scale
|
||||
div.style.width = width + 'px';
|
||||
div.style.height = height + 'px';
|
||||
var xy = this.getAbsoluteXY_();
|
||||
xy.x += Blockly.BlockSvg.SEP_SPACE_X * this.sourceBlock_.workspace.scale;
|
||||
// @todo Why 3?
|
||||
xy.y += (Blockly.BlockSvg.FIELD_HEIGHT * this.sourceBlock_.workspace.scale)/2 - height/2 + 3;
|
||||
// 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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue