右键菜单控件

右键菜单就是在鼠标指向场景时，点击右键，弹出菜单项，再次点击菜单项功能，对鼠标所选中的场景构件进行对应操纵。

我们提供右键菜单操作, 通过设置 scene 实例中的 ui.contextMenu 属性来初始化右键菜单。

1. 数据结构

1.1 菜单配置

interface ContextMenu {
    // 是否启用菜单
    enable: boolean,
    // 菜单数据
    menus: ContextMenuItem[][]
}

1.2 菜单项

interface ContextMenuItem {
    //唯一标识符
    id: string | number
    // 菜单项是否禁用
    disabed: boolean
    // 菜单项名称
    label: string
    // 菜单代号
    name: string
    // 图标
    icon: string
    // 子菜单
    children: ContextMenuItem[][]
    // 菜单项点击回调
    onClick: (event: MouseEvent, data: ContextMenuItem) => void
}

设置 enable 属性控制右键菜单是否出现，menus 是一个二维数组，每个数组项为一个菜单分组。

1.3 可选菜单项

我们提供了一些菜单项，通过指定菜单的 name 属性进行自定义配置，默认提供的右键菜单选项如下表所示：

name	名称	说明
property	属性	点击此菜单项可显示当前选中构件的属性面板。
hide-object	隐藏选中构件	在场景中不显示当前选中构件。
isolate-object	孤立选中构件	将选中的单个或多个构件单独显示，反向隐藏其他未选中构件。
freeze-object	冻结选中构件	将选中的单个或多个构件进行半透明显示。
divide-object	隔离选中构件	将选中的单个或多个构件单独显示，反向半透明显示其他未选中构件。
clear-select	清除选择	清除当前选中构件及操作并显示所有构件。
show-all	显示所有	显示场景中所有构件。
focus	焦点	聚焦当前选中构件。

注：这些菜单项的实现效果可以查看下方"完整示例"跳转页。

2. 控件使用

右键菜单的具体使用方式请参看下方示例代码：

const scene = new ubm.Scene('app', {
  ...
  ui:{
    contextMenu:{
      enable:true,
      menus:[[{
            label:'属性', 
            name:'property',
          }],
          [{
            label:'隐藏构件', 
            name:'hide-object',
          },{
            label:'隐藏其他构件', 
            name:'isolate-object',
          },
          ],[
          {
            label:'半透明构件', 
            name:'freeze-object',
          },{
            label:'半透明其他构件', 
            name:'divide-object',
          }],
          [{
            label:'清除选择', 
            name:'clear-select',
          },{
            label:'显示所有', 
            name:'show-all',
          }],
          [{
            label:'自定义菜单', icon:'system-management', 
            onClick: (_event, data) => {
              alert(JSON.stringify(data))
            }
          }]]
    }
  }
  ...
})

UI组件控件

在 SDK 中，我们提供了一些 UI 组件，可以通过 UIDisplayWidget 控件暴露出来并对这些 UI 组件使用。

工具栏控件

在场景中为了方便使用各种特定的功能，我们提供了一个工具栏控件 ToolbarWidget来存放。