### Install Dependencies

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/00_START_HERE.md

Run this command to install all necessary project dependencies before starting development.

```bash
npm install          # Install dependencies
```

--------------------------------

### Project File Directory Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/00_START_HERE.md

Lists the main files and directories within the project, indicating the location of this starting guide.

```bash
/workspace/home/output/
├── 00_START_HERE.md              ← You are here
├── INDEX.md                      ← Main navigation & quick reference
├── MANIFEST.md                   ← File listing & documentation map
├── PROJECT_OVERVIEW.md           ← Project identity & architecture
├── APPLICATION_ENTRY.md          ← Bootstrap & initialization
├── JOINTJS_PLUS_API.md          ← JointJS+ API reference
├── MODULES_AND_EXPORTS.md       ← Module structure & dependencies
├── types.md                      ← TypeScript types & interfaces
├── configuration.md              ← Build config & environment
└── api-reference/
    ├── app-component.md          ← Root component documentation
    ├── app-module.md             ← Root module documentation
    └── app-routing-module.md     ← Routing configuration

```

--------------------------------

### Start the Angular Demo Application

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/README.md

Start the Angular development server to view the JointJS+ integration demo.

```bash
npm start
```

--------------------------------

### Start Development Server

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/00_START_HERE.md

Use this command to start the development server, typically accessible at localhost:4200. It enables live reloading for a smooth development experience.

```bash
npm start            # Start dev server at localhost:4200
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/README.md

Install all necessary Node.js dependencies for the Angular project.

```bash
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Starts the Angular development server for local testing. The server runs at http://localhost:4200 by default.

```bash
npm start
# or
ng serve
# Output: Server at http://localhost:4200
```

--------------------------------

### Initialize Paper with Frozen Rendering

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Use `frozen: true` to defer rendering until setup is complete, improving performance. Call `unfreeze()` to activate rendering.

```typescript
const paper = new dia.Paper({ frozen: true });
// ... setup ...
paper.unfreeze();  // Activate rendering
```

--------------------------------

### Service Injection Example

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-module.md

This example demonstrates how to configure a service provider within an NgModule's metadata. This is a common pattern for making services available for injection throughout the application or feature module.

```typescript
providers: [
  { provide: SomeService, useClass: SomeService }
]
```

--------------------------------

### Enable Watch Mode

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/00_START_HERE.md

This command starts the development server in watch mode, automatically recompiling and reloading the application when source files change.

```bash
npm run watch        # Watch mode for development
```

--------------------------------

### Complete JointJS Paper Initialization

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Provides a full example of initializing a JointJS paper, including creating a graph model, setting up the paper with performance optimizations like frozen state and async rendering, adding a scroller for viewport management, adding shapes, and finally attaching to the DOM and unfreezing the paper for interactivity.

```typescript
import { dia, ui, shapes } from '@joint/plus';

// 1. Create graph model
const graph = new dia.Graph({}, { cellNamespace: shapes });

// 2. Create paper with frozen state for performance
const paper = new dia.Paper({
    model: graph,
    background: { color: '#F8F9FA' },
    frozen: true,
    async: true,
    sorting: dia.Paper.sorting.APPROX,
    cellViewNamespace: shapes
});

// 3. Create scroller for viewport management
const scroller = new ui.PaperScroller({
    paper,
    autoResizePaper: true,
    cursor: 'grab'
});
scroller.render();

// 4. Add shapes to graph
const rect = new shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 50 },
    attrs: {
        label: { text: 'Hello World' }
    }
});
graph.addCell(rect);

// 5. Attach to DOM and activate
document.body.appendChild(scroller.el);
scroller.center();
paper.unfreeze();

// Now the diagram is visible and interactive

```

--------------------------------

### Unfreeze Paper for Rendering

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Shows how to unfreeze a paper instance after initial setup, enabling active rendering. This is useful when deferred rendering is required.

```typescript
const paper = new dia.Paper({ model: graph, frozen: true });
// ... perform setup ...
paper.unfreeze();  // Now rendering is active
```

--------------------------------

### Angular Empty Routes Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

An example of an empty Angular Routes array, typically used as a starting point for route definitions.

```typescript
const routes: Routes = [];  // Currently empty
```

--------------------------------

### Example Route Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Illustrates the structure of route objects used in Angular's RouterModule. This includes path, component, children, redirectTo, and pathMatch properties.

```typescript
const routes: Routes = [
  // Example route (NOT in current application)
  // {
  //   path: 'diagram',
  //   component: DiagramComponent
  // },
  // {
  //   path: '',
  //   redirectTo: 'diagram',
  //   pathMatch: 'full'
  // }
];
```

--------------------------------

### Angular Component Export Chain

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/MODULES_AND_EXPORTS.md

Illustrates the export chain for an Angular component, starting from its declaration in a module to its rendering and associated template/styles.

```text
AppComponent (declared in AppModule)
    ↓
Rendered at <app-root> selector
    ↓
HTML template: app.component.html
    ↓
Styles: app.component.scss
```

--------------------------------

### Router Outlet Directive

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

An example of the router-outlet directive, which is used to indicate where the routed component should be displayed within the application's template.

```html
<!-- Example (NOT in current application) -->
<router-outlet></router-outlet>
```

--------------------------------

### Angular Component Decorator Usage

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Example of how the Component decorator is used to define an Angular component.

```typescript
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent { }
```

--------------------------------

### Angular Empty Providers Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

An example of an empty providers array in an Angular module, indicating no custom dependency injection providers are configured.

```typescript
providers: []  // No custom providers
```

--------------------------------

### Frozen Paper Pattern for Performance

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Use the frozen paper pattern to defer rendering until all setup is complete. This prevents layout thrashing and improves load performance by rendering asynchronously.

```typescript
const paper = new dia.Paper({
    frozen: true,    // Start frozen
    async: true      // Async rendering
});

// ... add cells ...

paper.unfreeze();    // Activate rendering
```

--------------------------------

### Clone the Tutorial Repository

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/README.md

Clone the JointJS+ Angular tutorial repository from GitHub.

```bash
git clone git@github.com:clientIO/joint-plus-tutorial-angular.git
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/README.md

Change the current directory to the cloned joint-plus-tutorial-angular project.

```bash
cd joint-plus-tutorial-angular
```

--------------------------------

### Display Angular CLI Help

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Shows comprehensive help information for all available Angular CLI commands and their options.

```bash
ng help
# Shows Angular CLI help
```

--------------------------------

### Angular NgModule Decorator Usage

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Example of how the NgModule decorator is used to configure an Angular module.

```typescript
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Run Project Tests

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Execute the project's test suite using either npm or the Angular CLI.

```bash
npm test
# or
ng test
```

--------------------------------

### Development Build Output Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Illustrates the typical file structure generated during development builds. Includes HTML, JavaScript bundles, polyfills, and styles.

```text
dist/rappid-angular/
├── index.html
├── main.*.js (main bundle)
├── vendor.*.js (vendor bundle)
├── polyfills.*.js (polyfills)
├── styles.*.css (styles)
└── *.map (source maps)
```

--------------------------------

### Extending Environment Configuration with Custom Values

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Demonstrates how to add custom properties like API URLs and log levels to both development and production environment files, and how to access them in components.

```typescript
// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000',
  logLevel: 'debug',
  enableAnalytics: false,
  version: '1.0.0'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com',
  logLevel: 'error',
  enableAnalytics: true,
  version: '1.0.0'
};

// In components
import { environment } from '../environments/environment';
export class MyComponent {
  apiUrl = environment.apiUrl;
  debug = !environment.production;
}
```

--------------------------------

### Accessing DOM Element with ViewChild

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Use `@ViewChild` to get a reference to a template element. Access the native element in `ngAfterViewInit` for DOM manipulation.

```typescript
@ViewChild('canvas') canvas: ElementRef;
// Access in ngAfterViewInit:
this.canvas.nativeElement.appendChild(element);
```

--------------------------------

### Project Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/PROJECT_OVERVIEW.md

Illustrates the directory and file layout of the Joint Plus Tutorial Angular project.

```tree
joint-plus-tutorial-angular/
├── src/
│   ├── app/
│   │   ├── app.component.ts          # Root Angular component
│   │   ├── app.component.html        # Component template
│   │   ├── app.component.scss        # Component styles
│   │   ├── app.module.ts             # Root module definition
│   │   └── app-routing.module.ts     # Routing configuration
│   ├── environments/
│   │   ├── environment.ts            # Development config
│   │   └── environment.prod.ts       # Production config
│   ├── main.ts                       # Entry point
│   ├── polyfills.ts                  # Browser polyfills
│   ├── index.html                    # HTML shell
│   └── styles.scss                   # Global styles
├── angular.json                      # Angular build configuration
├── tsconfig.json                     # TypeScript configuration
├── package.json                      # Dependencies and scripts
├── karma.conf.js                     # Test runner configuration
└── README.md                         # Documentation
```

--------------------------------

### Production Build Output Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Shows the file structure for production builds, which are typically minified and do not include source maps. Optimized for deployment.

```text
dist/rappid-angular/
├── index.html
├── main.*.js (minified main bundle)
├── vendor.*.js (minified vendor)
├── polyfills.*.js (minified polyfills)
├── styles.*.css (minified styles)
└── (no source maps)
```

--------------------------------

### HTML Entry Point Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/APPLICATION_ENTRY.md

The `index.html` file is the main HTML document that Angular loads. It contains essential meta tags, links to resources, and the root component selector (`<app-root>`) where the Angular application is mounted.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RappidAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
```

--------------------------------

### Build for Production

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Compiles and bundles the Angular application for production deployment. The output will be placed in the 'dist/rappid-angular/' directory.

```bash
npm run build
```

--------------------------------

### Create and Configure a Rectangle Shape

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Demonstrates how to instantiate and configure a `shapes.standard.Rectangle` with position, size, and attributes. This is a common way to add basic shapes to a diagram.

```typescript
const rect = new shapes.standard.Rectangle({
  position: { x: 100, y: 100 },
  size: { width: 100, height: 50 },
  attrs: {
    label: {
      text: 'Hello World'
    }
  }
});
```

--------------------------------

### Template Type Safety in Angular

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Ensures template type safety by enabling `strictTemplates` in `angular.json`. This example shows how a template reference variable `#canvas` is type-checked against its corresponding component property.

```html
<div class="canvas" #canvas></div>
```

```typescript
@ViewChild('canvas') canvas: ElementRef;
// Type is checked: #canvas must exist in template
```

--------------------------------

### ViewChild Decorator for Template References

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Use the `@ViewChild` decorator to get a reference to a DOM element or a component instance within a template. It requires a selector, which can be a template reference variable string or a component type.

```typescript
@ViewChild(selector: string | Type<any>, options?: ViewChildOptions)
```

```typescript
@ViewChild('canvas') canvas: ElementRef;
```

--------------------------------

### Angular Bootstrap Entry Point

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/APPLICATION_ENTRY.md

This is the main entry point for an Angular application. It configures the environment, enables production mode if necessary, and bootstraps the root `AppModule`.

```typescript
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

```

--------------------------------

### Instantiate and Render PaperScroller

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Demonstrates how to create a new PaperScroller instance with specific options and then render it. This is typically done within an application component.

```typescript
const scroller = this.scroller = new ui.PaperScroller({
    paper,
    autoResizePaper: true,
    cursor: 'grab'
});

scroller.render();
```

--------------------------------

### Angular Build Options

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Configures the browser build process, specifying entry points, assets, and output paths.

```json
{
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/rappid-angular",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.scss"
    ],
    "scripts": []
  }
}
```

--------------------------------

### Run Tests

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/00_START_HERE.md

This command runs the project's unit and integration tests using Jasmine and Karma. Ensure all tests pass before deploying.

```bash
npm test             # Run Jasmine tests with Karma
```

--------------------------------

### Bootstrap AppModule

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-module.md

This code snippet shows how to bootstrap the AppModule using `platformBrowserDynamic` in the `main.ts` file. It catches any errors during the bootstrap process.

```typescript
// In src/main.ts
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
```

--------------------------------

### Run Project Tests

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Launches the Karma test runner with Jasmine to execute the project's unit tests.

```bash
npm test
```

--------------------------------

### Instantiate dia.Paper in Angular Application

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Demonstrates how to create a new instance of dia.Paper within an Angular component, configuring its model, background, and rendering behavior.

```typescript
const paper = this.paper = new dia.Paper({
    model: graph,
    background: {
        color: '#F8F9FA',
    },
    frozen: true,
    async: true,
    sorting: dia.Paper.sorting.APPROX,
    cellViewNamespace: shapes
});
```

--------------------------------

### RouterModule.forRoot() Options

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Configuration options for enabling route tracing, hash-based routing, scroll restoration, and custom error handlers.

```typescript
RouterModule.forRoot(routes, {
  enableTracing: false,        // Debug route events
  useHash: false,              // Use hash-based routing (#/)
  scrollPositionRestoration: 'top', // Restore scroll position
  paramsInheritanceStrategy: 'emptyOnly',
  malformedUriErrorHandler: (error, router) => {},
  errorHandler: (error) => {}
})
```

--------------------------------

### OnInit Interface

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Implement this interface to perform initialization tasks after component input properties are set. The `ngOnInit` method is called once.

```typescript
interface OnInit {
  ngOnInit(): void;
}
```

```typescript
export class AppComponent implements OnInit {
  public ngOnInit(): void {
    // Initialize graph, paper, scroller
  }
}
```

--------------------------------

### Angular Production Build Command

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/APPLICATION_ENTRY.md

Use this command to build your Angular application for production. It optimizes bundles, enables tree-shaking, and prepares the application for deployment.

```bash
ng build
ng build --configuration production
```

--------------------------------

### Create Production Build

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Generates a production-ready build of the Angular application. The output is typically found in the dist/rappid-angular/ directory.

```bash
npm run build
# or
ng build
# Output: dist/rappid-angular/
```

--------------------------------

### Importing Environment Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Shows how to import and use the environment configuration object in your Angular components or services.

```typescript
import { environment } from './environments/environment';

if (environment.production) {
  // Production only code
}
```

--------------------------------

### Angular File Replacement Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/APPLICATION_ENTRY.md

Illustrates how Angular's build system replaces the default `environment.ts` with `environment.prod.ts` during production builds, as configured in `angular.json`.

```json
// In angular.json build configuration
"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]
```

--------------------------------

### dia.Paper Constructor

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Initializes a new instance of the Paper class. It takes a configuration object to set up the graph rendering.

```APIDOC
## new dia.Paper(options: PaperOptions)

### Description
Initializes a new instance of the Paper class with the provided configuration options.

### Parameters
#### Parameters
- **options** (PaperOptions) - Required - Configuration object for paper rendering.

#### Options Object
- **model** (dia.Graph) - The graph model to render.
- **background** (object) - Background color and image options.
  - **color** (string) - Background color (CSS color value).
- **frozen** (boolean) - Optional - If true, defer rendering until `unfreeze()` is called. Defaults to false.
- **async** (boolean) - Optional - If true, use asynchronous (non-blocking) rendering. Defaults to false.
- **sorting** (string) - Optional - Cell rendering order: `dia.Paper.sorting.APPROX` for approximate ordering.
- **cellViewNamespace** (object) - Optional - Namespace for cell view definitions.
```

--------------------------------

### PaperScroller Constructor Options

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Illustrates the configuration options available when creating a new ui.PaperScroller instance. Key options include the paper instance, auto-resizing behavior, and cursor style.

```typescript
new ui.PaperScroller(options: PaperScrollerOptions)
```

--------------------------------

### Angular Build File Replacement Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Specifies how Angular's build process replaces the default environment file with the production-specific one.

```json
{
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
}
```

--------------------------------

### Two-Lifecycle Initialization Pattern

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Separate model logic into `ngOnInit` and view attachment into `ngAfterViewInit` for cleaner initialization.

```typescript
ngOnInit() { /* Create model */ }
ngAfterViewInit() { /* Attach to DOM */ }
```

--------------------------------

### Angular Test Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Sets up the configuration for running Karma tests, including polyfills, tsConfig, and Karma configuration file.

```json
{
  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      "polyfills": ["src/polyfills.ts", "zone.js/testing"],
      "tsConfig": "tsconfig.spec.json",
      "karmaConfig": "karma.conf.js",
      "inlineStyleLanguage": "scss",
      "assets": ["src/favicon.ico", "src/assets"],
      "styles": ["src/styles.scss"],
      "scripts": []
    }
  }
}
```

--------------------------------

### Enable Watch Mode for Rebuilds

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Configures the build process to automatically rebuild the application upon detecting file changes during development.

```bash
npm run watch
# Rebuilds on file changes
```

--------------------------------

### Instantiate and Add Rectangle in Angular

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Demonstrates how to create a new Rectangle instance with specific position, size, and label text, and add it to the graph in an Angular application. Ensure the 'shapes.standard.Rectangle' is imported.

```typescript
const rect = new shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 50 },
    attrs: {
        label: {
            text: 'Hello World'
        }
    }
});

this.graph.addCell(rect);
```

--------------------------------

### Angular Serve Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Defines the configuration for the development server, including production and developmentbrowserTarget settings.

```json
{
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "browserTarget": "rappid-angular:build:production"
      },
      "development": {
        "browserTarget": "rappid-angular:build:development"
      }
    },
    "defaultConfiguration": "development"
  }
}
```

--------------------------------

### Browser Support Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Specifies the browser versions targeted for transpilation and polyfills. Ensures compatibility across different browsers.

```plaintext
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS Safari versions
Firefox ESR
```

--------------------------------

### Extending Environment Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/APPLICATION_ENTRY.md

Shows how to add custom properties like `apiUrl` and `logLevel` to environment configurations for both development and production. These custom properties can then be imported and used within Angular components.

```typescript
// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000',
  logLevel: 'debug'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com',
  logLevel: 'error'
};

// Usage in component
import { environment } from '../environments/environment';

export class AppComponent {
  apiUrl = environment.apiUrl;
  logLevel = environment.logLevel;
}
```

--------------------------------

### Angular Route Path Patterns

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Illustrates various patterns for defining route paths in Angular, including exact, parametric, child, and wildcard routes.

```typescript
// Exact path
'home'

// Parametric
'user/:id'
'user/:id/posts/:postId'

// Child routes
'admin/users'
'admin/settings'

// Wildcard (catch-all)
'**'

// Empty/root
''
```

--------------------------------

### Angular Production Build Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Sets up production-specific build optimizations, including bundle budgets, file replacements, and output hashing for cache busting.

```json
{
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    }
  }
}
```

--------------------------------

### Angular Service Providers

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/MODULES_AND_EXPORTS.md

Demonstrates different ways to provide services within an Angular module's configuration. This is typically used for dependency injection.

```typescript
// Would be in providers: []
providers: [
  MyService,  // Class provider
  { provide: AnotherService, useClass: AnotherService },  // Alias provider
  { provide: CONFIG, useValue: { ... } }  // Value provider
]
```

--------------------------------

### Editor Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Enforces consistent editor settings like character set, indentation, line endings, and whitespace trimming across the team.

```ini
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
```

--------------------------------

### Using Paper Sorting in Application

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Demonstrates how to set the sorting option for a JointJS paper. The 'APPROX' option is recommended for applications prioritizing performance while maintaining reasonable z-order.

```typescript
sorting: dia.Paper.sorting.APPROX
```

--------------------------------

### NPM Scripts for Angular Development

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Common NPM scripts for running the Angular development server, building the production bundle, watching for changes, and running tests.

```bash
npm start              # ng serve - Start dev server at localhost:4200
npm run build          # ng build - Create production bundle
npm run watch          # ng build --watch --configuration development
npm test               # ng test - Run Jasmine tests with Karma
```

--------------------------------

### ngOnInit() Lifecycle Hook

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-component.md

Initializes the JointJS+ diagram infrastructure. This includes creating the graph, paper, and scroller, and adding an initial shape. The paper is frozen and rendering is deferred.

```typescript
// AppComponent.ngOnInit() is called automatically by Angular
// You do not need to call this manually
// After this executes:
// - Graph is created and ready for cells
// - Paper is frozen and not rendering yet
// - PaperScroller is initialized but not attached to DOM
```

--------------------------------

### Define a Redirect Route

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Configure a redirect route to automatically navigate users from one path to another. `pathMatch: 'full'` ensures the redirect only occurs for an exact path match.

```typescript
{ path: '', redirectTo: '/home', pathMatch: 'full' }
```

--------------------------------

### Project Build Scripts

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Defines the scripts used for building, testing, and serving the Angular application. These are executed using npm or yarn.

```json
{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  }
}
```

--------------------------------

### Angular Project Structure

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

The root angular.json file defines the project structure, including the new project root and project definitions.

```json
{
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "rappid-angular": {
      "projectType": "application",
      ...
    }
  }
}
```

--------------------------------

### Main TypeScript Configuration (tsconfig.json)

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Defines the base TypeScript compilation settings for the project. Includes options for module resolution, output directory, strict type checking, and experimental features.

```json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "skipLibCheck": true,
    "strictPropertyInitialization": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2022",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
```

--------------------------------

### Add Router Outlet to Template

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Include the `<router-outlet></router-outlet>` tag in your `app.component.html` file. This directive serves as a placeholder where the routed components will be displayed.

```html
<!-- In app.component.html -->
<router-outlet></router-outlet>
```

--------------------------------

### Relative Imports in TypeScript

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/MODULES_AND_EXPORTS.md

Shows how to import modules using relative paths within the project structure. This covers imports from the same directory, subdirectories, and parent directories.

```typescript
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AppModule } from './app/app.module';
import { environment } from '../environments/environment'; // From parent directory
```

--------------------------------

### Angular Module Export Chain

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/MODULES_AND_EXPORTS.md

Shows the export chain for Angular modules, demonstrating how the root module imports other modules to provide specific functionalities.

```text
AppModule (imported by bootstrapping)
    ├─→ BrowserModule (provides browser-specific functionality)
    └─→ AppRoutingModule (provides routing)
        └─→ RouterModule (provides router directives)
```

--------------------------------

### AfterViewInit Interface

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/types.md

Implement this interface to execute logic after Angular has fully initialized the component's views and child views. The `ngAfterViewInit` method is called once.

```typescript
interface AfterViewInit {
  ngAfterViewInit(): void;
}
```

```typescript
export class AppComponent implements AfterViewInit {
  public ngAfterViewInit(): void {
    // Attach scroller to DOM, unfreeze paper
  }
}
```

--------------------------------

### Production Environment Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/APPLICATION_ENTRY.md

Defines environment-specific settings for production builds. The bundle is minified and optimized, `enableProdMode()` is called, and Angular's dev mode checks are disabled.

```typescript
export const environment = {
  production: true
};
```

--------------------------------

### AppRoutingModule Routes Array Initialization

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Initializes an empty routes array for the application's routing configuration. This array is intended to be populated with Route objects as client-side routing is implemented.

```typescript
const routes: Routes = [];
```

--------------------------------

### Define an Exact Route

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Use an exact route definition to match a specific path precisely. This route will only be activated when the URL exactly matches 'home'.

```typescript
{ path: 'home', component: HomeComponent }
```

--------------------------------

### shapes.standard.Rectangle Constructor

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Initializes a new Rectangle cell with specified attributes and options. The attributes define the position, size, and content of the rectangle, while options can include additional cell configurations.

```APIDOC
## new shapes.standard.Rectangle(attributes: RectangleAttributes, options?: CellOptions)

### Description
Constructs a new Rectangle cell.

### Parameters
#### Attributes
- **position** ({ x: number; y: number }) - Required - Top-left corner position in pixels.
- **size** ({ width: number; height: number }) - Required - Shape dimensions in pixels.
- **attrs** (object) - Required - Styling and content attributes.
  - **attrs.label** (object) - Optional - Label (text) configuration.
    - **attrs.label.text** (string) - Optional - Text content displayed in the shape.

#### Options
- **options** (CellOptions) - Optional - Additional cell options.
```

--------------------------------

### Create a New Shape Instance

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/INDEX.md

Instantiate a new shape using `shapes.standard` and add it to the graph using `graph.addCell()`.

```typescript
new shapes.standard.Circle(...)
graph.addCell(shape)
```

--------------------------------

### Application-Specific TypeScript Config (tsconfig.app.json)

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Extends the base tsconfig.json for application-specific settings. Configures the output directory for the app and specifies types to be used.

```json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
```

--------------------------------

### Importing Stylesheets in TypeScript

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/MODULES_AND_EXPORTS.md

Demonstrates how to import stylesheet files within a TypeScript component. This is typically done within the component's decorator to apply scoped styles.

```typescript
// In app.component.ts
@Component({
  styleUrls: ['./app.component.scss']
})
```

--------------------------------

### Add Navigation Links

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-routing-module.md

Use the `routerLink` directive in your HTML templates to create navigation links to different routes. This allows users to navigate between views in your application.

```html
<!-- In components -->
<a routerLink="/diagram">Diagram</a>
<a routerLink="/settings">Settings</a>
```

--------------------------------

### PaperScroller Constructor

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Initializes a new instance of the PaperScroller. It takes an options object to configure the scroller's behavior and appearance.

```APIDOC
## new ui.PaperScroller(options: PaperScrollerOptions)

### Description
Initializes a new instance of the PaperScroller with the provided configuration options.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (PaperScrollerOptions) - Required - Configuration for the scroller UI

### Options Object
- **paper** (dia.Paper) - Required - The paper instance to scroll
- **autoResizePaper** (boolean) - Optional - If true, paper resizes to fit scroller viewport. Default: false
- **cursor** (string) - Optional - CSS cursor style ('grab', 'pointer', etc.). Default: undefined

### Request Example
```typescript
const scroller = new ui.PaperScroller({
    paper,
    autoResizePaper: true,
    cursor: 'grab'
});
```

### Response
#### Success Response (200)
None (Constructor)

#### Response Example
None
```

--------------------------------

### Angular Development Build Configuration

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/configuration.md

Configures development builds with disabled optimizations, separate vendor chunks, and source maps for easier debugging.

```json
{
  "configurations": {
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  }
}
```

--------------------------------

### Providing a Service in an Angular Module

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/api-reference/app-module.md

To make a service available for injection throughout your application, import it and add it to the 'providers' array within the module's metadata.

```typescript
import { ExampleService } from './services/example.service';

@NgModule({
  providers: [
    ExampleService  // Add here
  ],
  // ...
})
```

--------------------------------

### dia.Graph Constructor

Source: https://github.com/clientio/joint-plus-tutorial-angular/blob/main/_autodocs/JOINTJS_PLUS_API.md

Initializes a new instance of the JointJS+ Graph. It can accept initial attributes and configuration options, including a `cellNamespace` for shape resolution.

```APIDOC
## new dia.Graph(attributes?: Record<string, any>, options?: GraphOptions)

### Description
Initializes a new JointJS+ Graph instance.

### Parameters
#### Parameters
- **attributes** (Record<string, any>) - Optional - Initial graph attributes (metadata).
- **options** (GraphOptions) - Optional - Configuration object with `cellNamespace` and other options.

#### Options Object
- **cellNamespace** (object) - Namespace for cell shape definitions (enables shape resolution by type).
```