0

I'm trying to build a crossplatform tool with cytoscape.js, wich includes mobile devices, but I'm facing some problems when using the "tap" function to add a node:

cy.on('tap', function(e) {
    if(e.cyTarget === cy) {
        if($("input:radio[id=btnAddNode]")[0].checked) {
            var idNum = cy.nodes().size(),
            setID = idNum.toString(),
            offset = $cy.offset(),
            position = {
                x: e.originalEvent.x - offset.left,
                y: e.originalEvent.y - offset.top
            };
            console.log("e.originalEvent.x: " + e.originalEvent.x);
            console.log("offset.left: " + offset.left);
            console.log("e.originalEvent.y: " + e.originalEvent.y);
            console.log("offset.top: " + offset.top);
            cy.add([{
                group: "nodes",
                data: {
                    id: "n" + setID
                },
                renderedPosition: {
                    x: position.x,
                    y: position.y
                },
            }]);                    
        } else {
        //show node data
        }
    }
});

On Chrome for Windows 7 (v.32) and also on Safari it is working as expected.

On IE 9 it's inserting the node about 30px higher and 5px left than the point where we click (?!)

But on Firefox (v.26) and Safari for iOS it's not working, it put's the node on the top-left corner of the canvas. Firefox debug says that the "originalEvent.x" and "originalEvent.y" properties are undefined

"e.originalEvent.x: undefined"
"offset.left: 8"
"e.originalEvent.y: undefined"
"offset.top: 55.66667175292969"

So, is this property obsolete? If so, what should be the best way to improve this code?

Thanks in advance.

EDIT: Almost solved, noticed that using e.originalEvent.pageX and e.originalEvent.pageY instead works well over all desktop browsers and on Windows Phone 8, except on iOS :(

codingrose
  • 15,563
  • 11
  • 39
  • 58
gcpdev
  • 442
  • 6
  • 20
  • Maybe the cross-browser differences are the reason why one should not use the [`originalEvent`](http://api.jquery.com/category/events/event-object/)? – Bergi Jan 22 '14 at 22:07
  • @Bergi Yes, maybe. But I found out that using `originalEvent.pageX` and `originalEvent.pageY` seems the right way, and now all the browsers are identifying it equally correct. Thanks – gcpdev Jan 23 '14 at 00:18
  • The very page I linked does mention that `e.pageX` and `e.pageY` (no need for `originalEvent`!) were normalized for cross-browser consistency. – Bergi Jan 23 '14 at 00:21
  • @Bergi Yes, I have seen your link, but using this way I get `e.pageX: undefined`! – gcpdev Jan 23 '14 at 00:25

1 Answers1

0

Though the events in Cytoscape.js are similar to jQuery events, they are not jQuery events. Properties like pageX are available through e.originalEvent, though they are not normalised to e. In the upcoming v2.1 (or if you make zip in the repo), events have been updated with e.cyPosition and e.cyRenderedPosition. These values respectively provide the model position and rendered (on screen, relative to cy.js instance) position.

Also note that I don't think your approach would work on iOS etc even using jQuery events, because touch events aren't normalised. e.cyPosition and e.cyRenderedPosition do support touch events, though.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Thanks Max, I'll take a look on v2.1. I really appreciate your good job. Congratulations, keep going, I'm sure it is the right way. – gcpdev Jan 24 '14 at 14:29