vislite 1.2.0-alpha.7 → 1.2.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.
Files changed (141) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +3 -1
  3. package/LICENSE +20 -20
  4. package/README.md +2 -1
  5. package/lib/Buffer/index.es.js +1 -1
  6. package/lib/Buffer/index.es.min.js +1 -1
  7. package/lib/Canvas/index.es.js +47 -21
  8. package/lib/Canvas/index.es.min.js +2 -2
  9. package/lib/Cardinal/index.es.js +1 -1
  10. package/lib/Cardinal/index.es.min.js +1 -1
  11. package/lib/Eoap/index.es.js +1 -1
  12. package/lib/Eoap/index.es.min.js +1 -1
  13. package/lib/Hermite/index.es.js +1 -1
  14. package/lib/Hermite/index.es.min.js +1 -1
  15. package/lib/Matrix4/index.es.js +1 -1
  16. package/lib/Matrix4/index.es.min.js +1 -1
  17. package/lib/Mercator/index.es.js +1 -1
  18. package/lib/Mercator/index.es.min.js +1 -1
  19. package/lib/RawCanvas/index.es.js +47 -21
  20. package/lib/RawCanvas/index.es.min.js +2 -2
  21. package/lib/SVG/index.es.js +23 -15
  22. package/lib/SVG/index.es.min.js +2 -2
  23. package/lib/Shader/index.es.js +1 -1
  24. package/lib/Shader/index.es.min.js +1 -1
  25. package/lib/Texture/index.es.js +1 -1
  26. package/lib/Texture/index.es.min.js +1 -1
  27. package/lib/TreeLayout/index.es.js +1 -1
  28. package/lib/TreeLayout/index.es.min.js +1 -1
  29. package/lib/animation/index.es.js +1 -1
  30. package/lib/animation/index.es.min.js +1 -1
  31. package/lib/assemble/index.es.js +1 -1
  32. package/lib/assemble/index.es.min.js +1 -1
  33. package/lib/getLoopColors/index.es.js +1 -1
  34. package/lib/getLoopColors/index.es.min.js +1 -1
  35. package/lib/getWebGLContext/index.es.js +1 -1
  36. package/lib/getWebGLContext/index.es.min.js +1 -1
  37. package/lib/index.umd.js +69 -35
  38. package/lib/index.umd.min.js +2 -2
  39. package/lib/initOption/index.es.js +1 -1
  40. package/lib/initOption/index.es.min.js +1 -1
  41. package/lib/mergeOption/index.es.js +1 -1
  42. package/lib/mergeOption/index.es.min.js +1 -1
  43. package/lib/move/index.es.js +1 -1
  44. package/lib/move/index.es.min.js +1 -1
  45. package/lib/rotate/index.es.js +1 -1
  46. package/lib/rotate/index.es.min.js +1 -1
  47. package/lib/ruler/index.es.js +1 -1
  48. package/lib/ruler/index.es.min.js +1 -1
  49. package/lib/scale/index.es.js +1 -1
  50. package/lib/scale/index.es.min.js +1 -1
  51. package/lib/throttle/index.es.js +1 -1
  52. package/lib/throttle/index.es.min.js +1 -1
  53. package/miniprogram/ui-canvas/drawImage.js +35 -35
  54. package/miniprogram/ui-canvas/index.json +4 -4
  55. package/miniprogram/ui-canvas/index.wxml +4 -4
  56. package/miniprogram/ui-canvas/index.wxss +5 -5
  57. package/package/Buffer/index.ts +2 -2
  58. package/package/Canvas/index.ts +2 -2
  59. package/package/Cardinal/index.ts +2 -2
  60. package/package/Eoap/index.ts +2 -2
  61. package/package/Hermite/index.ts +2 -2
  62. package/package/Matrix4/index.ts +2 -2
  63. package/package/Mercator/index.ts +2 -2
  64. package/package/RawCanvas/index.ts +2 -2
  65. package/package/SVG/index.ts +2 -2
  66. package/package/Shader/index.ts +2 -2
  67. package/package/Texture/index.ts +2 -2
  68. package/package/TreeLayout/index.ts +2 -2
  69. package/package/animation/index.ts +2 -2
  70. package/package/assemble/index.ts +2 -2
  71. package/package/getLoopColors/index.ts +2 -2
  72. package/package/getWebGLContext/index.ts +40 -40
  73. package/package/index.ts +75 -75
  74. package/package/initOption/index.ts +2 -2
  75. package/package/mergeOption/index.ts +2 -2
  76. package/package/move/index.ts +2 -2
  77. package/package/rotate/index.ts +2 -2
  78. package/package/ruler/index.ts +2 -2
  79. package/package/scale/index.ts +2 -2
  80. package/package/throttle/index.ts +2 -2
  81. package/package.json +78 -78
  82. package/src/Eoap.ts +66 -66
  83. package/src/Matrix4/index.ts +84 -84
  84. package/src/Matrix4/move.ts +12 -12
  85. package/src/Matrix4/rotate.ts +15 -15
  86. package/src/Matrix4/scale.ts +11 -11
  87. package/src/Matrix4/transform.ts +64 -64
  88. package/src/Mercator.ts +27 -27
  89. package/src/SVG.ts +24 -24
  90. package/src/common/assemble.ts +22 -22
  91. package/src/common/canvas/arc.ts +51 -51
  92. package/src/common/canvas/config.ts +158 -158
  93. package/src/common/canvas/default.ts +62 -0
  94. package/src/common/canvas/index.ts +13 -7
  95. package/src/common/canvas/painter.ts +3 -54
  96. package/src/common/canvas/texts.ts +18 -18
  97. package/src/common/option.ts +29 -29
  98. package/src/common/setStyle.ts +5 -5
  99. package/src/common/svg/default.ts +27 -0
  100. package/src/common/svg/gradient.ts +53 -53
  101. package/src/common/svg/index.ts +8 -26
  102. package/src/common/tree/index.ts +25 -25
  103. package/src/common/tree/toInnerTree.ts +59 -59
  104. package/src/common/tree/toPlainTree.ts +132 -132
  105. package/src/common/webgl/buffer.ts +79 -79
  106. package/src/common/webgl/getWebGLContext.ts +45 -45
  107. package/src/common/webgl/shader.ts +75 -75
  108. package/src/common/webgl/texture.ts +97 -97
  109. package/src/interpolation/Cardinal.ts +110 -110
  110. package/src/interpolation/Hermite.ts +65 -65
  111. package/src/layout/TreeLayout.ts +188 -188
  112. package/src/move.ts +7 -7
  113. package/src/rotate.ts +7 -7
  114. package/src/ruler.ts +209 -209
  115. package/src/scale.ts +6 -6
  116. package/types/Buffer.d.ts +23 -23
  117. package/types/Canvas.d.ts +5 -0
  118. package/types/CanvasOption.d.ts +8 -8
  119. package/types/CanvasOpts.d.ts +9 -9
  120. package/types/Cardinal.d.ts +13 -13
  121. package/types/Gradient.d.ts +14 -14
  122. package/types/Hermite.d.ts +18 -18
  123. package/types/Map.d.ts +9 -9
  124. package/types/Matrix4.d.ts +47 -47
  125. package/types/SVG.d.ts +243 -238
  126. package/types/Shader.d.ts +16 -16
  127. package/types/Texture.d.ts +16 -16
  128. package/types/Tree.d.ts +69 -69
  129. package/types/TreeConfig.d.ts +36 -36
  130. package/types/TreeLayout.d.ts +54 -54
  131. package/types/TreeOption.d.ts +48 -48
  132. package/types/animation.d.ts +5 -5
  133. package/types/getWebGLContext.d.ts +7 -7
  134. package/types/move.d.ts +5 -5
  135. package/types/rotate.d.ts +5 -5
  136. package/types/ruler.d.ts +10 -10
  137. package/types/scale.d.ts +5 -5
  138. package/types/throttle.d.ts +5 -5
  139. package/types/ui-canvas.d.ts +4 -4
  140. package/uni-app/drawImage.js +19 -19
  141. package/uni-app/ui-canvas.vue +284 -284
@@ -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 { initOption } from '../common/option'
7
- import { animation } from "@oipage/core.js/src/animation/index"
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
- initOption(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 { initOption } from '../common/option'
7
+ import { animation } from "@oipage/core.js/src/animation/index"
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
+ initOption(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/move.ts CHANGED
@@ -1,8 +1,8 @@
1
- // 点(x,y)沿着向量(ax,ay)方向移动距离d
2
- export default function (ax: number, ay: number, d: number, x: number, y: number): [number, number] {
3
- const sqrt = Math.sqrt(ax * ax + ay * ay)
4
- return [
5
- ax * d / sqrt + x,
6
- ay * d / sqrt + y
7
- ]
1
+ // 点(x,y)沿着向量(ax,ay)方向移动距离d
2
+ export default function (ax: number, ay: number, d: number, x: number, y: number): [number, number] {
3
+ const sqrt = Math.sqrt(ax * ax + ay * ay)
4
+ return [
5
+ ax * d / sqrt + x,
6
+ ay * d / sqrt + y
7
+ ]
8
8
  }
package/src/rotate.ts CHANGED
@@ -1,8 +1,8 @@
1
- // 点(x,y)围绕中心(cx,cy)旋转deg度
2
- export default function (cx: number, cy: number, deg: number, x: number, y: number): [number, number] {
3
- const cos = Math.cos(deg), sin = Math.sin(deg)
4
- return [
5
- (x - cx) * cos - (y - cy) * sin + cx,
6
- (x - cx) * sin + (y - cy) * cos + cy
7
- ]
1
+ // 点(x,y)围绕中心(cx,cy)旋转deg度
2
+ export default function (cx: number, cy: number, deg: number, x: number, y: number): [number, number] {
3
+ const cos = Math.cos(deg), sin = Math.sin(deg)
4
+ return [
5
+ (x - cx) * cos - (y - cy) * sin + cx,
6
+ (x - cx) * sin + (y - cy) * cos + cy
7
+ ]
8
8
  }