fa-pipe-to not working on chrome v37 (windows 8.1)

javiersuweijie commented 9 years ago

The following example worked on chrome (OSX v37), firefox (v32), ie11 (windows 8.1) but does not work with chrome(v37) on windows.

Can anyone replicate this issue? I'm using:

famous-angular 0.4
famous-global 0.2.2
angular.js v1.2.22

index.html

<html>
<head>
<script src="famous-global.js"></script>
<script src="angular.js"></script>
<script src="famous-angular.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="famous-angular.min.css">
</head>
<body ng-app="testApp" ng-controller="testController">
  <fa-app style="height: 200px">
  <fa-modifier>
    <fa-surface  fa-background-color="'black'" fa-size="[100,100]"  fa-pipe-to="eventHandler"></fa-surface>
    </fa-modifier>
  </fa-app>
</body>
</html>

main.js

app = angular.module("testApp",['famous.angular'])
app.controller("testController", ['$scope','$famous', function($scope, $famous) {
  var EventHandler = $famous['famous/core/EventHandler'];
  $scope.eventHandler = new EventHandler();

  $scope.eventHandler.on("mousedown", function(e) {
    console.log(e);
  });

  $scope.eventHandler.on("mouseup", function(e) {
    console.log(e);
  });

}]);

Let me know if any other information is needed.

javiersuweijie commented 9 years ago

Trying on a few other desktops/laptops with Window7/8 seems to be fine. I don't know where I should start debugging. Any ideas?

zackbrown commented 9 years ago

To clarify: it's only Windows 8.1 + Chrome 37 where you're experiencing this bug? Have you isolated whether it's limited to that machine or whether it's something you can reproduce on other machines with the same configuration?

One thing to try to isolate is whether it's the eventing, z-indexing (which could prevent events from firing, if a surface is hidden), or piping itself that's breaking.

You can get a reference to the Famo.us Surface directly by using $famous.find('.your-selector'). E.g. if you apply id="my-surface" to that fa-surface, you can get a handle on that surface by using var mySurface = $famous.find('#my-surface')[0].renderNode;. Note that this must happen after the DOM has finished compiling, ideally in a directive postLink but could be done in a $timeout call if you're feeling hacky (alternatively, just expose $famous on the window (window.$famous = $famous) for convenience and do it in the Chrome console after page load.)

Once you have that surface, you can try attaching event listeners directly to that surface. mySurface.on('mousedown', function(e) {alert('yep, mousedown worked');}); If that worked, then it was something in the piping mechanism that is broken.

In the case that it's something wrong with piping, we still need to isolate if it's something in the Famo.us/Angular layer or something in the Famo.us layer. The F/A layer is pretty thin and delegates directly to the Famo.us layer, so my hunch would be the latter, but we can test this by setting up pipes manually.

var EventHandler = $famous['famous/core/EventHandler'];
var myEventHandler = new EventHandler();
myEventHandler.on('mousedown', function(){alert('manual piping is working');});
mySurface.pipe(myEventHandler) //now any events received by the Surface will be received by the EventHandler as well, including that mousedown

If you can verify that manual piping is working, it's likely something in the Famo.us/Angular layer. If it's not working, it's likely something in the Famo.us layer or lower.

javiersuweijie commented 9 years ago

Thanks for the detailed post. I'll get onto it and post my results here.

javiersuweijie commented 9 years ago

I think I found the issue here. The desktop I'm working with has a touch screen. Famous kills all the "mouse*" events if it detects that the machine supports touch.

famous-global.js:4238

var hasTouch = 'ontouchstart' in window;

function kill(type) {
    window.addEventListener(type, function(event) {
        event.stopPropagation();
        return false;
    }, true);
}

if (hasTouch) {
    kill('mousedown');
    kill('mousemove');
    kill('mouseup');
    kill('mouseleave');
}

If I listen on the "click" event it works. However, the "update" events on mouse sync are not triggered with my mouse.

Is it possible to disable DesktopEmulationMode?

Famous / famous-angular

fa-pipe-to not working on chrome v37 (windows 8.1) #222