This repository was archived by the owner on Sep 15, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 15, 2026. It is now read-only.
Draw correct overlay for transformed elements (use getBoxQuads) #639
Description
This would be possible with the getBoxQuads API, I've workin on a polyfill for it: https://github.com/jogibear9988/getBoxQuadsPolyfill
Activity
[-]Draw correct overlay for transformed elements[/-][+]Draw correct overlay for transformed elements (use gteBoxQuads)[/+][-]Draw correct overlay for transformed elements (use gteBoxQuads)[/-][+]Draw correct overlay for transformed elements (use getBoxQuads)[/+]jogibear9988 commentedon Aug 23, 2024
@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 commentedon Aug 26, 2024
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 commentedon Aug 26, 2024
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 commentedon Aug 26, 2024
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 commentedon Aug 26, 2024
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 commentedon Aug 26, 2024
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 commentedon Aug 27, 2024
@argyleink I've started to work on this. see: #643
Could you review if I do it in the correct way?
argyleink commentedon Aug 27, 2024
looks like you're on track 👍🏻
jogibear9988 commentedon Aug 27, 2024
Padding & Margin extensions work now:
Only the texts of padding & margin need to be positioned correctly.
jogibear9988 commentedon Aug 27, 2024
@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
jogibear9988 commentedon Aug 8, 2026
I'll work on this again... ;-)
My polyfill is much better now, but also chrome has now a native implementation: https://chromium-review.googlesource.com/c/chromium/src/+/8039580
jogibear9988 commentedon Aug 8, 2026
pull req: #643
jogibear9988 commentedon Aug 22, 2026
@argyleink
it's now finished, and also the API landed in chrome, so can you review the pull?
argyleink commentedon Aug 22, 2026
I dont have access anymore, but you're welcome to fork.
sorry and ty!