vislite 1.5.0 → 1.6.0-alpha.0

package/src/layout/PieLayout.ts

@@ -1,142 +1,142 @@
-import type PieLayoutType from '../../types/PieLayout'
-import type { PieResultType } from '../../types/Pie'
-import type PieOptionType from '../../types/PieOption'
-import type { default as PieConfigType, nameType, valueType } from '../../types/PieConfig'
-
-import { initOption } from '../common/option'
-import rotate from '../rotate'
-import { animation } from "oipage/web/animation/index"
-
-class PieLayout implements PieLayoutType {
-    readonly name: string = 'PieLayout'
-
-    private __config: PieConfigType
-
-    constructor(config: PieConfigType = {}) {
-        this.__config = initOption(config, {
-            name: (pieData: any, initPie: Array<any>) => pieData.name,
-            value: (pieData: any, initPie: Array<any>) => pieData.value
-        })
-    }
-
-    private __option = {
-        cx: 200,
-        cy: 200,
-        radius: [50, 100],
-        duration: 200,
-    }
-
-    setOption(option: PieOptionType) {
-        initOption(option, this.__option)
-        return this
-    }
-
-    private __rback: (pie: PieResultType) => void
-    private __oralPie: any
-    private __prePie: PieResultType | null
-
-    private __hoverIndex = -1 // 表示当前悬浮的序号
-
-    use(initPie: Array<any>, hoverIndex: number = -1) {
-        let pie: PieResultType = {
-            count: initPie.length,
-            cx: this.__option.cx,
-            cy: this.__option.cy,
-            radius: this.__option.radius,
-            hoverIndex,
-            node: []
-        }
-
-        let totalValue = 0, names = [], values = []
-        for (let i = 0; i < initPie.length; i++) {
-            names[i] = (this.__config.name as nameType)(initPie[i], initPie)
-            values[i] = (this.__config.value as valueType)(initPie[i], initPie)
-
-            totalValue += values[i]
-        }
-
-        let beginDeg = Math.PI * -0.5, currenDeg
-        for (let i = 0; i < initPie.length; i++) {
-            currenDeg = values[i] / totalValue * Math.PI * 2
-            let radius = [this.__option.radius[0], this.__option.radius[1] * (1 + (hoverIndex === i ? 0.05 : 0))]
-
-            let pdeg = beginDeg + currenDeg * 0.5, pradius = Math.max(this.__option.radius[0], this.__option.radius[1])
-            let p0 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius, pie.cy)
-            let p1 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius + 15, pie.cy)
-
-            let pflag = p0[0] > pie.cx ? 1 : -1
-            let p2 = [p1[0] + pflag * 20, p1[1]]
-            let p3 = [p1[0] + pflag * 25, p1[1]]
-
-            pie.node[i] = {
-                value: values[i],
-                name: names[i],
-                beginDeg,
-                deg: currenDeg,
-                isHover: hoverIndex === i,
-                radius,
-                label: {
-                    line: [p0, p1, p2],
-                    position: p3,
-                    align: pflag === -1 ? "right" : "left"
-                }
-            }
-
-            beginDeg += currenDeg
-        }
-
-        return pie
-    }
-
-    bind(initPie: Array<any>, renderBack: (pie: PieResultType) => void) {
-        this.__rback = renderBack
-        this.__oralPie = initPie
-
-        this.__prePie = this.use(this.__oralPie, this.__hoverIndex)
-        this.__rback(this.__prePie)
-
-        return this
-    }
-
-    unbind() {
-        this.__rback = () => null
-        this.__oralPie = null
-        this.__prePie = null
-        this.__hoverIndex = -1
-        return this
-    }
-
-    setHover(index: number) {
-        if (!this.__prePie || this.__hoverIndex === index) return this
-
-        this.__hoverIndex = index
-
-        this.doUpdate()
-        return this
-    }
-
-    doUpdate() {
-        const newPie = this.use(this.__oralPie, this.__hoverIndex)
-
-        const cachePie = JSON.parse(JSON.stringify(newPie))
-
-        animation((deep) => {
-
-            if (this.__prePie) {
-                for (let i = 0; i < cachePie.count; i++) {
-                    cachePie.node[i].radius[1] = this.__prePie.node[i].radius[1] + (newPie.node[i].radius[1] - this.__prePie.node[i].radius[1]) * deep
-                }
-            }
-
-            this.__rback(cachePie)
-
-        }, this.__option.duration, () => {
-            this.__prePie = newPie
-            this.__rback(this.__prePie)
-        })
-
-        return this
-    }
-}
-
+import type PieLayoutType from '../../types/PieLayout'
+import type { PieResultType } from '../../types/Pie'
+import type PieOptionType from '../../types/PieOption'
+import type { default as PieConfigType, nameType, valueType } from '../../types/PieConfig'
+
+import { initOption } from '../common/option'
+import rotate from '../rotate'
+import { animation } from "oipage/web/animation/index"
+
+class PieLayout implements PieLayoutType {
+    readonly name: string = 'PieLayout'
+
+    private __config: PieConfigType
+
+    constructor(config: PieConfigType = {}) {
+        this.__config = initOption(config, {
+            name: (pieData: any, initPie: Array<any>) => pieData.name,
+            value: (pieData: any, initPie: Array<any>) => pieData.value
+        })
+    }
+
+    private __option = {
+        cx: 200,
+        cy: 200,
+        radius: [50, 100],
+        duration: 200,
+    }
+
+    setOption(option: PieOptionType) {
+        initOption(option, this.__option)
+        return this
+    }
+
+    private __rback: (pie: PieResultType) => void
+    private __oralPie: any
+    private __prePie: PieResultType | null
+
+    private __hoverIndex = -1 // 表示当前悬浮的序号
+
+    use(initPie: Array<any>, hoverIndex: number = -1) {
+        let pie: PieResultType = {
+            count: initPie.length,
+            cx: this.__option.cx,
+            cy: this.__option.cy,
+            radius: this.__option.radius,
+            hoverIndex,
+            node: []
+        }
+
+        let totalValue = 0, names = [], values = []
+        for (let i = 0; i < initPie.length; i++) {
+            names[i] = (this.__config.name as nameType)(initPie[i], initPie)
+            values[i] = (this.__config.value as valueType)(initPie[i], initPie)
+
+            totalValue += values[i]
+        }
+
+        let beginDeg = Math.PI * -0.5, currenDeg
+        for (let i = 0; i < initPie.length; i++) {
+            currenDeg = values[i] / totalValue * Math.PI * 2
+            let radius = [this.__option.radius[0], this.__option.radius[1] * (1 + (hoverIndex === i ? 0.05 : 0))]
+
+            let pdeg = beginDeg + currenDeg * 0.5, pradius = Math.max(this.__option.radius[0], this.__option.radius[1])
+            let p0 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius, pie.cy)
+            let p1 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius + 15, pie.cy)
+
+            let pflag = p0[0] > pie.cx ? 1 : -1
+            let p2 = [p1[0] + pflag * 20, p1[1]]
+            let p3 = [p1[0] + pflag * 25, p1[1]]
+
+            pie.node[i] = {
+                value: values[i],
+                name: names[i],
+                beginDeg,
+                deg: currenDeg,
+                isHover: hoverIndex === i,
+                radius,
+                label: {
+                    line: [p0, p1, p2],
+                    position: p3,
+                    align: pflag === -1 ? "right" : "left"
+                }
+            }
+
+            beginDeg += currenDeg
+        }
+
+        return pie
+    }
+
+    bind(initPie: Array<any>, renderBack: (pie: PieResultType) => void) {
+        this.__rback = renderBack
+        this.__oralPie = initPie
+
+        this.__prePie = this.use(this.__oralPie, this.__hoverIndex)
+        this.__rback(this.__prePie)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralPie = null
+        this.__prePie = null
+        this.__hoverIndex = -1
+        return this
+    }
+
+    setHover(index: number) {
+        if (!this.__prePie || this.__hoverIndex === index) return this
+
+        this.__hoverIndex = index
+
+        this.doUpdate()
+        return this
+    }
+
+    doUpdate() {
+        const newPie = this.use(this.__oralPie, this.__hoverIndex)
+
+        const cachePie = JSON.parse(JSON.stringify(newPie))
+
+        animation((deep) => {
+
+            if (this.__prePie) {
+                for (let i = 0; i < cachePie.count; i++) {
+                    cachePie.node[i].radius[1] = this.__prePie.node[i].radius[1] + (newPie.node[i].radius[1] - this.__prePie.node[i].radius[1]) * deep
+                }
+            }
+
+            this.__rback(cachePie)
+
+        }, this.__option.duration, () => {
+            this.__prePie = newPie
+            this.__rback(this.__prePie)
+        })
+
+        return this
+    }
+}
+
 export default PieLayout

package/src/layout/TreeLayout.ts

@@ -1,198 +1,198 @@
-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 { initOption } from '../common/option'
-import { animation } from "oipage/web/animation/index"
-import rotate from '../rotate'
-
-class TreeLayout extends Tree implements TreeLayoutType {
-    readonly name: string = 'TreeLayout'
-
-    private __option = {
-        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 | null
-
-    private __noOpens = {}
-
-    setOption(option: TreeOptionType) {
-        initOption(option, this.__option)
-        return this
-    }
-
-    use(initTree: any, noOpens = {}) {
-        const tree = super.use(initTree, noOpens)
-
-        // 校对偏差
-        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
-            for (const 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") {
-
-                const perW = this.__option.height / tree.size
-                const perD = this.__option.width / (tree.deep - 1)
-
-                const balanceW = this.__option.y - this.__option.height * 0.5
-                const flag = this.__option.direction == 'LR' ? 1 : -1
-
-                for (const 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") {
-
-                const perW = this.__option.width / tree.size
-                const perD = this.__option.height / (tree.deep - 1)
-
-                const balanceW = this.__option.x - this.__option.width * 0.5
-                const flag = this.__option.direction == 'TB' ? 1 : -1
-
-
-
-                for (const key in tree.node) {
-                    tree.node[key].deg = this.__option.direction == 'TB' ? Math.PI * 0.5 : Math.PI * -0.5
-
-                    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 {
-                        const 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') {
-            const cx = this.__option.x, cy = this.__option.y
-            const deg = Math.PI * 2 / tree.size
-            const per = this.__option.radius / (tree.deep - 1)
-
-            for (const key in tree.node) {
-                if (tree.node[key].left == 0.5) {
-                    tree.node[key].left = cx
-                    tree.node[key].top = cy
-                } else {
-                    const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
-
-                    tree.node[key].deg = deg * tree.node[key].top
-                    tree.node[key].left = position[0]
-                    tree.node[key].top = position[1]
-                }
-            }
-        }
-
-        return tree
-    }
-
-    bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
-        this.__rback = renderBack
-        this.__oralTree = initTree
-        this.__noOpens = noOpens
-
-        this.__preTree = this.use(this.__oralTree, this.__noOpens)
-        this.__rback(this.__preTree)
-
-        return this
-    }
-
-    unbind() {
-        this.__rback = () => null
-        this.__oralTree = null
-        this.__preTree = null
-        this.__noOpens = {}
-        return this
-    }
-
-    doUpdate() {
-        const newTree = this.use(this.__oralTree, this.__noOpens)
-
-        const cacheTree = JSON.parse(JSON.stringify(newTree))
-
-        animation((deep) => {
-
-            if (this.__preTree) {
-                for (const 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)
-        })
-
-        return this
-    }
-
-    closeNode(id: string) {
-        if (!this.__preTree) return this
-        // @ts-ignore
-        this.__noOpens[id] = true
-
-        this.doUpdate()
-        return this
-    }
-
-    openNode(id: string) {
-        if (!this.__preTree) return this
-        // @ts-ignore
-        this.__noOpens[id] = false
-
-        this.doUpdate()
-        return this
-    }
-
-    toggleNode(id: string) {
-        if (!this.__preTree) return this
-        // @ts-ignore
-        this.__noOpens[id] = !this.__noOpens[id]
-
-        this.doUpdate()
-        return this
-    }
-
-}
-
+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 { initOption } from '../common/option'
+import { animation } from "oipage/web/animation/index"
+import rotate from '../rotate'
+
+class TreeLayout extends Tree implements TreeLayoutType {
+    readonly name: string = 'TreeLayout'
+
+    private __option = {
+        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 | null
+
+    private __noOpens = {}
+
+    setOption(option: TreeOptionType) {
+        initOption(option, this.__option)
+        return this
+    }
+
+    use(initTree: any, noOpens = {}) {
+        const tree = super.use(initTree, noOpens)
+
+        // 校对偏差
+        if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
+            for (const 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") {
+
+                const perW = this.__option.height / tree.size
+                const perD = this.__option.width / (tree.deep - 1)
+
+                const balanceW = this.__option.y - this.__option.height * 0.5
+                const flag = this.__option.direction == 'LR' ? 1 : -1
+
+                for (const 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") {
+
+                const perW = this.__option.width / tree.size
+                const perD = this.__option.height / (tree.deep - 1)
+
+                const balanceW = this.__option.x - this.__option.width * 0.5
+                const flag = this.__option.direction == 'TB' ? 1 : -1
+
+
+
+                for (const key in tree.node) {
+                    tree.node[key].deg = this.__option.direction == 'TB' ? Math.PI * 0.5 : Math.PI * -0.5
+
+                    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 {
+                        const 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') {
+            const cx = this.__option.x, cy = this.__option.y
+            const deg = Math.PI * 2 / tree.size
+            const per = this.__option.radius / (tree.deep - 1)
+
+            for (const key in tree.node) {
+                if (tree.node[key].left == 0.5) {
+                    tree.node[key].left = cx
+                    tree.node[key].top = cy
+                } else {
+                    const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
+
+                    tree.node[key].deg = deg * tree.node[key].top
+                    tree.node[key].left = position[0]
+                    tree.node[key].top = position[1]
+                }
+            }
+        }
+
+        return tree
+    }
+
+    bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
+        this.__rback = renderBack
+        this.__oralTree = initTree
+        this.__noOpens = noOpens
+
+        this.__preTree = this.use(this.__oralTree, this.__noOpens)
+        this.__rback(this.__preTree)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralTree = null
+        this.__preTree = null
+        this.__noOpens = {}
+        return this
+    }
+
+    doUpdate() {
+        const newTree = this.use(this.__oralTree, this.__noOpens)
+
+        const cacheTree = JSON.parse(JSON.stringify(newTree))
+
+        animation((deep) => {
+
+            if (this.__preTree) {
+                for (const 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)
+        })
+
+        return this
+    }
+
+    closeNode(id: string) {
+        if (!this.__preTree) return this
+        // @ts-ignore
+        this.__noOpens[id] = true
+
+        this.doUpdate()
+        return this
+    }
+
+    openNode(id: string) {
+        if (!this.__preTree) return this
+        // @ts-ignore
+        this.__noOpens[id] = false
+
+        this.doUpdate()
+        return this
+    }
+
+    toggleNode(id: string) {
+        if (!this.__preTree) return this
+        // @ts-ignore
+        this.__noOpens[id] = !this.__noOpens[id]
+
+        this.doUpdate()
+        return this
+    }
+
+}
+
 export default TreeLayout