vislite 0.6.0-alpha.0 → 0.6.0-alpha.2

package/src/common/webgl/texture.ts

@@ -2,10 +2,10 @@
 // type = gl.TEXTURE_2D 二维纹理
 // type = gl.TEXTURE_CUBE_MAP 立方体纹理
 // unit表示开启的纹理单元编号
-let initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
+const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
 
     // 创建纹理对象
-    let texture = painter.createTexture()
+    const texture = painter.createTexture()
 
     // 开启纹理单元，unit表示开启的编号
     painter.activeTexture(painter['TEXTURE' + unit])
@@ -29,20 +29,21 @@ let initTexture = (painter: WebGLRenderingContext, type: number, unit: number) =
 //      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比特
-let linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
+const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
     painter.texImage2D(type, level, format, format, textureType, image)
 }
 
-let linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
+const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
 
-    let types = [
+    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 // 前
-    ], target: number
+    ]
+    let target: number
 
     for (let i = 0; i < types.length; i++) {
         if (images[i]) {

package/src/formatColor.ts

@@ -1,19 +1,19 @@
-let toHex = (value: number) => {
-    let hex = value.toString(16)
+const toHex = (value: number) => {
+    const hex = value.toString(16)
     return hex.length == 1 ? ("0" + hex) : hex
 }
 
 export default function (color: string, format: string) {
 
-    let colorNode = document.getElementsByTagName('head')[0]
+    const colorNode = document.getElementsByTagName('head')[0]
     colorNode.style['color'] = color
 
     // 获取结点的全部样式
-    let allStyle = document.defaultView && document.defaultView.getComputedStyle ?
+    const allStyle = document.defaultView && document.defaultView.getComputedStyle ?
         document.defaultView.getComputedStyle(colorNode, null) :
         (colorNode as any).currentStyle
 
-    let oralFormat = allStyle.getPropertyValue('color').replace(/rgba?\(/, '').replace(")", "").split(',')
+    const oralFormat = allStyle.getPropertyValue('color').replace(/rgba?\(/, '').replace(")", "").split(',')
     for (let index = 0; index < oralFormat.length; index++) {
         oralFormat[index] = +oralFormat[index]
     }

package/src/getLoopColors.ts

@@ -1,7 +1,7 @@
 // 获取一组循环色彩
 export default function (num: number, alpha: number = 1) {
     // 颜色集合
-    let colorList = [
+    const colorList = [
         'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
         'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
         'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",

package/src/interpolation/Cardinal.ts

@@ -38,7 +38,7 @@ class Cardinal implements CardinalType {
             "x": [],
             "h": []
         };
-        var flag: number,
+        let flag: number,
             slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]),
             temp: number
         this.__HS.x[0] = points[0][0]

package/src/interpolation/Hermite.ts

@@ -27,7 +27,7 @@ class Hermite implements HermiteType {
             // 记录原始尺寸
             this.__a = x1
             this.__b = x2
-            let p3 = this.__u * s1,
+            const p3 = this.__u * s1,
                 p4 = this.__u * s2
             // 缩放到[0,1]定义域
             y1 /= (x2 - x1)
@@ -54,10 +54,10 @@ class Hermite implements HermiteType {
      */
     use(x: number) {
         if (this.__MR) {
-            let sx = (x - this.__a) / (this.__b - this.__a),
+            const sx = (x - this.__a) / (this.__b - this.__a),
                 sx2 = sx * sx,
                 sx3 = sx * sx2
-            let sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3]
+            const sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3]
             return sResult * (this.__b - this.__a)
         } else throw new Error('You shoud first set the position!')
     }

package/src/layout/TreeLayout.ts

@@ -35,11 +35,11 @@ class TreeLayout extends Tree implements TreeLayoutType {
     }
 
     use(initTree: any, noOpens = {}) {
-        let tree = super.use(initTree, noOpens)
+        const tree = super.use(initTree, noOpens)
 
         // 校对偏差
         if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
-            for (let key in tree.node) {
+            for (const key in tree.node) {
                 if (!tree.node[key].show) {
 
                     let deep = 0, pid = key
@@ -57,13 +57,13 @@ class TreeLayout extends Tree implements TreeLayoutType {
         if (this.__option.type == 'rect') {
             if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
 
-                let perW = this.__option.height / tree.size
-                let perD = this.__option.width / (tree.deep - 1)
+                const perW = this.__option.height / tree.size
+                const perD = this.__option.width / (tree.deep - 1)
 
-                let balanceW = this.__option.y - this.__option.height * 0.5
-                let flag = this.__option.direction == 'LR' ? 1 : -1
+                const balanceW = this.__option.y - this.__option.height * 0.5
+                const flag = this.__option.direction == 'LR' ? 1 : -1
 
-                for (let key in tree.node) {
+                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
@@ -74,18 +74,18 @@ class TreeLayout extends Tree implements TreeLayoutType {
                 }
             } else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
 
-                let perW = this.__option.width / tree.size
-                let perD = this.__option.height / (tree.deep - 1)
+                const perW = this.__option.width / tree.size
+                const perD = this.__option.height / (tree.deep - 1)
 
-                let balanceW = this.__option.x - this.__option.width * 0.5
-                let flag = this.__option.direction == 'TB' ? 1 : -1
+                const balanceW = this.__option.x - this.__option.width * 0.5
+                const flag = this.__option.direction == 'TB' ? 1 : -1
 
-                for (let key in tree.node) {
+                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 {
-                        let left = tree.node[key].left
+                        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
@@ -95,16 +95,16 @@ class TreeLayout extends Tree implements TreeLayoutType {
             }
 
         } else if (this.__option.type == 'circle') {
-            let cx = this.__option.x, cy = this.__option.y
-            let deg = Math.PI * 2 / tree.size
-            let per = this.__option.radius / (tree.deep - 1)
+            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 (let key in tree.node) {
+            for (const key in tree.node) {
                 if (tree.node[key].left == 0.5) {
                     tree.node[key].left = cx
                     tree.node[key].top = cy
                 } else {
-                    let position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
+                    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]
@@ -135,13 +135,13 @@ class TreeLayout extends Tree implements TreeLayoutType {
     }
 
     private doUpdate() {
-        let newTree = this.use(this.__oralTree, this.__noOpens)
+        const newTree = this.use(this.__oralTree, this.__noOpens)
 
-        let cacheTree = JSON.parse(JSON.stringify(newTree))
+        const cacheTree = JSON.parse(JSON.stringify(newTree))
 
         animation((deep) => {
 
-            for (let key in cacheTree.node) {
+            for (const key in cacheTree.node) {
                 if (newTree.node[key].show || this.__preTree.node[key].show) {
                     cacheTree.node[key].show = true
 

package/src/move.ts

@@ -1,6 +1,6 @@
 // 点（x,y）沿着向量（ax,ay）方向移动距离d
 export default function (ax: number, ay: number, d: number, x: number, y: number): [number, number] {
-    let sqrt = Math.sqrt(ax * ax + ay * ay)
+    const sqrt = Math.sqrt(ax * ax + ay * ay)
     return [
         ax * d / sqrt + x,
         ay * d / sqrt + y

package/src/resizeObserver.ts

@@ -1,6 +1,7 @@
 let observer: ResizeObserver
 
-let attrValueToCallback = {}, uniqueid = 0
+const attrValueToCallback = {}
+let uniqueid = 0
 
 export default function (el: HTMLElement | null, callback: Function) {
 

package/src/rotate.ts

@@ -1,6 +1,6 @@
 // 点（x,y）围绕中心（cx,cy）旋转deg度
 export default function (cx: number, cy: number, deg: number, x: number, y: number): [number, number] {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
+    const cos = Math.cos(deg), sin = Math.sin(deg)
     return [
         (x - cx) * cos - (y - cy) * sin + cx,
         (x - cx) * sin + (y - cy) * cos + cy

package/src/ruler.ts

@@ -7,7 +7,7 @@ export default function (maxValue: number, minValue: number, num: number, option
 
     // 如果最大值最小值反了
     if (maxValue < minValue) {
-        let temp = minValue
+        const temp = minValue
         minValue = maxValue
         maxValue = temp
     }
@@ -18,12 +18,12 @@ export default function (maxValue: number, minValue: number, num: number, option
     }
 
     // 为了变成 -100 ~ 100 需要放大或者缩小的倍数
-    let times100 =
+    const times100 =
 
         (function (_value) {
 
             // 先确定基调，是放大还是缩小
-            let _times100_base = (_value < 100 && _value > -100) ? 10 : 0.1
+            const _times100_base = (_value < 100 && _value > -100) ? 10 : 0.1
 
             // 记录当前缩放倍数
             let _times100 = -1, _tiemsValue = _value
@@ -59,11 +59,11 @@ export default function (maxValue: number, minValue: number, num: number, option
 
 
     // 求解出 -100 ~ 100 的最佳间距值 后直接转换原来的倍数
-    let distance100_oral = Math.ceil((maxValue - minValue) * times100 / num)
+    const distance100_oral = Math.ceil((maxValue - minValue) * times100 / num)
 
-    let getResult = (changValue: number) => {
+    const getResult = (changValue: number) => {
         // 校对一下
-        let distance100 = {
+        const distance100 = {
             3: 2,
             4: 5,
             6: 5,
@@ -86,12 +86,12 @@ export default function (maxValue: number, minValue: number, num: number, option
             27: 25
         }[distance100_oral + changValue] || (distance100_oral + changValue)
 
-        let distance = distance100 / times100
+        const distance = distance100 / times100
 
         // 最小值，也就是起点
-        let begin = Math.floor(minValue / distance) * distance
+        const begin = Math.floor(minValue / distance) * distance
 
-        let rulerArray = []
+        const rulerArray = []
         // 获取最终的刻度尺数组
         rulerArray.push(begin)
         for (let index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
@@ -103,10 +103,10 @@ export default function (maxValue: number, minValue: number, num: number, option
 
     let rulerArray = getResult(0)
 
-    let balanceMax = () => {
-        let rulerArray_temp = []
+    const balanceMax = () => {
+        const rulerArray_temp = []
 
-        let changeDist = rulerArray[rulerArray.length - 1] - option.max
+        const changeDist = rulerArray[rulerArray.length - 1] - option.max
         for (let index = 0; index < rulerArray.length; index++) {
             if (index + 1 < rulerArray.length && rulerArray[index + 1] - changeDist < minValue) {
                 // 多余的
@@ -118,10 +118,10 @@ export default function (maxValue: number, minValue: number, num: number, option
         return rulerArray_temp
     }
 
-    let balanceMin = () => {
-        let rulerArray_temp = []
+    const balanceMin = () => {
+        const rulerArray_temp = []
 
-        let changeDist = rulerArray[0] - option.min
+        const changeDist = rulerArray[0] - option.min
         for (let index = 0; index < rulerArray.length; index++) {
             rulerArray_temp[index] = rulerArray[index] - changeDist
             if (maxValue <= rulerArray_temp[index]) break
@@ -135,20 +135,20 @@ export default function (maxValue: number, minValue: number, num: number, option
         // 上下界限制
         if ('max' in option && 'min' in option && option.max >= maxValue && option.min <= minValue) {
 
-            let isAnswer = () => {
+            const isAnswer = () => {
 
                 // 先判断原始的是否可行
                 if (rulerArray[0] >= option.min && rulerArray[rulerArray.length - 1] <= option.max) return true
 
                 // 再判断max调整是否可行
-                let rulerArray_max = balanceMax()
+                const rulerArray_max = balanceMax()
                 if (rulerArray_max[0] >= option.min && rulerArray_max[rulerArray_max.length - 1] <= option.max) {
                     rulerArray = rulerArray_max
                     return true
                 }
 
                 // 再判断max调整是否可行
-                let rulerArray_min = balanceMin()
+                const rulerArray_min = balanceMin()
                 if (rulerArray_min[0] >= option.min && rulerArray_min[rulerArray_max.length - 1] <= option.max) {
                     rulerArray = rulerArray_min
                     return true

package/src/throttle.ts

@@ -17,7 +17,8 @@ export default function (callback: Function, option: throttleOptionType = {}) {
 
     let arg: any
     return function () {
-        let _this = this
+        const _this = this
+        // eslint-disable-next-line prefer-rest-params
         arg = arguments
 
         // 如果前置任务都完成了
@@ -27,7 +28,7 @@ export default function (callback: Function, option: throttleOptionType = {}) {
             }
             hadInterval = true
 
-            let interval = setInterval(() => {
+            const interval = setInterval(() => {
                 if (hadClick) {
                     if (!option.keep) {
                         callback.apply(_this, arg)

package/src/viewHandler.ts

@@ -1,14 +1,14 @@
 import type { callbackFun } from '../types/viewHandler'
 
-let mousePosition = (el: HTMLElement, event: any) => {
-    let bounding = el.getBoundingClientRect()
+const mousePosition = (el: HTMLElement, event: any) => {
+    const bounding = el.getBoundingClientRect()
     return {
         "x": event.clientX - bounding.left,
         "y": event.clientY - bounding.top
     }
 }
 
-let getKeyString = (event: any) => {
+const getKeyString = (event: any) => {
     return {
         37: "left",
         38: "up",
@@ -19,11 +19,11 @@ let getKeyString = (event: any) => {
 
 export default function (callback: callbackFun) {
 
-    let el = document.getElementsByTagName('body')[0]
+    const el = document.getElementsByTagName('body')[0]
 
     // 键盘控制
     el.addEventListener("keydown", function (event) {
-        let keyCode = getKeyString(event)
+        const keyCode = getKeyString(event)
 
         // 视角向上
         if (keyCode == 'up') {
@@ -69,7 +69,7 @@ export default function (callback: callbackFun) {
 
     // 鼠标控制
     let mouseP = null;
-    let doMove = function (event) {
+    const doMove = function (event) {
 
         // 单纯移动
         if (mouseP == null) {
@@ -84,13 +84,13 @@ export default function (callback: callbackFun) {
         // 按下移动
         else {
 
-            let tempMouseP = mousePosition(el, event)
+            const tempMouseP = mousePosition(el, event)
 
             // 先求解出轨迹向量
-            let normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y]
+            const normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y]
 
             // 方向向量旋转90deg得到旋转向量
-            let rotateNormal = [
+            const rotateNormal = [
                 normal[1],
                 normal[0],
                 0
@@ -113,7 +113,7 @@ export default function (callback: callbackFun) {
     el.addEventListener("mousedown", (event) => {
         mouseP = mousePosition(el, event)
     })
-    el.addEventListener("mouseup", (event) => {
+    el.addEventListener("mouseup", () => {
         mouseP = null
     })
     el.addEventListener("mousemove", (event) => {
@@ -121,7 +121,7 @@ export default function (callback: callbackFun) {
     })
 
     // 手指控制
-    el.addEventListener("touchend", (event) => {
+    el.addEventListener("touchend", () => {
         mouseP = null;
     })
     el.addEventListener("touchstart", (event) => {
@@ -131,10 +131,10 @@ export default function (callback: callbackFun) {
         doMove(event.touches[0])
     })
 
-    let doScale = function (value: number, event: Event) {
+    const doScale = function (value: number, event: Event) {
         if (value == 0) return
 
-        let baseTimes = 0.899
+        const baseTimes = 0.899
         callback({
             type: "scale",
             value: value < 0 ? baseTimes : 2 - baseTimes,

package/types/CanvasOption.d.ts

@@ -1,8 +1,9 @@
-export default interface CanvasOptionType {
+import CanvasOptsType from "./CanvasOpts"
+
+export default interface CanvasOptionType extends CanvasOptsType {
 
     /**
      * 是否支持区域管理，默认true
      */
     region?: boolean
-
 }

package/types/CanvasOpts.d.ts

@@ -0,0 +1,10 @@
+export default interface CanvasOptsType {
+
+    // https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
+    willReadFrequently?: boolean
+
+    alpha?: boolean
+
+    storage?: string
+
+}