playcanvas
added buttonMode for Button
Hmm I see what you mean, coming from a Flash background and using a lot Pixi.js... buttonMode is the reference. Is it called otherwise in some frameworks? Using "cursor", I'm afraid people would like to add some sprites. Here it is mostly for accessibility support, showing than the button is clickable like link in html.
So presumably you can do this from a script with:
const button = this.entity.button;
button.on('hoverstart', () => { document.body.style.cursor = 'pointer'; });
button.on('hoverend', () => { document.body.style.cursor = 'default'; });
What if I made an app that defined a custom cursor? This implicit behavior would interfere with that, right?
Essentially, I'm just wondering whether this really should be functionality the button component should be providing.
So presumably you can do this from a script with:
const button = this.entity.button; button.on('hoverstart', () => { document.body.style.cursor = 'pointer'; }); button.on('hoverend', () => { document.body.style.cursor = 'default'; });
Yeah, I used this script for adding it on my buttons in the editor:
var ButtonMode = pc.createScript('buttonMode');
ButtonMode.prototype.initialize = function()
{
this.entity.element.on('mouseenter', this.onEnter, this);
this.entity.element.on('mouseleave', this.onLeave, this);
};
ButtonMode.prototype.onEnter = function (event)
{
document.body.style.cursor = 'pointer';
};
ButtonMode.prototype.onLeave = function (event)
{
document.body.style.cursor = 'default';
};
Almost all my buttons have it.
What if I made an app that defined a custom cursor? This implicit behavior would interfere with that, right?
Hmm certainly, in Pixi.js which has buttonMode you can override cursor via: this.renderer.plugins.interaction.cursorStyles.pointer = "url('assets/curstom-cursor.png'), auto"; then it seems buttonMode is no more concerned.
Essentially, I'm just wondering whether this really should be functionality the button component should be providing.
My first concern here is accessibility, I'm used with html5 to know when an element is clickable and all the serious game I made uses this button mode.
I wonder if this is a Web vs non-Web viewpoint as engines like Unity, you have to this manually in the same method as Will's code above https://docs.unity3d.com/ScriptReference/Cursor.SetCursor.html
@yaustar I somehow agree, but if you have thousand Buttons this is a process you have to do for each one... yikes. Here in PlayCanvas, I added my script above for each button. Maybe thanks to Editor API it might somehow be automated. Did I mention, I created a buttonMode too for Unity overriding default behavior? ;)
Don't you make your buttons as template assets? Would that make managing them all easier?
@willeastcott indeed that would be a good start. But since it's just a basic script on a button, later I would need to manage other template for similar buttons or deal with nested templates which might be too much for this use case.
After a review, we don't believe this belong to the engine, as it touches DOM stuff.
