How to achieve zoom functionality on an editor window using UI Toolkit?

Hey All,
How would I achieve the ability to allow users to zoom in & out for my node-based editor similar to ShaderGraph?

I was thinking about changing the scale of every element in my root visual element hierarchy but there might be a better approach I'm not aware of.

Thanks for the help!

 

You can achieve a global zoom by setting your root element's transform.scale property directly. This will affect the scale of all of its children. For example:

public class ZoomableWindow : EditorWindow
{
[MenuItem("Window/ZoomableWindow")]
static void Init()
{
GetWindow(typeof(ZoomableWindow)).Show();
}

void Awake()
{
var root = new VisualElement();
var resetButton = new Button {text = "Reset Zoom"};
resetButton.RegisterCallback<ClickEvent>(ev => root.transform.scale = Vector3.one);
var zoomButton = new Button {text = "Zoom x 1.5"};
zoomButton.RegisterCallback<ClickEvent>(ev => root.transform.scale *= 1.5f);
root.Add(resetButton);
root.Add(zoomButton);
rootVisualElement.Add(root);
}
}

 

Yeah that worked for me thanks!