Re: Transformed Pointer Coordinates?

From: Robert O'Callahan <robert@ocallahan.org<mailto:robert@ocallahan.org>>
Reply-To: "robert@ocallahan.org<mailto:robert@ocallahan.org>" <robert@ocallahan.org<mailto:robert@ocallahan.org>>
Date: Monday, February 11, 2013 4:56 PM
To: Jacob Rossi <Jacob.Rossi@microsoft.com<mailto:Jacob.Rossi@microsoft.com>>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com<mailto:jackalmage@gmail.com>>, Simon Fraser <smfr@me.com<mailto:smfr@me.com>>, Doug Schepers <schepers@w3.org<mailto:schepers@w3.org>>, "public-pointer-events@w3.org<mailto:public-pointer-events@w3.org>" <public-pointer-events@w3.org<mailto:public-pointer-events@w3.org>>, "public-fx@w3.org<mailto:public-fx@w3.org>" <public-fx@w3.org<mailto:public-fx@w3.org>>, www-style list <www-style@w3.org<mailto:www-style@w3.org>>
Subject: Re: Transformed Pointer Coordinates?
Resent-From: <public-pointer-events@w3.org<mailto:public-pointer-events@w3.org>>
Resent-Date: Monday, February 11, 2013 4:56 PM

partial interface Node {
  DOMPoint convertPointFromNode(Node from, DOMPoint pt);
}

'pt' is in CSS pixels relative to the top-left of "from"'s first border-box. Returns a point in CSS pixels relative to the top-left of the destination node's first border-box.


Havng convertPointFromNode() return a border-box  location sounds inconvenient to me, at least in the case of a canvas. Handling canvas pointer events seems like a common use case that should be simple. Returning coordinates relative to the border box means that most canvas-based applications will have to craft conversion code that does something like:

function myCanvasEventLocation(event)
{
    var style = document.defaultView.getComputedStyle(myCanvas, null);

    function styleValue(property) {
        return parseInt(style.getPropertyValue(property), 10) || 0;
    }

    var borderBoxXY = myCanvas.convertPointFromNode(document, new DOMPoint(event.clientX, event.clientY));
    var canvasX = borderBoxXY.x - myCanvas.clientLeft - styleValue("padding-left");
    var canvasY = borderBoxXY.y - myCanvas.clientTop - styleValue("padding-top");

    return new DOMPoint(canvasX, canvasY);
}

I think that something simpler, like a PointerEvent method that returned a content-box relative location, would be helpful.

- Hans