vislite 1.2.0-alpha.7 → 1.2.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/default.ts

@@ -0,0 +1,62 @@
+import type { arcCapType } from '../../../types/painterConfig'
+
+export default function (type?: string) {
+
+    let special = {
+        // 文字大小
+        "fontSize": 16,
+
+        // 字体
+        "fontFamily": "sans-serif",
+
+        // 字重
+        "fontWeight": 400,
+
+        // 字类型
+        "fontStyle": "normal",
+
+        // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
+        "arcStartCap": <arcCapType>'butt',
+
+        // 圆弧结束端闭合方式，和上一个类似
+        "arcEndCap": <arcCapType>'butt'
+    }
+
+    let init = {
+        // 填充色或图案
+        "fillStyle": 'black',
+
+        // 轮廓色或图案
+        "strokeStyle": 'black',
+
+        // 线条宽度(单位px，下同)
+        "lineWidth": 1,
+
+        // 线的端点类型，（"butt"平直边缘、"round"半圆和"square"矩形）
+        "lineCap": "butt",
+
+        // 线的拐角连接方式，（"miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆）
+        "lineJoin": "miter",
+
+        // 设置线条虚线，应该是一个数组[number,...]
+        "lineDash": [],
+
+        // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
+        "textAlign": 'left',
+
+        // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
+        "textBaseline": 'middle',
+
+        // 阴影的模糊系数，默认0，也就是无阴影
+        "shadowBlur": 0,
+
+        // 阴影的颜色
+        "shadowColor": "black"
+    }
+
+    if (type == 'special') return special
+    else if (type == 'init') return init
+    else return {
+        ...special, ...init
+    }
+}

package/src/common/canvas/index.ts

@@ -5,6 +5,7 @@ import PainterRender from "./painter"
 import assemble from "../assemble"
 import { linearGradient, radialGradient, conicGradient } from "./gradient"
 import { initText } from './config'
+import defaultFactory from "./default"
 
 class Canvas extends PainterRender {
     readonly name: string = "Canvas"
@@ -33,12 +34,17 @@ class Canvas extends PainterRender {
 
     config(configs: CanvasConfigType) {
         for (const key in configs) {
-            this.useConfig(key, configs[key])
+            this.useConfig(key, (configs as any)[key])
         }
 
         return this
     }
 
+    reset() {
+        this.config(defaultFactory() as CanvasConfigType)
+        return this
+    }
+
     // 是否绘制的内容只需要进行区域记录
     onlyRegion(flag: boolean) {
         this.__onlyRegion = flag
@@ -54,14 +60,14 @@ class Canvas extends PainterRender {
     setRegion(regionName: string | number) {
         if (this.__region) {
             if (regionName) {
-                if (this.__regionList[regionName] == void 0) {
-                    const tempColor = this.__regionAssemble()
-                    this.__regionList[regionName] =
+                if ((this.__regionList as any)[regionName] == void 0) {
+                    const tempColor = this.__regionAssemble();
+                    (this.__regionList as any)[regionName] =
                         "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
                 }
 
-                this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                    this.__region.useConfig("strokeStyle", this.__regionList[regionName])
+                this.__region.useConfig("fillStyle", (this.__regionList as any)[regionName]) &&
+                    this.__region.useConfig("strokeStyle", (this.__regionList as any)[regionName])
             } else {
                 this.__region.useConfig("fillStyle", "#000000") &&
                     this.__region.useConfig("strokeStyle", "#000000")
@@ -93,7 +99,7 @@ class Canvas extends PainterRender {
                             "," +
                             currentRGBA[2] +
                             ")" ==
-                            this.__regionList[key]
+                            (this.__regionList as any)[key]
                         ) {
                             resolve(key)
                             break

package/src/common/canvas/painter.ts

@@ -1,8 +1,8 @@
-import type { arcCapType } from '../../../types/painterConfig'
 import type CanvasOptsType from '../../../types/CanvasOpts'
 
 import { initText, initArc, initCircle, initRect } from './config'
 import texts from './texts'
+import defaultFactory from "./default"
 
 class Painter {
 
@@ -16,62 +16,11 @@ class Painter {
 
     // 用于记录配置
     // 因为部分配置的设置比较特殊，只先记录意图
-    __specialConfig = {
-
-        // 文字大小
-        "fontSize": 16,
-
-        // 字体
-        "fontFamily": "sans-serif",
-
-        // 字重
-        "fontWeight": 400,
-
-        // 字类型
-        "fontStyle": "normal",
-
-        // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
-        "arcStartCap": <arcCapType>'butt',
-
-        // 圆弧结束端闭合方式，和上一个类似
-        "arcEndCap": <arcCapType>'butt'
-    } as {
+    __specialConfig = defaultFactory("special") as {
         [key: string]: any
     }
 
-    private __initConfig = {
-
-        // 填充色或图案
-        "fillStyle": 'black',
-
-        // 轮廓色或图案
-        "strokeStyle": 'black',
-
-        // 线条宽度(单位px，下同)
-        "lineWidth": 1,
-
-        // 线的端点类型，（"butt"平直边缘、"round"半圆和"square"矩形）
-        "lineCap": "butt",
-
-        // 线的拐角连接方式，（"miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆）
-        "lineJoin": "miter",
-
-        // 设置线条虚线，应该是一个数组[number,...]
-        "lineDash": [],
-
-        // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
-        "textAlign": 'left',
-
-        // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
-        "textBaseline": 'middle',
-
-        // 阴影的模糊系数，默认0，也就是无阴影
-        "shadowBlur": 0,
-
-        // 阴影的颜色
-        "shadowColor": "black"
-
-    }
+    private __initConfig = defaultFactory("init")
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     constructor(canvas: HTMLCanvasElement, opts: CanvasOptsType = {}, region?: Painter, isPainter = false, scaleSize = 1) {

package/src/common/canvas/texts.ts

@@ -1,19 +1,19 @@
-export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
-
-    let lineNumber = 0, content = ""
-    for (let i = 0; i < contents.length; i++) {
-        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
-            lineNumber += 1
-            doback(content, (lineNumber - 0.5) * height)
-
-            content = contents[i]
-        } else if (i == contents.length - 1) {
-            lineNumber += 1
-            doback(content + contents[i], (lineNumber - 0.5) * height)
-        } else {
-            content += contents[i]
-        }
-    }
-
-    return lineNumber * height
+export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
+
+    let lineNumber = 0, content = ""
+    for (let i = 0; i < contents.length; i++) {
+        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
+            lineNumber += 1
+            doback(content, (lineNumber - 0.5) * height)
+
+            content = contents[i]
+        } else if (i == contents.length - 1) {
+            lineNumber += 1
+            doback(content + contents[i], (lineNumber - 0.5) * height)
+        } else {
+            content += contents[i]
+        }
+    }
+
+    return lineNumber * height
 }

package/src/common/option.ts

@@ -1,30 +1,30 @@
-import { isPlainObject } from "./type"
-
-// 初始化配置
-export function initOption(setOption: any, defaultOption: any) {
-    for (const key in setOption) {
-        defaultOption[key] = setOption[key]
-    }
-
-    return defaultOption
-}
-
-// 合并配置
-export function mergeOption(oldOption: any, newOption: any) {
-    (function doit(oldOption, newOption) {
-
-        for (const key in newOption) {
-            const value = newOption[key]
-
-            if (isPlainObject(value)) {
-                if (!oldOption[key]) oldOption[key] = {}
-
-                doit(oldOption[key], newOption[key])
-            } else {
-                oldOption[key] = value
-            }
-
-        }
-
-    })(oldOption, newOption)
+import { isPlainObject } from "./type"
+
+// 初始化配置
+export function initOption(setOption: any, defaultOption: any) {
+    for (const key in setOption) {
+        defaultOption[key] = setOption[key]
+    }
+
+    return defaultOption
+}
+
+// 合并配置
+export function mergeOption(oldOption: any, newOption: any) {
+    (function doit(oldOption, newOption) {
+
+        for (const key in newOption) {
+            const value = newOption[key]
+
+            if (isPlainObject(value)) {
+                if (!oldOption[key]) oldOption[key] = {}
+
+                doit(oldOption[key], newOption[key])
+            } else {
+                oldOption[key] = value
+            }
+
+        }
+
+    })(oldOption, newOption)
 }

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 as any] = styles[key]
-    }
+// 修改样式
+export default function (el: HTMLElement | SVGElement, styles: any) {
+    for (const key in styles) {
+        el.style[key as any] = styles[key]
+    }
 }

package/src/common/svg/default.ts

@@ -0,0 +1,27 @@
+import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
+
+export default function () {
+    return {
+        // 颜色
+        fillStyle: "#000",
+        strokeStyle: "#000",
+
+        // 文字对齐方式
+        textAlign: <textAlignType>"left",
+        textBaseline: <textBaselineType>"middle",
+
+        // 文字
+        "fontSize": 16,
+        "fontFamily": "sans-serif",
+
+        // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
+        "arcStartCap": <arcCapType>"butt",
+        "arcEndCap": <arcCapType>"butt",
+
+        // 线条
+        lineDash: [],
+        lineWidth: 1,
+        lineCap: <lineCapType>"butt",
+        lineJoin: <lineJoinType>"miter"
+    }
+}