vislite 1.6.0-alpha.1 → 1.6.1

package/package/index.ts

@@ -1,85 +1,85 @@
-import Cardinal from "./Cardinal/index"
-import Hermite from "./Hermite/index"
-
-import Matrix4 from "./Matrix4/index"
-import rotate from "./rotate/index"
-import move from "./move/index"
-import scale from "./scale/index"
-
-import getLoopColors from "./getLoopColors/index"
-import animation from "./animation/index"
-import ruler from "./ruler/index"
-
-import SVG from "./SVG/index"
-import Canvas from "./Canvas/index"
-import RawCanvas from "../src/common/canvas/index"
-
-import getWebGLContext from "./getWebGLContext/index"
-import Shader from "./Shader/index"
-import Texture from "./Texture/index"
-import Buffer from "./Buffer/index"
-
-import Eoap from "./Eoap/index"
-import Mercator from "./Mercator/index"
-
-import throttle from "./throttle/index"
-
-import MapCoordinate from "./MapCoordinate/index"
-
-import TreeLayout from "./TreeLayout/index"
-import PieLayout from "./PieLayout/index"
-import BarLayout from "./BarLayout/index"
-
-import initOption from "./initOption/index"
-import mergeOption from "./mergeOption/index"
-
-import assemble from "./assemble/index"
-
-export default {
-
-    // 插值
-    Cardinal,
-    Hermite,
-
-    // 变换
-    Matrix4,
-    rotate,
-    move,
-    scale,
-
-    // 工具
-    getLoopColors,
-    animation,
-    ruler,
-
-    // 画笔
-    SVG,
-    Canvas,
-    RawCanvas,
-
-    // WebGL
-    getWebGLContext,
-    Shader,
-    Texture,
-    Buffer,
-
-    // 投影
-    Eoap,
-    Mercator,
-
-    // 辅助
-    throttle,
-    assemble,
-
-    // 坐标系
-    MapCoordinate,
-
-    // 布局
-    TreeLayout,
-    PieLayout,
-    BarLayout,
-
-    // 配置项
-    initOption,
-    mergeOption
+import Cardinal from "./Cardinal/index"
+import Hermite from "./Hermite/index"
+
+import Matrix4 from "./Matrix4/index"
+import rotate from "./rotate/index"
+import move from "./move/index"
+import scale from "./scale/index"
+
+import getLoopColors from "./getLoopColors/index"
+import animation from "./animation/index"
+import ruler from "./ruler/index"
+
+import SVG from "./SVG/index"
+import Canvas from "./Canvas/index"
+import RawCanvas from "../src/common/canvas/index"
+
+import getWebGLContext from "./getWebGLContext/index"
+import Shader from "./Shader/index"
+import Texture from "./Texture/index"
+import Buffer from "./Buffer/index"
+
+import Eoap from "./Eoap/index"
+import Mercator from "./Mercator/index"
+
+import throttle from "./throttle/index"
+
+import MapCoordinate from "./MapCoordinate/index"
+
+import TreeLayout from "./TreeLayout/index"
+import PieLayout from "./PieLayout/index"
+import BarLayout from "./BarLayout/index"
+
+import initOption from "./initOption/index"
+import mergeOption from "./mergeOption/index"
+
+import assemble from "./assemble/index"
+
+export default {
+
+    // 插值
+    Cardinal,
+    Hermite,
+
+    // 变换
+    Matrix4,
+    rotate,
+    move,
+    scale,
+
+    // 工具
+    getLoopColors,
+    animation,
+    ruler,
+
+    // 画笔
+    SVG,
+    Canvas,
+    RawCanvas,
+
+    // WebGL
+    getWebGLContext,
+    Shader,
+    Texture,
+    Buffer,
+
+    // 投影
+    Eoap,
+    Mercator,
+
+    // 辅助
+    throttle,
+    assemble,
+
+    // 坐标系
+    MapCoordinate,
+
+    // 布局
+    TreeLayout,
+    PieLayout,
+    BarLayout,
+
+    // 配置项
+    initOption,
+    mergeOption
 }

package/package/initOption/index.ts

@@ -1,3 +1,3 @@
-import { initOption } from "../../src/common/option"
-
+import { initOption } from "../../src/common/option"
+
 export default initOption

package/package/mergeOption/index.ts

@@ -1,3 +1,3 @@
-import { mergeOption } from "../../src/common/option"
-
+import { mergeOption } from "../../src/common/option"
+
 export default mergeOption

package/package/move/index.ts

@@ -1,3 +1,3 @@
-import move from "../../src/move"
-
+import move from "../../src/move"
+
 export default move

package/package/rotate/index.ts

@@ -1,3 +1,3 @@
-import rotate from "../../src/rotate"
-
+import rotate from "../../src/rotate"
+
 export default rotate

package/package/ruler/index.ts

@@ -1,3 +1,3 @@
-import ruler from "../../src/ruler"
-
+import ruler from "../../src/ruler"
+
 export default ruler

package/package/scale/index.ts

@@ -1,3 +1,3 @@
-import scale from "../../src/scale"
-
+import scale from "../../src/scale"
+
 export default scale

package/package/throttle/index.ts

@@ -1,3 +1,3 @@
-import { throttle } from "oipage/web/throttle/index"
-
+import { throttle } from "oipage/web/throttle/index"
+
 export default throttle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "1.6.0-alpha.1",
+  "version": "1.6.1",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",
@@ -70,6 +70,6 @@
     "webpack-dev-server": "^4.7.4"
   },
   "dependencies": {
-    "oipage": "^1.3.0"
+    "oipage": "^1.3.1"
   }
 }

package/src/Eoap.ts

@@ -1,66 +1,66 @@
-import type MapType from '../types/Map'
-
-// 围绕X轴旋转
-const rotateX = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x, y * cos - z * sin, y * sin + z * cos]
-}
-
-// 围绕Y轴旋转
-const rotateY = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [z * sin + x * cos, y, z * cos - x * sin]
-}
-
-// 围绕Z轴旋转
-const rotateZ = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x * cos - y * sin, x * sin + y * cos, z]
-}
-
-/* 等角斜方位投影 */
-class Eoap implements MapType {
-    readonly name: string = 'Eoap'
-
-    private __scale: number // 缩放比例
-    private __center: number[] // 投影中心经纬度
-
-    constructor(scale: number = 7, center: number[] = [107, 36]) {
-        this.__scale = scale
-        this.__center = center
-    }
-
-    use(λ: number, φ: number): [number, number, number] {
-        /**
-         * 通过旋转的方法
-         * 先旋转出点的位置
-         * 然后根据把地心到旋转中心的这条射线变成OZ这条射线的变换应用到初始化点上
-         * 这样求的的点的x,y就是最终结果
-         *
-         *  计算过程：
-         *  1.初始化点的位置是p（x,0,0）,其中x的值是地球半径除以缩放倍速
-         *  2.根据点的纬度对p进行旋转，旋转后得到的p的坐标纬度就是目标纬度
-         *  3.同样的对此刻的p进行经度的旋转，这样就获取了极点作为中心点的坐标
-         *  4.接着想象一下为了让旋转中心移动到极点需要进行旋转的经纬度是多少，记为lo和la
-         *  5.然后再对p进行经度度旋转lo获得新的p
-         *  6.然后再对p进行纬度旋转la获得新的p
-         *  7.旋转结束
-         *
-         * 特别注意：第5和第6步顺序一定不可以调换，原因来自经纬度定义上
-         * 【除了经度为0的位置，不然纬度的旋转会改变原来的经度值，反过来不会】
-         *
-         */
-        let p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0)
-        p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2])
-        p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2])
-        p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2])
-
-        return [
-            -p[0], // 加负号是因为浏览器坐标和地图不一样
-            p[1],
-            p[2]
-        ]
-    }
-}
-
-export default Eoap
+import type MapType from '../types/Map'
+
+// 围绕X轴旋转
+const rotateX = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x, y * cos - z * sin, y * sin + z * cos]
+}
+
+// 围绕Y轴旋转
+const rotateY = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [z * sin + x * cos, y, z * cos - x * sin]
+}
+
+// 围绕Z轴旋转
+const rotateZ = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x * cos - y * sin, x * sin + y * cos, z]
+}
+
+/* 等角斜方位投影 */
+class Eoap implements MapType {
+    readonly name: string = 'Eoap'
+
+    private __scale: number // 缩放比例
+    private __center: number[] // 投影中心经纬度
+
+    constructor(scale: number = 7, center: number[] = [107, 36]) {
+        this.__scale = scale
+        this.__center = center
+    }
+
+    use(λ: number, φ: number): [number, number, number] {
+        /**
+         * 通过旋转的方法
+         * 先旋转出点的位置
+         * 然后根据把地心到旋转中心的这条射线变成OZ这条射线的变换应用到初始化点上
+         * 这样求的的点的x,y就是最终结果
+         *
+         *  计算过程：
+         *  1.初始化点的位置是p（x,0,0）,其中x的值是地球半径除以缩放倍速
+         *  2.根据点的纬度对p进行旋转，旋转后得到的p的坐标纬度就是目标纬度
+         *  3.同样的对此刻的p进行经度的旋转，这样就获取了极点作为中心点的坐标
+         *  4.接着想象一下为了让旋转中心移动到极点需要进行旋转的经纬度是多少，记为lo和la
+         *  5.然后再对p进行经度度旋转lo获得新的p
+         *  6.然后再对p进行纬度旋转la获得新的p
+         *  7.旋转结束
+         *
+         * 特别注意：第5和第6步顺序一定不可以调换，原因来自经纬度定义上
+         * 【除了经度为0的位置，不然纬度的旋转会改变原来的经度值，反过来不会】
+         *
+         */
+        let p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0)
+        p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2])
+        p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2])
+        p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2])
+
+        return [
+            -p[0], // 加负号是因为浏览器坐标和地图不一样
+            p[1],
+            p[2]
+        ]
+    }
+}
+
+export default Eoap

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