Cursor styling could be improved

[Unruly-Coder]

Environments

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

Description

Css variable could be used to pass rotation value to the css layer. This approach allows for precise control over cursor styling, including the rotation cursor

When specifying a viewContainer, cursor styling is applied to this container. Tt currently exhibits an issue where these styles are only added after the initial pixel drag. This results in cursor flickering when fast dragging occurs. To improve this behavior, CSS classes could be added immediately upon mouse button down, eliminating the flickering issue associated with the first pixel drag.

[daybrush]

@Crazy-Ivan

The rotation cursor is made of SVG for each 15 degree angle. So, it is actually difficult to use css variables.

And I will consider adding a class at the start point.

Thank you :)

[Unruly-Coder]

@daybrush ah yes you are right, that would not work. However the variable could contain entire svg code, like www.tldraw.com did. Still it would be nice to have possibility to setup own cursor images. That could be achieved by allowing to pass function which will return return data/svg string. Anyway those are just suggestion :) Thank you!

[daybrush]

@Crazy-Ivan

Looks like good code.

It seems like this is also possible. thanks.

--cursor-degree120: url(...);


cursor: var(--cursor-degree120);