MVVM Architecture Explanation - Akhetonics/Connect-A-PIC GitHub Wiki

Overview

The Model-View-ViewModel (MVVM) pattern is crucial in this project to ensure a clear separation of concerns, making the application easier to test, maintain, and extend. It organizes the codebase in a way that separates the user interface logic from the business logic, which is particularly beneficial for complex Godot projects.

Components of MVVM

• Model: Handles the business logic and data handling without UI logic. Key components include GridManager, ComponentFactory, and ExternalPortManager.
• ViewModel: Provides a bridge between the Model and the View, encapsulating the presentation logic and state of the view. It interacts with the Model via commands and is responsible for managing the response to user inputs.
• View: Represents the UI layer, responsible for displaying the user interface and capturing user interactions. It binds to the ViewModel to send and receive updates.
• Commands: Encapsulates user actions as objects, which allows for command merging, undo operations, and transactional behavior. Managed by CommandFactory.

Benefits of Using MVVM

• Separation of Concerns: Separates the user interface from the business logic.
• Enhanced Testability: Facilitates unit testing of the business logic without the UI.
• Improved Maintainability: Makes the system easier to extend and maintain.

Mermaid Diagram of MVVM Pattern

The following diagram illustrates the interactions between the MVVM components in our project:

graph TB
    subgraph Model
        GridMgr[GridManager]
        CF[ComponentFactory]
        CM[ComponentMover]
        EPM[ExternalPortManager]
        CRM[ComponentRotator]
        SM[SelectionManager]
        TM[TileManager]
    end

    subgraph ViewModel
        GVM[GridViewModel]
        TVM[ToolViewModel]
        CVM[ComponentViewModel]
    end

    subgraph View
        GM[GameManager]
        GV[GridView]
        CV[ComponentView]
        TB[ToolBox]
    end

    subgraph Commands
        ComF[CommandFactory]
        MCC[MoveComponentCommand]
        SOLC[SwitchOnLightCommand]
        CCC[CreateComponentCommand]
    end

    GM -->|Provides| CF
    GM -->|Provides| ComF
    GM -->|Provides| GVM
    GM -->|Provides| GV
    GM -->|Provides| TB
    GM -->|Provides| TVM
    GM -->|Provides| CV
    GM -->|Provides| CVM
    GVM --> GV
    GV -.-> GVM
    GVM --> MCC
    GVM --> CCC
    GVM --> SOLC
    GV --> TB
    TB --> TVM
    TVM --> CV
    CV --> CVM
    CVM -.-> CV
    CVM --> ComF
    ComF --> MCC
    ComF --> CCC
    ComF --> SOLC
    MCC --> GridMgr
    CCC --> CF
    SOLC -.-> GridMgr
    GridMgr --> TM
    GridMgr --> CM
    GridMgr --> EPM
    GridMgr --> CRM

    classDef model fill:#f9f,stroke:#333,stroke-width:2px;
    classDef view fill:#ccf,stroke:#333,stroke-width:2px;
    classDef viewModel fill:#cfc,stroke:#333,stroke-width:2px;
    classDef commands fill:#fcf,stroke:#333,stroke-width:2px;
    classDef central fill:#ff9,stroke:#333,stroke-width:4px;

    class GM central;
    class GridMgr,CF,CM,EPM,CRM,SM,TM model;
    class GV,CV,TB view;
    class GVM,TVM,CVM viewModel;
    class ComF,MCC,SOLC,CCC commands;