moveable-control-box misplaced when used with svg g elements(Safari)

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://daybrush.com/moveable/

MIT License

10.08k stars 618 forks source link

moveable-control-box misplaced when used with svg g elements(Safari) #643

Closed IIIvan37 closed 2 years ago

IIIvan37 commented 2 years ago

Environments

Framework name: React
Framework version:17.0.2
Moveable Component version: react-moveable 0.32.3
Testable Address: Minimal CodeSandbox

Description

When using the Moveable component with a SVGGElement as target, the control box is not at the right position (origin at the top left of the svg). The element g is positioned with a transform="translate(x y)". The behavior is the one expected with Chrome as well as with Firefox, not on Safari.

Safari

Chrome

daybrush commented 2 years ago

@IIIvan37

I'll fix this bug. Thank you.

daybrush commented 2 years ago

@IIIvan37

lit-moveable 0.6.4
moveable 0.29.4
preact-moveable 0.31.4
react-compat-moveable 0.17.4
react-moveable 0.32.4
svelte-moveable 0.21.4
vue-moveable 2.0.0-beta.11
vue3-moveable 0.4.4
ngx-moveable 0.26.4

moveable's new version is released. Check it again.

IIIvan37 commented 2 years ago

@daybrush

A problem probably related to this issue is still present. When a rotate is present in the transform of the "g" element the position of the control box is incorrect with Safari.

Previous example updated https://codesandbox.io/s/priceless-marco-hkh9i0?file=/src/App.js

IIIvan37 commented 2 years ago

@daybrush

Sorry, I didn't set the right example in my last message. The example with a rotate, not working under Safari

https://codesandbox.io/s/gppxkg

daybrush commented 2 years ago

@IIIvan37 It was my transform calculation mistake.

Try 0.32.8-beta.1 version. Thank you :)