Support for Mouse Events

Adobe XD UXP Plugin API
1

Support for mouse events like mouse over, mouse out and mouse down.

Example Code

 h("span", { style: { flex:"1" }, onmouseover(e) { console.log("mouseover") }, onmouseout(e) { console.log("mouseout") } }, "");

Use Case
Genkai is writing a plugin that has a list component and image buttons in her plugin. When the user hovers over the row she wants to change the background color. When the users mouses down she wants to change the color.

2

While I couldnā€™t agree more with this request, couldnā€™t you ā€“ for that use-case ā€“ use :hover in you CSS? That even feels a bit cleaner (to me) than doing it with JSā€¦

1 Like
3

That would help in some cases but in other cases I want to get the keyboard properties that come with mouse events.

For example, the user has the mouse over a row inside of a list (home made) and clicks it and then the user clicks another row. Did they they have the shift key down? We donā€™t know. If they did that means they are selecting multiple rows. If they didnā€™t that means they are selecting another row.

Also, CSS :hover is not going to give you an opportunity to run any code (it will only change styles). For example, if on mouse over you want to show an image preview in a thumbnail you need to be able to get a mouse over event to create that thumbnail and then remove it in a mouse out event.

1 Like
4

Agreed, I just wanted that clarified since your stated use-case allows for this ā€œpure CSSā€ solution and thereby ā€“ in my opinion ā€“ weakens this request I agree on whole-heartedly a little.

5

XD supports a lot of the pointer events standard (pointerdown, etc.). Is that insufficient for your use case here?

1 Like
6

Kerri, whereā€™s a good place to see a list of all the supported events? I tried searching the docs for pointerdown and mousedown and both had zero hits, so itā€™s hard to see where we could tell that one event is supported and the other one isnā€™t.

Looking at https://adobexdplatform.com/plugin-docs/reference/uxp/events-index.html, however, it looks like perhaps pointerdown is not supported, and only pointerenter/leave, pointermove, and click are currently working in UXP? Or might that page be out of date?

1 Like
7

I can confirm pointer events working and they have key states that work too! :slight_smile: I can also confirm thereā€™s no pointerdown or mousedown events. With the pointer events I can work around not having the pointerdown event but others may still need it.

1 Like
8

@pklaschka Iā€™d like to attempt your suggestion to set some styles on hover via CSS but I couldnā€™t find an example of how to add a class declaration.

Here is what I have so far:

var sheet = document.styleSheets[0];
sheet.addRule("row { padding-left: 20px }");

That gives me this error

[ts] Property ā€˜addRuleā€™ does not exist on type ā€˜StyleSheetā€™. [2339]

and

Error:TypeError: Cannot read property ā€˜addRuleā€™ of undefined

2nd Attempt:

var stylesheets = document.styleSheets;
var numberOfSheets = stylesheets.length;
var sheet;

if (numberOfSheets) {
	sheet = stylesheets[numberOfSheets-1];
}

var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;
var selector = "row";
var property = "padding-left";
var value = "20px";
value = property + ": " + value;
sheet.insertRule(selector + '{' + value + '}', sheet.cssRules.length);

[ts] Property ā€˜insertRuleā€™ does not exist on type ā€˜StyleSheetā€™. [2339]
TypeError: Cannot read property ā€˜insertRuleā€™ of undefined

3rd Attempt:
This seems to work to add new styles:

const cssString = `div {padding-left: 5px; border: 1px solid green;}`;
const styleTag = document.createElement("style");
styleTag.innerHTML = cssString;
document.head.insertAdjacentElement('beforeend', styleTag);
9

Yeah ā€“ we donā€™t have a fully spec-compliant CSS parser, so using <style> tags is the way to go there.

As for pointerdown ā€“ would have sworn we have it, but apparently not ā€“ probably there, the simplest option is to use click (not sure if it will have the keyboard meta keys assigned or not). So the page Peter linked to is correct.

We should definitely support the down/up variations here in the future. Iā€™m not sure mouse% events will ever happen, though, since weā€™re supporting touch-capable devices from the get-go, and donā€™t want to encourage plugin devs to use a feature that would only work with a mouse.

1 Like