Pointer Event fixes ensuring they replace all mouse events, and fix comment focusing issue.

This commit is contained in:
Sam El-Husseini
2018-03-02 15:01:58 -08:00
parent 7ea0e1b8c3
commit b32dbcdb94
7 changed files with 72 additions and 45 deletions

View File

@@ -452,26 +452,32 @@ 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)) {
var bindData = [];
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 +507,35 @@ 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;

View File

@@ -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;
};
/**

View File

@@ -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();
}
};
/**

View File

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

View File

@@ -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);
}

View File

@@ -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 = {

View File

@@ -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,