Question How do you move a VisualElement to the position of a mouse?

I need to move a VisualElement to the location of the mouse. I cannot use any of the OnMouse or OnPointer events to do this - I need to be able to read the mouse's position and set the VisualElement's position to it.

I have tried doing the following, but the result is that the element is placed no where near the actual location of the mouse:

Code (CSharp):

1. Vector2 pos = Mouse.current.position.ReadValue();
2.  
3. DragViewer.style.top = pos.y;
4. DragViewer.style.left = pos.x;

Edit: It seems that the two systems are using different coordinates, but I have not been able to successfully convert.

 

Thank you, @uBenoitA!

This is an area that I'd suggest looking at improving the documentation for. I spent so many hours trying to find the answer to this and came up empty handed. It seems likely that it'd be a common workflow that folks would want to do.

 

I had used this solution and windows' display zoom was messing with it. With an absolute pixel position it was correct on 100% zoom but wrong on other settings. I had to use Screen.width and height to convert the position to a percent value instead of a pixel value to get it to work. Panel settings -> Scale mode was on "constant physical size" for this, "constant pixel size" did not have this problem but was unsuitable for our project otherwise. Versions were 1.0.0-preview.14 on Unity 2021.1.0f1.

 

I Think it is a bug that WorldToLocal doesn't include the scaling of the ui in its calculation

 

void OnDragPerformEvent(DragPerformEvent e)
{
......

Vector2 localPos = (e.currentTarget as VisualElement).ChangeCoordinatesTo(contentViewContainer, e.localMousePosition);
....


}

This is the best I have found.

 

Found a solution when dealing with Scale Mode: Scale with Screen Size - this seems to get the desired local position.

Code (CSharp):

1. RuntimePanelUtils.ScreenToPanel(someVisualElement.panel, mousePosition);

reference: https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEngine.UIElements.RuntimePanelUtils.html

Would be nice for Unity to make this function more accessible instead of hiding it in an extension class that's barely documented - it seems like a very common use case whenever you want to make UI that follows or reacts with the real cursor position.

 

Awesome, thanks for the tip @sol-erides, it's extremely useful.

Code (CSharp):

1. var mousePosition = ** take mouse position from unity input system **;
2. Vector2 mousePositionCorrected = new Vector2(mousePosition.x, Screen.height - mousePosition.y);
3. mousePositionCorrected = RuntimePanelUtils.ScreenToPanel(defaultCanvasUIDocument.rootVisualElement.panel, mousePositionCorrected);

 

If anyone uses a mouse click for raytrace, you can move a game object to where the ray hits, then use this to make the UI follow an in-world transform.

Code (CSharp):

1.  
2. public class UITrackTransform : MonoBehaviour
3. {
4.     public Transform TransformToFollow;
5.     private VisualElement m_Bar;
6.     private Camera m_MainCamera;
7.     private void Start()
8.     {
9.         m_MainCamera = Camera.main;
10.         m_Bar = GetComponent<UIDocument>().rootVisualElement.Q("Container");
11.         SetPosition();
12.     }
13.  
14.     public void SetPosition()
15.     {
16.         Vector2 newPosition = RuntimePanelUtils.CameraTransformWorldToPanel(
17.             m_Bar.panel, TransformToFollow.position, m_MainCamera);
18.         newPosition.x = (newPosition.x - m_Bar.layout.width / 2);
19.         m_Bar.transform.position = newPosition;
20.     }
21.  
22.     private void LateUpdate()
23.     {
24.         if (TransformToFollow != null)
25.         {
26.             SetPosition();
27.         }
28.     }
29. }
30.