196 lines
6.0 KiB
Markdown
196 lines
6.0 KiB
Markdown
# 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.
|