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

package/lib/throttle/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.6.0-alpha.0
+* VISLite JavaScript Library v0.6.0-alpha.2
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Dec 16 2023 15:40:07 GMT+0800 (中国标准时间)
+* Publish Date:  Sun Dec 17 2023 12:58:48 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

package/lib/throttle/index.umd.min.js

@@ -1,11 +1,11 @@
 /*!
-* VISLite JavaScript Library v0.6.0-alpha.0
+* VISLite JavaScript Library v0.6.0-alpha.2
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Dec 16 2023 15:40:07 GMT+0800 (中国标准时间)
+* Publish Date:  Sun Dec 17 2023 12:58:48 GMT+0800 (中国标准时间)
 */
 var e,t;e=this,t=function(){"use strict";return function(e,t){void 0===t&&(t={}),t=function(e,t){for(var n in e)t[n]=e[n];return t}(t,{time:200,keep:!1,opportunity:"end"});var n,o=!1,i=!1,r=!1;return function(){var p=this;if(n=arguments,o)i=!0,r=!0;else{"end"!=t.opportunity&&e.apply(p,n),o=!0;var f=setInterval((function(){i?t.keep||e.apply(p,n):("begin"!=t.opportunity&&(r||"end"==t.opportunity)&&e.apply(p,n),o=!1,r=!1,clearInterval(f)),i=!1}),t.time)}}}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).VISLite_throttle=t();

package/lib/viewHandler/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.6.0-alpha.0
+* VISLite JavaScript Library v0.6.0-alpha.2
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Dec 16 2023 15:40:07 GMT+0800 (中国标准时间)
+* Publish Date:  Sun Dec 17 2023 12:58:48 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -98,13 +98,13 @@
         el.addEventListener("mousedown", function (event) {
             mouseP = mousePosition(el, event);
         });
-        el.addEventListener("mouseup", function (event) {
+        el.addEventListener("mouseup", function () {
             mouseP = null;
         });
         el.addEventListener("mousemove", function (event) {
             doMove(event);
         });
-        el.addEventListener("touchend", function (event) {
+        el.addEventListener("touchend", function () {
             mouseP = null;
         });
         el.addEventListener("touchstart", function (event) {

package/lib/viewHandler/index.umd.min.js

@@ -1,11 +1,11 @@
 /*!
-* VISLite JavaScript Library v0.6.0-alpha.0
+* VISLite JavaScript Library v0.6.0-alpha.2
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Dec 16 2023 15:40:07 GMT+0800 (中国标准时间)
+* Publish Date:  Sun Dec 17 2023 12:58:48 GMT+0800 (中国标准时间)
 */
-var e,n;e=this,n=function(){"use strict";var e=function(e,n){var t=e.getBoundingClientRect();return{x:n.clientX-t.left,y:n.clientY-t.top}};return function(n){var t=document.getElementsByTagName("body")[0];t.addEventListener("keydown",(function(e){var t=function(e){return{37:"left",38:"up",39:"right",40:"down"}[e.keyCode||e.which]}(e);"up"==t?n({type:"lookUp",normal:[],value:.1,event:e}):"down"==t?n({type:"lookDown",normal:[],value:.1,event:e}):"left"==t?n({type:"lookLeft",normal:[],value:.1,event:e}):"right"==t&&n({type:"lookRight",normal:[],value:.1,event:e})}));var o=null,i=function(i){if(null==o)n({type:"hover",normal:[],value:0,event:i});else{var u=e(t,i),l=[u.x-o.x,u.y-o.y],a=[l[1],l[0],0];if(0==a[0]&&0==a[1])return;n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y)),event:i}),o=u}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(e){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(e){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e,t){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[],event:t})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta,e)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail,e)}),!1)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).VISLite_viewHandler=n();
+var e,n;e=this,n=function(){"use strict";var e=function(e,n){var t=e.getBoundingClientRect();return{x:n.clientX-t.left,y:n.clientY-t.top}};return function(n){var t=document.getElementsByTagName("body")[0];t.addEventListener("keydown",(function(e){var t=function(e){return{37:"left",38:"up",39:"right",40:"down"}[e.keyCode||e.which]}(e);"up"==t?n({type:"lookUp",normal:[],value:.1,event:e}):"down"==t?n({type:"lookDown",normal:[],value:.1,event:e}):"left"==t?n({type:"lookLeft",normal:[],value:.1,event:e}):"right"==t&&n({type:"lookRight",normal:[],value:.1,event:e})}));var o=null,i=function(i){if(null==o)n({type:"hover",normal:[],value:0,event:i});else{var u=e(t,i),l=[u.x-o.x,u.y-o.y],a=[l[1],l[0],0];if(0==a[0]&&0==a[1])return;n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y)),event:i}),o=u}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e,t){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[],event:t})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta,e)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail,e)}),!1)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).VISLite_viewHandler=n();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "0.6.0-alpha.0",
+  "version": "0.6.0-alpha.2",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",
@@ -9,7 +9,8 @@
   "scripts": {
     "dev": "webpack serve --config ./build/webpack.config.js",
     "build": "devby --delete ./lib && node ./build/pkg.js",
-    "test": "karma start ./build/karma.config.js"
+    "test": "karma start ./build/karma.config.js",
+    "lint": "eslint src/**/*.{js,ts} --fix"
   },
   "miniprogram": ".",
   "repository": {
@@ -49,7 +50,10 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.0",
     "@types/jasmine": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "devby": "^0.4.6",
+    "eslint": "^8.56.0",
     "karma": "^6.3.10",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^4.0.1",

package/src/Canvas.ts

@@ -12,14 +12,15 @@ class Canvas extends OralCanvas implements CanvasType {
         }
 
         option = mergeOption(option, {
-            region: true
+            region: true,
+            willReadFrequently: false
         })
 
-        let width = el.clientWidth, height = el.clientHeight
+        const width = el.clientWidth, height = el.clientHeight
 
         let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
 
-        let _el = el as any
+        const _el = el as any
 
         // 如果已经初始化过了
         if (_el._vislite_canvas_) {
@@ -42,7 +43,7 @@ class Canvas extends OralCanvas implements CanvasType {
         }
 
         // 设置画布大小
-        for (let canvas of [ViewCanvas, RegionCanvas]) {
+        for (const canvas of [ViewCanvas, RegionCanvas]) {
 
             if (canvas) {
                 canvas.style.width = width + "px"
@@ -53,7 +54,9 @@ class Canvas extends OralCanvas implements CanvasType {
             }
         }
 
-        super(ViewCanvas, RegionCanvas)
+        super(ViewCanvas, RegionCanvas, {
+            willReadFrequently: option.willReadFrequently
+        })
 
         this.__canvas = ViewCanvas
     }

package/src/Eoap.ts

@@ -1,20 +1,20 @@
 import type MapType from '../types/Map'
 
 // 围绕X轴旋转
-let rotateX = function (deg: number, x: number, y: number, z: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
+const rotateX = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
     return [x, y * cos - z * sin, y * sin + z * cos]
 }
 
 // 围绕Y轴旋转
-let rotateY = function (deg: number, x: number, y: number, z: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
+const rotateY = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
     return [z * sin + x * cos, y, z * cos - x * sin]
 }
 
 // 围绕Z轴旋转
-let rotateZ = function (deg: number, x: number, y: number, z: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
+const rotateZ = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
     return [x * cos - y * sin, x * sin + y * cos, z]
 }
 

package/src/Geometry.ts

@@ -21,7 +21,7 @@ class Geometry implements GeometryType {
     }
 
     config(option: GeometryOptionType) {
-        for (let key in option) {
+        for (const key in option) {
             this.__option[key] = option[key]
         }
         return this
@@ -31,14 +31,14 @@ class Geometry implements GeometryType {
     cylinder(x: number, y: number, z: number, radius: number, height: number): Array<GeometryResultType> {
 
         // 求解出需要切割多少份比较合理
-        let num = splitNum(this.__option.precision, radius)
+        const num = splitNum(this.__option.precision, radius)
         return this.prism(x, y, z, radius, height, num)
     }
 
     // 棱柱体
     prism(x: number, y: number, z: number, radius: number, height: number, num: number): Array<GeometryResultType> {
 
-        let result = [{
+        const result = [{
             points: [],
             length: 0,
             method: "TRIANGLES" as const
@@ -61,10 +61,10 @@ class Geometry implements GeometryType {
     sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
 
         // 求解出需要切割多少份比较合理
-        let num = splitNum(this.__option.precision, radius)
+        const num = splitNum(this.__option.precision, radius)
 
         // 然后一瓣瓣的绘制
-        let result = [{
+        const result = [{
             points: [],
             length: 0,
             method: "TRIANGLES" as const

package/src/Matrix4/index.ts

@@ -2,8 +2,8 @@ import type Matrix4Type from '../../types/Matrix4'
 
 // 两个4x4矩阵相乘
 // 或矩阵和齐次坐标相乘
-let _multiply = function (matrix4: number[], param: number[]) {
-    let newParam: number[] = []
+const _multiply = function (matrix4: number[], param: number[]) {
+    const newParam: number[] = []
     for (let i = 0; i < 4; i++)
         for (let j = 0; j < param.length / 4; j++)
             newParam[j * 4 + i] =
@@ -21,7 +21,7 @@ import _transform from './transform'
 
 // 列主序存储的4x4矩阵
 
-let __initMatrix4 = [
+const __initMatrix4 = [
     1, 0, 0, 0,
     0, 1, 0, 0,
     0, 0, 1, 0,
@@ -51,7 +51,7 @@ class Matrix4 implements Matrix4Type {
 
     // 旋转
     rotate(deg: number, a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
-        let matrix4s = _transform(a1, b1, c1, a2, b2, c2)
+        const matrix4s = _transform(a1, b1, c1, a2, b2, c2)
         this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4)
         return this
     }

package/src/Matrix4/move.ts

@@ -2,7 +2,7 @@
  * 在(a,b,c)方向位移d
  */
 export default function (d: number, a: number, b: number, c: number = 0) {
-    let sqrt = Math.sqrt(a * a + b * b + c * c)
+    const sqrt = Math.sqrt(a * a + b * b + c * c)
     return [
         1, 0, 0, 0,
         0, 1, 0, 0,

package/src/Matrix4/rotate.ts

@@ -4,7 +4,7 @@
  * 旋转角度单位采用弧度制
  */
 export default function (deg: number) {
-    let sin = Math.sin(deg),
+    const sin = Math.sin(deg),
         cos = Math.cos(deg)
     return [
         cos, sin, 0, 0,

package/src/Matrix4/transform.ts

@@ -28,7 +28,7 @@ export default function (a1: number, b1: number, c1: number, a2: number, b2: num
 
         if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
 
-        let sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
+        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
             cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
             sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
 

package/src/Mercator.ts

@@ -7,12 +7,12 @@ class Mercator implements MapType {
     use: (λ: number, φ: number) => [number, number, number]
     constructor(scale: number = 7, center: number[] = [107, 36]) {
 
-        let perimeter = 100 * scale * Math.PI // 半周长
+        const perimeter = 100 * scale * Math.PI // 半周长
 
-        let help = perimeter / 180
+        const help = perimeter / 180
 
-        let cx = help * center[0]  // 中心横坐标
-        let cy = -1 * help * center[1] // 中心纵坐标
+        const cx = help * center[0]  // 中心横坐标
+        const cy = -1 * help * center[1] // 中心纵坐标
 
         this.use = (λ: number, φ: number) => {
             return [

package/src/SVG.ts

@@ -8,9 +8,9 @@ class SVG extends OralSVG implements SVGType {
             throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
         }
 
-        let width = el.clientWidth, height = el.clientHeight
+        const width = el.clientWidth, height = el.clientHeight
 
-        let ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
+        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
         el.appendChild(ViewSVG)
 
         ViewSVG.setAttribute("width", width + "")

package/src/WebGL.ts

@@ -14,11 +14,11 @@ class WebGL extends OralWebGL implements WebGLType {
             region: true
         })
 
-        let width = el.clientWidth, height = el.clientHeight
+        const width = el.clientWidth, height = el.clientHeight
 
         let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
 
-        let _el = el as any
+        const _el = el as any
 
         // 如果已经初始化过了
         if (_el._vislite_canvas_) {
@@ -49,7 +49,7 @@ class WebGL extends OralWebGL implements WebGLType {
         }
 
         // 设置画布大小
-        for (let canvas of [ViewCanvas, RegionCanvas]) {
+        for (const canvas of [ViewCanvas, RegionCanvas]) {
 
             if (canvas) {
                 canvas.style.width = width + "px"

package/src/animation.ts

@@ -1,7 +1,7 @@
 //当前正在运动的动画的tick函数堆栈
 let $timers: any[] = []
 //唯一定时器的定时间隔
-let $interval = 13
+const $interval = 13
 //定时器ID
 let $timerId: any
 
@@ -15,13 +15,13 @@ let $timerId: any
  */
 export default function (doback: (deep: number) => void, duration: number = 400, callback: (deep: number) => void = () => { }): Function {
 
-    let clock = {
+    const clock = {
         //把tick函数推入堆栈
         "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
             if (!tick) {
                 throw new Error('Tick is required!')
             }
-            let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
+            const id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
             $timers.push({
                 "id": id,
                 "createTime": new Date(),
@@ -42,8 +42,8 @@ export default function (doback: (deep: number) => void, duration: number = 400,
 
         //被定时器调用，遍历timers堆栈
         "tick": function () {
-            let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number,
-                timers: any[] = $timers
+            let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number
+            const timers: any[] = $timers
             $timers = []
             $timers.length = 0
             for (flag = 0; flag < timers.length; flag++) {
@@ -79,7 +79,7 @@ export default function (doback: (deep: number) => void, duration: number = 400,
         }
     }
 
-    let id = clock.timer(function (deep: number) {
+    const id = clock.timer(function (deep: number) {
         //其中deep为0-1，表示改变的程度
         doback(deep)
     }, duration, callback)

package/src/common/assemble.ts

@@ -1,5 +1,5 @@
 export default function (begin: number, end: number, step: number, count: number) {
-    let val = []
+    const val = []
     for (let index = 0; index < count; index++) val[index] = begin
 
     // 非常类似进制数，每次调用都+1

package/src/common/canvas/arc.ts

@@ -1,8 +1,8 @@
 
 // 点（x,y）围绕中心（cx,cy）旋转deg度
 
-let rotate = function (cx: number, cy: number, deg: number, x: number, y: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
+const rotate = function (cx: number, cy: number, deg: number, x: number, y: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
     return [
         +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
         +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
@@ -20,7 +20,8 @@ export default function (beginA: number, rotateA: number, cx: number, cy: number
         rotateA *= -1
     }
 
-    let temp: number[] = [], p: number[]
+    const temp: number[] = []
+    let p: number[]
 
     // 内部
     p = rotate(0, 0, beginA, r1, 0)

package/src/common/canvas/config.ts

@@ -3,7 +3,7 @@ import type CanvasConfigType from "../../../types/CanvasConfig"
 import arc from "./arc"
 
 // 文字统一设置方法
-export let initText = function (
+export const initText = function (
   painter: CanvasRenderingContext2D,
   config: CanvasConfigType,
   x: number,
@@ -25,7 +25,7 @@ export let initText = function (
 }
 
 // 画弧统一设置方法
-export let initArc = function (
+export const initArc = function (
   painter: CanvasRenderingContext2D,
   config: CanvasConfigType,
   cx: number,
@@ -36,7 +36,7 @@ export let initArc = function (
   deg: number
 ) {
   if (r1 > r2) {
-    let temp = r1
+    const temp = r1
     r1 = r2
     r2 = temp
   }
@@ -132,7 +132,7 @@ export let initArc = function (
 }
 
 // 画圆统一设置方法
-export let initCircle = function (
+export const initCircle = function (
   painter: CanvasRenderingContext2D,
   cx: number,
   cy: number,
@@ -145,7 +145,7 @@ export let initCircle = function (
 };
 
 // 画矩形统一设置方法
-export let initRect = function (
+export const initRect = function (
   painter: CanvasRenderingContext2D,
   x: number,
   y: number,

package/src/common/canvas/gradient.ts

@@ -1,7 +1,7 @@
 // 线性渐变
-export let linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
-    let gradient = painter.createLinearGradient(x0, y0, x1, y1)
-    let enhanceGradient = {
+export const linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
+    const gradient = painter.createLinearGradient(x0, y0, x1, y1)
+    const enhanceGradient = {
         "value": function () {
             return gradient
         },
@@ -14,9 +14,9 @@ export let linearGradient = function (painter: CanvasRenderingContext2D, x0: num
 }
 
 // 环形渐变
-export let radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
-    let gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
-    let enhanceGradient = {
+export const radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
+    const gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
+    const enhanceGradient = {
         "value": function () {
             return gradient
         },

package/src/common/canvas/index.ts

@@ -1,4 +1,5 @@
 import type CanvasConfigType from "../../../types/CanvasConfig"
+import type CanvasOptsType from '../../../types/CanvasOpts'
 
 import PainterRender from "./painter"
 import assemble from "../assemble"
@@ -6,7 +7,7 @@ import { linearGradient, radialGradient } from "./gradient"
 import { initText } from './config'
 
 // 属性名向下兼容
-let oldAttrName = {
+const oldAttrName = {
     "font-size": "fontSize",
     "font-family": "fontFamily",
     "font-weight": "fontWeight",
@@ -24,10 +25,10 @@ class Canvas extends PainterRender {
     // 2023年7月6日 于南京
     private __regionAssemble = assemble(0, 255, 10, 3)
 
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement) {
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement, opts: CanvasOptsType = {}) {
         super(
             ViewCanvas,
-            {},
+            opts,
             RegionCanvas ? new PainterRender(RegionCanvas, {
                 willReadFrequently: true,
             }) : null, true
@@ -37,8 +38,8 @@ class Canvas extends PainterRender {
     }
 
     config(configs: CanvasConfigType) {
-        for (let key in configs) {
-            let _key = oldAttrName[key] || key
+        for (const key in configs) {
+            const _key = oldAttrName[key] || key
             this.useConfig(_key, configs[key])
         }
 
@@ -56,7 +57,7 @@ class Canvas extends PainterRender {
         if (this.__region) {
             if (regionName) {
                 if (this.__regionList[regionName] == void 0) {
-                    let tempColor = this.__regionAssemble()
+                    const tempColor = this.__regionAssemble()
                     this.__regionList[regionName] =
                         "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
                 }
@@ -73,19 +74,19 @@ class Canvas extends PainterRender {
 
     // 获取当前事件触发的区域名称
     getRegion(x: number, y: number): Promise<string> {
-        return new Promise((resolve, reject) => {
-            let imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
+        return new Promise((resolve) => {
+            const imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
                 data: [0, 0, 0, 0]
             }
 
             // 获取点击点的颜色
             let currentRGBA = imgData.data
 
-            let doit = () => {
+            const doit = () => {
                 if (this.__region) {
 
                     // 查找当前点击的区域
-                    for (let key in this.__regionList) {
+                    for (const key in this.__regionList) {
                         if (
                             "rgb(" +
                             currentRGBA[0] +
@@ -126,7 +127,7 @@ class Canvas extends PainterRender {
         initText(this.painter, this.__specialConfig, 0, 0, 0)
 
         // 虽然我们限制了只可以输入字符串，可是不代表所有环境都可以保证，为了确保方法不失效，强转成字符串
-        let width = this.painter.measureText(text + "").width
+        const width = this.painter.measureText(text + "").width
 
         this.painter.restore()
 
@@ -158,7 +159,7 @@ class Canvas extends PainterRender {
 
     // 获取指定位置颜色
     getColor(x: number, y: number) {
-        let currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
+        const currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
         return (
             "rgba(" +
             currentRGBA[0] +

package/src/common/canvas/painter.ts

@@ -1,18 +1,9 @@
 import type { arcCapType } from '../../../types/painterConfig'
+import type CanvasOptsType from '../../../types/CanvasOpts'
 
 import { initText, initArc, initCircle, initRect } from './config'
 import texts from './texts'
 
-interface OptsType {
-
-    // https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
-    willReadFrequently?: boolean
-
-    alpha?: boolean
-
-    storage?: string
-}
-
 class Painter {
 
     painter: CanvasRenderingContext2D
@@ -72,7 +63,7 @@ class Painter {
 
     }
 
-    constructor(canvas: HTMLCanvasElement, opts: OptsType = {}, region?: Painter, isPainter = false) {
+    constructor(canvas: HTMLCanvasElement, opts: CanvasOptsType = {}, region?: Painter, isPainter = false) {
         this.painter = canvas.getContext("2d", opts) as CanvasRenderingContext2D
         this.__region = region
         this.__isPainter = isPainter
@@ -175,7 +166,7 @@ class Painter {
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
 
-        let height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
+        const height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
             this.painter.fillText(content, 0, top)
         })
 
@@ -191,7 +182,7 @@ class Painter {
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
 
-        let height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
+        const height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
             this.painter.strokeText(content, 0, top)
         })
 
@@ -207,7 +198,7 @@ class Painter {
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
 
-        let height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
+        const height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
             this.painter.fillText(content, 0, top)
             this.painter.strokeText(content, 0, top)
         })

package/src/common/geometry/prism-horizontal.ts

@@ -6,7 +6,7 @@ export default function (normal: boolean, x: number, y: number, z: number, radiu
 
     let beginX: number, beginZ: number
     if (num == 4) {
-        let temp = radius / 1.414
+        const temp = radius / 1.414
         beginX = x + temp
         beginZ = z + temp
 
@@ -15,7 +15,9 @@ export default function (normal: boolean, x: number, y: number, z: number, radiu
         beginZ = z
     }
 
-    let point = [beginX, beginZ], points = [], deg = Math.PI * 2 / num
+    let point = [beginX, beginZ]
+    const points = []
+    const deg = Math.PI * 2 / num
     for (let i = 0; i < num; i++) {
 
         points.push(x, y, z)