vislite 0.3.1 → 0.4.0

package/src/SVG.ts

@@ -1,24 +1,24 @@
-import 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.")
-        }
-
-        let width = el.clientWidth, height = el.clientHeight
-
-        let 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 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.")
+        }
+
+        let width = el.clientWidth, height = el.clientHeight
+
+        let 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,53 +1,53 @@
-import WebGLType from '../types/WebGL'
-import OralWebGL from './common/webgl/index'
-
-class WebGL extends OralWebGL implements WebGLType {
-    constructor(el: HTMLElement | null) {
-        if (!el) {
-            throw new Error("VISLite WebGL: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 {
-
-            RegionCanvas = document.createElement('canvas')
-            el.appendChild(RegionCanvas)
-
-            RegionCanvas.style.position = 'absolute'
-            RegionCanvas.style.zIndex = "-1"
-
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'WebGL')
-        }
-
-        // 设置画布大小
-        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)
-    }
-}
-
+import WebGLType from '../types/WebGL'
+import OralWebGL from './common/webgl/index'
+
+class WebGL extends OralWebGL implements WebGLType {
+    constructor(el: HTMLElement | null) {
+        if (!el) {
+            throw new Error("VISLite WebGL: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 {
+
+            RegionCanvas = document.createElement('canvas')
+            el.appendChild(RegionCanvas)
+
+            RegionCanvas.style.position = 'absolute'
+            RegionCanvas.style.zIndex = "-1"
+
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'WebGL')
+        }
+
+        // 设置画布大小
+        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)
+    }
+}
+
 export default WebGL

package/src/animation.ts

@@ -1,100 +1,100 @@
-//当前正在运动的动画的tick函数堆栈
-let $timers: any[] = []
-//唯一定时器的定时间隔
-let $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 {
-
-
-    let clock = {
-        //把tick函数推入堆栈
-        "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
-            if (!tick) {
-                throw new Error('Tick is required!')
-            }
-            let 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,
-                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
-            }
-        }
-    };
-
-    let 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 = undefined
-                return
-            }
-        }
-    }
-
+//当前正在运动的动画的tick函数堆栈
+let $timers: any[] = []
+//唯一定时器的定时间隔
+let $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 {
+
+
+    let clock = {
+        //把tick函数推入堆栈
+        "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
+            if (!tick) {
+                throw new Error('Tick is required!')
+            }
+            let 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,
+                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
+            }
+        }
+    };
+
+    let 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 = undefined
+                return
+            }
+        }
+    }
+
 }

package/src/common/canvas/arc.ts

@@ -1,50 +1,50 @@
-
-// 点（x,y）围绕中心（cx,cy）旋转deg度
-
-let rotate = function (cx: number, cy: number, deg: number, x: number, y: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
-    return [
-        +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
-        +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
-    ]
-}
-
-// r1和r2，内半径和外半径
-// beginA起点弧度，rotateA旋转弧度式
-
-export default function (beginA: number, rotateA: number, cx: number, cy: number, r1: number, r2: number, doback: Function) {
-
-    // 保证逆时针也是可以的
-    if (rotateA < 0) {
-        beginA += rotateA
-        rotateA *= -1
-    }
-
-    let temp: number[] = [], p: number[]
-
-    // 内部
-    p = rotate(0, 0, beginA, r1, 0)
-    temp[0] = p[0]
-    temp[1] = p[1]
-    p = rotate(0, 0, rotateA, p[0], p[1])
-    temp[2] = p[0]
-    temp[3] = p[1]
-
-    // 外部
-    p = rotate(0, 0, beginA, r2, 0)
-    temp[4] = p[0]
-    temp[5] = p[1]
-    p = rotate(0, 0, rotateA, p[0], p[1])
-    temp[6] = p[0]
-    temp[7] = p[1]
-
-    doback(
-        beginA, beginA + rotateA,
-        temp[0] + cx, temp[1] + cy,
-        temp[4] + cx, temp[5] + cy,
-        temp[2] + cx, temp[3] + cy,
-        temp[6] + cx, temp[7] + cy,
-        (r2 - r1) * 0.5
-    )
-
-}
+
+// 点（x,y）围绕中心（cx,cy）旋转deg度
+
+let rotate = function (cx: number, cy: number, deg: number, x: number, y: number) {
+    let cos = Math.cos(deg), sin = Math.sin(deg)
+    return [
+        +((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
+        +((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
+    ]
+}
+
+// r1和r2，内半径和外半径
+// beginA起点弧度，rotateA旋转弧度式
+
+export default function (beginA: number, rotateA: number, cx: number, cy: number, r1: number, r2: number, doback: Function) {
+
+    // 保证逆时针也是可以的
+    if (rotateA < 0) {
+        beginA += rotateA
+        rotateA *= -1
+    }
+
+    let temp: number[] = [], p: number[]
+
+    // 内部
+    p = rotate(0, 0, beginA, r1, 0)
+    temp[0] = p[0]
+    temp[1] = p[1]
+    p = rotate(0, 0, rotateA, p[0], p[1])
+    temp[2] = p[0]
+    temp[3] = p[1]
+
+    // 外部
+    p = rotate(0, 0, beginA, r2, 0)
+    temp[4] = p[0]
+    temp[5] = p[1]
+    p = rotate(0, 0, rotateA, p[0], p[1])
+    temp[6] = p[0]
+    temp[7] = p[1]
+
+    doback(
+        beginA, beginA + rotateA,
+        temp[0] + cx, temp[1] + cy,
+        temp[4] + cx, temp[5] + cy,
+        temp[2] + cx, temp[3] + cy,
+        temp[6] + cx, temp[7] + cy,
+        (r2 - r1) * 0.5
+    )
+
+}