Rendering: Fix setting the path in RTL (#3047)

* Fix setting the RTL path.
This commit is contained in:
Sam El-Husseini
2019-09-19 14:44:44 -07:00
committed by GitHub
parent 8003426316
commit 57c8e3dded
4 changed files with 27 additions and 13 deletions

View File

@@ -77,6 +77,9 @@ Blockly.blockRendering.Drawer.prototype.draw = function() {
this.drawInternals_();
this.block_.pathObject.setPaths(this.outlinePath_ + '\n' + this.inlinePath_);
if (this.info_.RTL) {
this.block_.pathObject.flipRTL();
}
if (Blockly.blockRendering.useDebugger) {
this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
}

View File

@@ -30,6 +30,7 @@ goog.provide('Blockly.blockRendering.PathObject');
goog.require('Blockly.utils.dom');
/**
* An interface for a block's path object.
* @param {!SVGElement} _root The root SVG element.
@@ -86,11 +87,15 @@ Blockly.blockRendering.PathObject = function(root) {
*/
Blockly.blockRendering.PathObject.prototype.setPaths = function(pathString) {
this.svgPath.setAttribute('d', pathString);
if (this.RTL) {
// Mirror the block's path.
this.svgPath.setAttribute('transform', 'scale(-1 1)');
}
this.svgPathLight.style.display = 'none';
this.svgPathDark.style.display = 'none';
};
/**
* Flip the SVG paths in RTL.
* @package
*/
Blockly.blockRendering.PathObject.prototype.flipRTL = function() {
// Mirror the block's path.
this.svgPath.setAttribute('transform', 'scale(-1 1)');
};

View File

@@ -62,7 +62,9 @@ Blockly.geras.Drawer.prototype.draw = function() {
this.block_.pathObject.setPaths(this.outlinePath_ + '\n' + this.inlinePath_,
this.highlighter_.getPath());
if (this.info_.RTL) {
this.block_.pathObject.flipRTL();
}
if (Blockly.blockRendering.useDebugger) {
this.block_.renderingDebugger.drawDebug(this.block_, this.info_);
}

View File

@@ -62,7 +62,6 @@ Blockly.geras.PathObject = function(root) {
this.svgPath = Blockly.utils.dom.createSvgElement('path',
{'class': 'blocklyPath'}, this.svgRoot);
/**
* The light path of the block.
* @type {SVGElement}
@@ -82,10 +81,15 @@ Blockly.geras.PathObject.prototype.setPaths = function(mainPath, highlightPath)
this.svgPath.setAttribute('d', mainPath);
this.svgPathDark.setAttribute('d', mainPath);
this.svgPathLight.setAttribute('d', highlightPath);
if (this.RTL) {
// Mirror the block's path.
this.svgPath.setAttribute('transform', 'scale(-1 1)');
this.svgPathLight.setAttribute('transform', 'scale(-1 1)');
this.svgPathDark.setAttribute('transform', 'translate(1,1) scale(-1 1)');
}
};
/**
* Flip the SVG paths in RTL.
* @package
*/
Blockly.geras.PathObject.prototype.flipRTL = function() {
// Mirror the block's path.
this.svgPath.setAttribute('transform', 'scale(-1 1)');
this.svgPathLight.setAttribute('transform', 'scale(-1 1)');
this.svgPathDark.setAttribute('transform', 'translate(1,1) scale(-1 1)');
};