vislite 0.6.0 → 0.7.0-alpha.0

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 @@
-/**
- * 围绕0Z轴旋转
- * 其它的旋转可以借助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
-    ]
-}
+/**
+ * 围绕0Z轴旋转
+ * 其它的旋转可以借助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/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

@@ -1,25 +1,25 @@
-import type SVGType from '../types/SVG'
-
-import OralSVG from './common/svg/index'
-
-class SVG extends OralSVG implements SVGType {
-    constructor(el: HTMLElement | null) {
-        if (!el) {
-            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
-        el.appendChild(ViewSVG)
-
-        ViewSVG.setAttribute("width", width + "")
-        ViewSVG.setAttribute("height", height + "")
-
-        ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
-
-        super(ViewSVG)
-    }
-}
-
+import type SVGType from '../types/SVG'
+
+import OralSVG from './common/svg/index'
+
+class SVG extends OralSVG implements SVGType {
+    constructor(el: HTMLElement | null) {
+        if (!el) {
+            throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        const ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
+        el.appendChild(ViewSVG)
+
+        ViewSVG.setAttribute("width", width + "")
+        ViewSVG.setAttribute("height", height + "")
+
+        ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
+
+        super(ViewSVG)
+    }
+}
+
 export default SVG

package/src/WebGL.ts

@@ -1,67 +1,67 @@
-import type WebGLOptionType from '../types/WebGLOption'
-import type WebGLType from '../types/WebGL'
-
-import OralWebGL from './common/webgl/index'
-import mergeOption from './common/mergeOption'
-
-class WebGL extends OralWebGL implements WebGLType {
-    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
-        if (!el) {
-            throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = mergeOption(option, {
-            region: true
-        })
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-
-            if (option.region) {
-
-                RegionCanvas = document.createElement('canvas')
-                el.appendChild(RegionCanvas)
-
-                RegionCanvas.style.position = 'absolute'
-                RegionCanvas.style.zIndex = "-1"
-                RegionCanvas.style.opacity = "0"
-
-            }
-
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'WebGL')
-        }
-
-        // 设置画布大小
-        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)
-    }
-}
-
+import type WebGLOptionType from '../types/WebGLOption'
+import type WebGLType from '../types/WebGL'
+
+import OralWebGL from './common/webgl/index'
+import mergeOption from './common/mergeOption'
+
+class WebGL extends OralWebGL implements WebGLType {
+    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
+        if (!el) {
+            throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = mergeOption(option, {
+            region: true
+        })
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+
+            if (option.region) {
+
+                RegionCanvas = document.createElement('canvas')
+                el.appendChild(RegionCanvas)
+
+                RegionCanvas.style.position = 'absolute'
+                RegionCanvas.style.zIndex = "-1"
+                RegionCanvas.style.opacity = "0"
+
+            }
+
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'WebGL')
+        }
+
+        // 设置画布大小
+        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)
+    }
+}
+
 export default WebGL

package/src/animation.ts

@@ -1,99 +1,99 @@
-//当前正在运动的动画的tick函数堆栈
-let $timers: any[] = []
-//唯一定时器的定时间隔
-const $interval = 13
-//定时器ID
-let $timerId: any
-
-/**
- * 动画轮播
- * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
- * @param {number} duration 动画时长，可选
- * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
- *
- * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
- */
-export default function (doback: (deep: number) => void, duration: number = 400, callback: (deep: number) => void = () => { }): Function {
-
-    const clock = {
-        //把tick函数推入堆栈
-        "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
-            if (!tick) {
-                throw new Error('Tick is required!')
-            }
-            const id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
-            $timers.push({
-                "id": id,
-                "createTime": new Date(),
-                "tick": tick,
-                "duration": duration,
-                "callback": callback
-            });
-            clock.start()
-            return id
-        },
-
-        //开启唯一的定时器timerId
-        "start": function () {
-            if (!$timerId) {
-                $timerId = setInterval(clock.tick, $interval)
-            }
-        },
-
-        //被定时器调用，遍历timers堆栈
-        "tick": function () {
-            let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number
-            const timers: any[] = $timers
-            $timers = []
-            $timers.length = 0
-            for (flag = 0; flag < timers.length; flag++) {
-                //初始化数据
-                timer = timers[flag]
-                createTime = timer.createTime
-                tick = timer.tick
-                duration = timer.duration
-                callback = timer.callback
-
-                //执行
-                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration
-                passTime = passTime > 1 ? 1 : passTime
-                tick(passTime)
-                if (passTime < 1 && timer.id) {
-                    //动画没有结束再添加
-                    $timers.push(timer)
-                } else {
-                    callback(passTime)
-                }
-            }
-            if ($timers.length <= 0) {
-                clock.stop()
-            }
-        },
-
-        //停止定时器，重置timerId=null
-        "stop": function () {
-            if ($timerId) {
-                clearInterval($timerId)
-                $timerId = null
-            }
-        }
-    }
-
-    const id = clock.timer(function (deep: number) {
-        //其中deep为0-1，表示改变的程度
-        doback(deep)
-    }, duration, callback)
-
-    // 返回一个函数
-    // 用于在动画结束前结束动画
-    return function () {
-        let i: string
-        for (i in $timers) {
-            if ($timers[i].id == id) {
-                $timers[i].id = void 0
-                return
-            }
-        }
-    }
-
+//当前正在运动的动画的tick函数堆栈
+let $timers: any[] = []
+//唯一定时器的定时间隔
+const $interval = 13
+//定时器ID
+let $timerId: any
+
+/**
+ * 动画轮播
+ * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
+ * @param {number} duration 动画时长，可选
+ * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
+ *
+ * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
+ */
+export default function (doback: (deep: number) => void, duration: number = 400, callback: (deep: number) => void = () => { }): Function {
+
+    const clock = {
+        //把tick函数推入堆栈
+        "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
+            if (!tick) {
+                throw new Error('Tick is required!')
+            }
+            const id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
+            $timers.push({
+                "id": id,
+                "createTime": new Date(),
+                "tick": tick,
+                "duration": duration,
+                "callback": callback
+            });
+            clock.start()
+            return id
+        },
+
+        //开启唯一的定时器timerId
+        "start": function () {
+            if (!$timerId) {
+                $timerId = setInterval(clock.tick, $interval)
+            }
+        },
+
+        //被定时器调用，遍历timers堆栈
+        "tick": function () {
+            let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number
+            const timers: any[] = $timers
+            $timers = []
+            $timers.length = 0
+            for (flag = 0; flag < timers.length; flag++) {
+                //初始化数据
+                timer = timers[flag]
+                createTime = timer.createTime
+                tick = timer.tick
+                duration = timer.duration
+                callback = timer.callback
+
+                //执行
+                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration
+                passTime = passTime > 1 ? 1 : passTime
+                tick(passTime)
+                if (passTime < 1 && timer.id) {
+                    //动画没有结束再添加
+                    $timers.push(timer)
+                } else {
+                    callback(passTime)
+                }
+            }
+            if ($timers.length <= 0) {
+                clock.stop()
+            }
+        },
+
+        //停止定时器，重置timerId=null
+        "stop": function () {
+            if ($timerId) {
+                clearInterval($timerId)
+                $timerId = null
+            }
+        }
+    }
+
+    const id = clock.timer(function (deep: number) {
+        //其中deep为0-1，表示改变的程度
+        doback(deep)
+    }, duration, callback)
+
+    // 返回一个函数
+    // 用于在动画结束前结束动画
+    return function () {
+        let i: string
+        for (i in $timers) {
+            if ($timers[i].id == id) {
+                $timers[i].id = void 0
+                return
+            }
+        }
+    }
+
 }

package/src/common/assemble.ts

@@ -1,23 +1,23 @@
-export default function (begin: number, end: number, step: number, count: number) {
-    const val = []
-    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 = []
+    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
+    }
 }