ToolCollectionInstance | 互动白板 v3.8.5

Hierarchy

ToolCollectionInstance

Index

Methods

addDoc

addDoc(doc: IDocEntity): void

添加一个转码文件至文档弹窗中。

如果新添加的docId已存在，则它会覆盖已有转码文件内容

example

addDoc(
 {
     docId: '12222',
     fileType: 'pdf',
     name: '示例pdf',
     showDelete: true,
     params: {
         template: "https://nim.nosdn.127.net/408e9c59-cdc2-4979-b3e2-85d02d4f7ea3_1_{index}.jpg",
         width: 1920,
         height: 1080,
         offset: 1,
         pageCount: 2
     }
 }
)

Parameters

doc: IDocEntity

Returns void

addDocEventListener

addDocEventListener(event: "docAdd", callback: (docList: IDocEntity[]) => void): void
addDocEventListener(event: "docDelete", callback: (docList: IDocEntity[]) => void): void

已废弃!!! 3.6.0开始请使用toolCollection.on替换该函数

工具栏内转码成功后，以及用户通过ToolCollectionInstance.setDefaultDocList, ToolCollectionInstance.addDoc添加文档时，会触发此函数回调。

用户可以使用该回调函数，在转码成功后，将转码结果保存在用户的应用服务器中
example
```
addDocEventListener('docAdd', (docList) => {
 for (let doc of docList) {
     pushToServer(uid, doc)
 }
})
```
Parameters
- event: "docAdd"
- callback: (docList: IDocEntity[]) => void
  - - (docList: IDocEntity[]): void
    - Parameters
      - docList: IDocEntity[]
      Returns void
Returns void
已废弃!!! 3.6.0开始请使用toolCollection.on替换该函数

文档弹窗内转码文件被删除时，会触发此回调。

用户可以使用该回调函数，在文件被删除后，删除应用服务器中相关数据
example
```
addDocEventListener('docDelete', (docList) => {
 for (let doc of docList) {
     removeFromServer(uid, doc)
 }
})
```
Parameters
- event: "docDelete"
- callback: (docList: IDocEntity[]) => void
  - - (docList: IDocEntity[]): void
    - Parameters
      - docList: IDocEntity[]
      Returns void
Returns void

addOrSetContainer

addOrSetContainer(option: IContainerOption): void

重置给定位置(option.position)的工具栏。

example

添加动态文档后，重置右下角的工具栏

addOrSetContainer({
 position: 'bottomRight',
 items: [
   {
       tool: 'prevPage',
       hint: '上一页'
   },
   {
       tool: 'prevAnim',
       hint: '上一步'
   },
   {
       tool: 'pageInfo'
   },
   {
       tool: 'nextAnim',
       hint: '下一步'
   },
   {
       tool: 'nextPage',
       hint: '下一页'
   },
   {
       tool: 'preview',
       hint: '预览',
       previewSliderPosition: 'right'
   }
 ]
})

Parameters

option: IContainerOption

Returns void

addOrSetSubItem

addOrSetSubItem(opt: { baseTool: "shapeSelect" | "multiInOne"; insertAfterTool?: string; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"; subItem: IUnitOption }): void

在图形集合(shapeSelect)，或者收纳盒(multiInOne)中添加子图标

若position未指定，则会寻找所有位置名字匹配baseTool的图标集合
example
在左侧图形集合中添加自定义的triangle图标
```
addOrSetSubItem({
 position: 'left',
 baseTool: 'shapeSelect',
 insertAfterTool: 'ellipse-fill',
 subItem: {
     tool: 'triangle',
     hint: '等腰三角形',
     backgroundImage: 'url_of_triangle_icon_image'
 }
})
```
Parameters
- opt: { baseTool: "shapeSelect" | "multiInOne"; insertAfterTool?: string; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"; subItem: IUnitOption }
  - baseTool: "shapeSelect" | "multiInOne"
    
    选择图形集合，或者收纳盒作为目标按钮
  - Optional insertAfterTool?: string
    
    将子按钮添加到insertAfterTool之后，如果未提供，则添加到最后一个
  - Optional position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"
    
    添加子按钮于位于position的工具栏中
  - subItem: IUnitOption
    
    被添加的子按钮
Returns void

addOrSetTool

addOrSetTool(opt: { insertAfterTool?: string; item: IUnitOption; position: IPosition }): void

添加工具栏图标。如果图标已存在，则更新已有图标
example
在左侧工具栏的undo图标前面，添加video图标
```
addOrSetTool({
 position: 'left',
 insertAfterTool: 'video'
 item: {
   tool: 'video',
   hint: '上传视频'
 }
})
```
Parameters
- opt: { insertAfterTool?: string; item: IUnitOption; position: IPosition }
  - Optional insertAfterTool?: string
    
    将按钮添加到insertAfterTool后面如果未提供，则默认添加到最后一个
  - item: IUnitOption
    
    要添加的工具栏按钮配置
  - position: IPosition
    
    添加按钮于位于position的工具栏中
Returns void

addToolEventListener

addToolEventListener(toolName: "custom-[name]", callback: () => void): void
addToolEventListener(toolName: "custom-state-[name]", callback: (opt: { newState: string; state: string }) => void): void

已废弃!!! 3.6.0开始请使用toolCollection.on替换该函数

点击自定义按钮(custom-[name])时，触发此回调函数
example
比如点击自定义马克笔按钮，实现点击后设置画笔透明度，粗细为马克笔的样式。注意，下面的示例需要用户先添加自定义按钮。自定义按钮是名字格式为custom-[name]的按钮
```
{
  tool: 'custom-markpen',
  hint: '马克笔',
  backgroundImage: 'url_of_markpen_icon'
}

addToolEventListener('custom-markpen', () => {
 drawPlugin.setOpacity(0.4)
 drawPlugin.setStrokeWidth(10)
})
```
Parameters
- toolName: "custom-[name]"
- callback: () => void
  - - (): void
    - Returns void
Returns void
已废弃!!! 3.6.0开始请使用toolCollection.on替换该函数

点击自定义含状态按钮(custom-state-[name])时，触发此回调函数
example
比如点击自定义状态按钮切换编辑状态。默认可以编辑，点击后可以切换是否可以编辑注意，下面的示例需要用户先添加自定义状态按钮。自定义状态按钮是名字格式为custom-state-[name]的按钮
```
{
 tool: 'custom-state-toggle-editable',
 hint: '切换编辑',
 clickCb: (currState) => {
   if (currState === 'editable') return 'non-editable'
   else return 'editable'
 },
 defaultState: 'editable',
 backgroundImageByState: {
   'editable': 'url_of_editable_state_icon',
   'non_editable': 'url_of_non_editable_state_icon'
 }
}

addToolEventListener('custom-state-toggle-editable', (opt) => {
 if (opt.newState === 'editable') {
    drawPlugin.enableDraw(true)
 } else {
    drawPlugin.enableDraw(false)
 }
})
```
Parameters
- toolName: "custom-state-[name]"
- callback: (opt: { newState: string; state: string }) => void
  - - (opt: { newState: string; state: string }): void
    - Parameters
      - opt: { newState: string; state: string }
        
        newState: string
        
        点击后的按钮状态
        
        state: string
        
        点击前的按钮状态
      Returns void
Returns void

deleteDoc

deleteDoc(docId: string): void

删除转码弹窗中的转码文件
example
删除上面示例中的静态转码文件
```
deleteDoc('12222')
```
Parameters
- docId: string
Returns void

hide

hide(): void

隐藏工具栏

Returns void

off

off(event: "docAdd" | "docDelete" | "iconClick", callback: (...args: any[]) => void): void

注销工具栏回调函数

example

const editableClickFn = (toolName, opt) => {
 if (toolName === 'custom-state-toggle-editable') {
     if (opt.newState === 'editable') {
         drawPlugin.enableDraw(true)
     } else {
         drawPlugin.enableDraw(false)
     }
 }
}

toolCollection.on('iconClick', editableClickFn)

//After some time...
toolCollection.off('iconClick', editableClickFn)

Parameters

event: "docAdd" | "docDelete" | "iconClick"
callback: (...args: any[]) => void
- - (...args: any[]): void
  - Parameters
    - Rest ...args: any[]
    Returns void

Returns void

on

on(event: "docAdd", callback: (docList: IDocEntity[]) => void): void
on(event: "docDelete", callback: (docList: IDocEntity[]) => void): void
on(event: "iconClick", callback: (toolName: string) => void): void
on(event: "iconClick", callback: (toolName: string, opt: { newState: string; state: string }) => void): void

工具栏内转码成功后，以及用户通过ToolCollectionInstance.setDefaultDocList, ToolCollectionInstance.addDoc添加文档时，会触发此函数回调。

用户可以使用该回调函数，在转码成功后，将转码结果保存在用户的应用服务器中。
example
```
toolCollection.on('docAdd', (docList) => {
 for (let doc of docList) {
     pushToServer(uid, doc)
 }
})
```
Parameters
- event: "docAdd"
- callback: (docList: IDocEntity[]) => void
  - - (docList: IDocEntity[]): void
    - Parameters
      - docList: IDocEntity[]
      Returns void
Returns void
文档弹窗内转码文件被删除时，会触发此回调。

用户可以使用该回调函数，在文件被删除后，删除应用服务器中相关数据
example
```
toolCollection.on('docDelete', (docList) => {
 for (let doc of docList) {
     removeFromServer(uid, doc)
 }
})
```
Parameters
- event: "docDelete"
- callback: (docList: IDocEntity[]) => void
  - - (docList: IDocEntity[]): void
    - Parameters
      - docList: IDocEntity[]
      Returns void
Returns void
example
比如点击自定义马克笔按钮，实现点击后设置画笔透明度，粗细为马克笔的样式。注意，下面的示例需要用户先添加自定义按钮。自定义按钮名字格式为custom-[name]
```
{
  tool: 'custom-markpen',
  hint: '马克笔',
  backgroundImage: 'url_of_markpen_icon'
}

toolCollection.on('iconClick', (toolName) => {
 if (toolName === 'custom-markpen') {
    drawPlugin.setOpacity(0.4)
    drawPlugin.setStrokeWidth(10)
 }
})
```
Parameters
- event: "iconClick"
- callback: (toolName: string) => void
  - - (toolName: string): void
    - Parameters
      - toolName: string
      Returns void
Returns void

example

比如点击自定义状态按钮切换编辑状态。默认可以编辑，点击后可以切换是否可以编辑注意，下面的示例需要用户先添加自定义状态按钮。自定义状态按钮名字格式为custom-state-[name]

{
 tool: 'custom-state-toggle-editable',
 hint: '切换编辑',
 clickCb: (currState) => {
   if (currState === 'editable') return 'non-editable'
   else return 'editable'
 },
 defaultState: 'editable',
 backgroundImageByState: {
   'editable': 'url_of_editable_state_icon',
   'non_editable': 'url_of_non_editable_state_icon'
 }
}

toolCollection.on('iconClick', (toolName, opt) => {
 if (toolName === 'custom-state-toggle-editable') {
     if (opt.newState === 'editable') {
         drawPlugin.enableDraw(true)
     } else {
         drawPlugin.enableDraw(false)
     }
 }
})

Parameters

event: "iconClick"
callback: (toolName: string, opt: { newState: string; state: string }) => void
- - (toolName: string, opt: { newState: string; state: string }): void
  - Parameters
    - toolName: string
    - opt: { newState: string; state: string }
      - newState: string
        
        点击后的按钮状态
      - state: string
        
        点击前的按钮状态
    Returns void

Returns void

removeSubItem

removeSubItem(opt: { baseTool: "shapeSelect" | "multiInOne"; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"; subItemName: string }): void

移除图形集合(shapeSelect), 或者收纳盒(multiInOne)的子图标

若position未指定，则会寻找所有位置名字匹配baseTool的图标集合
example
移除图形集合中的三角形图标
```
removeSubItem({
 baseTool: 'shapeSelect',
 subItemName: 'triangle'
})
```
Parameters
- opt: { baseTool: "shapeSelect" | "multiInOne"; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"; subItemName: string }
  - baseTool: "shapeSelect" | "multiInOne"
    
    选择图形集合，或者收纳盒作为目标按钮
  - Optional position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"
    
    在位于position的工具栏中移除按钮。如果未提供，则在所有位置的工具栏中移除按钮
  - subItemName: string
    
    被移除的子按钮名称
Returns void

removeTool

removeTool(opt: { name: string; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft" }): void

移除工具栏图标。如果未设置position，则会寻找所有位置名字匹配的工具栏图标
example
移除所有位置的视频图标
```
removeTool({
 name: 'video'
})
```
example
移除左侧工具栏中的视频图标
```
removeTool({
 name: 'video'
 position: 'left'
})
```
Parameters
- opt: { name: string; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft" }
  - name: string
    
    被移除的按钮名称
  - Optional position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"
    
    在位于position的工具栏中移除按钮。如果未提供，则在所有位置的工具栏中移除按钮
Returns void

setContainerOptions

setContainerOptions(option: IContainerOption[]): void

重置整个工具栏。其参数格式和ToolCollection.getInstance中的option.containerOptions格式一样

example

下面是桌面端工具栏的默认配置

[
   {
       position: 'left',
       items: [
           {
               tool: 'select',
               hint: '选择'
           },
           {
               tool: 'shapeSelect',
               hint: '选择图形',
               subItems: [
                   {
                       tool: 'pen',
                       hint: '曲线'
                   },
                   {
                       tool: 'line',
                       hint: '直线'
                   },
                   {
                       tool: 'pen-arrow',
                       hint: '曲线箭头'
                   },
                   {
                       tool: 'line-arrow',
                       hint: '直线箭头'
                   },
                   {
                       tool: 'rect',
                       hint: '空心矩形'
                   },
                   {
                       tool: 'rect-fill',
                       hint: '实心矩形'
                   },
                   {
                       tool: 'ellipse',
                       hint: '空心椭圆'
                   },
                   {
                       tool: 'ellipse-fill',
                       hint: '实心椭圆'
                   }
               ]
           },
           {
               tool: 'platte',
               hint: '调色盘'
           },
           {
               tool: 'widthResize',
               hint: '画笔粗细',
           },
           {
               tool: 'opacity',
               hint: '透明度',
           },
           {
               tool: 'text',
               hint: '文本'
           },
           {
               tool: 'laser',
               hint: '激光笔'
           },
           {
               tool: 'element-eraser',
               hint: '橡皮擦'
           },
           {
               tool: 'duplicate',
               hint: '复制'
           },
           {
               tool: 'clear',
               hint: '清空'
           },
           {
               tool: 'undo',
               hint: '撤销'
          },
          {
              tool: 'redo',
              hint: '重做'
          },
          {
              tool: 'pan',
              hint: '整体平移'
          },
          {
              tool: 'image',
              hint: '图片上传'
          },
          {
              tool: 'exportImage',
              hint: '导出图片'
          },
          {
              tool: 'uploadLog',
              hint: '上传日志'
          }
      ]
  },
  {
      position: 'bottomLeft',
      items: [
          {
              tool: 'fitToContentDoc'
          },
          {
              tool: 'zoomOut',
              hint: '缩小'
          },
          {
              tool: 'zoomLevel'
          },
          {
              tool: 'zoomIn',
              hint: '放大'
          },
          {
              tool: 'visionControl',
              hint: '视角同步'
          },
          {
              tool: 'visionLock',
              hint: '视角模式切换'
          }
      ]
  },
  {
      position: 'bottomRight',
      items: [
          {
              tool: 'firstPage',
              hint: '第一页'
          },
          {
              tool: 'prevPage',
              hint: '上一页'
          },
          {
              tool: 'pageInfo'
          },
          {
              tool: 'nextPage',
              hint: '下一页'
          },
          {
              tool: 'lastPage',
              hint: '最后一页'
          },
          {
              tool: 'preview',
              hint: '预览',
              previewSliderPosition: 'right'                    
          }
      ]
  },
  {
      position: 'topRight',
      items: [
          {
              tool: 'docSelect'
          },
          {
              tool: 'docUpload',
              hint: '上传文档',
              supportPptToH5: true,
              supportDocToPic: true
          }
      ]
  }
]

example

下面为移动端的默认工具栏配置

[
    {
         position: 'bottomRight',
         items: [
                {
                    tool: 'select',
                    hint: '选择'
                },
                {
                    tool: 'shapeSelect',
                    hint: '选择图形',
                    subItems: [
                        {
                            tool: 'pen',
                            hint: '曲线'
                        },
                        {
                            tool: 'line',
                            hint: '直线'
                        },
                        {
                            tool: 'pen-arrow',
                            hint: '曲线箭头'
                        },
                        {
                            tool: 'line-arrow',
                            hint: '直线箭头'
                        },
                        {
                            tool: 'rect',
                            hint: '空心矩形'
                        },
                        {
                            tool: 'rect-fill',
                            hint: '实心矩形'
                        },
                        {
                            tool: 'ellipse',
                            hint: '空心椭圆'
                        },
                        {
                            tool: 'ellipse-fill',
                            hint: '实心椭圆'
                        }
                    ]
                },
                {
                    tool: 'platte',
                    hint: '调色盘'
                },
                {
                    tool: 'widthResize',
                    hint: '画笔粗细',
                },
                {
                    tool: 'opacity',
                    hint: '透明度',
                },
                {
                    tool: 'multiInOne',
                    hint: '更多',
                    subItems: [
                        {
                            tool: 'element-eraser'
                        },
                        {
                            tool: 'clear'
                        },
                        {
                            tool: 'undo'
                        },
                        {
                            tool: 'redo'
                        },
                        {
                            tool: 'image'
                        },
                        {
                            tool: 'exportImage'
                        }
                    ]
                }
            ]
        },
        {
            position: 'topRight',
            items: [
                {
                    tool: 'multiInOne',
                    hint: '更多',
                    subItems: [
                        {
                            tool: 'docUpload',
                            supportPptToH5: true,
                            supportDocToPic: true
                        },
                        {
                            tool: 'fitToContent'
                        },
                        {
                            tool: 'fitToDoc'
                        },
                        {
                            tool: 'pan'
                        },
                        {
                            tool: 'zoomIn'
                        },
                        {
                            tool: 'zoomOut'
                        },
                        {
                            tool: 'visionControl'
                        },
                        {
                            tool: 'visionLock'
                        },
                        ...uploadLogItem
                    ]
                },
                {
                    tool: 'zoomLevel',
                    size: 2
                }
           ]
        },
        {
            position: 'topLeft',
            items: [
                {
                    tool: 'pageBoardInfo'
                },
                {
                    tool: 'preview',
                    hint: '预览',
                    previewSliderPosition: 'right' 
                }
            ]
        }
 ]

Parameters

option: IContainerOption[]

Returns void

setDefaultDocList

setDefaultDocList(docList: IDocEntity[]): void

添加多个转码文件至文档弹窗中。多次调用时，只有最后一次调用会生效

example

添加两个文档，一个2页静态文档，一个5页动态文档

setDefaultDocList([
 {
     docId: '12222',
     fileType: 'pdf',
     name: '示例pdf',
     showDelete: true,
     params: {
         template: "https://nim.nosdn.127.net/408e9c59-cdc2-4979-b3e2-85d02d4f7ea3_1_{index}.jpg",
         width: 1920,
         height: 1080,
         offset: 1,
         pageCount: 2
     }
 },
 {
     docId: '23222',
     fileType: 'ppt',
     name: '宠物店',
     showDelete: true,
     params: {
         url: 'https://wb.vod.126.net/courseware/doc/20787511/2446/IKc6u1XI/index.json',
         width: 1280,
         height: 720,
         pageCount: 5
     }
 }
])

Parameters

docList: IDocEntity[]

Returns void

setVisibility

setVisibility(opt: {}): void

设置工具栏中，局部组件的可见性。可以控制任一位置工具栏是否可见，以及该位置工具栏内部单一图标是否可见。
example
左侧工具栏仅保留平移(pan)图标
```
setVisibility({
  left: {
     visible: false,
     exclude: ['pan']
  }
})
```
example
左侧工具栏隐藏视频图标
```
setVisibility({
  left: {
     visible: true,
     exclude: ['video']
  }
})
```
Parameters
- opt: {}
  
  设置哪些元素可见。注意position的取值为: IPosition
  - [position: string]: { exclude?: string[]; visible: boolean }
    - Optional exclude?: string[]
      
      如果visible为true，则exclude内图标不可见如果visible为fales，则exclude内图标可见
    - visible: boolean
      
      设置某一位置工具栏是否可见
Returns void

show

show(): void

显示工具栏

Returns void

Hierarchy

Index

Methods

Methods

addDoc

Parameters

doc: IDocEntity

Returns void

addDocEventListener

Parameters

event: "docAdd"

callback: (docList: IDocEntity[]) => void

Parameters

docList: IDocEntity[]

Returns void

Returns void

Parameters

event: "docDelete"

callback: (docList: IDocEntity[]) => void

Parameters

docList: IDocEntity[]

Returns void

Returns void

addOrSetContainer

Parameters

option: IContainerOption

Returns void

addOrSetSubItem

Parameters

opt: { baseTool: "shapeSelect" | "multiInOne"; insertAfterTool?: string; position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"; subItem: IUnitOption }

baseTool: "shapeSelect" | "multiInOne"

Optional insertAfterTool?: string

Optional position?: "leftBottom" | "left" | "leftTop" | "topLeft" | "top" | "topRight" | "rightTop" | "right" | "rightBottom" | "bottomRight" | "bottom" | "bottomLeft"

subItem: IUnitOption

Returns void

addOrSetTool

Parameters

opt: { insertAfterTool?: string; item: IUnitOption; position: IPosition }

Optional insertAfterTool?: string

item: IUnitOption

position: IPosition

Returns void

addToolEventListener

Parameters

toolName: "custom-[name]"

callback: () => void

Returns void

Returns void

Parameters

toolName: "custom-state-[name]"

callback: (opt: { newState: string; state: string }) => void

Parameters

opt: { newState: string; state: string }

newState: string

state: string

Returns void

Returns void

deleteDoc

Parameters

docId: string

Returns void

hide

Returns void

off

Parameters

event: "docAdd" | "docDelete" | "iconClick"

callback: (...args: any[]) => void

Parameters

Rest ...args: any[]

Returns void

Returns void

on

Parameters

event: "docAdd"

callback: (docList: IDocEntity[]) => void

Parameters

docList: IDocEntity[]

Returns void

Returns void

Parameters