GUI 配置项结构定义 - TypeScript 接口与类型别名

GUI 配置项结构定义 - TypeScript 接口与类型别名

本文档详细介绍了 GUI 配置项结构定义，包括 GUIData 接口用于定义 GUI 数据结构，GUIBind 接口用于定义 GUI 绑定结构，GUIBindDefinition 接口用于定义 GUI 绑定的具体实现，以及 GUIBindTypeMap 和 GUIBindTypes 类型别名用于映射和定义 GUI 绑定类型。最后，GUIConfigItem 和 GUIConfig 类型别名用于定义 GUI 配置项和 GUI 配置结构。

接口定义

1. GUIData 接口

interface GUIData {
    name: string;
    attributes?: {
        [name: string]: string | number;
    };
    children?: GUIData[];
}

接口 GUIData 用于定义 GUI 数据的结构，包括名称 (name)、属性 (attributes) 和子元素 (children)。

2. GUIBind 接口

interface GUIBind<T extends string> {
    event: string;
    selector?: string;
    action: T;
}

接口 GUIBind 用于定义 GUI 绑定的结构，包括事件 (event)、选择器 (selector) 和动作 (action)。

3. GUIBindDefinition 接口

interface GUIBindDefinition<T> {
    drag: {
        attributes: {
            [name: string]: 'x' | '-x' | 'y' | '-y';
        };
        targetSelector: string;
    };
    show: {
        name: T;
        allowMultiple?: boolean;
    };
    remove: {
        targetSelector: string;
    };
    sendMessage: {
        messageName: string;
        messageData?: string[];
    };
    clipboardWrite: {
        targetSelector: string;
        attributeName: string;
    };
}

接口 GUIBindDefinition 用于定义 GUI 绑定的具体实现，包括拖拽 (drag)、显示 (show)、删除 (remove)、发送消息 (sendMessage) 和写入剪贴板 (clipboardWrite)。

类型别名定义

1. GUIBindTypeMap 类型别名

declare type GUIBindTypeMap<T> = {
    [key in keyof GUIBindDefinition<T>]: GUIBind<key> & GUIBindDefinition<T>[key];
};

类型别名 GUIBindTypeMap 用于将 GUI 绑定类型与 GUI 绑定定义进行映射。

2. GUIBindTypes 类型别名

declare type GUIBindTypes<T> = GUIBindTypeMap<T>[keyof GUIBindTypeMap<T>];

类型别名 GUIBindTypes 用于定义 GUI 绑定的类型。

3. GUIConfigItem 类型别名

interface GUIConfigItem<T extends string> {
    display?: boolean;
    bindings?: GUIBindTypes<T>[];
    data: string | GUIData;
}

接口 GUIConfigItem 用于定义 GUI 配置项的结构，包括显示 (display)、绑定 (bindings) 和数据 (data)。

4. GUIConfig 类型别名

declare type GUIConfig<T extends string, U extends T> = {
    [name in T]: GUIConfigItem<U>;
};

类型别名 GUIConfig<T, U> 用于定义 GUI 配置的结构，包括不同类型的 GUI 配置项。

例子

interface MyGUIData extends GUIData {
    type: string;
}

type MyGUIBindType = GUIBindTypes<'show' | 'remove'>;

const myConfig: GUIConfig<string, 'show' | 'remove'> = {
    'button1': {
        display: true,
        bindings: [
            {
                event: 'click',
                action: 'show',
                name: 'panel1'
            },
            {
                event: 'click',
                action: 'remove',
                targetSelector: '.element1'
            }
        ],
        data: 'Button 1'
    },
    'button2': {
        display: false,
        bindings: [
            {
                event: 'click',
                action: 'show',
                name: 'panel2',
                allowMultiple: true
            },
            {
                event: 'click',
                action: 'remove',
                targetSelector: '.element2'
            }
        ],
        data: {
            name: 'Button 2',
            type: 'button'
        }
    }
};

以上代码定义了一个名为 myConfig 的 GUI 配置，包含两个配置项 button1 和 button2，其中 button1 显示，绑定了点击事件，点击后显示 panel1，并且绑定了点击事件，点击后删除 .element1 元素；button2 隐藏，绑定了点击事件，点击后显示 panel2（允许多次显示），并且绑定了点击事件，点击后删除 .element2 元素。