vislite 1.2.0-alpha.7 → 1.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "1.2.0-alpha.7",
+  "version": "1.2.0-beta.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",

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/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"
+    }
+}

package/src/common/svg/index.ts

@@ -1,39 +1,16 @@
 import type { default as SVGConfigType, svgElType, svgBoardType } from "../../../types/SVGConfig"
-import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
 
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
 import { toNode, setAttribute, getAttribute, full, fill, stroke } from "./tool"
 import rotate from "../../rotate"
 import { linearGradient, radialGradient } from "./gradient"
+import defaultFactory from "./default"
 
 class SVG {
     readonly name: string = "SVG"
 
     // 用于记录配置
-    private __config = {
-
-        // 颜色
-        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"
-    }
+    private __config = defaultFactory()
 
     // 作用的节点
     private __useEl: SVGElement
@@ -53,12 +30,17 @@ class SVG {
             return this.__config[params]
         } else {
             for (const key in params) {
-                this.__config[key] = params[key]
+                (this.__config as any)[key] = (params as any)[key]
             }
         }
         return this
     }
 
+    reset() {
+        this.config(defaultFactory())
+        return this
+    }
+
     /**
      * 基础方法
      * ---------------------------------

package/types/Canvas.d.ts

@@ -7,6 +7,11 @@ export default interface CanvasType {
      */
     config(configs: CanvasConfigType): this
 
+    /**
+     * 重置
+     */
+    reset(): this
+
     /**
      * 绘制一个实心文字
      * @param text 需要绘制的文字

package/types/SVG.d.ts

@@ -8,6 +8,11 @@ export default interface SVGType {
      */
     config(configs: SVGConfigType): this
 
+    /**
+    * 重置
+    */
+    reset(): this
+
     /**
      * 标记应用节点
      */