vislite 1.12.0-alpha.0 → 1.12.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 (183) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +402 -394
  3. package/LICENSE +20 -20
  4. package/README-en.md +245 -245
  5. package/README.md +245 -245
  6. package/bin/formatArgv.js +30 -30
  7. package/bin/help.js +17 -17
  8. package/bin/run +21 -21
  9. package/bin/skills.js +26 -26
  10. package/lib/BarLayout/index.es.js +348 -348
  11. package/lib/Buffer/index.es.js +34 -34
  12. package/lib/Canvas/index.es.js +804 -800
  13. package/lib/Canvas/index.es.min.js +1 -1
  14. package/lib/Cardinal/index.es.js +89 -89
  15. package/lib/Eoap/index.es.js +32 -32
  16. package/lib/Hermite/index.es.js +34 -34
  17. package/lib/MapCoordinate/index.es.js +199 -199
  18. package/lib/Matrix4/index.es.js +123 -123
  19. package/lib/Mercator/index.es.js +18 -18
  20. package/lib/PieLayout/index.es.js +115 -115
  21. package/lib/RawCanvas/index.es.js +736 -732
  22. package/lib/RawCanvas/index.es.min.js +1 -1
  23. package/lib/SVG/index.es.js +626 -631
  24. package/lib/SVG/index.es.min.js +1 -1
  25. package/lib/Shader/index.es.js +34 -34
  26. package/lib/Texture/index.es.js +52 -52
  27. package/lib/TreeLayout/index.es.js +301 -315
  28. package/lib/animation/index.es.js +2 -2
  29. package/lib/assemble/index.es.js +19 -16
  30. package/lib/assemble/index.es.min.js +1 -1
  31. package/lib/getLoopColors/index.es.js +34 -34
  32. package/lib/getWebGLContext/index.es.js +61 -61
  33. package/lib/index.umd.js +2797 -2784
  34. package/lib/index.umd.min.js +2 -2
  35. package/lib/initOption/index.es.js +5 -5
  36. package/lib/mergeOption/index.es.js +34 -34
  37. package/lib/move/index.es.js +6 -6
  38. package/lib/rotate/index.es.js +6 -6
  39. package/lib/ruler/index.es.js +136 -136
  40. package/lib/scale/index.es.js +5 -5
  41. package/minialipay/ui-canvas/drawImage.js +35 -35
  42. package/minialipay/ui-canvas/index.acss +4 -4
  43. package/minialipay/ui-canvas/index.axml +3 -3
  44. package/minialipay/ui-canvas/index.d.ts +1 -1
  45. package/minialipay/ui-canvas/index.js +100 -100
  46. package/minialipay/ui-canvas/index.json +6 -6
  47. package/miniprogram/ui-canvas/drawImage.js +35 -35
  48. package/miniprogram/ui-canvas/index.js +125 -125
  49. package/miniprogram/ui-canvas/index.json +4 -4
  50. package/miniprogram/ui-canvas/index.wxml +4 -4
  51. package/miniprogram/ui-canvas/index.wxss +5 -5
  52. package/package/BarLayout/index.ts +2 -2
  53. package/package/Buffer/index.ts +2 -2
  54. package/package/Canvas/index.ts +2 -2
  55. package/package/Cardinal/index.ts +2 -2
  56. package/package/Eoap/index.ts +2 -2
  57. package/package/Hermite/index.ts +2 -2
  58. package/package/MapCoordinate/index.ts +2 -2
  59. package/package/Matrix4/index.ts +2 -2
  60. package/package/Mercator/index.ts +2 -2
  61. package/package/PieLayout/index.ts +2 -2
  62. package/package/RawCanvas/index.ts +2 -2
  63. package/package/SVG/index.ts +2 -2
  64. package/package/Shader/index.ts +2 -2
  65. package/package/Texture/index.ts +2 -2
  66. package/package/TreeLayout/index.ts +2 -2
  67. package/package/animation/index.ts +5 -5
  68. package/package/assemble/index.ts +2 -2
  69. package/package/getLoopColors/index.ts +2 -2
  70. package/package/getWebGLContext/index.ts +40 -40
  71. package/package/index.ts +84 -84
  72. package/package/initOption/index.ts +2 -2
  73. package/package/mergeOption/index.ts +2 -2
  74. package/package/move/index.ts +2 -2
  75. package/package/rotate/index.ts +2 -2
  76. package/package/ruler/index.ts +2 -2
  77. package/package/scale/index.ts +2 -2
  78. package/package/throttle/index.ts +2 -2
  79. package/package.json +79 -79
  80. package/skills/vislite-lib/BarLayout.md +117 -117
  81. package/skills/vislite-lib/Canvas.md +183 -183
  82. package/skills/vislite-lib/Interpolation.md +129 -129
  83. package/skills/vislite-lib/Matrix.md +174 -174
  84. package/skills/vislite-lib/PieLayout.md +131 -131
  85. package/skills/vislite-lib/Projections.md +158 -158
  86. package/skills/vislite-lib/SKILL.md +179 -179
  87. package/skills/vislite-lib/SVG.md +137 -137
  88. package/skills/vislite-lib/TreeLayout.md +176 -176
  89. package/skills/vislite-lib/Utilities.md +261 -261
  90. package/skills/vislite-lib/WebGL.md +106 -106
  91. package/skills/vislite-lib/minialipay/ui-canvas.md +95 -95
  92. package/skills/vislite-lib/miniprogram/ui-canvas.md +98 -98
  93. package/skills/vislite-lib/uniapp/ui-canvas.md +113 -113
  94. package/src/Canvas.ts +89 -89
  95. package/src/Eoap.ts +66 -66
  96. package/src/Matrix4/index.ts +84 -84
  97. package/src/Matrix4/move.ts +12 -12
  98. package/src/Matrix4/rotate.ts +15 -15
  99. package/src/Matrix4/scale.ts +11 -11
  100. package/src/Matrix4/transform.ts +64 -64
  101. package/src/Mercator.ts +27 -27
  102. package/src/SVG.ts +86 -69
  103. package/src/common/assemble.ts +30 -22
  104. package/src/common/canvas/arc.ts +51 -51
  105. package/src/common/canvas/config.ts +176 -176
  106. package/src/common/canvas/default.ts +64 -64
  107. package/src/common/canvas/gradient.ts +31 -31
  108. package/src/common/canvas/index.ts +189 -189
  109. package/src/common/canvas/painter.ts +475 -454
  110. package/src/common/canvas/texts.ts +18 -18
  111. package/src/common/map/getBoundary.ts +15 -15
  112. package/src/common/map/tool.ts +29 -29
  113. package/src/common/option.ts +31 -31
  114. package/src/common/setStyle.ts +5 -5
  115. package/src/common/svg/config.ts +213 -213
  116. package/src/common/svg/default.ts +29 -29
  117. package/src/common/svg/gradient.ts +53 -53
  118. package/src/common/svg/index.ts +420 -420
  119. package/src/common/svg/tool.ts +51 -51
  120. package/src/common/tree/index.ts +25 -25
  121. package/src/common/tree/toInnerTree.ts +61 -61
  122. package/src/common/tree/toPlainTree.ts +135 -135
  123. package/src/common/type.ts +26 -26
  124. package/src/common/webgl/buffer.ts +79 -79
  125. package/src/common/webgl/getWebGLContext.ts +45 -45
  126. package/src/common/webgl/shader.ts +75 -75
  127. package/src/common/webgl/texture.ts +98 -98
  128. package/src/coordinate/MapCoordinate.ts +80 -80
  129. package/src/getLoopColors.ts +42 -42
  130. package/src/interpolation/Cardinal.ts +110 -110
  131. package/src/interpolation/Hermite.ts +65 -65
  132. package/src/layout/BarLayout.ts +249 -249
  133. package/src/layout/PieLayout.ts +146 -146
  134. package/src/layout/TreeLayout.ts +200 -200
  135. package/src/move.ts +7 -7
  136. package/src/rotate.ts +7 -7
  137. package/src/ruler.ts +209 -209
  138. package/src/scale.ts +6 -6
  139. package/types/Bar.d.ts +91 -91
  140. package/types/BarConfig.d.ts +4 -4
  141. package/types/BarLayout.d.ts +48 -48
  142. package/types/BarOption.d.ts +31 -31
  143. package/types/Buffer.d.ts +30 -30
  144. package/types/Canvas.d.ts +379 -379
  145. package/types/CanvasConfig.d.ts +61 -61
  146. package/types/CanvasOption.d.ts +13 -13
  147. package/types/CanvasOpts.d.ts +9 -9
  148. package/types/Cardinal.d.ts +20 -20
  149. package/types/Gradient.d.ts +20 -20
  150. package/types/Hermite.d.ts +25 -25
  151. package/types/Map.d.ts +9 -9
  152. package/types/MapConfig.d.ts +27 -27
  153. package/types/MapCoordinate.d.ts +22 -22
  154. package/types/Matrix4.d.ts +79 -79
  155. package/types/Pie.d.ts +73 -73
  156. package/types/PieConfig.d.ts +26 -26
  157. package/types/PieLayout.d.ts +40 -40
  158. package/types/PieOption.d.ts +21 -21
  159. package/types/SVG.d.ts +282 -282
  160. package/types/SVGConfig.d.ts +54 -54
  161. package/types/Shader.d.ts +22 -22
  162. package/types/Texture.d.ts +22 -22
  163. package/types/Tree.d.ts +74 -74
  164. package/types/TreeConfig.d.ts +52 -52
  165. package/types/TreeLayout.d.ts +71 -71
  166. package/types/TreeOption.d.ts +48 -48
  167. package/types/animation.d.ts +26 -26
  168. package/types/assemble.d.ts +14 -14
  169. package/types/getLoopColors.d.ts +13 -13
  170. package/types/getWebGLContext.d.ts +7 -7
  171. package/types/index.d.ts +220 -221
  172. package/types/module.d.ts +110 -110
  173. package/types/move.d.ts +15 -15
  174. package/types/option.d.ts +12 -12
  175. package/types/painterConfig.d.ts +14 -14
  176. package/types/rotate.d.ts +15 -15
  177. package/types/ruler.d.ts +24 -24
  178. package/types/scale.d.ts +15 -15
  179. package/types/throttle.d.ts +6 -6
  180. package/types/ui-canvas.d.ts +4 -4
  181. package/types/uni-canvas.d.ts +3 -3
  182. package/uni-app/drawImage.js +19 -19
  183. package/uni-app/ui-canvas.vue +295 -295
@@ -1,52 +1,52 @@
1
- import type SVGConfigType from '../../../types/SVGConfig'
2
-
3
- import { XLINK_ATTRIBUTE } from "./dictionary"
4
-
5
- const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
6
- setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
7
- setAttribute(el, "stroke-width", config.lineWidth + "")
8
- setAttribute(el, "stroke-linecap", config.lineCap + "")
9
- setAttribute(el, "stroke-linejoin", config.lineJoin + "")
10
- }
11
-
12
- // 新建节点
13
- export function toNode(tagname: string) {
14
- return document.createElementNS('http://www.w3.org/2000/svg', tagname)
15
- }
16
-
17
- // 设置属性
18
- const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
19
-
20
- // 需要使用xlink命名空间的xml属性
21
- if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
22
- el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
23
- }
24
-
25
- // 否则
26
- else {
27
- el.setAttribute(key, value + "")
28
- }
29
- }
30
- export const setAttribute = _setAttribute
31
-
32
- // 获取属性
33
- export function getAttribute(el: SVGElement, key: string) {
34
- if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
35
- return el.getAttribute(key)
36
- }
37
-
38
- export function full(el: SVGElement, config: SVGConfigType) {
39
- setLineAttr(el, config)
40
- _setAttribute(el, "stroke", config.strokeStyle as string)
41
- _setAttribute(el, "fill", config.fillStyle as string)
42
- }
43
-
44
- export function fill(el: SVGElement, config: SVGConfigType) {
45
- _setAttribute(el, "fill", config.fillStyle as string)
46
- }
47
-
48
- export function stroke(el: SVGElement, config: SVGConfigType) {
49
- setLineAttr(el, config)
50
- _setAttribute(el, "stroke", config.strokeStyle as string)
51
- _setAttribute(el, "fill", "none")
1
+ import type SVGConfigType from '../../../types/SVGConfig'
2
+
3
+ import { XLINK_ATTRIBUTE } from "./dictionary"
4
+
5
+ const setLineAttr = (el: SVGElement, config: SVGConfigType) => {
6
+ setAttribute(el, "stroke-dasharray", (config.lineDash as Array<number>).join(','))
7
+ setAttribute(el, "stroke-width", config.lineWidth + "")
8
+ setAttribute(el, "stroke-linecap", config.lineCap + "")
9
+ setAttribute(el, "stroke-linejoin", config.lineJoin + "")
10
+ }
11
+
12
+ // 新建节点
13
+ export function toNode(tagname: string) {
14
+ return document.createElementNS('http://www.w3.org/2000/svg', tagname)
15
+ }
16
+
17
+ // 设置属性
18
+ const _setAttribute = function (el: SVGElement, key: string, value: string | number) {
19
+
20
+ // 需要使用xlink命名空间的xml属性
21
+ if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
22
+ el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
23
+ }
24
+
25
+ // 否则
26
+ else {
27
+ el.setAttribute(key, value + "")
28
+ }
29
+ }
30
+ export const setAttribute = _setAttribute
31
+
32
+ // 获取属性
33
+ export function getAttribute(el: SVGElement, key: string) {
34
+ if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
35
+ return el.getAttribute(key)
36
+ }
37
+
38
+ export function full(el: SVGElement, config: SVGConfigType) {
39
+ setLineAttr(el, config)
40
+ _setAttribute(el, "stroke", config.strokeStyle as string)
41
+ _setAttribute(el, "fill", config.fillStyle as string)
42
+ }
43
+
44
+ export function fill(el: SVGElement, config: SVGConfigType) {
45
+ _setAttribute(el, "fill", config.fillStyle as string)
46
+ }
47
+
48
+ export function stroke(el: SVGElement, config: SVGConfigType) {
49
+ setLineAttr(el, config)
50
+ _setAttribute(el, "stroke", config.strokeStyle as string)
51
+ _setAttribute(el, "fill", "none")
52
52
  }
@@ -1,26 +1,26 @@
1
- import type TreeConfigType from '../../../types/TreeConfig'
2
- import type { TreeResultType } from '../../../types/Tree'
3
-
4
- import toPlainTree from './toPlainTree'
5
- import { initOption } from '../option'
6
-
7
- class Tree {
8
- readonly name: string = 'Tree'
9
-
10
- private __config: TreeConfigType
11
-
12
- constructor(config: TreeConfigType = {}) {
13
- this.__config = initOption(config, {
14
- root: (initTree: any) => initTree,
15
- children: (parentTree: any) => parentTree.children,
16
- id: (treedata: any) => treedata.name
17
- })
18
- }
19
-
20
- use(initTree: any, noOpens = {}): TreeResultType {
21
- return toPlainTree(initTree, this.__config, noOpens)
22
- }
23
-
24
- }
25
-
1
+ import type TreeConfigType from '../../../types/TreeConfig'
2
+ import type { TreeResultType } from '../../../types/Tree'
3
+
4
+ import toPlainTree from './toPlainTree'
5
+ import { initOption } from '../option'
6
+
7
+ class Tree {
8
+ readonly name: string = 'Tree'
9
+
10
+ private __config: TreeConfigType
11
+
12
+ constructor(config: TreeConfigType = {}) {
13
+ this.__config = initOption(config, {
14
+ root: (initTree: any) => initTree,
15
+ children: (parentTree: any) => parentTree.children,
16
+ id: (treedata: any) => treedata.name
17
+ })
18
+ }
19
+
20
+ use(initTree: any, noOpens = {}): TreeResultType {
21
+ return toPlainTree(initTree, this.__config, noOpens)
22
+ }
23
+
24
+ }
25
+
26
26
  export default Tree
@@ -1,62 +1,62 @@
1
- import type { default as TreeConfigType, rootType, childrenType, idType } from '../../../types/TreeConfig'
2
-
3
- /**
4
- * 根据配置的层次关系(配置的id,child,root)把原始数据变成内部结构,方便后期位置计算
5
- *
6
- * tempTree[id] = {
7
- * "data": 原始数据,
8
- * "pid": 父亲ID,
9
- * "id": 唯一标识ID,
10
- * "show": boolean,
11
- * "isOpen": boolean,
12
- * "children": [cid1、cid2、...]
13
- * }
14
- */
15
- export default (initTree: any, config: TreeConfigType) => {
16
- const tempTree: {
17
- [key: string]: any
18
- } = {}
19
-
20
- // 根结点
21
- const temp = (config.root as rootType)(initTree)
22
- let id: number | string, rid: number | string
23
- id = rid = (config.id as idType)(temp)
24
- tempTree[id] = {
25
- "data": temp,
26
- "pid": null,
27
- "id": id,
28
- "isOpen": true,
29
- "show": true,
30
- "deg": 0,
31
- "children": []
32
- }
33
-
34
- let num: number = 1
35
-
36
- // 根据传递的原始数据,生成内部统一结构
37
- ; (function createTree(pdata: any, pid: number | string) {
38
- const children = (config.children as childrenType)(pdata, initTree)
39
- num += children ? children.length : 0
40
- for (let flag = 0; children && flag < children.length; flag++) {
41
- id = (config.id as idType)(children[flag])
42
- tempTree[pid].children.push(id);
43
- tempTree[id] = {
44
- "data": children[flag],
45
- "pid": pid,
46
- "id": id,
47
- "isOpen": true,
48
- "show": true,
49
- "deg": 0,
50
- "children": []
51
- }
52
- createTree(children[flag], id)
53
- }
54
- })(temp, id)
55
-
56
- return {
57
- rid,
58
- value: tempTree,
59
- num
60
- }
61
-
1
+ import type { default as TreeConfigType, rootType, childrenType, idType } from '../../../types/TreeConfig'
2
+
3
+ /**
4
+ * 根据配置的层次关系(配置的id,child,root)把原始数据变成内部结构,方便后期位置计算
5
+ *
6
+ * tempTree[id] = {
7
+ * "data": 原始数据,
8
+ * "pid": 父亲ID,
9
+ * "id": 唯一标识ID,
10
+ * "show": boolean,
11
+ * "isOpen": boolean,
12
+ * "children": [cid1、cid2、...]
13
+ * }
14
+ */
15
+ export default (initTree: any, config: TreeConfigType) => {
16
+ const tempTree: {
17
+ [key: string]: any
18
+ } = {}
19
+
20
+ // 根结点
21
+ const temp = (config.root as rootType)(initTree)
22
+ let id: number | string, rid: number | string
23
+ id = rid = (config.id as idType)(temp)
24
+ tempTree[id] = {
25
+ "data": temp,
26
+ "pid": null,
27
+ "id": id,
28
+ "isOpen": true,
29
+ "show": true,
30
+ "deg": 0,
31
+ "children": []
32
+ }
33
+
34
+ let num: number = 1
35
+
36
+ // 根据传递的原始数据,生成内部统一结构
37
+ ; (function createTree(pdata: any, pid: number | string) {
38
+ const children = (config.children as childrenType)(pdata, initTree)
39
+ num += children ? children.length : 0
40
+ for (let flag = 0; children && flag < children.length; flag++) {
41
+ id = (config.id as idType)(children[flag])
42
+ tempTree[pid].children.push(id);
43
+ tempTree[id] = {
44
+ "data": children[flag],
45
+ "pid": pid,
46
+ "id": id,
47
+ "isOpen": true,
48
+ "show": true,
49
+ "deg": 0,
50
+ "children": []
51
+ }
52
+ createTree(children[flag], id)
53
+ }
54
+ })(temp, id)
55
+
56
+ return {
57
+ rid,
58
+ value: tempTree,
59
+ num
60
+ }
61
+
62
62
  }
@@ -1,136 +1,136 @@
1
- import type TreeConfigType from '../../../types/TreeConfig'
2
-
3
- import toInnerTree from './toInnerTree'
4
-
5
- // 可以传递任意格式的树原始数据
6
- // 只要配置对应的解析方法即可
7
- export default function (initTree: any, config: TreeConfigType, noOpens: any = {}) {
8
- const treeData = toInnerTree(initTree, config)
9
-
10
- const alltreedata = treeData.value // 维护的树
11
- const rootid = treeData.rid // 根结点ID
12
-
13
- if (treeData.num == 1) {
14
- alltreedata[rootid].left = 0.5
15
- alltreedata[rootid].top = 0.5
16
- alltreedata[rootid].show = true
17
- return {
18
- deep: 1,
19
- node: alltreedata,
20
- root: rootid,
21
- size: 1
22
- }
23
- } else {
24
-
25
- const beforeDis: Array<number> = []
26
- let size = 0, maxDeep = 0
27
-
28
- // @typescript-eslint/ban-ts-comment
29
- if (noOpens[rootid]) {
30
- alltreedata[rootid].left = 0.5
31
- alltreedata[rootid].top = 0.5
32
- alltreedata[rootid].show = true
33
-
34
- size = 1
35
- } else {
36
- ; (function positionCalc(pNode, deep) {
37
-
38
- if (deep > maxDeep) maxDeep = deep
39
-
40
- let flag: number = 0
41
- // @typescript-eslint/ban-ts-comment
42
- if (!noOpens[pNode.id]) {
43
-
44
- for (flag = 0; flag < pNode.children.length; flag++)
45
-
46
- // 因为全部的子结点的位置确定了,父结点的y位置就是子结点的中间位置
47
- // 因此有子结点的,先计算子结点
48
- positionCalc(alltreedata[pNode.children[flag]], deep + 1)
49
-
50
- }
51
-
52
- // left的位置比较简单,deep从0开始编号
53
- // 比如deep=0,第一层,left=0+0.5=0.5,也就是根结点
54
- alltreedata[pNode.id].left = deep + 0.5
55
- if (flag == 0) {
56
-
57
- // beforeDis是一个数组,用以记录每一层此刻top下边缘(每一层是从上到下)
58
- // 比如一层的第一个,top值最小可以取top=0.5
59
- // 为了方便计算,beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
60
- // 因此设置最低上边缘为-0.5
61
- if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
62
- // 父边缘同意的进行初始化
63
- if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
64
-
65
- // 添加的新结点top值第一种求法:本层上边缘+1(比如上边缘是-0.5,那么top最小是top=-0.5+1=0.5)
66
- alltreedata[pNode.id].top = beforeDis[deep] + 1
67
-
68
- const pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
69
- // 计算的原则是:如果第一种可行,选择第一种,否则必须选择第二种
70
- // 判断第一种是否可行的方法就是:如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
71
- if (pTop - 1 < beforeDis[deep - 1])
72
- // 必须保证父亲结点和父亲的前一个兄弟保存1的距离,至少
73
- // 添加的新结点top值的第二种求法:根据孩子取孩子结点的中心top
74
- alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
75
-
76
- } else {
77
-
78
- // 此刻flag!=0
79
- // 意味着结点有孩子,那么问题就解决了,直接取孩子的中间即可
80
- // 其实,flag==0的分支计算的就是孩子,是没有孩子的叶结点,那是关键
81
- alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
82
- }
83
-
84
- // 因为计算孩子的时候
85
- // 无法掌握父辈兄弟的情况
86
- // 可能会出现父亲和兄弟重叠问题
87
- if (alltreedata[pNode.id].top <= beforeDis[deep]) {
88
- const needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
89
- (function doUp(_pid: number | string, _deep: number) {
90
- alltreedata[_pid].top += needUp;
91
- if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
92
-
93
- for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
94
- doUp(alltreedata[_pid].children[_flag], _deep + 1)
95
- }
96
- })(pNode.id, deep)
97
- }
98
-
99
- // 计算好一个结点后,需要更新此刻该层的上边缘
100
- beforeDis[deep] = alltreedata[pNode.id].top
101
-
102
- // size在每次计算一个结点后更新,是为了最终绘图的时候知道树有多宽(此处应该叫高)
103
- if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
104
-
105
- })(alltreedata[rootid], 0)
106
-
107
- }
108
- // 对于不显示的,需要标记一下
109
- for (const key in noOpens) {
110
- // @typescript-eslint/ban-ts-comment
111
- if (noOpens[key]) {
112
- alltreedata[key].isOpen = false
113
- ; (function updateHidden(pid, left, top) {
114
- for (let index = 0; index < alltreedata[pid].children.length; index++) {
115
- alltreedata[alltreedata[pid].children[index]].left = left
116
- alltreedata[alltreedata[pid].children[index]].top = top
117
- alltreedata[alltreedata[pid].children[index]].show = false
118
-
119
- updateHidden(alltreedata[pid].children[index], left, top)
120
- }
121
- })(key, alltreedata[key].left, alltreedata[key].top)
122
- }
123
- }
124
-
125
- // 传递的参数分别表示:记录了位置信息的树结点集合、根结点ID和树的宽
126
- return {
127
- "node": alltreedata,
128
- "root": rootid,
129
- "size": size,
130
- "deep": maxDeep + 1
131
- }
132
-
133
- }
134
-
135
-
1
+ import type TreeConfigType from '../../../types/TreeConfig'
2
+
3
+ import toInnerTree from './toInnerTree'
4
+
5
+ // 可以传递任意格式的树原始数据
6
+ // 只要配置对应的解析方法即可
7
+ export default function (initTree: any, config: TreeConfigType, noOpens: any = {}) {
8
+ const treeData = toInnerTree(initTree, config)
9
+
10
+ const alltreedata = treeData.value // 维护的树
11
+ const rootid = treeData.rid // 根结点ID
12
+
13
+ if (treeData.num == 1) {
14
+ alltreedata[rootid].left = 0.5
15
+ alltreedata[rootid].top = 0.5
16
+ alltreedata[rootid].show = true
17
+ return {
18
+ deep: 1,
19
+ node: alltreedata,
20
+ root: rootid,
21
+ size: 1
22
+ }
23
+ } else {
24
+
25
+ const beforeDis: Array<number> = []
26
+ let size = 0, maxDeep = 0
27
+
28
+ // @typescript-eslint/ban-ts-comment
29
+ if (noOpens[rootid]) {
30
+ alltreedata[rootid].left = 0.5
31
+ alltreedata[rootid].top = 0.5
32
+ alltreedata[rootid].show = true
33
+
34
+ size = 1
35
+ } else {
36
+ ; (function positionCalc(pNode, deep) {
37
+
38
+ if (deep > maxDeep) maxDeep = deep
39
+
40
+ let flag: number = 0
41
+ // @typescript-eslint/ban-ts-comment
42
+ if (!noOpens[pNode.id]) {
43
+
44
+ for (flag = 0; flag < pNode.children.length; flag++)
45
+
46
+ // 因为全部的子结点的位置确定了,父结点的y位置就是子结点的中间位置
47
+ // 因此有子结点的,先计算子结点
48
+ positionCalc(alltreedata[pNode.children[flag]], deep + 1)
49
+
50
+ }
51
+
52
+ // left的位置比较简单,deep从0开始编号
53
+ // 比如deep=0,第一层,left=0+0.5=0.5,也就是根结点
54
+ alltreedata[pNode.id].left = deep + 0.5
55
+ if (flag == 0) {
56
+
57
+ // beforeDis是一个数组,用以记录每一层此刻top下边缘(每一层是从上到下)
58
+ // 比如一层的第一个,top值最小可以取top=0.5
59
+ // 为了方便计算,beforeDis[deep] == undefined的时候表示现在准备计算的是这层的第一个结点
60
+ // 因此设置最低上边缘为-0.5
61
+ if (beforeDis[deep] == void 0) beforeDis[deep] = -0.5
62
+ // 父边缘同意的进行初始化
63
+ if (beforeDis[deep - 1] == void 0) beforeDis[deep - 1] = -0.5
64
+
65
+ // 添加的新结点top值第一种求法:本层上边缘+1(比如上边缘是-0.5,那么top最小是top=-0.5+1=0.5)
66
+ alltreedata[pNode.id].top = beforeDis[deep] + 1
67
+
68
+ const pTop = beforeDis[deep] + 1 + (alltreedata[pNode.pid].children.length - 1) * 0.5
69
+ // 计算的原则是:如果第一种可行,选择第一种,否则必须选择第二种
70
+ // 判断第一种是否可行的方法就是:如果第一种计算后确定的孩子上边缘不对导致孩子和孩子的前兄弟重合就是可行的
71
+ if (pTop - 1 < beforeDis[deep - 1])
72
+ // 必须保证父亲结点和父亲的前一个兄弟保存1的距离,至少
73
+ // 添加的新结点top值的第二种求法:根据孩子取孩子结点的中心top
74
+ alltreedata[pNode.id].top = beforeDis[deep - 1] + 1 - (alltreedata[pNode.pid].children.length - 1) * 0.5
75
+
76
+ } else {
77
+
78
+ // 此刻flag!=0
79
+ // 意味着结点有孩子,那么问题就解决了,直接取孩子的中间即可
80
+ // 其实,flag==0的分支计算的就是孩子,是没有孩子的叶结点,那是关键
81
+ alltreedata[pNode.id].top = (alltreedata[pNode.children[0]].top + alltreedata[pNode.children[flag - 1]].top) * 0.5
82
+ }
83
+
84
+ // 因为计算孩子的时候
85
+ // 无法掌握父辈兄弟的情况
86
+ // 可能会出现父亲和兄弟重叠问题
87
+ if (alltreedata[pNode.id].top <= beforeDis[deep]) {
88
+ const needUp = beforeDis[deep] + 1 - alltreedata[pNode.id].top
89
+ (function doUp(_pid: number | string, _deep: number) {
90
+ alltreedata[_pid].top += needUp;
91
+ if (beforeDis[_deep] < alltreedata[_pid].top) beforeDis[_deep] = alltreedata[_pid].top
92
+
93
+ for (let _flag = 0; _flag < alltreedata[_pid].children.length; _flag++) {
94
+ doUp(alltreedata[_pid].children[_flag], _deep + 1)
95
+ }
96
+ })(pNode.id, deep)
97
+ }
98
+
99
+ // 计算好一个结点后,需要更新此刻该层的上边缘
100
+ beforeDis[deep] = alltreedata[pNode.id].top
101
+
102
+ // size在每次计算一个结点后更新,是为了最终绘图的时候知道树有多宽(此处应该叫高)
103
+ if (alltreedata[pNode.id].top + 0.5 > size) size = alltreedata[pNode.id].top + 0.5
104
+
105
+ })(alltreedata[rootid], 0)
106
+
107
+ }
108
+ // 对于不显示的,需要标记一下
109
+ for (const key in noOpens) {
110
+ // @typescript-eslint/ban-ts-comment
111
+ if (noOpens[key]) {
112
+ alltreedata[key].isOpen = false
113
+ ; (function updateHidden(pid, left, top) {
114
+ for (let index = 0; index < alltreedata[pid].children.length; index++) {
115
+ alltreedata[alltreedata[pid].children[index]].left = left
116
+ alltreedata[alltreedata[pid].children[index]].top = top
117
+ alltreedata[alltreedata[pid].children[index]].show = false
118
+
119
+ updateHidden(alltreedata[pid].children[index], left, top)
120
+ }
121
+ })(key, alltreedata[key].left, alltreedata[key].top)
122
+ }
123
+ }
124
+
125
+ // 传递的参数分别表示:记录了位置信息的树结点集合、根结点ID和树的宽
126
+ return {
127
+ "node": alltreedata,
128
+ "root": rootid,
129
+ "size": size,
130
+ "deep": maxDeep + 1
131
+ }
132
+
133
+ }
134
+
135
+
136
136
  }
@@ -1,27 +1,27 @@
1
- const toString = Object.prototype.toString
2
-
3
- // 获取一个值的类型字符串[object type]
4
- export function getType(value: any) {
5
- if (value == null) {
6
- return value === undefined ? '[object Undefined]' : '[object Null]'
7
- }
8
- return toString.call(value)
9
- }
10
-
11
- // 判断一个值是不是一个朴素的'对象'
12
- export function isPlainObject(value: any) {
13
- if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
14
- return false
15
- }
16
-
17
- // 如果原型为null
18
- if (Object.getPrototypeOf(value) === null) {
19
- return true
20
- }
21
-
22
- let proto = value
23
- while (Object.getPrototypeOf(proto) !== null) {
24
- proto = Object.getPrototypeOf(proto)
25
- }
26
- return Object.getPrototypeOf(value) === proto
1
+ const toString = Object.prototype.toString
2
+
3
+ // 获取一个值的类型字符串[object type]
4
+ export function getType(value: any) {
5
+ if (value == null) {
6
+ return value === undefined ? '[object Undefined]' : '[object Null]'
7
+ }
8
+ return toString.call(value)
9
+ }
10
+
11
+ // 判断一个值是不是一个朴素的'对象'
12
+ export function isPlainObject(value: any) {
13
+ if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
14
+ return false
15
+ }
16
+
17
+ // 如果原型为null
18
+ if (Object.getPrototypeOf(value) === null) {
19
+ return true
20
+ }
21
+
22
+ let proto = value
23
+ while (Object.getPrototypeOf(proto) !== null) {
24
+ proto = Object.getPrototypeOf(proto)
25
+ }
26
+ return Object.getPrototypeOf(value) === proto
27
27
  }