From da391da00580e4b94d683bf759fe67dae1a0a0f9 Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Thu, 8 Aug 2019 11:53:25 -0700 Subject: [PATCH] Improvements for y offsets --- .../block_render_draw.js | 25 +++++---- .../block_render_draw_highlight.js | 25 +++++++-- .../block_render_info.js | 13 ++++- .../block_rendering_constants.js | 14 ++--- .../highlight_constants.js | 55 ++++++++----------- tests/playground.html | 2 +- 6 files changed, 74 insertions(+), 60 deletions(-) diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js index b9f097cc4..28cac3551 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw.js @@ -132,13 +132,16 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() { this.highlighter_.drawRightSideRow(topRow); } this.positionPreviousConnection_(); - + this.steps_.push( + Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY)); for (var i = 0, elem; elem = elements[i]; i++) { if (elem.type === 'square corner') { - this.steps_.push(Blockly.blockRendering.constants.START_POINT); + // Do nothing? + //this.steps_.push( + //Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY)); + //this.steps_.push(Blockly.blockRendering.constants.START_POINT); } else if (elem.type === 'round corner') { - this.steps_.push(Blockly.blockRendering.constants.TOP_LEFT_CORNER_START, - Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft); + this.steps_.push(Blockly.blockRendering.constants.OUTSIDE_CORNERS.topLeft); } else if (elem.type === 'previous connection') { this.steps_.push(Blockly.blockRendering.constants.NOTCH.pathLeft); } else if (elem.type === 'hat') { @@ -269,9 +272,10 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() { var outputConnection = this.info_.outputConnection; this.positionOutputConnection_(); if (outputConnection) { + var tabBottom = this.info_.startY + + outputConnection.connectionOffsetY + outputConnection.height; // Draw a line up to the bottom of the tab. - this.steps_.push('V', - outputConnection.connectionOffsetY + outputConnection.height); + this.steps_.push('V', tabBottom); this.steps_.push(Blockly.blockRendering.constants.PUZZLE_TAB.pathUp); } // Close off the path. This draws a vertical line up to the start of the @@ -440,7 +444,7 @@ Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() if (this.info_.topRow.hasPreviousConnection) { var x = Blockly.blockRendering.constants.NOTCH_OFFSET_LEFT; var connX = (this.info_.RTL ? -x : x); - this.info_.topRow.connection.setOffsetInBlock(connX, 0); + this.info_.topRow.connection.setOffsetInBlock(connX, this.info_.startY); } }; @@ -456,7 +460,8 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { 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); + connX, this.info_.startY + this.info_.height + + Blockly.blockRendering.constants.DARK_PATH_OFFSET); } }; @@ -467,7 +472,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() { */ Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() { if (this.info_.outputConnection) { - this.block_.outputConnection.setOffsetInBlock(0, - this.info_.outputConnection.connectionOffsetY); + this.block_.outputConnection.setOffsetInBlock(this.info_.startX, + this.info_.startY + this.info_.outputConnection.connectionOffsetY); } }; 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 234244450..32b33e0ca 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -72,6 +72,8 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) { }; Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { + this.steps_.push( + Blockly.utils.svgPaths.moveBy(this.info_.startX, this.info_.startY)); for (var i = 0, elem; elem = row.elements[i]; i++) { if (elem.type === 'square corner') { this.steps_.push(Blockly.blockRendering.highlightConstants.START_POINT); @@ -151,8 +153,9 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) { } }; -Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(_row) { - var height = this.info_.height; +Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) { + var height = row.yPos + row.height; + //var height = this.info_.height; // Highlight the vertical edge of the bottom row on the input side. // Highlighting is always from the top left, both in LTR and RTL. @@ -165,22 +168,32 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(_row) { Blockly.utils.svgPaths.moveTo( this.highlightOffset_, height - this.highlightOffset_)); } else if (cornerElem.type === 'round corner') { - this.steps_.push(this.outsideCornerPaths_.bottomLeft(height)); + this.steps_.push(Blockly.utils.svgPaths.moveTo(0, height)); + this.steps_.push(this.outsideCornerPaths_.bottomLeft()); } } }; Blockly.blockRendering.Highlighter.prototype.drawLeft = function() { - if (this.info_.outputConnection) { + var outputConnection = this.info_.outputConnection; + if (outputConnection) { + var tabBottom = this.info_.startY + + outputConnection.connectionOffsetY + outputConnection.height; + // Draw a line up to the bottom of the tab. + if (!this.RTL_) { + this.steps_.push('V', tabBottom); + } else { + this.steps_.push(Blockly.utils.svgPaths.moveTo(this.info_.startX, tabBottom)); + } this.steps_.push( this.puzzleTabPaths_.pathUp(this.RTL_)); } if (!this.RTL_) { if (this.info_.topRow.elements[0].isSquareCorner()) { - this.steps_.push('V', this.highlightOffset_); + this.steps_.push('V', this.info_.startY + this.highlightOffset_); } else { - this.steps_.push('V', this.outsideCornerPaths_.height); + this.steps_.push('V', this.info_.startY + this.outsideCornerPaths_.height); } } }; diff --git a/core/renderers/block_rendering_rewrite/block_render_info.js b/core/renderers/block_rendering_rewrite/block_render_info.js index 9859e2e62..59e0312c4 100644 --- a/core/renderers/block_rendering_rewrite/block_render_info.js +++ b/core/renderers/block_rendering_rewrite/block_render_info.js @@ -118,6 +118,11 @@ Blockly.blockRendering.RenderInfo = function(block) { this.topRow = null; this.bottomRow = null; + // The position of the start point for drawing, relative to the block's + // location. + this.startX = 0; + this.startY = 0; + this.measure_(); }; @@ -690,7 +695,7 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() { // Performance note: this could be combined with the draw pass, if the time // that this takes is excessive. But it shouldn't be, because it only // accesses and sets properties that already exist on the objects. - var yCursor = 0; + var yCursor = this.startY; for (var r = 0; r < this.rows.length; r++) { var row = this.rows[r]; row.yPos = yCursor; @@ -703,7 +708,8 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() { yCursor = Blockly.blockRendering.constants.MIN_BLOCK_HEIGHT; } if (!(row.isSpacer())) { - var xCursor = 0; + // xcursor should start at startX (?) + var xCursor = this.startX; for (var e = 0; e < row.elements.length; e++) { var elem = row.elements[e]; elem.xPos = xCursor; @@ -714,5 +720,6 @@ Blockly.blockRendering.RenderInfo.prototype.finalize_ = function() { } this.blockBottom = yCursor; - this.height = yCursor; + // Don't count the start offset in the recorded height. + this.height = yCursor - this.startY; }; diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index e82ab67c7..690d747dd 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -134,13 +134,6 @@ Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH = 25; Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0); -/** - * SVG start point for drawing the top-left corner. - * @const - */ -Blockly.blockRendering.constants.TOP_LEFT_CORNER_START = - 'm 0,' + Blockly.blockRendering.constants.CORNER_RADIUS; - /** * Height of SVG path for jagged teeth at the end of collapsed blocks. * @const @@ -291,8 +284,11 @@ Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() { * SVG path for drawing the rounded top-left corner. * @const */ - var topLeft = Blockly.utils.svgPaths.arc('A', '0 0,1', radius, - Blockly.utils.svgPaths.point(radius, 0)); + + var topLeft = + Blockly.utils.svgPaths.moveBy(0, radius) + + Blockly.utils.svgPaths.arc('a', '0 0,1', radius, + Blockly.utils.svgPaths.point(radius, -radius)); var bottomLeft = Blockly.utils.svgPaths.arc('a', '0 0,1', radius, Blockly.utils.svgPaths.point(-radius, -radius)); diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js index bd8ac7f32..9e33f13cc 100644 --- a/core/renderers/block_rendering_rewrite/highlight_constants.js +++ b/core/renderers/block_rendering_rewrite/highlight_constants.js @@ -103,39 +103,36 @@ Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() { */ var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset; - /** - * SVG start point for drawing the top-left corner's highlight in RTL. - * @const - */ - var topLeftCornerStartRtl = - Blockly.utils.svgPaths.moveBy(distance45inside, distance45inside); - - /** - * SVG start point for drawing the top-left corner's highlight in LTR. - * @const - */ - var topLeftCornerStartLtr = - Blockly.utils.svgPaths.moveBy(offset, radius - offset); - + var topLeftStartX = distance45inside; + var topLeftStartY = distance45inside; + var topLeftCornerHighlightRtl = + Blockly.utils.svgPaths.moveBy(topLeftStartX, topLeftStartY) + + Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset, + Blockly.utils.svgPaths.point(radius - topLeftStartX, -topLeftStartY + offset)); /** * SVG path for drawing the highlight on the rounded top-left corner. * @const */ - var topLeftCornerHighlight = - Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, - Blockly.utils.svgPaths.point(radius, offset)); + var topLeftCornerHighlightLtr = + Blockly.utils.svgPaths.moveBy(offset, radius) + + Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset, + Blockly.utils.svgPaths.point(radius, -radius + offset)); + + var bottomLeftStartX = distance45inside; + var bottomLeftStartY = - distance45inside; + var bottomLeftPath = Blockly.utils.svgPaths.moveBy( + bottomLeftStartX, bottomLeftStartY) + + Blockly.utils.svgPaths.arc('a', '0 0,1', radius - offset, + Blockly.utils.svgPaths.point(-bottomLeftStartX + offset, + -bottomLeftStartY - radius)); return { height: radius, topLeft: function(rtl) { - var start = rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr; - return start + topLeftCornerHighlight; + return rtl ? topLeftCornerHighlightRtl : topLeftCornerHighlightLtr; }, - bottomLeft: function(yPos) { - return Blockly.utils.svgPaths.moveTo( - distance45inside + offset, yPos - distance45inside) + - Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, - Blockly.utils.svgPaths.point(offset, yPos - radius)); + bottomLeft: function() { + return bottomLeftPath; } }; })(); @@ -150,7 +147,7 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() { var verticalOverlap = 2.5; var highlightRtlUp = - Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) + + Blockly.utils.svgPaths.moveBy(-2, -height + verticalOverlap + 0.9) + Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1); var highlightRtlDown = @@ -165,18 +162,14 @@ Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() { Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap); var highlightLtrUp = - // TODO: Move this 'V' out. - Blockly.utils.svgPaths.lineOnAxis('V', - height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) + + Blockly.utils.svgPaths.lineOnAxis('v', -1.5) + Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) + Blockly.utils.svgPaths.curve('q', [ Blockly.utils.svgPaths.point(width * -0.19, -5.5), Blockly.utils.svgPaths.point(0,-11) ]) + - Blockly.utils.svgPaths.moveBy(width * 0.92, 1) + - Blockly.utils.svgPaths.lineOnAxis('V', 0.5) + - Blockly.utils.svgPaths.lineOnAxis('H', 1); + Blockly.utils.svgPaths.moveBy(width * 0.92, 1); var highlightLtrDown = Blockly.utils.svgPaths.moveBy(-5, height - 0.7) + diff --git a/tests/playground.html b/tests/playground.html index 6e27cc0c7..3115d641b 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -122,7 +122,7 @@ function start() { { controls: true, wheel: true, - startScale: 1.0, + startScale: 2.0, maxScale: 4, minScale: 0.25, scaleSpeed: 1.1