149 lines
3.8 KiB
Markdown
149 lines
3.8 KiB
Markdown
# PowerPoint Toolbox Project Structure UML
|
|
|
|
This UML diagram represents the file and directory structure of the PowerPoint toolbox add-in.
|
|
|
|
```mermaid
|
|
classDiagram
|
|
%% Project Structure
|
|
class Repository {
|
|
<<Root>>
|
|
Configuration Files
|
|
Source Code
|
|
Assets
|
|
Documentation
|
|
}
|
|
|
|
%% Configuration Files
|
|
class ConfigFiles {
|
|
<<Config>>
|
|
.eslintrc.json
|
|
.gitignore
|
|
.hintrc
|
|
babel.config.json
|
|
manifest.xml
|
|
package.json
|
|
tsconfig.json
|
|
webpack.config.js
|
|
}
|
|
|
|
%% Source Code Structure
|
|
class SourceCode {
|
|
<<Source>>
|
|
/src
|
|
}
|
|
|
|
class Commands {
|
|
<<Module>>
|
|
/src/commands
|
|
commands.html
|
|
commands.ts
|
|
}
|
|
|
|
class Taskpane {
|
|
<<Module>>
|
|
/src/taskpane
|
|
index.tsx
|
|
taskpane.html
|
|
}
|
|
|
|
class Components {
|
|
<<Module>>
|
|
/src/taskpane/components
|
|
ActionButton.tsx
|
|
AlignmentButtons.tsx
|
|
App.tsx
|
|
commonStyles.tsx
|
|
ConfidentialButtons.tsx
|
|
DraftButtons.tsx
|
|
GridGuidelineManager.tsx
|
|
Header.tsx
|
|
InsertTitles.tsx
|
|
MatchProperties.tsx
|
|
MatchSizes.tsx
|
|
ProgressBarButtons.tsx
|
|
RoundImage.tsx
|
|
Section.tsx
|
|
SwapPositions.tsx
|
|
}
|
|
|
|
class Types {
|
|
<<Module>>
|
|
/src/taskpane/types
|
|
office-types.ts
|
|
}
|
|
|
|
%% Assets
|
|
class Assets {
|
|
<<Resources>>
|
|
/assets
|
|
edison-16.png
|
|
edison-32.png
|
|
edison-64.png
|
|
edison-80.png
|
|
edison-128.png
|
|
edison-filled.png
|
|
}
|
|
|
|
%% Documentation
|
|
class Documentation {
|
|
<<Docs>>
|
|
/docs
|
|
DEVELOPERS.md
|
|
USER_GUIDE.md
|
|
}
|
|
|
|
%% Relationships
|
|
Repository *-- ConfigFiles : contains
|
|
Repository *-- SourceCode : contains
|
|
Repository *-- Assets : contains
|
|
Repository *-- Documentation : contains
|
|
|
|
SourceCode *-- Commands : contains
|
|
SourceCode *-- Taskpane : contains
|
|
|
|
Taskpane *-- Components : contains
|
|
Taskpane *-- Types : contains
|
|
|
|
%% Dependency Relationships
|
|
Components --> Types : imports
|
|
Commands --> Components : may use
|
|
```
|
|
|
|
## Project Structure Explanation
|
|
|
|
This UML diagram illustrates the file and directory organization of the PowerPoint toolbox add-in:
|
|
|
|
1. **Repository Root**: Contains configuration files, source code, assets, and documentation.
|
|
|
|
2. **Configuration Files**: Various configuration files for the development environment, including:
|
|
- manifest.xml: Office add-in manifest
|
|
- package.json: NPM package configuration
|
|
- webpack.config.js: Webpack bundler configuration
|
|
- tsconfig.json: TypeScript configuration
|
|
- babel.config.json: Babel configuration
|
|
- .eslintrc.json: ESLint configuration
|
|
- .gitignore: Git ignore rules
|
|
- .hintrc: Hint configuration
|
|
|
|
3. **Source Code Structure**:
|
|
- **/src/commands**: Command-related files for Office ribbon integration
|
|
- **/src/taskpane**: Main taskpane UI implementation
|
|
- **/components**: React components for the UI
|
|
- **/types**: TypeScript type definitions
|
|
|
|
4. **Assets**: Icon files in various sizes for the add-in
|
|
|
|
5. **Documentation**: Developer and user documentation
|
|
|
|
## Build and Execution Flow
|
|
|
|
The PowerPoint toolbox add-in follows this general build and execution flow:
|
|
|
|
1. Source code is written in TypeScript and React
|
|
2. Webpack bundles the code according to webpack.config.js
|
|
3. The Office add-in manifest (manifest.xml) defines how the add-in appears in PowerPoint
|
|
4. When loaded in PowerPoint, the add-in renders the taskpane UI
|
|
5. The taskpane components interact with PowerPoint through the Office JS API
|
|
|
|
This structure follows Microsoft's recommended patterns for Office add-in development using React and TypeScript.
|