vislite 0.3.1 → 0.4.1-alpha.0

package/miniprogram/ui-canvas/index.wxml

@@ -1,4 +1,4 @@
-<view>
-    <canvas type="2d" id="painter" style='width:{{width}}px;height:{{height}}px;' bindtouchstart="doitstart"></canvas>
-    <canvas type="2d" id="region" style='width:{{width}}px;height:{{height}}px;' class="region"></canvas>
-</view>
+<view>
+    <canvas type="2d" id="painter" style='width:{{width}}px;height:{{height}}px;' bindtouchstart="doitstart"></canvas>
+    <canvas type="2d" id="region" style='width:{{width}}px;height:{{height}}px;' class="region"></canvas>
+</view>

package/miniprogram/ui-canvas/index.wxss

@@ -1,5 +1,5 @@
-/* 辅助的区域不应该可以看见 */
-.region {
-  position: fixed;
-  left: 50000px;
-}
+/* 辅助的区域不应该可以看见 */
+.region {
+  position: fixed;
+  left: 50000px;
+}

package/package/Buffer/index.ts

@@ -1,2 +1,2 @@
-import Buffer from '../../src/common/webgl/buffer'
+import Buffer from '../../src/common/webgl/buffer'
 export default Buffer

package/package/Canvas/index.ts

@@ -1,2 +1,2 @@
-import Canvas from "../../src/Canvas"
+import Canvas from "../../src/Canvas"
 export default Canvas

package/package/Cardinal/index.ts

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

package/package/Eoap/index.ts

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

package/package/Hermite/index.ts

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

package/package/Matrix4/index.ts

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

package/package/Mercator/index.ts

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

package/package/OralCanvas/index.ts

@@ -1,2 +1,2 @@
-import _Canvas from "../../src/common/canvas/index"
+import _Canvas from "../../src/common/canvas/index"
 export default _Canvas

package/package/OralWebGL/index.ts

@@ -1,2 +1,2 @@
-import _WebGL from "../../src/common/webgl/index"
+import _WebGL from "../../src/common/webgl/index"
 export default _WebGL

package/package/SVG/index.ts

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

package/package/Shader/index.ts

@@ -1,2 +1,2 @@
-import Shader from '../../src/common/webgl/shader'
+import Shader from '../../src/common/webgl/shader'
 export default Shader

package/package/Texture/index.ts

@@ -1,2 +1,2 @@
-import Texture from '../../src/common/webgl/texture'
+import Texture from '../../src/common/webgl/texture'
 export default Texture

package/package/WebGL/index.ts

@@ -1,2 +1,2 @@
-import WebGL from "../../src/WebGL"
+import WebGL from "../../src/WebGL"
 export default WebGL

package/package/animation/index.ts

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

package/package/getLoopColors/index.ts

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

package/package/getWebGLContext/index.ts

@@ -1,40 +1,40 @@
-import getWebGLContext from "../../src/common/webgl/getWebGLContext"
-
-export default (el: HTMLElement | null, scale: number = 1) => {
-    if (!el) {
-        throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
-    }
-
-    let width = el.clientWidth, height = el.clientHeight
-
-    let ViewCanvas: HTMLCanvasElement
-
-    let _el = el as any
-
-    // 如果已经初始化过了
-    if (_el._vislite_canvas_) {
-        ViewCanvas = _el._vislite_canvas_
-    }
-
-    // 否则就初始化
-    else {
-
-        ViewCanvas = document.createElement('canvas')
-        el.appendChild(ViewCanvas)
-
-        _el._vislite_canvas_ = ViewCanvas
-
-        el.setAttribute('vislite', 'WebGL')
-
-    }
-
-    // 设置画布大小
-
-    ViewCanvas.style.width = width + "px"
-    ViewCanvas.setAttribute('width', width + "")
-
-    ViewCanvas.style.height = height + "px"
-    ViewCanvas.setAttribute('height', height + "")
-
-    return getWebGLContext(ViewCanvas, scale)
+import getWebGLContext from "../../src/common/webgl/getWebGLContext"
+
+export default (el: HTMLElement | null, scale: number = 1) => {
+    if (!el) {
+        throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.")
+    }
+
+    let width = el.clientWidth, height = el.clientHeight
+
+    let ViewCanvas: HTMLCanvasElement
+
+    let _el = el as any
+
+    // 如果已经初始化过了
+    if (_el._vislite_canvas_) {
+        ViewCanvas = _el._vislite_canvas_
+    }
+
+    // 否则就初始化
+    else {
+
+        ViewCanvas = document.createElement('canvas')
+        el.appendChild(ViewCanvas)
+
+        _el._vislite_canvas_ = ViewCanvas
+
+        el.setAttribute('vislite', 'WebGL')
+
+    }
+
+    // 设置画布大小
+
+    ViewCanvas.style.width = width + "px"
+    ViewCanvas.setAttribute('width', width + "")
+
+    ViewCanvas.style.height = height + "px"
+    ViewCanvas.setAttribute('height', height + "")
+
+    return getWebGLContext(ViewCanvas, scale)
 }

package/package/index.ts

@@ -1,57 +1,57 @@
-import Cardinal from "./Cardinal/index"
-import Hermite from "./Hermite/index"
-
-import Matrix4 from "./Matrix4/index"
-import rotate from "./rotate/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 WebGL from "./WebGL/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 viewHandler from "./viewHandler/index"
-
-export default {
-
-    // 插值
-    Cardinal,
-    Hermite,
-
-    // 变换
-    Matrix4,
-    rotate,
-
-    // 工具
-    getLoopColors,
-    animation,
-    ruler,
-
-    // 画笔
-    SVG,
-    Canvas,
-    WebGL,
-
-    // WebGL
-    getWebGLContext,
-    Shader,
-    Texture,
-    Buffer,
-
-    // 投影
-    Eoap,
-    Mercator,
-
-    // 辅助
-    viewHandler
+import Cardinal from "./Cardinal/index"
+import Hermite from "./Hermite/index"
+
+import Matrix4 from "./Matrix4/index"
+import rotate from "./rotate/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 WebGL from "./WebGL/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 viewHandler from "./viewHandler/index"
+
+export default {
+
+    // 插值
+    Cardinal,
+    Hermite,
+
+    // 变换
+    Matrix4,
+    rotate,
+
+    // 工具
+    getLoopColors,
+    animation,
+    ruler,
+
+    // 画笔
+    SVG,
+    Canvas,
+    WebGL,
+
+    // WebGL
+    getWebGLContext,
+    Shader,
+    Texture,
+    Buffer,
+
+    // 投影
+    Eoap,
+    Mercator,
+
+    // 辅助
+    viewHandler
 }

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/viewHandler/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "0.3.1",
+  "version": "0.4.1-alpha.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.0",
     "@types/jasmine": "^4.3.1",
-    "devby": "^0.4.0",
+    "devby": "^0.4.6",
     "karma": "^6.3.10",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^4.0.1",

package/src/Canvas.ts

@@ -1,57 +1,57 @@
-import CanvasType from '../types/Canvas'
-import OralCanvas from './common/canvas/index'
-
-class Canvas extends OralCanvas implements CanvasType {
-    private __canvas: HTMLCanvasElement
-    constructor(el: HTMLElement | null) {
-        if (!el) {
-            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        let width = el.clientWidth, height = el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
-
-        let _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)
-
-            RegionCanvas = document.createElement('canvas')
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'Canvas')
-        }
-
-        // 设置画布大小
-        for (let canvas of [ViewCanvas, RegionCanvas]) {
-
-            canvas.style.width = width + "px"
-            canvas.setAttribute('width', width + "")
-
-            canvas.style.height = height + "px"
-            canvas.setAttribute('height', height + "")
-        }
-
-        super(ViewCanvas, RegionCanvas)
-
-        this.__canvas = ViewCanvas
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            resolve(this.__canvas.toDataURL())
-        })
-    }
-}
-
+import CanvasType from '../types/Canvas'
+import OralCanvas from './common/canvas/index'
+
+class Canvas extends OralCanvas implements CanvasType {
+    private __canvas: HTMLCanvasElement
+    constructor(el: HTMLElement | null) {
+        if (!el) {
+            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        let width = el.clientWidth, height = el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
+
+        let _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)
+
+            RegionCanvas = document.createElement('canvas')
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'Canvas')
+        }
+
+        // 设置画布大小
+        for (let canvas of [ViewCanvas, RegionCanvas]) {
+
+            canvas.style.width = width + "px"
+            canvas.setAttribute('width', width + "")
+
+            canvas.style.height = height + "px"
+            canvas.setAttribute('height', height + "")
+        }
+
+        super(ViewCanvas, RegionCanvas)
+
+        this.__canvas = ViewCanvas
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            resolve(this.__canvas.toDataURL())
+        })
+    }
+}
+
 export default Canvas

package/src/Eoap.ts

@@ -1,66 +1,66 @@
-import 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) {
-        /**
-         * 通过旋转的方法
-         * 先旋转出点的位置
-         * 然后根据把地心到旋转中心的这条射线变成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 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) {
+        /**
+         * 通过旋转的方法
+         * 先旋转出点的位置
+         * 然后根据把地心到旋转中心的这条射线变成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