https://www.steveruiz.me/posts/rotating-shapes

 

Steve Ruiz

 1. Home
 2. About
 3. Archive

Fixing the Drift in Shape Rotations

Sunday, September 19, 2021
[svg]
Fixing the Drift in Shape RotationsFixing the Drift in Shape
Rotations

Ever notice in Figma that if you rotate a few shapes and then rotate
them back, they'll end up in a different place?

It's not just Figma! Excalidraw supports this kind of rotation and
has the same issue.

...and so does my own project, tldraw, which is where I ran into the
issue.

Side note: most other design tools don't support this kind of
rotation. Shapes either rotate around their own centers or inherit
rotation from a group. I wish they would though!

Anyway, here's what's happening. When you start rotating a selection,
you need to pick a point to rotate around. We're all using the
average center of the selected shapes--and we keep using this point
until you stop rotating.

However, the rotated shapes probably have a different average center;
which means that your second rotation (ie to rotate things back) is
pivoting around a different point. And that's what causes the change
of position.

Honestly, I was extremely glad to find this in Figma and other apps
because I was worried it was a bug in my own rotation implementation.

It is even a bug though? It's weird that rotating a group and then
rotating it back doesn't put them back in the same place. Let's fix
it!

And here's the fix: once a user starts a rotation, we hold onto the
the center point; if the user rotates again, we re-use that same
point; and we only give it up once the user makes a new selection.

To their credit, canva seems to be solving the problem is the same
way. The original rotation point is preserved until a user makes a
new selection.

Ok, that's it! Hope you enjoyed this extra-obscure edition of design
tool micro-UX. If you catch any rotation-related bugs in tldraw, let
me know!

---------------------------------------------------------------------

Look familiar? This blog post was adapted from my Twitter thread.

  * 
    Creating a Zoom UI

    All the code you need to control a camera in a zoom-able,
    pan-able UI for an infinite canvas.

    Thursday, August 5, 2021
  * 
    Perfect Dragging

    How to drag shapes the right way. And yes, there is a wrong way!
    But trust me, this is the right way.

    Wednesday, October 20, 2021

Steve Ruiz (c) 2021

hey click here