Fabric.js: hoverCursor on selectable:false

Created on 13 Jun 2014  路  13Comments  路  Source: fabricjs/fabric.js

When setting 'selectable:false' to an object, the property hoverCursor doesn't have anymore influence. Is that intended? Mouseover-Events are still fired. Seems illogical for me (in most cases, you won't need a hoverCursor on non-selectable elements, but at least you could have the choice).

http://jsfiddle.net/4qcAL/

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

possible_feature

Most helpful comment

There is a workaround to have a cursor pointer and not interactive element with those props:

       selectable: true,
        lockMovementY: true,
        lockMovementX: true,
        hasBorders: false,
        hasControls: false,
        hoverCursor: 'pointer',

All 13 comments

This is as intended. If an object is unselectable, what's the point of showing cursor if you can't select it?

For UI-Elements, like simple Buttons:
http://jsfiddle.net/h8vkK/3/
Button 1 has the behaviour "simulated" with two extra props set, Button 2 has the behaviour as wished, just the cursor can't be influenced.

I Agree. I also made buttons that should not be selectable but still show a pointer cursor.

I have selectable = false and objets should link to another page, so I need to set hoverCursor = pointer on a mouseover event.
Is there a way around this?

I Agree. I also made buttons !

yes non selectable but clickable events should be considered as an option

It looks like this was reverted without any discussion in issue #3634. I have the same reason for needing this feature as other commenters on this issue - namely creating "buttons" on a fabric.js canvas that should show a pointer icon on hover, but should not be selectable/editable.

Perhaps this should be made an option, since it seems both behaviours are desirable in different circumstances?

i think there is a way to change cursor on hover with selectable false. let me check.

@asturur I'm seeing this as well - it does not work in this example:

fabricObject.set({
  selectable: false,
  hoverCursor: 'pointer'
});

Setting selectable: true makes hover work again.

Same for me. Only setting selectable to true, which is not what I need allows me to change the cursor type...

There is a workaround to have a cursor pointer and not interactive element with those props:

       selectable: true,
        lockMovementY: true,
        lockMovementX: true,
        hasBorders: false,
        hasControls: false,
        hoverCursor: 'pointer',

Seems a bit presumptuous to dictate what cursors people can can't use in certain situations.

No Cursor for you!

With great power comes great responsibility. yada yada. Let us choose to make bad design choices if we want to. You're not the boss of my cursor. I am.

@mt404 i m not sure what was the message you wanted to give to us.

I may have done bad decisions building features for fabricJS. This issues is from 2017 and i m not sure what is the current situation.

The whole controls/cursors are under rewriting with a more permissive model

Was this page helpful?
0 / 5 - 0 ratings