渲染组件相关接口

# 渲染组件相关接口

## 名称和释义
H5作品采用面向对象设计，有如下常用实例
1. 作品（scene） 指 一个h5作品的总数据结构（包含名称和id、code、音乐、封面以及一些验证配置）
2. 页面（page）指一个页面、一般分为普通页面（page）和长页面（longPage）
3. 图层（layer）渲染组件的地方
4. 组件（comp）渲染组件的实例
实例关系
`scene` 1:n `page` 1:n `layer` 1:n `comp`

## 各个实例常用api

### scene

| 名称 | 类型 | 返回值 | 描述 |
| --- | --- | --- | --- |
| eqxPageList | 属性Array | [pageInstance] | 返回页面实例数组，下标是页面的位置 |
| currentPage | 属性 | pageInstance | 当前页面的实例 |

### page
| 名称 | 类型 | 返回值 | 描述 |
| --- | --- | --- | --- |
| eqxScene | 属性 | sceneInstance | 所属场景实例 |
| getEqxComps() | 方法 | [compInstance] | 返回组件实例 |
| addAfterActiveFn(cb:Function) | 方法 | -- | 绑定事件在页面被激活的时候触发 |
| removeAfterActiveFn（cb:Function）|方法|--| 移除绑定在页面被激活的时候触发的事件|
#### longPage 继承自page
| 名称 | 类型 | 返回值 | 描述 |
| --- | --- | --- | --- |
| updateHeight(height:number) | 方法 | -- | 更新页面高度，最小高度554 |
### layer
暂无
### comp
| 名称 | 类型 | 返回值 | 描述 |
| --- | --- | --- | --- |
| eqxPage | 属性 | pageInstance | 所属page实例 |
| eqxScene | 属性 | sceneInstance | 所属场景实例 |
| group | 属性 | groupInstance\|null| 所属组合|
| $item | 属性 | jqueryDom | 组件最外层dom的jquery实例 |
| getAbsolutePos() | 方法 | Object | 组件相对画布的位置宽高 |
| updateCssByView(css:jqueryCssObject) | 方法 | -- | 更新外框组件css|

#### 文本组件 继承自 comp

文本组件会过滤掉非 `span` `br` `div`标签

#### 图片组件 继承自 comp
| 名称 | 类型 | 返回值 | 描述 |
| --- | --- | --- | --- |
| updateCssByView(css:jqueryCssObject) | 方法 | -- | 更新外框组件css,会保持图片比例，图片可能会被裁切 |

### group 组合 
组合是特殊的一种item 和 comp 属于同一级别

| 名称 | 类型 | 返回值 | 描述 |
| --- | --- | --- | --- |
| findTopGroup() | 方法 | groupInstance | 获取顶层组合 |
| getAbsolutePos() | 方法 | Object | 组合相对画布的位置和宽高 |
| update$item(css:jqueryCssObject) | 方法 | -- | 更新组合以及所有子元素的位置宽高 |

## 更新高度参考 demo 自定义脚本

```javaScript
// 测试js 绑定在动态高度元素上
function test(ele, json) {
    // 这里需要再页面激活的时候才去拿数据
    ele.eqxPage.addAfterActiveFn(()=>{
        // 获取当前元素的绝对位置
        const oldCss = ele.getAbsolutePos()
        // 这里表示数据高度
        const oldHeight = oldCss.height
        // 这里获取当前元素的渲染高度
        const currentHeight = (()=>{
    		const oldHeight = ele.$li.css('height')
    		ele.$li.css({height:'auto'})
    		const height = ele.$li.height()
    		ele.$li.css({height:oldHeight})
    		return height
		})()
        const diffHeight = currentHeight - oldHeight
        // 所有元素
        const pageComps = ele.eqxPage.getEqxComps()
        // 找到当前元素下面的元素 过滤掉组合内的元素
        const underComps = pageComps.filter(comp => !comp.group&&comp.getAbsolutePos().top > oldCss.top)
        underComps.forEach(comp => {
            const css = comp.getAbsolutePos()
            comp.updateCssByView({
                top: css.top + diffHeight
            })
        })
		// 更新组合的高度
        const groupComps = new Set()
        pageComps.forEach(comp => {
            if (comp.group) {
                // 这里需要找到顶层组合
                groupComps.add(comp.group.findTopGroup())
            }
        })
        groupComps.forEach(group => {
            const name = group.json.name
            // 这里可以根据name做一些判断
            const oldCss = group.getAbsolutePos()
			// 这里可以根据oldCss 做一些过滤
            group.update$item({
                height: oldCss.height + diffHeight
            })
        })
        // 更新背景元素的高度
        const backGroundImageIds = [4106749100]
        pageComps.forEach(comp => {
            if(backGroundImageIds.includes(comp.id)){
                const css = comp.getAbsolutePos()
                comp.updateCssByView({
                    height: css.height + diffHeight
                })
            }
        })
		
        //  更新页面高度
        const oldPageHeight = ele.eqxPage.getPageHeight()
        // 这里有可能不是长页面，所以需要判断
        try{
            ele.eqxPage.updateHeight(oldPageHeight + diffHeight)
        }catch(e){
            console.error(e)
        }
    })
}
```