vislite 0.6.0-alpha.0 → 0.6.0

package/src/common/canvas/arc.ts

@@ -1,50 +1,51 @@
-
-// 点（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)
-    return [
-        +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
-        +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
-    ]
-}
-
-// r1和r2，内半径和外半径
-// beginA起点弧度，rotateA旋转弧度式
-
-export default function (beginA: number, rotateA: number, cx: number, cy: number, r1: number, r2: number, doback: Function) {
-
-    // 保证逆时针也是可以的
-    if (rotateA < 0) {
-        beginA += rotateA
-        rotateA *= -1
-    }
-
-    let temp: number[] = [], p: number[]
-
-    // 内部
-    p = rotate(0, 0, beginA, r1, 0)
-    temp[0] = p[0]
-    temp[1] = p[1]
-    p = rotate(0, 0, rotateA, p[0], p[1])
-    temp[2] = p[0]
-    temp[3] = p[1]
-
-    // 外部
-    p = rotate(0, 0, beginA, r2, 0)
-    temp[4] = p[0]
-    temp[5] = p[1]
-    p = rotate(0, 0, rotateA, p[0], p[1])
-    temp[6] = p[0]
-    temp[7] = p[1]
-
-    doback(
-        beginA, beginA + rotateA,
-        temp[0] + cx, temp[1] + cy,
-        temp[4] + cx, temp[5] + cy,
-        temp[2] + cx, temp[3] + cy,
-        temp[6] + cx, temp[7] + cy,
-        (r2 - r1) * 0.5
-    )
-
-}
+
+// 点（x,y）围绕中心（cx,cy）旋转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)
+    ]
+}
+
+// r1和r2，内半径和外半径
+// beginA起点弧度，rotateA旋转弧度式
+
+export default function (beginA: number, rotateA: number, cx: number, cy: number, r1: number, r2: number, doback: Function) {
+
+    // 保证逆时针也是可以的
+    if (rotateA < 0) {
+        beginA += rotateA
+        rotateA *= -1
+    }
+
+    const temp: number[] = []
+    let p: number[]
+
+    // 内部
+    p = rotate(0, 0, beginA, r1, 0)
+    temp[0] = p[0]
+    temp[1] = p[1]
+    p = rotate(0, 0, rotateA, p[0], p[1])
+    temp[2] = p[0]
+    temp[3] = p[1]
+
+    // 外部
+    p = rotate(0, 0, beginA, r2, 0)
+    temp[4] = p[0]
+    temp[5] = p[1]
+    p = rotate(0, 0, rotateA, p[0], p[1])
+    temp[6] = p[0]
+    temp[7] = p[1]
+
+    doback(
+        beginA, beginA + rotateA,
+        temp[0] + cx, temp[1] + cy,
+        temp[4] + cx, temp[5] + cy,
+        temp[2] + cx, temp[3] + cy,
+        temp[6] + cx, temp[7] + cy,
+        (r2 - r1) * 0.5
+    )
+
+}

package/src/common/canvas/config.ts

@@ -1,158 +1,158 @@
-import type CanvasConfigType from "../../../types/CanvasConfig"
-
-import arc from "./arc"
-
-// 文字统一设置方法
-export let initText = function (
-  painter: CanvasRenderingContext2D,
-  config: CanvasConfigType,
-  x: number,
-  y: number,
-  deg: number
-) {
-  painter.beginPath();
-  painter.translate(x, y);
-  painter.rotate(deg);
-  painter.font =
-    config.fontStyle +
-    " " +
-    config.fontWeight +
-    " " +
-    config.fontSize +
-    "px " +
-    config.fontFamily;
-  return painter
-}
-
-// 画弧统一设置方法
-export let initArc = function (
-  painter: CanvasRenderingContext2D,
-  config: CanvasConfigType,
-  cx: number,
-  cy: number,
-  r1: number,
-  r2: number,
-  beginDeg: number,
-  deg: number
-) {
-  if (r1 > r2) {
-    let temp = r1
-    r1 = r2
-    r2 = temp
-  }
-
-  beginDeg = beginDeg % (Math.PI * 2)
-
-  // 当|deg|>=2π的时候都认为是一个圆环
-  // 为什么不取2π比较，是怕部分浏览器浮点不精确
-  if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-    deg = Math.PI * 2
-  } else {
-    deg = deg % (Math.PI * 2)
-  }
-
-  arc(
-    beginDeg,
-    deg,
-    cx,
-    cy,
-    r1,
-    r2,
-    function (
-      beginA: number,
-      endA: number,
-      begInnerX: number,
-      begInnerY: number,
-      begOuterX: number,
-      begOuterY: number,
-      endInnerX: number,
-      endInnerY: number,
-      endOuterX: number,
-      endOuterY: number,
-      r: number
-    ) {
-      if (r < 0) r = -r
-      painter.beginPath()
-      painter.moveTo(begInnerX, begInnerY)
-      painter.arc(
-        // (圆心x，圆心y，半径，开始角度，结束角度，true逆时针/false顺时针)
-        cx,
-        cy,
-        r1,
-        beginA,
-        endA,
-        false
-      )
-      // 结尾
-      if (config.arcEndCap == "round")
-        painter.arc(
-          (endInnerX + endOuterX) * 0.5,
-          (endInnerY + endOuterY) * 0.5,
-          r,
-          endA - Math.PI,
-          endA,
-          true
-        )
-      else if (config.arcEndCap == "-round")
-        painter.arc(
-          (endInnerX + endOuterX) * 0.5,
-          (endInnerY + endOuterY) * 0.5,
-          r,
-          endA - Math.PI,
-          endA,
-          false
-        )
-      else painter.lineTo(endOuterX, endOuterY)
-
-      painter.arc(cx, cy, r2, endA, beginA, true)
-      // 开头
-      if (config.arcStartCap == "round")
-        painter.arc(
-          (begInnerX + begOuterX) * 0.5,
-          (begInnerY + begOuterY) * 0.5,
-          r,
-          beginA,
-          beginA - Math.PI,
-          true
-        )
-      else if (config.arcStartCap == "-round")
-        painter.arc(
-          (begInnerX + begOuterX) * 0.5,
-          (begInnerY + begOuterY) * 0.5,
-          r,
-          beginA,
-          beginA - Math.PI,
-          false
-        )
-      else painter.lineTo(begInnerX, begInnerY)
-    }
-  )
-  if (config.arcStartCap == "butt") painter.closePath()
-  return painter
-}
-
-// 画圆统一设置方法
-export let initCircle = function (
-  painter: CanvasRenderingContext2D,
-  cx: number,
-  cy: number,
-  r: number
-) {
-  painter.beginPath()
-  painter.moveTo(cx + r, cy)
-  painter.arc(cx, cy, r, 0, Math.PI * 2)
-  return painter
-};
-
-// 画矩形统一设置方法
-export let initRect = function (
-  painter: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number
-) {
-  painter.beginPath()
-  painter.rect(x, y, width, height)
-  return painter
-}
+import type CanvasConfigType from "../../../types/CanvasConfig"
+
+import arc from "./arc"
+
+// 文字统一设置方法
+export const initText = function (
+  painter: CanvasRenderingContext2D,
+  config: CanvasConfigType,
+  x: number,
+  y: number,
+  deg: number
+) {
+  painter.beginPath();
+  painter.translate(x, y);
+  painter.rotate(deg);
+  painter.font =
+    config.fontStyle +
+    " " +
+    config.fontWeight +
+    " " +
+    config.fontSize +
+    "px " +
+    config.fontFamily;
+  return painter
+}
+
+// 画弧统一设置方法
+export const initArc = function (
+  painter: CanvasRenderingContext2D,
+  config: CanvasConfigType,
+  cx: number,
+  cy: number,
+  r1: number,
+  r2: number,
+  beginDeg: number,
+  deg: number
+) {
+  if (r1 > r2) {
+    const temp = r1
+    r1 = r2
+    r2 = temp
+  }
+
+  beginDeg = beginDeg % (Math.PI * 2)
+
+  // 当|deg|>=2π的时候都认为是一个圆环
+  // 为什么不取2π比较，是怕部分浏览器浮点不精确
+  if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+    deg = Math.PI * 2
+  } else {
+    deg = deg % (Math.PI * 2)
+  }
+
+  arc(
+    beginDeg,
+    deg,
+    cx,
+    cy,
+    r1,
+    r2,
+    function (
+      beginA: number,
+      endA: number,
+      begInnerX: number,
+      begInnerY: number,
+      begOuterX: number,
+      begOuterY: number,
+      endInnerX: number,
+      endInnerY: number,
+      endOuterX: number,
+      endOuterY: number,
+      r: number
+    ) {
+      if (r < 0) r = -r
+      painter.beginPath()
+      painter.moveTo(begInnerX, begInnerY)
+      painter.arc(
+        // (圆心x，圆心y，半径，开始角度，结束角度，true逆时针/false顺时针)
+        cx,
+        cy,
+        r1,
+        beginA,
+        endA,
+        false
+      )
+      // 结尾
+      if (config.arcEndCap == "round")
+        painter.arc(
+          (endInnerX + endOuterX) * 0.5,
+          (endInnerY + endOuterY) * 0.5,
+          r,
+          endA - Math.PI,
+          endA,
+          true
+        )
+      else if (config.arcEndCap == "-round")
+        painter.arc(
+          (endInnerX + endOuterX) * 0.5,
+          (endInnerY + endOuterY) * 0.5,
+          r,
+          endA - Math.PI,
+          endA,
+          false
+        )
+      else painter.lineTo(endOuterX, endOuterY)
+
+      painter.arc(cx, cy, r2, endA, beginA, true)
+      // 开头
+      if (config.arcStartCap == "round")
+        painter.arc(
+          (begInnerX + begOuterX) * 0.5,
+          (begInnerY + begOuterY) * 0.5,
+          r,
+          beginA,
+          beginA - Math.PI,
+          true
+        )
+      else if (config.arcStartCap == "-round")
+        painter.arc(
+          (begInnerX + begOuterX) * 0.5,
+          (begInnerY + begOuterY) * 0.5,
+          r,
+          beginA,
+          beginA - Math.PI,
+          false
+        )
+      else painter.lineTo(begInnerX, begInnerY)
+    }
+  )
+  if (config.arcStartCap == "butt") painter.closePath()
+  return painter
+}
+
+// 画圆统一设置方法
+export const initCircle = function (
+  painter: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  r: number
+) {
+  painter.beginPath()
+  painter.moveTo(cx + r, cy)
+  painter.arc(cx, cy, r, 0, Math.PI * 2)
+  return painter
+};
+
+// 画矩形统一设置方法
+export const initRect = function (
+  painter: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) {
+  painter.beginPath()
+  painter.rect(x, y, width, height)
+  return painter
+}

package/src/common/canvas/gradient.ts

@@ -1,29 +1,29 @@
-// 线性渐变
-export let linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
-    let gradient = painter.createLinearGradient(x0, y0, x1, y1)
-    let enhanceGradient = {
-        "value": function () {
-            return gradient
-        },
-        "setColor": function (stop: number, color: string) {
-            gradient.addColorStop(stop, color)
-            return enhanceGradient
-        }
-    };
-    return enhanceGradient
-}
-
-// 环形渐变
-export let radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
-    let gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
-    let enhanceGradient = {
-        "value": function () {
-            return gradient
-        },
-        "setColor": function (stop: number, color: string) {
-            gradient.addColorStop(stop, color)
-            return enhanceGradient
-        }
-    }
-    return 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
+        },
+        "setColor": function (stop: number, color: string) {
+            gradient.addColorStop(stop, color)
+            return enhanceGradient
+        }
+    };
+    return 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
+        },
+        "setColor": function (stop: number, color: string) {
+            gradient.addColorStop(stop, color)
+            return enhanceGradient
+        }
+    }
+    return enhanceGradient
+}

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] +