Search Unity

Zooming and panning with UIElements?

Discussion in 'UI Toolkit' started by eses, Sep 23, 2019.

  1. eses

    eses

    Joined:
    Feb 26, 2013
    Posts:
    2,637
    Hi,

    having spent a couple of days implementing zooming and panning canvas with GUI elements with old IMGUI + editor window, I decided to ask this (with zero time spent reading UIElements docs):

    A. Is it possible to zoom Editor window Rect contents in similar manner to GUI.Matrix, but with less issues, like clipping on left/up directions?

    B. Is there some sort of "canvas" like world space and viewport concept in UIElements or do we still need to simulate view position / zooming manually by moving objects or by using some view position offset to place stuff?

    I'm asking this so that I can consider if I want to already try using UIElements or not :).
     
  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    All major GraphView-based tools (ex. ShaderGraph, VFX Graph) released in the last year+ use UIElements. If you try any of them, you'll see how UIElements performs when zooming and panning.

    Zooming and panning in UIElements is really easy. Elements are hierarchical and have a transform. You are free to transform them (and their children) any way you want.
     
    eses likes this.
  3. tossrock

    tossrock

    Joined:
    Mar 7, 2018
    Posts:
    12
    Sorry for bumping an old thread, but it seemed relevant - how are you supposed to transform them, when the
    VisualElement.transform
    property, the
    VisualElement.style
    property, and the
    VisualElement.worldBounds
    property are all read-only? I don't understand what API I should be using to make transform changes programmatically.

    edit: I now realize that while the
    style
    property is read-only, you can make changes to it that are persistent.
     
    Last edited: Jul 3, 2021
  4. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi tossrock,

    Just to make this clear both VisualElement.transform and VisualElement.style are not read only.
    ITransform interface has setter for position, rotation and scale.
    IStyle interface has setter for all style properties.