Classes

Import these from @grafloria/angular.

Classes

AutoToolbarDirective

AutoToolbarDirective

Automatically shows/hides node toolbars based on node selection. Apply this directive to the diagram canvas container to enable automatic toolbar management.

ts
Copy
@Directive({
  selector: '[grafloriaAutoToolbar]',
  standalone: true,
})
export class AutoToolbarDirective implements OnInit, OnDestroy

Methods

• @Input() engine!: DiagramEngine
• @Input() viewport: { x: number; y: number; width: number; height: number }
• @Input() zoom: number — Default: 1.0.
• @Input() toolbarPosition: ToolbarPosition — Default: 'top'.
• @Input() toolbarAlignment: ToolbarAlignment — Default: 'center'.
• @Input() toolbarActions: ToolbarAction[] — Default: [].
• @Input() toolbarTemplate?: TemplateRef<any>
• @Input() toolbarOffset?: number
• constructor( private toolbarService: NodeToolbarService, private viewContainerRef: ViewContainerRef, private elementRef: ElementRef<HTMLElement>, private environmentInjector: EnvironmentInjector )
• ngOnInit()
• ngOnDestroy()
• updateViewport(viewport: { x: number; y: number; width: number; height: number }) — Update viewport (to be called when viewport changes)
• updateZoom(zoom: number) — Update zoom (to be called when zoom changes)

Example

html
Copy
<div grafloriaAutoToolbar
     [engine]="diagramEngine"
     [viewport]="viewport"
     [zoom]="zoom"
     [toolbarPosition]="'top'"
     [toolbarActions]="actions">
  <grafloria-diagram-canvas [engine]="engine"></grafloria-diagram-canvas>
</div>

GrafloriaCommentPanelComponent

<grafloria-comment-panel> — the conversation UI for a comment store: thread list, unread markers, selection. Feed it the canvas's store:

html
Copy
<grafloria-diagram-canvas #canvas [comments]="true" … />
<grafloria-comment-panel [store]="canvas.getCommentStore()"
                         (threadSelect)="focus($event)" />

ts
Copy
@Component({
  selector: 'grafloria-comment-panel',
  template: '',
  styles: [':host { display: block; }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GrafloriaCommentPanelComponent implements AfterViewInit, OnDestroy

Use it as <grafloria-comment-panel> in a template.

Inputs

Outputs

• threadSelect — The selected thread id, or null when dismissed.

Properties

Methods

• ngAfterViewInit(): void
• select(threadId: string | null): void — Programmatic selection (e.g. from a pin click).
• ngOnDestroy(): void

GrafloriaDiagramComponent

<grafloria-diagram> — the generic kit host. Any kit spec renders:

ts
Copy
spec = erDiagram({ entities, relationships });        // or umlDiagram({...}),

html
Copy
<grafloria-diagram [spec]="spec" (ready)="instance = $event" />

One component for every present and future kit — because every kit speaks the same contract: a spec with nodes/edges/renderCustomNode/finalize that render() mounts in one call.

ts
Copy
@Component({
  selector: 'grafloria-diagram',
  template: '',
  styles: [':host { display: block; position: relative; }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GrafloriaDiagramComponent implements AfterViewInit, OnChanges, OnDestroy

Use it as <grafloria-diagram> in a template.

Inputs

Outputs

• ready — The live DiagramInstance after mount.

Properties

Methods

• ngAfterViewInit(): void
• ngOnChanges(changes: SimpleChanges): void — A CHANGED spec or options replaces the diagram; an equal new one does not.
• getInstance(): DiagramInstance | undefined
• ngOnDestroy(): void

GrafloriaWidgetDefDirective

Declarative dashboard widgets — the node-template idiom applied to boards:

html
Copy
<grafloria-dashboard [views]="views">
  <ng-template grafloriaWidget="orders" let-widget let-data="data">
    <app-orders-card [orders]="data['orders']" />
  </ng-template>
</grafloria-dashboard>

A widget whose kind matches a template renders through it — full Angular change detection, components, pipes, and event handlers. Kinds without a template fall back to the kit's built-in painters (kpi / line / bar / donut / funnel / table). grafloriaWidget with no value is the wildcard for any kind without an exact template.

ts
Copy
@Directive({ selector: 'ng-template[grafloriaWidget]' })
export class GrafloriaWidgetDefDirective

Properties

Methods

• static ngTemplateContextGuard( _dir: GrafloriaWidgetDefDirective, ctx: unknown ): ctx is GrafloriaWidgetTemplateContext (static)

NodeToolbarService

NodeToolbarService

Manages the lifecycle of node toolbars in the diagram. Provides methods to show, hide, and update toolbars programmatically.

ts
Copy
@Injectable({ providedIn: 'root' })
export class NodeToolbarService

Methods

• setViewContainer(vcr: ViewContainerRef) — Set the view container for creating toolbars
• setEnvironmentInjector(injector: EnvironmentInjector) — Set the environment injector for creating components
• setCanvasElement(element: HTMLElement) — Set global canvas element for all toolbars
• setViewport(viewport: { x: number; y: number; width: number; height: number }) — Set global viewport for all toolbars
• setZoom(zoom: number) — Set global zoom for all toolbars
• show( node: NodeModel, engine: DiagramEngine, config: ToolbarConfig = {} ): ComponentRef<NodeToolbarComponent> — Show toolbar for a node
• hide(nodeId: string) — Hide toolbar for a node
• hideAll() — Hide all toolbars
• get(nodeId: string): ComponentRef<NodeToolbarComponent> | undefined — Get toolbar for a node
• isShown(nodeId: string): boolean — Check if toolbar is shown for a node
• updatePosition(nodeId: string) — Update toolbar position for a node
• updateAllPositions() — Update positions for all toolbars
• updateConfig(nodeId: string, config: Partial<ToolbarConfig>) — Update toolbar configuration
• getCount(): number — Get the number of active toolbars
• getAll(): ComponentRef<NodeToolbarComponent>[] — Get all toolbar component references

Example

typescript
Copy
constructor(private toolbarService: NodeToolbarService) {}

ngOnInit() {
  this.toolbarService.setViewContainer(this.viewContainerRef);
}

showToolbar(node: NodeModel) {
  this.toolbarService.show(node, this.engine, {
    position: 'top',
    actions: this.actions
  });
}