Graph Management

Node Manager Panel

The Node Manager is located above the generator interface to the left. It allows you to add new rooms to your dungeon graph.

Features

• Room Type Dropdown: Select from five available room types
  • RectangularSmall, RectangularMedium, RectangularLarge
  • CorridorNarrow, CorridorWide
• Add Node Button: Creates a new room with an auto-generated ID
• Auto-ID Assignment: Rooms are automatically numbered starting from 0
  • IDs are strings but use numeric values (“0”, “1”, “2”, etc.)
  • The system finds the next available ID if you delete rooms

Room Properties

Each room node has the following properties:

• ID: Unique identifier (auto-generated)
• Type: One of the five room types
• Label: Displayed name (defaults to the ID)
• Color: Visual color based on type (gray for rooms, red for corridors)
• Radius: Size in pixels (8-24px depending on type)

Connection Manager Panel

The Connection Manager is located above the generator interface to the right. It allows you to create connections (links) between rooms.

Features

• Start Room Dropdown: Select the first room to connect
• End Room Dropdown: Select the second room to connect
• Add Connection Button: Creates a bidirectional link between the two rooms

Connection Validation

The Connection Manager enforces several rules:

1. Unique Connections: Prevents duplicate connections between the same two rooms
2. Self-Connection Prevention: Cannot connect a room to itself
3. Connection Limits: Enforces maximum connections per room type
   • Rectangular rooms: max 4 connections
   • Corridors: max 2 connections
4. Node Existence: Both rooms must exist in the graph

The “Add Connection” button will be disabled if adding a connection would violate any of these rules.

Connection Properties

Each connection has the following properties:

• Source: Starting room node
• Target: Ending room node
• Color: Visual color (semi-transparent gray)
• Length: Preferred distance in the visualization (128px)
• Bidirectional: Connections work in both directions

Connections are normalized so that the node with the smaller ID is always the source.

Graph Templates

Located at the very top of the generator interface, templates provide pre-built dungeon layouts.

Available Templates

Each template button loads a different configuration:

• Pre-defined room types and positions
• Pre-configured connections
• Ready-to-generate layouts

Warning: Selecting a template will replace your entire current graph. Make sure to generate your dungeon image first if you want to save your work.

Visualization Tabs

Layout Visualiser Tab

Displays an interactive force-directed graph visualization powered by d3-graph-controller.

Features:

• Nodes automatically arrange themselves using physics simulation
• Collision detection prevents node overlap
• Link forces maintain preferred spacing
• Node size reflects room type
• Color coding: gray for rooms, red for corridors

Physics Configuration:

• Charge force: Slight repulsion between nodes
• Collision force: Strong boundary enforcement
• Link force: Maintains 128px preferred distance
• Centering: Disabled (allows natural spread)

Dungeon Layout Tab

Generates the final dungeon image using the backend API.

Features:

• Converts graph to backend API format
• Sends POST request to /api/dungeon/generate
• Displays returned PNG image
• Shows loading state during generation

Data Transformation:

• Room IDs converted from strings to integers
• Connections normalized to fromId/toId pairs
• Optional width/height parameters (default 512x512)

Rooms Tab

Lists all rooms in a table format.

Columns:

• Room ID
• Room Type
• Delete button (×)

Actions:

• Click delete (×) to remove a room
• Deleting a room automatically removes all connected links

Connections Tab

Lists all connections in a table format.

Columns:

• Source Room ID
• Target Room ID
• Delete button (×)

Actions:

• Click delete (×) to remove a connection
• Does not affect the connected rooms themselves