Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9357] MobileWeb: View Touch Event Coordinates Parity, Global and Local

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2012-06-05T12:30:44.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sRelease 2.1.0, Sprint 2012-12 MW
ComponentsMobileWeb
Labelsparity
ReporterDawson Toth
AssigneeBryan Hughes
Created2012-06-04T09:22:23.000+0000
Updated2012-06-26T15:25:19.000+0000

Description

Problem

The coordinates provided in touch events are inconsistent with our other platforms. In particular: - The local point (evt.x) is the absolute position. It should be relative to the containing view. - I cannot tell what the global point is in reference to. It seems miscalculated, but that is only an observation.

Reproduction

The following creates a vertical scroll view with a series of boxes in it. Drag one of the boxes to the right, and it will move faster than your finger as the global point is miscalculated. There are several console logs to illuminate the disparity in the platforms.
var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});

var scroll = Ti.UI.createScrollView({
    scrollType: 'vertical',
    contentHeight: 3010,
    canCancelEvents: false,
    bottom: 60
});
var width = 150, height = 90;
for (var i = 0; i < 30; i++) {
    scroll.add(Ti.UI.createLabel({
        draggable: true,
        text: 'Drag Me Horizontally ' + (i + 1), textAlign: 'center',
        color: '#000',
        top: i * 100 + 10,
        width: width, height: height,
        left: 0,
        backgroundColor: '#eee'
    }));
}
scroll.addEventListener('touchstart', curry('Touch Start'));
scroll.addEventListener('touchmove', curry('Touch Move'));
scroll.addEventListener('touchcancel', curry('Touch Cancel'));
scroll.addEventListener('touchend', curry('Touch End'));
win.add(scroll);
win.open();

function curry(eventName) {
    return function (evt) {
        if (evt.source && evt.source.draggable) {
            var global = evt.source.convertPointToView({ x: evt.x, y: evt.y }, scroll);
            console.log(eventName + ' evt.x: ' + evt.x);
            console.log(eventName + ' global.x: ' + global.x);
            evt.source.left = global.x - width / 2;
        }
    }
}

Attachments

FileDateSize
app.js2012-06-04T14:31:25.000+0000608

Comments

  1. Dawson Toth 2012-06-04

    Note that you can workaround the defect in the demo by replacing global.x with evt.x in the evt.source.left assignment. That doesn't really address the core issue, though, which is the disparity between MW and iOS+Android.
  2. Bryan Hughes 2012-06-04

    Pull Request: https://github.com/appcelerator/titanium_mobile/pull/2317 Note: convertPointToView worked just fine...it was just being fed false information. The global point itself wasn't miscalculated, it just didn't start with the correct info.
  3. Lokesh Choudhary 2012-06-26

    Verified the issue on the environment below & found it to be working as expected. The local point (evt.x) is not the absolute position now its relative to the containing view. Dragging the box to the right does not move it faster than your finger. Titanium Studio : 2.1.0.201206251749 SDK version : 2.1.0.v20120626104306 Chrome : 19.0.1084.56

JSON Source