vislite 1.6.0-alpha.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG +5 -1
- package/README.md +284 -284
- package/lib/BarLayout/index.es.js +4 -2
- package/lib/BarLayout/index.es.min.js +2 -2
- package/lib/Buffer/index.es.js +1 -1
- package/lib/Buffer/index.es.min.js +1 -1
- package/lib/Canvas/index.es.js +5 -3
- package/lib/Canvas/index.es.min.js +2 -2
- package/lib/Cardinal/index.es.js +1 -1
- package/lib/Cardinal/index.es.min.js +1 -1
- package/lib/Eoap/index.es.js +1 -1
- package/lib/Eoap/index.es.min.js +1 -1
- package/lib/Hermite/index.es.js +1 -1
- package/lib/Hermite/index.es.min.js +1 -1
- package/lib/MapCoordinate/index.es.js +1 -1
- package/lib/MapCoordinate/index.es.min.js +1 -1
- package/lib/Matrix4/index.es.js +1 -1
- package/lib/Matrix4/index.es.min.js +1 -1
- package/lib/Mercator/index.es.js +1 -1
- package/lib/Mercator/index.es.min.js +1 -1
- package/lib/PieLayout/index.es.js +3 -2
- package/lib/PieLayout/index.es.min.js +1 -1
- package/lib/RawCanvas/index.es.js +1 -1
- package/lib/RawCanvas/index.es.min.js +1 -1
- package/lib/SVG/index.es.js +1 -1
- package/lib/SVG/index.es.min.js +1 -1
- package/lib/Shader/index.es.js +1 -1
- package/lib/Shader/index.es.min.js +1 -1
- package/lib/Texture/index.es.js +1 -1
- package/lib/Texture/index.es.min.js +1 -1
- package/lib/TreeLayout/index.es.js +2 -1
- package/lib/TreeLayout/index.es.min.js +3 -3
- package/lib/animation/index.es.js +1 -1
- package/lib/animation/index.es.min.js +1 -1
- package/lib/assemble/index.es.js +1 -1
- package/lib/assemble/index.es.min.js +1 -1
- package/lib/getLoopColors/index.es.js +1 -1
- package/lib/getLoopColors/index.es.min.js +1 -1
- package/lib/getWebGLContext/index.es.js +1 -1
- package/lib/getWebGLContext/index.es.min.js +1 -1
- package/lib/index.umd.js +11 -5
- package/lib/index.umd.min.js +2 -2
- package/lib/initOption/index.es.js +1 -1
- package/lib/initOption/index.es.min.js +1 -1
- package/lib/mergeOption/index.es.js +1 -1
- package/lib/mergeOption/index.es.min.js +1 -1
- package/lib/move/index.es.js +1 -1
- package/lib/move/index.es.min.js +1 -1
- package/lib/rotate/index.es.js +1 -1
- package/lib/rotate/index.es.min.js +1 -1
- package/lib/ruler/index.es.js +1 -1
- package/lib/ruler/index.es.min.js +1 -1
- package/lib/scale/index.es.js +1 -1
- package/lib/scale/index.es.min.js +1 -1
- package/lib/throttle/index.es.js +1 -1
- package/lib/throttle/index.es.min.js +1 -1
- package/package.json +1 -1
- package/src/Canvas.ts +89 -89
- package/src/SVG.ts +55 -55
- package/src/common/tree/toPlainTree.ts +135 -135
- package/src/common/webgl/texture.ts +98 -98
- package/src/layout/BarLayout.ts +249 -248
- package/src/layout/PieLayout.ts +144 -141
- package/src/layout/TreeLayout.ts +200 -197
- package/types/Canvas.d.ts +3 -1
package/src/layout/PieLayout.ts
CHANGED
|
@@ -1,142 +1,145 @@
|
|
|
1
|
-
import type PieLayoutType from '../../types/PieLayout'
|
|
2
|
-
import type { PieResultType } from '../../types/Pie'
|
|
3
|
-
import type PieOptionType from '../../types/PieOption'
|
|
4
|
-
import type { default as PieConfigType, nameType, valueType } from '../../types/PieConfig'
|
|
5
|
-
|
|
6
|
-
import { initOption } from '../common/option'
|
|
7
|
-
import rotate from '../rotate'
|
|
8
|
-
import { animation } from "oipage/web/animation/index"
|
|
9
|
-
|
|
10
|
-
class PieLayout implements PieLayoutType {
|
|
11
|
-
readonly name: string = 'PieLayout'
|
|
12
|
-
|
|
13
|
-
private __config: PieConfigType
|
|
14
|
-
|
|
15
|
-
constructor(config: PieConfigType = {}) {
|
|
16
|
-
this.__config = initOption(config, {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
private
|
|
37
|
-
|
|
38
|
-
private
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
this.
|
|
96
|
-
this.
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
this.
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
this.
|
|
135
|
-
|
|
136
|
-
})
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
1
|
+
import type PieLayoutType from '../../types/PieLayout'
|
|
2
|
+
import type { PieResultType } from '../../types/Pie'
|
|
3
|
+
import type PieOptionType from '../../types/PieOption'
|
|
4
|
+
import type { default as PieConfigType, nameType, valueType } from '../../types/PieConfig'
|
|
5
|
+
|
|
6
|
+
import { initOption } from '../common/option'
|
|
7
|
+
import rotate from '../rotate'
|
|
8
|
+
import { animation } from "oipage/web/animation/index"
|
|
9
|
+
|
|
10
|
+
class PieLayout implements PieLayoutType {
|
|
11
|
+
readonly name: string = 'PieLayout'
|
|
12
|
+
|
|
13
|
+
private __config: PieConfigType
|
|
14
|
+
|
|
15
|
+
constructor(config: PieConfigType = {}) {
|
|
16
|
+
this.__config = initOption(config, {
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
18
|
+
name: (pieData: any, initPie: Array<any>) => pieData.name,
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
20
|
+
value: (pieData: any, initPie: Array<any>) => pieData.value
|
|
21
|
+
})
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
private __option = {
|
|
25
|
+
cx: 200,
|
|
26
|
+
cy: 200,
|
|
27
|
+
radius: [50, 100],
|
|
28
|
+
duration: 200,
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
setOption(option: PieOptionType) {
|
|
32
|
+
initOption(option, this.__option)
|
|
33
|
+
return this
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
private __rback: (pie: PieResultType) => void
|
|
37
|
+
private __oralPie: any
|
|
38
|
+
private __prePie: PieResultType | null
|
|
39
|
+
|
|
40
|
+
private __hoverIndex = -1 // 表示当前悬浮的序号
|
|
41
|
+
|
|
42
|
+
use(initPie: Array<any>, hoverIndex: number = -1) {
|
|
43
|
+
const pie: PieResultType = {
|
|
44
|
+
count: initPie.length,
|
|
45
|
+
cx: this.__option.cx,
|
|
46
|
+
cy: this.__option.cy,
|
|
47
|
+
radius: this.__option.radius,
|
|
48
|
+
hoverIndex,
|
|
49
|
+
node: []
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
let totalValue = 0
|
|
53
|
+
const names = [], values = []
|
|
54
|
+
for (let i = 0; i < initPie.length; i++) {
|
|
55
|
+
names[i] = (this.__config.name as nameType)(initPie[i], initPie)
|
|
56
|
+
values[i] = (this.__config.value as valueType)(initPie[i], initPie)
|
|
57
|
+
|
|
58
|
+
totalValue += values[i]
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
let beginDeg = Math.PI * -0.5, currenDeg
|
|
62
|
+
for (let i = 0; i < initPie.length; i++) {
|
|
63
|
+
currenDeg = values[i] / totalValue * Math.PI * 2
|
|
64
|
+
const radius = [this.__option.radius[0], this.__option.radius[1] * (1 + (hoverIndex === i ? 0.05 : 0))]
|
|
65
|
+
|
|
66
|
+
const pdeg = beginDeg + currenDeg * 0.5, pradius = Math.max(this.__option.radius[0], this.__option.radius[1])
|
|
67
|
+
const p0 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius, pie.cy)
|
|
68
|
+
const p1 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius + 15, pie.cy)
|
|
69
|
+
|
|
70
|
+
const pflag = p0[0] > pie.cx ? 1 : -1
|
|
71
|
+
const p2 = [p1[0] + pflag * 20, p1[1]]
|
|
72
|
+
const p3 = [p1[0] + pflag * 25, p1[1]]
|
|
73
|
+
|
|
74
|
+
pie.node[i] = {
|
|
75
|
+
value: values[i],
|
|
76
|
+
name: names[i],
|
|
77
|
+
beginDeg,
|
|
78
|
+
deg: currenDeg,
|
|
79
|
+
isHover: hoverIndex === i,
|
|
80
|
+
radius,
|
|
81
|
+
label: {
|
|
82
|
+
line: [p0, p1, p2],
|
|
83
|
+
position: p3,
|
|
84
|
+
align: pflag === -1 ? "right" : "left"
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
beginDeg += currenDeg
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return pie
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
bind(initPie: Array<any>, renderBack: (pie: PieResultType) => void) {
|
|
95
|
+
this.__rback = renderBack
|
|
96
|
+
this.__oralPie = initPie
|
|
97
|
+
|
|
98
|
+
this.__prePie = this.use(this.__oralPie, this.__hoverIndex)
|
|
99
|
+
this.__rback(this.__prePie)
|
|
100
|
+
|
|
101
|
+
return this
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
unbind() {
|
|
105
|
+
this.__rback = () => null
|
|
106
|
+
this.__oralPie = null
|
|
107
|
+
this.__prePie = null
|
|
108
|
+
this.__hoverIndex = -1
|
|
109
|
+
return this
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
setHover(index: number) {
|
|
113
|
+
if (!this.__prePie || this.__hoverIndex === index) return this
|
|
114
|
+
|
|
115
|
+
this.__hoverIndex = index
|
|
116
|
+
|
|
117
|
+
this.doUpdate()
|
|
118
|
+
return this
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
doUpdate() {
|
|
122
|
+
const newPie = this.use(this.__oralPie, this.__hoverIndex)
|
|
123
|
+
|
|
124
|
+
const cachePie = JSON.parse(JSON.stringify(newPie))
|
|
125
|
+
|
|
126
|
+
animation((deep) => {
|
|
127
|
+
|
|
128
|
+
if (this.__prePie) {
|
|
129
|
+
for (let i = 0; i < cachePie.count; i++) {
|
|
130
|
+
cachePie.node[i].radius[1] = this.__prePie.node[i].radius[1] + (newPie.node[i].radius[1] - this.__prePie.node[i].radius[1]) * deep
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
this.__rback(cachePie)
|
|
135
|
+
|
|
136
|
+
}, this.__option.duration, () => {
|
|
137
|
+
this.__prePie = newPie
|
|
138
|
+
this.__rback(this.__prePie)
|
|
139
|
+
})
|
|
140
|
+
|
|
141
|
+
return this
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
142
145
|
export default PieLayout
|