vislite 1.7.0-alpha.0 → 1.7.0

package/src/SVG.ts

@@ -1,56 +1,56 @@
-import type SVGType from '../types/SVG'
-
-import OralSVG from './common/svg/index'
-
-class SVG extends OralSVG implements SVGType {
-    private __el: HTMLElement
-    constructor(el: HTMLElement | null) {
-        if (!el) {
-            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
-        el.appendChild(ViewSVG)
-
-        ViewSVG.setAttribute("width", width + "")
-        ViewSVG.setAttribute("height", height + "")
-
-        ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
-
-        super(ViewSVG)
-
-        this.__el = el
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            const width = this.__el.clientWidth, height = this.__el.clientHeight
-
-            const img = document.createElement('img');
-
-            img.setAttribute('width', width + "");
-            img.setAttribute('height', height + "");
-            const base64_svg = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" + this.__svg.innerHTML.replace(/"/g, "'") + "</svg>";
-            img.setAttribute('src', base64_svg);
-
-            setTimeout(function () {
-
-                // 准备画布
-                const canvas = document.createElement('canvas');
-                canvas.setAttribute('width', width + "");
-                canvas.setAttribute('height', height + "");
-
-                const painter = canvas.getContext('2d');
-
-                // 绘制截图
-                if (painter) painter.drawImage(img, 0, 0, width, height);
-
-                resolve(canvas.toDataURL());
-            }, 100);
-        })
-    }
-}
-
+import type SVGType from '../types/SVG'
+
+import OralSVG from './common/svg/index'
+
+class SVG extends OralSVG implements SVGType {
+    private __el: HTMLElement
+    constructor(el: HTMLElement | null) {
+        if (!el) {
+            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
+        el.appendChild(ViewSVG)
+
+        ViewSVG.setAttribute("width", width + "")
+        ViewSVG.setAttribute("height", height + "")
+
+        ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
+
+        super(ViewSVG)
+
+        this.__el = el
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            const width = this.__el.clientWidth, height = this.__el.clientHeight
+
+            const img = document.createElement('img');
+
+            img.setAttribute('width', width + "");
+            img.setAttribute('height', height + "");
+            const base64_svg = "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" + this.__svg.innerHTML.replace(/"/g, "'") + "</svg>";
+            img.setAttribute('src', base64_svg);
+
+            setTimeout(function () {
+
+                // 准备画布
+                const canvas = document.createElement('canvas');
+                canvas.setAttribute('width', width + "");
+                canvas.setAttribute('height', height + "");
+
+                const painter = canvas.getContext('2d');
+
+                // 绘制截图
+                if (painter) painter.drawImage(img, 0, 0, width, height);
+
+                resolve(canvas.toDataURL());
+            }, 100);
+        })
+    }
+}
+
 export default SVG

package/src/common/assemble.ts

@@ -1,23 +1,23 @@
-export default function (begin: number, end: number, step: number, count: number) {
-    const val: Array<number> = []
-    for (let index = 0; index < count; index++) val[index] = begin
-
-    // 非常类似进制数，每次调用都+1
-    return function () {
-        for (let i = 0; i < count; i++) {
-
-            // 如果当前位可以进1
-            if (val[i] + step < end) {
-                val[i] = +(val[i] + step).toFixed(7)
-                break
-            }
-
-            // 如果当前位不可以，那当前位归0，尝试下一位
-            else if (i < count - 1) {
-                val[i] = begin
-            }
-        }
-
-        return val
-    }
+export default function (begin: number, end: number, step: number, count: number) {
+    const val: Array<number> = []
+    for (let index = 0; index < count; index++) val[index] = begin
+
+    // 非常类似进制数，每次调用都+1
+    return function () {
+        for (let i = 0; i < count; i++) {
+
+            // 如果当前位可以进1
+            if (val[i] + step < end) {
+                val[i] = +(val[i] + step).toFixed(7)
+                break
+            }
+
+            // 如果当前位不可以，那当前位归0，尝试下一位
+            else if (i < count - 1) {
+                val[i] = begin
+            }
+        }
+
+        return val
+    }
 }

package/src/common/canvas/arc.ts

@@ -1,51 +1,51 @@
-
-// 点（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
-    )
-
-}
+
+// 点（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,176 +1,176 @@
-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,
-    config: CanvasConfigType,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-) {
-    painter.beginPath()
-
-    const rectRadius: Array<number> = [];
-    if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
-        for (let index = 0; index < 4; index++) {
-            rectRadius.push(...config.rectRadius)
-        }
-    }
-
-    if (rectRadius.length >= 4) {
-        painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5)
-        painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0)
-        painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5)
-        painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI)
-        painter.closePath()
-    } else {
-        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,
+    config: CanvasConfigType,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+) {
+    painter.beginPath()
+
+    const rectRadius: Array<number> = [];
+    if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
+        for (let index = 0; index < 4; index++) {
+            rectRadius.push(...config.rectRadius)
+        }
+    }
+
+    if (rectRadius.length >= 4) {
+        painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5)
+        painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0)
+        painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5)
+        painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI)
+        painter.closePath()
+    } else {
+        painter.rect(x, y, width, height)
+    }
+
+    return painter
+}