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

Corners and notches

Browse Source
This commit is contained in:
Rachel Fenichel
2019-07-26 15:17:25 -07:00
parent 20bec74282
commit b54ec1e2db
5 changed files with 236 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -123,9 +123,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
this.steps_.push(Blockly.blockRendering.constants.START_POINT);
} else if (elem.type === 'round corner') {
this.steps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_START,
Blockly.blockRendering.constants.TOP_LEFT_CORNER);
Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
} else if (elem.type === 'previous connection') {
this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT);
this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft);
} else if (elem.type === 'hat') {
this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
} else if (elem.isSpacer()) {
@@ -161,11 +161,21 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
*/
Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
this.highlighter_.drawStatementInput(row);
var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT;
// Where to start drawing the notch, which is on the right side in LTR.
var x = row.statementEdge + Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
Blockly.blockRendering.constants.NOTCH.width;
this.steps_.push('H', x);
this.steps_.push(Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER);
this.steps_.push('v', row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS);
this.steps_.push(Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER);
var innerTopLeftCorner =
Blockly.blockRendering.constants.NOTCH.pathRight + ' h -' +
(Blockly.blockRendering.constants.NOTCH_WIDTH -
Blockly.blockRendering.constants.CORNER_RADIUS) +
Blockly.blockRendering.constants.INSIDE_CORNERS.pathTop;
this.steps_.push(innerTopLeftCorner);
this.steps_.push('v',
row.height - (2 * Blockly.blockRendering.constants.INSIDE_CORNERS.height));
this.steps_.push(Blockly.blockRendering.constants.INSIDE_CORNERS.pathBottom);
this.positionStatementInputConnection_(row);
};
@@ -198,11 +208,13 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
for (var i = elems.length - 1; i >= 0; i--) {
var elem = elems[i];
if (elem.type === 'next connection') {
this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_RIGHT);
this.steps_.push('h', (this.RTL ? 0.5 : - 0.5));
this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathRight);
this.steps_.push('h', (this.RTL ? -0.5 : 0.5));
} else if (elem.type === 'square corner') {
this.steps_.push('H 0');
} else if (elem.type === 'round corner') {
this.steps_.push(Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER);
this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
} else if (elem.isSpacer()) {
this.steps_.push('h', elem.width * -1);
}
@@ -416,9 +428,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
var bottomRow = this.info_.bottomRow;
if (bottomRow.hasNextConnection) {
var connX =
this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT :
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
var connInfo = bottomRow.getNextConnection();
var connX = this.info_.RTL ? -connInfo.xPos : connInfo.xPos;
bottomRow.connection.setOffsetInBlock(
connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
}

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

@@ -61,12 +61,18 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
if (elem.type === 'square corner') {
this.highlightSteps_.push(Blockly.blockRendering.constants.START_POINT_HIGHLIGHT);
} else if (elem.type === 'round corner') {
this.highlightSteps_.push(this.info_.RTL ?
Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL :
Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR);
this.highlightSteps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT);
this.highlightSteps_.push(
Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS.topLeftStart(
this.info_.RTL));
// this.highlightSteps_.push(this.info_.RTL ?
// Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL :
// Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR);
this.highlightSteps_.push(
Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS.topLeft);
} else if (elem.type === 'previous connection') {
this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT);
this.highlightSteps_.push('h', (this.RTL ? 0.5 : - 0.5));
this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH.pathLeftHighlight);
this.highlightSteps_.push('h', (this.RTL ? -0.5 : 0.5));
} else if (elem.type === 'hat') {
this.highlightSteps_.push(
Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL));
@@ -106,17 +112,17 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row)
(x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) +
',' + (row.yPos + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE));
this.highlightSteps_.push(
Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL);
Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS.pathTop(this.info_.RTL));
this.highlightSteps_.push('v',
row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS);
this.highlightSteps_.push(
Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL);
Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS.pathBottom(this.info_.RTL));
} else {
this.highlightSteps_.push('M',
(x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + ',' +
(row.yPos + row.height - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE));
this.highlightSteps_.push(
Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR);
Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS.pathBottom(this.info_.RTL));
}
};
@@ -149,10 +155,7 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomCorner = function(_row) {
} else if (elem.type === 'round corner') {
if (!this.info_.RTL) {
this.highlightSteps_.push(
Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START +
(height - Blockly.BlockSvg.DISTANCE_45_INSIDE) +
Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID +
(height - Blockly.BlockSvg.CORNER_RADIUS));
Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS.bottomLeft(height));
}
}
}

8
core/renderers/block_rendering_rewrite/block_render_info.js
View File

@@ -407,7 +407,7 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne
} else if (next.isNextConnection()) {
// Next connections are shifted slightly to the left (in both LTR and RTL)
// to make the dark path under the previous connection show through.
return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT + (this.RTL ? 0.5 : - 0.5);
return Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;//+ (this.RTL ? 0.5 : - 0.5);
}
}
@@ -418,8 +418,8 @@ Blockly.blockRendering.RenderInfo.prototype.getInRowSpacing_ = function(prev, ne
} else if (next.isNextConnection()) {
// Next connections are shifted slightly to the left (in both LTR and RTL)
// to make the dark path under the previous connection show through.
return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV +
(this.RTL ? 0.5 : - 0.5);
return Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV;//+
//(this.RTL ? 0.5 : - 0.5);
}
}
@@ -462,7 +462,7 @@ Blockly.blockRendering.RenderInfo.prototype.computeBounds_ = function() {
if (widestStatementRowFields) {
this.width =
Math.max(blockWidth,
widestStatementRowFields + Blockly.blockRendering.constants.NOTCH_WIDTH * 2);
widestStatementRowFields + Blockly.blockRendering.constants.NOTCH.width * 2);
} else {
this.width = blockWidth;
}

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

@@ -74,12 +74,6 @@ Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT =
// connection starts.
Blockly.blockRendering.constants.NOTCH_OFFSET_ROUNDED_CORNER_PREV = 7;
// This is the offset from the vertical part of a statement input
// to where to start the notch, which is on the right side in LTR.
Blockly.blockRendering.constants.NOTCH_OFFSET_RIGHT =
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
Blockly.blockRendering.constants.NOTCH_WIDTH;
Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER = 5;
Blockly.blockRendering.constants.STATEMENT_INPUT_PADDING_LEFT = 20;
Blockly.blockRendering.constants.BETWEEN_STATEMENT_PADDING_Y = 4;
@@ -143,16 +137,6 @@ Blockly.blockRendering.constants.START_POINT_HIGHLIGHT =
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET);
/**
* Distance from shape edge to intersect with a curved corner at 45 degrees.
* Applies to highlighting on around the inside of a curve.
* @const
*/
Blockly.blockRendering.constants.DISTANCE_45_INSIDE = (1 - Math.SQRT1_2) *
(Blockly.blockRendering.constants.CORNER_RADIUS -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
/**
* Distance from shape edge to intersect with a curved corner at 45 degrees.
* Applies to highlighting on around the outside of a curve.
@@ -163,96 +147,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 next/previous notch from left to right.
* @const
*/
Blockly.blockRendering.constants.NOTCH_PATH_LEFT = 'l 6,4 3,0 6,-4';
/**
* SVG path for drawing next/previous notch from left to right with
* highlighting.
* @const
*/
Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT =
'h ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ' ' + Blockly.blockRendering.constants.NOTCH_PATH_LEFT;
/**
* SVG path for drawing next/previous notch from right to left.
* @const
*/
Blockly.blockRendering.constants.NOTCH_PATH_RIGHT = 'l -6,4 -3,0 -6,-4';
/**
* SVG path for drawing the top-left corner of a statement input.
* Includes the top notch, a horizontal space, and the rounded inside corner.
* @const
*/
Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER =
Blockly.blockRendering.constants.NOTCH_PATH_RIGHT + ' h -' +
(Blockly.blockRendering.constants.NOTCH_WIDTH -
Blockly.blockRendering.constants.CORNER_RADIUS) +
' a ' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,0 -' +
Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
Blockly.blockRendering.constants.CORNER_RADIUS;
/**
* SVG path for drawing the bottom-left corner of a statement input.
* Includes the rounded inside corner.
* @const
*/
Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER =
Blockly.utils.svgPaths.arc('a', '0 0,0',
Blockly.blockRendering.constants.CORNER_RADIUS,
Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.CORNER_RADIUS,
Blockly.blockRendering.constants.CORNER_RADIUS));
/**
* SVG path for drawing highlight on the top-left corner of a statement
* input in RTL.
* @const
*/
Blockly.blockRendering.constants.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL =
Blockly.utils.svgPaths.arc('a', '0 0,0',
Blockly.blockRendering.constants.CORNER_RADIUS,
Blockly.utils.svgPaths.point(
-Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
Blockly.blockRendering.constants.CORNER_RADIUS -
Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE));
/**
* SVG path for drawing highlight on the bottom-left corner of a statement
* input in RTL.
* @const
*/
Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL =
Blockly.utils.svgPaths.arc('a', '0 0,0',
Blockly.blockRendering.constants.CORNER_RADIUS +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
Blockly.utils.svgPaths.point(
Blockly.blockRendering.constants.CORNER_RADIUS +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
Blockly.blockRendering.constants.CORNER_RADIUS +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
/**
* SVG path for drawing highlight on the bottom-left corner of a statement
* input in LTR.
* @const
*/
Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
Blockly.utils.svgPaths.arc('a', '0 0,0',
Blockly.blockRendering.constants.CORNER_RADIUS +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET,
Blockly.utils.svgPaths.point(
Blockly.blockRendering.constants.CORNER_RADIUS -
Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE,
Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET));
/**
* SVG start point for drawing the top-left corner.
* @const
@@ -260,52 +154,6 @@ Blockly.blockRendering.constants.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
Blockly.blockRendering.constants.TOP_LEFT_CORNER_START =
'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS;
/**
* SVG path for drawing the rounded top-left corner.
* @const
*/
Blockly.blockRendering.constants.TOP_LEFT_CORNER =
'A ' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,1 ' +
Blockly.blockRendering.constants.CORNER_RADIUS + ',0';
Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER = 'a' + Blockly.blockRendering.constants.CORNER_RADIUS + ',' +
Blockly.blockRendering.constants.CORNER_RADIUS + ' 0 0,1 -' +
Blockly.blockRendering.constants.CORNER_RADIUS + ',-' +
Blockly.blockRendering.constants.CORNER_RADIUS;
Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_START =
'M ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ', '; // follow with y pos - distance 45 inside
Blockly.blockRendering.constants.BOTTOM_LEFT_CORNER_HIGHLIGHT_MID =
'A ' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
',' + (Blockly.blockRendering.constants.CORNER_RADIUS - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) +
' 0 0,1 ' + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET + ','; // follow with y pos - corner radius
/**
* SVG start point for drawing the top-left corner's highlight in RTL.
* @const
*/
Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL =
'm ' + Blockly.blockRendering.constants.DISTANCE_45_INSIDE + ',' +
Blockly.blockRendering.constants.DISTANCE_45_INSIDE;
/**
* SVG start point for drawing the top-left corner's highlight in LTR.
* @const
*/
Blockly.blockRendering.constants.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR =
'm 0.5,' + (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5);
/**
* SVG path for drawing the highlight on the rounded top-left corner.
* @const
*/
Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT =
'A ' + (Blockly.blockRendering.constants.CORNER_RADIUS - 0.5) + ',' +
(Blockly.blockRendering.constants.CORNER_RADIUS - 0.5) + ' 0 0,1 ' +
Blockly.blockRendering.constants.CORNER_RADIUS + ',0.5';
/**
* Information about the hat on a start block.
*/
@@ -450,3 +298,172 @@ Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() {
}
};
})();
Blockly.blockRendering.constants.NOTCH = (function() {
var width = Blockly.blockRendering.constants.NOTCH_WIDTH;
var height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
var innerWidth = 3;
var outerWidth = (width - innerWidth) / 2;
function makeMainPath(dir) {
return Blockly.utils.svgPaths.line(
[
Blockly.utils.svgPaths.point(dir * outerWidth, height),
Blockly.utils.svgPaths.point(dir * innerWidth, 0),
Blockly.utils.svgPaths.point(dir * outerWidth, -height)
]);
}
// TODO: Find a relationship between width and path
var pathLeft = makeMainPath(1);
var pathRight = makeMainPath(-1);
var pathLeftHighlight = Blockly.utils.svgPaths.lineOnAxis('h', Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + pathLeft;
return {
width: width,
height: height,
pathLeft: pathLeft,
pathLeftHighlight: pathLeftHighlight,
pathRight: pathRight
};
})();
Blockly.blockRendering.constants.INSIDE_CORNERS = (function() {
var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
var innerTopLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
Blockly.utils.svgPaths.point(-radius, radius));
var innerBottomLeftCorner = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
Blockly.utils.svgPaths.point(radius, radius));
return {
//width: width,
height: radius,
pathTop: innerTopLeftCorner,
pathBottom: innerBottomLeftCorner
};
})();
/**
* Highlight paths for drawing the inside corners of a statement input.
*/
Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS = (function() {
var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
/**
* Distance from shape edge to intersect with a curved corner at 45 degrees.
* Applies to highlighting on around the outside of a curve.
* @const
*/
var distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset;
/**
* Distance from shape edge to intersect with a curved corner at 45 degrees.
* Applies to highlighting on around the inside of a curve.
* @const
*/
var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset;
var pathTopRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius,
Blockly.utils.svgPaths.point(
-distance45outside - offset,
radius - distance45outside));
var pathBottomRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset,
Blockly.utils.svgPaths.point(radius + offset, radius + offset));
var pathBottomLtr = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset,
Blockly.utils.svgPaths.point(
radius - distance45outside,
distance45outside + offset));
return {
// width: width,
// height: height,
pathTop: function(rtl) {
return rtl ? pathTopRtl : '';
},
pathBottom: function(rtl) {
return rtl ? pathBottomRtl : pathBottomLtr;
},
};
})();
Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() {
var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
/**
* SVG path for drawing the rounded top-left corner.
* @const
*/
var topLeft = Blockly.utils.svgPaths.arc('A', '0 0,1', radius,
Blockly.utils.svgPaths.point(radius, 0));
var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
Blockly.utils.svgPaths.point(-radius, -radius));
return {
// width: width,
// height: height,
topLeft: topLeft,
bottomLeft: bottomLeft
};
})();
Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS = (function() {
var radius = Blockly.blockRendering.constants.CORNER_RADIUS;
var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
/**
* Distance from shape edge to intersect with a curved corner at 45 degrees.
* Applies to highlighting on around the inside of a curve.
* @const
*/
var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset;
/**
* SVG start point for drawing the top-left corner's highlight in RTL.
* @const
*/
var topLeftCornerStartRtl =
'm ' + distance45inside + ',' +
distance45inside;
/**
* SVG start point for drawing the top-left corner's highlight in LTR.
* @const
*/
var topLeftCornerStartLtr =
'm 0.5,' + (radius - offset);
/**
* SVG path for drawing the highlight on the rounded top-left corner.
* @const
*/
var topLeftCornerHighlight =
'A ' + (radius - offset) + ',' +
(radius - offset) + ' 0 0,1 ' +
radius + ',0.5';
var bottomLeftCornerStart =
'M ' + distance45inside + ', '; // follow with y pos - distance 45 inside
var bottomLeftCornerMid =
'A ' + (radius - offset) +
',' + (radius - offset) +
' 0 0,1 ' + offset + ','; // follow with y pos - corner radius
return {
topLeft: topLeftCornerHighlight,
topLeftStart: function(rtl) {
return rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr;
},
bottomLeft: function(yPos) {
return bottomLeftCornerStart + (yPos - distance45inside) +
bottomLeftCornerMid + (yPos - radius);
}
};
})();

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

@@ -249,7 +249,7 @@ Blockly.blockRendering.StatementInput = function(input) {
this.height =
this.connectedBlockHeight + Blockly.blockRendering.constants.STATEMENT_BOTTOM_SPACER;
if (this.connectedBlock.nextConnection) {
this.height -= Blockly.blockRendering.constants.NOTCH_HEIGHT;
this.height -= Blockly.blockRendering.constants.NOTCH.height;
}
}
};
@@ -307,8 +307,8 @@ goog.inherits(Blockly.blockRendering.OutputConnection, Blockly.blockRendering.Me
Blockly.blockRendering.PreviousConnection = function() {
Blockly.blockRendering.PreviousConnection.superClass_.constructor.call(this);
this.type = 'previous connection';
this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
this.width = Blockly.blockRendering.constants.NOTCH_WIDTH;
this.height = Blockly.blockRendering.constants.NOTCH.height;
this.width = Blockly.blockRendering.constants.NOTCH.width;
};
goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering.Measurable);
@@ -322,8 +322,8 @@ goog.inherits(Blockly.blockRendering.PreviousConnection, Blockly.blockRendering.
Blockly.blockRendering.NextConnection = function() {
Blockly.blockRendering.NextConnection.superClass_.constructor.call(this);
this.type = 'next connection';
this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
this.width = Blockly.blockRendering.constants.NOTCH_WIDTH;
this.height = Blockly.blockRendering.constants.NOTCH.height;
this.width = Blockly.blockRendering.constants.NOTCH.width;
};
goog.inherits(Blockly.blockRendering.NextConnection, Blockly.blockRendering.Measurable);
@@ -351,7 +351,8 @@ goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable);
Blockly.blockRendering.SquareCorner = function() {
Blockly.blockRendering.SquareCorner.superClass_.constructor.call(this);
this.type = 'square corner';
this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
// TODO: Is this the right height?
this.height = Blockly.blockRendering.constants.NOTCH.height;
this.width = Blockly.blockRendering.constants.NO_PADDING;
};
@@ -369,7 +370,8 @@ Blockly.blockRendering.RoundCorner = function() {
this.width = Blockly.blockRendering.constants.CORNER_RADIUS;
// The rounded corner extends into the next row by 4 so we only take the
// height that is aligned with this row.
this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
// TODO: Investigate.
this.height = Blockly.blockRendering.constants.NOTCH.height;
};
goog.inherits(Blockly.blockRendering.RoundCorner, Blockly.blockRendering.Measurable);
@@ -476,6 +478,14 @@ Blockly.blockRendering.TopRow = function(block) {
};
goog.inherits(Blockly.blockRendering.TopRow, Blockly.blockRendering.Row);
Blockly.blockRendering.TopRow.prototype.getPreviousConnection = function() {
if (this.hasPreviousConnection) {
return this.elements[2];
}
return null;
};
Blockly.blockRendering.BottomRow = function(block) {
Blockly.blockRendering.BottomRow.superClass_.constructor.call(this);
this.type = 'bottom row';
@@ -487,14 +497,20 @@ Blockly.blockRendering.BottomRow = function(block) {
block.inputList[block.inputList.length - 1].type == Blockly.NEXT_STATEMENT;
this.hasFixedWidth = followsStatement && block.getInputsInline();
// This is the minimum height for the row. If one of it's elements has a greater
// This is the minimum height for the row. If one of its elements has a greater
// height it will be overwritten in the compute pass.
if (followsStatement) {
this.height = Blockly.blockRendering.constants.LARGE_PADDING;
} else {
this.height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
this.height = Blockly.blockRendering.constants.NOTCH.height;
}
};
goog.inherits(Blockly.blockRendering.BottomRow,
Blockly.blockRendering.Row);
Blockly.blockRendering.BottomRow.prototype.getNextConnection = function() {
if (this.hasNextConnection) {
return this.elements[2];
}
return null;
};