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

Merge pull request #2817 from rachel-fenichel/baby_steps

Browse Source 
Replace path array with path string
This commit is contained in:
Rachel Fenichel
2019-08-13 15:18:29 -07:00
committed by GitHub
parent 109e32b866 f449c8bb3c
commit 1ef4a1343b
2 changed files with 70 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,9 +43,9 @@ Blockly.blockRendering.Drawer = function(block, info) {
this.block_ = block;
this.info_ = info;
this.topLeft_ = block.getRelativeToSurfaceXY();
this.outlinePath_ = '';
this.inlinePath_ = '';
this.pathObject_ = new Blockly.BlockSvg.PathObject();
this.steps_ = this.pathObject_.steps;
this.inlineSteps_ = this.pathObject_.inlineSteps;
this.highlighter_ = new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_);
};
@@ -63,6 +63,10 @@ Blockly.blockRendering.Drawer.prototype.draw_ = function() {
this.hideHiddenIcons_();
this.drawOutline_();
this.drawInternals_();
this.pathObject_.steps = [this.outlinePath_];
this.pathObject_.inlineSteps = [this.inlinePath_];
this.block_.setPaths_(this.pathObject_);
this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
this.recordSizeOnBlock_();
@@ -132,21 +136,20 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
this.highlighter_.drawRightSideRow(topRow);
}
this.positionPreviousConnection_();
this.steps_.push(
Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY));
this.outlinePath_ += Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY);
for (var i = 0, elem; elem = elements[i]; i++) {
if (elem.type === 'round corner') {
this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft);
this.outlinePath_ += Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft;
} else if (elem.type === 'previous connection') {
this.steps_.push(topRow.notchShape.pathLeft);
this.outlinePath_ += topRow.notchShape.pathLeft;
} else if (elem.type === 'hat') {
this.steps_.push(Blockly.blockRendering.constants.START_HAT.path);
this.outlinePath_ += Blockly.blockRendering.constants.START_HAT.path;
} else if (elem.isSpacer()) {
this.steps_.push('h', elem.width);
this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('h', elem.width);
}
// No branch for a square corner, because it's a no-op.
}
this.steps_.push('v', topRow.height);
this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('v', topRow.height);
};
/**
@@ -158,10 +161,10 @@ Blockly.blockRendering.Drawer.prototype.drawJaggedEdge_ = function(row) {
if (this.highlighter_) {
this.highlighter_.drawJaggedEdge_(row);
}
this.steps_.push(Blockly.blockRendering.constants.JAGGED_TEETH.path);
var remainder =
row.height - Blockly.blockRendering.constants.JAGGED_TEETH.height;
this.steps_.push('v', remainder);
this.outlinePath_ += Blockly.blockRendering.constants.JAGGED_TEETH.path +
Blockly.utils.svgPaths.lineOnAxis('v', remainder);
};
/**
@@ -176,10 +179,12 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
if (this.highlighter_) {
this.highlighter_.drawValueInput(row);
}
this.steps_.push('H', row.xPos + row.width);
this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathDown);
this.steps_.push('v', row.height - input.connectionHeight);
this.positionExternalValueConnection_(row);
this.outlinePath_ +=
Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) +
Blockly.blockRendering.constants.PUZZLE_TAB.pathDown +
Blockly.utils.svgPaths.lineOnAxis('v', row.height - input.connectionHeight);
};
@@ -198,17 +203,17 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT +
Blockly.blockRendering.constants.NOTCH.width;
this.steps_.push('H', x);
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.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', x) +
innerTopLeftCorner +
Blockly.utils.svgPaths.lineOnAxis('v',
row.height - (2 * Blockly.blockRendering.constants.INSIDE_CORNERS.height)) +
Blockly.blockRendering.constants.INSIDE_CORNERS.pathBottom;
this.positionStatementInputConnection_(row);
};
@@ -224,8 +229,9 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
if (this.highlighter_) {
this.highlighter_.drawRightSideRow(row);
}
this.steps_.push('H', row.xPos + row.width);
this.steps_.push('V', row.yPos + row.height);
this.outlinePath_ +=
Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) +
Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height);
};
@@ -241,17 +247,19 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
this.highlighter_.drawBottomRow(bottomRow);
}
this.positionNextConnection_();
this.steps_.push('v', bottomRow.height);
this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('v', bottomRow.height);
for (var i = elems.length - 1; i >= 0; i--) {
var elem = elems[i];
if (elem.type === 'next connection') {
this.steps_.push(bottomRow.notchShape.pathRight);
this.outlinePath_ += bottomRow.notchShape.pathRight;
} else if (elem.type === 'square corner') {
this.steps_.push(Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos));
this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos);
} else if (elem.type === 'round corner') {
this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft);
this.outlinePath_ += Blockly.blockRendering.constants.OUTSIDE_CORNERS.bottomLeft;
} else if (elem.isSpacer()) {
this.steps_.push('h', elem.width * -1);
this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('h', elem.width * -1);
}
}
};
@@ -268,15 +276,16 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
var outputConnection = this.info_.outputConnection;
this.positionOutputConnection_();
if (outputConnection) {
var tabBottom = outputConnection.connectionOffsetY + outputConnection.height;
// Draw a line up to the bottom of the tab.
this.steps_.push('V', tabBottom);
this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp);
this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('V', tabBottom);
this.outlinePath_ += 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.
this.steps_.push('z');
this.outlinePath_ += 'z';
};
/**
@@ -357,14 +366,13 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
var connectionBottom = input.connectionHeight + connectionTop;
var connectionRight = input.xPos + input.connectionWidth;
this.inlineSteps_.push('M', connectionRight + ',' + yPos);
this.inlineSteps_.push('v ', connectionTop);
this.inlineSteps_.push(input.connectionShape.pathDown);
this.inlineSteps_.push('v', height - connectionBottom);
this.inlineSteps_.push('h', width - input.connectionWidth);
this.inlineSteps_.push('v', -height);
this.inlineSteps_.push('z');
this.inlinePath_ += Blockly.utils.svgPaths.moveTo(connectionRight, yPos) +
Blockly.utils.svgPaths.lineOnAxis('v', connectionTop) +
input.connectionShape.pathDown +
Blockly.utils.svgPaths.lineOnAxis('v', height - connectionBottom) +
Blockly.utils.svgPaths.lineOnAxis('h', width - input.connectionWidth) +
Blockly.utils.svgPaths.lineOnAxis('v', -height) +
'z';
this.positionInlineInputConnection_(input);

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

@@ -170,12 +170,10 @@ Blockly.blockRendering.constants.JAGGED_TEETH = (function() {
* Information about the hat on a start block.
*/
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 mainPath =
Blockly.utils.svgPaths.moveBy(0, height) +
Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(30, -height),
@@ -237,6 +235,30 @@ Blockly.blockRendering.constants.PUZZLE_TAB = (function() {
};
})();
Blockly.blockRendering.constants.TRIANGLE = (function() {
var width = 20;
var height = 20;
// 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;
return Blockly.utils.svgPaths.lineTo(-width, forward * height / 2) +
Blockly.utils.svgPaths.lineTo(width, forward * height / 2);
}
var pathUp = makeMainPath(true);
var pathDown = makeMainPath(false);
return {
width: width,
height: height,
pathDown: pathDown,
pathUp: pathUp
};
})();
Blockly.blockRendering.constants.NOTCH = (function() {
var width = Blockly.blockRendering.constants.NOTCH_WIDTH;
var height = Blockly.blockRendering.constants.NOTCH_HEIGHT;
@@ -284,7 +306,6 @@ Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() {
* SVG path for drawing the rounded top-left corner.
* @const
*/
var topLeft =
Blockly.utils.svgPaths.moveBy(0, radius) +
Blockly.utils.svgPaths.arc('a', '0 0,1', radius,