vislite 0.7.0 → 0.7.1
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 +11 -1
- package/README.md +135 -135
- package/lib/Buffer/index.umd.js +2 -2
- package/lib/Buffer/index.umd.min.js +2 -2
- package/lib/Canvas/index.umd.js +19 -13
- package/lib/Canvas/index.umd.min.js +3 -3
- package/lib/Cardinal/index.umd.js +2 -2
- package/lib/Cardinal/index.umd.min.js +2 -2
- package/lib/Eoap/index.umd.js +2 -2
- package/lib/Eoap/index.umd.min.js +2 -2
- package/lib/Geometry/index.umd.js +2 -2
- package/lib/Geometry/index.umd.min.js +2 -2
- package/lib/Hermite/index.umd.js +2 -2
- package/lib/Hermite/index.umd.min.js +2 -2
- package/lib/Matrix4/index.umd.js +2 -2
- package/lib/Matrix4/index.umd.min.js +2 -2
- package/lib/Mercator/index.umd.js +2 -2
- package/lib/Mercator/index.umd.min.js +2 -2
- package/lib/OralCanvas/index.es.js +11 -7
- package/lib/OralCanvas/index.es.min.js +3 -3
- package/lib/OralWebGL/index.es.js +2 -3
- package/lib/OralWebGL/index.es.min.js +3 -3
- package/lib/SVG/index.umd.js +2 -2
- package/lib/SVG/index.umd.min.js +2 -2
- package/lib/Shader/index.umd.js +2 -3
- package/lib/Shader/index.umd.min.js +3 -3
- package/lib/Texture/index.umd.js +2 -2
- package/lib/Texture/index.umd.min.js +2 -2
- package/lib/TreeLayout/index.umd.js +2 -2
- package/lib/TreeLayout/index.umd.min.js +2 -2
- package/lib/WebGL/index.umd.js +2 -3
- package/lib/WebGL/index.umd.min.js +3 -3
- package/lib/animation/index.umd.js +2 -2
- package/lib/animation/index.umd.min.js +2 -2
- package/lib/formatColor/index.umd.js +2 -2
- package/lib/formatColor/index.umd.min.js +2 -2
- package/lib/getLoopColors/index.umd.js +2 -2
- package/lib/getLoopColors/index.umd.min.js +2 -2
- package/lib/getWebGLContext/index.umd.js +2 -2
- package/lib/getWebGLContext/index.umd.min.js +2 -2
- package/lib/index.umd.js +19 -14
- package/lib/index.umd.min.js +3 -3
- package/lib/move/index.umd.js +2 -2
- package/lib/move/index.umd.min.js +2 -2
- package/lib/resizeObserver/index.umd.js +2 -2
- package/lib/resizeObserver/index.umd.min.js +2 -2
- package/lib/rotate/index.umd.js +2 -2
- package/lib/rotate/index.umd.min.js +2 -2
- package/lib/ruler/index.umd.js +2 -2
- package/lib/ruler/index.umd.min.js +2 -2
- package/lib/scale/index.umd.js +2 -2
- package/lib/scale/index.umd.min.js +2 -2
- package/lib/throttle/index.umd.js +2 -2
- package/lib/throttle/index.umd.min.js +2 -2
- package/lib/viewHandler/index.umd.js +2 -2
- package/lib/viewHandler/index.umd.min.js +2 -2
- package/package.json +1 -1
- package/src/Canvas.ts +8 -6
- package/src/Geometry.ts +0 -1
- package/src/Matrix4/rotate.ts +15 -15
- package/src/Matrix4/transform.ts +64 -64
- package/src/WebGL.ts +66 -66
- package/src/common/assemble.ts +22 -22
- package/src/common/canvas/index.ts +10 -4
- package/src/common/canvas/painter.ts +1 -1
- package/src/common/geometry/prism-vertical.ts +40 -40
- package/src/common/geometry/tool/rotateLine.ts +35 -35
- package/src/common/setStyle.ts +5 -5
- package/src/common/svg/config.ts +190 -190
- package/src/common/svg/index.ts +356 -356
- package/src/common/svg/tool.ts +44 -44
- package/src/common/tree/toInnerTree.ts +59 -59
- package/src/common/tree/toPlainTree.ts +132 -132
- package/src/common/webgl/buffer.ts +79 -79
- package/src/common/webgl/doDraw.ts +108 -108
- package/src/common/webgl/getWebGLContext.ts +28 -28
- package/src/common/webgl/index.ts +226 -226
- package/src/common/webgl/shader.ts +1 -1
- package/src/common/webgl/texture.ts +97 -97
- package/src/layout/TreeLayout.ts +188 -188
- package/src/resizeObserver.ts +37 -37
- package/src/ruler.ts +209 -209
- package/src/viewHandler.ts +160 -160
- package/types/Canvas.d.ts +308 -308
- package/types/Geometry.d.ts +65 -65
- package/types/Object3D.d.ts +114 -114
- package/types/SVGConfig.d.ts +79 -79
- package/types/Shader.d.ts +23 -21
- package/types/TreeConfig.d.ts +36 -36
- package/uni-app/ui-canvas.vue +53 -9
package/src/layout/TreeLayout.ts
CHANGED
|
@@ -1,189 +1,189 @@
|
|
|
1
|
-
import type TreeLayoutType from '../../types/TreeLayout'
|
|
2
|
-
import type { TreeResultType } from '../../types/Tree'
|
|
3
|
-
import type TreeOptionType from '../../types/TreeOption'
|
|
4
|
-
|
|
5
|
-
import Tree from '../common/tree/index'
|
|
6
|
-
import mergeOption from '../common/mergeOption'
|
|
7
|
-
import animation from '../animation'
|
|
8
|
-
import rotate from '../rotate'
|
|
9
|
-
|
|
10
|
-
class TreeLayout extends Tree implements TreeLayoutType {
|
|
11
|
-
readonly name: string = 'TreeLayout'
|
|
12
|
-
|
|
13
|
-
private __option = {
|
|
14
|
-
offsetX: 0,
|
|
15
|
-
offsetY: 0,
|
|
16
|
-
duration: 500,
|
|
17
|
-
type: "plain",
|
|
18
|
-
direction: "LR",
|
|
19
|
-
x: 100,
|
|
20
|
-
y: 100,
|
|
21
|
-
width: 100,
|
|
22
|
-
height: 100,
|
|
23
|
-
radius: 100
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
private __rback: (tree: TreeResultType) => void
|
|
27
|
-
private __oralTree: any
|
|
28
|
-
private __preTree: TreeResultType | null
|
|
29
|
-
|
|
30
|
-
private __noOpens = {}
|
|
31
|
-
|
|
32
|
-
setOption(option: TreeOptionType) {
|
|
33
|
-
mergeOption(option, this.__option)
|
|
34
|
-
return this
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
use(initTree: any, noOpens = {}) {
|
|
38
|
-
const tree = super.use(initTree, noOpens)
|
|
39
|
-
|
|
40
|
-
// 校对偏差
|
|
41
|
-
if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
|
|
42
|
-
for (const key in tree.node) {
|
|
43
|
-
if (!tree.node[key].show) {
|
|
44
|
-
|
|
45
|
-
let deep = 0, pid = key
|
|
46
|
-
do {
|
|
47
|
-
pid = tree.node[pid].pid
|
|
48
|
-
deep++
|
|
49
|
-
} while (!tree.node[pid].show)
|
|
50
|
-
|
|
51
|
-
tree.node[key].left += this.__option.offsetX * deep
|
|
52
|
-
tree.node[key].top += this.__option.offsetY * deep
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
if (this.__option.type == 'rect') {
|
|
58
|
-
if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
|
|
59
|
-
|
|
60
|
-
const perW = this.__option.height / tree.size
|
|
61
|
-
const perD = this.__option.width / (tree.deep - 1)
|
|
62
|
-
|
|
63
|
-
const balanceW = this.__option.y - this.__option.height * 0.5
|
|
64
|
-
const flag = this.__option.direction == 'LR' ? 1 : -1
|
|
65
|
-
|
|
66
|
-
for (const key in tree.node) {
|
|
67
|
-
if (tree.deep == 1) {
|
|
68
|
-
tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
|
|
69
|
-
tree.node[key].top = this.__option.y
|
|
70
|
-
} else {
|
|
71
|
-
tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
|
|
72
|
-
tree.node[key].top = tree.node[key].top * perW + balanceW
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
} else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
|
|
76
|
-
|
|
77
|
-
const perW = this.__option.width / tree.size
|
|
78
|
-
const perD = this.__option.height / (tree.deep - 1)
|
|
79
|
-
|
|
80
|
-
const balanceW = this.__option.x - this.__option.width * 0.5
|
|
81
|
-
const flag = this.__option.direction == 'TB' ? 1 : -1
|
|
82
|
-
|
|
83
|
-
for (const key in tree.node) {
|
|
84
|
-
if (tree.deep == 1) {
|
|
85
|
-
tree.node[key].left = this.__option.x
|
|
86
|
-
tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
|
|
87
|
-
} else {
|
|
88
|
-
const left = tree.node[key].left
|
|
89
|
-
|
|
90
|
-
tree.node[key].left = tree.node[key].top * perW + balanceW
|
|
91
|
-
tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
} else if (this.__option.type == 'circle') {
|
|
98
|
-
const cx = this.__option.x, cy = this.__option.y
|
|
99
|
-
const deg = Math.PI * 2 / tree.size
|
|
100
|
-
const per = this.__option.radius / (tree.deep - 1)
|
|
101
|
-
|
|
102
|
-
for (const key in tree.node) {
|
|
103
|
-
if (tree.node[key].left == 0.5) {
|
|
104
|
-
tree.node[key].left = cx
|
|
105
|
-
tree.node[key].top = cy
|
|
106
|
-
} else {
|
|
107
|
-
const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
|
|
108
|
-
|
|
109
|
-
tree.node[key].left = position[0]
|
|
110
|
-
tree.node[key].top = position[1]
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return tree
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
|
|
119
|
-
this.__rback = renderBack
|
|
120
|
-
this.__oralTree = initTree
|
|
121
|
-
this.__noOpens = noOpens
|
|
122
|
-
|
|
123
|
-
this.__preTree = this.use(this.__oralTree, this.__noOpens)
|
|
124
|
-
this.__rback(this.__preTree)
|
|
125
|
-
|
|
126
|
-
return this
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
unbind() {
|
|
130
|
-
this.__rback = () => null
|
|
131
|
-
this.__oralTree = null
|
|
132
|
-
this.__preTree = null
|
|
133
|
-
this.__noOpens = {}
|
|
134
|
-
return this
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
private doUpdate() {
|
|
138
|
-
const newTree = this.use(this.__oralTree, this.__noOpens)
|
|
139
|
-
|
|
140
|
-
const cacheTree = JSON.parse(JSON.stringify(newTree))
|
|
141
|
-
|
|
142
|
-
animation((deep) => {
|
|
143
|
-
|
|
144
|
-
if (this.__preTree) {
|
|
145
|
-
for (const key in cacheTree.node) {
|
|
146
|
-
if (newTree.node[key].show || this.__preTree.node[key].show) {
|
|
147
|
-
cacheTree.node[key].show = true
|
|
148
|
-
|
|
149
|
-
cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
|
|
150
|
-
cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
this.__rback(cacheTree)
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
}, this.__option.duration, () => {
|
|
158
|
-
this.__preTree = newTree
|
|
159
|
-
this.__rback(this.__preTree)
|
|
160
|
-
})
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
closeNode(id: string) {
|
|
164
|
-
if (!this.__preTree) return this
|
|
165
|
-
this.__noOpens[id] = true
|
|
166
|
-
|
|
167
|
-
this.doUpdate()
|
|
168
|
-
return this
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
openNode(id: string) {
|
|
172
|
-
if (!this.__preTree) return this
|
|
173
|
-
this.__noOpens[id] = false
|
|
174
|
-
|
|
175
|
-
this.doUpdate()
|
|
176
|
-
return this
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
toggleNode(id: string) {
|
|
180
|
-
if (!this.__preTree) return this
|
|
181
|
-
this.__noOpens[id] = !this.__noOpens[id]
|
|
182
|
-
|
|
183
|
-
this.doUpdate()
|
|
184
|
-
return this
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
}
|
|
188
|
-
|
|
1
|
+
import type TreeLayoutType from '../../types/TreeLayout'
|
|
2
|
+
import type { TreeResultType } from '../../types/Tree'
|
|
3
|
+
import type TreeOptionType from '../../types/TreeOption'
|
|
4
|
+
|
|
5
|
+
import Tree from '../common/tree/index'
|
|
6
|
+
import mergeOption from '../common/mergeOption'
|
|
7
|
+
import animation from '../animation'
|
|
8
|
+
import rotate from '../rotate'
|
|
9
|
+
|
|
10
|
+
class TreeLayout extends Tree implements TreeLayoutType {
|
|
11
|
+
readonly name: string = 'TreeLayout'
|
|
12
|
+
|
|
13
|
+
private __option = {
|
|
14
|
+
offsetX: 0,
|
|
15
|
+
offsetY: 0,
|
|
16
|
+
duration: 500,
|
|
17
|
+
type: "plain",
|
|
18
|
+
direction: "LR",
|
|
19
|
+
x: 100,
|
|
20
|
+
y: 100,
|
|
21
|
+
width: 100,
|
|
22
|
+
height: 100,
|
|
23
|
+
radius: 100
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
private __rback: (tree: TreeResultType) => void
|
|
27
|
+
private __oralTree: any
|
|
28
|
+
private __preTree: TreeResultType | null
|
|
29
|
+
|
|
30
|
+
private __noOpens = {}
|
|
31
|
+
|
|
32
|
+
setOption(option: TreeOptionType) {
|
|
33
|
+
mergeOption(option, this.__option)
|
|
34
|
+
return this
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
use(initTree: any, noOpens = {}) {
|
|
38
|
+
const tree = super.use(initTree, noOpens)
|
|
39
|
+
|
|
40
|
+
// 校对偏差
|
|
41
|
+
if (this.__option.offsetX != 0 || this.__option.offsetY != 0) {
|
|
42
|
+
for (const key in tree.node) {
|
|
43
|
+
if (!tree.node[key].show) {
|
|
44
|
+
|
|
45
|
+
let deep = 0, pid = key
|
|
46
|
+
do {
|
|
47
|
+
pid = tree.node[pid].pid
|
|
48
|
+
deep++
|
|
49
|
+
} while (!tree.node[pid].show)
|
|
50
|
+
|
|
51
|
+
tree.node[key].left += this.__option.offsetX * deep
|
|
52
|
+
tree.node[key].top += this.__option.offsetY * deep
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
if (this.__option.type == 'rect') {
|
|
58
|
+
if (this.__option.direction == 'LR' || this.__option.direction == "RL") {
|
|
59
|
+
|
|
60
|
+
const perW = this.__option.height / tree.size
|
|
61
|
+
const perD = this.__option.width / (tree.deep - 1)
|
|
62
|
+
|
|
63
|
+
const balanceW = this.__option.y - this.__option.height * 0.5
|
|
64
|
+
const flag = this.__option.direction == 'LR' ? 1 : -1
|
|
65
|
+
|
|
66
|
+
for (const key in tree.node) {
|
|
67
|
+
if (tree.deep == 1) {
|
|
68
|
+
tree.node[key].left = this.__option.x + this.__option.width * 0.5 * flag
|
|
69
|
+
tree.node[key].top = this.__option.y
|
|
70
|
+
} else {
|
|
71
|
+
tree.node[key].left = this.__option.x + (tree.node[key].left - 0.5) * perD * flag
|
|
72
|
+
tree.node[key].top = tree.node[key].top * perW + balanceW
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
} else if (this.__option.direction == 'TB' || this.__option.direction == "BT") {
|
|
76
|
+
|
|
77
|
+
const perW = this.__option.width / tree.size
|
|
78
|
+
const perD = this.__option.height / (tree.deep - 1)
|
|
79
|
+
|
|
80
|
+
const balanceW = this.__option.x - this.__option.width * 0.5
|
|
81
|
+
const flag = this.__option.direction == 'TB' ? 1 : -1
|
|
82
|
+
|
|
83
|
+
for (const key in tree.node) {
|
|
84
|
+
if (tree.deep == 1) {
|
|
85
|
+
tree.node[key].left = this.__option.x
|
|
86
|
+
tree.node[key].top = this.__option.y + this.__option.height * 0.5 * flag
|
|
87
|
+
} else {
|
|
88
|
+
const left = tree.node[key].left
|
|
89
|
+
|
|
90
|
+
tree.node[key].left = tree.node[key].top * perW + balanceW
|
|
91
|
+
tree.node[key].top = this.__option.y + (left - 0.5) * perD * flag
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
} else if (this.__option.type == 'circle') {
|
|
98
|
+
const cx = this.__option.x, cy = this.__option.y
|
|
99
|
+
const deg = Math.PI * 2 / tree.size
|
|
100
|
+
const per = this.__option.radius / (tree.deep - 1)
|
|
101
|
+
|
|
102
|
+
for (const key in tree.node) {
|
|
103
|
+
if (tree.node[key].left == 0.5) {
|
|
104
|
+
tree.node[key].left = cx
|
|
105
|
+
tree.node[key].top = cy
|
|
106
|
+
} else {
|
|
107
|
+
const position = rotate(cx, cy, deg * tree.node[key].top, cx + (tree.node[key].left - 0.5) * per, cy)
|
|
108
|
+
|
|
109
|
+
tree.node[key].left = position[0]
|
|
110
|
+
tree.node[key].top = position[1]
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return tree
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
bind(initTree: any, renderBack: (tree: TreeResultType) => void, noOpens = {}) {
|
|
119
|
+
this.__rback = renderBack
|
|
120
|
+
this.__oralTree = initTree
|
|
121
|
+
this.__noOpens = noOpens
|
|
122
|
+
|
|
123
|
+
this.__preTree = this.use(this.__oralTree, this.__noOpens)
|
|
124
|
+
this.__rback(this.__preTree)
|
|
125
|
+
|
|
126
|
+
return this
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
unbind() {
|
|
130
|
+
this.__rback = () => null
|
|
131
|
+
this.__oralTree = null
|
|
132
|
+
this.__preTree = null
|
|
133
|
+
this.__noOpens = {}
|
|
134
|
+
return this
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
private doUpdate() {
|
|
138
|
+
const newTree = this.use(this.__oralTree, this.__noOpens)
|
|
139
|
+
|
|
140
|
+
const cacheTree = JSON.parse(JSON.stringify(newTree))
|
|
141
|
+
|
|
142
|
+
animation((deep) => {
|
|
143
|
+
|
|
144
|
+
if (this.__preTree) {
|
|
145
|
+
for (const key in cacheTree.node) {
|
|
146
|
+
if (newTree.node[key].show || this.__preTree.node[key].show) {
|
|
147
|
+
cacheTree.node[key].show = true
|
|
148
|
+
|
|
149
|
+
cacheTree.node[key].left = this.__preTree.node[key].left + (newTree.node[key].left - this.__preTree.node[key].left) * deep
|
|
150
|
+
cacheTree.node[key].top = this.__preTree.node[key].top + (newTree.node[key].top - this.__preTree.node[key].top) * deep
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
this.__rback(cacheTree)
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
}, this.__option.duration, () => {
|
|
158
|
+
this.__preTree = newTree
|
|
159
|
+
this.__rback(this.__preTree)
|
|
160
|
+
})
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
closeNode(id: string) {
|
|
164
|
+
if (!this.__preTree) return this
|
|
165
|
+
this.__noOpens[id] = true
|
|
166
|
+
|
|
167
|
+
this.doUpdate()
|
|
168
|
+
return this
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
openNode(id: string) {
|
|
172
|
+
if (!this.__preTree) return this
|
|
173
|
+
this.__noOpens[id] = false
|
|
174
|
+
|
|
175
|
+
this.doUpdate()
|
|
176
|
+
return this
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
toggleNode(id: string) {
|
|
180
|
+
if (!this.__preTree) return this
|
|
181
|
+
this.__noOpens[id] = !this.__noOpens[id]
|
|
182
|
+
|
|
183
|
+
this.doUpdate()
|
|
184
|
+
return this
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
}
|
|
188
|
+
|
|
189
189
|
export default TreeLayout
|
package/src/resizeObserver.ts
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
let observer: ResizeObserver
|
|
2
|
-
|
|
3
|
-
const attrValueToCallback = {}
|
|
4
|
-
let uniqueid = 0
|
|
5
|
-
|
|
6
|
-
export default function (el: HTMLElement | null, callback: Function) {
|
|
7
|
-
|
|
8
|
-
try {
|
|
9
|
-
|
|
10
|
-
if (!observer) {
|
|
11
|
-
observer = new ResizeObserver(entries => {
|
|
12
|
-
for (const entry of entries) {
|
|
13
|
-
attrValueToCallback[(entry.target as any)._resize_observer_]()
|
|
14
|
-
}
|
|
15
|
-
})
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
uniqueid++
|
|
19
|
-
|
|
20
|
-
(el as any)._resize_observer_ = uniqueid
|
|
21
|
-
attrValueToCallback[uniqueid] = callback
|
|
22
|
-
|
|
23
|
-
observer.observe(el as HTMLElement)
|
|
24
|
-
|
|
25
|
-
return function () {
|
|
26
|
-
if (observer) {
|
|
27
|
-
observer.unobserve(el as HTMLElement)
|
|
28
|
-
delete attrValueToCallback[(el as any)._resize_observer_]
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
} catch (e) {
|
|
33
|
-
callback()
|
|
34
|
-
|
|
35
|
-
// 如果浏览器不支持此接口
|
|
36
|
-
console.error('ResizeObserver undefined!')
|
|
37
|
-
}
|
|
1
|
+
let observer: ResizeObserver
|
|
2
|
+
|
|
3
|
+
const attrValueToCallback = {}
|
|
4
|
+
let uniqueid = 0
|
|
5
|
+
|
|
6
|
+
export default function (el: HTMLElement | null, callback: Function) {
|
|
7
|
+
|
|
8
|
+
try {
|
|
9
|
+
|
|
10
|
+
if (!observer) {
|
|
11
|
+
observer = new ResizeObserver(entries => {
|
|
12
|
+
for (const entry of entries) {
|
|
13
|
+
attrValueToCallback[(entry.target as any)._resize_observer_]()
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
uniqueid++
|
|
19
|
+
|
|
20
|
+
(el as any)._resize_observer_ = uniqueid
|
|
21
|
+
attrValueToCallback[uniqueid] = callback
|
|
22
|
+
|
|
23
|
+
observer.observe(el as HTMLElement)
|
|
24
|
+
|
|
25
|
+
return function () {
|
|
26
|
+
if (observer) {
|
|
27
|
+
observer.unobserve(el as HTMLElement)
|
|
28
|
+
delete attrValueToCallback[(el as any)._resize_observer_]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
} catch (e) {
|
|
33
|
+
callback()
|
|
34
|
+
|
|
35
|
+
// 如果浏览器不支持此接口
|
|
36
|
+
console.error('ResizeObserver undefined!')
|
|
37
|
+
}
|
|
38
38
|
}
|