选择器对话框

大约 6 分钟

选择器对话框

选择器对话框用于在插件中选择 CAD 特定属性，如颜色、线型、图案填充等。

ColorPanelDialog - 颜色选择器

颜色选择对话框，支持 256 色索引调色板、RGB 颜色、以及 ByLayer/ByBlock 特殊颜色。

基本用法

import { ColorPanelDialog, ColorDialogOptions } from 'vjcad';

// 创建颜色对话框
const dialog = new ColorPanelDialog();

// 配置选项
const options = new ColorDialogOptions();
options.colorIndex = 1;                     // 初始颜色索引（红色）
options.disabledByLayerAndByBlock = false;  // 允许选择 ByLayer/ByBlock

// 显示对话框
const result = await dialog.startColorDialog(options);

if (result !== undefined) {
    console.log('用户选择的颜色:', result);
    // result 可能是:
    // - 数字字符串: "1", "7", "255" (颜色索引)
    // - "ByLayer" 或 "ByBlock"
    // - RGB十六进制: "#FF0000"
}

ColorDialogOptions

class ColorDialogOptions {
    /** 初始颜色索引 (1-255)，默认 7（白色） */
    colorIndex: number = 7;
    
    /** 是否禁用 ByLayer 和 ByBlock 选项，默认 true */
    disabledByLayerAndByBlock: boolean = true;
}

颜色索引说明

索引范围	说明
1-9	基础颜色（红、黄、绿、青、蓝、品红、白、灰、浅灰）
10-249	标准 256 色调色板
250-255	灰度颜色

示例：修改图元颜色

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

async function changeEntityColor() {
    const selectedEntities = Engine.selection.getSelectedEntities();
    if (selectedEntities.length === 0) {
        console.log('请先选择图元');
        return;
    }
    
    // 获取第一个图元的当前颜色
    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) {
        // 应用新颜色到所有选中图元
        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 颜色需要转换
                entity.setTrueColor(result);
            } else {
                entity.colorIndex = parseInt(result);
            }
        }
    }
}

LineTypeDialog - 线型选择器

线型选择对话框，支持内置线型、自定义线型，以及从 .lin 文件加载线型。

基本用法

import { LineTypeDialog } from 'vjcad';

// 创建线型对话框
const dialog = new LineTypeDialog();

// 显示对话框
const result = await dialog.startLineTypeDialog({
    selectedName: 'Continuous',        // 初始选中的线型
    disabledByLayerAndByBlock: false   // 允许选择 ByLayer/ByBlock
});

if (result !== undefined) {
    console.log('用户选择的线型:', result);
    // result 可能是: "Continuous", "Hidden", "Center", "ByLayer", "ByBlock" 等
}

内置线型

线型名称	说明
`Continuous`	实线
`Hidden`	虚线
`Center`	中心线
`Phantom`	双点划线
`Dashed`	短划线
`DashDot`	点划线

示例：设置图层线型

import { LineTypeDialog, Engine } from 'vjcad';

async function setLayerLinetype(layerName: string) {
    const layer = Engine.currentDoc.layers.getLayerByName(layerName);
    if (!layer) {
        console.log('图层不存在');
        return;
    }
    
    const dialog = new LineTypeDialog();
    const result = await dialog.startLineTypeDialog({
        selectedName: layer.linetype || 'Continuous',
        disabledByLayerAndByBlock: true  // 图层线型不能是 ByLayer/ByBlock
    });
    
    if (result !== undefined) {
        layer.linetype = result;
        console.log(`图层 ${layerName} 的线型已设置为 ${result}`);
    }
}

LinetypeEditorDialog - 线型编辑器

线型定义编辑对话框，提供输入区域和格式说明，用于编辑和加载自定义线型定义。

基本用法

import { LinetypeEditorDialog } from 'vjcad';

// 创建线型编辑对话框
const dialog = new LinetypeEditorDialog();

// 显示对话框（可传入初始内容）
const result = await dialog.startDialog(`*MYLINE,自定义线型
A,10,-5,2,-5`);

if (result !== undefined) {
    console.log('用户输入的线型定义:', result);
    // 可以将 result 传给 LinetypeManager 加载
}

对话框功能

左侧输入区：可编辑的文本框，用于输入 .lin 格式的线型定义
右侧说明区：只读的格式说明文档
从文件导入：可以从 .lin 文件导入内容到编辑区

LinetypeViewerDialog - 线型查看器

只读显示当前所有线型定义的对话框，支持复制和导出。

基本用法

import { LinetypeViewerDialog } from 'vjcad';

// 创建线型查看对话框
const dialog = new LinetypeViewerDialog();

// 显示对话框
await dialog.startDialog();

对话框功能

按分类显示所有线型定义（内置、文档、已加载、自定义）
复制到剪贴板：一键复制所有线型定义
导出到文件：导出为 .lin 文件

PatternPickerDialog - 图案选择器

图案填充选择对话框，用于选择填充图案。

基本用法

import { PatternPickerDialog } from 'vjcad';

// 创建图案对话框
const dialog = new PatternPickerDialog();

// 显示对话框
const result = await dialog.startPatternDialog({
    selectedPattern: 'SOLID'  // 初始选中的图案（可选）
});

if (result !== undefined) {
    console.log('用户选择的图案:', result);
    // result 是图案名称，如 "SOLID", "ANSI31", "BRICK" 等
}

内置图案

图案名称	说明
`SOLID`	实体填充
`ANSI31`	ANSI 金属
`ANSI32`	ANSI 钢
`ANSI33`	ANSI 青铜
`ANSI34`	ANSI 塑料
`ANSI35`	ANSI 防火
`ANSI36`	ANSI 大理石
`ANSI37`	ANSI 混凝土
`BRICK`	砖块
`GRASS`	草地
`EARTH`	泥土

示例：创建填充图元

import { PatternPickerDialog, Engine } from 'vjcad';

async function createHatch() {
    const dialog = new PatternPickerDialog();
    const patternName = await dialog.startPatternDialog({
        selectedPattern: 'ANSI31'
    });
    
    if (patternName !== undefined) {
        // 获取选中的闭合边界
        const boundaries = Engine.selection.getSelectedClosedPolylines();
        
        if (boundaries.length > 0) {
            // 创建填充
            await Engine.editor.executerWithOp('HATCH', {
                pattern: patternName,
                boundaries: boundaries
            });
        }
    }
}

PatternEditorDialog - 图案编辑器

图案定义编辑对话框，提供输入区域和 PAT 格式说明，用于编辑和加载自定义填充图案。

基本用法

import { PatternEditorDialog } from 'vjcad';

// 创建图案编辑对话框
const dialog = new PatternEditorDialog();

// 显示对话框（可传入初始内容）
const result = await dialog.startDialog(`*MYPATTERN,自定义图案
45,0,0,0,3.175`);

if (result !== undefined) {
    console.log('用户输入的图案定义:', result);
    // 可以将 result 传给 PatternManager 加载
}

对话框功能

左侧输入区：可编辑的文本框，用于输入 PAT 格式的图案定义（支持多个图案）
右侧说明区：只读的格式说明文档，包含详细的参数说明和示例
从文件导入：可以从 .pat 文件导入内容到编辑区

PatternViewerDialog - 图案查看器

只读显示当前所有图案定义的对话框，支持复制和导出。

基本用法

import { PatternViewerDialog } from 'vjcad';

// 创建图案查看对话框
const dialog = new PatternViewerDialog();

// 显示对话框
await dialog.startDialog();

对话框功能

按分类显示所有图案定义（内置、文档、已加载、自定义）
复制到剪贴板：一键复制所有图案定义
导出到文件：导出为 .pat 文件

BlockNameDialog - 块名称选择器

块名称选择对话框，用于从当前文档中选择已定义的块。

基本用法

import { BlockNameDialog } from 'vjcad';

// 创建块名称对话框
const dialog = new BlockNameDialog();

// 显示对话框
const result = await dialog.startBlockNameDialog();

if (result !== undefined) {
    console.log('用户选择的块:', result);
}

LayerNameDialog - 图层名称输入

图层名称输入对话框，用于创建新图层或重命名图层。

基本用法

import { LayerNameDialog } from 'vjcad';

// 创建图层名称对话框
const dialog = new LayerNameDialog();

// 显示对话框
const result = await dialog.startLayerNameDialog({
    title: '新建图层',
    defaultName: 'Layer1'
});

if (result !== undefined) {
    console.log('用户输入的图层名:', result);
}

完整示例：属性修改工具

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

/**
 * 批量修改选中图元的属性
 */
async function modifyEntityProperties() {
    const selected = Engine.selection.getSelectedEntities();
    
    if (selected.length === 0) {
        await showInfo('请先选择要修改的图元');
        return;
    }
    
    // 1. 选择颜色
    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; // 用户取消
    
    // 2. 选择线型
    const linetypeDialog = new LineTypeDialog();
    const newLinetype = await linetypeDialog.startLineTypeDialog({
        selectedName: selected[0].linetype || 'Continuous',
        disabledByLayerAndByBlock: false
    });
    if (newLinetype === undefined) return; // 用户取消
    
    // 3. 确认修改
    const confirmed = await showConfirm(
        `确定要将 ${selected.length} 个图元的颜色改为 ${newColor}，线型改为 ${newLinetype} 吗？`
    );
    
    if (confirmed) {
        // 应用修改
        for (const entity of selected) {
            // 设置颜色
            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);
            }
            
            // 设置线型
            entity.linetype = newLinetype;
        }
        
        Engine.redraw();
        console.log('属性修改完成');
    }
}

下一步

对话框组件 - 基础对话框和确认框
基础控件 - 按钮、输入框等控件
图标注册 - SVG 图标