Re: [CSSOM] Revisiting transforms and getBoundingClientRect()

I think the relative methods are a step in the right direction. I
would also like to see a way to get relative coordinates for mouse
events.

var coord = element.getQuads(mouseEvent).

Another thing that keeps coming up is to do these things async
(preferably with deferred/promises) so that we do not trigger
unexpected layouts. It is not uncommon for code to query the rect just
to set some style property. If multiple code snippets do this
consecutively then we get multiple layouts which lead to very slow
applications.

Using Q ( https://github.com/kriskowal/q )

var p1 = el1.getQuads();
...
var p2 = el2.getQuads();
...
Q.all([p1, p2]).then(function([q1, q2]) {
  ...
});


erik








On Tue, Sep 6, 2011 at 18:13, Robert O'Callahan <robert@ocallahan.org> wrote:
> Reviving this old thread...
>
> What do people think about the following as the most general API?
>
> "element.getQuads(relativeTo)" returns a QuadList which is a list of Quads.
> Each Quad contains floats x0,y0,x1,y1,x2,y2,x3,y3, where each value is in
> CSS pixels relative to the top-left of the border-box of the first CSS box
> of the element relativeTo. If relativeTo has no CSS boxes or is somehow
> incomparable to the element (e.g., in a different window), return a
> zero-length list. Similar to getClientRects, there would be one quad per CSS
> border-box for the element, in content order.
>
> Add element.getContentQuads(relativeTo),
> element.getPaddingQuads(relativeTo), and element.getMarginQuads(relativeTo)
> to return the other kinds of boxes.
>
> We could add getBoundingRect(relativeTo),
> getBoundingContentRect(relativeTo), getBoundingPaddingRect(relativeTo), and
> getBoundingMarginRect(relativeTo), returning ClientRect, if that's helpful.
> Or we could add getBoundingQuad variants.
>
> We could make relativeTo optional and default to the viewport, if that's
> helpful.
>
> Things you can't do with this API:
> -- Get values relative to the content-box, padding-box or margin-box of
> relativeTo. You can call relativeTo.get*Quads(relativeTo) to get offsets for
> relativeTo's first box and then easily do the math.
> -- Get values relative to any box of relativeTo other than the first box.
> Working around that is hard given the possibility that boxes for the same
> element might have different ancestor transforms (which is true with CSS
> Regions I think). But I'm not sure if there's any need for such information.
> To fix, we would need a way to refer to a particular box of an element, and
> I have no idea how authors would want to do that.
>
> Rob
> --
> "If we claim to be without sin, we deceive ourselves and the truth is not in
> us. If we confess our sins, he is faithful and just and will forgive us our
> sins and purify us from all unrighteousness. If we claim we have not sinned,
> we make him out to be a liar and his word is not in us." [1 John 1:8-10]
>

Received on Wednesday, 7 September 2011 16:56:09 UTC