Fix connection highlight rendering

This commit is contained in:
Rachel Fenichel
2019-07-31 11:39:26 -07:00
parent bcdd691796
commit 37250f4ce4
3 changed files with 28 additions and 21 deletions

View File

@@ -651,8 +651,8 @@ Blockly.BlockSvg.prototype.renderDrawTop_ = function(pathObject, rightEdge) {
steps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT);
highlightSteps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT_HIGHLIGHT);
var connectionX = (this.RTL ?
-Blockly.BlockSvg.NOTCH_WIDTH : Blockly.BlockSvg.NOTCH_WIDTH);
var notchOffsetStart = 15;
var connectionX = (this.RTL ? -notchOffsetStart : notchOffsetStart);
this.previousConnection.setOffsetInBlock(connectionX, 0);
}
steps.push('H', rightEdge);
@@ -733,13 +733,9 @@ Blockly.BlockSvg.prototype.renderDrawBottom_ = function(pathObject, cursorY) {
if (this.nextConnection) {
steps.push('H', (Blockly.BlockSvg.NOTCH_WIDTH + (this.RTL ? 0.5 : - 0.5)) +
' ' + Blockly.BlockSvg.NOTCH_PATH_RIGHT);
// Create next block connection.
var connectionX;
if (this.RTL) {
connectionX = -Blockly.BlockSvg.NOTCH_WIDTH;
} else {
connectionX = Blockly.BlockSvg.NOTCH_WIDTH;
}
var notchOffsetStart = 15;
var connectionX = (this.RTL ? -notchOffsetStart : notchOffsetStart);
this.nextConnection.setOffsetInBlock(connectionX, cursorY + 1);
this.height += 4; // Height of tab.
}
@@ -777,7 +773,7 @@ Blockly.BlockSvg.prototype.renderDrawLeft_ = function(pathObject) {
var highlightSteps = pathObject.highlightSteps;
if (this.outputConnection) {
// Create output connection.
this.outputConnection.setOffsetInBlock(0, 0);
this.outputConnection.setOffsetInBlock(0, 5);
steps.push('V', Blockly.BlockSvg.TAB_HEIGHT);
steps.push('c 0,-10 -' + Blockly.BlockSvg.TAB_WIDTH + ',8 -' +
Blockly.BlockSvg.TAB_WIDTH + ',-7.5 s ' + Blockly.BlockSvg.TAB_WIDTH +
@@ -915,7 +911,7 @@ Blockly.BlockSvg.prototype.renderInlineRow_ = function(pathObject, row, cursor,
input.renderWidth - 1;
}
connectionPos.y = cursor.y + Blockly.BlockSvg.INLINE_PADDING_Y + 1;
input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y);
input.connection.setOffsetInBlock(connectionPos.x, connectionPos.y + 5);
}
}
@@ -977,7 +973,7 @@ Blockly.BlockSvg.prototype.renderExternalValueInput_ = function(pathObject, row,
}
// Create external input connection.
connectionPos.x = this.RTL ? -rightEdge - 1 : rightEdge + 1;
input.connection.setOffsetInBlock(connectionPos.x, cursor.y);
input.connection.setOffsetInBlock(connectionPos.x, cursor.y + 5);
if (input.connection.isConnected()) {
this.width = Math.max(this.width, rightEdge +
input.connection.targetBlock().getHeightWidth().width -
@@ -1093,7 +1089,8 @@ Blockly.BlockSvg.prototype.renderStatementInput_ = function(pathObject, row,
highlightSteps.push('H', inputRows.rightEdge - 0.5);
}
// Create statement connection.
connectionPos.x = this.RTL ? -cursor.x : cursor.x + 1;
var x = inputRows.statementEdge + 15; // Notch offset from left.
connectionPos.x = this.RTL ? -x : x + 1;
input.connection.setOffsetInBlock(connectionPos.x, cursor.y + 1);
if (input.connection.isConnected()) {

View File

@@ -212,9 +212,19 @@ Blockly.RenderedConnection.prototype.closest = function(maxLimit, dxy) {
Blockly.RenderedConnection.prototype.highlight = function() {
var steps;
if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
steps = 'm 0,0 ' + Blockly.BlockSvg.TAB_PATH_DOWN + ' v 5';
// Vertical line, puzzle tab, vertical line.
var yLen = 5;
steps = Blockly.utils.svgPaths.moveBy(0, -yLen) +
Blockly.utils.svgPaths.lineOnAxis('v', yLen) +
Blockly.blockRendering.constants.PUZZLE_TAB.pathDown +
Blockly.utils.svgPaths.lineOnAxis('v', yLen);
} else {
steps = 'm -20,0 h 5 ' + Blockly.BlockSvg.NOTCH_PATH_LEFT + ' h 5';
var xLen = 5;
// Horizontal line, notch, horizontal line.
steps = Blockly.utils.svgPaths.moveBy(-xLen, 0) +
Blockly.utils.svgPaths.lineOnAxis('h', xLen) +
Blockly.blockRendering.constants.NOTCH.pathLeft +
Blockly.utils.svgPaths.lineOnAxis('h', xLen);
}
var xy = this.sourceBlock_.getRelativeToSurfaceXY();
var x = this.x_ - xy.x;

View File

@@ -390,11 +390,11 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func
var input = row.getLastInput();
if (input.connection) {
var connX = row.statementEdge +
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
Blockly.blockRendering.constants.DARK_PATH_OFFSET;
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
if (this.info_.RTL) {
connX *= -1;
}
connX += 0.5;
input.connection.setOffsetInBlock(connX,
row.yPos + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
}
@@ -424,9 +424,8 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
*/
Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
if (this.info_.topRow.hasPreviousConnection) {
var connX =
this.info_.RTL ? -Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT :
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT;
var connX = (this.info_.RTL ? -x : x);
this.info_.topRow.connection.setOffsetInBlock(connX, 0);
}
};
@@ -440,7 +439,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
if (bottomRow.hasNextConnection) {
var connInfo = bottomRow.getNextConnection();
var connX = this.info_.RTL ? -connInfo.xPos + 0.5 : connInfo.xPos + 0.5;
var x = connInfo.xPos;
var connX = (this.info_.RTL ? -x : x) + 0.5;
bottomRow.connection.setOffsetInBlock(
connX, this.info_.height + Blockly.blockRendering.constants.DARK_PATH_OFFSET);
}