Angle field touch fixes (#3079)

* Fix touch support for angle fields
This commit is contained in:
Sam El-Husseini
2019-09-26 17:11:03 -07:00
committed by GitHub
parent 870824bc3e
commit 35424f2484

View File

@@ -249,7 +249,8 @@ Blockly.FieldAngle.prototype.dropdownCreate_ = function() {
'xmlns:xlink': Blockly.utils.dom.XLINK_NS,
'version': '1.1',
'height': (Blockly.FieldAngle.HALF * 2) + 'px',
'width': (Blockly.FieldAngle.HALF * 2) + 'px'
'width': (Blockly.FieldAngle.HALF * 2) + 'px',
'style': 'touch-action: none'
}, null);
var circle = Blockly.utils.dom.createSvgElement('circle', {
'cx': Blockly.FieldAngle.HALF,
@@ -281,15 +282,16 @@ Blockly.FieldAngle.prototype.dropdownCreate_ = function() {
// The angle picker is different from other fields in that it updates on
// mousemove even if it's not in the middle of a drag. In future we may
// change this behaviour. For now, using bindEvent_ instead of
// bindEventWithChecks_ allows it to work without a mousedown/touchstart.
// change this behaviour.
this.clickWrapper_ =
Blockly.bindEvent_(svg, 'click', this, this.hide_);
this.moveWrapper1_ =
Blockly.bindEvent_(circle, 'mousemove', this, this.onMouseMove);
this.moveWrapper2_ =
Blockly.bindEvent_(this.gauge_, 'mousemove', this, this.onMouseMove);
Blockly.bindEventWithChecks_(svg, 'click', this, this.hide_);
// On touch devices, the picker's value is only updated with a drag. Add
// a click handler on the drag surface to update the value if the surface
// is clicked.
this.clickSurfaceWrapper_ =
Blockly.bindEventWithChecks_(circle, 'click', this, this.onMouseMove, true, true);
this.moveSurfaceWrapper_ =
Blockly.bindEventWithChecks_(circle, 'mousemove', this, this.onMouseMove, true, true);
return svg;
};
@@ -299,8 +301,8 @@ Blockly.FieldAngle.prototype.dropdownCreate_ = function() {
*/
Blockly.FieldAngle.prototype.dropdownDispose_ = function() {
Blockly.unbindEvent_(this.clickWrapper_);
Blockly.unbindEvent_(this.moveWrapper1_);
Blockly.unbindEvent_(this.moveWrapper2_);
Blockly.unbindEvent_(this.clickSurfaceWrapper_);
Blockly.unbindEvent_(this.moveSurfaceWrapper_);
};
/**
@@ -483,6 +485,7 @@ Blockly.Css.register([
'.blocklyAngleGauge {',
'fill: #f88;',
'fill-opacity: .8;',
'pointer-events: none;',
'}',
'.blocklyAngleLine {',