From 23b31c7ea811dd97f4523d5bd3a790502a6608c6 Mon Sep 17 00:00:00 2001 From: alschmiedt Date: Fri, 20 Sep 2019 14:34:18 -0700 Subject: [PATCH] Cursor rtl (#3062) * Fix rtl for cursor svg & small bug fix --- core/keyboard_nav/cursor_svg.js | 77 +++++++++++++++++++++++---------- core/workspace_svg.js | 10 ++--- 2 files changed, 59 insertions(+), 28 deletions(-) diff --git a/core/keyboard_nav/cursor_svg.js b/core/keyboard_nav/cursor_svg.js index efddcfd16..332ed0da2 100644 --- a/core/keyboard_nav/cursor_svg.js +++ b/core/keyboard_nav/cursor_svg.js @@ -228,7 +228,6 @@ Blockly.CursorSvg.prototype.showWithBlockPrevOutput_ = function(block) { this.positionBlock_(width, cursorOffset, cursorHeight); } - this.currentCursorSvg = this.cursorBlock_; this.setParent_(block); this.showCurrent_(); }; @@ -241,10 +240,15 @@ Blockly.CursorSvg.prototype.showWithBlockPrevOutput_ = function(block) { */ Blockly.CursorSvg.prototype.showWithCoordinates_ = function(curNode) { var wsCoordinate = curNode.getWsCoordinate(); - this.currentCursorSvg = this.cursorSvgLine_; + var x = wsCoordinate.x; + var y = wsCoordinate.y; + + if (this.workspace_.RTL) { + x -= Blockly.CursorSvg.CURSOR_WIDTH; + } + + this.positionLine_(x, y, Blockly.CursorSvg.CURSOR_WIDTH); this.setParent_(this.workspace_); - this.positionLine_(wsCoordinate.x, wsCoordinate.y, - Blockly.CursorSvg.CURSOR_WIDTH); this.showCurrent_(); }; @@ -256,12 +260,11 @@ Blockly.CursorSvg.prototype.showWithCoordinates_ = function(curNode) { */ Blockly.CursorSvg.prototype.showWithField_ = function(curNode) { var field = /** @type {Blockly.Field} */ (curNode.getLocation()); - var width = field.borderRect_.width.baseVal.value; - var height = field.borderRect_.height.baseVal.value; + var width = field.getSize().width; + var height = field.getSize().height; - this.currentCursorSvg = this.cursorSvgRect_; - this.setParent_(field); this.positionRect_(0, 0, width, height); + this.setParent_(field); this.showCurrent_(); }; @@ -274,13 +277,10 @@ Blockly.CursorSvg.prototype.showWithField_ = function(curNode) { Blockly.CursorSvg.prototype.showWithInput_ = function(curNode) { var connection = /** @type {Blockly.Connection} */ (curNode.getLocation()); - var path = Blockly.utils.svgPaths.moveTo(0,0) + - this.constants_.PUZZLE_TAB.pathDown; var sourceBlock = /** @type {Blockly.BlockSvg} */ (connection.getSourceBlock()); - this.currentCursorSvg = this.cursorInput_; - this.cursorInput_.setAttribute('d', path); - this.setParent_(sourceBlock); + this.positionInput_(connection); + this.setParent_(sourceBlock); this.showCurrent_(); }; @@ -297,10 +297,11 @@ Blockly.CursorSvg.prototype.showWithNext_ = function(curNode) { var x = 0; var y = connection.getOffsetInBlock().y; var width = targetBlock.getHeightWidth().width; - - this.currentCursorSvg = this.cursorSvgLine_; - this.setParent_(targetBlock); + if (this.workspace_.RTL) { + x = -width; + } this.positionLine_(x, y, width); + this.setParent_(targetBlock); this.showCurrent_(); }; @@ -321,13 +322,17 @@ Blockly.CursorSvg.prototype.showWithStack_ = function(curNode) { var height = heightWidth.height + Blockly.CursorSvg.STACK_PADDING; // Shift the rectangle slightly to upper left so padding is equal on all sides. - var x = -1 * Blockly.CursorSvg.STACK_PADDING / 2; - var y = -1 * Blockly.CursorSvg.STACK_PADDING / 2; + var xPadding = -1 * Blockly.CursorSvg.STACK_PADDING / 2; + var yPadding = -1 * Blockly.CursorSvg.STACK_PADDING / 2; - this.currentCursorSvg = this.cursorSvgRect_; - this.setParent_(block); + var x = xPadding; + var y = yPadding; + if (this.workspace_.RTL) { + x = -(width + xPadding); + } this.positionRect_(x, y, width, height); + this.setParent_(block); this.showCurrent_(); }; @@ -357,6 +362,10 @@ Blockly.CursorSvg.prototype.positionBlock_ = function(width, cursorOffset, curso Blockly.utils.svgPaths.lineOnAxis('H', width + cursorOffset * 2) + Blockly.utils.svgPaths.lineOnAxis('V', cursorHeight); this.cursorBlock_.setAttribute('d', cursorPath); + if (this.workspace_.RTL) { + this.flipRtl_(this.cursorBlock_); + } + this.currentCursorSvg = this.cursorBlock_; }; /** @@ -369,9 +378,13 @@ Blockly.CursorSvg.prototype.positionInput_ = function(connection) { var x = connection.getOffsetInBlock().x; var y = connection.getOffsetInBlock().y; + var path = Blockly.utils.svgPaths.moveTo(0,0) + + this.constants_.PUZZLE_TAB.pathDown; + + this.cursorInput_.setAttribute('d', path); this.cursorInput_.setAttribute('transform', - 'translate(' + x + ',' + y + ')' + - (connection.getSourceBlock().RTL ? ' scale(-1 1)' : '')); + 'translate(' + x + ',' + y + ')' + (this.workspace_.RTL ? ' scale(-1 1)' : '')); + this.currentCursorSvg = this.cursorInput_; }; /** @@ -386,6 +399,7 @@ Blockly.CursorSvg.prototype.positionLine_ = function(x, y, width) { this.cursorSvgLine_.setAttribute('x', x); this.cursorSvgLine_.setAttribute('y', y); this.cursorSvgLine_.setAttribute('width', width); + this.currentCursorSvg = this.cursorSvgLine_; }; /** @@ -403,6 +417,10 @@ Blockly.CursorSvg.prototype.positionOutput_ = function(width, height) { Blockly.utils.svgPaths.lineOnAxis('V', height) + Blockly.utils.svgPaths.lineOnAxis('H', width); this.cursorBlock_.setAttribute('d', cursorPath); + if (this.workspace_.RTL) { + this.flipRtl_(this.cursorBlock_); + } + this.currentCursorSvg = this.cursorBlock_; }; /** @@ -422,7 +440,10 @@ Blockly.CursorSvg.prototype.positionPrevious_ = function(width, cursorOffset, cu Blockly.utils.svgPaths.lineOnAxis('H', width + cursorOffset * 2) + Blockly.utils.svgPaths.lineOnAxis('V', cursorHeight); this.cursorBlock_.setAttribute('d', cursorPath); - this.cursorInput_.setAttribute('transform', ' scale(-1 1)'); + if (this.workspace_.RTL) { + this.flipRtl_(this.cursorBlock_); + } + this.currentCursorSvg = this.cursorBlock_; }; /** @@ -439,6 +460,16 @@ Blockly.CursorSvg.prototype.positionRect_ = function(x, y, width, height) { this.cursorSvgRect_.setAttribute('y', y); this.cursorSvgRect_.setAttribute('width', width); this.cursorSvgRect_.setAttribute('height', height); + this.currentCursorSvg = this.cursorSvgRect_; +}; + +/** + * Flip the SVG paths in RTL. + * @param {!SVGElement} cursor The cursor that we want to flip. + * @private + */ +Blockly.CursorSvg.prototype.flipRtl_ = function(cursor) { + cursor.setAttribute('transform', 'scale(-1 1)'); }; /** diff --git a/core/workspace_svg.js b/core/workspace_svg.js index 87264b456..5e5e3ceb7 100644 --- a/core/workspace_svg.js +++ b/core/workspace_svg.js @@ -468,8 +468,8 @@ Blockly.WorkspaceSvg.prototype.setCursorSvg = function(cursorSvg) { return; } - if (this.svgGroup_) { - this.svgGroup_.appendChild(cursorSvg); + if (this.svgBlockCanvas_) { + this.svgBlockCanvas_.appendChild(cursorSvg); this.cursorSvg_ = cursorSvg; } }; @@ -486,11 +486,11 @@ Blockly.WorkspaceSvg.prototype.setMarkerSvg = function(markerSvg) { return; } - if (this.svgGroup_) { + if (this.svgBlockCanvas_) { if (this.cursorSvg_) { - this.svgGroup_.insertBefore(markerSvg, this.cursorSvg_); + this.svgBlockCanvas_.insertBefore(markerSvg, this.cursorSvg_); } else { - this.svgGroup_.appendChild(markerSvg); + this.svgBlockCanvas_.appendChild(markerSvg); } this.markerSvg_ = markerSvg; }