HumanBreak/docs/api/class/custom-toolbar.md

类 CustomToolbar

渲染进程类，游戏进程不可直接使用，继承自 EventEmitter

• 实例成员
  • items
  • num
  • id
  • x
  • y
  • width
  • height
  • assistKey
  • showIds
• 实例方法
  • 构造器constructor
  • add
  • delete
  • set
  • emitTool
  • refresh
  • setPos
  • setSize
  • show
  • close
  • closeAll
• 静态成员
  • num
  • list
  • info
• 静态方法
  • get
  • register
  • save
  • load
  • showAll
  • closeAll
• 实例事件
  • add
  • delete
  • set
  • emit
  • posChange

使用案例

• 新增一个默认的自定义工具栏

  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 })
  

部分接口与类型说明

interface ToolbarItemBase {
    type: string
    id: string
}

自定义工具项的基础信息，每个自定义工具项必定包含，在此之外还可以自定义其他属性

• type: 自定义工具的类型
• id: 自定义工具的 id

interface CustomToolbarProps {
    item: ToolbarItemBase
    toolbar: CustomToolbar
}

自定义工具项的组件参数（props），对于编辑组件也是如此

• item: 当前的自定义工具项
• toolbar: 自定义工具项所处的自定义工具栏实例

:::info 消歧义 一般情况下，自定义工具栏指的是一整个自定义工具栏界面，自定义工具或者自定义工具项表示单个的自定义工具，例如是一个按键工具等，自定义工具栏里面包含若干个自定义工具项 :::

type ToolItemEmitFn = (
    this: CustomToolbar,
    id: string,
    item: ToolbarItemBase
) => boolean;

工具被触发时执行的触发函数

• id: 触发的工具的 id
• item: 触发的自定义工具信息

items

declare var items: ToolbarItemBase[]

• 成员说明

  保存了这个自定义工具栏的所有自定义工具项

num

declare var num: number

• 成员说明

  这个自定义工具栏的唯一标识符

id

declare var id: string

• 成员说明

  表示这个自定义工具栏的 id

x

declare var x: number

y

declare var y: number

width

declare var width: number

height

declare var height: number

• 成员说明

  以上四个成员描述了这个自定义工具栏所处的位置（相对页面左上角），以及长和宽

assistKey

declare var assistKey: number

• 成员说明

  表示了当前自定义工具栏的辅助按键信息

showIds

declare var showIds: number[]

• 成员说明

  描述了所有打开的基于本自定义工具栏的界面。由于一个自定义工具栏可以打开多个界面，因此使用一个数组进行存储所有打开的界面

constructor()

interface CustomToolbar {
    new(id: string): CustomToolbar
}

add()

declare function add(item: ToolbarItemBase): this

• 方法说明

  添加一个自定义工具项

delete()

declare function delete(id: string): this

• 方法说明

  删除一个自定义工具项

set()

declare function set(id: string, item: Partial<SettableItemData>): this

• 参数说明

  • id: 要设置的自定义工具项的 id
  • item: 设置信息，除了 type 和 id 设置不了外，其余均可设置

• 方法说明

  设置一个自定义工具项的信息

emitTool()

declare function emitTool(id: string): this

• 方法说明

  触发一个自定义工具项

refresh()

declare function refresh(): this

• 方法说明

  强制刷新所有的自定义工具项的显示

setPos()

declare function setPos(x?: number, y?: number): void

setSize()

declare function setSize(width?: number, height?: number): void

• 方法说明

  这两个方法用于设置这个自定义工具栏的位置和长宽

show()

declare function show(): number

• 方法说明

  基于这个自定义工具栏，显示出来其对应的界面，可以显示多个，内容互通

• 返回值

  显示的界面的唯一标识符

close()

declare function close(id: number): void

• 参数说明

  • id: 要关闭的自定义工具栏界面的标识符

• 方法说明

  关闭一个自定义工具栏界面

closeAll()

declare function closeAll(): void

• 方法说明

  关闭这个自定义工具栏的所有显示

static num

declare var num: number

• 静态成员说明

  当前唯一标识符增长到了多少

list

declare var list: CustomToolbar[]

• 静态成员说明

  存储了当前所有的自定义工具栏实例

info

declare var info: Record<string, RegisteredCustomToolInfo>

• 静态成员说明

  存储了所有类型的自定义工具类型

• 接口 RegisteredCustomToolInfo

  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()

declare function get(id: string): CustomToolbar

• 静态方法说明

  根据自定义工具栏的 id 获取自定义工具栏实例

register()

declare function register(
    type: string,
    name: string,
    onEmit: ToolItemEmitFn,
    show: CustomToolbarComponent,
    editor: CustomToolbarComponent,
    onCreate: (item: any) => ToolbarItemBase
)

• 参数说明（参考info）

  • type: 要注册的自定义工具类型
  • name: 该类型的中文名
  • onEmit: 当触发这个自定义工具的时候执行的函数
  • show: 这个自定义工具在自定义工具栏的显示组件
  • editor: 这个自定义工具在编辑时编辑组件
  • onCreate: 当这个自定义工具在编辑器中被添加时，执行的初始化脚本

• 静态方法说明

  注册一个自定义工具类型

• 示例

  以下是样板中注册使用道具的工具类型的代码

  CustomToolbar.register(
      'item',
      '使用道具',
      function (id, item) {
          // 道具
          core.tryUseItem(item.item);
          return true;
      },
      COM.ItemTool,
      EDITOR.ItemTool,
      item => {
          return {
              item: 'book',
              ...item
          };
      }
  );
  

save()

declare function save(): void

• 静态方法说明

  将目前的自定义工具栏状态存入本地存储

load()

declare function load(): void

• 静态方法说明

  从本地存储读取自定义工具栏状态

showAll()

declare function showAll(): void

• 静态方法说明

  把所有自定义工具栏都打开一个新的界面（如果是一打开的，会再打开一个）

static closeAll()

declare function closeAll(): void

• 静态方法说明

  关闭所有自定义工具栏的所有显示

add 事件

interface CustomToolbarEvent {
    add: (item: ToolbarItemBase) => void
}

delete 事件

interface CustomToolbarEvent {
    delete: (item: ToolbarItemBase) => void
}

set 事件

interface CustomToolbarEvent {
    set: (id: string, data: Partial<SettableItemData>) => void
}

emit 事件

interface CustomToolbarEvent {
    emit: (id: string, item: ValueOf<ToolbarItemMap>) => void
}

posChange 事件

interface CustomToolbarEvent {
    posChange: (bar: CustomToolbar) => void
}