The Flow Graph

Managing UI logic in code (e.g., if(buttonClicked) OpenMenu()) quickly becomes a nightmare of references ("Spaghetti Code"). HookUI replaces this with Spaghetti Nodes—which are much easier to understand!

The Flow Graph is a visual representation of:

• Where the user is (Current Screen).
• What options they have (Buttons).
• Where they go next (Connections).

Anatomy of a Node

1. Screen Node

Represents a HookView.

• Header: Shows the Category / ID of the View.
• Input Port: Where flow enters (usually from another screen).
• Output Ports: Represent HookButtons found on that View. Ideally, you name your buttons explicitly for clarity.

2. Logic Nodes

• Start Node: The green entry point. When HookUIManager.Initialize() is called, the flow jumps here.
• Quit Node: Connecting a button here will close the Application (or stop Play Mode).

3. Portal Node

Sometimes you have a "Back" button on 50 different screens that all go to the Main Menu. Drawing 50 lines to the Main Menu node is messy.

• Portals act as "Wireless Transmitters".
• You create a Portal named "To_MainMenu".
• In your View, any button with ID "To_MainMenu" will automatically trigger this portal if no direct wire is found.

How it Execution Works

1. State: The HookUIManager holds a pointer to the CurrentNode.
2. Input: When you click a button, the Manager checks the CurrentNode's connections.
3. Transition:
   • If a match is found (Button ID == Port Name), it follows the wire.
   • It identifies the TargetNode.
   • It calls Hide() on the old View and Show() on the new View.

Best Practices

• Group by Feature: Keep your Main Menu flow separate visually from your Gameplay HUD flow. Use Portals to bridge them.
• Name Buttons Clearly: Btn_Play is better than Button (1). The Graph uses the ID to label the ports.