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

Using shapeFor for notch and tab paths. (#3572)

Browse Source
This commit is contained in:
Monica Kozbial
2020-01-10 13:31:49 -08:00
committed by GitHub
parent fe555d9021
commit 9b8fa7a177
2 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/rendered_connection.js
View File

@@ -284,21 +284,22 @@ Blockly.RenderedConnection.prototype.closest = function(maxLimit, dxy) {
Blockly.RenderedConnection.prototype.highlight = function() {
var steps;
var sourceBlockSvg = /** @type {!Blockly.BlockSvg} */ (this.sourceBlock_);
var renderingConstants =
sourceBlockSvg.workspace.getRenderer().getConstants();
var renderConstants = sourceBlockSvg.workspace.getRenderer().getConstants();
var shape = renderConstants.shapeFor(this);
if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
// Vertical line, puzzle tab, vertical line.
var yLen = 5;
var yLen = renderConstants.TAB_OFFSET_FROM_TOP;
steps = Blockly.utils.svgPaths.moveBy(0, -yLen) +
Blockly.utils.svgPaths.lineOnAxis('v', yLen) +
renderingConstants.PUZZLE_TAB.pathDown +
shape.pathDown +
Blockly.utils.svgPaths.lineOnAxis('v', yLen);
} else {
var xLen = 5;
var xLen =
renderConstants.NOTCH_OFFSET_LEFT - renderConstants.CORNER_RADIUS;
// Horizontal line, notch, horizontal line.
steps = Blockly.utils.svgPaths.moveBy(-xLen, 0) +
Blockly.utils.svgPaths.lineOnAxis('h', xLen) +
renderingConstants.NOTCH.pathLeft +
shape.pathLeft +
Blockly.utils.svgPaths.lineOnAxis('h', xLen);
}
var xy = this.sourceBlock_.getRelativeToSurfaceXY();

33
core/renderers/common/marker_svg.js
View File

@@ -179,9 +179,11 @@ Blockly.blockRendering.MarkerSvg.prototype.showWithBlockPrevOutput_ = function(b
var markerOffset = this.constants_.CURSOR_BLOCK_PADDING;
if (block.previousConnection) {
this.positionPrevious_(width, markerOffset, markerHeight);
var connectionShape = this.constants_.shapeFor(block.previousConnection);
this.positionPrevious_(width, markerOffset, markerHeight, connectionShape);
} else if (block.outputConnection) {
this.positionOutput_(width, height);
var connectionShape = this.constants_.shapeFor(block.outputConnection);
this.positionOutput_(width, height, connectionShape);
} else {
this.positionBlock_(width, markerOffset, markerHeight);
}
@@ -367,15 +369,19 @@ Blockly.blockRendering.MarkerSvg.prototype.positionLine_ = function(x, y, width)
* Displays a puzzle outline and the top and bottom path.
* @param {number} width The width of the block.
* @param {number} height The height of the block.
* @param {!Object} connectionShape The shape object for the connection.
* @private
*/
Blockly.blockRendering.MarkerSvg.prototype.positionOutput_ = function(width, height) {
Blockly.blockRendering.MarkerSvg.prototype.positionOutput_ = function(
width, height, connectionShape) {
var markerPath = Blockly.utils.svgPaths.moveBy(width, 0) +
Blockly.utils.svgPaths.lineOnAxis('h', -(width - this.constants_.PUZZLE_TAB.width)) +
Blockly.utils.svgPaths.lineOnAxis('v', this.constants_.TAB_OFFSET_FROM_TOP) +
this.constants_.PUZZLE_TAB.pathDown +
Blockly.utils.svgPaths.lineOnAxis('V', height) +
Blockly.utils.svgPaths.lineOnAxis('H', width);
Blockly.utils.svgPaths.lineOnAxis(
'h', -(width - connectionShape.width)) +
Blockly.utils.svgPaths.lineOnAxis(
'v', this.constants_.TAB_OFFSET_FROM_TOP) +
connectionShape.pathDown +
Blockly.utils.svgPaths.lineOnAxis('V', height) +
Blockly.utils.svgPaths.lineOnAxis('H', width);
this.markerBlock_.setAttribute('d', markerPath);
if (this.workspace_.RTL) {
this.flipRtl_(this.markerBlock_);
@@ -390,15 +396,18 @@ Blockly.blockRendering.MarkerSvg.prototype.positionOutput_ = function(width, hei
* @param {number} width The width of the block.
* @param {number} markerOffset The offset of the marker from around the block.
* @param {number} markerHeight The height of the marker.
* @param {!Object} connectionShape The shape object for the connection.
* @private
*/
Blockly.blockRendering.MarkerSvg.prototype.positionPrevious_ = function(
width, markerOffset, markerHeight) {
width, markerOffset, markerHeight, connectionShape) {
var markerPath = Blockly.utils.svgPaths.moveBy(-markerOffset, markerHeight) +
Blockly.utils.svgPaths.lineOnAxis('V', -markerOffset) +
Blockly.utils.svgPaths.lineOnAxis('H', this.constants_.NOTCH_OFFSET_LEFT) +
this.constants_.NOTCH.pathLeft +
Blockly.utils.svgPaths.lineOnAxis('H', width + markerOffset * 2) +
Blockly.utils.svgPaths.lineOnAxis(
'H', this.constants_.NOTCH_OFFSET_LEFT) +
connectionShape.pathLeft +
Blockly.utils.svgPaths.lineOnAxis(
'H', width + markerOffset * 2) +
Blockly.utils.svgPaths.lineOnAxis('V', markerHeight);
this.markerBlock_.setAttribute('d', markerPath);
if (this.workspace_.RTL) {