# InteractionConfigPanelComponent

Import it from `@grafloria/angular`.

InteractionConfigPanelComponent

Configuration UI panel for interaction mode settings. Allows users to customize interaction behavior at runtime.

```ts
@Component({
    selector: 'grafloria-interaction-config-panel',
    imports: [CommonModule, FormsModule],
    templateUrl: './interaction-config-panel.component.html',
    styleUrls: ['./interaction-config-panel.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class InteractionConfigPanelComponent implements OnInit, OnChanges
```

Use it as `<grafloria-interaction-config-panel>` in a template.

**Inputs**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `engine?` | `DiagramEngine` |  | Diagram engine instance (required) |
| `expanded?` |  |  | Whether the panel is expanded by default |
| `title?` |  |  | Panel title |
| `showAdvanced?` |  |  | Show advanced settings |

**Outputs**

- `configChanged` — Emit config changes

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `engine` | `DiagramEngine` |  | Diagram engine instance (required) |
| `expanded` |  | `false` | Whether the panel is expanded by default |
| `title` |  | `'Interaction Settings'` | Panel title |
| `showAdvanced` |  | `true` | Show advanced settings |
| `configChanged` |  |  | Emit config changes |
| `config` | `InteractionConfig` |  | Current configuration (local copy) |
| `isCollapsed` |  | `true` | Panel collapsed state |
| `isAdvancedCollapsed` |  | `true` | Advanced settings collapsed state |
| `interactionModes` |  |  | Interaction mode options |
| `portVisibilityOptions` |  |  | Port visibility options |
| `connectionLineStyles` |  |  | Connection line style options |

**Methods**

- `ngOnInit(): void`
- `ngOnChanges(changes: SimpleChanges): void`
- `loadConfig(): void` — Load current configuration from engine
- `toggleCollapse(): void` — Toggle panel collapsed state
- `toggleAdvanced(): void` — Toggle advanced settings collapsed state
- `onModeChange(mode: string): void` — Handle interaction mode change
- `onPortVisibilityChange(visibility: string): void` — Handle port visibility change
- `onConnectionLineStyleChange(style: string): void` — Handle connection line style change
- `onPortRadiusChange(radius: number): void` — Handle port radius change
- `onPortHoverScaleChange(scale: number): void` — Handle port hover scale factor change
- `onSnapRadiusChange(radius: number): void` — Handle snap radius change
- `onToggleChange(key: keyof InteractionConfig, value: boolean): void` — Handle toggle changes
- `resetToDefaults(): void` — Reset to default configuration
- `getModeDescription(): string` — Get description for current mode
- `getPortVisibilityDescription(): string` — Get description for current port visibility
- `getConnectionLineStyleDescription(): string` — Get description for current connection line style

**Example**

```html
<grafloria-interaction-config-panel
  [engine]="diagramEngine"
  [expanded]="true"
  (configChanged)="onConfigChange($event)">
</grafloria-interaction-config-panel>
```