vislite 0.4.1-alpha.2 → 0.4.1-beta.0

package/src/Canvas.ts

@@ -1,6 +1,8 @@
-import CanvasType from '../types/Canvas'
+import type CanvasType from '../types/Canvas'
+import type CanvasOptionType from '../types/CanvasOption'
+
 import OralCanvas from './common/canvas/index'
-import CanvasOptionType from '../types/CanvasOption'
+import mergeOption from './common/mergeOption'
 
 class Canvas extends OralCanvas implements CanvasType {
     private __canvas: HTMLCanvasElement
@@ -9,7 +11,9 @@ class Canvas extends OralCanvas implements CanvasType {
             throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
         }
 
-        if (!('region' in option)) option.region = true
+        option = mergeOption(option, {
+            region: true
+        })
 
         let width = el.clientWidth, height = el.clientHeight
 

package/src/Eoap.ts

@@ -1,4 +1,4 @@
-import MapType from '../types/Map'
+import type MapType from '../types/Map'
 
 // 围绕X轴旋转
 let rotateX = function (deg: number, x: number, y: number, z: number) {

package/src/Matrix4/index.ts

@@ -1,4 +1,4 @@
-import Matrix4Type from '../../types/Matrix4'
+import type Matrix4Type from '../../types/Matrix4'
 
 // 两个4x4矩阵相乘
 // 或矩阵和齐次坐标相乘

package/src/Mercator.ts

@@ -1,4 +1,4 @@
-import MapType from '../types/Map'
+import type MapType from '../types/Map'
 
 /* 墨卡托投影 */
 class Mercator implements MapType {

package/src/SVG.ts

@@ -1,4 +1,5 @@
-import SVGType from '../types/SVG'
+import type SVGType from '../types/SVG'
+
 import OralSVG from './common/svg/index'
 
 class SVG extends OralSVG implements SVGType {

package/src/TreeLayout/index.ts

@@ -0,0 +1,186 @@
+import type TreeLayoutType from '../../types/TreeLayout'
+import type { TreeResultType } from '../../types/Tree'
+import type TreeOptionType from '../../types/TreeOption'
+
+import Tree from '../common/tree/index'
+import mergeOption from '../common/mergeOption'
+import animation from '../animation'
+import rotate from '../rotate'
+
+class TreeLayout extends Tree implements TreeLayoutType {
+    readonly name: string = 'TreeLayout'
+
+    private __option: TreeOptionType = {
+        offsetX: 0,
+        offsetY: 0,
+        duration: 500,
+        type: "plain",
+        direction: "LR",
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100,
+        radius: 100
+    }
+
+    private __rback: (tree: TreeResultType) => void
+    private __oralTree: any
+    private __preTree: TreeResultType
+
+    private __noOpens = {}
+
+    setOption(option: TreeOptionType) {
+        mergeOption(option, this.__option)
+        return this
+    }
+
+    use(initTree: any, noOpens?: {}) {
+        let tree = super.use(initTree, noOpens)
+
+        // 校对偏差
+        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
+            for (let key in tree.node) {
+                if (!tree.node[key].show) {
+
+                    let deep = 0, pid = key
+                    do {
+                        pid = tree.node[pid].pid
+                        deep++
+                    } while (!tree.node[pid].show)
+
+                    tree.node[key].left += this.__option.offsetX * deep
+                    tree.node[key].top += this.__option.offsetY * deep
+                }
+            }
+        }
+
+        if (this.__option.type == 'rect') {
+            if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
+
+                let perW = this.__option.height / tree.size
+                let perD = this.__option.width / (tree.deep - 1)
+
+                let balanceW = this.__option.y - this.__option.height * 0.5
+                let flag = this.__option.direction == 'LR' ? 1 : -1
+
+                for (let key in tree.node) {
+                    if (tree.deep == 1) {
+                        tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
+                        tree.node[key].top = this.__option.y
+                    } else {
+                        tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
+                        tree.node[key].top = tree.node[key].top * perW + balanceW
+                    }
+                }
+            } else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
+
+                let perW = this.__option.width / tree.size
+                let perD = this.__option.height / (tree.deep - 1)
+
+                let balanceW = this.__option.x - this.__option.width * 0.5
+                let flag = this.__option.direction == 'TB' ? 1 : -1
+
+                for (let key in tree.node) {
+                    if (tree.deep == 1) {
+                        tree.node[key].left = this.__option.x
+                        tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
+                    } else {
+                        let left = tree.node[key].left
+
+                        tree.node[key].left = tree.node[key].top * perW + balanceW
+                        tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
+                    }
+                }
+
+            }
+
+        } else if (this.__option.type == 'circle') {
+            let cx = this.__option.x, cy = this.__option.y
+            let deg = Math.PI * 2 / tree.size
+            let per = this.__option.radius / (tree.deep - 1)
+
+            for (let key in tree.node) {
+                if (tree.node[key].left == 0.5) {
+                    tree.node[key].left = cx
+                    tree.node[key].top = cy
+                } else {
+                    let position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
+
+                    tree.node[key].left = position[0]
+                    tree.node[key].top = position[1]
+                }
+            }
+        }
+
+        return tree
+    }
+
+    bind(initTree: any, renderBack: (tree: TreeResultType) => void) {
+        this.__rback = renderBack
+        this.__oralTree = initTree
+
+        this.__preTree = this.use(this.__oralTree)
+        this.__rback(this.__preTree)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = null
+        this.__oralTree = null
+        this.__preTree = null
+        this.__noOpens = {}
+        return this
+    }
+
+    private doUpdate() {
+        let newTree = this.use(this.__oralTree, this.__noOpens)
+
+        let cacheTree = JSON.parse(JSON.stringify(newTree))
+
+        animation((deep) => {
+
+            for (let key in cacheTree.node) {
+                if (newTree.node[key].show || this.__preTree.node[key].show) {
+                    cacheTree.node[key].show = true
+
+                    cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
+                    cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
+                }
+            }
+            this.__rback(cacheTree)
+
+
+        }, this.__option.duration, () => {
+            this.__preTree = newTree
+            this.__rback(this.__preTree)
+        })
+    }
+
+    closeNode(id: string) {
+        if (!this.__preTree) return
+        this.__noOpens[id] = true
+
+        this.doUpdate()
+        return this
+    }
+
+    openNode(id: string) {
+        if (!this.__preTree) return
+        this.__noOpens[id] = false
+
+        this.doUpdate()
+        return this
+    }
+
+    toggleNode(id: string) {
+        if (!this.__preTree) return
+        this.__noOpens[id] = !this.__noOpens[id]
+
+        this.doUpdate()
+        return this
+    }
+
+}
+
+export default TreeLayout

package/src/WebGL.ts

@@ -1,6 +1,8 @@
-import WebGLType from '../types/WebGL'
+import type WebGLOptionType from '../types/WebGLOption'
+import type WebGLType from '../types/WebGL'
+
 import OralWebGL from './common/webgl/index'
-import WebGLOptionType from '../types/WebGLOption'
+import mergeOption from './common/mergeOption'
 
 class WebGL extends OralWebGL implements WebGLType {
     constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
@@ -8,7 +10,9 @@ class WebGL extends OralWebGL implements WebGLType {
             throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
         }
 
-        if (!('region' in option)) option.region = true
+        option = mergeOption(option, {
+            region: true
+        })
 
         let width = el.clientWidth, height = el.clientHeight
 

package/src/animation.ts

@@ -15,7 +15,6 @@ let $timerId: any
  */
 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) {
@@ -78,7 +77,7 @@ export default function (doback: (deep: number) => void, duration: number = 400,
                 $timerId = null
             }
         }
-    };
+    }
 
     let id = clock.timer(function (deep: number) {
         //其中deep为0-1，表示改变的程度
@@ -91,7 +90,7 @@ export default function (doback: (deep: number) => void, duration: number = 400,
         let i: string
         for (i in $timers) {
             if ($timers[i].id == id) {
-                $timers[i].id = undefined
+                $timers[i].id = void 0
                 return
             }
         }

package/src/common/canvas/config.ts

@@ -1,5 +1,6 @@
+import type CanvasConfigType from "../../../types/CanvasConfig"
+
 import arc from "./arc"
-import CanvasConfigType from "../../../types/CanvasConfig"
 
 // 文字统一设置方法
 export let initText = function (

package/src/common/canvas/index.ts

@@ -1,4 +1,5 @@
-import CanvasConfigType from "../../../types/CanvasConfig"
+import type CanvasConfigType from "../../../types/CanvasConfig"
+
 import PainterRender from "./painter"
 import assemble from "../assemble"
 import { linearGradient, radialGradient } from "./gradient"
@@ -29,7 +30,7 @@ class Canvas extends PainterRender {
       {},
       RegionCanvas ? new PainterRender(RegionCanvas, {
         willReadFrequently: true,
-      }) : null
+      }) : null, true
     )
 
     this.setRegion("")
@@ -44,11 +45,17 @@ class Canvas extends PainterRender {
     return this
   }
 
+  // 是否绘制的内容只需要进行区域记录
+  onlyRegion(flag: boolean) {
+    this.__onlyRegion = flag
+    return this
+  }
+
   // 设置当前绘制区域名称
   setRegion(regionName: string | number) {
     if (this.__region) {
       if (regionName) {
-        if (this.__regionList[regionName] == undefined) {
+        if (this.__regionList[regionName] == void 0) {
           let tempColor = this.__regionAssemble()
           this.__regionList[regionName] =
             "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"

package/src/common/canvas/painter.ts

@@ -16,9 +16,12 @@ class Painter {
     painter: CanvasRenderingContext2D
     __region: Painter | null | undefined = null
 
+    __onlyRegion: boolean = false
+    __isPainter: boolean
+
     // 用于记录配置
     // 因为部分配置的设置比较特殊，只先记录意图
-     __specialConfig = {
+    __specialConfig = {
 
         // 文字大小
         "fontSize": 16,
@@ -67,9 +70,10 @@ class Painter {
 
     }
 
-    constructor(canvas: HTMLCanvasElement, opts: OptsType = {}, region?: Painter) {
+    constructor(canvas: HTMLCanvasElement, opts: OptsType = {}, region?: Painter, isPainter = false) {
         this.painter = canvas.getContext("2d", opts) as CanvasRenderingContext2D
         this.__region = region
+        this.__isPainter = isPainter
 
         // 默认配置canvas2D对象已经存在的属性
         this.painter.textBaseline = 'middle'
@@ -83,6 +87,8 @@ class Painter {
             }
         }
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         /**
         * -----------------------------
         * 特殊的设置开始
@@ -127,6 +133,8 @@ class Painter {
     fillText(text: string, x: number, y: number, deg: number = 0) {
         if (this.__region) this.__region.fillText(text, x, y, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg).fillText(text, 0, 0)
         this.painter.restore()
@@ -135,6 +143,8 @@ class Painter {
     strokeText(text: string, x: number, y: number, deg: number = 0) {
         if (this.__region) this.__region.strokeText(text, x, y, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg).strokeText(text, 0, 0)
         this.painter.restore()
@@ -143,6 +153,8 @@ class Painter {
     fullText(text: string, x: number, y: number, deg: number = 0) {
         if (this.__region) this.__region.fullText(text, x, y, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
         this.painter.fillText(text, 0, 0)
@@ -153,7 +165,10 @@ class Painter {
 
     // 多行文字
     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)
+        let h = 0
+        if (this.__region) h = this.__region.fillTexts(contents, x, y, width, lineHeight)
+
+        if (this.__isPainter && this.__onlyRegion) return h
 
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
@@ -166,7 +181,10 @@ class Painter {
         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)
+        let h = 0
+        if (this.__region) h = this.__region.fillTexts(contents, x, y, width, lineHeight)
+
+        if (this.__isPainter && this.__onlyRegion) return h
 
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
@@ -179,7 +197,10 @@ class Painter {
         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)
+        let h = 0
+        if (this.__region) h = this.__region.fillTexts(contents, x, y, width, lineHeight)
+
+        if (this.__isPainter && this.__onlyRegion) return h
 
         this.painter.save()
         initText(this.painter, this.__specialConfig, x, y, deg)
@@ -197,18 +218,24 @@ class Painter {
     beginPath() {
         if (this.__region) this.__region.beginPath()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.beginPath()
         return this
     }
     closePath() {
         if (this.__region) this.__region.closePath()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.closePath()
         return this
     }
     moveTo(x: number, y: number) {
         if (this.__region) this.__region.moveTo(x, y)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         // 解决1px模糊问题，别的地方类似原因
         this.painter.moveTo(Math.round(x) + 0.5, Math.round(y) + 0.5)
         return this
@@ -216,30 +243,40 @@ class Painter {
     lineTo(x: number, y: number) {
         if (this.__region) this.__region.lineTo(x, y)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.lineTo(Math.round(x) + 0.5, Math.round(y) + 0.5)
         return this
     }
     arc(x: number, y: number, r: number, beginDeg: number, deg: number) {
         if (this.__region) this.__region.arc(x, y, r, beginDeg, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.arc(x, y, r, beginDeg, beginDeg + deg, deg < 0)
         return this
     }
     fill() {
         if (this.__region) this.__region.fill()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.fill()
         return this
     }
     stroke() {
         if (this.__region) this.__region.stroke()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.stroke()
         return this
     }
     full() {
         if (this.__region) this.__region.full()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.fill()
         this.painter.stroke()
         return this
@@ -248,18 +285,24 @@ class Painter {
     save() {
         if (this.__region) this.__region.save()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.save()
         return this
     }
     restore() {
         if (this.__region) this.__region.restore()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.restore()
         return this
     }
     clip() {
         if (this.__region) this.__region.clip()
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.clip()
         return this
     }
@@ -268,12 +311,16 @@ class Painter {
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number) {
         if (this.__region) this.__region.quadraticCurveTo(cpx, cpy, x, y)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.quadraticCurveTo(cpx, cpy, x, y)
         return this
     }
     bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) {
         if (this.__region) this.__region.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
         return this
     }
@@ -282,6 +329,8 @@ class Painter {
     clearRect(x: number, y: number, w: number, h: number) {
         if (this.__region) this.__region.clearRect(x, y, w, h)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         this.painter.clearRect(x, y, w, h)
         return this
     }
@@ -290,18 +339,24 @@ class Painter {
     fillArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) {
         if (this.__region) this.__region.fillArc(cx, cy, r1, r2, beginDeg, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).fill()
         return this
     }
     strokeArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) {
         if (this.__region) this.__region.strokeArc(cx, cy, r1, r2, beginDeg, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg).stroke()
         return this
     }
     fullArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) {
         if (this.__region) this.__region.fullArc(cx, cy, r1, r2, beginDeg, deg)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initArc(this.painter, this.__specialConfig, cx, cy, r1, r2, beginDeg, deg)
         this.painter.fill()
         this.painter.stroke()
@@ -312,18 +367,24 @@ class Painter {
     fillCircle(cx: number, cy: number, r: number) {
         if (this.__region) this.__region.fillCircle(cx, cy, r)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initCircle(this.painter, cx, cy, r).fill()
         return this
     }
     strokeCircle(cx: number, cy: number, r: number) {
         if (this.__region) this.__region.strokeCircle(cx, cy, r)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initCircle(this.painter, cx, cy, r).stroke()
         return this
     }
     fullCircle(cx: number, cy: number, r: number) {
         if (this.__region) this.__region.fullCircle(cx, cy, r)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initCircle(this.painter, cx, cy, r)
         this.painter.fill()
         this.painter.stroke()
@@ -334,23 +395,31 @@ class Painter {
     fillRect(x: number, y: number, width: number, height: number) {
         if (this.__region) this.__region.fillRect(x, y, width, height)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initRect(this.painter, x, y, width, height).fill()
         return this
     }
     strokeRect(x: number, y: number, width: number, height: number) {
         if (this.__region) this.__region.strokeRect(x, y, width, height)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initRect(this.painter, x, y, width, height).stroke()
         return this
     }
     fullRect(x: number, y: number, width: number, height: number) {
         if (this.__region) this.__region.fullRect(x, y, width, height)
 
+        if (this.__isPainter && this.__onlyRegion) return this
+
         initRect(this.painter, x, y, width, height)
         this.painter.fill()
         this.painter.stroke()
         return this
     }
+
+    draw() { }
 }
 
 export default Painter

package/src/common/mergeOption.ts

@@ -0,0 +1,7 @@
+export default function (option: any, defaultOption: any) {
+    for (let key in option) {
+        defaultOption[key] = option[key]
+    }
+
+    return defaultOption
+}

package/src/common/svg/config.ts

@@ -1,7 +1,8 @@
+import type SVGConfigType from "../../../types/SVGConfig"
+
 import { setAttribute } from "./tool"
 import setStyle from "../setStyle"
 import arc from "../canvas/arc"
-import SVGConfigType from "../../../types/SVGConfig"
 
 // 文字统一设置方法
 export let initText = (

package/src/common/svg/index.ts

@@ -1,7 +1,8 @@
+import type SVGConfigType from "../../../types/SVGConfig"
+
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
 import { toNode, setAttribute, getAttribute, full, fill, stroke } from "./tool"
 import rotate from "../../rotate"
-import SVGConfigType from "../../../types/SVGConfig"
 
 // 属性名向下兼容
 let oldAttrName = {

package/src/common/svg/tool.ts

@@ -1,5 +1,6 @@
+import type SVGConfigType from '../../../types/SVGConfig'
+
 import { XLINK_ATTRIBUTE } from "./dictionary"
-import SVGConfigType from '../../../types/SVGConfig'
 
 // 新建节点
 export function toNode(tagname: string) {

package/src/common/tree/index.ts

@@ -0,0 +1,26 @@
+import type TreeConfigType from '../../../types/TreeConfig'
+import type { TreeResultType } from '../../../types/Tree'
+
+import toPlainTree from './toPlainTree'
+import mergeOption from '../mergeOption'
+
+class Tree {
+    readonly name: string = 'Tree'
+
+    private __config: TreeConfigType
+
+    constructor(config: TreeConfigType = {}) {
+        this.__config = mergeOption(config, {
+            root: (initTree: any) => initTree,
+            children: (parentTree: any) => parentTree.children,
+            id: (treedata: any) => treedata.name
+        })
+    }
+
+    use(initTree: any, noOpens = {}): TreeResultType {
+        return toPlainTree(initTree, this.__config, noOpens)
+    }
+
+}
+
+export default Tree