vislite 1.6.0-alpha.1 → 1.6.0

package/src/common/tree/toPlainTree.ts

@@ -1,136 +1,136 @@
-import type TreeConfigType from '../../../types/TreeConfig'
-
-import toInnerTree from './toInnerTree'
-
-// 可以传递任意格式的树原始数据
-// 只要配置对应的解析方法即可
-export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
-    const treeData = toInnerTree(initTree, config)
-
-    const alltreedata = treeData.value // 维护的树
-    const rootid = treeData.rid // 根结点ID
-
-    if (treeData.num == 1) {
-        alltreedata[rootid].left = 0.5
-        alltreedata[rootid].top = 0.5
-        alltreedata[rootid].show = true
-        return {
-            deep: 1,
-            node: alltreedata,
-            root: rootid,
-            size: 1
-        }
-    } else {
-
-        const beforeDis: Array<number> = []
-        let size = 0, maxDeep = 0
-
-        // @ts-ignore
-        if (noOpens[rootid]) {
-            alltreedata[rootid].left = 0.5
-            alltreedata[rootid].top = 0.5
-            alltreedata[rootid].show = true
-
-            size = 1
-        } else {
-            ; (function positionCalc(pNode, deep) {
-
-                if (deep > maxDeep) maxDeep = deep
-
-                let flag: number = 0
-                // @ts-ignore
-                if (!noOpens[pNode.id]) {
-
-                    for (flag = 0; flag < pNode.children.length; flag++)
-
-                        // 因为全部的子结点的位置确定了，父结点的y位置就是子结点的中间位置
-                        // 因此有子结点的，先计算子结点
-                        positionCalc(alltreedata[pNode.children[flag]], deep + 1)
-
-                }
-
-                // left的位置比较简单，deep从0开始编号
-                // 比如deep=0，第一层，left=0+0.5=0.5，也就是根结点
-                alltreedata[pNode.id].left = deep + 0.5
-                if (flag == 0) {
-
-                    // beforeDis是一个数组，用以记录每一层此刻top下边缘（每一层是从上到下）
-                    // 比如一层的第一个，top值最小可以取top=0.5
-                    // 为了方便计算，beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
-                    // 因此设置最低上边缘为-0.5
-                    if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
-                    // 父边缘同意的进行初始化
-                    if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
-
-                    // 添加的新结点top值第一种求法：本层上边缘+1（比如上边缘是-0.5，那么top最小是top=-0.5+1=0.5）
-                    alltreedata[pNode.id].top = beforeDis[deep] + 1
-
-                    const pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
-                    // 计算的原则是：如果第一种可行，选择第一种，否则必须选择第二种
-                    // 判断第一种是否可行的方法就是：如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
-                    if (pTop - 1 < beforeDis[deep - 1])
-                        // 必须保证父亲结点和父亲的前一个兄弟保存1的距离，至少
-                        // 添加的新结点top值的第二种求法：根据孩子取孩子结点的中心top
-                        alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
-
-                } else {
-
-                    // 此刻flag!=0
-                    // 意味着结点有孩子，那么问题就解决了，直接取孩子的中间即可
-                    // 其实，flag==0的分支计算的就是孩子，是没有孩子的叶结点，那是关键
-                    alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
-                }
-
-                // 因为计算孩子的时候
-                // 无法掌握父辈兄弟的情况
-                // 可能会出现父亲和兄弟重叠问题
-                if (alltreedata[pNode.id].top <= beforeDis[deep]) {
-                    const needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
-                        (function doUp(_pid: number | string, _deep: number) {
-                            alltreedata[_pid].top += needUp;
-                            if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
-
-                            for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
-                                doUp(alltreedata[_pid].children[_flag], _deep + 1)
-                            }
-                        })(pNode.id, deep)
-                }
-
-                // 计算好一个结点后，需要更新此刻该层的上边缘
-                beforeDis[deep] = alltreedata[pNode.id].top
-
-                // size在每次计算一个结点后更新，是为了最终绘图的时候知道树有多宽（此处应该叫高）
-                if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
-
-            })(alltreedata[rootid], 0)
-
-        }
-        // 对于不显示的，需要标记一下
-        for (const key in noOpens) {
-            // @ts-ignore
-            if (noOpens[key]) {
-                alltreedata[key].isOpen = false
-                    ; (function updateHidden(pid, left, top) {
-                        for (let index = 0; index < alltreedata[pid].children.length; index++) {
-                            alltreedata[alltreedata[pid].children[index]].left = left
-                            alltreedata[alltreedata[pid].children[index]].top = top
-                            alltreedata[alltreedata[pid].children[index]].show = false
-
-                            updateHidden(alltreedata[pid].children[index], left, top)
-                        }
-                    })(key, alltreedata[key].left, alltreedata[key].top)
-            }
-        }
-
-        // 传递的参数分别表示：记录了位置信息的树结点集合、根结点ID和树的宽
-        return {
-            "node": alltreedata,
-            "root": rootid,
-            "size": size,
-            "deep": maxDeep + 1
-        }
-
-    }
-
-
+import type TreeConfigType from '../../../types/TreeConfig'
+
+import toInnerTree from './toInnerTree'
+
+// 可以传递任意格式的树原始数据
+// 只要配置对应的解析方法即可
+export default function (initTree: any, config: TreeConfigType, noOpens: any = {}) {
+    const treeData = toInnerTree(initTree, config)
+
+    const alltreedata = treeData.value // 维护的树
+    const rootid = treeData.rid // 根结点ID
+
+    if (treeData.num == 1) {
+        alltreedata[rootid].left = 0.5
+        alltreedata[rootid].top = 0.5
+        alltreedata[rootid].show = true
+        return {
+            deep: 1,
+            node: alltreedata,
+            root: rootid,
+            size: 1
+        }
+    } else {
+
+        const beforeDis: Array<number> = []
+        let size = 0, maxDeep = 0
+
+        //  @typescript-eslint/ban-ts-comment
+        if (noOpens[rootid]) {
+            alltreedata[rootid].left = 0.5
+            alltreedata[rootid].top = 0.5
+            alltreedata[rootid].show = true
+
+            size = 1
+        } else {
+            ; (function positionCalc(pNode, deep) {
+
+                if (deep > maxDeep) maxDeep = deep
+
+                let flag: number = 0
+                //  @typescript-eslint/ban-ts-comment
+                if (!noOpens[pNode.id]) {
+
+                    for (flag = 0; flag < pNode.children.length; flag++)
+
+                        // 因为全部的子结点的位置确定了，父结点的y位置就是子结点的中间位置
+                        // 因此有子结点的，先计算子结点
+                        positionCalc(alltreedata[pNode.children[flag]], deep + 1)
+
+                }
+
+                // left的位置比较简单，deep从0开始编号
+                // 比如deep=0，第一层，left=0+0.5=0.5，也就是根结点
+                alltreedata[pNode.id].left = deep + 0.5
+                if (flag == 0) {
+
+                    // beforeDis是一个数组，用以记录每一层此刻top下边缘（每一层是从上到下）
+                    // 比如一层的第一个，top值最小可以取top=0.5
+                    // 为了方便计算，beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
+                    // 因此设置最低上边缘为-0.5
+                    if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
+                    // 父边缘同意的进行初始化
+                    if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
+
+                    // 添加的新结点top值第一种求法：本层上边缘+1（比如上边缘是-0.5，那么top最小是top=-0.5+1=0.5）
+                    alltreedata[pNode.id].top = beforeDis[deep] + 1
+
+                    const pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
+                    // 计算的原则是：如果第一种可行，选择第一种，否则必须选择第二种
+                    // 判断第一种是否可行的方法就是：如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
+                    if (pTop - 1 < beforeDis[deep - 1])
+                        // 必须保证父亲结点和父亲的前一个兄弟保存1的距离，至少
+                        // 添加的新结点top值的第二种求法：根据孩子取孩子结点的中心top
+                        alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
+
+                } else {
+
+                    // 此刻flag!=0
+                    // 意味着结点有孩子，那么问题就解决了，直接取孩子的中间即可
+                    // 其实，flag==0的分支计算的就是孩子，是没有孩子的叶结点，那是关键
+                    alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
+                }
+
+                // 因为计算孩子的时候
+                // 无法掌握父辈兄弟的情况
+                // 可能会出现父亲和兄弟重叠问题
+                if (alltreedata[pNode.id].top <= beforeDis[deep]) {
+                    const needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
+                        (function doUp(_pid: number | string, _deep: number) {
+                            alltreedata[_pid].top += needUp;
+                            if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
+
+                            for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
+                                doUp(alltreedata[_pid].children[_flag], _deep + 1)
+                            }
+                        })(pNode.id, deep)
+                }
+
+                // 计算好一个结点后，需要更新此刻该层的上边缘
+                beforeDis[deep] = alltreedata[pNode.id].top
+
+                // size在每次计算一个结点后更新，是为了最终绘图的时候知道树有多宽（此处应该叫高）
+                if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
+
+            })(alltreedata[rootid], 0)
+
+        }
+        // 对于不显示的，需要标记一下
+        for (const key in noOpens) {
+            // @typescript-eslint/ban-ts-comment
+            if (noOpens[key]) {
+                alltreedata[key].isOpen = false
+                    ; (function updateHidden(pid, left, top) {
+                        for (let index = 0; index < alltreedata[pid].children.length; index++) {
+                            alltreedata[alltreedata[pid].children[index]].left = left
+                            alltreedata[alltreedata[pid].children[index]].top = top
+                            alltreedata[alltreedata[pid].children[index]].show = false
+
+                            updateHidden(alltreedata[pid].children[index], left, top)
+                        }
+                    })(key, alltreedata[key].left, alltreedata[key].top)
+            }
+        }
+
+        // 传递的参数分别表示：记录了位置信息的树结点集合、根结点ID和树的宽
+        return {
+            "node": alltreedata,
+            "root": rootid,
+            "size": size,
+            "deep": maxDeep + 1
+        }
+
+    }
+
+
 }

package/src/common/webgl/texture.ts

@@ -1,99 +1,99 @@
-// 初始化一个纹理对象
-// type = gl.TEXTURE_2D 二维纹理
-// type = gl.TEXTURE_CUBE_MAP 立方体纹理
-// unit表示开启的纹理单元编号
-const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
-
-    // 创建纹理对象
-    const texture = painter.createTexture()
-
-    // 开启纹理单元，unit表示开启的编号
-    // @ts-ignore
-    painter.activeTexture(painter['TEXTURE' + unit])
-
-    // 绑定纹理对象到目标上
-    painter.bindTexture(type, texture)
-
-    return texture
-}
-
-// 链接资源图片
-// level默认传入0即可，和金字塔纹理有关
-// format表示图像的内部格式：
-//      gl.RGB(红绿蓝)
-//      gl.RGBA(红绿蓝透明度)
-//      gl.ALPHA(0.0,0.0,0.0,透明度)
-//      gl.LUMINANCE(L、L、L、1L:流明)
-//      gl.LUMINANCE_ALPHA(L、L、L,透明度)
-// textureType表示纹理数据的格式：
-//      gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
-//      gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
-//      gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
-//      gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
-const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
-    painter.texImage2D(type, level, format, format, textureType, image)
-}
-
-const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
-
-    const types = [
-        painter.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
-        painter.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
-        painter.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
-        painter.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
-        painter.TEXTURE_CUBE_MAP_POSITIVE_Z, // 后
-        painter.TEXTURE_CUBE_MAP_NEGATIVE_Z // 前
-    ]
-    let target: number
-
-    for (let i = 0; i < types.length; i++) {
-        if (images[i]) {
-            target = types[i]
-            painter.texImage2D(target, level, format, width, height, 0, format, textureType, null)
-            painter.bindTexture(type, texture)
-            painter.texImage2D(target, level, format, format, textureType, images[i])
-        }
-    }
-
-    painter.generateMipmap(type)
-}
-
-class TextureObject {
-
-    private __painter: WebGLRenderingContext
-    private __type: number
-
-    private __texture: WebGLTexture
-
-    constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
-        this.__painter = painter
-        this.__type = {
-            "2d": painter.TEXTURE_2D,
-            "cube": painter.TEXTURE_CUBE_MAP
-        }[type] as number
-
-        // 创建纹理
-        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
-
-        // 配置纹理
-        painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
-        painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
-        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
-        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
-    }
-
-    // 链接图片资源(单一)
-    useImage(image: TexImageSource) {
-        linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
-        return this
-    }
-
-    // 链接图片资源（多张）
-    useCube(images: TexImageSource[], width: number, height: number) {
-        linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
-        return this
-    }
-
-}
-
+// 初始化一个纹理对象
+// type = gl.TEXTURE_2D 二维纹理
+// type = gl.TEXTURE_CUBE_MAP 立方体纹理
+// unit表示开启的纹理单元编号
+const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
+
+    // 创建纹理对象
+    const texture = painter.createTexture()
+
+    // 开启纹理单元，unit表示开启的编号
+    // @typescript-eslint/ban-ts-comment
+    painter.activeTexture((painter as any)['TEXTURE' + unit])
+
+    // 绑定纹理对象到目标上
+    painter.bindTexture(type, texture)
+
+    return texture
+}
+
+// 链接资源图片
+// level默认传入0即可，和金字塔纹理有关
+// format表示图像的内部格式：
+//      gl.RGB(红绿蓝)
+//      gl.RGBA(红绿蓝透明度)
+//      gl.ALPHA(0.0,0.0,0.0,透明度)
+//      gl.LUMINANCE(L、L、L、1L:流明)
+//      gl.LUMINANCE_ALPHA(L、L、L,透明度)
+// textureType表示纹理数据的格式：
+//      gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
+//      gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
+//      gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
+//      gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
+const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
+    painter.texImage2D(type, level, format, format, textureType, image)
+}
+
+const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
+
+    const types = [
+        painter.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
+        painter.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
+        painter.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
+        painter.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
+        painter.TEXTURE_CUBE_MAP_POSITIVE_Z, // 后
+        painter.TEXTURE_CUBE_MAP_NEGATIVE_Z // 前
+    ]
+    let target: number
+
+    for (let i = 0; i < types.length; i++) {
+        if (images[i]) {
+            target = types[i]
+            painter.texImage2D(target, level, format, width, height, 0, format, textureType, null)
+            painter.bindTexture(type, texture)
+            painter.texImage2D(target, level, format, format, textureType, images[i])
+        }
+    }
+
+    painter.generateMipmap(type)
+}
+
+class TextureObject {
+
+    private __painter: WebGLRenderingContext
+    private __type: number
+
+    private __texture: WebGLTexture
+
+    constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
+        this.__painter = painter
+        this.__type = {
+            "2d": painter.TEXTURE_2D,
+            "cube": painter.TEXTURE_CUBE_MAP
+        }[type] as number
+
+        // 创建纹理
+        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
+
+        // 配置纹理
+        painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)
+        painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST)
+        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE)
+        painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE)
+    }
+
+    // 链接图片资源(单一)
+    useImage(image: TexImageSource) {
+        linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
+        return this
+    }
+
+    // 链接图片资源（多张）
+    useCube(images: TexImageSource[], width: number, height: number) {
+        linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
+        return this
+    }
+
+}
+
 export default TextureObject