Table of Contents Link to heading

• Summary
• Key Design Patterns
  • Frontend Patterns
  • Backend Patterns
• Architecture Overview
  • Frontend Structure
  • Backend Structure
• Key Benefits
• Setup Instructions
• Design Pattern Impact
• Demo Video

Summary Link to heading

A collaborative drawing application with undo/redo capabilities, built with Angular (frontend) and Spring Boot (backend), demonstrating clean architecture and design pattern implementation.

Key Design Patterns Link to heading

Frontend Patterns Link to heading

1. Factory Method Pattern (shapeFactory/) Link to heading

• Implementation: Shape creation through ShapeFactory and concrete classes (circle.ts, rectangle.ts)
• Benefits:
  • Encapsulates shape creation logic
  • Enables easy addition of new shape types
  • Centralizes shape configuration management
• Code Example:

  this.shapeFactory.factoryClass(/* params */).get();
  

2. Observer Pattern Link to heading

• Implementation: RxJS Observables in KonvaService
• Benefits:
  • Asynchronous handling of backend responses
  • Decouples UI components from API communication
  • Enables reactive programming paradigm
• Code Example:

  this.konvaService.resize(...).subscribe(...);
  

3. Singleton Pattern Link to heading

• Implementation: Angular services (KonvaService, ShapeFactory)
• Benefits:
  • Single instance across application
  • Consistent state management
  • Efficient resource utilization

4. Command Pattern Link to heading

• Implementation: Operation classes for undo/redo
• Benefits:
  • Encapsulates drawing operations as objects
  • Enables transactional behavior
  • Simplifies history management

Backend Patterns Link to heading

1. Memento Pattern (Memento.java, Originator.java, CareTakerController.java) Link to heading

• Implementation:
  • Originator: Manages current state
  • Memento: State snapshot storage
  • CareTaker: Undo/redo stack management
• Benefits:
  • Clean state management separation
  • Efficient history tracking
  • Low memory footprint through deep cloning
• Class Diagram:

  Originator <--> Memento
  CareTaker manages Memento history
  

2. Strategy Pattern Link to heading

• Implementation: Different serialization strategies (JSON/XML)
• Benefits:
  • Interchangeable file format handling
  • Easy addition of new formats
  • Decoupled serialization logic

Architecture Overview Link to heading

Frontend Structure Link to heading

app/
├── components/           # UI components
├── services/             # Business logic
│   └── konva.service.ts  # API communication
└── models/
    └── shape/            # Shape implementations
        └── factory/      # Factory pattern

Backend Structure Link to heading

src/main/java/
├── model/                # Domain models
│   ├── Memento.java
│   └── Originator.java
├── controller/           # REST endpoints
└── util/                 # Helper classes

Key Benefits Link to heading

1. State Management

   • Memento pattern provides robust undo/redo capabilities
   • Deep cloning ensures state isolation
   • CareTaker maintains clean operation history

2. Extensibility

   • Factory pattern enables easy shape additions
   • Strategy pattern supports multiple file formats
   • Observer pattern allows asynchronous operations

3. Maintainability

   • Clear separation of concerns
   • Decoupled components
   • Type-safe implementations

4. Performance

   • Batch drawing operations
   • Efficient state cloning
   • Layer-based rendering

Setup Instructions Link to heading

1. Backend

   mvn spring-boot:run
   

2. Frontend

   npm install
   ng serve
   

Design Pattern Impact Link to heading

This architecture demonstrates how proper pattern implementation leads to:

• Clear separation between presentation and business logic
• Testable and modular components
• Scalable feature additions
• Maintainable state management
• Robust error handling

Demo Video Link to heading