Skip to main content

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

ExampleDescriptionLink
Ribbon MenuaddRibbonButton usageOnline Demo{target="_blank"}
Message OutputwriteMessage usageOnline Demo{target="_blank"}
Preview View ComponentPreview entities in dialogs with PreviewViewOnline Demo{target="_blank"}
Confirmation DialogshowConfirm, showInfo, showWarningConfirm usageOnline Demo{target="_blank"}
Input DialogshowInputDialog, showSelectDialog, showPrompt usageOnline Demo{target="_blank"}
Context Menu (Add Custom Items)Add custom items to the default menuOnline Demo{target="_blank"}
Context Menu (Customize by Command State)Customize the menu based on command stateOnline Demo{target="_blank"}
Context Menu (Fully Custom)Fully custom menu without default itemsOnline Demo{target="_blank"}
Context Menu (Disable System Menu)Disable the system context menuOnline Demo{target="_blank"}
Theme Switching (canvas)THEME_MODE dark/light canvasOnline Demo{target="_blank"}
Custom Theme ColorsthemeColors / buildThemeColorsFromPresetOnline Demo{target="_blank"}
Status BarFuncButtons and CoordsBar usageOnline Demo{target="_blank"}
Main View ConfigMainViewConfig usageOnline Demo{target="_blank"}
Viewer ModeShow only the drawing area and hide menus, toolbars, and command lineOnline Demo{target="_blank"}
Dialog Suspend / ResumeSelect entities and pick points in dialogsOnline Demo{target="_blank"}
Dialog Suspend / Resume (Vue3)Vue3 version of dialog interactionOnline Demo{target="_blank"}
Modal Dialog Base ClassQuickly create dialogs with ModalDialogBaseOnline Demo{target="_blank"}
Modeless Panel Base ClassQuickly create tool panels with ModelessPanelBaseOnline Demo{target="_blank"}
Sidebar PanelCustomize sidebar panels with registerSidebarPanelOnline Demo{target="_blank"}
Floating ToolbarcreateFloatingToolbar: draggable icon toolbarOnline Demo{target="_blank"}
Menu and Ribbon CustomizationMenuBarCustomConfig, RibbonCustomConfig incremental/full customizationOnline Demo{target="_blank"}

Core API

Ribbon Menu

// 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" }
]);

Context Menu

// 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 (canvas vs chrome colors)

// Canvas dark/light (does not recolor menus/sidebars)
Engine.THEME_MODE = 0; // 0 = dark canvas, 1 = light canvas

// Chrome / dialog theme colors
import { buildThemeColorsFromPreset } from 'vjcad';

const cadView = new MainView({
    themeColors: buildThemeColorsFromPreset({
        bg: '#1a1a2e',
        bg2: '#16162a',
        panel: '#22223a',
        accent: '#18a9de',
        canvas: '#12121f'
    })
});

cadView.setThemeColors(buildThemeColorsFromPreset({ /* ... */ }));
cadView.resetThemeColors();
// or Engine.setThemeColors(...) / Engine.resetThemeColors()

See UI Theme Colors for the full field list.

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.

UI Component Docs