118 lines
3.9 KiB
Markdown
118 lines
3.9 KiB
Markdown
# PowerPoint Toolbox Data Flow UML
|
|
|
|
This UML diagram represents the data flow and interaction patterns in the PowerPoint toolbox add-in.
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant UI as UI Components
|
|
participant Context as Status Context
|
|
participant Office as Office JS API
|
|
participant PowerPoint as PowerPoint Application
|
|
|
|
%% Initial Load
|
|
User->>UI: Open Add-in
|
|
UI->>Office: Initialize
|
|
Office->>PowerPoint: Connect
|
|
PowerPoint-->>Office: Connection Established
|
|
Office-->>UI: Ready
|
|
|
|
%% Feature Interaction (e.g., Match Sizes)
|
|
User->>UI: Click "Match Sizes"
|
|
UI->>Context: Set isProcessing(true)
|
|
UI->>Office: Get Selected Shapes
|
|
Office->>PowerPoint: getSelectedShapes()
|
|
PowerPoint-->>Office: Selected Shapes
|
|
Office-->>UI: Shape Collection
|
|
|
|
%% Processing Logic
|
|
Note over UI: Validate selection
|
|
Note over UI: Extract dimensions from first shape
|
|
Note over UI: Apply to other shapes
|
|
|
|
%% Apply Changes
|
|
UI->>Office: Update Shape Properties
|
|
Office->>PowerPoint: Apply Changes
|
|
PowerPoint-->>Office: Changes Applied
|
|
Office-->>UI: Success
|
|
|
|
%% Status Update
|
|
UI->>Context: Set statusMessage("Resized N shapes...")
|
|
UI->>Context: Set statusType("success")
|
|
UI->>Context: Set isProcessing(false)
|
|
Context-->>UI: Update UI with Status
|
|
UI-->>User: Show Success Message
|
|
```
|
|
|
|
## Data Flow Explanation
|
|
|
|
This sequence diagram illustrates the typical data flow in the PowerPoint toolbox add-in:
|
|
|
|
1. **Initialization Flow**:
|
|
- User opens the add-in in PowerPoint
|
|
- The UI initializes and connects to the Office JS API
|
|
- The Office JS API establishes a connection with PowerPoint
|
|
|
|
2. **Feature Interaction** (using "Match Sizes" as an example):
|
|
- User clicks a feature button in the UI
|
|
- The UI sets the processing state via the Status Context
|
|
- The UI requests selected shapes from the Office JS API
|
|
- PowerPoint returns the selected shapes
|
|
|
|
3. **Processing Logic**:
|
|
- The UI component validates the selection
|
|
- It extracts necessary information from the first shape
|
|
- It applies changes to the other shapes
|
|
|
|
4. **Apply Changes**:
|
|
- The UI sends updated properties to the Office JS API
|
|
- The Office JS API applies the changes in PowerPoint
|
|
- PowerPoint confirms the changes
|
|
|
|
5. **Status Update**:
|
|
- The UI updates the status message and type via the Status Context
|
|
- The Status Context updates the UI with the new status
|
|
- The user sees a success message
|
|
|
|
## Error Handling Flow
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant UI as UI Components
|
|
participant Context as Status Context
|
|
participant Office as Office JS API
|
|
participant PowerPoint as PowerPoint Application
|
|
|
|
%% Feature Interaction with Error
|
|
User->>UI: Click Feature Button
|
|
UI->>Context: Set isProcessing(true)
|
|
UI->>Office: Perform Operation
|
|
Office->>PowerPoint: Execute Command
|
|
PowerPoint-->>Office: Error Occurs
|
|
Office-->>UI: Error Response
|
|
|
|
%% Error Handling
|
|
UI->>Context: Set statusMessage("Error: ...")
|
|
UI->>Context: Set statusType("error")
|
|
UI->>Context: Set isProcessing(false)
|
|
Context-->>UI: Update UI with Error
|
|
UI-->>User: Show Error Message
|
|
```
|
|
|
|
## Component Communication Pattern
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
User([User]) --> |Interacts with| UI[UI Components]
|
|
UI --> |Updates| Context[Status Context]
|
|
UI --> |Calls| Office[Office JS API]
|
|
Office --> |Communicates with| PowerPoint[PowerPoint]
|
|
PowerPoint --> |Returns data to| Office
|
|
Office --> |Returns results to| UI
|
|
Context --> |Provides state to| UI
|
|
UI --> |Displays results to| User
|
|
```
|
|
|
|
This diagram set illustrates how data flows through the application, from user interaction to PowerPoint manipulation and back to user feedback. The architecture follows a unidirectional data flow pattern with the Status Context serving as a central state management system.
|