Moveable controls not really following mouse cursor when scaling

[dizayn-design]

Environments

• Framework name: React
• Framework version: 17.0.2
• Moveable Component version: 0.30.3
• Testable Address(optional):

Description

When I snatch the control to scale the object, the control doesn't follow the cursor properly. I would expect that the scaling happens that way that the corner of the object (the control) always being at the cursor's position.

...
<Moveable
          target={ref.current}
          scalable={true}
          draggable={true}
          onScale={e => (ref.current!).style.transform = e.transform}
          onDrag={e => (ref.current!).style.transform = e.transform}
          renderDirections={['sw', 'nw', 'se', 'ne']}
        />
  <div ref={ref} style={{width: '100px', height: '100px', background: 'red', transform: 'translate(200px, 200px)'}}>
    foo
  </div>
...

[daybrush]

@dizayn-design

• moveable 0.28.0
• react-moveable 0.31.1
• preact-moveable 0.30.0
• ngx-moveable 0.24.0
• svelte-moveable 0.18.0
• lit-moveable 0.5.0
• vue-moveable 2.0.0-beta.6
• vue3-moveable 0.3.0

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

[dizayn-design]

react-moveable is now at 0.31.1 but unfortunately the issue remains

[daybrush]

@dizayn-design

Check react-moveable 0.32.3 version. Thank you :)

[dizayn-design]

@daybrush sorry for being silent for a month. I'm going to be more active in the project wich depends on moveable. Unfortunaltey even with react-moveable 0.32.7 the problem remains

[daybrush]

@dizayn-design

Is it still the same in 0.38.1? I tested it in Firefox right now and it works.

If not, check the Firefox version/Windows or Mac.

[dizayn-design]

@daybrush I've tested it on firefox 103.0.2 with react-moveable 0.38.2. It is still not resolved unfortunately. It even feels like it got worse.

[daybrush]

@dizayn-design

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0"

react-moveable 0.38.2

There is no problem on my computer.

It also works normally on Mac and Windows. What's the difference?

https://codesandbox.io/s/nhyvxt?file=/src/App.tsx

[dizayn-design]

@daybrush thanks for sharing your sample. Indeed your sample works properly on both firefox and chrome. But as you can see, you're using different attributes on the Moveable component than I do. Is my approach wrong, or is it buggy?

[daybrush]

@dizayn-design

I'm not sure either.. Can you please provide a demo.

[dizayn-design]

@daybrush here you go: https://codesandbox.io/s/tender-parm-z42jwf

[daybrush]

@dizayn-design

Your demo also works well on Windows and Mac.

what is your pc

Also tell me the useragent.

[dizayn-design]

you mean by "well" that the mouse pointer is always positioned on the nodes during scaling right? This is indeed the case in your demo, but not in mine, at least for me. I use windows. As device, the issue remains on both zbook 15 and vivobook 15 pro.

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

[daybrush]

@dizayn-design

I understand what you said now.

sorry. I only thought about the size of the cursor.

onScale={(e) => (ref!.style.transform = e.afterTransform)}
onDrag={(e) => (ref!.style.transform = e.transform)}

or scale based on the center.

onScaleStart={e => e.setFixedDirection([0, 0])}
onScale={(e) => (ref!.style.transform = e.afterTransform)}
onDrag={(e) => (ref!.style.transform = e.transform)}

[dizayn-design]

wow, that first line has fixed it, thanks!