Proposal: getCornerPoints()

[jogibear9988]

What problem are you trying to solve?

For a designer application you need the 4 corner points of a element to draw overlays.

What solutions exist today?

You only could use the getBoundClientRect API, or combine all transformations and positionings and calculate the real element position manually

How would you solve it?

Add an API to Element (getCornerPoints) wich returns an array of 4 points wich are the transformed points according to window.

Anything else?

sample what I need: https://node-projects.github.io/web-component-designer-demo/index.html?html=%3Cbutton%20style=%22width:80px;height:30px;position:absolute;left:175px;top:107px;transform:rotate(-45deg);%22%3EButton%3C/button%3E
(click on the button to see the overlay)
This works now, but is slow and error prone. And it does not work correctly for transformed SVG element parts.

[annevk]

This is prolly better pitched against w3c/csswg-drafts as they maintain CSSOM View & friends. Could you open an issue there?

[jogibear9988]

there exists an API for this: "getBoxQuads"
https://www.w3.org/TR/cssom-view/#geometry
https://caniuse.com/mdn-api_document_getboxquads

linked issue about other missing APIs on SVG/MathML wich could be used to polyfill this API
w3c/csswg-drafts#10514

[jogibear9988]

Seems there is already an issue at css repo:

w3c/csswg-drafts#1543
but it is closed.

and another one linkin it:
w3c/csswg-drafts#1129

[jogibear9988]

https://issues.chromium.org/issues/41163543

[jogibear9988]

polyfill: https://github.com/jogibear9988/getBoxQuadsPolyfill