Fix RTL block comment positioning and RTL workspace comment rendering

core/bubble.js

@@ -451,7 +451,7 @@ Blockly.Bubble.prototype.layoutBubble_ = function() {
 Blockly.Bubble.prototype.positionBubble_ = function() {
   var left = this.anchorXY_.x;
   if (this.workspace_.RTL) {
-    left -= this.relativeLeft_ + this.width_;
+    left -= this.relativeLeft_ ;
   } else {
     left += this.relativeLeft_;
   }
@@ -647,7 +647,7 @@ Blockly.Bubble.prototype.moveDuringDrag = function(dragSurface, newLoc) {
  */
 Blockly.Bubble.prototype.getRelativeToSurfaceXY = function() {
   return new goog.math.Coordinate(
-      this.anchorXY_.x + this.relativeLeft_,
+      this.workspace_.RTL ? this.anchorXY_.x - this.relativeLeft_ : this.anchorXY_.x + this.relativeLeft_,
       this.anchorXY_.y + this.relativeTop_);
 };
 

core/scratch_block_comment.js

@@ -298,7 +298,7 @@ Blockly.ScratchBlockComment.prototype.autoPosition_ = function() {
   if (this.isMinimized_) {
     var minimizedOffset = 4 * Blockly.BlockSvg.GRID_UNIT;
     this.x_ = this.block_.RTL ?
-        this.iconXY_.x - minimizedOffset :
+        this.iconXY_.x - this.getBubbleSize().width - minimizedOffset :
         this.iconXY_.x + minimizedOffset;
     this.y_ = this.iconXY_.y - (Blockly.ScratchBubble.TOP_BAR_HEIGHT / 2);
   } else {
@@ -546,7 +546,7 @@ Blockly.ScratchBlockComment.prototype.getHeightWidth = function() {
  */
 Blockly.ScratchBlockComment.prototype.getBoundingRectangle = function() {
   var commentXY = this.getXY();
-  var commentBounds = this.getHeightWidth();
+  var commentBounds = this.getBubbleSize();
   var topLeft;
   var bottomRight;
   if (this.workspace.RTL) {
@@ -593,7 +593,8 @@ Blockly.ScratchBlockComment.prototype.toXmlWithXY = function() {
   var element = goog.dom.createDom('comment');
   element.setAttribute('id', this.id);
   element.textContent = this.text_;
-  element.setAttribute('x', Math.round(this.x_));
+  element.setAttribute('x', Math.round(
+      this.workspace.RTL ? this.workspace.getWidth() - this.x_ : this.x_));
   element.setAttribute('y', Math.round(this.y_));
   element.setAttribute('h', this.height_);
   element.setAttribute('w', this.width_);

core/scratch_bubble.js

@@ -590,6 +590,7 @@ Blockly.ScratchBubble.prototype.renderArrow_ = function() {
     var run = relAnchorX - relBubbleX;
     if (this.workspace_.RTL) {
       run *= -1;
+      run -= this.width_;
     }
 
     var baseX1 = relBubbleX;
@@ -638,8 +639,12 @@ Blockly.ScratchBubble.prototype.moveDuringDrag = function(dragSurface, newLoc) {
  * @private
  */
 Blockly.ScratchBubble.prototype.updatePosition_ = function(x, y) {
+  // Relative left is the distance *and* direction to get from the comment
+  // anchor position on the block to the starting edge of the comment (e.g.
+  // the left edge of the comment in LTR and the right edge of the comment in RTL)
   if (this.workspace_.RTL) {
-    this.relativeLeft_ = this.anchorXY_.x - x - this.width_;
+    // we want relativeLeft_ to actually be the distance from the anchor point to the *right* edge of the comment in RTL
+    this.relativeLeft_ = this.anchorXY_.x - x;
   } else {
     this.relativeLeft_ = x - this.anchorXY_.x;
   }

core/workspace.js

@@ -251,8 +251,8 @@ Blockly.Workspace.prototype.getTopComments = function(ordered) {
       offset *= -1;
     }
     comments.sort(function(a, b) {
-      var aXY = a.getRelativeToSurfaceXY();
-      var bXY = b.getRelativeToSurfaceXY();
+      var aXY = a instanceof Blockly.ScratchBlockComment ? a.getXY() : a.getRelativeToSurfaceXY();
+      var bXY = b instanceof Blockly.ScratchBlockComment ? b.getXY() : b.getRelativeToSurfaceXY();
       return (aXY.y + offset * aXY.x) - (bXY.y + offset * bXY.x);
     });
   }

core/workspace_comment_render_svg.js

@@ -571,7 +571,14 @@ Blockly.WorkspaceCommentSvg.prototype.setSize = function(width, height) {
     this.minimizeArrow_.setAttribute('x', width -
         (Blockly.WorkspaceCommentSvg.MINIMIZE_ICON_SIZE) -
         Blockly.WorkspaceCommentSvg.TOP_BAR_ICON_INSET);
+    this.deleteIcon_.setAttribute('x', (-width +
+        Blockly.WorkspaceCommentSvg.DELETE_ICON_SIZE -
+        Blockly.WorkspaceCommentSvg.TOP_BAR_ICON_INSET));
     this.svgRect_.setAttribute('transform', 'scale(-1 1)');
+    this.svgHandleTarget_.setAttribute('transform', 'scale(-1 1)');
+    this.svgHandleTarget_.setAttribute('transform', 'translate(' + -width + ', 1)');
+    this.minimizeArrow_.setAttribute('transform', 'translate(' + -width + ', 1)');
+    this.deleteIcon_.setAttribute('tranform', 'translate(' + -width + ', 1)');
   } else {
     this.deleteIcon_.setAttribute('x', width -
         Blockly.WorkspaceCommentSvg.DELETE_ICON_SIZE -

core/workspace_comment_svg.js

@@ -407,6 +407,26 @@ Blockly.WorkspaceCommentSvg.prototype.clearTransformAttributes_ = function() {
   Blockly.utils.removeAttribute(this.getSvgRoot(), 'transform');
 };
 
+/**
+ * Return the rendered size of the comment or the stored size if the comment is
+ * not rendered. This differs from getHeightWidth in the behavior of rendered
+ * minimized comments. This function reports the actual size of the minimized
+ * comment instead of the full sized comment height/width.
+ * @return {!{height: number, width: number}} Object with height and width
+ *    properties in workspace units.
+ * @package
+ */
+Blockly.WorkspaceCommentSvg.prototype.getBubbleSize = function() {
+  if (this.rendered_) {
+    return {
+      width: this.svgRect_.getAttribute('width'),
+      height: this.svgRect_.getAttribute('height')
+    };
+  } else {
+    this.getHeightWidth();
+  }
+};
+
 /**
  * Returns the coordinates of a bounding box describing the dimensions of this
  * comment.

core/xml.js

@@ -279,10 +279,6 @@ Blockly.Xml.scratchCommentToDom_ = function(block, element) {
     if (typeof block.comment == 'object') {
       commentElement.setAttribute('id', block.comment.id);
       commentElement.setAttribute('pinned', block.comment.isVisible());
-      var xy = block.comment.getXY();
-      commentElement.setAttribute('x', xy.x);
-      commentElement.setAttribute('y', xy.y);
-      commentElement.setAttribute('minimized', block.comment.isMinimized());
       var hw;
       if (block.comment instanceof Blockly.ScratchBlockComment) {
         hw = block.comment.getHeightWidth();
@@ -291,6 +287,13 @@ Blockly.Xml.scratchCommentToDom_ = function(block, element) {
       }
       commentElement.setAttribute('h', hw.height);
       commentElement.setAttribute('w', hw.width);
+      var xy = block.comment.getXY();
+      commentElement.setAttribute('x',
+          Math.round(block.workspace.RTL ? block.workspace.getWidth() - xy.x - hw.width :
+          xy.x));
+      commentElement.setAttribute('y', xy.y);
+      commentElement.setAttribute('minimized', block.comment.isMinimized());
+
     }
     element.appendChild(commentElement);
   }
@@ -462,6 +465,11 @@ Blockly.Xml.domToWorkspace = function(xml, workspace) {
             parseInt(xmlChild.getAttribute('y'), 10) : 10;
         if (!isNaN(blockX) && !isNaN(blockY)) {
           block.moveBy(workspace.RTL ? width - blockX : blockX, blockY);
+          if (block.comment && typeof block.comment === 'object') {
+            var commentXY = block.comment.getXY();
+            var commentWidth = block.comment.getBubbleSize().width;
+            block.comment.moveTo(block.workspace.RTL ? width - commentXY.x - commentWidth : commentXY.x, commentXY.y);
+          }
         }
         variablesFirst = false;
       } else if (name == 'shadow') {