vislite 0.7.0 → 0.7.1-alpha.0

package/package.json

@@ -1,70 +1,70 @@
-{
-  "name": "vislite",
-  "version": "0.7.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",
-    "lint": "eslint src/**/*.{js,ts} --fix"
-  },
-  "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",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "devby": "^0.4.6",
-    "eslint": "^8.56.0",
-    "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.7.1-alpha.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",
+    "lint": "eslint src/**/*.{js,ts} --fix"
+  },
+  "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",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "devby": "^0.4.6",
+    "eslint": "^8.56.0",
+    "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/Canvas.ts

@@ -1,71 +1,71 @@
-import type CanvasType from '../types/Canvas'
-import type CanvasOptionType from '../types/CanvasOption'
-
-import OralCanvas from './common/canvas/index'
-import mergeOption from './common/mergeOption'
-
-class Canvas extends OralCanvas implements CanvasType {
-    private __canvas: HTMLCanvasElement
-    constructor(el: HTMLElement | null, option: CanvasOptionType = {}) {
-        if (!el) {
-            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = mergeOption(option, {
-            region: true,
-            willReadFrequently: false
-        })
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            if (option.region) {
-                RegionCanvas = document.createElement('canvas')
-            }
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'Canvas')
-        }
-
-        // 设置画布大小
-        for (const canvas of [ViewCanvas, RegionCanvas]) {
-
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', width + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', height + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas, {
-            willReadFrequently: option.willReadFrequently
-        })
-
-        this.__canvas = ViewCanvas
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            resolve(this.__canvas.toDataURL())
-        })
-    }
-}
-
+import type CanvasType from '../types/Canvas'
+import type CanvasOptionType from '../types/CanvasOption'
+
+import OralCanvas from './common/canvas/index'
+import mergeOption from './common/mergeOption'
+
+class Canvas extends OralCanvas implements CanvasType {
+    private __canvas: HTMLCanvasElement
+    constructor(el: HTMLElement | null, option: CanvasOptionType = {}) {
+        if (!el) {
+            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = mergeOption(option, {
+            region: true,
+            willReadFrequently: false
+        })
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            if (option.region) {
+                RegionCanvas = document.createElement('canvas')
+            }
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'Canvas')
+        }
+
+        // 设置画布大小
+        for (const canvas of [ViewCanvas, RegionCanvas]) {
+
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', width + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', height + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas, {
+            willReadFrequently: option.willReadFrequently
+        })
+
+        this.__canvas = ViewCanvas
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            resolve(this.__canvas.toDataURL())
+        })
+    }
+}
+
 export default Canvas

package/src/Geometry.ts

@@ -1,127 +1,127 @@
-import type GeometryType from "../types/Geometry"
-import type GeometryOptionType from "../types/GeometryOption"
-import type GeometryResultType from "../types/GeometryResult"
-
-type rotateLineType = (x0: number, y0: number, z0: number, isNormal: boolean) => Array<number>
-
-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'
-import rotateLineFactory from "./common/geometry/tool/rotateLine"
-
-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 (const key in option) {
-            this.__option[key] = option[key]
-        }
-        return this
-    }
-
-    // 圆柱体
-    cylinder(x: number, y: number, z: number, radius: number, x2: number, y2?: number, z2?: number): Array<GeometryResultType> {
-
-        // 求解出需要切割多少份比较合理
-        const num = splitNum(this.__option.precision as number, radius)
-
-        if (arguments.length == 5) {
-            return this.prism(x, y, z, radius, x2, num)
-        } else {
-            return this.prism(x, y, z, radius, x2, y2 as number, z2, num)
-        }
-    }
-
-    // 棱柱体
-    prism(x: number, y: number, z: number, radius: number, x2: number, y2: number, z2?: number, num?: number): Array<GeometryResultType> {
-
-
-        let height: number, rotateLine: rotateLineType | null = null
-
-        if (arguments.length == 6) {
-            height = x2
-            num = y2
-        } else {
-            height = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y) + (z2 as number - z) * (z2 as number - z))
-            rotateLine = rotateLineFactory(x, y, z, x2, y2, z2 as number)
-        }
-
-        const result = [{
-            name: "bottom",
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }, {
-            name: "top",
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }, {
-            name: "side",
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }]
-
-            // 绘制底部的盖子
-            ; (result[0].points as Array<number>).push(...prismHorizontal(this.__option.normal as boolean, x, y, z, radius, num as number, height > 0 ? -1 : 1))
-
-            // 绘制顶部的盖子
-            ; (result[1].points as Array<number>).push(...prismHorizontal(this.__option.normal as boolean, x, y + height, z, radius, num as number, height > 0 ? 1 : -1))
-
-            // 绘制侧边部分
-            ; (result[2].points as Array<number>).push(...prismVertical(this.__option.normal as boolean, x, y, z, radius, height, num as number))
-
-        for (let i = 0; i < result.length; i++) {
-            if (rotateLine) {
-
-                const points = []
-                let isNormal = false
-                for (let index = 0; index < result[i].points.length; index += 3) {
-                    points.push(...rotateLine(result[i].points[index], result[i].points[index + 1], result[i].points[index + 2], (this.__option.normal as boolean) && isNormal))
-                    isNormal = !isNormal
-                }
-                (result[i].points as Array<number>) = points
-            }
-            result[i].length = result[i].points.length / (this.__option.normal ? 6 : 3)
-        }
-
-        return result
-    }
-
-    // 球体
-    sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
-
-        // 求解出需要切割多少份比较合理
-        const num = splitNum(this.__option.precision as number, radius)
-
-        // 然后一瓣瓣的绘制
-        const result = [{
-            name: "surface",
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }]
-        for (let i = 0; i < num; i++) {
-            ; (result[0].points as Array<number>).push(...sphereFragment(this.__option.normal as boolean, 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"
+
+type rotateLineType = (x0: number, y0: number, z0: number, isNormal: boolean) => Array<number>
+
+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'
+import rotateLineFactory from "./common/geometry/tool/rotateLine"
+
+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 (const key in option) {
+            this.__option[key] = option[key]
+        }
+        return this
+    }
+
+    // 圆柱体
+    cylinder(x: number, y: number, z: number, radius: number, x2: number, y2?: number, z2?: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        const num = splitNum(this.__option.precision as number, radius)
+
+        if (arguments.length == 5) {
+            return this.prism(x, y, z, radius, x2, num)
+        } else {
+            return this.prism(x, y, z, radius, x2, y2 as number, z2, num)
+        }
+    }
+
+    // 棱柱体
+    prism(x: number, y: number, z: number, radius: number, x2: number, y2: number, z2?: number, num?: number): Array<GeometryResultType> {
+
+
+        let height: number, rotateLine: rotateLineType | null = null
+
+        if (arguments.length == 6) {
+            height = x2
+            num = y2
+        } else {
+            height = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y) + (z2 as number - z) * (z2 as number - z))
+            rotateLine = rotateLineFactory(x, y, z, x2, y2, z2 as number)
+        }
+
+        const result = [{
+            name: "bottom",
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }, {
+            name: "top",
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }, {
+            name: "side",
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }]
+
+            // 绘制底部的盖子
+            ; (result[0].points as Array<number>).push(...prismHorizontal(this.__option.normal as boolean, x, y, z, radius, num as number, height > 0 ? -1 : 1))
+
+            // 绘制顶部的盖子
+            ; (result[1].points as Array<number>).push(...prismHorizontal(this.__option.normal as boolean, x, y + height, z, radius, num as number, height > 0 ? 1 : -1))
+
+            // 绘制侧边部分
+            ; (result[2].points as Array<number>).push(...prismVertical(this.__option.normal as boolean, x, y, z, radius, height, num as number))
+
+        for (let i = 0; i < result.length; i++) {
+            if (rotateLine) {
+
+                const points = []
+                let isNormal = false
+                for (let index = 0; index < result[i].points.length; index += 3) {
+                    points.push(...rotateLine(result[i].points[index], result[i].points[index + 1], result[i].points[index + 2], (this.__option.normal as boolean) && isNormal))
+                    isNormal = !isNormal
+                }
+                (result[i].points as Array<number>) = points
+            }
+            result[i].length = result[i].points.length / (this.__option.normal ? 6 : 3)
+        }
+
+        return result
+    }
+
+    // 球体
+    sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        const num = splitNum(this.__option.precision as number, radius)
+
+        // 然后一瓣瓣的绘制
+        const result = [{
+            name: "surface",
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }]
+        for (let i = 0; i < num; i++) {
+            ; (result[0].points as Array<number>).push(...sphereFragment(this.__option.normal as boolean, 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/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
+    ]
+}