CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-11 02:47:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2713 from rachel-fenichel/render/constants

Browse Source 
Move puzzle tab and start hat information into objects
This commit is contained in:
Rachel Fenichel
2019-07-25 11:33:41 -07:00
committed by GitHub
parent 84f5afd0e3 b9f6c27b32
commit 94bc23ff7e
4 changed files with 189 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/renderers/block_rendering_rewrite/block_render_draw.js
View File

@@ -127,7 +127,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
} else if (elem.type === 'previous connection') {
this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT);
} else if (elem.type === 'hat') {
this.steps_.push(Blockly.blockRendering.constants.START_HAT_PATH);
this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
} else if (elem.isSpacer()) {
this.steps_.push('h', elem.width);
}
@@ -146,8 +146,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
this.highlighter_.drawValueInput(row);
this.steps_.push('H', row.width);
this.steps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN);
this.steps_.push('v', row.height - Blockly.blockRendering.constants.TAB_HEIGHT);
this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
this.steps_.push('v',
row.height - Blockly.blockRendering.constants.PUZZLE_TAB.height);
this.positionExternalValueConnection_(row);
};
@@ -220,8 +221,8 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
if (this.info_.hasOutputConnection) {
// Draw a line up to the bottom of the tab.
this.steps_.push('V', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
Blockly.blockRendering.constants.TAB_HEIGHT);
this.steps_.push(Blockly.blockRendering.constants.TAB_PATH_UP);
Blockly.blockRendering.constants.PUZZLE_TAB.height);
this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
}
// Close off the path. This draws a vertical line up to the start of the
// block's path, which may be either a rounded or a sharp corner.
@@ -314,12 +315,12 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
var height = input.height;
var yPos = input.centerline - height / 2;
this.inlineSteps_.push('M', (input.xPos + Blockly.blockRendering.constants.TAB_WIDTH) + ',' + yPos);
this.inlineSteps_.push('M', (input.xPos + Blockly.blockRendering.constants.PUZZLE_TAB.width) + ',' + yPos);
this.inlineSteps_.push('v ', Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP);
this.inlineSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN);
this.inlineSteps_.push('v', height - Blockly.blockRendering.constants.TAB_HEIGHT -
this.inlineSteps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
this.inlineSteps_.push('v', height - Blockly.blockRendering.constants.PUZZLE_TAB.height -
Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP);
this.inlineSteps_.push('h', width - Blockly.blockRendering.constants.TAB_WIDTH);
this.inlineSteps_.push('h', width - Blockly.blockRendering.constants.PUZZLE_TAB.width);
this.inlineSteps_.push('v', -height);
this.inlineSteps_.push('z');
@@ -339,7 +340,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
var yPos = input.centerline - input.height / 2;
// Move the connection.
if (input.connection) {
var connX = input.xPos + Blockly.blockRendering.constants.TAB_WIDTH +
var connX = input.xPos + Blockly.blockRendering.constants.PUZZLE_TAB.width +
Blockly.blockRendering.constants.DARK_PATH_OFFSET;
if (this.info_.RTL) {
connX *= -1;

74
core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
View File

@@ -66,9 +66,8 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
} else if (elem.type === 'previous connection') {
this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT);
} else if (elem.type === 'hat') {
this.highlightSteps_.push(this.info_.RTL ?
Blockly.BlockSvg.START_HAT_HIGHLIGHT_RTL :
Blockly.BlockSvg.START_HAT_HIGHLIGHT_LTR);
this.highlightSteps_.push(
Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL));
} else if (elem.isSpacer()) {
this.highlightSteps_.push('h', elem.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
}
@@ -78,27 +77,22 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
};
Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
//var v = row.height - Blockly.blockRendering.constants.TAB_HEIGHT;
if (this.info_.RTL) {
var aboveTabHeight =
Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var aboveTabHeight = -Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var belowTabHeight = row.height -
(Blockly.blockRendering.constants.TAB_HEIGHT -
Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP) +
Blockly.blockRendering.constants.PUZZLE_TAB.height +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
// Edge above tab.
this.highlightSteps_.push('v', aboveTabHeight);
// Highlight around back of tab.
this.highlightSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL);
this.highlightSteps_.push(
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
// Edge below tab.
this.highlightSteps_.push('v', belowTabHeight);
} else {
// Short highlight glint at bottom of tab.
this.highlightSteps_.push('M', (row.width - 5) + ',' +
(row.yPos + Blockly.blockRendering.constants.TAB_HEIGHT - 0.7));
this.highlightSteps_.push('l', (Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1');
this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo(row.width, row.yPos));
this.highlightSteps_.push(
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
}
};
@@ -163,11 +157,8 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
if (this.info_.hasOutputConnection) {
if (this.info_.RTL) {
this.highlightSteps_.push(Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_RTL);
} else {
this.highlightSteps_.push(Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_LTR);
}
this.highlightSteps_.push(
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathUp(this.info_.RTL));
}
if (!this.info_.RTL) {
@@ -180,54 +171,55 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
};
Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
var width = input.width;
var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var inputWidth = input.width;
var height = input.height;
var x = input.xPos;
var yPos = input.centerline - height / 2;
var bottomHighlightWidth = width - Blockly.blockRendering.constants.TAB_WIDTH;
var bottomHighlightWidth = inputWidth - Blockly.blockRendering.constants.PUZZLE_TAB.width;
if (this.info_.RTL) {
// TODO: Check if this is different when the inline input is populated.
var aboveTabHeight =
Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP -
offset;
var belowTabHeight =
height -
(Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP +
Blockly.blockRendering.constants.TAB_HEIGHT -
Blockly.blockRendering.constants.TAB_VERTICAL_OVERLAP) +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
Blockly.blockRendering.constants.PUZZLE_TAB.height) +
offset;
var startX = x + Blockly.blockRendering.constants.TAB_WIDTH -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var startY = yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var startX = x + Blockly.blockRendering.constants.PUZZLE_TAB.width -
offset;
var startY = yPos + offset;
// Highlight right edge, around back of tab, and bottom.
this.highlightInlineSteps_.push('M', startX + ',' + startY);
// Right edge above tab.
this.highlightInlineSteps_.push('v', aboveTabHeight);
// Back of tab.
this.highlightInlineSteps_.push(Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL);
this.highlightInlineSteps_.push(
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
// Right edge below tab.
this.highlightInlineSteps_.push('v', belowTabHeight);
// Bottom (horizontal).
this.highlightInlineSteps_.push('h', bottomHighlightWidth);
} else {
// Go to top right corner.
this.highlightInlineSteps_.push(
Blockly.utils.svgPaths.moveTo(x + inputWidth + offset, yPos + offset));
// Highlight right edge, bottom.
this.highlightInlineSteps_.push('M',
(x + width + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + ',' +
(yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
this.highlightInlineSteps_.push('v', height);
this.highlightInlineSteps_.push('h ', -bottomHighlightWidth);
// Go to top of tab.
this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo(
x + Blockly.blockRendering.constants.PUZZLE_TAB.width,
yPos + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP));
// Short highlight glint at bottom of tab.
// Bad: reference to Blockly.BlockSvg
this.highlightInlineSteps_.push('M',
(x + 2.9) + ',' + (yPos + Blockly.BlockSvg.INLINE_PADDING_Y +
Blockly.blockRendering.constants.TAB_HEIGHT - 0.7));
this.highlightInlineSteps_.push('l',
(Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1');
this.highlightSteps_.push(
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL));
}
};

216
core/renderers/block_rendering_rewrite/block_rendering_constants.js
View File

@@ -93,12 +93,19 @@ Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH = 66.5;
* @const
*/
Blockly.blockRendering.constants.CORNER_RADIUS = 8;
/**
* Height of the top hat.
* @const
* @private
*/
Blockly.blockRendering.constants.START_HAT_HEIGHT = 15;
/**
* Width of the top hat.
* @const
* @private
*/
Blockly.blockRendering.constants.START_HAT_WIDTH = 100;
Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT = 15;
@@ -154,45 +161,6 @@ Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) *
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
/**
* SVG path for drawing a horizontal puzzle tab from top to bottom.
* @const
*/
Blockly.blockRendering.constants.TAB_PATH_DOWN = 'c 0,10 -' + Blockly.blockRendering.constants.TAB_WIDTH +
',-8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',7.5 s ' +
Blockly.blockRendering.constants.TAB_WIDTH + ',-2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',7.5';
/**
* SVG path for drawing a horizontal puzzle tab from top to bottom with
* highlighting from the upper-right.
* @const
*/
Blockly.blockRendering.constants.TAB_PATH_DOWN_HIGHLIGHT_RTL = 'm -' +
(Blockly.blockRendering.constants.TAB_WIDTH * 0.97) + ',2.5 q -' +
(Blockly.blockRendering.constants.TAB_WIDTH * 0.05) + ',10 ' +
(Blockly.blockRendering.constants.TAB_WIDTH * 0.3) + ',9.5 m ' +
(Blockly.blockRendering.constants.TAB_WIDTH * 0.67) + ',-1.9';
/**
* SVG path for drawing a horizontal puzzle tab from bottom to top.
* @const
*/
Blockly.blockRendering.constants.TAB_PATH_UP = 'c 0,-10 -' + Blockly.blockRendering.constants.TAB_WIDTH +
',8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5 s ' +
Blockly.blockRendering.constants.TAB_WIDTH + ',2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5';
/**
* Path of the top hat's curve.
* @const
*/
Blockly.blockRendering.constants.START_HAT_PATH =
Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(30, -Blockly.blockRendering.constants.START_HAT_HEIGHT),
Blockly.utils.svgPaths.point(70, -Blockly.blockRendering.constants.START_HAT_HEIGHT),
Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.START_HAT_WIDTH, 0)
]);
/**
* SVG path for drawing next/previous notch from left to right.
* @const
@@ -283,8 +251,6 @@ Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
/**
* SVG start point for drawing the top-left corner.
* @const
@@ -314,17 +280,6 @@ Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID =
',' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
' 0 0,1 ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ','; // follow with y pos - corner radius
Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_LTR =
'V ' + (Blockly.blockRendering.constants.TAB_HEIGHT + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
' m ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.92) + ',-0.5 ' +
'q ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.19) + ',-5.5 0,-11 ' +
'm ' + (Blockly.blockRendering.constants.TAB_WIDTH * 0.92) + ',1 ' +
'V 0.5 H 1';
Blockly.blockRendering.constants.OUTPUT_CONNECTION_HIGHLIGHT_RTL =
'M ' + (Blockly.blockRendering.constants.TAB_WIDTH * -0.25) + ',8.4 l ' +
(Blockly.blockRendering.constants.TAB_WIDTH * -0.45) + ',-2.1';
/**
* SVG start point for drawing the top-left corner's highlight in RTL.
* @const
@@ -350,28 +305,145 @@ Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT =
Blockly.blockRendering.constants.CORNER_RADIUS + ',0.5';
/**
* Path of the top hat's curve's highlight in LTR.
* @const
* Information about the hat on a start block.
*/
Blockly.blockRendering.constants.START_HAT_HIGHLIGHT_LTR =
Blockly.utils.svgPaths.curve('c',
Blockly.blockRendering.constants.START_HAT = (function() {
// It's really minus 15, which is super unfortunate.
var height = Blockly.blockRendering.constants.START_HAT_HEIGHT;
var width = Blockly.blockRendering.constants.START_HAT_WIDTH;
var highlightRtlPath =
Blockly.utils.svgPaths.moveBy(25, -8.7) +
Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(29.7, -6.2),
Blockly.utils.svgPaths.point(57.2, -0.5),
Blockly.utils.svgPaths.point(75, 8.7)
]);
var highlightLtrPath =
Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(17.8, -9.2),
Blockly.utils.svgPaths.point(45.3, -14.9),
Blockly.utils.svgPaths.point(75, -8.7)
]) +
Blockly.utils.svgPaths.moveTo(100.5, 0.5);
var mainPath =
Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(30, -height),
Blockly.utils.svgPaths.point(70, -height),
Blockly.utils.svgPaths.point(width, 0)
]);
return {
height: height,
width: width,
path: mainPath,
highlight: function(rtl) {
return rtl ? highlightRtlPath : highlightLtrPath;
}
};
})();
Blockly.blockRendering.constants.PUZZLE_TAB = (function() {
var width = Blockly.blockRendering.constants.TAB_WIDTH;
var height = Blockly.blockRendering.constants.TAB_HEIGHT;
// The main path for the puzzle tab is made out of a few curves (c and s).
// Those curves are defined with relative positions. The 'up' and 'down'
// versions of the paths are the same, but the Y sign flips. Forward and back
// are the signs to use to move the cursor in the direction that the path is
// being drawn.
function makeMainPath(up) {
var forward = up ? -1 : 1;
var back = -forward;
var overlap = 2.5;
var halfHeight = height / 2;
var control1Y = halfHeight + overlap;
var control2Y = halfHeight + 0.5;
var control3Y = overlap; //2.5
var endPoint1 = Blockly.utils.svgPaths.point(-width, forward * halfHeight);
var endPoint2 = Blockly.utils.svgPaths.point(width, forward * halfHeight);
return Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(17.8, -9.2),
Blockly.utils.svgPaths.point(45.3, -14.9),
Blockly.utils.svgPaths.point(75, -8.7)
Blockly.utils.svgPaths.point(0, forward * control1Y),
Blockly.utils.svgPaths.point(-width, back * control2Y),
endPoint1
]) +
Blockly.utils.svgPaths.moveTo(100.5, 0.5);
Blockly.utils.svgPaths.curve('s',
[
Blockly.utils.svgPaths.point(width, back * control3Y),
endPoint2
]);
}
/**
* Path of the top hat's curve's highlight in RTL.
* @const
*/
Blockly.blockRendering.constants.START_HAT_HIGHLIGHT_RTL =
Blockly.utils.svgPaths.moveBy(25, -8.7) +
Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(29.7, -6.2),
Blockly.utils.svgPaths.point(57.2, -0.5),
Blockly.utils.svgPaths.point(75, 8.7)
]);
// c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5
var pathUp = makeMainPath(true);
// c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5
var pathDown = makeMainPath(false);
return {
width: width,
height: height,
pathDown: pathDown,
pathUp: pathUp
};
})();
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() {
var width = Blockly.blockRendering.constants.TAB_WIDTH;
var height = Blockly.blockRendering.constants.TAB_HEIGHT;
// This is how much of the vertical block edge is actually drawn by the puzzle
// tab.
var verticalOverlap = 2.5;
// The highlight paths are not simple offsets of the main paths. Changing
// them is fiddly work.
var highlightRtlUp =
Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) +
Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1);
var highlightRtlDown =
Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) +
Blockly.utils.svgPaths.moveBy(-width * 0.97, 2.5) +
Blockly.utils.svgPaths.curve('q',
[
Blockly.utils.svgPaths.point(-width * 0.05, 10),
Blockly.utils.svgPaths.point(width * 0.3, 9.5)
]) +
Blockly.utils.svgPaths.moveBy(width * 0.67, -1.9) +
Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap);
var highlightLtrUp =
Blockly.utils.svgPaths.lineOnAxis('V',
height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) +
Blockly.utils.svgPaths.curve('q',
[
Blockly.utils.svgPaths.point(width * -0.19, -5.5),
Blockly.utils.svgPaths.point(0,-11)
]) +
Blockly.utils.svgPaths.moveBy(width * 0.92, 1) +
Blockly.utils.svgPaths.lineOnAxis('V', 0.5) +
Blockly.utils.svgPaths.lineOnAxis('H', 1);
var highlightLtrDown =
Blockly.utils.svgPaths.moveBy(-5, height - 0.7) +
Blockly.utils.svgPaths.lineTo(width * 0.46, -2.1);
return {
width: width,
height: height,
pathUp: function(rtl) {
return rtl ? highlightRtlUp : highlightLtrUp;
},
pathDown: function(rtl) {
return rtl ? highlightRtlDown : highlightLtrDown;
}
};
})();

2
core/renderers/block_rendering_rewrite/measurables.js
View File

@@ -314,7 +314,7 @@ Blockly.blockRendering.Hat = function() {
Blockly.blockRendering.Hat.superClass_.constructor.call(this);
this.type = 'hat';
this.height = Blockly.blockRendering.constants.NO_PADDING;
this.width = Blockly.blockRendering.constants.START_HAT_WIDTH;
this.width = Blockly.blockRendering.constants.START_HAT.width;
};
goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable);