Implement GUI Timeline View

[toymak3r]

Overview

Add a visual timeline view to the Goethe GUI editor that provides an intuitive way to visualize and edit dialog flow.

Background

The current GUI editor provides a node-based view for editing dialogs. A timeline view will offer an alternative perspective that's more suitable for understanding the flow and timing of dialog sequences.

Requirements

Core Timeline Features

• Visual Timeline Representation
  • Horizontal timeline showing dialog nodes in sequence
  • Node duration visualization
  • Branching paths visualization with visual connectors
  • Zoom and pan controls
  • Story Node Types: Dialog nodes, Decision nodes, History arcs, and other narrative elements
• Interactive Editing
  • Drag-and-drop node reordering
  • Click-to-edit node properties
  • Visual feedback for selections
  • Undo/redo support for timeline operations
  • Path Management: Create, edit, and visualize multiple story paths
• Timeline Navigation
  • Zoom levels (seconds, minutes, hours)
  • Pan and scroll controls
  • Jump to specific nodes
  • Timeline markers and annotations
  • Path Traversal: Navigate through different story branches

Advanced Features

• Multi-track Support
  • Separate tracks for different characters
  • Track visibility controls
  • Track color coding
  • Track-specific operations
  • Character Color Coding: Visual indication of speaking character based on character colors
  • Character-Specific Tracks: Dedicated tracks for each character with their signature colors
• Story Node Visualization
  • Dialog Nodes: Standard dialog interactions with character indicators
  • Decision Nodes: Choice points with branching visualization
  • History Arcs: Story progression and character development tracking
  • Condition Nodes: Conditional logic and branching points
  • Effect Nodes: Game state changes and consequences
  • Connector Visualization: Clear visual paths between nodes showing story flow
• Timeline Annotations
  • Add notes and comments to timeline
  • Bookmark important moments
  • Scene transition markers
  • Audio/video sync points
  • Story Arc Markers: Visual indicators for major story developments
• Export and Sharing
  • Export timeline as image (PNG, SVG)
  • Export timeline data (JSON, CSV)
  • Share timeline snapshots
  • Timeline templates
  • Story Flow Diagrams: Export complete story flow with all paths

Integration with Existing GUI

• Dual View Mode
  • Toggle between node view and timeline view
  • Synchronized selection between views
  • Consistent editing operations
  • Shared undo/redo history
• Real-time Updates
  • Live preview of dialog changes
  • Automatic timeline updates
  • Conflict resolution for concurrent edits
  • Performance optimization for large timelines

User Experience

• Intuitive Interface
  • Familiar timeline controls (like video editors)
  • Keyboard shortcuts for common operations
  • Context menus for advanced features
  • Tooltips and help system
  • Visual Story Flow: Intuitive representation of story progression
• Character-Based UX
  • Color-Coded Characters: Each character has a distinct color for easy identification
  • Speaking Indicators: Visual cues showing which character is speaking in each node
  • Character Tracks: Dedicated horizontal tracks for each character
  • Character Avatars: Small character portraits in timeline nodes
• Story Path Visualization
  • Branch Visualization: Clear visual representation of story branches and choices
  • Path Highlighting: Highlight active story path when navigating
  • Decision Points: Prominent visualization of choice nodes and their consequences
  • Story Arc Tracking: Visual indicators for character development and story progression
• Performance
  • Smooth scrolling and zooming
  • Efficient rendering of large timelines
  • Background processing for heavy operations
  • Memory management for large projects

Technical Details

Technology Stack

• Frontend: HTML5 Canvas or SVG for timeline rendering
• Framework: Electron with modern web technologies
• State Management: Vue.js or React for component state
• Graphics: WebGL for performance-critical rendering

Timeline Data Structure

class TimelineView {
    constructor() {
        this.zoom = 1.0;
        this.scrollX = 0;
        this.scrollY = 0;
        this.tracks = [];
        this.markers = [];
        this.annotations = [];
        this.storyPaths = [];
        this.activePath = null;
    }
    
    // Timeline operations
    addNode(node, track, position);
    moveNode(nodeId, newPosition);
    deleteNode(nodeId);
    addMarker(time, label, color);
    addAnnotation(time, text, type);
    
    // Story path operations
    createStoryPath(name, color);
    addNodeToPath(nodeId, pathId);
    highlightPath(pathId);
    navigatePath(pathId);
    
    // View operations
    zoomIn(factor);
    zoomOut(factor);
    pan(deltaX, deltaY);
    scrollToTime(time);
    fitToView();
}

class TimelineTrack {
    constructor(name, color, characterId) {
        this.name = name;
        this.color = color;
        this.characterId = characterId;
        this.visible = true;
        this.nodes = [];
        this.height = 60;
        this.characterAvatar = null;
    }
}

class StoryNode {
    constructor(id, type, data) {
        this.id = id;
        this.type = type; // 'dialog', 'decision', 'condition', 'effect', 'history'
        this.data = data;
        this.characterId = data.characterId;
        this.position = { x: 0, y: 0 };
        this.connections = [];
        this.color = this.getNodeColor();
    }
    
    getNodeColor() {
        // Return character color or node type color
        return this.characterId ? getCharacterColor(this.characterId) : getNodeTypeColor(this.type);
    }
}

class StoryPath {
    constructor(id, name, color) {
        this.id = id;
        this.name = name;
        this.color = color;
        this.nodes = [];
        this.connections = [];
        this.isActive = false;
    }
}

Performance Considerations

• Rendering: Use virtual scrolling for large timelines
• Updates: Batch DOM updates for smooth performance
• Memory: Implement object pooling for timeline elements
• Caching: Cache rendered timeline segments

Acceptance Criteria

• Timeline view renders correctly with sample data
• Basic timeline operations (add, move, delete nodes) work
• Zoom and pan controls function smoothly
• Timeline integrates with existing node editor
• Export functionality works correctly
• Performance is acceptable with large timelines
• User interface is intuitive and responsive
• Character Color Coding: Each character has distinct colors and visual indicators
• Story Node Types: All node types (dialog, decision, condition, effect, history) render correctly
• Path Visualization: Multiple story paths are clearly visualized with connectors
• Character Tracks: Character-specific tracks show speaking indicators and avatars
• Story Flow: Visual flow between nodes accurately represents story progression

Priority

High - This is part of the short-term roadmap and significantly improves user experience.

Labels

• enhancement
• gui
• timeline
• user-experience
• short-term
• high-priority

Estimated Effort

• Frontend Development: 4-5 weeks
• Backend Integration: 2-3 weeks
• Testing and Polish: 2-3 weeks

Future Enhancements

• Audio/Video Integration: Sync timeline with media files
• Collaborative Editing: Real-time timeline collaboration
• Advanced Analytics: Timeline usage statistics and insights
• Plugin Support: Extensible timeline plugins
• Advanced Story Visualization: 3D story graphs and immersive story mapping
• AI-Powered Story Analysis: Automatic story structure analysis and suggestions
• Interactive Story Playthrough: Play through story paths directly in the timeline
• Story Branching Analytics: Analysis of story complexity and player choice impact