工具栏控件

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

工具栏控件

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

工具栏控件里不仅可以存放内置插件,还可以添加一些自定义功能项。

1. 类型

1.1 工具排列

工具栏中工具的排列方式,默认为common

类型描述
vertical竖排
horizontal横排
common普通

1.2 工具显示形式

工具栏中工具是否互斥显示,如下所示,默认值为mix

属性值描述
mutex互斥,指的是点击显示的工具项面板只显示一个
mix混合,指可以同时显示多个工具项面板

1.3 面板方向

点击工具栏中功能项时,弹出的面板相对于工具栏的位置,默认值为bottom,共有以下可选项:

枚举值描述
top顶部,当type为horizontal设置有效
bottom下,当type为horizontal设置有效
left左,当type为vertical设置有效
left右,当type为vertical设置有效

1.4 工具栏的状态

在触屏情况下的工具栏的状态,默认为auto

描述
on
off
auto自动

2. 属性

2.1 工具栏属性

属性类型说明必填
toolsITool工具项
containerstring | HTMLElementDOM
styleStyleSheet样式
iconStyleIIconStyle工具图标样式
groupStylestring分组样式
placementstring面板方向,工具相对于toolbar的摆放位置
modestring是否使工具项互斥显示
typestring工具的排列类型
isHeightAlignmentboolean是否适配工具高度符合竖排高度 (当type为vertical设置有效)
touchToolbarTouch适配触屏

2.2 工具项属性

工具项的数据结构ITool的属性如下:

属性类型说明必填
idstringID
namestring名称,根据名称确定所放置的插件
labelstring简介
iconstring图标大小
isCustomstring是否是自定义widget
selectableboolean是否选中,默认false
props---所需传入的参数

2.3 适配触屏属性

适配触屏的数据结构ToolbarTouch的属性如下:

属性类型说明必填
enablestring是否开启触屏类型,默认为auto
maxnumber最大行数或者列数,默认是2(注意tool位于上下使用行,左右使用列)

2.4 工具图标属性

工具图标属性的数据结构IIconStyle的属性如下:

属性类型说明必填
sizenumber图标大小
defaultIconColorstring图标默认颜色
activeIconColorstring高亮图标颜色
defaultStylestring默认样式
activeStylestring高亮样式

3. 事件

事件说明
onInit()工具项初始化事件
onClick()工具项点击事件

3.1 工具项初始化事件

onInit?: (props: object | undefined) => void;

可以设置控件的初始状态,如:给需要使用的属性赋值、设置初始化数据等。代码示例如下:

let i
...
onInit: () => { 
  // 赋值
  i = 222
  // 设置初始化数据
  let a = 1
}
...

3.2 工具项点击事件

onClick?: (index: number | string) => void;

主要用于工具项的图形界面显隐,但同时也可以设置其他触发事件,如:修改工具项的属性等。代码示例如下:

onClick: () => {
  alert('你点击了自定义工具项按钮')
  // 修改工具项的图标
  tool.icon = 'x-bar'
  // 设置定时操作
  setTimeout(() => {
    tool.selectable = false
  }, 1000);
}

4. 使用

由上述类型、属性和方法可以看出,工具栏控件是和工具项紧密联系的。

4.1 场景初始化时添加

场景初始化添加工具栏,代码示例如下:

  new ubm.Scene('app', { 
    viewingMode: 'local',  
    ui:{
      // 工具栏
      toolbar:{
        // 类型
        type: 'vertical',
        // 工具相对于toolbar的摆放位置
        placement: 'top',
        // 是否适配插件高度符合竖排高度 (当type为vertical设置有效)
        isHeightAlignment: false,
        // 互斥显示 
        mode: 'mutex',
        // DOM
        container: 'container', 
        // 适配触屏
        touch: {
          enable: 'auto'
        },
        // 工具组
        tools: [
          // 组0-简写:属于内置插件写法,只写插件id
          ['measure', // 测量插件
          'viewPoint'], // 视点书签
          // 组1-常规写:属于内置插件写法,标明插件及其属性
          [{
              name: 'tree',
              label: '构件树',
              // 插件属性
              props: {
                  openContextMenu: false,
                  openProperty: true,
                  visible: false,
                  expandType: 'icon',
                  expandAll: false,
                  keys: {
                      primary_key: 'guid',
                      value: 'guid'
                  }
              }
          }],
          // 组2-custom:属于自定义功能项,可自定义工具栏的某项工具的功能作用            
          [{
            name: 'custom',
            icon: 'map-contents',
            label: '自定义工具项按钮',
            onClick: () => {
              alert('你点击了自定义工具项按钮')
            }
          }],
        ]
      }
    }
    
  })

以上tools由三种不同的group组成,group不仅代 表它们的分类,也表明了在工具栏中的位置,group默认是从0开始的。

理解了group也方便后续自定义功能项的添加。

4.2 场景初始化之后添加

初始后场景后,可以使用CustomTool在场景中创建自定义的工具项,并把其添加到场景的工具栏中。代码示例如下:

let i
// 创建自定义工具项
const tool = new ubm.CustomTool({
  name: '111',
  // 场景
  scene: scene,
  label: '111',
  icon: 'web',
  onInit: () => { 
    i = 222
  },
  onClick: () => {
    // 获取声明的功能tool,修改其属性icon
    tool.icon = 'x-bar'
    setTimeout(() => {
      tool.selectable = false
    }, 1000);
    console.log('iii', i);
  },
})
// 把工具项添加到场景工具栏中,可指定组别group
scene.ui.toolbar.add(tool, 2)

5. 其它

5.1 内置插件

以下列举了一些可以在工具栏中直接使用的内置插件,如有需要了解详细,可点击查看插件列表

  • viewPoint:视点书签
  • visibility:视口过滤
  • slice:剖切分析
  • sceneSetting:场景预设
  • route:路径分析
  • roam:视角漫游
  • renderMode:显示模式
  • note:场景批注
  • measure:场景测量
  • mapFilter:颜色过滤
  • lineOfSight:通视分析
  • environment:环境设置
  • drawing:绘制
  • dimension:场景标注
  • buffer:缓冲分析
  • propertyView:特性

BIMFlux AI