powerpoint-toolbox/docs/powerpoint-toolbox-uml.md

PowerPoint Toolbox UML Diagram

This UML diagram represents the structure and relationships of the PowerPoint toolbox add-in.

classDiagram
    %% Main Application Component
    class App {
        +title: string
        +statusMessage: string
        +statusType: StatusType
        +isProcessing: boolean
        +setStatusMessage(message: string)
        +setStatusType(type: StatusType)
        +setIsProcessing(processing: boolean)
        +getStatusIcon()
    }

    %% Context Provider
    class StatusContext {
        <<Context>>
        +statusMessage: string
        +setStatusMessage: function
        +statusType: StatusType
        +setStatusType: function
        +isProcessing: boolean
        +setIsProcessing: function
    }

    %% Common UI Components
    class Section {
        +title: string
        +children: ReactNode
    }

    class ActionButton {
        +icon: ReactNode
        +onClick: function
        +disabled: boolean
        +title: string
        +appearance: string
        +className: string
        +handleClick()
    }

    %% Feature Components
    class MatchSizes {
        -validateShapeSelection(shapes): boolean
        -loadSourceShape(sourceShape, context, matchType): Promise
        -applySizeChanges(sourceShape, shapes, matchType): number
        -generateStatusMessage(resizedCount, matchType): string
        -matchSizeToFirstSelected(matchType): Promise
    }

    class MatchProperties {
        <<Component>>
    }

    class RoundImage {
        <<Component>>
    }

    class SwapPositions {
        <<Component>>
    }

    class InsertTitles {
        <<Component>>
    }

    class ConfidentialButtons {
        <<Component>>
    }

    class DraftButtons {
        <<Component>>
    }

    class ProgressBarButtons {
        <<Component>>
    }

    class AlignmentButtons {
        <<Component>>
    }

    class GridGuidelineManager {
        <<Component>>
    }

    %% Utility Types
    class OfficeTypes {
        <<Utility>>
        +getErrorMessage(error): string
        +isPictureShape(shape): boolean
        +getFirstSelectedSlide(context): PowerPoint.Slide
        +selectShapesById(slide, shapeIds): void
    }

    class CommonStyles {
        <<Styles>>
        +container: style
        +buttonGroup: style
        +actionButton: style
        +statusContainer: style
        +successStatus: style
        +warningStatus: style
        +errorStatus: style
        +statusIcon: style
        +statusText: style
    }

    %% Relationships
    App *-- StatusContext : provides
    App *-- Section : contains
    Section *-- MatchSizes : contains
    Section *-- MatchProperties : contains
    Section *-- RoundImage : contains
    Section *-- SwapPositions : contains
    Section *-- InsertTitles : contains
    Section *-- ConfidentialButtons : contains
    Section *-- DraftButtons : contains
    Section *-- ProgressBarButtons : contains
    Section *-- AlignmentButtons : contains
    Section *-- GridGuidelineManager : contains
    
    MatchSizes --> ActionButton : uses
    MatchSizes --> OfficeTypes : uses
    MatchSizes --> StatusContext : consumes
    MatchSizes --> CommonStyles : uses
    
    ActionButton --> StatusContext : consumes
    ActionButton --> CommonStyles : uses
    ActionButton --> OfficeTypes : uses
    
    %% Other components follow similar patterns
    MatchProperties --> ActionButton : uses
    MatchProperties --> StatusContext : consumes
    RoundImage --> ActionButton : uses
    RoundImage --> StatusContext : consumes
    SwapPositions --> ActionButton : uses
    SwapPositions --> StatusContext : consumes
    InsertTitles --> ActionButton : uses
    InsertTitles --> StatusContext : consumes
    ConfidentialButtons --> ActionButton : uses
    ConfidentialButtons --> StatusContext : consumes
    DraftButtons --> ActionButton : uses
    DraftButtons --> StatusContext : consumes
    ProgressBarButtons --> ActionButton : uses
    ProgressBarButtons --> StatusContext : consumes
    AlignmentButtons --> ActionButton : uses
    AlignmentButtons --> StatusContext : consumes
    GridGuidelineManager --> ActionButton : uses
    GridGuidelineManager --> StatusContext : consumes

Diagram Explanation

This UML diagram shows:

1. App Component: The main container component that provides the StatusContext to all child components.

2. StatusContext: A React context that manages status messages and processing state across the application.

3. UI Components:

   • Section: A reusable component for grouping related functionality
   • ActionButton: A reusable button component with built-in error handling and status updates

4. Feature Components: Various tools for PowerPoint manipulation:

   • MatchSizes: For matching dimensions between shapes
   • MatchProperties: For matching properties between shapes
   • RoundImage: For rounding image corners
   • SwapPositions: For swapping positions of shapes
   • InsertTitles: For inserting title slides
   • ConfidentialButtons: For adding confidential markings
   • DraftButtons: For adding draft watermarks
   • ProgressBarButtons: For managing progress bars
   • AlignmentButtons: For aligning shapes
   • GridGuidelineManager: For managing grid guidelines

5. Utility Types: Helper functions and types for Office JS API integration

6. Relationships: Shows how components are composed and how they consume the StatusContext

Project Architecture

The PowerPoint toolbox add-in follows a React-based architecture with the following characteristics:

• Component-Based Structure: The application is organized into reusable UI components
• Context API for State Management: Uses React's Context API for sharing state across components
• Office JS API Integration: Interacts with PowerPoint through the Office JS API
• Fluent UI Components: Uses Microsoft's Fluent UI for consistent styling
• Error Handling: Centralized error handling through the StatusContext

The add-in is designed to provide various tools for PowerPoint presentations, including shape manipulation, slide formatting, and layout management.