From d5bc0eecc4dea7f237d5e18e37bf4799333b34bf Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 24 Jul 2019 14:58:26 -0700 Subject: [PATCH 1/3] Move start hat information into a single object --- .../block_render_draw.js | 2 +- .../block_render_draw_highlight.js | 5 +- .../block_rendering_constants.js | 77 +++++++++++-------- .../block_rendering_rewrite/measurables.js | 2 +- 4 files changed, 48 insertions(+), 38 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index da58caae8..d036ef399 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -127,7 +127,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { } else if (elem.type === 'previous connection') { this.steps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT); } else if (elem.type === 'hat') { - this.steps_.push(Blockly.blockRendering.constants.START_HAT_PATH); + this.steps_.push(Blockly.blockRendering.constants.START_HAT.path); } else if (elem.isSpacer()) { this.steps_.push('h', elem.width); } diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js index 95d4f0615..d1ba53baf 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -66,9 +66,8 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { } else if (elem.type === 'previous connection') { this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH_PATH_LEFT_HIGHLIGHT); } else if (elem.type === 'hat') { - this.highlightSteps_.push(this.info_.RTL ? - Blockly.BlockSvg.START_HAT_HIGHLIGHT_RTL : - Blockly.BlockSvg.START_HAT_HIGHLIGHT_LTR); + this.highlightSteps_.push( + Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL)); } else if (elem.isSpacer()) { this.highlightSteps_.push('h', elem.width - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); } diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 9b827ac22..244ee4af5 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -93,12 +93,19 @@ Blockly.blockRendering.constants.MAX_BOTTOM_WIDTH = 66.5; * @const */ Blockly.blockRendering.constants.CORNER_RADIUS = 8; + /** * Height of the top hat. * @const + * @private */ Blockly.blockRendering.constants.START_HAT_HEIGHT = 15; +/** + * Width of the top hat. + * @const + * @private + */ Blockly.blockRendering.constants.START_HAT_WIDTH = 100; Blockly.blockRendering.constants.SPACER_DEFAULT_HEIGHT = 15; @@ -182,17 +189,6 @@ Blockly.blockRendering.constants.TAB_PATH_UP = 'c 0,-10 -' + Blockly.blockRende ',8 -' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5 s ' + Blockly.blockRendering.constants.TAB_WIDTH + ',2.5 ' + Blockly.blockRendering.constants.TAB_WIDTH + ',-7.5'; -/** - * Path of the top hat's curve. - * @const - */ -Blockly.blockRendering.constants.START_HAT_PATH = - Blockly.utils.svgPaths.curve('c', - [ - Blockly.utils.svgPaths.point(30, -Blockly.blockRendering.constants.START_HAT_HEIGHT), - Blockly.utils.svgPaths.point(70, -Blockly.blockRendering.constants.START_HAT_HEIGHT), - Blockly.utils.svgPaths.point(Blockly.blockRendering.constants.START_HAT_WIDTH, 0) - ]); /** * SVG path for drawing next/previous notch from left to right. * @const @@ -350,28 +346,43 @@ Blockly.blockRendering.constants.TOP_LEFT_CORNER_HIGHLIGHT = Blockly.blockRendering.constants.CORNER_RADIUS + ',0.5'; /** - * Path of the top hat's curve's highlight in LTR. - * @const + * Information about the hat on a start block. */ -Blockly.blockRendering.constants.START_HAT_HIGHLIGHT_LTR = - Blockly.utils.svgPaths.curve('c', - [ - Blockly.utils.svgPaths.point(17.8, -9.2), - Blockly.utils.svgPaths.point(45.3, -14.9), - Blockly.utils.svgPaths.point(75, -8.7) - ]) + - Blockly.utils.svgPaths.moveTo(100.5, 0.5); +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 highlightRtlPath = + Blockly.utils.svgPaths.moveBy(25, -8.7) + + Blockly.utils.svgPaths.curve('c', + [ + Blockly.utils.svgPaths.point(29.7, -6.2), + Blockly.utils.svgPaths.point(57.2, -0.5), + Blockly.utils.svgPaths.point(75, 8.7) + ]); -/** - * Path of the top hat's curve's highlight in RTL. - * @const - */ -Blockly.blockRendering.constants.START_HAT_HIGHLIGHT_RTL = - Blockly.utils.svgPaths.moveBy(25, -8.7) + - Blockly.utils.svgPaths.curve('c', - [ - Blockly.utils.svgPaths.point(29.7, -6.2), - Blockly.utils.svgPaths.point(57.2, -0.5), - Blockly.utils.svgPaths.point(75, 8.7) - ]); + var highlightLtrPath = + Blockly.utils.svgPaths.curve('c', + [ + Blockly.utils.svgPaths.point(17.8, -9.2), + Blockly.utils.svgPaths.point(45.3, -14.9), + Blockly.utils.svgPaths.point(75, -8.7) + ]) + + Blockly.utils.svgPaths.moveTo(100.5, 0.5); + var mainPath = + Blockly.utils.svgPaths.curve('c', + [ + Blockly.utils.svgPaths.point(30, -height), + Blockly.utils.svgPaths.point(70, -height), + Blockly.utils.svgPaths.point(width, 0) + ]); + return { + height: height, + width: width, + path: mainPath, + highlight: function(rtl) { + return rtl ? highlightRtlPath : highlightLtrPath; + } + }; +})(); diff --git a/core/renderers/block_rendering_rewrite/measurables.js b/core/renderers/block_rendering_rewrite/measurables.js index c3953209c..514f087ab 100644 --- a/core/renderers/block_rendering_rewrite/measurables.js +++ b/core/renderers/block_rendering_rewrite/measurables.js @@ -314,7 +314,7 @@ Blockly.blockRendering.Hat = function() { Blockly.blockRendering.Hat.superClass_.constructor.call(this); this.type = 'hat'; this.height = Blockly.blockRendering.constants.NO_PADDING; - this.width = Blockly.blockRendering.constants.START_HAT_WIDTH; + this.width = Blockly.blockRendering.constants.START_HAT.width; }; goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable); From f49ab0c4a7d435a440ccfa1bd6fcc88de505ce51 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Wed, 24 Jul 2019 16:26:20 -0700 Subject: [PATCH 2/3] Create PUZZLE_TAB and PUZZLE_TAB_HIGHLIGHT objects --- .../block_render_draw.js | 19 ++- .../block_render_draw_highlight.js | 38 ++--- .../block_rendering_constants.js | 155 +++++++++++++----- 3 files changed, 140 insertions(+), 72 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index d036ef399..92a3942e3 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -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; diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js index d1ba53baf..302ffa677 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -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'); } }; diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 244ee4af5..cd3698db2 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -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; + } + }; +})(); From b9f6c27b32c6575f6ec255538f32b924d00b44d6 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Thu, 25 Jul 2019 11:18:50 -0700 Subject: [PATCH 3/3] More cleanup --- .../block_render_draw_highlight.js | 41 ++++++----- .../block_rendering_constants.js | 72 ++++++++----------- 2 files changed, 50 insertions(+), 63 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js index 302ffa677..b4b61d2f7 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -77,8 +77,6 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { }; 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.HIGHLIGHT_OFFSET; var belowTabHeight = row.height - @@ -92,10 +90,9 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) { // 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.PUZZLE_TAB.height - 0.7)); - this.highlightSteps_.push('l', (Blockly.blockRendering.constants.PUZZLE_TAB.width * 0.46) + ',-2.1'); + this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo(row.width, row.yPos)); + this.highlightSteps_.push( + Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL)); } }; @@ -174,28 +171,30 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() { }; Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) { - var width = input.width; + var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + + var inputWidth = input.width; var height = input.height; var x = input.xPos; var yPos = input.centerline - height / 2; - var bottomHighlightWidth = width - Blockly.blockRendering.constants.PUZZLE_TAB.width; + var bottomHighlightWidth = inputWidth - 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.HIGHLIGHT_OFFSET; + offset; var belowTabHeight = height - (Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP + Blockly.blockRendering.constants.PUZZLE_TAB.height) + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + offset; var startX = x + Blockly.blockRendering.constants.PUZZLE_TAB.width - - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; - var startY = yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + offset; + var startY = yPos + offset; // Highlight right edge, around back of tab, and bottom. this.highlightInlineSteps_.push('M', startX + ',' + startY); @@ -209,18 +208,18 @@ Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) { // Bottom (horizontal). this.highlightInlineSteps_.push('h', bottomHighlightWidth); } else { + // Go to top right corner. + this.highlightInlineSteps_.push( + Blockly.utils.svgPaths.moveTo(x + inputWidth + offset, yPos + offset)); // Highlight right edge, bottom. - this.highlightInlineSteps_.push('M', - (x + width + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + ',' + - (yPos + Blockly.blockRendering.constants.HIGHLIGHT_OFFSET)); this.highlightInlineSteps_.push('v', height); this.highlightInlineSteps_.push('h ', -bottomHighlightWidth); + // Go to top of tab. + this.highlightSteps_.push(Blockly.utils.svgPaths.moveTo( + x + Blockly.blockRendering.constants.PUZZLE_TAB.width, + yPos + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP)); // Short highlight glint at bottom of tab. - // Bad: reference to Blockly.BlockSvg - this.highlightInlineSteps_.push('M', - (x + 2.9) + ',' + (yPos + Blockly.BlockSvg.INLINE_PADDING_Y + - Blockly.blockRendering.constants.PUZZLE_TAB.height - 0.7)); - this.highlightInlineSteps_.push('l', - (Blockly.blockRendering.constants.PUZZLE_TAB.width * 0.46) + ',-2.1'); + this.highlightSteps_.push( + Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT.pathDown(this.info_.RTL)); } }; diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index cd3698db2..05e2bd1bb 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -347,12 +347,8 @@ 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; + var width = Blockly.blockRendering.constants.TAB_WIDTH; + var height = Blockly.blockRendering.constants.TAB_HEIGHT; // 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' @@ -363,47 +359,44 @@ Blockly.blockRendering.constants.PUZZLE_TAB = (function() { 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 overlap = 2.5; + var halfHeight = height / 2; + var control1Y = halfHeight + overlap; + var control2Y = halfHeight + 0.5; 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); + var endPoint1 = Blockly.utils.svgPaths.point(-width, forward * halfHeight); + var endPoint2 = Blockly.utils.svgPaths.point(width, forward * halfHeight); return Blockly.utils.svgPaths.curve('c', [ Blockly.utils.svgPaths.point(0, forward * control1Y), - Blockly.utils.svgPaths.point(-tabWidth, back * control2Y), + Blockly.utils.svgPaths.point(-width, back * control2Y), endPoint1 ]) + Blockly.utils.svgPaths.curve('s', [ - Blockly.utils.svgPaths.point(tabWidth, back * control3Y), + Blockly.utils.svgPaths.point(width, back * control3Y), endPoint2 ]); } + // c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 var pathUp = makeMainPath(true); + // c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 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, + width: width, + height: height, 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; + var width = Blockly.blockRendering.constants.TAB_WIDTH; + var height = Blockly.blockRendering.constants.TAB_HEIGHT; // This is how much of the vertical block edge is actually drawn by the puzzle // tab. @@ -412,45 +405,40 @@ Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() { // 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); + Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) + + Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1); var highlightRtlDown = Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) + - Blockly.utils.svgPaths.moveBy(-tabWidth * 0.97, 2.5) + + Blockly.utils.svgPaths.moveBy(-width * 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.point(-width * 0.05, 10), + Blockly.utils.svgPaths.point(width * 0.3, 9.5) ]) + - Blockly.utils.svgPaths.moveBy(tabWidth * 0.67, -1.9) + + Blockly.utils.svgPaths.moveBy(width * 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) + + height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) + + Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) + Blockly.utils.svgPaths.curve('q', [ - Blockly.utils.svgPaths.point(tabWidth * -0.19, -5.5), + Blockly.utils.svgPaths.point(width * -0.19, -5.5), Blockly.utils.svgPaths.point(0,-11) ]) + - Blockly.utils.svgPaths.moveBy(tabWidth * 0.92, 1) + + Blockly.utils.svgPaths.moveBy(width * 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. + Blockly.utils.svgPaths.moveBy(-5, height - 0.7) + + Blockly.utils.svgPaths.lineTo(width * 0.46, -2.1); 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? + width: width, + height: height, pathUp: function(rtl) { return rtl ? highlightRtlUp : highlightLtrUp; },