vislite 0.6.0 → 0.7.0

package/src/common/svg/config.ts

@@ -30,20 +30,24 @@ export const initText = (
     setAttribute(
         el,
         "dy",
-        {
-            top: config["fontSize"] * 0.5,
+        ({
+            top: (config["fontSize"] as number) * 0.5,
             middle: 0,
-            bottom: -config["fontSize"] * 0.5,
-        }[config.textBaseline]
+            bottom: -(config["fontSize"] as number) * 0.5,
+        } as {
+            [key: string]: number
+        })[config.textBaseline as string]
     )
 
     setStyle(el, {
         // 文字对齐方式
-        "text-anchor": {
+        "text-anchor": ({
             left: "start",
             right: "end",
             center: "middle",
-        }[config.textAlign],
+        } as {
+            [key: string]: string
+        })[config.textAlign as string],
         "dominant-baseline": "central",
 
         // 文字大小和字体设置

package/src/common/svg/gradient.ts

@@ -1,63 +1,63 @@
-import { initDefs } from './config'
-import { toNode, setAttribute } from "./tool"
-
-// 线性渐变
-export const linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
-
-    const defs = initDefs(el)
-    const gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random()
-
-    const linearGradient = toNode("linearGradient")
-    defs.appendChild(linearGradient)
-    setAttribute(linearGradient, "id", gradientId)
-    setAttribute(linearGradient, "x1", x0 + "%")
-    setAttribute(linearGradient, "y1", y0 + "%")
-    setAttribute(linearGradient, "x2", x1 + "%")
-    setAttribute(linearGradient, "y2", y1 + "%")
-
-    const enhanceGradient = {
-        "value": function () {
-            return "url(#" + gradientId + ")";
-        },
-        "setColor": function (stop: number, color: string) {
-
-            const stopEl = toNode("stop")
-            linearGradient.appendChild(stopEl)
-            setAttribute(stopEl, "offset", (stop * 100) + "%")
-            setAttribute(stopEl, "style", "stop-color:" + color + ";")
-
-            return enhanceGradient
-        }
-    }
-    return enhanceGradient
-}
-
-// 环形渐变
-export const radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
-
-    const defs = initDefs(el)
-    const gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random()
-
-    const radialGradient = toNode("radialGradient")
-    defs.appendChild(radialGradient)
-    setAttribute(radialGradient, "id", gradientId)
-    setAttribute(radialGradient, "cx", cx + "%")
-    setAttribute(radialGradient, "cy", cy + "%")
-    setAttribute(radialGradient, "r", r + "%")
-
-    const enhanceGradient = {
-        "value": function () {
-            return "url(#" + gradientId + ")";
-        },
-        "setColor": function (stop: number, color: string) {
-
-            const stopEl = toNode("stop")
-            radialGradient.appendChild(stopEl)
-            setAttribute(stopEl, "offset", (stop * 100) + "%")
-            setAttribute(stopEl, "style", "stop-color:" + color + ";")
-
-            return enhanceGradient
-        }
-    }
-    return enhanceGradient
-}
+import { initDefs } from './config'
+import { toNode, setAttribute } from "./tool"
+
+// 线性渐变
+export const linearGradient = function (el: SVGElement, x0: number, y0: number, x1: number, y1: number) {
+
+    const defs = initDefs(el)
+    const gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random()
+
+    const linearGradient = toNode("linearGradient")
+    defs.appendChild(linearGradient)
+    setAttribute(linearGradient, "id", gradientId)
+    setAttribute(linearGradient, "x1", x0 + "%")
+    setAttribute(linearGradient, "y1", y0 + "%")
+    setAttribute(linearGradient, "x2", x1 + "%")
+    setAttribute(linearGradient, "y2", y1 + "%")
+
+    const enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")";
+        },
+        "setColor": function (stop: number, color: string) {
+
+            const stopEl = toNode("stop")
+            linearGradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}
+
+// 环形渐变
+export const radialGradient = function (el: SVGElement, cx: number, cy: number, r: number) {
+
+    const defs = initDefs(el)
+    const gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random()
+
+    const radialGradient = toNode("radialGradient")
+    defs.appendChild(radialGradient)
+    setAttribute(radialGradient, "id", gradientId)
+    setAttribute(radialGradient, "cx", cx + "%")
+    setAttribute(radialGradient, "cy", cy + "%")
+    setAttribute(radialGradient, "r", r + "%")
+
+    const enhanceGradient = {
+        "value": function () {
+            return "url(#" + gradientId + ")";
+        },
+        "setColor": function (stop: number, color: string) {
+
+            const stopEl = toNode("stop")
+            radialGradient.appendChild(stopEl)
+            setAttribute(stopEl, "offset", (stop * 100) + "%")
+            setAttribute(stopEl, "style", "stop-color:" + color + ";")
+
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}

package/src/common/svg/index.ts

@@ -1,4 +1,4 @@
-import type SVGConfigType from "../../../types/SVGConfig"
+import type { default as SVGConfigType, svgElType, svgBoardType } from "../../../types/SVGConfig"
 import type { arcCapType, textAlignType, textBaselineType } from "../../../types/painterConfig"
 
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
@@ -86,7 +86,7 @@ class SVG {
     // el可以是结点或字符串，字符串的话表示节点名称
     // context可选，表示追加位置，可选，默认根svg
     // 此外，和appendBoard等操作一样，执行后新加入的结点会自动变成应用节点
-    appendEl(el: string | SVGElement, context?: SVGElement) {
+    appendEl(el: svgElType, context?: SVGElement) {
         context = context || this.__svg
 
         if (typeof el == "string") el = toNode(el)
@@ -99,8 +99,8 @@ class SVG {
     // 追加绘制板
     // 参数和appendEl类似，只是el如果是字符串的话，表示需要绘制对应什么内容，
     // 比如el = “arc”，表示画弧（不是路径arc），那么我们会创建path节点，因为我们是使用path实现的
-    appendBoard(el: string | SVGElement, context?: SVGElement) {
-        let _el = el
+    appendBoard(el: svgBoardType, context?: SVGElement) {
+        let _el: svgBoardType | string = el
 
         if (typeof el == "string")
             _el =
@@ -113,7 +113,7 @@ class SVG {
                 }[el] || ""
 
         if (_el == "") throw new Error("Unsupported drawing method:" + el)
-        return this.appendEl(_el, context)
+        return this.appendEl(_el as svgElType, context)
     }
 
     // 删除当前维护的节点

package/src/common/svg/tool.ts

@@ -29,17 +29,17 @@ export function getAttribute(el: SVGElement, key: string) {
 }
 
 export function full(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", config.fillStyle)
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+    _setAttribute(el, "stroke", config.strokeStyle as string)
+    _setAttribute(el, "fill", config.fillStyle as string)
+    _setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
 }
 
 export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle)
+    _setAttribute(el, "fill", config.fillStyle as string)
 }
 
 export function stroke(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "stroke", config.strokeStyle as string)
     _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+    _setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
 }

package/src/common/tree/toInnerTree.ts

@@ -1,4 +1,4 @@
-import type TreeConfigType from '../../../types/TreeConfig'
+import type { default as TreeConfigType, rootType, childrenType, idType } from '../../../types/TreeConfig'
 
 /**
  * 根据配置的层次关系（配置的id,child,root）把原始数据变成内部结构，方便后期位置计算
@@ -13,12 +13,14 @@ import type TreeConfigType from '../../../types/TreeConfig'
  * }
  */
 export default (initTree: any, config: TreeConfigType) => {
-    const tempTree = {}
+    const tempTree: {
+        [key: string]: any
+    } = {}
 
     // 根结点
-    const temp = config.root(initTree)
+    const temp = (config.root as rootType)(initTree)
     let id: number | string, rid: number | string
-    id = rid = config.id(temp)
+    id = rid = (config.id as idType)(temp)
     tempTree[id] = {
         "data": temp,
         "pid": null,
@@ -32,10 +34,10 @@ export default (initTree: any, config: TreeConfigType) => {
 
         // 根据传递的原始数据，生成内部统一结构
         ; (function createTree(pdata: any, pid: number | string) {
-            const children = config.children(pdata, initTree)
+            const children = (config.children as childrenType)(pdata, initTree)
             num += children ? children.length : 0
             for (let flag = 0; children && flag < children.length; flag++) {
-                id = config.id(children[flag])
+                id = (config.id as idType)(children[flag])
                 tempTree[pid].children.push(id);
                 tempTree[id] = {
                     "data": children[flag],

package/src/common/tree/toPlainTree.ts

@@ -22,7 +22,7 @@ export default function (initTree: any, config: TreeConfigType, noOpens: {}) {
         }
     } else {
 
-        const beforeDis = []
+        const beforeDis: Array<number> = []
         let size = 0, maxDeep = 0
 
         if (noOpens[rootid]) {

package/src/common/webgl/buffer.ts

@@ -51,7 +51,7 @@ class BufferObject {
         this.__painter = painter
         this.__isElement = isElement
 
-        this.__buffer = newBuffer(painter)
+        this.__buffer = newBuffer(painter) as WebGLBuffer
         this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
     }
 

package/src/common/webgl/doDraw.ts

@@ -39,10 +39,10 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
         // 写入颜色
         painter.uniform4f(painter.getUniformLocation(shader.program, "u_color")
-            , mesh.material.color.r
-            , mesh.material.color.g
-            , mesh.material.color.b
-            , mesh.material.color.alpha)
+            , mesh.material.color?.r as number
+            , mesh.material.color?.g as number
+            , mesh.material.color?.b as number
+            , mesh.material.color?.alpha as number)
     }
 
     // 多颜色
@@ -50,25 +50,25 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
         // 写入颜色序列
         new BufferObject(painter).use()
-            .write(mesh.material.colors.array as Float32Array)
-            .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0)
+            .write(mesh.material.colors?.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors?.itemSize as number, mesh.material.colors?.itemSize as number, 0)
 
     }
 
     // 立方纹理
     else if ("cube" in mesh.material) {
 
-        const size = (mesh.material.cube.right.image.value as any).width
+        const size = (mesh.material.cube?.right?.image.value as any).width
 
         painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
 
         getTexture(type, painter, 'cube').useCube([
-            mesh.material.cube.right.image.value,
-            mesh.material.cube.left.image.value,
-            mesh.material.cube.top.image.value,
-            mesh.material.cube.bottom.image.value,
-            mesh.material.cube.far.image.value,
-            mesh.material.cube.near.image.value
+            mesh.material.cube?.right?.image.value,
+            mesh.material.cube?.left?.image.value,
+            mesh.material.cube?.top?.image.value,
+            mesh.material.cube?.bottom?.image.value,
+            mesh.material.cube?.far?.image.value,
+            mesh.material.cube?.near?.image.value
         ], size, size)
 
     }
@@ -79,10 +79,10 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
         painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0)
 
         new BufferObject(painter).use()
-            .write(mesh.geometry.attributes.uv.array as Float32Array)
-            .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0)
+            .write(mesh.geometry.attributes.uv?.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv?.itemSize as number, 2, 0)
 
-        getTexture(type, painter, '2d').useImage(mesh.material.image.value)
+        getTexture(type, painter, '2d').useImage(mesh.material.image?.value)
 
     }
 

package/src/common/webgl/getColorFactory.ts

@@ -1,27 +1,27 @@
-export default function (painter: WebGLRenderingContext) {
-    const width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
-
-    const pixels = new Uint8Array(
-        4 * width * height
-    )
-    painter.readPixels(
-        0,
-        0,
-        width,
-        height,
-        painter.RGBA,
-        painter.UNSIGNED_BYTE,
-        pixels
-    )
-
-    return function (x: number, y: number): string {
-        y = height - y
-
-        const pixelR = pixels[4 * (y * width + x)]
-        const pixelG = pixels[4 * (y * width + x) + 1]
-        const pixelB = pixels[4 * (y * width + x) + 2]
-        const pixelA = pixels[4 * (y * width + x) + 3]
-
-        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
-    }
+export default function (painter: WebGLRenderingContext) {
+    const width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
+
+    const pixels = new Uint8Array(
+        4 * width * height
+    )
+    painter.readPixels(
+        0,
+        0,
+        width,
+        height,
+        painter.RGBA,
+        painter.UNSIGNED_BYTE,
+        pixels
+    )
+
+    return function (x: number, y: number): string {
+        y = height - y
+
+        const pixelR = pixels[4 * (y * width + x)]
+        const pixelG = pixels[4 * (y * width + x) + 1]
+        const pixelB = pixels[4 * (y * width + x) + 2]
+        const pixelA = pixels[4 * (y * width + x) + 3]
+
+        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
+    }
 }

package/src/common/webgl/getShader.ts

@@ -1,49 +1,49 @@
-import type { meshType } from '../../../types/Object3D'
-
-import ShaderObject from './shader'
-
-import vsColor from '../../shader/vsColor.c'
-import vsColors from '../../shader/vsColors.c'
-import vsImage from '../../shader/vsImage.c'
-import vsCube from '../../shader/vsCube.c'
-
-import fsColor from '../../shader/fsColor.c'
-import fsColors from '../../shader/fsColors.c'
-import fsImage from '../../shader/fsImage.c'
-import fsCube from '../../shader/fsCube.c'
-
-const shaders = {}
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
-
-    const uniqueName = type +
-        (mesh.material.color ? "1" : "0") +
-        (mesh.material.colors ? "1" : "0") +
-        (mesh.material.image ? "1" : "0") +
-        (mesh.material.cube ? "1" : "0")
-    if (shaders[uniqueName]) return shaders[uniqueName].use()
-
-    // 顶点着色器
-    const vertexShader = {
-        [type + "1000"]: vsColor,
-        [type + "0100"]: vsColors,
-        [type + "0010"]: vsImage,
-        [type + "0001"]: vsCube
-    }[uniqueName].replace(/uniform +mat4 +u_matrix;/, `
-    uniform mat4 u_matrix_world;
-    uniform mat4 u_matrix_mesh;
-    uniform mat4 u_matrix_proporion;`).replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position")
-
-    // 片段（元）着色器
-    const fragmentShader = {
-        [type + "1000"]: fsColor,
-        [type + "0100"]: fsColors,
-        [type + "0010"]: fsImage,
-        [type + "0001"]: fsCube
-    }[uniqueName]
-
-    // 启用着色器
-    const shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
-
-    shaders[uniqueName] = shader
-    return shader
+import type { meshType } from '../../../types/Object3D'
+
+import ShaderObject from './shader'
+
+import vsColor from '../../shader/vsColor.c'
+import vsColors from '../../shader/vsColors.c'
+import vsImage from '../../shader/vsImage.c'
+import vsCube from '../../shader/vsCube.c'
+
+import fsColor from '../../shader/fsColor.c'
+import fsColors from '../../shader/fsColors.c'
+import fsImage from '../../shader/fsImage.c'
+import fsCube from '../../shader/fsCube.c'
+
+const shaders = {}
+export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
+
+    const uniqueName = type +
+        (mesh.material.color ? "1" : "0") +
+        (mesh.material.colors ? "1" : "0") +
+        (mesh.material.image ? "1" : "0") +
+        (mesh.material.cube ? "1" : "0")
+    if (shaders[uniqueName]) return shaders[uniqueName].use()
+
+    // 顶点着色器
+    const vertexShader = {
+        [type + "1000"]: vsColor,
+        [type + "0100"]: vsColors,
+        [type + "0010"]: vsImage,
+        [type + "0001"]: vsCube
+    }[uniqueName].replace(/uniform +mat4 +u_matrix;/, `
+    uniform mat4 u_matrix_world;
+    uniform mat4 u_matrix_mesh;
+    uniform mat4 u_matrix_proporion;`).replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position")
+
+    // 片段（元）着色器
+    const fragmentShader = {
+        [type + "1000"]: fsColor,
+        [type + "0100"]: fsColors,
+        [type + "0010"]: fsImage,
+        [type + "0001"]: fsCube
+    }[uniqueName]
+
+    // 启用着色器
+    const shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
+
+    shaders[uniqueName] = shader
+    return shader
 }

package/src/common/webgl/getTexture.ts

@@ -1,12 +1,12 @@
-import TextureObject from './texture'
-
-const textures = {}
-export default function (type: string, painter: WebGLRenderingContext, kind: string) {
-    const uniqueName = type + "-" + kind
-
-    if (!textures[uniqueName]) {
-        textures[uniqueName] = new TextureObject(painter, kind)
-    }
-
-    return textures[uniqueName]
+import TextureObject from './texture'
+
+const textures = {}
+export default function (type: string, painter: WebGLRenderingContext, kind: string) {
+    const uniqueName = type + "-" + kind
+
+    if (!textures[uniqueName]) {
+        textures[uniqueName] = new TextureObject(painter, kind)
+    }
+
+    return textures[uniqueName]
 }

package/src/common/webgl/getWebGLContext.ts

@@ -2,11 +2,11 @@ interface OptsType {
     preserveDrawingBuffer?: boolean
 }
 export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}) {
-    const names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]
-    let painter = null
+    const names = ["experimental-webgl", "webkit-3d", "moz-webgl"]
+    let painter = canvas.getContext("webgl", opts) as WebGL2RenderingContext
     for (let i = 0; i < names.length; i++) {
         try {
-            painter = canvas.getContext(names[i], opts)
+            painter = canvas.getContext(names[i], opts) as WebGL2RenderingContext
         } catch (e) { }
         if (painter) break
     }

package/src/common/webgl/index.ts

@@ -21,7 +21,9 @@ class WebGL {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     private __getColor = (x: number, y: number) => "rgba(0,0,0,1)"
 
-    private __regionList = {} //区域映射表
+    private __regionList: {
+        [key: string | number]: Array<number>
+    } = {} //区域映射表
     private __regionAssemble = assemble(0, 1, 0.2, 3)
 
     private __regionName = "" // 当前绘制的内容名称
@@ -43,7 +45,7 @@ class WebGL {
 
     private __unique: number
 
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement) {
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null) {
         this.__unique = new Date().valueOf()
 
         this.painter = getWebGLContext(ViewCanvas, scale)
@@ -111,7 +113,7 @@ class WebGL {
         if (!isUpdateRegion) needUpdate = true
 
         const meshWorld = {
-            matrix: object3D.matrix.value()
+            matrix: object3D.matrix?.value() as Array<number>
         }
 
         const globalWorld = {
@@ -184,7 +186,7 @@ class WebGL {
     }
 
     // 设置当前绘制区域名称
-    setRegion(regionName: string | number) {
+    setRegion(regionName: string | number | undefined) {
         this.__regionName = regionName + ""
 
         if (regionName) {

package/src/common/webgl/shader.ts

@@ -32,7 +32,7 @@ const useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshade
     const fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
 
     // 创建一个着色器程序
-    const glProgram = painter.createProgram()
+    const glProgram = painter.createProgram() as WebGLProgram
 
     // 把前面创建的两个着色器对象添加到着色器程序中
     painter.attachShader(glProgram, vertexShader)
@@ -52,7 +52,7 @@ class ShaderObject {
 
     private __painter: WebGLRenderingContext
 
-    program: WebGLProgram
+    program: WebGLProgram | null = null
 
     constructor(painter: WebGLRenderingContext) {
         this.__painter = painter
@@ -67,7 +67,7 @@ class ShaderObject {
 
     // 编译着色器程序
     compile(vshaderSource: string, fshaderSource: string) {
-        this.program = useShader(this.__painter, vshaderSource, fshaderSource)
+        this.program = useShader(this.__painter, vshaderSource, fshaderSource) as WebGLProgram
         return this
     }
 

package/src/common/webgl/texture.ts

@@ -69,10 +69,10 @@ class TextureObject {
         this.__type = {
             "2d": painter.TEXTURE_2D,
             "cube": painter.TEXTURE_CUBE_MAP
-        }[type]
+        }[type] as number
 
         // 创建纹理
-        this.__texture = initTexture(painter, this.__type, unit)
+        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
 
         // 配置纹理
         painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST)