GraphView features broken on Unity 2022.3.13f1

[Sadyk]

Hi,

I was unsure about where I should put this thread, I putted it here since I didn’t really found a more suitable place.

I have a GraphView based utility that I developed for a project a few years ago. This utility works great, it is based on the experimental package GraphView and it allows me to create complex narrative structures. The project I made it for was from 2021.3.13f1.

I am currently working on a new project on 2022.3.13f1 and tried to import this utility and at the beginning it was flawless, until I tried to create nodes that have extra output ports.

It seems it just doesn’t create them at all, instead it shows some elements bad placed and doesn’t even create the ports. What used to look like this:

Now looks like this:

The code is exactly the same, here I can show you the code I am using to create new options:

        public void AddChoicePort(string portText = "")
        {
            var generatedPort = GetPortInstance(this, Direction.Output, Port.Capacity.Multi);
            var portLabel = generatedPort.contentContainer.Q<Label>("type");
            generatedPort.contentContainer.Remove(portLabel);

            var outputPortCount = outputContainer.Query("connector").ToList().Count();
            var outputPortName = $"Option{outputPortCount}";


            var textField = new TextField()
            {
                name = "TextField",
                value = (portText.Equals("")) ? outputPortName : portText
            };
            textField.RegisterValueChangedCallback(evt => generatedPort.portName = evt.newValue);
            generatedPort.contentContainer.Add(new Label("  "));
            generatedPort.contentContainer.Add(textField);
            var deleteButton = new Button(() => RemovePort(generatedPort))
            {
                text = "X"
            };
            generatedPort.contentContainer.Add(deleteButton);
            generatedPort.portName = outputPortName;
            generatedPort.name = outputPortName;
            outputContainer.Add(generatedPort);
            RefreshPorts();
            RefreshExpandedState();
        }

It is really frustrating since documentation doesn’t show any reason why this might happen, there is almost no resources online about this and there is no error or issue with the code, since it is implemented following the documentation and it worked perfectly on 2021 version.

• Is there a change I am unaware of that I need to take into account to make this work?
• Is my only solution to downgrade the project? Since remaking a narrative tool from scratch seems like an overkill.

I have checked the current docs and don’t see a reason why this shouldn’t work.

I appreciate your time, any insight that might help me look on the right direction will be really apreciated.

Thanks

[CodeSmile]

This looks like a styling issue. Perhaps general changes made to UI Toolkit affect this.
Since you aren’t on the latest patch release I’d try updating first (25f1 I believe is the most recent).
And if the issue persists, use the UI Toolkit debugger to analyze that node’s elements and styles, ideally compare it with the 2021.3 version to look for any differences that you can straighten out yourself.

[Sadyk]

Hi CodeSmile,
I’ve tried to upgrade as you said but it didnt make a difference.
I’ve been also inspecting through the debugger but cant really figure out nothing wrong:

All the output section is displaced, but all elements that are inside of the OptionsNode have max-width:none and width:auto, so as far as I know everything should be in place. And even on other elements that dont use the output as much but have the data in other parts dont have any problem and scale nicely. Whatever the issue seems to be with the #output element… If it really is a styling issue I cant figure out what parameter is breaking it.

[Sadyk]

Okey, after tweeking some time I figured out that by adding the following:

OptionsNode #output, EventSwitchNode #output {
    max-width: 75%;
}
OptionsNode #TextField, EventSwitchNode #TextField  {
    max-width: 50%;
}

Now looks as intended. Still I am not sure what caused the issue, but this workaround works for me.