Class Action

Example

export class ActionPanel extends PanelPlugin {
  connections: any[];
  static descriptor() {
    const d = new Descriptor();
    d.id = 'com.docs.UiActionExample';
    d.name = 'Action Example';
    d.defaultDockState = DockState.Detached;
    d.defaultSize = new Size(350, 250);
    return d;
  }
  constructor(pluginSystem: Editor.PluginSystem, descriptor?: Descriptor) {
    super(pluginSystem, descriptor);
    this.connections = [];
  }
  createWidget(parent: Widget): Widget {
    const root = new Widget(parent);
    const layout = new BoxLayout();
    layout.setDirection(Direction.TopToBottom);
    layout.spacing = 8;
    root.layout = layout;

    const title = new Label(root);
    title.text = 'Action Demo';
    title.fontRole = FontRole.TitleBold;
    layout.addWidget(title);

    const status = new Label(root);
    status.text = 'Click the button to show a menu with actions.';
    status.wordWrap = true;
    layout.addWidget(status);

    // Create Actions with text, toolTip, and onTrigger signal
    const saveAction = new Action(root);
    saveAction.text = 'Save';
    saveAction.toolTip = 'Save the current project';

    const toggleAction = new Action(root);
    toggleAction.text = 'Auto-save';
    toggleAction.checkable = true;
    toggleAction.checked = false;

    const menu = new Menu(root);
    menu.addAction(saveAction);
    menu.addAction(toggleAction);

    const btn = new PushButton(root);
    btn.text = 'Open Menu';
    layout.addWidget(btn);

    this.connections.push(
      btn.onClick.connect(() => {
        menu.popup(btn);
      }),
      saveAction.onTrigger.connect(() => {
        status.text = 'Save triggered';
      }),
      toggleAction.onToggle.connect((checked: boolean) => {
        status.text = 'Auto-save: ' + (checked ? 'ON' : 'OFF');
      })
    );

    return root;
  }
  deinit(): void {
    this.connections.forEach((c: any) => c?.disconnect());
    this.connections = [];
  }
}
Copy