[cssom-view] Element (or Node) should contain the properties offset... (offsetParent, offsetLeft, ...)

[jogibear9988]

Problem

I'm writing a Designer Application, where I show overlays for all Elements (like the Dev Tools). For this to work, I need to calculate the the corners of the rect of an Element. This works using getBoundingClientRect, but only if the Element is not transformed. If the Element for example is rotated, this will not return the points of the element, but the outer rect. And also a element could be inside of another transformed element (and so on). I know calculate the combined transformation of the element, but for this I need the position of the element inside of it's container. This works on HTMLElements (cause they have offsetLeft and offsetTop), but not on SVG or MathML Elements.

As also MathML and SVG Elements could be aligned inside of HTMLElements, they should also contain these Properties. And also, as they also could be positioned absolutely, they should contain the "offsetParent", to get to wich they are positioned to.

Additional, as also a TextNode could be positioned inside of a container, I think it should also get the "offset..." Properties. So maybe it should be added to the "Node" Interface instead of the "Element" interface.

The spec is here: https://www.w3.org/TR/cssom-view-1/#extensions-to-the-htmlelement-interface I think it should be changed to "Element" instead of "HTMLElement"

[jogibear9988]

see: https://github.com/whatwg/html/issues/10445

[emilio]

Does GeometryUtils.getBoxQuads give you what you want? Seems like it would do exactly what you want?

[jogibear9988]

maybe, I do not find any browser wich implements this API: getBoxQuads

[jogibear9988]

seems only firefox has an implementation behind a flag: https://caniuse.com/mdn-api_document_getboxquads

[jogibear9988]

Polyfills for Geometry API:

https://github.com/trusktr/geometry-interfaces https://github.com/maxmaximov/getBoxQuads

They do not work with transformed elements. (Cause that is the hard part) (My Designer Code could work with transformed HTMLElements (https://github.com/node-projects/web-component-designer/blob/92baadd12ebc6821e2bbaac6b4728a6baa49ef0b/packages/web-component-designer/src/elements/helper/TransformHelper.ts#L148C21-L148C49) Problem is, I need the offset in the container wich I do not get for SVG and MathML (and textNodes)

[chrishtr]

I'm writing a Designer Application, where I show overlays for all Elements (like the Dev Tools).

"DevTools overlay" does seem like a use case for GeometryUtils.getBoxQuads that can't be done in other ways, because of transforms...otherwise anchor positioning would work it seems.

Right now the specification for GeometryUtils is inadequate, that'd have to be finished before shipping in a browser. @tabatkins you also mentioned previously you had use cases, were they the same has the one reported here?

[jogibear9988]

@chrishtr Should I create an extra issue, that "getBoxQuads" should be implemented? (I didn't know of that API when I wrote this issue :-) )

These here is about "offset...." - Properties on non HTMLElements, wich is needed if you want to polyfill "getBoxQuads". (Wich I still think should exist on all Elements)

[jogibear9988]

I've created a polyfill for the getBoxQuads API based on my designer https://github.com/jogibear9988/getBoxQuadsPolyfill But cause of the missing elments... Properties, it lacks SVG support

[chrishtr]

@chrishtr Should I create an extra issue, that "getBoxQuads" should be implemented? (I didn't know of that API when I wrote this issue :-) )

No need to do that.

[SebastianZ]

For reference, here's the link to GeometryUtils.getBoxQuads in the spec.: https://drafts.csswg.org/cssom-view/#dom-geometryutils-getboxquads

Sebastian

[jogibear9988]

And FF issues about the implementation and the remove of the flag: (of the getBoxQuads)

https://bugzilla.mozilla.org/show_bug.cgi?id=918189 https://bugzilla.mozilla.org/show_bug.cgi?id=1107559

[jogibear9988]

The spec is here: https://www.w3.org/TR/cssom-view-1/#extensions-to-the-htmlelement-interface I think it should be changed to "Element" instead of "HTMLElement"