Picker Dialogs

About 4 min

Picker Dialogs

Picker dialogs are used in plugins to choose CAD-specific properties such as color, linetype, pattern fill, and more.

`ColorPanelDialog` - Color Picker

The color picker dialog supports the 256-color index palette, RGB colors, and special colors such as ByLayer / ByBlock.

Basic Usage

import { ColorPanelDialog, ColorDialogOptions } from 'vjcad';

// Create color dialog
const dialog = new ColorPanelDialog();

// Configure options
const options = new ColorDialogOptions();
options.colorIndex = 1;                      // Initial color index (red)
options.disabledByLayerAndByBlock = false;  // Allow ByLayer / ByBlock

// Show dialog
const result = await dialog.startColorDialog(options);

if (result !== undefined) {
    console.log('User selected color:', result);
    // result may be:
    // - numeric string: "1", "7", "255" (color index)
    // - "ByLayer" or "ByBlock"
    // - RGB hex: "#FF0000"
}

`ColorDialogOptions`

class ColorDialogOptions {
    /** Initial color index (1-255), default 7 (white) */
    colorIndex: number = 7;
    
    /** Whether to disable ByLayer and ByBlock options, default true */
    disabledByLayerAndByBlock: boolean = true;
}

Color Index Reference

Index Range	Description
1-9	Basic colors (red, yellow, green, cyan, blue, magenta, white, gray, light gray)
10-249	Standard 256-color palette
250-255	Grayscale colors

Example: Change Entity Color

import { ColorPanelDialog, ColorDialogOptions, Engine } from 'vjcad';

async function changeEntityColor() {
    const selectedEntities = Engine.selection.getSelectedEntities();
    if (selectedEntities.length === 0) {
        console.log('Please select entities first');
        return;
    }
    
    // Get current color from the first entity
    const currentColor = selectedEntities[0].colorIndex || 7;
    
    const dialog = new ColorPanelDialog();
    const options = new ColorDialogOptions();
    options.colorIndex = currentColor;
    options.disabledByLayerAndByBlock = false;
    
    const result = await dialog.startColorDialog(options);
    
    if (result !== undefined) {
        // Apply new color to all selected entities
        for (const entity of selectedEntities) {
            if (result === 'ByLayer') {
                entity.colorIndex = 256; // ByLayer
            } else if (result === 'ByBlock') {
                entity.colorIndex = 0;   // ByBlock
            } else if (result.startsWith('#')) {
                // RGB color requires conversion
                entity.setTrueColor(result);
            } else {
                entity.colorIndex = parseInt(result);
            }
        }
    }
}

`LineTypeDialog` - Linetype Picker

The linetype picker supports built-in linetypes, custom linetypes, and linetypes loaded from .lin files.

Basic Usage

import { LineTypeDialog } from 'vjcad';

// Create linetype dialog
const dialog = new LineTypeDialog();

// Show dialog
const result = await dialog.startLineTypeDialog({
    selectedName: 'Continuous',        // Initially selected linetype
    disabledByLayerAndByBlock: false   // Allow ByLayer / ByBlock
});

if (result !== undefined) {
    console.log('User selected linetype:', result);
    // result may be: "Continuous", "Hidden", "Center", "ByLayer", "ByBlock", etc.
}

Built-in Linetypes

Linetype Name	Description
`Continuous`	Continuous
`Hidden`	Dashed
`Center`	Center line
`Phantom`	Phantom line
`Dashed`	Short dashed line
`DashDot`	Dash-dot line

Example: Set Layer Linetype

import { LineTypeDialog, Engine } from 'vjcad';

async function setLayerLinetype(layerName: string) {
    const layer = Engine.currentDoc.layers.getLayerByName(layerName);
    if (!layer) {
        console.log('Layer does not exist');
        return;
    }
    
    const dialog = new LineTypeDialog();
    const result = await dialog.startLineTypeDialog({
        selectedName: layer.linetype || 'Continuous',
        disabledByLayerAndByBlock: true  // Layer linetype cannot be ByLayer / ByBlock
    });
    
    if (result !== undefined) {
        layer.linetype = result;
        console.log(`Linetype of layer ${layerName} has been set to ${result}`);
    }
}

`LinetypeEditorDialog` - Linetype Editor

The linetype definition editor dialog provides an input area and format description for editing and loading custom linetype definitions.

Basic Usage

import { LinetypeEditorDialog } from 'vjcad';

// Create linetype editor dialog
const dialog = new LinetypeEditorDialog();

// Show dialog (can pass initial content)
const result = await dialog.startDialog(`*MYLINE,Custom linetype
A,10,-5,2,-5`);

if (result !== undefined) {
    console.log('User input linetype definition:', result);
    // result can be passed to LinetypeManager for loading
}

Dialog Features

Left input area: editable text box for entering .lin format definitions
Right help area: read-only format description document
Import from file: import content from a .lin file into the editor

`LinetypeViewerDialog` - Linetype Viewer

A read-only dialog that displays all current linetype definitions and supports copying and export.

Basic Usage

import { LinetypeViewerDialog } from 'vjcad';

// Create linetype viewer dialog
const dialog = new LinetypeViewerDialog();

// Show dialog
await dialog.startDialog();

Dialog Features

Display all linetype definitions by category (built-in, document, loaded, custom)
Copy to clipboard: copy all linetype definitions with one click
Export to file: export as a .lin file

`PatternPickerDialog` - Pattern Picker

The hatch pattern selection dialog is used to choose fill patterns.

Basic Usage

import { PatternPickerDialog } from 'vjcad';

// Create pattern dialog
const dialog = new PatternPickerDialog();

// Show dialog
const result = await dialog.startPatternDialog({
    selectedPattern: 'SOLID'  // Initially selected pattern (optional)
});

if (result !== undefined) {
    console.log('User selected pattern:', result);
    // result is a pattern name such as "SOLID", "ANSI31", "BRICK", etc.
}

Built-in Patterns

Pattern Name	Description
`SOLID`	Solid fill
`ANSI31`	ANSI metal
`ANSI32`	ANSI steel
`ANSI33`	ANSI bronze
`ANSI34`	ANSI plastic
`ANSI35`	ANSI fireproof
`ANSI36`	ANSI marble
`ANSI37`	ANSI concrete
`BRICK`	Brick
`GRASS`	Grass
`EARTH`	Earth

Example: Create Hatch Entity

import { PatternPickerDialog, Engine } from 'vjcad';

async function createHatch() {
    const dialog = new PatternPickerDialog();
    const patternName = await dialog.startPatternDialog({
        selectedPattern: 'ANSI31'
    });
    
    if (patternName !== undefined) {
        // Get selected closed boundaries
        const boundaries = Engine.selection.getSelectedClosedPolylines();
        
        if (boundaries.length > 0) {
            // Create hatch
            await Engine.editor.executerWithOp('HATCH', {
                pattern: patternName,
                boundaries: boundaries
            });
        }
    }
}

`PatternEditorDialog` - Pattern Editor

The pattern definition editor provides an input area and PAT format description for editing and loading custom hatch patterns.

Basic Usage

import { PatternEditorDialog } from 'vjcad';

// Create pattern editor dialog
const dialog = new PatternEditorDialog();

// Show dialog (can pass initial content)
const result = await dialog.startDialog(`*MYPATTERN,Custom pattern
45,0,0,0,3.175`);

if (result !== undefined) {
    console.log('User input pattern definition:', result);
    // result can be passed to PatternManager for loading
}

Dialog Features

Left input area: editable text box for PAT-format pattern definitions, supporting multiple patterns
Right help area: read-only format guide with detailed parameter explanations and examples
Import from file: import content from a .pat file into the editor

`PatternViewerDialog` - Pattern Viewer

A read-only dialog that shows all current pattern definitions and supports copy and export.

Basic Usage

import { PatternViewerDialog } from 'vjcad';

// Create pattern viewer dialog
const dialog = new PatternViewerDialog();

// Show dialog
await dialog.startDialog();

Dialog Features

Display all pattern definitions by category (built-in, document, loaded, custom)
Copy to clipboard: copy all pattern definitions with one click
Export to file: export as a .pat file

`BlockNameDialog` - Block Name Picker

The block name selection dialog is used to select defined blocks from the current document.

Basic Usage

import { BlockNameDialog } from 'vjcad';

// Create block-name dialog
const dialog = new BlockNameDialog();

// Show dialog
const result = await dialog.startBlockNameDialog();

if (result !== undefined) {
    console.log('User selected block:', result);
}

`LayerNameDialog` - Layer Name Input

The layer-name input dialog is used to create new layers or rename existing ones.

Basic Usage

import { LayerNameDialog } from 'vjcad';

// Create layer-name dialog
const dialog = new LayerNameDialog();

// Show dialog
const result = await dialog.startLayerNameDialog({
    title: 'Create New Layer',
    defaultName: 'Layer1'
});

if (result !== undefined) {
    console.log('User input layer name:', result);
}

Complete Example: Property Modification Tool

import { 
    ColorPanelDialog, 
    ColorDialogOptions,
    LineTypeDialog,
    Engine,
    showConfirm
} from 'vjcad';

/**
 * Batch modify properties of selected entities
 */
async function modifyEntityProperties() {
    const selected = Engine.selection.getSelectedEntities();
    
    if (selected.length === 0) {
        await showInfo('Please select entities to modify first');
        return;
    }
    
    // 1. Choose color
    const colorDialog = new ColorPanelDialog();
    const colorOptions = new ColorDialogOptions();
    colorOptions.colorIndex = selected[0].colorIndex || 7;
    colorOptions.disabledByLayerAndByBlock = false;
    
    const newColor = await colorDialog.startColorDialog(colorOptions);
    if (newColor === undefined) return; // User canceled
    
    // 2. Choose linetype
    const linetypeDialog = new LineTypeDialog();
    const newLinetype = await linetypeDialog.startLineTypeDialog({
        selectedName: selected[0].linetype || 'Continuous',
        disabledByLayerAndByBlock: false
    });
    if (newLinetype === undefined) return; // User canceled
    
    // 3. Confirm changes
    const confirmed = await showConfirm(
        `Change the color of ${selected.length} entities to ${newColor} and the linetype to ${newLinetype}?`
    );
    
    if (confirmed) {
        // Apply changes
        for (const entity of selected) {
            // Set color
            if (newColor === 'ByLayer') {
                entity.colorIndex = 256;
            } else if (newColor === 'ByBlock') {
                entity.colorIndex = 0;
            } else if (newColor.startsWith('#')) {
                entity.setTrueColor(newColor);
            } else {
                entity.colorIndex = parseInt(newColor);
            }
            
            // Set linetype
            entity.linetype = newLinetype;
        }
        
        Engine.redraw();
        console.log('Property update completed');
    }
}

Next Steps

Dialog Components - basic dialogs and confirmation dialogs
Basic Controls - buttons, inputs, and more
Icon Registration - SVG icons