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

Create PUZZLE_TAB and PUZZLE_TAB_HIGHLIGHT objects

Browse Source
This commit is contained in:
Rachel Fenichel
2019-07-24 16:26:20 -07:00
parent d5bc0eecc4
commit f49ab0c4a7
3 changed files with 140 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;

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

@@ -80,24 +80,22 @@ 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');
(row.yPos + Blockly.blockRendering.constants.PUZZLE_TAB.height - 0.7));
this.highlightSteps_.push('l', (Blockly.blockRendering.constants.PUZZLE_TAB.width * 0.46) + ',-2.1');
}
};
@@ -162,11 +160,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) {
@@ -183,24 +178,22 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
var height = input.height;
var x = input.xPos;
var yPos = input.centerline - height / 2;
var bottomHighlightWidth = width - Blockly.blockRendering.constants.TAB_WIDTH;
var bottomHighlightWidth = width - 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.TAB_OFFSET_FROM_TOP -
Blockly.blockRendering.constants.HIGHLIGHT_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.PUZZLE_TAB.height) +
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var startX = x + Blockly.blockRendering.constants.TAB_WIDTH -
var startX = x + Blockly.blockRendering.constants.PUZZLE_TAB.width -
Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
var startY = yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET;
@@ -209,7 +202,8 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
// 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).
@@ -225,8 +219,8 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
// 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));
Blockly.blockRendering.constants.PUZZLE_TAB.height - 0.7));
this.highlightInlineSteps_.push('l',
(Blockly.blockRendering.constants.TAB_WIDTH * 0.46) + ',-2.1');
(Blockly.blockRendering.constants.PUZZLE_TAB.width * 0.46) + ',-2.1');
}
};

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

@@ -161,34 +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';
/**
* SVG path for drawing next/previous notch from left to right.
* @const
@@ -279,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
@@ -310,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
@@ -386,3 +345,117 @@ Blockly.blockRendering.constants.START_HAT = (function() {
}
};
})();
Blockly.blockRendering.constants.PUZZLE_TAB = (function() {
var tabWidth = Blockly.blockRendering.constants.TAB_WIDTH;
var tabHeight = 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 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 = verticalOverlap;
var halfHeight = tabHeight / 2;
var control1Y = halfHeight + overlap; // 10
var control2Y = halfHeight + 0.5; // 8
var control3Y = overlap; //2.5
//var startPoint = Blockly.utils.svgPaths.point(0, 0);
// Center point of the line that is the tab.
var endPoint1 = Blockly.utils.svgPaths.point(-tabWidth, forward * halfHeight);
var endPoint2 = Blockly.utils.svgPaths.point(tabWidth, forward * halfHeight);
return Blockly.utils.svgPaths.curve('c',
[
Blockly.utils.svgPaths.point(0, forward * control1Y),
Blockly.utils.svgPaths.point(-tabWidth, back * control2Y),
endPoint1
]) +
Blockly.utils.svgPaths.curve('s',
[
Blockly.utils.svgPaths.point(tabWidth, back * control3Y),
endPoint2
]);
}
var pathUp = makeMainPath(true);
var pathDown = makeMainPath(false);
// TODO: Figure out what other tab-related constants can come into here.
// Some candidates: tab height, offset from top, vertical overlap.
return {
// TODO: height
width: tabWidth,
height: tabHeight,
pathDown: pathDown,
pathUp: pathUp
};
})();
Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() {
var tabWidth = Blockly.blockRendering.constants.TAB_WIDTH;
var tabHeight = 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(tabWidth * -0.25, 8.4) +
Blockly.utils.svgPaths.lineTo(tabWidth * -0.45, -2.1);
var highlightRtlDown =
Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) +
Blockly.utils.svgPaths.moveBy(-tabWidth * 0.97, 2.5) +
Blockly.utils.svgPaths.curve('q',
[
Blockly.utils.svgPaths.point(-tabWidth * 0.05, 10),
Blockly.utils.svgPaths.point(tabWidth * 0.3, 9.5)
]) +
Blockly.utils.svgPaths.moveBy(tabWidth * 0.67, -1.9) +
Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap);
var highlightLtrUp =
Blockly.utils.svgPaths.lineOnAxis('V',
tabHeight + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) +
Blockly.utils.svgPaths.moveBy(tabWidth * -0.92, -0.5) +
Blockly.utils.svgPaths.curve('q',
[
Blockly.utils.svgPaths.point(tabWidth * -0.19, -5.5),
Blockly.utils.svgPaths.point(0,-11)
]) +
Blockly.utils.svgPaths.moveBy(tabWidth * 0.92, 1) +
Blockly.utils.svgPaths.lineOnAxis('V', 0.5) +
Blockly.utils.svgPaths.lineOnAxis('H', 1);
var highlightLtrDown =
Blockly.utils.svgPaths.moveBy(-5, tabHeight - 0.7) +
Blockly.utils.svgPaths.lineTo(tabWidth * 0.46, -2.1);
// TODO: Figure out what other tab-related constants can come into here.
// Some candidates: tab height, offset from top, vertical overlap.
return {
// TODO: height
// width: tabWidth,
// height: tabHeight,
// TODO: does this actually have a height, or should all references go to
// the puzzle_tab object instead?
pathUp: function(rtl) {
return rtl ? highlightRtlUp : highlightLtrUp;
},
pathDown: function(rtl) {
return rtl ? highlightRtlDown : highlightLtrDown;
}
};
})();