# Tooltip面板

::: details 目录
[[toc]]
:::

## 指令说明

目前对模型添加Tooltip面板的方式只有一种 就是前端自定义一个Vue组件,然后引擎获取组件实例,并将其显示到3D场景中的特定位置,后续会支持Canvas方式添加Tooltip

## 添加面板

::: details 完整结构
```json5
{
        "CmdName": "PEChengWebView",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
                "OrderName": "PELoadWebView",//--必填-- 加载VUE组件
                "OrderParams": {
                    "ViewList": [{//--必填-- 需要显示web面板的SourceID
                        "ObjectID": "",//--必填-- SourceID
                        "ViewName": "",//--必填-- Vue组件名称
                        "ViewParam": {},//--必填-- 需要传递给Vue组件的参数对象
                        "IsLimit": true,//该View是否需要需要常驻显示在场景中 默认为True
                        "Matrix": {//面板的默认显示参数
                            "ScalePosition": {//View的缩放逻辑
                                "MinScalePosition": 0,//最小缩放距离
                                "MaxScalePosition": 0//最大缩放距离
                            },
                            "Translate": {//View距离Mesh的偏移量
                                "x": 100,
                                "y": 100,
                                "z": 100
                            },

                            "DefaultScale": 0.2//View的默认缩放系数
                        }
                    }]
                }
            }
        ]

    }
```
:::


### 原理说明

引擎根据ObjectID找到对应的模型,然后计算出包围盒的大小,在根据ViewName从UI上获取该Vue组件的的Dom实例,将该Dom元素显示到模型正上方默认的位置

### 参数说明

::: details ObjectID
模型对应的SourceID
:::

::: details ViewName
自定义Vue组件的名称,<font color=red>该组件必须现在BimView.vue中注册过</font>
:::

::: details ViewParam
需要显示ToolTip面板的数据源
:::

::: details IsLimit
由于每一个ToolTip面板都是一个Dom实例,如果一次性显示太多面板会造成卡顿,所以引擎会自动根据当前场景中面板的数量,自动进行添加删除,例如一共显示50个面板,那么引擎会自动删除二十个,只显示距离相机最近的30个面板,但是如果希望某个面板一直显示在场景中,则设置**IsLimit**为false即可。
:::

::: details ScalePosition
Vue组件添加到场景中后会默认设置为DefaultScale设置的缩放系数,该缩放系数是前端与美术一起商定的默认显示大小,然后再MinScalePosition与MinScalePosition距离范围内随着相机拉远View自动放大,相机拉近自动缩小,小于MinScalePosition或者大于MinScalePosition不进行缩放控制
:::

::: details Translate
面板默认显示的位置是模型包围盒的正上方,如果默认位置并不符合需求,则可以通过该属性设置X,Y,Z三个方向上的偏移量
:::

::: details DefaultScale
因为UI中的单位是像素,但是在3D中并没有像素的概念,所以UI中看到的大小并不是3D中看到的大小,所以需要通过该属性调整面板显示大小。
:::

### 使用说明

::: details 简单例子
1.编写自定义的Vue组件 例如名字叫:HelloWorld.vue
```js
<template>
  <div id="SpaceView">
      <div id="BottomBox" class="Space">{{Param.content}}</div>
  </div>
</template>

<script>
export default {
    props:{
        Param:Object
    },
    data:function () {
        return {
            
        }
    }
}
</script>

<style scoped>
    #SpaceView{
        width: 206px;
        height: 45px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .Space{
        width: 206px;
        height: 45px;
        border: 1px solid;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }
    #BottomBox{
        border: yellow;
        background-color: #FE5E86;
    }
</style>

```
2.在BIMView.vue中声明注册自定义组件

3.发送显示Tooltip面板指令

```json
{
        "CmdName": "PEChengWebView",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
                "OrderName": "PELoadWebView",
                "OrderParams": {
                    "ViewList": [{
                        "ObjectID": "*******",
                        "ViewName": "HelloWorld",
                        "ViewParam": {
                            "content": "动态面板模拟数据源"
                        },
                        "IsLimit": true,
                        "Matrix": {
                            "ScalePosition": {
                                "MinScalePosition": 0,
                                "MaxScalePosition": 0
                            },
                            "Translate": {
                                "x": 100,
                                "y": 100,
                                "z": 100
                            },
                            "DefaultScale": 0.2
                        }
                    }]
                }
            }
        ]
    }
```

:::

## 卸载面板

::: details 完整结构
```json5
{
        "CmdName": "PEChengWebView",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [
            {
                "OrderName": "PERemoveWebView",//卸载View组件
                "OrderParams": {
                    "ViewList": [//--必填-- 需要卸载的SourceID列表
                        ""
                    ]
                }
            }
        ]

    }
```
:::

## 更新面板数据源

::: details 完整结构
```json5
{
        "CmdName": "PEChengWebView",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [
            {
                "OrderName": "PEUpdateData",//更新数据
                "OrderParams": {
                    "IDList": [{//--必填-- 需要更新的SourceID列表
                        "ObjectID": "",//--必填-- SourceID
                        "ViewParam": {//--必填-- 需要更新的数据

                        }
                    }]
                }
            }
        ]

    }
```
:::

## 面板刷新频率设置

::: details 完整结构
```json5
{
        "CmdName": "PEChengWebView",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [
            {
                "OrderName": "PEUpdateType",//设置View刷新的模式
                "OrderParams": {
                    "Type": 0,//0 表示 每一帧 固定时间间隔去计算一次 1 表示只有在鼠标结束操作之后才会去计算一次view
                    "TimeOut": 500//刷新的时间间隔
                }
            }
        ]

    }
```
:::


## 指令常见问题说明

### View的显示逻辑

如果场景中添加同时添加太多的view会导致性能消耗严重,而相同的dom元素又无法复用，所以在配置文件中MaxViewNumber属性设置了场景中同时存在View的数量限制

默认再相机视野范围内并且距离场景中心点最近的30个View才会显示

IsLimit控制是否接受限制,如果等于false不受限制则只要view出现在相机视野范围内就会一直常驻显示

### View的刷新逻辑

刷新方式1：在鼠标操作场景过程中每500毫秒修改一次View的位置缩放等信息

刷新方式2：再鼠标操作场景结束之后500毫秒修改一次View的位置缩放等信息

默认方式为刷新方式1

### View的缩放逻辑

View添加到场景中后回默认设置为DefaultScale设置的缩放系数,该缩放系数是前端与美术一起商定的默认显示大小,然后再MinScalePosition与MinScalePosition距离范围内随着相机拉远View自动放大,相机拉近自动缩小,小于MinScalePosition或者大于MinScalePosition不进行缩放控制

### View的显示位置控制

View默认显示为Mesh包围盒的正上方10单位的位置,然后以此为原点进行Translate设置的偏移量

### View组件数据刷新
Web平台直接修改**PELoadWebView**指令传入的**ViewParam**也可以修改面板中的数据源,<font color=red>但是强烈建议都通过PEUpdateData指令去进行修改数据源,因为直接修改会造成如果更新数据源出现bug很难浮现出问题。通过指令修改可以有效追踪数据是如何呗修改的。</font>