ISSUE-136 (getCoordsAt): Consider adding MouseEvent.getCoordsAt(element)

[Web Applications Working Group Issue Tracker]

ISSUE-136 (getCoordsAt): Consider adding MouseEvent.getCoordsAt(element)

http://www.w3.org/2008/webapps/track/issues/136

Raised by: Doug Schepers
On product: 

Jonathan Watt 
<http://lists.w3.org/Archives/Public/www-dom/2010OctDec/0013.html>:
[[
Background:

Positioning elements based off the position of a pointer event is regularly
tripping people up in SVG, and with the advent of CSS-transforms, I imagine also
in HTML.

To position an element based off the position of a pointer event you need to get
the coordinates of the event in the local coordinate system of the element. To
do that currently authors have to get the *correct* element-to-root transform,
invert it, create an SVGPoint, copy the event coordinates to the SVGPoint, then
use the inverted transform to transform the point and read back the coordinates.
For something so simple, it's not obvious that this is what you need to do, or
even how to do it.

Proposal:

To make life easier for authors I'd like to propose the addition of a
'getCoordsAt' method to the MouseEvent interface. This method would be passed
the element at which the local coordinates of the event are required, and return
an object implementing the SVGPoint interface[1] (or a new interface
implementing 'x' and 'y' properties).

I've uploaded a JavaScript implemented demo of this method here:

  http://jwatt.org/svg/tmp/mouse-relative-positioning.svg

See also the comments in the source code.
]]

[[
// This is a demonstration of getCoordsAt() - a proposed addition to the DOM
// interface 'MouseEvent' - that would save authors from having to work with
// matrices when positioning elements based on the location of a pointer event.
//
// This file demonstrates getCoordsAt for SVG only, but it would be just as
// useful in HTML, especially with the advent of CSS-transforms.

// JavaScript implementation of getCoordsAt for SVG:
 
if (!MouseEvent.prototype.getCoordsAt) {
  MouseEvent.prototype.getCoordsAt = function(element) {
    var SVGNS = 'http://www.w3.org/2000/svg';
    var svg = document.createElementNS(SVGNS, 'svg');
    var pt = svg.createSVGPoint();
    pt.x = this.clientX;
    pt.y = this.clientY;
    return pt.matrixTransform(element.getScreenCTM().inverse());
  }
}
]]