vislite 0.7.0-alpha.0 → 0.7.0

package/src/common/webgl/texture.ts

@@ -1,98 +1,98 @@
-// 初始化一个纹理对象
-// type = gl.TEXTURE_2D 二维纹理
-// type = gl.TEXTURE_CUBE_MAP 立方体纹理
-// unit表示开启的纹理单元编号
-const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
-
-    // 创建纹理对象
-    const texture = painter.createTexture()
-
-    // 开启纹理单元，unit表示开启的编号
-    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]
-
-        // 创建纹理
-        this.__texture = initTexture(painter, this.__type, unit)
-
-        // 配置纹理
-        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表示开启的编号
+    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
+    }
+
+}
+
 export default TextureObject

package/src/layout/TreeLayout.ts

@@ -1,187 +1,189 @@
-import type TreeLayoutType from '../../types/TreeLayout'
-import type { TreeResultType } from '../../types/Tree'
-import type TreeOptionType from '../../types/TreeOption'
-
-import Tree from '../common/tree/index'
-import mergeOption from '../common/mergeOption'
-import animation from '../animation'
-import rotate from '../rotate'
-
-class TreeLayout extends Tree implements TreeLayoutType {
-    readonly name: string = 'TreeLayout'
-
-    private __option: TreeOptionType = {
-        offsetX: 0,
-        offsetY: 0,
-        duration: 500,
-        type: "plain",
-        direction: "LR",
-        x: 100,
-        y: 100,
-        width: 100,
-        height: 100,
-        radius: 100
-    }
-
-    private __rback: (tree: TreeResultType) => void
-    private __oralTree: any
-    private __preTree: TreeResultType
-
-    private __noOpens = {}
-
-    setOption(option: TreeOptionType) {
-        mergeOption(option, this.__option)
-        return this
-    }
-
-    use(initTree: any, noOpens = {}) {
-        const tree = super.use(initTree, noOpens)
-
-        // 校对偏差
-        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
-            for (const key in tree.node) {
-                if (!tree.node[key].show) {
-
-                    let deep = 0, pid = key
-                    do {
-                        pid = tree.node[pid].pid
-                        deep++
-                    } while (!tree.node[pid].show)
-
-                    tree.node[key].left += this.__option.offsetX * deep
-                    tree.node[key].top += this.__option.offsetY * deep
-                }
-            }
-        }
-
-        if (this.__option.type == 'rect') {
-            if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
-
-                const perW = this.__option.height / tree.size
-                const perD = this.__option.width / (tree.deep - 1)
-
-                const balanceW = this.__option.y - this.__option.height * 0.5
-                const flag = this.__option.direction == 'LR' ? 1 : -1
-
-                for (const key in tree.node) {
-                    if (tree.deep == 1) {
-                        tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
-                        tree.node[key].top = this.__option.y
-                    } else {
-                        tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
-                        tree.node[key].top = tree.node[key].top * perW + balanceW
-                    }
-                }
-            } else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
-
-                const perW = this.__option.width / tree.size
-                const perD = this.__option.height / (tree.deep - 1)
-
-                const balanceW = this.__option.x - this.__option.width * 0.5
-                const flag = this.__option.direction == 'TB' ? 1 : -1
-
-                for (const key in tree.node) {
-                    if (tree.deep == 1) {
-                        tree.node[key].left = this.__option.x
-                        tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
-                    } else {
-                        const left = tree.node[key].left
-
-                        tree.node[key].left = tree.node[key].top * perW + balanceW
-                        tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
-                    }
-                }
-
-            }
-
-        } else if (this.__option.type == 'circle') {
-            const cx = this.__option.x, cy = this.__option.y
-            const deg = Math.PI * 2 / tree.size
-            const per = this.__option.radius / (tree.deep - 1)
-
-            for (const key in tree.node) {
-                if (tree.node[key].left == 0.5) {
-                    tree.node[key].left = cx
-                    tree.node[key].top = cy
-                } else {
-                    const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
-
-                    tree.node[key].left = position[0]
-                    tree.node[key].top = position[1]
-                }
-            }
-        }
-
-        return tree
-    }
-
-    bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
-        this.__rback = renderBack
-        this.__oralTree = initTree
-        this.__noOpens = noOpens
-
-        this.__preTree = this.use(this.__oralTree, this.__noOpens)
-        this.__rback(this.__preTree)
-
-        return this
-    }
-
-    unbind() {
-        this.__rback = null
-        this.__oralTree = null
-        this.__preTree = null
-        this.__noOpens = {}
-        return this
-    }
-
-    private doUpdate() {
-        const newTree = this.use(this.__oralTree, this.__noOpens)
-
-        const cacheTree = JSON.parse(JSON.stringify(newTree))
-
-        animation((deep) => {
-
-            for (const key in cacheTree.node) {
-                if (newTree.node[key].show || this.__preTree.node[key].show) {
-                    cacheTree.node[key].show = true
-
-                    cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
-                    cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
-                }
-            }
-            this.__rback(cacheTree)
-
-
-        }, this.__option.duration, () => {
-            this.__preTree = newTree
-            this.__rback(this.__preTree)
-        })
-    }
-
-    closeNode(id: string) {
-        if (!this.__preTree) return
-        this.__noOpens[id] = true
-
-        this.doUpdate()
-        return this
-    }
-
-    openNode(id: string) {
-        if (!this.__preTree) return
-        this.__noOpens[id] = false
-
-        this.doUpdate()
-        return this
-    }
-
-    toggleNode(id: string) {
-        if (!this.__preTree) return
-        this.__noOpens[id] = !this.__noOpens[id]
-
-        this.doUpdate()
-        return this
-    }
-
-}
-
+import type TreeLayoutType from '../../types/TreeLayout'
+import type { TreeResultType } from '../../types/Tree'
+import type TreeOptionType from '../../types/TreeOption'
+
+import Tree from '../common/tree/index'
+import mergeOption from '../common/mergeOption'
+import animation from '../animation'
+import rotate from '../rotate'
+
+class TreeLayout extends Tree implements TreeLayoutType {
+    readonly name: string = 'TreeLayout'
+
+    private __option = {
+        offsetX: 0,
+        offsetY: 0,
+        duration: 500,
+        type: "plain",
+        direction: "LR",
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        radius: 100
+    }
+
+    private __rback: (tree: TreeResultType) => void
+    private __oralTree: any
+    private __preTree: TreeResultType | null
+
+    private __noOpens = {}
+
+    setOption(option: TreeOptionType) {
+        mergeOption(option, this.__option)
+        return this
+    }
+
+    use(initTree: any, noOpens = {}) {
+        const tree = super.use(initTree, noOpens)
+
+        // 校对偏差
+        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
+            for (const key in tree.node) {
+                if (!tree.node[key].show) {
+
+                    let deep = 0, pid = key
+                    do {
+                        pid = tree.node[pid].pid
+                        deep++
+                    } while (!tree.node[pid].show)
+
+                    tree.node[key].left += this.__option.offsetX * deep
+                    tree.node[key].top += this.__option.offsetY * deep
+                }
+            }
+        }
+
+        if (this.__option.type == 'rect') {
+            if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
+
+                const perW = this.__option.height / tree.size
+                const perD = this.__option.width / (tree.deep - 1)
+
+                const balanceW = this.__option.y - this.__option.height * 0.5
+                const flag = this.__option.direction == 'LR' ? 1 : -1
+
+                for (const key in tree.node) {
+                    if (tree.deep == 1) {
+                        tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
+                        tree.node[key].top = this.__option.y
+                    } else {
+                        tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
+                        tree.node[key].top = tree.node[key].top * perW + balanceW
+                    }
+                }
+            } else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
+
+                const perW = this.__option.width / tree.size
+                const perD = this.__option.height / (tree.deep - 1)
+
+                const balanceW = this.__option.x - this.__option.width * 0.5
+                const flag = this.__option.direction == 'TB' ? 1 : -1
+
+                for (const key in tree.node) {
+                    if (tree.deep == 1) {
+                        tree.node[key].left = this.__option.x
+                        tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
+                    } else {
+                        const left = tree.node[key].left
+
+                        tree.node[key].left = tree.node[key].top * perW + balanceW
+                        tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
+                    }
+                }
+
+            }
+
+        } else if (this.__option.type == 'circle') {
+            const cx = this.__option.x, cy = this.__option.y
+            const deg = Math.PI * 2 / tree.size
+            const per = this.__option.radius / (tree.deep - 1)
+
+            for (const key in tree.node) {
+                if (tree.node[key].left == 0.5) {
+                    tree.node[key].left = cx
+                    tree.node[key].top = cy
+                } else {
+                    const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
+
+                    tree.node[key].left = position[0]
+                    tree.node[key].top = position[1]
+                }
+            }
+        }
+
+        return tree
+    }
+
+    bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
+        this.__rback = renderBack
+        this.__oralTree = initTree
+        this.__noOpens = noOpens
+
+        this.__preTree = this.use(this.__oralTree, this.__noOpens)
+        this.__rback(this.__preTree)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralTree = null
+        this.__preTree = null
+        this.__noOpens = {}
+        return this
+    }
+
+    private doUpdate() {
+        const newTree = this.use(this.__oralTree, this.__noOpens)
+
+        const cacheTree = JSON.parse(JSON.stringify(newTree))
+
+        animation((deep) => {
+
+            if (this.__preTree) {
+                for (const key in cacheTree.node) {
+                    if (newTree.node[key].show || this.__preTree.node[key].show) {
+                        cacheTree.node[key].show = true
+
+                        cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
+                        cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
+                    }
+                }
+            }
+            this.__rback(cacheTree)
+
+
+        }, this.__option.duration, () => {
+            this.__preTree = newTree
+            this.__rback(this.__preTree)
+        })
+    }
+
+    closeNode(id: string) {
+        if (!this.__preTree) return this
+        this.__noOpens[id] = true
+
+        this.doUpdate()
+        return this
+    }
+
+    openNode(id: string) {
+        if (!this.__preTree) return this
+        this.__noOpens[id] = false
+
+        this.doUpdate()
+        return this
+    }
+
+    toggleNode(id: string) {
+        if (!this.__preTree) return this
+        this.__noOpens[id] = !this.__noOpens[id]
+
+        this.doUpdate()
+        return this
+    }
+
+}
+
 export default TreeLayout

package/src/resizeObserver.ts

@@ -1,38 +1,38 @@
-let observer: ResizeObserver
-
-const attrValueToCallback = {}
-let uniqueid = 0
-
-export default function (el: HTMLElement | null, callback: Function) {
-
-    try {
-
-        if (!observer) {
-            observer = new ResizeObserver(entries => {
-                for (const entry of entries) {
-                    attrValueToCallback[(entry.target as any)._resize_observer_]()
-                }
-            })
-        }
-
-        uniqueid++
-
-        (el as any)._resize_observer_ = uniqueid
-        attrValueToCallback[uniqueid] = callback
-
-        observer.observe(el)
-
-        return function () {
-            if (observer) {
-                observer.unobserve(el)
-                delete attrValueToCallback[(el as any)._resize_observer_]
-            }
-        }
-
-    } catch (e) {
-        callback()
-
-        // 如果浏览器不支持此接口
-        console.error('ResizeObserver undefined!')
-    }
+let observer: ResizeObserver
+
+const attrValueToCallback = {}
+let uniqueid = 0
+
+export default function (el: HTMLElement | null, callback: Function) {
+
+    try {
+
+        if (!observer) {
+            observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    attrValueToCallback[(entry.target as any)._resize_observer_]()
+                }
+            })
+        }
+
+        uniqueid++
+
+        (el as any)._resize_observer_ = uniqueid
+        attrValueToCallback[uniqueid] = callback
+
+        observer.observe(el as HTMLElement)
+
+        return function () {
+            if (observer) {
+                observer.unobserve(el as HTMLElement)
+                delete attrValueToCallback[(el as any)._resize_observer_]
+            }
+        }
+
+    } catch (e) {
+        callback()
+
+        // 如果浏览器不支持此接口
+        console.error('ResizeObserver undefined!')
+    }
 }