Cursor style doesn't change when edgeDraggable: true

daybrush / moveable

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

https://daybrush.com/moveable/

MIT License

10.08k stars 618 forks source link

Cursor style doesn't change when edgeDraggable: true #703

Closed pclancysc closed 2 years ago

pclancysc commented 2 years ago

Environments

Framework name: ngx-moveable
Framework version: 0.28.2
Moveable Component version:
Testable Address(optional):

Description

When resize is enabled on east and west edges and edge drag is also enabled the cursor doesn't change to a "drag/move" icon when the pointer is on an edge that will drag.

Sinced the edge is a div that only has the classes moveable-line and moveable-direction I can't find a way to show the appropiate cursor. If the n, e, s w edge could be detected on hover the class names could be modified to indicate which edge the pointer is over and then apply the appropiate cursor style.

e.g.

Pointer over top edge: moveable-line moveable-direction.moveable-n Pointer over left edge: moveable-line moveable-direction.moveable-w

Is there any other solution that doesn't involve adding these classes in code?

daybrush commented 2 years ago

@pclancysc

lit-moveable 0.9.0
moveable 0.32.0
preact-moveable 0.34.0
react-compat-moveable 0.20.0
react-moveable 0.35.0
svelte-moveable 0.24.0
vue-moveable 2.0.0-beta.26
vue3-moveable 0.7.0
ngx-moveable 0.29.0

moveable's new version is released. When edgeDraggable is used, the cursor changes to move.

pclancysc commented 2 years ago

@daybrush Thanks for the speedy fix. One thing that may or may not be an issue is that when I upgraded ngx-moveable I had errors regarding React types. I had to install @types/react to compile.

daybrush commented 2 years ago

@pclancysc

I'll check. Most likely I set the type wrong.