vislite 0.6.0 → 0.7.0

package/src/common/canvas/config.ts

@@ -1,158 +1,158 @@
-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
-}
+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 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
-}
+// 线性渐变
+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

@@ -25,13 +25,13 @@ class Canvas extends PainterRender {
     // 2023年7月6日 于南京
     private __regionAssemble = assemble(0, 255, 10, 3)
 
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement, opts: CanvasOptsType = {}) {
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}) {
         super(
             ViewCanvas,
             opts,
             RegionCanvas ? new PainterRender(RegionCanvas, {
                 willReadFrequently: true,
-            }) : null, true
+            }) : undefined, true
         )
 
         this.setRegion("")

package/src/common/canvas/painter.ts

@@ -33,6 +33,8 @@ class Painter {
 
         // 圆弧结束端闭合方式，和上一个类似
         "arcEndCap": <arcCapType>'butt'
+    } as {
+        [key: string]: any
     }
 
     private __initConfig = {

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

@@ -1,35 +1,35 @@
-import rotate from '../../rotate'
-
-// 棱柱水平部分
-
-export default function (normal: boolean, x: number, y: number, z: number, radius: number, num: number, d: number) {
-
-    let beginX: number, beginZ: number
-    if (num == 4) {
-        const temp = radius / 1.414
-        beginX = x + temp
-        beginZ = z + temp
-
-    } else {
-        beginX = x + radius
-        beginZ = z
-    }
-
-    let point = [beginX, beginZ]
-    const points = []
-    const deg = Math.PI * 2 / num
-    for (let i = 0; i < num; i++) {
-
-        points.push(x, y, z)
-        if (normal) points.push(0, d, 0)
-
-        points.push(point[0], y, point[1])
-        if (normal) points.push(0, d, 0)
-
-        point = rotate(x, z, deg * (i + 1), beginX, beginZ)
-        points.push(point[0], y, point[1])
-        if (normal) points.push(0, d, 0)
-    }
-
-    return points
-}
+import rotate from '../../rotate'
+
+// 棱柱水平部分
+
+export default function (normal: boolean, x: number, y: number, z: number, radius: number, num: number, d: number) {
+
+    let beginX: number, beginZ: number
+    if (num == 4) {
+        const temp = radius / 1.414
+        beginX = x + temp
+        beginZ = z + temp
+
+    } else {
+        beginX = x + radius
+        beginZ = z
+    }
+
+    let point = [beginX, beginZ]
+    const points = []
+    const deg = Math.PI * 2 / num
+    for (let i = 0; i < num; i++) {
+
+        points.push(x, y, z)
+        if (normal) points.push(0, d, 0)
+
+        points.push(point[0], y, point[1])
+        if (normal) points.push(0, d, 0)
+
+        point = rotate(x, z, deg * (i + 1), beginX, beginZ)
+        points.push(point[0], y, point[1])
+        if (normal) points.push(0, d, 0)
+    }
+
+    return points
+}

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

@@ -14,7 +14,7 @@ export default function (normal: boolean, x: number, y: number, z: number, radiu
 
     const deg = Math.PI * 2 / num, degHalf = Math.PI * 2 / (num * 2)
 
-    let endPosition: [number, number], normalPosition = []
+    let endPosition: [number, number], normalPosition: [number, number, number] | [] = []
     for (let i = 0; i < num; i++) {
 
         endPosition = rotate(x, z, deg, ...beginPosition)

package/src/common/geometry/sphere-fragment.ts

@@ -1,40 +1,40 @@
-import rotate from '../../rotate'
-
-// 球体中的一瓣子
-
-export default function (normal: boolean, cx: number, cy: number, cz: number, radius: number, num: number, index: number) {
-    const points = [cx, cy + radius, cz], deg = Math.PI * 2 / num
-    let point: [number, number]
-
-    if (normal) points.push(0, radius, 0)
-
-    const copy2 = () => {
-        points.push(...points.slice(points.length - (normal ? 12 : 6)))
-    }
-
-    for (let i = 1; i < num * 0.5; i++) {
-        point = rotate(cx, cy, deg * i, cx, cy + radius)
-
-        if (i > 1) copy2()
-
-        // 第一个点
-        const point1 = rotate(cx, cz, deg * index, point[0], cz)
-        points.push(point1[0], point[1], point1[1])
-
-        if (normal) points.push(point1[0] - cx, point[1] - cy, point1[1] - cz)
-
-        if (i > 1) copy2()
-
-        // 下一个点
-        const point2 = rotate(cx, cz, deg * (index + 1), point[0], cz)
-        points.push(point2[0], point[1], point2[1])
-
-        if (normal) points.push(point2[0] - cx, point2[1] - cy, point2[1] - cz)
-    }
-    copy2()
-    points.push(cx, cy - radius, cz)
-
-    if (normal) points.push(0, - radius, 0)
-
-    return points
-}
+import rotate from '../../rotate'
+
+// 球体中的一瓣子
+
+export default function (normal: boolean, cx: number, cy: number, cz: number, radius: number, num: number, index: number) {
+    const points = [cx, cy + radius, cz], deg = Math.PI * 2 / num
+    let point: [number, number]
+
+    if (normal) points.push(0, radius, 0)
+
+    const copy2 = () => {
+        points.push(...points.slice(points.length - (normal ? 12 : 6)))
+    }
+
+    for (let i = 1; i < num * 0.5; i++) {
+        point = rotate(cx, cy, deg * i, cx, cy + radius)
+
+        if (i > 1) copy2()
+
+        // 第一个点
+        const point1 = rotate(cx, cz, deg * index, point[0], cz)
+        points.push(point1[0], point[1], point1[1])
+
+        if (normal) points.push(point1[0] - cx, point[1] - cy, point1[1] - cz)
+
+        if (i > 1) copy2()
+
+        // 下一个点
+        const point2 = rotate(cx, cz, deg * (index + 1), point[0], cz)
+        points.push(point2[0], point[1], point2[1])
+
+        if (normal) points.push(point2[0] - cx, point2[1] - cy, point2[1] - cz)
+    }
+    copy2()
+    points.push(cx, cy - radius, cz)
+
+    if (normal) points.push(0, - radius, 0)
+
+    return points
+}

package/src/common/geometry/tool/circle.ts

@@ -1,12 +1,12 @@
-// 计算切割份数
-export const splitNum = function (precision: number, radius: number) {
-
-    // 根据切割弧度得出切割块数目
-    const num = Math.ceil(Math.PI * 2 /
-
-        // 为了满足最小精度而得出的切割弧度
-        Math.asin(precision / radius) * 2)
-
-    return (isNaN(num) || num < 12) ? 12 : num
-
+// 计算切割份数
+export const splitNum = function (precision: number, radius: number) {
+
+    // 根据切割弧度得出切割块数目
+    const num = Math.ceil(Math.PI * 2 /
+
+        // 为了满足最小精度而得出的切割弧度
+        Math.asin(precision / radius) * 2)
+
+    return (isNaN(num) || num < 12) ? 12 : num
+
 }

package/src/common/geometry/tool/rotateLine.ts

@@ -0,0 +1,36 @@
+export default function (x: number, y: number, z: number, x2: number, y2: number, z2: number) {
+    return (x0: number, y0: number, z0: number, isNormal: boolean) => {
+        let sin: number, cos: number, temp: Array<number>
+
+        // 第一步：归零化
+        let _x0 = x0 - (isNormal ? 0 : x), _y0 = y0 - (isNormal ? 0 : y), _z0 = z0 - (isNormal ? 0 : z)  // 法向量起点本来就是原点
+        const _x2 = x2 - x, _y2 = y2 - y, _z2 = z2 - z
+
+        // 第二步：围绕OZ轴旋转
+
+        const __d = Math.sqrt(_x2 * _x2 + _z2 * _z2)
+        cos = _x2 / __d
+        sin = _z2 / __d
+
+        const _x2N = _z2 * sin + _x2 * cos
+
+        const d = Math.sqrt(_y2 * _y2 + _x2N * _x2N)
+        cos = _y2 / d
+        sin = _x2N / d
+
+        temp = [_y0, _x0]
+        _y0 = temp[0] * cos - temp[1] * sin
+        _x0 = temp[0] * sin + temp[1] * cos
+
+        // 第三步：围绕0Y轴旋转
+        cos = _x2 / __d
+        sin = _z2 / __d
+
+        temp = [_x0, _z0]
+        _x0 = temp[0] * cos - temp[1] * sin
+        _z0 = temp[0] * sin + temp[1] * cos
+
+        // 第四步：去零化（直接返回）
+        return [_x0 + (isNormal ? 0 : x), _y0 + (isNormal ? 0 : y), _z0 + (isNormal ? 0 : z)]
+    }
+}

package/src/common/mergeOption.ts

@@ -1,7 +1,7 @@
-export default function (option: any, defaultOption: any) {
-    for (const key in option) {
-        defaultOption[key] = option[key]
-    }
-
-    return defaultOption
+export default function (option: any, defaultOption: any) {
+    for (const key in option) {
+        defaultOption[key] = option[key]
+    }
+
+    return defaultOption
 }

package/src/common/setStyle.ts

@@ -1,6 +1,6 @@
 // 修改样式
 export default function (el: HTMLElement | SVGElement, styles: any) {
     for (const key in styles) {
-        el.style[key] = styles[key]
+        el.style[key as any] = styles[key]
     }
 }