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

PowerPoint Toolbox Project Structure UML

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

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.