# 类 CustomToolbar 渲染进程类，游戏进程不可直接使用，继承自 [`EventEmitter`](./event-emitter.md) - 实例成员 - [`items`](#items) - [`num`](#num) - [`id`](#id) - [`x`](#x) - [`y`](#y) - [`width`](#width) - [`height`](#height) - [`assistKey`](#assistkey) - [`showIds`](#showids) - 实例方法 - 构造器[`constructor`](#constructor) - [`add`](#add) - [`delete`](#delete) - [`set`](#set) - [`emitTool`](#emittool) - [`refresh`](#refresh) - [`setPos`](#setpos) - [`setSize`](#setsize) - [`show`](#show) - [`close`](#close) - [`closeAll`](#closeall) - 静态成员 - [`num`](#static-num) - [`list`](#list) - [`info`](#info) - 静态方法 - [`get`](#get) - [`register`](#register) - [`save`](#save) - [`load`](#load) - [`showAll`](#showall) - [`closeAll`](#static-closeall) - 实例事件 - [`add`](#add-事件) - [`delete`](#delete-事件) - [`set`](#set-事件) - [`emit`](#emit-事件) - [`posChange`](#poschange-事件) ## 使用案例 - 新增一个默认的自定义工具栏 ```ts const { CustomToolbar } = Mota.requireAll('class'); const { KeyCode } = Mota.requireAll('var'); const myBar = new CustomToolbar('myBar'); mybar.x = 100; mybar.y = 100; mybar.width = 300; mybar.height = 70; // 高度，对于默认设置，自定义工具栏一行的高度为60，行高为10，因此设为70正好为一行 // 添加你自己的自定义工具项，这里添加了一个M的快捷键 mybar.add({ id: 'myTool', type: 'hotkey', key: KeyCode.KeyM, assist: 0 }) ``` ## 部分接口与类型说明 ```ts interface ToolbarItemBase { type: string id: string } ``` 自定义工具项的基础信息，每个自定义工具项必定包含，在此之外还可以自定义其他属性 - `type`: 自定义工具的类型 - `id`: 自定义工具的 id ```ts interface CustomToolbarProps { item: ToolbarItemBase toolbar: CustomToolbar } ``` 自定义工具项的组件参数（props），对于编辑组件也是如此 - `item`: 当前的自定义工具项 - `toolbar`: 自定义工具项所处的自定义工具栏实例 :::info 消歧义 一般情况下，自定义工具栏指的是一整个自定义工具栏界面，自定义工具或者自定义工具项表示单个的自定义工具，例如是一个按键工具等，自定义工具栏里面包含若干个自定义工具项 ::: ```ts type ToolItemEmitFn = ( this: CustomToolbar, id: string, item: ToolbarItemBase ) => boolean; ``` 工具被触发时执行的触发函数 - `id`: 触发的工具的 id - `item`: 触发的自定义工具信息 ## items ```ts declare var items: ToolbarItemBase[] ``` - 成员说明 保存了这个自定义工具栏的所有自定义工具项 ## num ```ts declare var num: number ``` - 成员说明 这个自定义工具栏的唯一标识符 ## id ```ts declare var id: string ``` - 成员说明 表示这个自定义工具栏的 id ## x ```ts declare var x: number ``` ## y ```ts declare var y: number ``` ## width ```ts declare var width: number ``` ## height ```ts declare var height: number ``` - 成员说明 以上四个成员描述了这个自定义工具栏所处的位置（相对页面左上角），以及长和宽 ## assistKey ```ts declare var assistKey: number ``` - 成员说明 表示了当前自定义工具栏的辅助按键信息 ## showIds ```ts declare var showIds: number[] ``` - 成员说明 描述了所有打开的基于本自定义工具栏的界面。由于一个自定义工具栏可以打开多个界面，因此使用一个数组进行存储所有打开的界面 ## constructor() ```ts interface CustomToolbar { new(id: string): CustomToolbar } ``` ## add() ```ts declare function add(item: ToolbarItemBase): this ``` - 方法说明 添加一个自定义工具项 ## delete() ```ts declare function delete(id: string): this ``` - 方法说明 删除一个自定义工具项 ## set() ```ts declare function set(id: string, item: Partial): this ``` - 参数说明 - `id`: 要设置的自定义工具项的 id - `item`: 设置信息，除了 `type` 和 `id` 设置不了外，其余均可设置 - 方法说明 设置一个自定义工具项的信息 ## emitTool() ```ts declare function emitTool(id: string): this ``` - 方法说明 触发一个自定义工具项 ## refresh() ```ts declare function refresh(): this ``` - 方法说明 强制刷新所有的自定义工具项的显示 ## setPos() ```ts declare function setPos(x?: number, y?: number): void ``` ## setSize() ```ts declare function setSize(width?: number, height?: number): void ``` - 方法说明 这两个方法用于设置这个自定义工具栏的位置和长宽 ## show() ```ts declare function show(): number ``` - 方法说明 基于这个自定义工具栏，显示出来其对应的界面，可以显示多个，内容互通 - 返回值 显示的界面的唯一标识符 ## close() ```ts declare function close(id: number): void ``` - 参数说明 - `id`: 要关闭的自定义工具栏界面的标识符 - 方法说明 关闭一个自定义工具栏界面 ## closeAll() ```ts declare function closeAll(): void ``` - 方法说明 关闭这个自定义工具栏的所有显示 ## static num ```ts declare var num: number ``` - 静态成员说明 当前唯一标识符增长到了多少 ## list ```ts declare var list: CustomToolbar[] ``` - 静态成员说明 存储了当前所有的自定义工具栏实例 ## info ```ts declare var info: Record ``` - 静态成员说明 存储了所有类型的自定义工具类型 - 接口 `RegisteredCustomToolInfo` ```ts interface RegisteredCustomToolInfo { name: string; onEmit: ToolItemEmitFn; show: CustomToolbarComponent; editor: CustomToolbarComponent; onCreate: (item: any) => ToolbarItemBase; } ``` - `name`: 这个自定义工具类型的名称，例如快捷键、使用道具等 - `onEmit`: 当这个自定义工具类型被触发时，执行的函数 - `show`: 这个自定义工具类型显示在界面上的时候的显示组件 - `editor`: 这个自定义工具类型在玩家编辑时，显示的组件，例如使用道具类型就是选择要使用的道具，也就是在系统设置里面的自定义工具栏中显示的编辑界面 - `onCreate`: 当添加一个新的这个类型的自定义工具项时，执行的初始化函数，一般是把一些变量设为默认值，例如使用道具就是设置为使用怪物手册 - 系统自带自定义工具类型 - `hotkey`: 快捷键工具，默认按键为 `Unknown`，无辅助按键 - `item`: 使用道具，默认使用的道具为怪物手册 - `assistKey`: 开关辅助按键，可以开关 Ctrl 等辅助按键，然后触发快捷键工具时会附带辅助按键触发 ## get() ```ts declare function get(id: string): CustomToolbar ``` - 静态方法说明 根据自定义工具栏的 id 获取自定义工具栏实例 ## register() ```ts declare function register( type: string, name: string, onEmit: ToolItemEmitFn, show: CustomToolbarComponent, editor: CustomToolbarComponent, onCreate: (item: any) => ToolbarItemBase ) ``` - 参数说明（参考[`info`](#info)） - `type`: 要注册的自定义工具类型 - `name`: 该类型的中文名 - `onEmit`: 当触发这个自定义工具的时候执行的函数 - `show`: 这个自定义工具在自定义工具栏的显示组件 - `editor`: 这个自定义工具在编辑时编辑组件 - `onCreate`: 当这个自定义工具在编辑器中被添加时，执行的初始化脚本 - 静态方法说明 注册一个自定义工具类型 - 示例 以下是样板中注册使用道具的工具类型的代码 ```ts CustomToolbar.register( 'item', '使用道具', function (id, item) { // 道具 core.tryUseItem(item.item); return true; }, COM.ItemTool, EDITOR.ItemTool, item => { return { item: 'book', ...item }; } ); ``` ## save() ```ts declare function save(): void ``` - 静态方法说明 将目前的自定义工具栏状态存入本地存储 ## load() ```ts declare function load(): void ``` - 静态方法说明 从本地存储读取自定义工具栏状态 ## showAll() ```ts declare function showAll(): void ``` - 静态方法说明 把所有自定义工具栏都打开一个新的界面（如果是一打开的，会再打开一个） ## static closeAll() ```ts declare function closeAll(): void ``` - 静态方法说明 关闭所有自定义工具栏的所有显示 ## add 事件 ```ts interface CustomToolbarEvent { add: (item: ToolbarItemBase) => void } ``` ## delete 事件 ```ts interface CustomToolbarEvent { delete: (item: ToolbarItemBase) => void } ``` ## set 事件 ```ts interface CustomToolbarEvent { set: (id: string, data: Partial) => void } ``` ## emit 事件 ```ts interface CustomToolbarEvent { emit: (id: string, item: ValueOf) => void } ``` ## posChange 事件 ```ts interface CustomToolbarEvent { posChange: (bar: CustomToolbar) => void } ```