Skip to main content

glint-project-view

The glint-project-view component provides the main layout for the editor. It is a central container that orchestrates the display of various project-related information by dynamically loading and rendering components based on user interactions.

Editor Layout​

The glint-project-view component organizes the user interface into three primary sections:

  1. Project Navigation (Left Panel): This panel displays navigation options for the project model. It is powered by the glint-project-navigation component and allows users to select specific parts of the project, such as a program or module.
  2. Project View Content (Central Panel): This is the main editor area. Its content is dynamically rendered by a ProjectComponent that matches the currently selected model element and the chosen view option.
  3. Project View Selection (Right Panel): This panel displays the available view options for the currently selected model element (e.g., tree-detail, diagram, 3-pane). These options are declared by the plugin that provides the navigation item.

Usage​

The glint-project-view component is typically used as the primary content area within the glint-project-editor. You can, however, use it directly if you need to build a custom editor layout. If you do, you must provide all required dependencies, such as the ModelService, manually.

<glint-project-view [project]="projectData"></glint-project-view>

Properties​

PropertyTypeDescription
[project]ProjectDataThe project data object that the view will operate on. This object is typically loaded from the ModelService.

The Role of ProjectComponent​

The ProjectComponent is the core building block for the central panel's content. It is a dedicated Angular component that implements the ProjectComponent interface.

interface ProjectComponent {
  /** The model element that this component is responsible for rendering. */
  model: ModelProjection;
  /** A template for the tab header. Used when multiple components match the same view. */
  readonly tabHeader: TemplateRef<any>
  /** The main content template to be rendered in the central panel. */
  readonly content: TemplateRef<any>
  /** Optionally, a set of buttons that will be added to the view column when this component is selected. **/
  readonly scopedActions?: TemplateRef<any>
}
  • Matching and Rendering: The glint-project-view component uses the model selection and view selection to find a matching ProjectComponent from the available providers.
  • Dynamic Tabs: When multiple ProjectComponents match the same view, they are rendered in separate tabs. The tabHeader template is used to display the content of the tab header for each component.

Providing ProjectComponent Implementations​

You can provide your custom ProjectComponents to the editor using two primary methods.

1. Via @Component Providers​

You can register a ProjectComponent directly in the providers array of an Angular component.

@Component({
  providers: [
    {
      provide: PROJECT_VIEW,          // The injection token for project views
      multi: true,                    // Required to allow multiple components to be registered
      useValue: [
        {
          _type: 'elements::Application', // The model type this component should handle
          _view: 'tree-detail',         // The view identifier (matches a name from a navigation facet's views)
          component: ApplicationTreeDetailViewComponent // The component to render
        }
      ]
    }
  ]
})
export class MyComponent {}

For plugins, the best practice is to register your ProjectComponents via the ExtensionModule to ensure they are discovered and configured correctly.

@NgModule({
  imports: [
    ExtensionModule.forExtension({
      projectViewComponents: [
        {
          type: 'elements::Application',        // The target model type
          view: 'tree-detail',                 // The view identifier
          component: ApplicationTreeDetailViewComponent // The component to render
        }
      ]
    })
  ]
})
export class MyExtensionModule {}