Fake cursor position when using touch
With the new gestures we will simulate the cursor being in a different location than any of the touch points. This is a bit too complex for the Cursor class, so let's just explicitly tell it where we want the cursor rendered.
This commit is contained in:
parent
50cde2faab
commit
32ed7c6724
26
core/rfb.js
26
core/rfb.js
|
@ -1058,6 +1058,11 @@ export default class RFB extends EventTargetMixin {
|
|||
}
|
||||
}
|
||||
|
||||
_fakeMouseMove(ev, elementX, elementY) {
|
||||
this._handleMouseMove(elementX, elementY);
|
||||
this._cursor.move(ev.detail.clientX, ev.detail.clientY);
|
||||
}
|
||||
|
||||
_handleTapEvent(ev, bmask) {
|
||||
let pos = clientToElement(ev.detail.clientX, ev.detail.clientY,
|
||||
this._canvas);
|
||||
|
@ -1084,7 +1089,7 @@ export default class RFB extends EventTargetMixin {
|
|||
}
|
||||
this._gestureLastTapTime = Date.now();
|
||||
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(this._gestureFirstDoubleTapEv, pos.x, pos.y);
|
||||
this._handleMouseButton(pos.x, pos.y, true, bmask);
|
||||
this._handleMouseButton(pos.x, pos.y, false, bmask);
|
||||
}
|
||||
|
@ -1107,23 +1112,23 @@ export default class RFB extends EventTargetMixin {
|
|||
this._handleTapEvent(ev, 0x2);
|
||||
break;
|
||||
case 'drag':
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
this._handleMouseButton(pos.x, pos.y, true, 0x1);
|
||||
break;
|
||||
case 'longpress':
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
this._handleMouseButton(pos.x, pos.y, true, 0x4);
|
||||
break;
|
||||
|
||||
case 'twodrag':
|
||||
this._gestureLastMagnitudeX = ev.detail.magnitudeX;
|
||||
this._gestureLastMagnitudeY = ev.detail.magnitudeY;
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
break;
|
||||
case 'pinch':
|
||||
this._gestureLastMagnitudeX = Math.hypot(ev.detail.magnitudeX,
|
||||
ev.detail.magnitudeY);
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
@ -1136,13 +1141,13 @@ export default class RFB extends EventTargetMixin {
|
|||
break;
|
||||
case 'drag':
|
||||
case 'longpress':
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
break;
|
||||
case 'twodrag':
|
||||
// Always scroll in the same position.
|
||||
// We don't know if the mouse was moved so we need to move it
|
||||
// every update.
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
while ((ev.detail.magnitudeY - this._gestureLastMagnitudeY) > GESTURE_SCRLSENS) {
|
||||
this._handleMouseButton(pos.x, pos.y, true, 0x8);
|
||||
this._handleMouseButton(pos.x, pos.y, false, 0x8);
|
||||
|
@ -1168,7 +1173,7 @@ export default class RFB extends EventTargetMixin {
|
|||
// Always scroll in the same position.
|
||||
// We don't know if the mouse was moved so we need to move it
|
||||
// every update.
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
magnitude = Math.hypot(ev.detail.magnitudeX, ev.detail.magnitudeY);
|
||||
if (Math.abs(magnitude - this._gestureLastMagnitudeX) > GESTURE_ZOOMSENS) {
|
||||
this._handleKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
|
||||
|
@ -1184,6 +1189,7 @@ export default class RFB extends EventTargetMixin {
|
|||
}
|
||||
}
|
||||
this._handleKeyEvent(KeyTable.XK_Control_L, "ControlLeft", false);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
|
@ -1196,11 +1202,11 @@ export default class RFB extends EventTargetMixin {
|
|||
case 'twodrag':
|
||||
break;
|
||||
case 'drag':
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
this._handleMouseButton(pos.x, pos.y, false, 0x1);
|
||||
break;
|
||||
case 'longpress':
|
||||
this._handleMouseMove(pos.x, pos.y);
|
||||
this._fakeMouseMove(ev, pos.x, pos.y);
|
||||
this._handleMouseButton(pos.x, pos.y, false, 0x4);
|
||||
break;
|
||||
}
|
||||
|
|
|
@ -30,9 +30,6 @@ export default class Cursor {
|
|||
'mouseleave': this._handleMouseLeave.bind(this),
|
||||
'mousemove': this._handleMouseMove.bind(this),
|
||||
'mouseup': this._handleMouseUp.bind(this),
|
||||
'touchstart': this._handleTouchStart.bind(this),
|
||||
'touchmove': this._handleTouchMove.bind(this),
|
||||
'touchend': this._handleTouchEnd.bind(this),
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -54,11 +51,6 @@ export default class Cursor {
|
|||
this._target.addEventListener('mouseleave', this._eventHandlers.mouseleave, options);
|
||||
this._target.addEventListener('mousemove', this._eventHandlers.mousemove, options);
|
||||
this._target.addEventListener('mouseup', this._eventHandlers.mouseup, options);
|
||||
|
||||
// There is no "touchleave" so we monitor touchstart globally
|
||||
window.addEventListener('touchstart', this._eventHandlers.touchstart, options);
|
||||
this._target.addEventListener('touchmove', this._eventHandlers.touchmove, options);
|
||||
this._target.addEventListener('touchend', this._eventHandlers.touchend, options);
|
||||
}
|
||||
|
||||
this.clear();
|
||||
|
@ -76,10 +68,6 @@ export default class Cursor {
|
|||
this._target.removeEventListener('mousemove', this._eventHandlers.mousemove, options);
|
||||
this._target.removeEventListener('mouseup', this._eventHandlers.mouseup, options);
|
||||
|
||||
window.removeEventListener('touchstart', this._eventHandlers.touchstart, options);
|
||||
this._target.removeEventListener('touchmove', this._eventHandlers.touchmove, options);
|
||||
this._target.removeEventListener('touchend', this._eventHandlers.touchend, options);
|
||||
|
||||
document.body.removeChild(this._canvas);
|
||||
}
|
||||
|
||||
|
@ -131,6 +119,19 @@ export default class Cursor {
|
|||
this._hotSpot.y = 0;
|
||||
}
|
||||
|
||||
// Mouse events might be emulated, this allows
|
||||
// moving the cursor in such cases
|
||||
move(clientX, clientY) {
|
||||
if (!useFallback) {
|
||||
return;
|
||||
}
|
||||
this._position.x = clientX;
|
||||
this._position.y = clientY;
|
||||
this._updatePosition();
|
||||
let target = document.elementFromPoint(clientX, clientY);
|
||||
this._updateVisibility(target);
|
||||
}
|
||||
|
||||
_handleMouseOver(event) {
|
||||
// This event could be because we're entering the target, or
|
||||
// moving around amongst its sub elements. Let the move handler
|
||||
|
@ -179,27 +180,6 @@ export default class Cursor {
|
|||
}
|
||||
}
|
||||
|
||||
_handleTouchStart(event) {
|
||||
// Just as for mouseover, we let the move handler deal with it
|
||||
this._handleTouchMove(event);
|
||||
}
|
||||
|
||||
_handleTouchMove(event) {
|
||||
this._updateVisibility(event.target);
|
||||
|
||||
this._position.x = event.changedTouches[0].clientX - this._hotSpot.x;
|
||||
this._position.y = event.changedTouches[0].clientY - this._hotSpot.y;
|
||||
|
||||
this._updatePosition();
|
||||
}
|
||||
|
||||
_handleTouchEnd(event) {
|
||||
// Same principle as for mouseup
|
||||
let target = document.elementFromPoint(event.changedTouches[0].clientX,
|
||||
event.changedTouches[0].clientY);
|
||||
this._updateVisibility(target);
|
||||
}
|
||||
|
||||
_showCursor() {
|
||||
if (this._canvas.style.visibility === 'hidden') {
|
||||
this._canvas.style.visibility = '';
|
||||
|
|
Loading…
Reference in New Issue