Action to disable hypes “Control Element Position”

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 …

[x] nice to have

2 Likes

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.

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

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

as disabling the drag requires a logic operation I’d support a API-only-solution …

1 Like

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.

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”.

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).

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.

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 — https://www.w3schools.com/HTML/html5_draganddrop.asp — but it didn’t quite do what I thought it would do.

2 Likes