Module types

点击自定义弹窗按钮后，用户通过onMount函数将元素挂载到div中。

点击其它区域时，会卸载弹窗按钮的div。用户可以选择在onUnmount函数中，添加卸载时的一些动作

example

 //设置图章弹窗。点击后可以选择图章按钮
 toolCollection.addOrSetTool({
    position: 'left',
    item: {
        tool: 'custom-popup-macro',
        hint: '图章',
        backgroundImage: Stamp,
        //渲染弹窗内容
        onMount: (container) => {
            ReactDOM.render(
                <MacroPopup
                     drawPlugin={app}
                />, 
                container
            )
        }
    }
 })

//MacroPopup是一个React组件，其render函数示意为：
 render() {
    return (
        <div className='stamp-popup'>
            <div className='section'>
            <div className='stamp-header'>
                图章
            </div>
        </div>
    )
 }


//弹窗的样式:
 .stamp-popup {
    position: absolute;
    left: 50px;
    padding: 8px;
    background: white;
    width: 180px;
    transform: translateY(-50%);
 }

example

 toolCollection.addOrSetTool({
     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: string, opt: {
    //点击前的state
    state: string,
    //点击后的state
    newState: string
 }) => {
    if (toolName === 'custom-state-toggle-editable') {
        if (opt.newState === 'editable') {
            drawPlugin.enableDraw(true)
        } else {
            drawPlugin.enableDraw(false)
        }
    }
  })

example

{
     tool: 'docUpload',
     hint: '文档上传',
     supportPptToH5: true
     supportDocToPic: true
     supportUploadMedia: true
     supportTransMedia: true
}

当width，height都缺失时，使用图片固有宽高。

当width或者height缺失其一时，缺失的属性根据图片宽高比调整

example

下面的示例代码设置了如下属性：

1. 点击方式添加图片(clkAdd=true & dragAdd=false)
2. 初始图片大小随缩放变化(size=relative)
3. 缩放100%时图片大小为图片固有尺寸（未设置attr.width, attr.height)
4. 鼠标指针和图片一致(cursor)

   drawPlugin.setTool('macro', {
     cursor: "url('https://jdvodj7gqfxcq.vod.126.net/jdvodj7gqfxcq/840ac4e9216c4bbdad10dd2f168c2f15.png'), auto",
     size: 'relative',
     type: 'image',
     clkAdd: true,
     dragAdd: false,
     attr: {
         url: "https://jdvodj7gqfxcq.vod.126.net/jdvodj7gqfxcq/840ac4e9216c4bbdad10dd2f168c2f15.png"
     }
   })
   

example

{
     tool: 'multiInOne',
     hint: '更多',
     itemPerRow: 4,
     subItems: [
         {
             item: 'video',
             hint: '上传视频‘
         },
         {
             item: 'audio',
             hint: '上传音频'
         },
     ]
}

控制预览图弹出的方位

example

{
     tool: 'preview',
     hint: '预览弹窗',
     previewSliderPosition: 'right'
}

custom-xxx: xxx是任意字符串。表示自定义组件。

custom-state-yyy: yyy是任意字符串。表示自定义状态组件 ICustomStateUnitOption

custom-popup-zzz: zzz是任意字符串。表示自定义弹窗组件 ICustomPopUnitOption

example

示例为收纳盒的配置

{
     tool: 'undo',
     hint: '撤销'
}

broadcaster: 主播uid