vislite 1.3.0 → 1.4.0

package/src/Matrix4/index.ts

@@ -1,85 +1,85 @@
-import type Matrix4Type from '../../types/Matrix4'
-
-// 两个4x4矩阵相乘
-// 或矩阵和齐次坐标相乘
-const _multiply = function (matrix4: number[], param: number[]) {
-    const newParam: number[] = []
-    for (let i = 0; i < 4; i++)
-        for (let j = 0; j < param.length / 4; j++)
-            newParam[j * 4 + i] =
-                matrix4[i] * param[j * 4] +
-                matrix4[i + 4] * param[j * 4 + 1] +
-                matrix4[i + 8] * param[j * 4 + 2] +
-                matrix4[i + 12] * param[j * 4 + 3]
-    return newParam
-}
-
-import _move from './move'
-import _rotate from './rotate'
-import _scale from './scale'
-import _transform from './transform'
-
-// 列主序存储的4x4矩阵
-
-const __initMatrix4 = [
-    1, 0, 0, 0,
-    0, 1, 0, 0,
-    0, 0, 1, 0,
-    0, 0, 0, 1
-]
-
-class Matrix4 implements Matrix4Type {
-    readonly name: string = 'Matrix4'
-
-    private __matrix4: number[]
-
-    constructor(initMatrix4: number[] = __initMatrix4) {
-        this.__matrix4 = initMatrix4
-    }
-
-    // 设置内置矩阵
-    setValue(initMatrix4: number[] = __initMatrix4) {
-        this.__matrix4 = initMatrix4
-        return this
-    }
-
-    // 移动
-    move(dis: number, a: number, b: number, c: number = 0) {
-        this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4)
-        return this
-    }
-
-    // 旋转
-    rotate(deg: number, a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
-        const matrix4s = _transform(a1, b1, c1, a2, b2, c2)
-        this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4)
-        return this
-    }
-
-    // 缩放
-    scale(xTimes: number, yTimes: number, zTimes: number, cx: number = 0, cy: number = 0, cz: number = 0) {
-        this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4)
-        return this
-    }
-
-    // 乘法
-    // 可以传入一个矩阵(matrix4,flag)
-    multiply(newMatrix4: number[], flag: boolean = false) {
-        this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4)
-        return this
-    }
-
-    // 对一个坐标应用变换
-    // 齐次坐标(x,y,z,w)
-    use(x: number, y: number, z: number = 0, w: number = 1): [number, number, number, number] {
-        // w为0表示点位于无穷远处，忽略
-        return _multiply(this.__matrix4, [x, y, z, w]) as [number, number, number, number]
-    }
-
-    // 矩阵的值
-    value() {
-        return this.__matrix4
-    }
-}
-
+import type Matrix4Type from '../../types/Matrix4'
+
+// 两个4x4矩阵相乘
+// 或矩阵和齐次坐标相乘
+const _multiply = function (matrix4: number[], param: number[]) {
+    const newParam: number[] = []
+    for (let i = 0; i < 4; i++)
+        for (let j = 0; j < param.length / 4; j++)
+            newParam[j * 4 + i] =
+                matrix4[i] * param[j * 4] +
+                matrix4[i + 4] * param[j * 4 + 1] +
+                matrix4[i + 8] * param[j * 4 + 2] +
+                matrix4[i + 12] * param[j * 4 + 3]
+    return newParam
+}
+
+import _move from './move'
+import _rotate from './rotate'
+import _scale from './scale'
+import _transform from './transform'
+
+// 列主序存储的4x4矩阵
+
+const __initMatrix4 = [
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1
+]
+
+class Matrix4 implements Matrix4Type {
+    readonly name: string = 'Matrix4'
+
+    private __matrix4: number[]
+
+    constructor(initMatrix4: number[] = __initMatrix4) {
+        this.__matrix4 = initMatrix4
+    }
+
+    // 设置内置矩阵
+    setValue(initMatrix4: number[] = __initMatrix4) {
+        this.__matrix4 = initMatrix4
+        return this
+    }
+
+    // 移动
+    move(dis: number, a: number, b: number, c: number = 0) {
+        this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4)
+        return this
+    }
+
+    // 旋转
+    rotate(deg: number, a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
+        const matrix4s = _transform(a1, b1, c1, a2, b2, c2)
+        this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4)
+        return this
+    }
+
+    // 缩放
+    scale(xTimes: number, yTimes: number, zTimes: number, cx: number = 0, cy: number = 0, cz: number = 0) {
+        this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4)
+        return this
+    }
+
+    // 乘法
+    // 可以传入一个矩阵(matrix4,flag)
+    multiply(newMatrix4: number[], flag: boolean = false) {
+        this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4)
+        return this
+    }
+
+    // 对一个坐标应用变换
+    // 齐次坐标(x,y,z,w)
+    use(x: number, y: number, z: number = 0, w: number = 1): [number, number, number, number] {
+        // w为0表示点位于无穷远处，忽略
+        return _multiply(this.__matrix4, [x, y, z, w]) as [number, number, number, number]
+    }
+
+    // 矩阵的值
+    value() {
+        return this.__matrix4
+    }
+}
+
 export default Matrix4

package/src/Matrix4/move.ts

@@ -1,12 +1,12 @@
-/**
- * 在(a,b,c)方向位移d
- */
-export default function (d: number, a: number, b: number, c: number = 0) {
-    const sqrt = Math.sqrt(a * a + b * b + c * c)
-    return [
-        1, 0, 0, 0,
-        0, 1, 0, 0,
-        0, 0, 1, 0,
-        a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
-    ]
-}
+/**
+ * 在(a,b,c)方向位移d
+ */
+export default function (d: number, a: number, b: number, c: number = 0) {
+    const sqrt = Math.sqrt(a * a + b * b + c * c)
+    return [
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
+    ]
+}

package/src/Matrix4/rotate.ts

@@ -1,15 +1,15 @@
-/**
- * 围绕OZ轴旋转
- * 其它的旋转可以借助transform实现
- * 旋转角度单位采用弧度制
- */
-export default function (deg: number) {
-    const sin = Math.sin(deg),
-        cos = Math.cos(deg)
-    return [
-        cos, sin, 0, 0,
-        -sin, cos, 0, 0,
-        0, 0, 1, 0,
-        0, 0, 0, 1
-    ]
-}
+/**
+ * 围绕OZ轴旋转
+ * 其它的旋转可以借助transform实现
+ * 旋转角度单位采用弧度制
+ */
+export default function (deg: number) {
+    const sin = Math.sin(deg),
+        cos = Math.cos(deg)
+    return [
+        cos, sin, 0, 0,
+        -sin, cos, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    ]
+}

package/src/Matrix4/scale.ts

@@ -1,11 +1,11 @@
-/**
- * 围绕圆心x、y和z分别缩放xTimes, yTimes和zTimes倍
- */
-export default function (xTimes: number, yTimes: number, zTimes: number, cx: number = 0, cy: number = 0, cz: number = 0) {
-    return [
-        xTimes, 0, 0, 0,
-        0, yTimes, 0, 0,
-        0, 0, zTimes, 0,
-        cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
-    ]
-}
+/**
+ * 围绕圆心x、y和z分别缩放xTimes, yTimes和zTimes倍
+ */
+export default function (xTimes: number, yTimes: number, zTimes: number, cx: number = 0, cy: number = 0, cz: number = 0) {
+    return [
+        xTimes, 0, 0, 0,
+        0, yTimes, 0, 0,
+        0, 0, zTimes, 0,
+        cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
+    ]
+}

package/src/Matrix4/transform.ts

@@ -1,64 +1,64 @@
-/**
- * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
- * 计算出两个变换矩阵
- * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
- */
-export default function (a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
-
-    if (typeof a1 === 'number' && typeof b1 === 'number') {
-
-        // 如果设置两个点
-        // 表示二维上围绕某个点旋转
-        if (typeof c1 !== 'number') {
-            c1 = 0
-            a2 = a1
-            b2 = b1
-            c2 = 1
-        }
-        // 只设置三个点(设置不足六个点都认为只设置了三个点)
-        // 表示围绕从原点出发的射线旋转
-        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-            a2 = a1
-            b2 = b1
-            c2 = c1
-            a1 = 0
-            b1 = 0
-            c1 = 0
-        }
-
-        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
-
-        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
-            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
-            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
-
-            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
-            c = c2 - c1,
-
-            sqrt2 = Math.sqrt(b * b + c * c),
-            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
-            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
-
-        return [
-
-            // 任意射线变成OZ轴变换矩阵
-            [
-                cos1, cos2 * sin1, sin1 * sin2, 0,
-                -sin1, cos1 * cos2, cos1 * sin2, 0,
-                0, -sin2, cos2, 0,
-                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-            ],
-
-            // OZ轴变回原来的射线的变换矩阵
-            [
-                cos1, -sin1, 0, 0,
-                cos2 * sin1, cos2 * cos1, -sin2, 0,
-                sin1 * sin2, cos1 * sin2, cos2, 0,
-                a1, b1, c1, 1
-            ]
-
-        ]
-    } else {
-        throw new Error('a1 and b1 is required!')
-    }
-}
+/**
+ * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
+ * 计算出两个变换矩阵
+ * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
+ */
+export default function (a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number) {
+
+    if (typeof a1 === 'number' && typeof b1 === 'number') {
+
+        // 如果设置两个点
+        // 表示二维上围绕某个点旋转
+        if (typeof c1 !== 'number') {
+            c1 = 0
+            a2 = a1
+            b2 = b1
+            c2 = 1
+        }
+        // 只设置三个点(设置不足六个点都认为只设置了三个点)
+        // 表示围绕从原点出发的射线旋转
+        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
+            a2 = a1
+            b2 = b1
+            c2 = c1
+            a1 = 0
+            b1 = 0
+            c1 = 0
+        }
+
+        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
+
+        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
+            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
+            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
+
+            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
+            c = c2 - c1,
+
+            sqrt2 = Math.sqrt(b * b + c * c),
+            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
+            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
+
+        return [
+
+            // 任意射线变成OZ轴变换矩阵
+            [
+                cos1, cos2 * sin1, sin1 * sin2, 0,
+                -sin1, cos1 * cos2, cos1 * sin2, 0,
+                0, -sin2, cos2, 0,
+                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
+            ],
+
+            // OZ轴变回原来的射线的变换矩阵
+            [
+                cos1, -sin1, 0, 0,
+                cos2 * sin1, cos2 * cos1, -sin2, 0,
+                sin1 * sin2, cos1 * sin2, cos2, 0,
+                a1, b1, c1, 1
+            ]
+
+        ]
+    } else {
+        throw new Error('a1 and b1 is required!')
+    }
+}

package/src/Mercator.ts

@@ -1,28 +1,28 @@
-import type MapType from '../types/Map'
-
-/* 墨卡托投影 */
-class Mercator implements MapType {
-    readonly name: string = 'Mercator'
-
-    use: (λ: number, φ: number) => [number, number, number]
-    constructor(scale: number = 7, center: number[] = [107, 36]) {
-
-        const perimeter = 100 * scale * Math.PI // 半周长
-
-        const help = perimeter / 180
-
-        const cx = help * center[0]  // 中心横坐标
-        const cy = -1 * help * center[1] // 中心纵坐标
-
-        this.use = (λ: number, φ: number) => {
-            return [
-                (help * λ - cx) * 0.8,
-                -1 * help * φ - cy,
-                0
-            ]
-        }
-    }
-
-}
-
+import type MapType from '../types/Map'
+
+/* 墨卡托投影 */
+class Mercator implements MapType {
+    readonly name: string = 'Mercator'
+
+    use: (λ: number, φ: number) => [number, number, number]
+    constructor(scale: number = 7, center: number[] = [107, 36]) {
+
+        const perimeter = 100 * scale * Math.PI // 半周长
+
+        const help = perimeter / 180
+
+        const cx = help * center[0]  // 中心横坐标
+        const cy = -1 * help * center[1] // 中心纵坐标
+
+        this.use = (λ: number, φ: number) => {
+            return [
+                (help * λ - cx) * 0.8,
+                -1 * help * φ - cy,
+                0
+            ]
+        }
+    }
+
+}
+
 export default Mercator

package/src/SVG.ts

@@ -3,6 +3,7 @@ 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.")
@@ -19,6 +20,36 @@ class SVG extends OralSVG implements SVGType {
         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
+
+            let img = document.createElement('img');
+
+            img.setAttribute('width', width + "");
+            img.setAttribute('height', height + "");
+            let 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 () {
+
+                // 准备画布
+                let canvas = document.createElement('canvas');
+                canvas.setAttribute('width', width + "");
+                canvas.setAttribute('height', height + "");
+
+                let painter = canvas.getContext('2d');
+
+                // 绘制截图
+                if (painter) painter.drawImage(img, 0, 0, width, height);
+
+                resolve(canvas.toDataURL());
+            }, 100);
+        })
     }
 }
 

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
+    )
+
+}