vislite 0.1.0 → 0.2.0-alpha.7

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/assemble.ts

@@ -0,0 +1,23 @@
+export default function (begin: number, end: number, step: number, count: number) {
+    let 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] < end) {
+                val[i] = +(val[i] + step).toFixed(7)
+                break
+            }
+
+            // 如果当前位不可以，那当前位归0，尝试下一位
+            else if (i < count - 1) {
+                val[i] = begin
+            }
+        }
+
+        return val
+    }
+}

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
+    )
+
+}

package/src/common/canvas/config.ts

@@ -1,17 +1,18 @@
 import arc from './arc'
+import CanvasConfigType from '../../../types/CanvasConfig'
 
 // 文字统一设置方法
-export let initText = function (painter: CanvasRenderingContext2D, config: any, x: number, y: number, deg: number) {
+export let initText = function (painter: CanvasRenderingContext2D, config: CanvasConfigType, x: number, y: number, deg: number) {
 
     painter.beginPath()
     painter.translate(x, y)
     painter.rotate(deg)
-    painter.font = config['font-style'] + " " + config["font-weight"] + " " + config['font-size'] + "px " + config['font-family']
+    painter.font = config.fontStyle + " " + config.fontWeight + " " + config.fontSize + "px " + config.fontFamily
     return painter
 };
 
 // 画弧统一设置方法
-export let initArc = function (painter: CanvasRenderingContext2D, config: any, cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) {
+export let initArc = function (painter: CanvasRenderingContext2D, config: CanvasConfigType, cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) {
 
     if (r1 > r2) {
         let temp = r1
@@ -44,18 +45,18 @@ export let initArc = function (painter: CanvasRenderingContext2D, config: any, c
             // (圆心x，圆心y，半径，开始角度，结束角度，true逆时针/false顺时针)
             cx, cy, r1, beginA, endA, false)
         // 结尾
-        if (config["arc-end-cap"] != 'round')
+        if (config.arcEndCap != 'round')
             painter.lineTo(endOuterX, endOuterY)
         else
             painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true)
         painter.arc(cx, cy, r2, endA, beginA, true)
         // 开头
-        if (config["arc-start-cap"] != 'round')
+        if (config.arcStartCap != 'round')
             painter.lineTo(begInnerX, begInnerY);
         else
             painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true)
     })
-    if (config["arc-start-cap"] == 'butt') painter.closePath()
+    if (config.arcStartCap == 'butt') painter.closePath()
     return painter
 }
 

package/src/common/canvas/index.ts

@@ -1,12 +1,23 @@
+import CanvasConfigType from '../../../types/CanvasConfig'
 import PainterRender from './painter'
+import assemble from '../assemble'
+
+// 属性名向下兼容
+let oldAttrName = {
+    "font-size": "fontSize",
+    "font-family": "fontFamily",
+    "font-weight": "fontWeight",
+    "font-style": "fontStyle",
+    "arc-start-cap": "arcStartCap",
+    "arc-end-cap": "arcEndCap"
+}
 
 class Canvas extends PainterRender {
 
     readonly name: string = "Canvas"
 
     private __regionList = {} //区域映射表
-    private __rgb: number[] = [0, 0, 0] //区域标识色彩,rgb(0,0,0)表示空白区域
-    private __p: string = 'r' //色彩增值位置
+    private __regionAssemble = assemble(0, 255, 1, 3)
 
     constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement) {
         super(ViewCanvas, {}, new PainterRender(RegionCanvas, {
@@ -16,9 +27,10 @@ class Canvas extends PainterRender {
         this.setRegion("")
     }
 
-    config(configs: any) {
+    config(configs: CanvasConfigType) {
         for (let key in configs) {
-            this.useConfig(key, configs[key])
+            let _key = oldAttrName[key] || key
+            this.useConfig(_key, configs[key])
         }
 
         return this
@@ -26,33 +38,17 @@ class Canvas extends PainterRender {
 
     // 设置当前绘制区域名称
     setRegion(regionName: string | number) {
-        let _this = this
         if (regionName) {
-            if (this.__regionList[regionName as string] == undefined) {
-                this.__regionList[regionName as string] = {
-                    'r': function () {
-                        _this.__rgb[0] += 1
-                        _this.__p = 'g'
-                        return 'rgb(' + _this.__rgb[0] + ',' + _this.__rgb[1] + ',' + _this.__rgb[2] + ')'
-                    },
-                    'g': function () {
-                        _this.__rgb[1] += 1
-                        _this.__p = 'b'
-                        return 'rgb(' + _this.__rgb[0] + ',' + _this.__rgb[1] + ',' + _this.__rgb[2] + ')'
-                    },
-                    'b': function () {
-                        _this.__rgb[2] += 1
-                        _this.__p = 'r'
-                        return 'rgb(' + _this.__rgb[0] + ',' + _this.__rgb[1] + ',' + _this.__rgb[2] + ')'
-                    }
-                }[this.__p]()
+            if (this.__regionList[regionName] == undefined) {
+                let tempColor = this.__regionAssemble()
+                this.__regionList[regionName] = "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
             }
 
-            (this.__region as PainterRender).useConfig("fillStyle", this.__regionList[regionName as string]) &&
-                (this.__region as PainterRender).useConfig("strokeStyle", this.__regionList[regionName as string])
+            this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
+                this.__region.useConfig("strokeStyle", this.__regionList[regionName])
         } else {
-            (this.__region as PainterRender).useConfig("fillStyle", "#000000") &&
-                (this.__region as PainterRender).useConfig("strokeStyle", "#000000")
+            this.__region.useConfig("fillStyle", "#000000") &&
+                this.__region.useConfig("strokeStyle", "#000000")
         }
         return this
     }
@@ -60,7 +56,7 @@ class Canvas extends PainterRender {
     // 获取当前事件触发的区域名称
     getRegion(x: number, y: number): Promise<string> {
         return new Promise((resolve, reject) => {
-            let imgData = (this.__region as PainterRender).painter.getImageData(x - 0.5, y - 0.5, 1, 1)
+            let imgData = this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1)
 
             // 获取点击点的颜色
             let currentRGBA = imgData.data
@@ -91,6 +87,11 @@ class Canvas extends PainterRender {
             }
         })
     }
+
+    // 获取原始画笔
+    getContext(isRegion = false) {
+        return isRegion ? this.__region.painter : this.painter
+    }
 }
 
 export default Canvas

package/src/common/canvas/painter.ts

@@ -1,4 +1,5 @@
 import { initText, initArc, initCircle, initRect } from './config'
+import texts from './texts'
 
 interface OptsType {
 
@@ -20,22 +21,22 @@ class Painter {
     private __specialConfig = {
 
         // 文字大小
-        "font-size": 16,
+        "fontSize": 16,
 
         // 字体
-        "font-family": "sans-serif",
+        "fontFamily": "sans-serif",
 
         // 字重
-        "font-weight": 400,
+        "fontWeight": 400,
 
         // 字类型
-        "font-style": "normal",
+        "fontStyle": "normal",
 
         // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
-        "arc-start-cap": 'butt',
+        "arcStartCap": 'butt',
 
         // 圆弧结束端闭合方式，和上一个类似
-        "arc-end-cap": 'butt'
+        "arcEndCap": 'butt'
     }
 
     private __initConfig = {
@@ -129,7 +130,7 @@ class Painter {
         if (this.__region) this.__region.strokeText(text, x, y, deg)
 
         this.painter.save()
-        initText(this.painter, this.__specialConfig, x, y, deg || 0).strokeText(text, 0, 0)
+        initText(this.painter, this.__specialConfig, x, y, deg).strokeText(text, 0, 0)
         this.painter.restore()
         return this
     }
@@ -137,13 +138,55 @@ class Painter {
         if (this.__region) this.__region.fullText(text, x, y, deg)
 
         this.painter.save()
-        initText(this.painter, this.__specialConfig, x, y, deg || 0)
+        initText(this.painter, this.__specialConfig, x, y, deg)
         this.painter.fillText(text, 0, 0)
         this.painter.strokeText(text, 0, 0)
         this.painter.restore()
         return this
     }
 
+    // 多行文字
+    fillTexts(contents: string, x: number, y: number, width: number, lineHeight: number = 1.2, deg: number = 0) {
+        if (this.__region) this.__region.fillTexts(contents, x, y, width, lineHeight)
+
+        this.painter.save()
+        initText(this.painter, this.__specialConfig, x, y, deg)
+
+        let height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
+            this.painter.fillText(content, 0, top)
+        })
+
+        this.painter.restore()
+        return height
+    }
+    strokeTexts(contents: string, x: number, y: number, width: number, lineHeight: number = 1.2, deg: number = 0) {
+        if (this.__region) this.__region.fillTexts(contents, x, y, width, lineHeight)
+
+        this.painter.save()
+        initText(this.painter, this.__specialConfig, x, y, deg)
+
+        let height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
+            this.painter.strokeText(content, 0, top)
+        })
+
+        this.painter.restore()
+        return height
+    }
+    fullTexts(contents: string, x: number, y: number, width: number, lineHeight: number = 1.2, deg: number = 0) {
+        if (this.__region) this.__region.fillTexts(contents, x, y, width, lineHeight)
+
+        this.painter.save()
+        initText(this.painter, this.__specialConfig, x, y, deg)
+
+        let height = texts(this.painter, contents, width, this.__specialConfig.fontSize * lineHeight, (content, top) => {
+            this.painter.fillText(content, 0, top)
+            this.painter.strokeText(content, 0, top)
+        })
+
+        this.painter.restore()
+        return height
+    }
+
     // 路径
     beginPath() {
         if (this.__region) this.__region.beginPath()

package/src/common/canvas/texts.ts

@@ -0,0 +1,19 @@
+export default function (painter: CanvasRenderingContext2D, contents: string, width: number, height: number, doback: (content: string, top: number) => void) {
+
+    let lineNumber = 0, content = ""
+    for (let i = 0; i < contents.length; i++) {
+        if (painter.measureText(content + contents[i]).width > width) {
+            lineNumber += 1
+            doback(content, (lineNumber - 0.5) * height)
+
+            content = contents[i]
+        } else if (i == contents.length - 1) {
+            lineNumber += 1
+            doback(content + contents[i], (lineNumber - 0.5) * height)
+        } else {
+            content += contents[i]
+        }
+    }
+
+    return lineNumber * height
+}

package/src/common/setStyle.ts

@@ -1,6 +1,6 @@
-// 修改样式
-export default function (el, styles) {
-    for (let key in styles) {
-        el.style[key] = styles[key]
-    }
+// 修改样式
+export default function (el: HTMLElement | SVGElement, styles: any) {
+    for (let key in styles) {
+        el.style[key] = styles[key]
+    }
 }