Draw correct overlay for transformed elements (use getBoxQuads)

[jogibear9988]

This would be possible with the getBoxQuads API, I've workin on a polyfill for it: https://github.com/jogibear9988/getBoxQuadsPolyfill

[jogibear9988]

@argyleink would it be interesting to have it in visbug? should I look to implement it and create a pull req?

(If you'd like to see it in action, i us it now in my designer: https://node-projects.github.io/web-component-designer-demo/index.html)

[argyleink]

visbug is definitely interested =) drawing higher accuracy bounding boxes would be super nice.

the code for padding boxes, margin boxes and generic bounding boxes gets pretty hairy, but you're welcome to check it out and clean it up with a more modern api! send any questions you have my way, happy to help you and keep you feeling productive in the code.

[jogibear9988]

Should only the Code be changed to use getBoxQuads, or the complete resize mechanism, so you don't resize the outer box, but the element like in my designer (when it is rotated or transformed in another way):

[jogibear9988]

In VisBug the display of Margin/Padding of Transformed Elements doesn't work. This would be easy to fix after the switch to getBoxQuads, as the Api supports the calculation of the Quads with Padding & Margin (used in my designer)

It looks like this in VisBug currently:

[argyleink]

Should only the Code be changed to use getBoxQuads, or the complete resize mechanism, so you don't resize the outer box, but the element like in my designer (when it is rotated or transformed in another way):

your tool is showing the desired design yes, where padding, margins and rotations are accurately reflected. if we're lucky, the resize feature should "just work".

[jogibear9988]

the getBoxQuads Api also has functions to transform points, this i use in my sample (https://jogibear9988.github.io/getBoxQuadsPolyfill/) to transform mouse clicks to a untransformed rect, with this adjustments of resize (if needed) should be easy.

[jogibear9988]

@argyleink I've started to work on this. see: https://github.com/GoogleChromeLabs/ProjectVisBug/pull/643 Could you review if I do it in the correct way?

[argyleink]

@argyleink I've started to work on this. see: #643 Could you review if I do it in the correct way?

looks like you're on track 👍🏻

[jogibear9988]

Padding & Margin extensions work now:

Only the texts of padding & margin need to be positioned correctly.

[jogibear9988]

@argyleink If we merge this at some time, maybe you can up prioritze the issue to implement the geometry Utils interface at chrome: https://www.w3.org/TR/cssom-view-1/#the-geometryutils-interface there is already an issue for this: https://issues.chromium.org/issues/41163543 cause the polyfill for sure is slower, and it could not work correctly for transformed SVGs or MathML Elements