Skip to main content

glint-diagram-view

The glint-diagram-view component is responsible for dynamically rendering diagrams associated with a given model. It selects applicable diagrams based on the model's type. If multiple diagrams are relevant, they will be presented within a tabbed interface for easy navigation.

Here's how to use it:

<glint-diagram-view [model]="model"></glint-diagram-view>

Properties​

  • [model]: This property accepts the model object for which diagrams should be rendered. The component will use the type of this model to determine which diagrams to display.

Diagram Component​

To create a diagram that can be rendered by glint-diagram-view, you need to implement the DiagramComponent interface. This interface ensures your component provides the necessary templates for the diagram's header (especially when displayed in tabs) and its content.

@Component({
  template: `
    <ng-template glintDiagramTabHeader>
      <div>My Diagram</div>
    </ng-template>
    <ng-template glintDiagramTabContent>
      <glint-class-diagram [graph]="graph()"></glint-class-diagram>
    </ng-template>
  `
})
class MyDiagramComponent implements DiagramComponent<ApplicationModel> {

  // The DiagramComponent interface expects templates for the (tab) header and the diagram content
  @ViewChild(DiagramTabHeader, {read: TemplateRef, static: true}) tabHeader!: TemplateRef<any>;
  @ViewChild(DiagramTabContent, {read: TemplateRef, static: true}) tabContent!: TemplateRef<any>;

  /**
   * The model provided to the glint-diagram-view component.
   * This property is automatically set by the glint-diagram-view.
   */
  model!: ApplicationModel;

  /**
   * A signal or computed property that determines when the diagram should be shown.
   * Return `true` if the diagram should be visible, `false` otherwise.
   */
  visible = computed(() => {
    // Define when the diagram should be shown, e.g., based on model properties
    return true; 
  });
  
  /**
   * A computed property that provides the data for your diagram.
   * This example uses `glint-class-diagram`.
   */
  graph = computed(() => { /* ... generate graph data from this.model ... */ });

}

Important Considerations for DiagramComponent​

  • @ViewChild for Templates: Ensure you have @ViewChild decorators for DiagramTabHeader and DiagramTabContent to capture the TemplateRef instances. These templates define what appears in the tab header (if applicable) and the main diagram area.
  • model Property: The glint-diagram-view component will automatically inject the model object into your DiagramComponent instance.
  • visible Computed Property (optional): Implement the visible computed property (or a signal) to control when your diagram should be displayed. This is useful for conditionally showing diagrams based on the model's state or properties.
  • Diagram-Specific Inputs: Your diagram component (glint-class-diagram in the example) will likely have its own inputs (e.g., [graph]). Use computed properties or signals within your DiagramComponent to prepare the data required by your specific diagram rendering component.

Providing Diagram Components​

You can make your DiagramComponents available to glint-diagram-view through two main mechanisms:

Via @Component providers​

This method allows you to associate diagram components directly within the providers array of an Angular @Component decorator. This is suitable for diagrams specific to a particular component's context.

@Component({
  providers: [
    {
      provide: DIAGRAM, // This token is used to register diagram components
      multi: true,     // Allows multiple diagram components to be registered
      useValue: [
        {
          // Matches a specific model type for which this diagram is applicable
          _type: 'elements::Application::model',
          // The DiagramComponent to be rendered
          component: MyDiagramComponent          
        }
      ]
    }
  ]
})

For more modularity and reusability, especially when developing plugins, it is highly recommended to provide diagram components via an ExtensionModule. This allows you to bundle related diagrams and extensions.

@NgModule({
  imports: [
    ExtensionModule.forExtension({
      diagrams: [ // The 'diagrams' array within the extension configuration
        {
          type: 'elements::Application', // The type of the model this diagram applies to
          component: MyDiagramComponent  // The DiagramComponent itself
        }
      ]
    })
  ]
})
export class MyExtensionModule {}