Merge pull request scratchfoundation#1970 from paulkaplan/fix-touch-c…

…omments Several fixes for comments
kickreg · Jul 31, 2019 · 45e4fc8 · 45e4fc8
2 parents ef1de26 + 469fe8b
commit 45e4fc8
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 22 deletions.
diff --git a/core/scratch_block_comment.js b/core/scratch_block_comment.js
@@ -231,7 +231,8 @@ Blockly.ScratchBlockComment.prototype.createEditor_ = function() {
   this.textarea_ = textarea;
   this.textarea_.style.margin = (Blockly.ScratchBlockComment.TEXTAREA_OFFSET) + 'px';
   this.foreignObject_.appendChild(body);
-  Blockly.bindEventWithChecks_(textarea, 'mousedown', this, this.textareaFocus_);
+  Blockly.bindEventWithChecks_(textarea, 'mousedown', this,
+      this.textareaFocus_, true, true); // noCapture and do not prevent default
   // Don't zoom with mousewheel.
   Blockly.bindEventWithChecks_(textarea, 'wheel', this, function(e) {
     e.stopPropagation();
@@ -256,6 +257,18 @@ Blockly.ScratchBlockComment.prototype.createEditor_ = function() {
   };
 };
 
+/**
+ * Handle text area click, make sure to stop propagation to allow default selection behavior.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.ScratchBlockComment.prototype.textareaFocus_ = function(e) {
+  Blockly.ScratchBlockComment.superClass_.textareaFocus_.call(this, e);
+  // Stop event from propagating to the workspace to make sure preventDefault _is not called_.
+  e.stopPropagation();
+};
+
+
 /**
  * Callback function triggered when the bubble has resized.
  * Resize the text area accordingly.

diff --git a/core/scratch_bubble.js b/core/scratch_bubble.js
@@ -87,17 +87,17 @@ Blockly.ScratchBubble = function(comment, workspace, content, anchorXY,
 
   if (!workspace.options.readOnly) {
     Blockly.bindEventWithChecks_(
-        this.minimizeArrow_, 'mousedown', this, this.minimizeArrowMouseDown_);
+        this.minimizeArrow_, 'mousedown', this, this.minimizeArrowMouseDown_, true);
     Blockly.bindEventWithChecks_(
-        this.minimizeArrow_, 'mouseout', this, this.minimizeArrowMouseOut_);
+        this.minimizeArrow_, 'mouseout', this, this.minimizeArrowMouseOut_, true);
     Blockly.bindEventWithChecks_(
-        this.minimizeArrow_, 'mouseup', this, this.minimizeArrowMouseUp_);
+        this.minimizeArrow_, 'mouseup', this, this.minimizeArrowMouseUp_, true);
     Blockly.bindEventWithChecks_(
-        this.deleteIcon_, 'mousedown', this, this.deleteMouseDown_);
+        this.deleteIcon_, 'mousedown', this, this.deleteMouseDown_, true);
     Blockly.bindEventWithChecks_(
-        this.deleteIcon_, 'mouseout', this, this.deleteMouseOut_);
+        this.deleteIcon_, 'mouseout', this, this.deleteMouseOut_, true);
     Blockly.bindEventWithChecks_(
-        this.deleteIcon_, 'mouseup', this, this.deleteMouseUp_);
+        this.deleteIcon_, 'mouseup', this, this.deleteMouseUp_, true);
     Blockly.bindEventWithChecks_(
         this.commentTopBar_, 'mousedown', this, this.bubbleMouseDown_);
     Blockly.bindEventWithChecks_(

diff --git a/core/workspace_comment_render_svg.js b/core/workspace_comment_render_svg.js
@@ -113,7 +113,7 @@ Blockly.WorkspaceCommentSvg.prototype.render = function() {
       {
         'class': 'blocklyDraggable scratchCommentTarget',
         'x': 0,
-        'y': 0,
+        'y': Blockly.WorkspaceCommentSvg.TOP_BAR_HEIGHT,
         'rx': 4 * Blockly.WorkspaceCommentSvg.BORDER_WIDTH,
         'ry': 4 * Blockly.WorkspaceCommentSvg.BORDER_WIDTH
       });
@@ -149,17 +149,17 @@ Blockly.WorkspaceCommentSvg.prototype.render = function() {
   }
 
   Blockly.bindEventWithChecks_(
-      this.minimizeArrow_, 'mousedown', this, this.minimizeArrowMouseDown_);
+      this.minimizeArrow_, 'mousedown', this, this.minimizeArrowMouseDown_, true);
   Blockly.bindEventWithChecks_(
-      this.minimizeArrow_, 'mouseout', this, this.minimizeArrowMouseOut_);
+      this.minimizeArrow_, 'mouseout', this, this.minimizeArrowMouseOut_, true);
   Blockly.bindEventWithChecks_(
-      this.minimizeArrow_, 'mouseup', this, this.minimizeArrowMouseUp_);
+      this.minimizeArrow_, 'mouseup', this, this.minimizeArrowMouseUp_, true);
   Blockly.bindEventWithChecks_(
-      this.deleteIcon_, 'mousedown', this, this.deleteMouseDown_);
+      this.deleteIcon_, 'mousedown', this, this.deleteMouseDown_, true);
   Blockly.bindEventWithChecks_(
-      this.deleteIcon_, 'mouseout', this, this.deleteMouseOut_);
+      this.deleteIcon_, 'mouseout', this, this.deleteMouseOut_, true);
   Blockly.bindEventWithChecks_(
-      this.deleteIcon_, 'mouseup', this, this.deleteMouseUp_);
+      this.deleteIcon_, 'mouseup', this, this.deleteMouseUp_, true);
 };
 
 /**
@@ -187,6 +187,9 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() {
   this.textarea_ = textarea;
   this.textarea_.style.margin = (Blockly.WorkspaceCommentSvg.TEXTAREA_OFFSET) + 'px';
   this.foreignObject_.appendChild(body);
+  Blockly.bindEventWithChecks_(textarea, 'mousedown', this, function(e) {
+    e.stopPropagation(); // Propagation causes preventDefault from workspace handler
+  }, true, true);
   // Don't zoom with mousewheel.
   Blockly.bindEventWithChecks_(textarea, 'wheel', this, function(e) {
     e.stopPropagation();
@@ -564,7 +567,7 @@ Blockly.WorkspaceCommentSvg.prototype.setSize = function(width, height) {
   this.svgRect_.setAttribute('width', width);
   this.svgRect_.setAttribute('height', height);
   this.svgRectTarget_.setAttribute('width', width);
-  this.svgRectTarget_.setAttribute('height', height);
+  this.svgRectTarget_.setAttribute('height', height - Blockly.WorkspaceCommentSvg.TOP_BAR_HEIGHT);
   this.svgHandleTarget_.setAttribute('width', width);
   this.svgHandleTarget_.setAttribute('height', Blockly.WorkspaceCommentSvg.TOP_BAR_HEIGHT);
   if (this.RTL) {
@@ -682,13 +685,13 @@ Blockly.WorkspaceCommentSvg.prototype.blurFocus = function() {
   this.focused_ = false;
   comment.textarea_.blur();
   // Defer CSS changes.
-  // TODO (github.com/google/blockly/issues/1848): Fix warnings when the comment
-  // has already been deleted.
   setTimeout(function() {
-    comment.removeFocus();
-    Blockly.utils.removeClass(
-        comment.svgRectTarget_, 'scratchCommentTargetFocused');
-    Blockly.utils.removeClass(
-        comment.svgHandleTarget_, 'scratchCommentHandleTargetFocused');
+    if (comment.svgGroup_) { // Could have been deleted in the meantime
+      comment.removeFocus();
+      Blockly.utils.removeClass(
+          comment.svgRectTarget_, 'scratchCommentTargetFocused');
+      Blockly.utils.removeClass(
+          comment.svgHandleTarget_, 'scratchCommentHandleTargetFocused');
+    }
   }, 0);
 };