Action to disable hypes “Control Element Position”

Feature Requests
1

as asked in the thread above it'll be great to have a built in ability to stop/pause the behavior.

workarounds are ineffective as hype overwrites css-properties in some cases ....

nice to have

2 Likes
2

Wow, I just hit this problem this weekend. Well, it wasn't really a problem for my project, but I remember thinking something like — The drag event would be better if I could turn it off.

@JimScott seems to have posted a good fix to the problem in the other thread though.

3

Thanks for the request. I’d have to think a bit about how to do this and how far to take it as it is basically making action handlers animatable.

1 Like
4

Yes, but then release the instant value change key frame to. So, things don’t get confusing with more instant animations having a duration.

Another way would be a generic API solution (that requires more commands to do stuff with them, thought):

var handler = hypeDocument.getActionHandlerById(element.id)
handler.doStuff()

or more specific without the doStuff overhead…:

hypeDocument.cancelDragHandlerById(element.id)

This would invoke the cancel action anyway tied to the running dragging in progress

2 Likes
5

as disabling the drag requires a logic operation I'd support a API-only-solution ...

1 Like
6

Yeah, definitely. It might be that API-only is the route to go as this is a difficult visualization; though in this case if it is API-only one might as well just use javascript with a flag from the get-go with the On Drag action.

7

What flag?

I looked at an easy way to create a draggable element with JavaScript. I didn't see anything as easy as simply using Hype's "On Drag" event. and "Control Element Position".

8

I mean a custom flag that you set yourself to determine if/when you want to move the element.

Generally speaking you would use event['hypeGestureXPosition'] and event['hypeGestureYPosition'] and then set the coordinates via hypeDocument.setElementProperty().

(I suspect this won’t work quite right with flexible layout though since the gesture positions are in non-flexible coordinate space).

9

That doesn’t really work as the updates happen on the element itself. Meaning setting the position shifts the coordinate space and catapults the element away. It can work with a proxy or when using offsetX and offsetY but that doesn’t take the click origin into account.

10

Well, templates about to hit Photics.com have the fix...

zoom = window.getComputedStyle(hypeDocument.getElementById("scale")).transform.replace("matrix(", "").split(",")[0];

"Scale" is the element group that does the scaling / flexing. That ratio can then be used to normalize the mouse/touch events. That code gets the "X" ratio. If it's stretched, then you'd need the Y value too.

…but that's not a very Hype-like solution.

In an ideal world, it would be a Hype JavaScript API... similar to the Get/Set combo... where you could simply set "draggable" to "True" / "False".

When I was researching this, apparently, "draggable" is an element attribute — HTML Drag and Drop API — but it didn't quite do what I thought it would do.

2 Likes