vislite 0.5.0 → 0.5.2-alpha.1

package/package.json

@@ -1,66 +1,66 @@
-{
-  "name": "vislite",
-  "version": "0.5.0",
-  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
-  "main": "./lib/index.umd.min.js",
-  "typings": "./types/index.d.ts",
-  "unpkg": "./lib/index.umd.min.js",
-  "sideEffects": false,
-  "scripts": {
-    "dev": "webpack serve --config ./build/webpack.config.js",
-    "build": "devby --delete ./lib && node ./build/pkg.js",
-    "test": "karma start ./build/karma.config.js"
-  },
-  "miniprogram": ".",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/oi-contrib/VISLite.git"
-  },
-  "keywords": [
-    "svg",
-    "webgl",
-    "typescript",
-    "canvas",
-    "vue",
-    "uniapp",
-    "miniprogram",
-    "image2d",
-    "image3d",
-    "oi-contrib",
-    "vislite",
-    "d3",
-    "zxl20070701",
-    "three",
-    "echarts",
-    "datav",
-    "webgpu",
-    "layout",
-    "algorithm"
-  ],
-  "author": {
-    "name": "zxl20070701",
-    "url": "https://zxl20070701.github.io/notebook/home.html"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/oi-contrib/VISLite/issues"
-  },
-  "homepage": "https://oi-contrib.github.io/VISLite",
-  "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.0",
-    "@types/jasmine": "^4.3.1",
-    "devby": "^0.4.6",
-    "karma": "^6.3.10",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-jasmine": "^4.0.1",
-    "karma-webpack": "^5.0.0",
-    "rollup": "^3.20.6",
-    "terser": "^5.17.1",
-    "ts-loader": "^9.2.8",
-    "tslib": "^2.5.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
-  }
-}
+{
+  "name": "vislite",
+  "version": "0.5.2-alpha.1",
+  "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
+  "main": "./lib/index.umd.min.js",
+  "typings": "./types/index.d.ts",
+  "unpkg": "./lib/index.umd.min.js",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "webpack serve --config ./build/webpack.config.js",
+    "build": "devby --delete ./lib && node ./build/pkg.js",
+    "test": "karma start ./build/karma.config.js"
+  },
+  "miniprogram": ".",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oi-contrib/VISLite.git"
+  },
+  "keywords": [
+    "svg",
+    "webgl",
+    "typescript",
+    "canvas",
+    "vue",
+    "uniapp",
+    "miniprogram",
+    "image2d",
+    "image3d",
+    "oi-contrib",
+    "vislite",
+    "d3",
+    "zxl20070701",
+    "three",
+    "echarts",
+    "datav",
+    "webgpu",
+    "layout",
+    "algorithm"
+  ],
+  "author": {
+    "name": "zxl20070701",
+    "url": "https://zxl20070701.github.io/notebook/home.html"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/oi-contrib/VISLite/issues"
+  },
+  "homepage": "https://oi-contrib.github.io/VISLite",
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@types/jasmine": "^4.3.1",
+    "devby": "^0.4.6",
+    "karma": "^6.3.10",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^4.0.1",
+    "karma-webpack": "^5.0.0",
+    "rollup": "^3.20.6",
+    "terser": "^5.17.1",
+    "ts-loader": "^9.2.8",
+    "tslib": "^2.5.0",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  }
+}

package/src/Eoap.ts

@@ -1,66 +1,66 @@
-import type MapType from '../types/Map'
-
-// 围绕X轴旋转
-let rotateX = function (deg: number, x: number, y: number, z: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x, y * cos - z * sin, y * sin + z * cos]
-}
-
-// 围绕Y轴旋转
-let rotateY = function (deg: number, x: number, y: number, z: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
-    return [z * sin + x * cos, y, z * cos - x * sin]
-}
-
-// 围绕Z轴旋转
-let rotateZ = function (deg: number, x: number, y: number, z: number) {
-    let 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轴旋转
+let rotateX = function (deg: number, x: number, y: number, z: number) {
+    let cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x, y * cos - z * sin, y * sin + z * cos]
+}
+
+// 围绕Y轴旋转
+let rotateY = function (deg: number, x: number, y: number, z: number) {
+    let cos = Math.cos(deg), sin = Math.sin(deg)
+    return [z * sin + x * cos, y, z * cos - x * sin]
+}
+
+// 围绕Z轴旋转
+let rotateZ = function (deg: number, x: number, y: number, z: number) {
+    let 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/Geometry.ts

@@ -1,83 +1,83 @@
-import type GeometryType from "../types/Geometry"
-import type GeometryOptionType from "../types/GeometryOption"
-import type GeometryResultType from "../types/GeometryResult"
-
-import { splitNum } from './common/geometry/tool/circle'
-import prismHorizontal from './common/geometry/prism-horizontal'
-import prismVertical from './common/geometry/prism-vertical'
-import sphereFragment from './common/geometry/sphere-fragment'
-import mergeOption from './common/mergeOption'
-
-class Geometry implements GeometryType {
-    readonly name: string = 'Geometry'
-
-    private __option: GeometryOptionType
-
-    constructor(option: GeometryOptionType = {}) {
-        this.__option = mergeOption(option, {
-            precision: 0.1, // 精度
-            normal: false, // 是否需要法向量
-        })
-    }
-
-    config(option: GeometryOptionType) {
-        for (let key in option) {
-            this.__option[key] = option[key]
-        }
-        return this
-    }
-
-    // 圆柱体
-    cylinder(x: number, y: number, z: number, radius: number, height: number): Array<GeometryResultType> {
-
-        // 求解出需要切割多少份比较合理
-        let num = splitNum(this.__option.precision, radius)
-        return this.prism(x, y, z, radius, height, num)
-    }
-
-    // 棱柱体
-    prism(x: number, y: number, z: number, radius: number, height: number, num: number): Array<GeometryResultType> {
-
-        let result = [{
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }]
-
-        // 绘制底部的盖子
-        result[0].points.push(...prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1))
-
-        // 绘制顶部的盖子
-        result[0].points.push(...prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1))
-
-        // 绘制侧边部分
-        result[0].points.push(...prismVertical(this.__option.normal, x, y, z, radius, height, num))
-
-        result[0].length = 12 * num
-        return result
-    }
-
-    // 球体
-    sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
-
-        // 求解出需要切割多少份比较合理
-        let num = splitNum(this.__option.precision, radius)
-
-        // 然后一瓣瓣的绘制
-        let result = [{
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }]
-        for (let i = 0; i < num; i++) {
-            result[0].points.push(...sphereFragment(this.__option.normal, cx, cy, cz, radius, num, i))
-        }
-
-        result[0].length = result[0].points.length / (this.__option.normal ? 6 : 3)
-
-        return result
-    }
-
-}
-
+import type GeometryType from "../types/Geometry"
+import type GeometryOptionType from "../types/GeometryOption"
+import type GeometryResultType from "../types/GeometryResult"
+
+import { splitNum } from './common/geometry/tool/circle'
+import prismHorizontal from './common/geometry/prism-horizontal'
+import prismVertical from './common/geometry/prism-vertical'
+import sphereFragment from './common/geometry/sphere-fragment'
+import mergeOption from './common/mergeOption'
+
+class Geometry implements GeometryType {
+    readonly name: string = 'Geometry'
+
+    private __option: GeometryOptionType
+
+    constructor(option: GeometryOptionType = {}) {
+        this.__option = mergeOption(option, {
+            precision: 0.1, // 精度
+            normal: false, // 是否需要法向量
+        })
+    }
+
+    config(option: GeometryOptionType) {
+        for (let key in option) {
+            this.__option[key] = option[key]
+        }
+        return this
+    }
+
+    // 圆柱体
+    cylinder(x: number, y: number, z: number, radius: number, height: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        let num = splitNum(this.__option.precision, radius)
+        return this.prism(x, y, z, radius, height, num)
+    }
+
+    // 棱柱体
+    prism(x: number, y: number, z: number, radius: number, height: number, num: number): Array<GeometryResultType> {
+
+        let result = [{
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }]
+
+        // 绘制底部的盖子
+        result[0].points.push(...prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1))
+
+        // 绘制顶部的盖子
+        result[0].points.push(...prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1))
+
+        // 绘制侧边部分
+        result[0].points.push(...prismVertical(this.__option.normal, x, y, z, radius, height, num))
+
+        result[0].length = 12 * num
+        return result
+    }
+
+    // 球体
+    sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        let num = splitNum(this.__option.precision, radius)
+
+        // 然后一瓣瓣的绘制
+        let result = [{
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }]
+        for (let i = 0; i < num; i++) {
+            result[0].points.push(...sphereFragment(this.__option.normal, cx, cy, cz, radius, num, i))
+        }
+
+        result[0].length = result[0].points.length / (this.__option.normal ? 6 : 3)
+
+        return result
+    }
+
+}
+
 export default Geometry

package/src/Matrix4/index.ts

@@ -1,77 +1,77 @@
-import type Matrix4Type from '../../types/Matrix4'
-
-// 两个4x4矩阵相乘
-// 或矩阵和齐次坐标相乘
-let _multiply = function (matrix4: number[], param: number[]) {
-    let 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矩阵
-
-class Matrix4 implements Matrix4Type {
-    readonly name: string = 'Matrix4'
-
-    private __matrix4: number[]
-
-    constructor(initMatrix4: number[] = [
-        1, 0, 0, 0,
-        0, 1, 0, 0,
-        0, 0, 1, 0,
-        0, 0, 0, 1
-    ]) {
-        this.__matrix4 = initMatrix4
-    }
-
-    // 移动
-    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) {
-        let 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矩阵相乘
+// 或矩阵和齐次坐标相乘
+let _multiply = function (matrix4: number[], param: number[]) {
+    let 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矩阵
+
+class Matrix4 implements Matrix4Type {
+    readonly name: string = 'Matrix4'
+
+    private __matrix4: number[]
+
+    constructor(initMatrix4: number[] = [
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    ]) {
+        this.__matrix4 = initMatrix4
+    }
+
+    // 移动
+    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) {
+        let 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/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]) {
-
-        let perimeter = 100 * scale * Math.PI // 半周长
-
-        let help = perimeter / 180
-
-        let cx = help * center[0]  // 中心横坐标
-        let 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]) {
+
+        let perimeter = 100 * scale * Math.PI // 半周长
+
+        let help = perimeter / 180
+
+        let cx = help * center[0]  // 中心横坐标
+        let cy = -1 * help * center[1] // 中心纵坐标
+
+        this.use = (λ: number, φ: number) => {
+            return [
+                (help * λ - cx) * 0.8,
+                -1 * help * φ - cy,
+                0
+            ]
+        }
+    }
+
+}
+
 export default Mercator