Ribbon Menu

About 2 min

Ribbon is the main toolbar of WebCAD and can be extended through plugins.

`RibbonConfig` Structure

interface RibbonConfig {
  tabs: RibbonTabConfig[];
}

interface RibbonTabConfig {
  id: string;           // Tab ID
  label: string;        // Display name
  groups: RibbonGroupConfig[];
}

interface RibbonGroupConfig {
  id: string;           // Group ID
  label: string;        // Group name
  primaryButtons: RibbonButtonConfig[];   // Primary buttons
  moreButtons?: RibbonButtonConfig[];     // More buttons
}

interface RibbonButtonConfig {
  cmd: string;          // Command name
  label: string;        // Button text
  icon?: string;        // Icon ID
  tooltip?: string;     // Tooltip text
  enabled?: boolean;    // Whether enabled
  visible?: boolean;    // Whether visible
}

Extend Ribbon Through Plugins

Add Buttons to Existing Group

import type { PluginContext, RibbonTabConfig, RibbonGroupConfig } from 'vjcad';

async onActivate(context: PluginContext): Promise<void> {
  // Add button to an existing group
  context.addRibbonButton('home', 'draw', {
    cmd: 'MYCMD',
    label: 'My Command',
    icon: 'my-icon',
    tooltip: 'This is my command'
  }, 'primary');  // or 'more'
}

Add Group to Existing Tab

// Add a whole group to an existing tab
context.addRibbonGroup('home', {
  id: 'my-group',
  label: 'My Tools',
  primaryButtons: [
    { cmd: 'MYCMD1', label: 'Command 1' },
    { cmd: 'MYCMD2', label: 'Command 2' }
  ],
  moreButtons: [
    { cmd: 'MYCMD3', label: 'Command 3' }
  ]
});

Add New Tab

// Add a complete tab
const newTab: RibbonTabConfig = {
  id: 'my-tab',
  label: 'My Plugin',
  groups: [
    {
      id: 'tools-1',
      label: 'Tool Group 1',
      primaryButtons: [
        { cmd: 'TOOL1', label: 'Tool 1' },
        { cmd: 'TOOL2', label: 'Tool 2' }
      ]
    },
    {
      id: 'tools-2',
      label: 'Tool Group 2',
      primaryButtons: [
        { cmd: 'TOOL3', label: 'Tool 3' }
      ]
    }
  ]
};
context.addRibbonTab(newTab, 'home');  // Insert after the home tab

Remove UI Elements

async onDeactivate(context: PluginContext): Promise<void> {
  // Remove in reverse order
  context.removeRibbonTab('my-tab');
  context.removeRibbonGroup('home', 'my-group');
  context.removeRibbonButton('home', 'draw', 'MYCMD');
}

Directly Operate `RibbonConfigManager`

RibbonConfigManager provides static methods for managing Ribbon configuration:

import { RibbonConfigManager } from 'vjcad';

// Get current config
const config = RibbonConfigManager.getConfig();

// Modify config (operate directly on config object)
config.tabs.push({
    id: 'my-tab',
    label: 'Custom',
    groups: [...]
});

// Refresh UI (notify RibbonBar to rerender)
RibbonConfigManager.refresh();

`RibbonConfigManager` API

Method	Description
`getConfig()`	Get current Ribbon configuration
`setConfig(config)`	Set Ribbon configuration (merged)
`refresh()`	Refresh UI so config changes take effect
`loadConfigFromJSON(url)`	Load configuration from JSON URL
`resetToDefault()`	Reset to default configuration

Default Tabs

WebCAD includes the following tabs by default:

ID	Name	Description
`default`	Default	Common drawing, modify, edit, and related tools
`tools`	Tools	Groups, purge, properties, images, measurement, and more
`plugins`	Plugins	Plugin management
`recent`	Recent Commands	Dynamically displays recently executed commands

Button Types

`primaryButtons`

Primary buttons are displayed directly on the Ribbon.

`moreButtons`

More buttons are displayed in the expanded menu.

Dynamically Enable / Disable

// Dynamically set button state based on conditions
const button: RibbonButtonConfig = {
  cmd: 'MYCMD',
  label: 'My Command',
  enabled: someCondition,      // Dynamically enable
  visible: anotherCondition    // Dynamically show
};

Next Steps

Menu Bar and Ribbon Extension - detailed guide to menu bar and Ribbon extension
Icon Registration - SVG icons
Plugin System - PluginContext API