InteractionConfigPanelComponent

Import it from @grafloria/angular.

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	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>

Was this page helpful?