UI Extension

About 2 min

UI Extension

Customization and extension of UI components, including Ribbon menus, context menus, dialogs, sidebar panels, themes, and more.

Online Examples

Example	Description	Link
Ribbon Menu	`addRibbonButton` usage	Online Demo{target="_blank"}
Message Output	`writeMessage` usage	Online Demo{target="_blank"}
Preview View Component	Preview entities in dialogs with `PreviewView`	Online Demo{target="_blank"}
Confirmation Dialog	`showConfirm`, `showInfo`, `showWarningConfirm` usage	Online Demo{target="_blank"}
Input Dialog	`showInputDialog`, `showSelectDialog`, `showPrompt` usage	Online Demo{target="_blank"}
Context Menu (Add Custom Items)	Add custom items to the default menu	Online Demo{target="_blank"}
Context Menu (Customize by Command State)	Customize the menu based on command state	Online Demo{target="_blank"}
Context Menu (Fully Custom)	Fully custom menu without default items	Online Demo{target="_blank"}
Context Menu (Disable System Menu)	Disable the system context menu	Online Demo{target="_blank"}
Theme Switching	`THEME_MODE` usage	Online Demo{target="_blank"}
Status Bar	`FuncButtons` and `CoordsBar` usage	Online Demo{target="_blank"}
Main View Config	`MainViewConfig` usage	Online Demo{target="_blank"}
Viewer Mode	Show only the drawing area and hide menus, toolbars, and command line	Online Demo{target="_blank"}
Dialog Suspend / Resume	Select entities and pick points in dialogs	Online Demo{target="_blank"}
Dialog Suspend / Resume (Vue3)	Vue3 version of dialog interaction	Online Demo{target="_blank"}
Modal Dialog Base Class	Quickly create dialogs with `ModalDialogBase`	Online Demo{target="_blank"}
Modeless Panel Base Class	Quickly create tool panels with `ModelessPanelBase`	Online Demo{target="_blank"}
Sidebar Panel	Customize sidebar panels with `registerSidebarPanel`	Online Demo{target="_blank"}
Floating Toolbar	`createFloatingToolbar`: draggable icon toolbar	Online Demo{target="_blank"}
Menu and Ribbon Customization	`MenuBarCustomConfig`, `RibbonCustomConfig` incremental/full customization	Online Demo{target="_blank"}

Core API

// Add Ribbon button
Engine.addRibbonButton({
    tab: "Draw",           // Tab name
    panel: "Custom",       // Panel name
    text: "My Command",    // Button text
    icon: "icon-custom",   // Icon class name
    command: "MYCMD"       // Associated command
});

Message Output

// Output message in command line
writeMessage("Operation successful");
writeMessage("<br/>Message with line break");

// Message prompts
message.info("Information");
message.success("Operation successful");
message.warning("Warning");
message.error("Error");

Dialogs

// Confirmation dialog
const confirmed = await showConfirm("Are you sure you want to delete?");

// Input dialog
const value = await showInputDialog("Please enter a name:", "Default value");

// Selection dialog
const selected = await showSelectDialog("Please choose a type:", [
    { label: "Type A", value: "a" },
    { label: "Type B", value: "b" }
]);

// Add custom menu item
Engine.contextMenu.addItem({
    text: "Custom Feature",
    icon: "icon-custom",
    onClick: () => {
        // Handle click
    }
});

// Fully custom menu
Engine.contextMenu.setCustomMenu((context) => {
    return [
        { text: "Menu Item 1", onClick: () => {} },
        { text: "Menu Item 2", onClick: () => {} }
    ];
});

Theme Switching

// Switch theme
Engine.setTheme('dark');   // Dark theme
Engine.setTheme('light');  // Light theme

// Get current theme
const theme = Engine.getTheme();

Customize the menu bar and Ribbon toolbar via MainView constructor parameters. Supports both full replacement and incremental modification:

const cadView = new MainView({
    // Menu bar customization
    menuBar: {
        removeMenus: ['help', 'appearance'],
        addMenus: [{
            id: 'custom-menu', label: 'Custom', after: 'insert',
            items: [
                { type: 'command', command: 'MY_CMD' },
                { type: 'separator' },
                { type: 'command', command: 'REGEN' },
            ]
        }],
        modifyMenus: {
            file: {
                removeItems: ['SWITCHWORKSPACE'],
                addItems: [{ type: 'command', command: 'MY_CMD', after: 'EXPORTPNG' }]
            }
        }
    },
    // Ribbon customization
    ribbon: {
        removeTabs: ['recent'],
        addTabs: [{
            tab: { id: 'custom-tab', label: 'Custom', groups: [/*...*/] },
            after: 'default'
        }],
        modifyTabs: {
            'default': {
                modifyGroups: {
                    draw: {
                        addPrimaryButtons: [
                            { icon: 'circle', cmd: 'MY_CMD', prompt: 'Tooltip', after: 'CIRCLE' }
                        ]
                    }
                }
            }
        }
    }
});

For detailed interface documentation and complete examples, see Menu Bar and Ribbon Customization.