Display Strategy Definition - Grim-/Talented GitHub Wiki

Tree Display Strategies

The Talented mod provides multiple strategies for displaying upgrade trees. Each strategy offers different layout algorithms and behaviors to suit various needs.

Configuring Display Strategies

Display strategies are defined using XML:

<Talented.TreeDisplayStrategyDef>
    <defName>VerticalStrategy</defName>
    <strategyClass>Talented.VerticalTreeStrategy</strategyClass>
</Talented.TreeDisplayStrategyDef>

Available Strategies

Vertical Tree Strategy

A traditional tree layout that arranges nodes vertically, either top-to-bottom or bottom-to-top.

Key Features

  • Supports multiple start nodes with automatic spacing
  • Handles branching paths from any node
  • Maintains consistent vertical spacing between levels
  • Automatically adjusts horizontal distribution based on branch complexity

Configuration Options

<Talented.TreeDisplayStrategyDef>
    <defName>VerticalStrategy</defName>
    <strategyClass>Talented.VerticalTreeStrategy</strategyClass>
    <!-- Optional: Constructor parameters -->
    <startFromBottom>true</startFromBottom>
    <horizontalPadding>40</horizontalPadding>
    <verticalPadding>30</verticalPadding>
</Talented.TreeDisplayStrategyDef>

Force-Directed Strategy

A dynamic layout that uses physics-like forces to position nodes. Nodes repel each other while connections act like springs.

Key Features

  • Dynamic, organic-looking layouts
  • Interactive node positioning
  • Path-based node grouping
  • Mouse avoidance behavior
  • Smooth animations

Behavior Parameters

  • REPULSION_FORCE: Strength of node separation (default: 50)
  • ATTRACTION_FORCE: Strength of connection pull (default: 0.1)
  • PATH_COHESION_FORCE: Strength of path grouping (default: 0.3)
  • MIN_SEPARATION: Minimum distance between nodes (default: 100)
  • MOUSE_AVOID_RADIUS: Distance at which nodes flee from mouse (default: 150)
<Talented.TreeDisplayStrategyDef>
    <defName>ForceDirected</defName>
    <strategyClass>Talented.ForceDirectedStrategy</strategyClass>
    <padding>50</padding>
</Talented.TreeDisplayStrategyDef>

Fixed Position Strategy

Positions nodes at exact coordinates specified in the node definitions, scaling to fit the available space.

Key Features

  • Precise node positioning
  • Automatic scaling to fit viewport
  • Maintains relative positions
  • Simple and predictable layout

Configuration

<Talented.TreeDisplayStrategyDef>
    <defName>FixedPosition</defName>
    <strategyClass>Talented.FixedPositionStrategy</strategyClass>
    <margin>20</margin>
</Talented.TreeDisplayStrategyDef>

Creating Custom Strategies

You can create custom display strategies by:

  1. Creating a class that implements ITreeDisplayStrategy
  2. Implementing the required methods:
    Dictionary<UpgradeTreeNodeDef, Rect> PositionNodes(
        List<UpgradeTreeNodeDef> nodes, 
        Rect availableSpace,
        float nodeSize,
        float spacing
    );
    void DrawToolBar(Rect toolbarRect);
  3. Creating an XML def that references your strategy class

Strategy Requirements

Your strategy must handle:

  • Node positioning within available space
  • Proper spacing and padding
  • Connection visualization
  • Optional toolbar UI elements
  • Node visibility requirements

Best Practices

  1. Performance

    • Cache calculations where possible
    • Optimize for large node counts
    • Consider using spatial partitioning for collision checks
  2. User Experience

    • Maintain consistent node spacing
    • Avoid overlapping nodes
    • Consider viewport boundaries
    • Provide smooth transitions if using animation
  3. Extensibility

    • Make key parameters configurable
    • Support different node types
    • Handle dynamic tree changes

Examples

Simple Horizontal Strategy

<Talented.TreeDisplayStrategyDef>
    <defName>HorizontalTree</defName>
    <strategyClass>MyMod.HorizontalTreeStrategy</strategyClass>
    <spacing>100</spacing>
    <nodeSize>64</nodeSize>
</Talented.TreeDisplayStrategyDef>

Radial Layout Strategy

<Talented.TreeDisplayStrategyDef>
    <defName>RadialLayout</defName>
    <strategyClass>MyMod.RadialTreeStrategy</strategyClass>
    <radius>300</radius>
    <startAngle>0</startAngle>
    <spreadAngle>360</spreadAngle>
</Talented.TreeDisplayStrategyDef>

Technical Notes

  • All strategies must handle null or empty node lists
  • Consider edge cases like single nodes or disconnected subgraphs
  • Implement proper cleanup in case of strategy changes
  • Handle dynamic tree updates efficiently
  • Consider adding debug visualization options
⚠️ **GitHub.com Fallback** ⚠️