vislite 1.3.0 → 1.4.0

package/src/interpolation/Hermite.ts

@@ -1,66 +1,66 @@
-import type HermiteType from '../../types/Hermite'
-
-class Hermite implements HermiteType {
-    readonly name: string = 'Hermite'
-
-    private __u: number // 张弛系数
-
-    private __MR: number[]
-    private __a: number
-    private __b: number
-
-    constructor(u: number = 0.5) {
-        this.__u = u
-    }
-
-    /**
-    * 设置点的位置
-    * @param {Number} x1 左边点的位置
-    * @param {Number} y1
-    * @param {Number} x2 右边点的位置
-    * @param {Number} y2
-    * @param {Number} s1 两个点的斜率
-    * @param {Number} s2
-    */
-    setP(x1: number, y1: number, x2: number, y2: number, s1: number, s2: number) {
-        if (x1 < x2) {
-            // 记录原始尺寸
-            this.__a = x1
-            this.__b = x2
-            const p3 = this.__u * s1,
-                p4 = this.__u * s2
-            // 缩放到[0,1]定义域
-            y1 /= (x2 - x1)
-            y2 /= (x2 - x1)
-            // MR是提前计算好的多项式通解矩阵
-            // 为了加速计算
-            // 如上面说的
-            // 统一在[0,1]上计算后再通过缩放和移动恢复
-            // 避免了动态求解矩阵的麻烦
-            this.__MR = [
-                2 * y1 - 2 * y2 + p3 + p4,
-                3 * y2 - 3 * y1 - 2 * p3 - p4,
-                p3,
-                y1
-            ]
-        } else throw new Error('The point x-position should be increamented!')
-        return this
-    }
-
-
-    /**
-     * 根据x值返回y值
-     * @param {Number} x
-     */
-    use(x: number) {
-        if (this.__MR) {
-            const sx = (x - this.__a) / (this.__b - this.__a),
-                sx2 = sx * sx,
-                sx3 = sx * sx2
-            const sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3]
-            return sResult * (this.__b - this.__a)
-        } else throw new Error('You shoud first set the position!')
-    }
-}
-
+import type HermiteType from '../../types/Hermite'
+
+class Hermite implements HermiteType {
+    readonly name: string = 'Hermite'
+
+    private __u: number // 张弛系数
+
+    private __MR: number[]
+    private __a: number
+    private __b: number
+
+    constructor(u: number = 0.5) {
+        this.__u = u
+    }
+
+    /**
+    * 设置点的位置
+    * @param {Number} x1 左边点的位置
+    * @param {Number} y1
+    * @param {Number} x2 右边点的位置
+    * @param {Number} y2
+    * @param {Number} s1 两个点的斜率
+    * @param {Number} s2
+    */
+    setP(x1: number, y1: number, x2: number, y2: number, s1: number, s2: number) {
+        if (x1 < x2) {
+            // 记录原始尺寸
+            this.__a = x1
+            this.__b = x2
+            const p3 = this.__u * s1,
+                p4 = this.__u * s2
+            // 缩放到[0,1]定义域
+            y1 /= (x2 - x1)
+            y2 /= (x2 - x1)
+            // MR是提前计算好的多项式通解矩阵
+            // 为了加速计算
+            // 如上面说的
+            // 统一在[0,1]上计算后再通过缩放和移动恢复
+            // 避免了动态求解矩阵的麻烦
+            this.__MR = [
+                2 * y1 - 2 * y2 + p3 + p4,
+                3 * y2 - 3 * y1 - 2 * p3 - p4,
+                p3,
+                y1
+            ]
+        } else throw new Error('The point x-position should be increamented!')
+        return this
+    }
+
+
+    /**
+     * 根据x值返回y值
+     * @param {Number} x
+     */
+    use(x: number) {
+        if (this.__MR) {
+            const sx = (x - this.__a) / (this.__b - this.__a),
+                sx2 = sx * sx,
+                sx3 = sx * sx2
+            const sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3]
+            return sResult * (this.__b - this.__a)
+        } else throw new Error('You shoud first set the position!')
+    }
+}
+
 export default Hermite

package/src/layout/BarLayout.ts

@@ -0,0 +1,249 @@
+import type BarLayoutType from '../../types/BarLayout'
+import type { BarResultType } from '../../types/Bar'
+import type BarOptionType from '../../types/BarOption'
+import type BarConfigType from '../../types/BarConfig'
+
+import { initOption } from '../common/option'
+import ruler from '../ruler'
+import { animation } from "oipage/web/animation/index"
+
+class BarLayout implements BarLayoutType {
+    readonly name: string = 'BarLayout'
+
+    private __config: BarConfigType
+
+    constructor(config: BarConfigType = {}) {
+        this.__config = initOption(config, {
+
+        })
+    }
+
+    private __option = {
+        x: 50,
+        y: 350,
+        width: 400,
+        height: 300,
+        category: "xAxis",
+        duration: 200
+    }
+
+    setOption(option: BarOptionType) {
+        initOption(option, this.__option)
+        return this
+    }
+
+    private __rback: (bar: BarResultType) => void
+    private __oralBar: any
+    private __preBar: BarResultType | null
+
+    use(initBar: any) {
+        let bar: BarResultType = {
+            coordinate: {
+                x: this.__option.x,
+                y: this.__option.y,
+                width: this.__option.width,
+                height: this.__option.height,
+                xAxis: {
+                    type: this.__option.category === "xAxis" ? "category" : "value",
+                    data: []
+                },
+                yAxis: {
+                    type: this.__option.category === "xAxis" ? "value" : "category",
+                    data: []
+                }
+            },
+            node: []
+        }
+
+        let maxValue = void 0, minValue = void 0
+
+        // 求解一维最值
+        if (initBar.data) {
+            for (let val of initBar.data) {
+                if (maxValue === void 0 || val > maxValue) maxValue = val
+                if (minValue === void 0 || val < minValue) minValue = val
+            }
+        }
+
+        // 求解二维最值
+        else if (initBar.value) {
+            for (let item of initBar.value) {
+                for (let val of item.data) {
+                    if (maxValue === void 0 || val > maxValue) maxValue = val
+                    if (minValue === void 0 || val < minValue) minValue = val
+                }
+            }
+        } else {
+            throw new Error('No data leads to parsing errors')
+        }
+
+        let rulerArray = ruler(maxValue || 0, minValue || 0, 5)
+
+        let categoryLen // 分类轴长度
+        let valueLen // 数值轴长度
+
+        if (this.__option.category === "xAxis") {
+
+            // 设置刻度尺刻度
+            bar.coordinate.xAxis.data = initBar.category
+            bar.coordinate.yAxis.data = rulerArray
+
+            // 设置轴长度
+            categoryLen = this.__option.width
+            valueLen = -1 * this.__option.height
+        } else {
+            bar.coordinate.xAxis.data = rulerArray
+            bar.coordinate.yAxis.data = initBar.category
+            categoryLen = this.__option.height
+            valueLen = this.__option.width
+        }
+
+        // 求解分类轴刻度
+        let category: any = []
+
+        // 一维
+        let categorySingle1Width = categoryLen / initBar.category.length
+        let categorySingle2Width = categorySingle1Width * 0.9
+        let categoryStart = categorySingle1Width * 0.05
+        if (initBar.data) {
+            for (let i = 0; i < initBar.data.length; i++) {
+                category.push([
+                    categoryStart + categorySingle1Width * i,
+                    categorySingle2Width
+                ])
+            }
+        }
+
+        // 二维
+        else {
+            let categorySingle3Width = categorySingle2Width / initBar.value.length
+            let categorySingle4Width = categorySingle3Width * 0.9
+            let categoryStartBlance = categorySingle3Width * 0.05
+            for (let i = 0; i < initBar.value[0].data.length; i++) {
+                category[i] = []
+                for (let j = 0; j < initBar.value.length; j++) {
+                    category[i].push([
+                        categoryStart + categorySingle1Width * i + categorySingle3Width * j + categoryStartBlance,
+                        categorySingle4Width
+                    ])
+                }
+            }
+        }
+
+        // 根据值获取长度
+        let singleValueLen = valueLen / (rulerArray[rulerArray.length - 1] - rulerArray[0])
+        let getLenByValue = (value: number) => {
+            return singleValueLen * (value - rulerArray[0])
+        }
+
+        // 计算小矩形
+        if (this.__option.category === "xAxis") { // 分类在x轴，从左到右
+            if (initBar.data) {
+                let nodeBar = []
+                for (let i = 0; i < initBar.data.length; i++) {
+                    nodeBar.push({
+                        x: this.__option.x + category[i][0],
+                        y: this.__option.y,
+                        width: category[i][1],
+                        height: getLenByValue(initBar.data[i]),
+                        value: initBar.data[i]
+                    })
+                }
+                bar.node.push({
+                    bar: nodeBar
+                })
+            } else {
+                for (let j = 0; j < initBar.value.length; j++) {
+                    let nodeBar = []
+                    for (let i = 0; i < initBar.value[j].data.length; i++) {
+                        nodeBar.push({
+                            x: this.__option.x + category[i][j][0],
+                            y: this.__option.y,
+                            width: category[i][j][1],
+                            height: getLenByValue(initBar.value[j].data[i]),
+                            value: initBar.value[j].data[i]
+                        })
+                    }
+                    bar.node.push({
+                        name: initBar.value[j].name,
+                        bar: nodeBar
+                    })
+                }
+            }
+        } else { // 分类在y轴，从上到下
+            if (initBar.data) {
+                let nodeBar = []
+                for (let i = 0; i < initBar.data.length; i++) {
+                    nodeBar.push({
+                        x: this.__option.x,
+                        y: this.__option.y - this.__option.height + category[i][0],
+                        width: getLenByValue(initBar.data[i]),
+                        height: category[i][1],
+                        value: initBar.data[i]
+                    })
+                }
+                bar.node.push({
+                    bar: nodeBar
+                })
+            } else {
+                for (let j = 0; j < initBar.value.length; j++) {
+                    let nodeBar = []
+                    for (let i = 0; i < initBar.value[j].data.length; i++) {
+                        nodeBar.push({
+                            x: this.__option.x,
+                            y: this.__option.y - this.__option.height + category[i][j][0],
+                            width: getLenByValue(initBar.value[j].data[i]),
+                            height: category[i][j][1],
+                            value: initBar.value[j].data[i]
+                        })
+                    }
+                    bar.node.push({
+                        name: initBar.value[j].name,
+                        bar: nodeBar
+                    })
+                }
+            }
+        }
+
+        return bar
+    }
+
+    bind(initBar: any, renderBack: (bar: BarResultType) => void) {
+        this.__rback = renderBack
+        this.__oralBar = initBar
+
+        this.__preBar = this.use(this.__oralBar)
+        this.__rback(this.__preBar)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralBar = null
+        this.__preBar = null
+        return this
+    }
+
+    doUpdate() {
+        const newBar = this.use(this.__oralBar)
+
+        const cacheBar = JSON.parse(JSON.stringify(newBar))
+
+        animation((deep) => {
+
+            if (this.__preBar) {
+                // todo
+            }
+
+            this.__rback(cacheBar)
+
+        }, this.__option.duration, () => {
+            this.__preBar = newBar
+            this.__rback(this.__preBar)
+        })
+        return this
+    }
+}
+
+export default BarLayout

package/src/layout/PieLayout.ts

@@ -0,0 +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
+    }
+}
+
+export default PieLayout

package/src/layout/TreeLayout.ts

@@ -4,7 +4,7 @@ import type TreeOptionType from '../../types/TreeOption'
 
 import Tree from '../common/tree/index'
 import { initOption } from '../common/option'
-import { animation } from "oipage/corejs/animation/index"
+import { animation } from "oipage/web/animation/index"
 import rotate from '../rotate'
 
 class TreeLayout extends Tree implements TreeLayoutType {
@@ -168,6 +168,7 @@ class TreeLayout extends Tree implements TreeLayoutType {
 
     closeNode(id: string) {
         if (!this.__preTree) return this
+        // @ts-ignore
         this.__noOpens[id] = true
 
         this.doUpdate()
@@ -176,6 +177,7 @@ class TreeLayout extends Tree implements TreeLayoutType {
 
     openNode(id: string) {
         if (!this.__preTree) return this
+        // @ts-ignore
         this.__noOpens[id] = false
 
         this.doUpdate()
@@ -184,6 +186,7 @@ class TreeLayout extends Tree implements TreeLayoutType {
 
     toggleNode(id: string) {
         if (!this.__preTree) return this
+        // @ts-ignore
         this.__noOpens[id] = !this.__noOpens[id]
 
         this.doUpdate()

package/src/move.ts

@@ -1,8 +1,8 @@
-// 点（x,y）沿着向量（ax,ay）方向移动距离d
-export default function (ax: number, ay: number, d: number, x: number, y: number): [number, number] {
-    const sqrt = Math.sqrt(ax * ax + ay * ay)
-    return [
-        ax * d / sqrt + x,
-        ay * d / sqrt + y
-    ]
+// 点（x,y）沿着向量（ax,ay）方向移动距离d
+export default function (ax: number, ay: number, d: number, x: number, y: number): [number, number] {
+    const sqrt = Math.sqrt(ax * ax + ay * ay)
+    return [
+        ax * d / sqrt + x,
+        ay * d / sqrt + y
+    ]
 }

package/src/rotate.ts

@@ -1,8 +1,8 @@
-// 点（x,y）围绕中心（cx,cy）旋转deg度
-export default function (cx: number, cy: number, deg: number, x: number, y: number): [number, number] {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [
-        (x - cx) * cos - (y - cy) * sin + cx,
-        (x - cx) * sin + (y - cy) * cos + cy
-    ]
+// 点（x,y）围绕中心（cx,cy）旋转deg度
+export default function (cx: number, cy: number, deg: number, x: number, y: number): [number, number] {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [
+        (x - cx) * cos - (y - cy) * sin + cx,
+        (x - cx) * sin + (y - cy) * cos + cy
+    ]
 }