Search code examples
dartdart-polymer

Handling tracking events in Polymer.dart

I am trying to build a custom Polymer element. I have been building Polymer elements for some time now successfully. This is the first time I need to use complex mouse and gesture events.

After struggling with mouse events, I found out that Polymer provides us with touch & gesture events that come in really handy in this kind of work.

However I cannot get it to work in Dart.

fx_slider.html:

<div id="main-div">
  <div id="slider-track"></div>
  <div id="slider-thumb" on-trackstart="{{trackStartHandler}}"
    on-trackend="{{trackEndHandler}}" on-track="{{trackHandler}}">
  </div>
</div>

fx_slider.dart:

void trackStartHandler (Event e) {
  dragging = true;
}

void trackEndHandler (Event e) {
  dragging =  false;
}

void trackHandler (Event e, var detail, Node target) {
  /* How to retrieve the mouse position or the dx property from event ??? */
}

My event handler (trackHandler) receives an Event instead of a TrackEvent or a MouseEvent, so I am unable to get the movement the user has made or the position of the cursor.

Can any of you tell me how to use tracking events in Dart?

Thanks in advance!

Solution

  • This is because touch gestures are not yet supported by Dart.

    There is a workaround (see also http://dartbug.com/21138 - found it just after I figured it out myself :-/)

    void trackHandler (Event e, var detail, Node target) {
  var touchEvent = new js.JsObject.fromBrowserObject(e);
  print('x: ${touchEvent['dx']}, y: ${touchEvent['dy']}');
}

    The debugger shows more properties in the [[JavaScript View]] node.