Add UML diagrams to documentation directory

2025-03-31 20:31:31 +02:00
parent 626b7aaa7a
commit e82df2f308
5 changed files with 529 additions and 1 deletions
@@ -0,0 +1,195 @@
+# PowerPoint Toolbox UML Diagram
+
+This UML diagram represents the structure and relationships of the PowerPoint toolbox add-in.
+
+```mermaid
+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.