kirbyfan64sos kirbyfan64sos - 2 months ago 14
Dart Question

Cannot get mouse pointer information from mousemove event

In normal JS Polymer, I can do something like this:

<dom-module id="my-module">
<template>
<div on-mousemove="mousemove">Text here!</div>
</template>
<script>
Polymer({
is: 'my-module',

mousemove: function (event) {
console.log(event);
}
});
</script>
</dom-module>


This will print a mouse movement event containing the coordinates of the mouse pointer.

However, consider the following Dart project:

pubspec.yaml



name: example
description: "stuff here"
version: 0.1.0
dependencies:
polymer: ^1.0.0-rc.18
web_components: ^0.12.0
browser: ^0.10.0
transformers:
- polymer:
entry_points:
- web/index.html


web/index.dart



library photon.index;

import 'package:example/test.dart';

export 'package:polymer/init.dart';
import 'package:polymer/polymer.dart';


web/index.html



<head>
<script src="packages/web_components/webcomponents-lite.min.js"></script>
<script src="packages/web_components/dart_support.js"></script>
</head>
<body unresolved>
<my-module></my-module>

<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>


lib/test.dart



@HtmlImport('test.html')
library example.test;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;

@PolymerRegister('my-module')
class MyModule extends PolymerElement {
MyModule.created() : super.created();

@reflectable
void mousemove(event, [_]) {
print(event);
}
}


lib/test.html



<dom-module id="my-module">
<template>
<div on-mousemove="mousemove" id="target">Text here!</div>
</template>
</dom-module>


This is roughly equivalent to the JavaScript version. However, this will instead print an instance of CustomEventWrapper, which lacks the information on where the cursor is located. Is there some way to access the mouse pointer information?

Answer

This should work

  @reflectable
  void mousemove(CustomEventWrapper event, [_]) {
    MouseEvent mouseEvent = event.original;
    print('x: ${mouseEvent.client.x}');
    print('y: ${mouseEvent.client.y}');
  }