Merge pull request #1687 from samelhusseini/develop_pointerfixes

Pointer Event fixes

core/blockly.js

@@ -452,26 +452,30 @@ Blockly.bindEventWithChecks_ = function(node, name, thisObject, func,
  };
 
  var bindData = [];
- // Don't register the mouse event if an equivalent pointer event is supported.
- if ((window && !window.PointerEvent) || !(name in Blockly.Touch.TOUCH_MAP)) {
+ if (window && window.PointerEvent && (name in Blockly.Touch.TOUCH_MAP)) {
+ for (var i = 0, type; type = Blockly.Touch.TOUCH_MAP[name][i]; i++) {
+ node.addEventListener(type, wrapFunc, false);
+ bindData.push([node, type, wrapFunc]);
+ }
+ } else {
  node.addEventListener(name, wrapFunc, false);
  bindData.push([node, name, wrapFunc]);
- }
 
- // Add equivalent touch or pointer event.
- if (name in Blockly.Touch.TOUCH_MAP) {
- var touchWrapFunc = function(e) {
- wrapFunc(e);
- // Calling preventDefault stops the browser from scrolling/zooming the
- // page.
- var preventDef = !opt_noPreventDefault;
- if (handled && preventDef) {
- e.preventDefault();
+ // Add equivalent touch event.
+ if (name in Blockly.Touch.TOUCH_MAP) {
+ var touchWrapFunc = function(e) {
+ wrapFunc(e);
+ // Calling preventDefault stops the browser from scrolling/zooming the
+ // page.
+ var preventDef = !opt_noPreventDefault;
+ if (handled && preventDef) {
+ e.preventDefault();
+ }
+ };
+ for (var i = 0, type; type = Blockly.Touch.TOUCH_MAP[name][i]; i++) {
+ node.addEventListener(type, touchWrapFunc, false);
+ bindData.push([node, type, touchWrapFunc]);
  }
- };
- for (var i = 0, type; type = Blockly.Touch.TOUCH_MAP[name][i]; i++) {
- node.addEventListener(type, touchWrapFunc, false);
- bindData.push([node, type, touchWrapFunc]);
  }
  }
  return bindData;
@@ -501,29 +505,34 @@ Blockly.bindEvent_ = function(node, name, thisObject, func) {
  };
 
  var bindData = [];
- // Don't register the mouse event if an equivalent pointer event is supported.
- if ((window && !window.PointerEvent) || !(name in Blockly.Touch.TOUCH_MAP)) {
+ if (window && window.PointerEvent && (name in Blockly.Touch.TOUCH_MAP)) {
+ for (var i = 0, type; type = Blockly.Touch.TOUCH_MAP[name][i]; i++) {
+ node.addEventListener(type, wrapFunc, false);
+ bindData.push([node, type, wrapFunc]);
+ }
+ } else {
  node.addEventListener(name, wrapFunc, false);
  bindData.push([node, name, wrapFunc]);
- }
- // Add equivalent touch or pointer event.
- if (name in Blockly.Touch.TOUCH_MAP) {
- var touchWrapFunc = function(e) {
- // Punt on multitouch events.
- if (e.changedTouches && e.changedTouches.length == 1) {
- // Map the touch event's properties to the event.
- var touchPoint = e.changedTouches[0];
- e.clientX = touchPoint.clientX;
- e.clientY = touchPoint.clientY;
- }
- wrapFunc(e);
 
- // Stop the browser from scrolling/zooming the page.
- e.preventDefault();
- };
- for (var i = 0, type; type = Blockly.Touch.TOUCH_MAP[name][i]; i++) {
- node.addEventListener(type, touchWrapFunc, false);
- bindData.push([node, type, touchWrapFunc]);
+ // Add equivalent touch event.
+ if (name in Blockly.Touch.TOUCH_MAP) {
+ var touchWrapFunc = function(e) {
+ // Punt on multitouch events.
+ if (e.changedTouches && e.changedTouches.length == 1) {
+ // Map the touch event's properties to the event.
+ var touchPoint = e.changedTouches[0];
+ e.clientX = touchPoint.clientX;
+ e.clientY = touchPoint.clientY;
+ }
+ wrapFunc(e);
+
+ // Stop the browser from scrolling/zooming the page.
+ e.preventDefault();
+ };
+ for (var i = 0, type; type = Blockly.Touch.TOUCH_MAP[name][i]; i++) {
+ node.addEventListener(type, touchWrapFunc, false);
+ bindData.push([node, type, touchWrapFunc]);
+ }
  }
  }
  return bindData;

core/bubble.js

@@ -345,11 +345,16 @@ Blockly.Bubble.prototype.registerResizeEvent = function(callback) {
 
 /**
  * Move this bubble to the top of the stack.
+ * @return {!boolean} Whether or not the bubble has been moved.
  * @private
  */
 Blockly.Bubble.prototype.promote_ = function() {
  var svgGroup = this.bubbleGroup_.parentNode;
- svgGroup.appendChild(this.bubbleGroup_);
+ if (svgGroup.lastChild !== this.bubbleGroup_) {
+ svgGroup.appendChild(this.bubbleGroup_);
+ return true;
+ }
+ return false;
 };
 
 /**

core/comment.js

@@ -122,7 +122,7 @@ Blockly.Comment.prototype.createEditor_ = function() {
  body.appendChild(textarea);
  this.textarea_ = textarea;
  this.foreignObject_.appendChild(body);
- Blockly.bindEventWithChecks_(textarea, 'mouseup', this, this.textareaFocus_);
+ Blockly.bindEventWithChecks_(textarea, 'mouseup', this, this.textareaFocus_, true, true);
  // Don't zoom with mousewheel.
  Blockly.bindEventWithChecks_(textarea, 'wheel', this, function(e) {
  e.stopPropagation();
@@ -224,10 +224,11 @@ Blockly.Comment.prototype.textareaFocus_ = function(
  // Ideally this would be hooked to the focus event for the comment.
  // However doing so in Firefox swallows the cursor for unknown reasons.
  // So this is hooked to mouseup instead. No big deal.
- this.bubble_.promote_();
- // Since the act of moving this node within the DOM causes a loss of focus,
- // we need to reapply the focus.
- this.textarea_.focus();
+ if (this.bubble_.promote_()) {
+ // Since the act of moving this node within the DOM causes a loss of focus,
+ // we need to reapply the focus.
+ this.textarea_.focus();
+ }
 };
 
 /**

core/css.js

@@ -386,9 +386,12 @@ Blockly.Css.CONTENT = [
  '.blocklyCommentTextarea {',
  'background-color: #ffc;',
  'border: 0;',
+ 'outline: 0;',
  'margin: 0;',
  'padding: 2px;',
  'resize: none;',
+ 'display: block;',
+ 'overflow: hidden;',
  '}',
 
  '.blocklyHtmlInput {',

core/gesture.js

@@ -498,7 +498,7 @@ Blockly.Gesture.prototype.doStart = function(e) {
  }
 
  if (goog.string.caseInsensitiveEquals(e.type, 'touchstart') ||
- goog.string.caseInsensitiveEquals(e.type, 'pointerdown')) {
+ (goog.string.caseInsensitiveEquals(e.type, 'pointerdown') && e.pointerType != 'mouse')) {
  Blockly.longStart_(e, this);
  }
 

core/touch.js

@@ -51,8 +51,14 @@ Blockly.Touch.TOUCH_MAP = {};
 if (window && window.PointerEvent) {
  Blockly.Touch.TOUCH_MAP = {
  'mousedown': ['pointerdown'],
+ 'mouseenter': ['pointerenter'],
+ 'mouseleave': ['pointerleave'],
  'mousemove': ['pointermove'],
- 'mouseup': ['pointerup', 'pointercancel']
+ 'mouseout': ['pointerout'],
+ 'mouseover': ['pointerover'],
+ 'mouseup': ['pointerup', 'pointercancel'],
+ 'touchend': ['pointerup'],
+ 'touchcancel': ['pointercancel']
  };
 } else if (goog.events.BrowserFeature.TOUCH_ENABLED) {
  Blockly.Touch.TOUCH_MAP = {

core/touch_gesture.js

@@ -110,7 +110,7 @@ Blockly.TouchGesture.ZOOM_OUT_MULTIPLIER = 6;
  */
 Blockly.TouchGesture.prototype.doStart = function(e) {
  Blockly.TouchGesture.superClass_.doStart.call(this, e);
- if (Blockly.Touch.isTouchEvent(e)) {
+ if (!this.isEnding_ && Blockly.Touch.isTouchEvent(e)) {
  this.handleTouchStart(e);
  }
 };
@@ -135,6 +135,7 @@ Blockly.TouchGesture.prototype.bindMouseEvents = function(e) {
  /*opt_noCaptureIdentifier*/ true);
 
  e.preventDefault();
+ e.stopPropagation();
 };
 
 /**
@@ -143,7 +144,7 @@ Blockly.TouchGesture.prototype.bindMouseEvents = function(e) {
  * @package
  */
 Blockly.TouchGesture.prototype.handleStart = function(e) {
- if (!this.isDragging) {
+ if (this.isDragging()) {
  // A drag has already started, so this can no longer be a pinch-zoom.
  return;
  }
@@ -238,8 +239,8 @@ Blockly.TouchGesture.prototype.handleTouchStart = function(e) {
  var point1 = this.cachedPoints_[pointers[1]];
  this.startDistance_ = goog.math.Coordinate.distance(point0, point1);
  this.isMultiTouch_ = true;
+ e.preventDefault();
  }
- e.preventDefault();
 };
 
 /**
@@ -272,8 +273,8 @@ Blockly.TouchGesture.prototype.handleTouchMove = function(e) {
  workspace.zoom(position.x, position.y, delta);
  }
  this.previousScale_ = scale;
+ e.preventDefault();
  }
- e.preventDefault();
 };
 
 /**

core/workspace_svg.js

@@ -402,7 +402,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
 
  if (!this.isFlyout) {
  Blockly.bindEventWithChecks_(this.svgGroup_, 'mousedown', this,
- this.onMouseDown_);
+ this.onMouseDown_, false, true);
  if (this.options.zoomOptions && this.options.zoomOptions.wheel) {
  // Mouse-wheel.
  Blockly.bindEventWithChecks_(this.svgGroup_, 'wheel', this,