ModelAction

A ModelAction defines a specific action that a user can perform on a model element. These actions are dynamically displayed in a context menu when a user right-clicks on a compatible element.

By implementing the ModelAction interface, you can extend the editor's functionality and provide a rich, context-aware user experience.

The ModelAction Interface

Your custom action class must implement the ModelAction interface:

export interface ModelAction {
  /** The model element that the action is being performed on. */
  target: ModelProjection;
  /** The label for the button in the context menu. */
  readonly label: string;
  /**
   * Optional. Actions with the same group name will be visually grouped together.
   * A line is rendered between different groups to improve readability.
   */
  readonly group?: string;
  /** Optional. An icon to be displayed before the label in the context menu. */
  readonly icon?: VariableIcon;
  /** The method that contains the business logic to be executed when the user clicks the action. */
  onClick(): void;
}

Providing Model Actions

Model actions are made available to the application by using the ACTIONS injection token. This is typically done within a plugin's PluginBuilder to ensure the actions are registered at startup.

Example: Providing an Action via a Plugin Builder

@Injectable()
export class MyActionService implements PluginBuilder {

  async build(): Promise<PluginBuildResult> {
    return  { 
      providers: [
        {
          provide: ACTIONS,
          multi: true, // Always use multi: true for actions
          useValue: [
            {
              // The target element type. Actions are only shown for elements matching this type.
              _type: "elements::DataElement",
              // The class that implements the ModelAction interface.
              component: MyDataElementAction
            }
          ]
        }
      ]
    };
  }
}