Center element at mouse position

Drag element: can you center the drag element on the mouse position? And at the same time the action control element position? Thanks for each suggestion.

you may add a usecase as a center on touchstart/mousedown will result in a not so fine jump before dragging ....

Someone may have a better way of doing this.

Set the on drag to control position and run a javascript function

The function will wait until drag ends and then centre on the mouse.

center on mouse after (13.0 KB)

Things to note

The Gesture coords fall in line with the mouse coords.
But this coords are not the HypeDocuments coords, they are the windows

The element position is being registered within the HypeDocument's element's coords and not the windows..


The HypeDocument may or may not have Scale check on to fit the width/height of the body of the page.

Screenshot 2020-12-01 at 17.42.06

So we need to know the position of the HypeDocument's element within the window.
The main area of difference will normally be left. The top is normally alway 0.
For example the HypeDocument's element's left without scale, can be 199px

Document not scaled

X will be beyond 0

As shown in the browser here

Document scaled

X will be 0

As shown in the browser here

Screenshot 2020-12-01 at 17.49.07


We therefore need to know the HypeDocument's element coords

And deduct the HypeDocument's element's Left position from the drag gestures X position( at the end of drag )

We then deduct the elements left/2 from that result, to get it's center.

(GestureX - hypeDocumentLeft ) - (elementWidth/2)

We then set the left of the element to this result.

The top is a little simpler but the same idea.
But we can just use the gestures Y and the elements Height/2


This should work with or without scale set.
I have left a 1s timing in for the change but just for this example.

Code used :

if  (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd ){

var GestureX = event['hypeGestureXPosition'];     // Get the horizontal coordinate
var GestureY = event['hypeGestureYPosition'];     // Get the vertical coordinate
 //-- Get element width, height 
var elementWidth = hypeDocument.getElementProperty(element, 'width')
var elementHeight = hypeDocument.getElementProperty(element, 'height')

//-- get the Hypdcoments position in the window.  
var hypeDocumentClientRect = document.getElementById(hypeDocument.documentId()).getBoundingClientRect()
var hypeDocumentLeft = hypeDocumentClientRect.left
 var newElementLeft = (GestureX -  hypeDocumentLeft )  -  (elementWidth/2)
 var newElementTop = GestureY-(elementHeight/2)
hypeDocument.setElementProperty(element, 'left', newElementLeft,  1, 'easeinout')
 hypeDocument.setElementProperty(element, 'top', newElementTop , 1, 'easeinout')

}![Screenshot 2020-12-01 at 17.49.36|690x230](upload://sCtxMHxLIQBE1aXgaabzAvcpT8S.jpeg)

that's right. an additional movement during drag start is not a good idea...

this looks good, i will test it in my project, thanks