Create a grab state image for cursor

Using JavaScript with Hype
1

Hello, I would like to have 3 states for the cursor: click, drag and grab.

I was able to manage the click and drag, but I would like to have a grab state as the user click in order to drag around.

Cursor.zip (19 KB)

I know that are many states in the Inspector area for the mouse but did not find the right version.

img
img932×696 8.27 KB

As always, thank you for your support!

2

Note that the On Drag event object has a hypeGesturePhase field:

When receiving a callback for the "On Drag" event with the "Run JavaScript…" action the event object also offers information about whether the current drag gesture has just started or ended, was canceled, or the coordinates were updated. To get that state, access the hypeGesturePhase property in the event object:
hypeDocument.kHypeGesturePhaseStart
hypeDocument.kHypeGesturePhaseMove
hypeDocument.kHypeGesturePhaseEnd
hypeDocument.kHypeGesturePhaseCancel

So I'd probably do something like change the drag() function to combine with the grab() and use this as a condition to determine which to show:

if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd || event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseCancel) {
	element.style.cursor = "url('${resourcesFolderName}/drag.png'), auto";
} else {
	element.style.cursor = "url('${resourcesFolderName}/grab.png'), auto";
}
3 Likes
3

Thank you @jonathan !

1 Like