dcim-topology2d 2.1.0 → 3.0.2

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 (215) hide show
  1. package/activity-diagram/src/final/final.d.ts +1 -1
  2. package/activity-diagram/src/final/final.rect.d.ts +1 -1
  3. package/activity-diagram/src/final/final.rect.js +1 -1
  4. package/activity-diagram/src/fork/fork.anchor.d.ts +1 -1
  5. package/activity-diagram/src/fork/fork.anchor.js +1 -1
  6. package/activity-diagram/src/fork/fork.d.ts +1 -1
  7. package/activity-diagram/src/fork/fork.rect.d.ts +1 -1
  8. package/activity-diagram/src/fork/fork.rect.js +1 -1
  9. package/activity-diagram/src/register.js +1 -1
  10. package/activity-diagram/src/swimlaneH/swimlaneH.d.ts +1 -1
  11. package/activity-diagram/src/swimlaneH/swimlaneH.rect.d.ts +1 -1
  12. package/activity-diagram/src/swimlaneH/swimlaneH.rect.js +1 -1
  13. package/activity-diagram/src/swimlaneV/swimlaneV.d.ts +1 -1
  14. package/activity-diagram/src/swimlaneV/swimlaneV.rect.d.ts +1 -1
  15. package/activity-diagram/src/swimlaneV/swimlaneV.rect.js +1 -1
  16. package/chart-diagram/index.d.ts +1 -3
  17. package/chart-diagram/index.js +1 -2
  18. package/chart-diagram/src/echarts/index.d.ts +2 -1
  19. package/chart-diagram/src/echarts/index.js +104 -109
  20. package/chart-diagram/src/register.js +8 -9
  21. package/class-diagram/src/class/class.d.ts +1 -1
  22. package/class-diagram/src/class/class.rect.d.ts +1 -1
  23. package/class-diagram/src/class/class.rect.js +1 -1
  24. package/class-diagram/src/register.js +1 -1
  25. package/core/index.d.ts +0 -2
  26. package/core/index.js +0 -2
  27. package/core/src/activeLayer.d.ts +10 -2
  28. package/core/src/activeLayer.js +47 -42
  29. package/core/src/animateLayer.d.ts +7 -3
  30. package/core/src/animateLayer.js +12 -10
  31. package/core/src/calling.d.ts +4 -1
  32. package/core/src/calling.js +41 -43
  33. package/core/src/canvas.d.ts +6 -1
  34. package/core/src/canvas.js +21 -22
  35. package/core/src/common.d.ts +7 -6
  36. package/core/src/common.js +674 -341
  37. package/core/src/core.d.ts +4 -5
  38. package/core/src/core.js +385 -522
  39. package/core/src/divLayer.d.ts +36 -2
  40. package/core/src/divLayer.js +305 -33
  41. package/core/src/healps/changeData.d.ts +2 -1
  42. package/core/src/healps/changeData.js +66 -32
  43. package/core/src/hoverLayer.d.ts +9 -2
  44. package/core/src/hoverLayer.js +34 -31
  45. package/core/src/middles/default.d.ts +3 -1
  46. package/core/src/middles/default.js +51 -59
  47. package/core/src/middles/index.js +2 -3
  48. package/core/src/middles/nodes/arbitrarygraph.js +9 -11
  49. package/core/src/middles/nodes/pentagon.rect.js +1 -1
  50. package/core/src/middles/nodes/rectangle.rect.js +1 -1
  51. package/core/src/models/data.d.ts +26 -0
  52. package/core/src/models/data.js +77 -0
  53. package/core/src/models/data.js.map +1 -0
  54. package/core/src/models/index.d.ts +1 -0
  55. package/core/src/models/index.js +1 -0
  56. package/core/src/models/node.d.ts +0 -10
  57. package/core/src/models/node.js +36 -81
  58. package/core/src/models/pen.js +59 -19
  59. package/core/src/models/rect.js +2 -2
  60. package/core/src/mqtt.d.ts +14 -0
  61. package/core/src/mqtt.js +82 -0
  62. package/core/src/mqtt.js.map +1 -0
  63. package/core/src/offscreen.d.ts +4 -1
  64. package/core/src/offscreen.js +8 -10
  65. package/core/src/options.d.ts +1 -3
  66. package/core/src/options.js +0 -2
  67. package/core/src/poll.js +39 -0
  68. package/core/src/preview.d.ts +13 -2
  69. package/core/src/preview.js +43 -135
  70. package/core/src/renderLayer.d.ts +9 -11
  71. package/core/src/renderLayer.js +61 -60
  72. package/core/src/socket.d.ts +10 -0
  73. package/core/src/socket.js +51 -0
  74. package/core/src/socket.js.map +1 -0
  75. package/core/src/utils/canvas.js +1 -1
  76. package/core/src/utils/construction.d.ts +3 -12
  77. package/core/src/utils/construction.js +1 -8
  78. package/core/src/utils/conversion.d.ts +0 -13
  79. package/core/src/utils/conversion.js +0 -210
  80. package/core/src/utils/dom.d.ts +8 -0
  81. package/core/src/utils/dom.js +67 -0
  82. package/core/src/utils/dom.js.map +1 -0
  83. package/core/src/utils/index.d.ts +1 -2
  84. package/core/src/utils/index.js +1 -2
  85. package/core/src/utils/math.d.ts +0 -1
  86. package/core/src/utils/math.js +0 -3
  87. package/core/src/utils/onmousevent.d.ts +0 -3
  88. package/core/src/utils/onmousevent.js +10 -42
  89. package/flow-diagram/src/comment/comment.anchor.d.ts +1 -1
  90. package/flow-diagram/src/comment/comment.anchor.js +1 -1
  91. package/flow-diagram/src/comment/comment.d.ts +1 -1
  92. package/flow-diagram/src/data/data.anchor.d.ts +1 -1
  93. package/flow-diagram/src/data/data.anchor.js +1 -1
  94. package/flow-diagram/src/data/data.d.ts +1 -1
  95. package/flow-diagram/src/data/data.rect.d.ts +1 -1
  96. package/flow-diagram/src/data/data.rect.js +1 -1
  97. package/flow-diagram/src/db/db.d.ts +1 -1
  98. package/flow-diagram/src/db/db.rect.d.ts +1 -1
  99. package/flow-diagram/src/db/db.rect.js +1 -1
  100. package/flow-diagram/src/display/display.anchor.d.ts +1 -1
  101. package/flow-diagram/src/display/display.anchor.js +1 -1
  102. package/flow-diagram/src/display/display.d.ts +1 -1
  103. package/flow-diagram/src/display/display.rect.d.ts +1 -1
  104. package/flow-diagram/src/display/display.rect.js +1 -1
  105. package/flow-diagram/src/document/document.anchor.d.ts +1 -1
  106. package/flow-diagram/src/document/document.anchor.js +1 -1
  107. package/flow-diagram/src/document/document.d.ts +1 -1
  108. package/flow-diagram/src/document/document.rect.d.ts +1 -1
  109. package/flow-diagram/src/document/document.rect.js +1 -1
  110. package/flow-diagram/src/externStorage/externStorage.anchor.d.ts +1 -1
  111. package/flow-diagram/src/externStorage/externStorage.anchor.js +1 -1
  112. package/flow-diagram/src/externStorage/externStorage.d.ts +1 -1
  113. package/flow-diagram/src/externStorage/externStorage.rect.d.ts +1 -1
  114. package/flow-diagram/src/externStorage/externStorage.rect.js +1 -1
  115. package/flow-diagram/src/internalStorage/internalStorage.d.ts +1 -1
  116. package/flow-diagram/src/internalStorage/internalStorage.rect.d.ts +1 -1
  117. package/flow-diagram/src/internalStorage/internalStorage.rect.js +1 -1
  118. package/flow-diagram/src/manually/manually.anchor.d.ts +1 -1
  119. package/flow-diagram/src/manually/manually.anchor.js +1 -1
  120. package/flow-diagram/src/manually/manually.d.ts +1 -1
  121. package/flow-diagram/src/manually/manually.rect.d.ts +1 -1
  122. package/flow-diagram/src/manually/manually.rect.js +1 -1
  123. package/flow-diagram/src/parallel/parallel.anchor.d.ts +1 -1
  124. package/flow-diagram/src/parallel/parallel.anchor.js +1 -1
  125. package/flow-diagram/src/parallel/parallel.d.ts +1 -1
  126. package/flow-diagram/src/queue/queue.d.ts +1 -1
  127. package/flow-diagram/src/queue/queue.rect.d.ts +1 -1
  128. package/flow-diagram/src/queue/queue.rect.js +1 -1
  129. package/flow-diagram/src/register.js +1 -1
  130. package/flow-diagram/src/subprocess/subprocess.d.ts +1 -1
  131. package/flow-diagram/src/subprocess/subprocess.rect.d.ts +1 -1
  132. package/flow-diagram/src/subprocess/subprocess.rect.js +1 -1
  133. package/layout/src/align.d.ts +1 -1
  134. package/layout/src/align.js +1 -1
  135. package/layout/src/layout.d.ts +1 -1
  136. package/layout/src/layout.js +1 -1
  137. package/myShape-diagram/{index.js → myShape.js} +1 -4
  138. package/package.json +1 -1
  139. package/sequence-diagram/src/focus/focus.anchor.d.ts +1 -1
  140. package/sequence-diagram/src/focus/focus.anchor.js +1 -1
  141. package/sequence-diagram/src/focus/focus.d.ts +1 -1
  142. package/sequence-diagram/src/focus/focus.rect.d.ts +1 -1
  143. package/sequence-diagram/src/focus/focus.rect.js +1 -1
  144. package/sequence-diagram/src/lifeline/lifeline.anchor.d.ts +1 -1
  145. package/sequence-diagram/src/lifeline/lifeline.anchor.js +1 -1
  146. package/sequence-diagram/src/lifeline/lifeline.d.ts +1 -1
  147. package/sequence-diagram/src/lifeline/lifeline.rect.d.ts +1 -1
  148. package/sequence-diagram/src/lifeline/lifeline.rect.js +1 -1
  149. package/sequence-diagram/src/register.js +1 -1
  150. package/chart-diagram/src/utils/changeOptions.d.ts +0 -8
  151. package/chart-diagram/src/utils/changeOptions.js +0 -267
  152. package/chart-diagram/src/utils/conversion.d.ts +0 -19
  153. package/chart-diagram/src/utils/conversion.js +0 -559
  154. package/chart-diagram/src/utils/drawGraphic.d.ts +0 -3
  155. package/chart-diagram/src/utils/drawGraphic.js +0 -97
  156. package/chart-diagram/src/utils/formatter.d.ts +0 -1
  157. package/chart-diagram/src/utils/formatter.js +0 -206
  158. package/chart-diagram/src/utils/index.d.ts +0 -5
  159. package/chart-diagram/src/utils/index.js +0 -5
  160. package/chart-diagram/src/utils/render.d.ts +0 -8
  161. package/chart-diagram/src/utils/render.js +0 -219
  162. package/chart-diagram/src/utils/surfaceParametricConversion.d.ts +0 -3
  163. package/chart-diagram/src/utils/surfaceParametricConversion.js +0 -252
  164. package/core/src/element/common.d.ts +0 -6
  165. package/core/src/element/common.js +0 -54
  166. package/core/src/element/datePicker.d.ts +0 -3
  167. package/core/src/element/datePicker.js +0 -47
  168. package/core/src/element/iframe.d.ts +0 -3
  169. package/core/src/element/iframe.js +0 -12
  170. package/core/src/element/index.d.ts +0 -5
  171. package/core/src/element/index.js +0 -6
  172. package/core/src/element/select.d.ts +0 -11
  173. package/core/src/element/select.js +0 -275
  174. package/core/src/element/tab.d.ts +0 -1
  175. package/core/src/element/tab.js +0 -25
  176. package/core/src/element/time.d.ts +0 -3
  177. package/core/src/element/time.js +0 -44
  178. package/core/src/middles/arrows/index.d.ts +0 -4
  179. package/core/src/middles/arrows/index.js +0 -5
  180. package/core/src/middles/lines/index.d.ts +0 -4
  181. package/core/src/middles/lines/index.js +0 -5
  182. package/core/src/middles/nodes/formDatePicker.d.ts +0 -2
  183. package/core/src/middles/nodes/formDatePicker.js +0 -66
  184. package/core/src/middles/nodes/formoverflow.js +0 -61
  185. package/core/src/middles/nodes/formselect.d.ts +0 -2
  186. package/core/src/middles/nodes/formselect.js +0 -102
  187. package/core/src/middles/nodes/iframe.d.ts +0 -2
  188. package/core/src/middles/nodes/iframe.js +0 -29
  189. package/core/src/middles/nodes/index.d.ts +0 -50
  190. package/core/src/middles/nodes/index.js +0 -52
  191. package/core/src/middles/nodes/time.d.ts +0 -2
  192. package/core/src/middles/nodes/time.js +0 -98
  193. package/core/src/store/common.d.ts +0 -9
  194. package/core/src/store/common.js +0 -5
  195. package/core/src/store/data.d.ts +0 -194
  196. package/core/src/store/data.js +0 -187
  197. package/core/src/store/index.d.ts +0 -2
  198. package/core/src/store/index.js +0 -2
  199. package/core/src/utils/assignment.d.ts +0 -7
  200. package/core/src/utils/assignment.js +0 -185
  201. package/core/src/utils/params.d.ts +0 -2
  202. package/core/src/utils/params.js +0 -65
  203. package/static/echartsDefaultData.js +0 -178
  204. package/static/element.js +0 -14
  205. package/static/form.js +0 -11
  206. package/static/index.js +0 -3
  207. package/store/actions.js +0 -1
  208. package/store/clear.js +0 -10
  209. package/store/index.js +0 -2
  210. package/style/common.css +0 -15
  211. package/style/datePicker.css +0 -44
  212. package/style/editor.css +0 -16
  213. package/style/index.css +0 -5
  214. package/style/select.css +0 -143
  215. /package/myShape-diagram/{index.ts → myShape.ts} +0 -0
@@ -1,275 +0,0 @@
1
- import {Store} from 'le5le-store';
2
- import {commonStore} from "../store";
3
- import { setMapDataOptions } from '../../../chart-diagram';
4
- import {previewType, selectStaticType} from '../utils';
5
- import {setElementSwitchTabState} from './tab';
6
- let nodeId = '';
7
- let downId = '';
8
- // 创建下拉头
9
- export function createSelectElement(node) {
10
- const selectEle = document.createElement('div');
11
- const order = node.formData.selected && node.formData.selected.order || 0;
12
- const inputValue = commonStore[node.TID].selectDataPool[node.id].data[order] && commonStore[node.TID].selectDataPool[node.id].data[order].name;
13
- let attrName = 'topology-select-icon-arrow';
14
- if(node.selectDropdown) attrName += ' reverse';
15
- const children = `<i class="${attrName}"
16
- style="border-width: ${node.font.fontSize/2}px;border-bottom-width: 0;">
17
- </i><input type="text" placeholder="请选择" readonly
18
- value="${inputValue}"
19
- class="topology-select-input"
20
- style="font-size: ${node.font.fontSize}px;color: ${node.font.color ? node.font.color : '#fff'}"/>`;
21
- const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
22
- selectEle.setAttribute('id', node.id);
23
- selectEle.setAttribute('class', `topology-select${themeType}`);
24
- selectEle.innerHTML = children;
25
- return selectEle;
26
- }
27
- // 创建下拉options容器
28
- export function createSelectDropdown(node) {
29
- const selectDropdownEle = document.createElement('div');
30
- let liElements = '';
31
- if(node.selectDropdown) {
32
- liElements = createSelectOptions(commonStore[node.TID].selectDataPool[node.id].data, node);
33
- selectDropdownEle.style.display = 'block';
34
- setSelectDropdownPosition(node, selectDropdownEle);
35
- }
36
- const children = `<i class="popper__arrow"></i><ul class="topology-select-dropdown-list">${liElements}</ul>`;
37
- const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
38
- selectDropdownEle.style.width = `${node.rect.width}px`;
39
- selectDropdownEle.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
40
- selectDropdownEle.innerHTML = children;
41
- return selectDropdownEle;
42
- }
43
- // 创建下拉options列表
44
- export function createSelectOptions(data, node) {
45
- const selectNode = commonStore[node.TID].selectDataPool[node.id];
46
- const selectDropdownUl = selectNode.dom.selectDropdownUl;
47
- if(selectDropdownUl) selectDropdownUl.innerHTML = '';
48
- let leElement = '';
49
- const order = selectNode.node.selected ? selectNode.node.selected.order : 0;
50
- for (let i = 0, length = data.length; i < length; i++) {
51
- let selected = i === order ? ' selected' : '';
52
- leElement += `<li
53
- class="topology-select-dropdown-item${selected}"
54
- type="option" data-order="${i}"
55
- style="height: ${node.rect.height}px;line-height: ${node.rect.height}px;font-size: ${node.font.fontSize}px;">
56
- <span>${data[i].name}</span>
57
- </li>`;
58
- }
59
- if(selectDropdownUl) {
60
- selectDropdownUl.innerHTML = leElement;
61
- }else {
62
- return leElement;
63
- }
64
- }
65
- // 配置下拉头的交互状态:展开时三角图标向上,否则向下
66
- export function setSelectInteractiveState(selected, node) {
67
- const selectNode = commonStore[node.TID].selectDataPool[node.id];
68
- selectNode.dom.selectIconArrow.style.display = selected ? 'none' : 'block';
69
- //selectNode.dom['selectRemove'].style.display = selected ? 'block' : 'none';
70
- }
71
- // 重置下拉状态
72
- export function resetSelectInteractiveState(node) {
73
- if(!node || !node.TID) return;
74
- const currentStore = commonStore[node.TID];
75
- if(!Object.keys(currentStore.selectDataPool).length) return;
76
- for (let data of Object.values(currentStore.selectDataPool)) {
77
- if(node && node.id !== data.node.id) {
78
- if(data.dom.selectIconArrow) data.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
79
- data.slideState = false;
80
- }
81
- }
82
- document.querySelector('.topology-select-dropdown').style.display = 'none';
83
- currentStore.elementInteractivePoor.node = null;
84
- }
85
-
86
- /**
87
- * 配置下拉options容器的交互状态,展开和收起
88
- * @param node 下拉元件节点数据
89
- * @param staticType 下拉功能类型:1: 数据统计;2:数据展示;3:显示隐藏
90
- * @param type 功能作用区域类型:Dcim,Topology,Logo
91
- */
92
- export function setSelectDropdownInteractiveState(node, staticType, type) {
93
- const currentStore = commonStore[node.TID];
94
- const selectNode = currentStore.selectDataPool[node.id];
95
- if(!selectNode.staticType) selectNode.staticType = staticType;
96
- if(!selectNode) return;
97
- if(downId !== node.id && type === previewType.Dcim) {
98
- // 点击的不是同一个下拉则重置交互样式,清空数据
99
- resetSelectInteractiveState(node);
100
- currentStore.elementInteractivePoor.options = null;
101
- }
102
- downId = node.id;
103
- currentStore.elementInteractivePoor.node = node;
104
- selectElementStore(node.id, node.TID);
105
- setSelectElementPosition(node);
106
- const { selectIconArrow, selectDropdown } = selectNode.dom;
107
- selectNode.slideState = !selectNode.slideState || node.selectDropdown; // 下拉展开状态
108
- let attrName = 'topology-select-icon-arrow';
109
- if(selectNode.slideState) {
110
- selectDropdown.style.display = 'block';
111
- attrName += ' reverse';
112
- }else {
113
- selectDropdown.style.display = 'none';
114
- attrName.replace(' reverse', '');
115
- }
116
- // 图标旋转
117
- selectIconArrow.setAttribute('class', attrName);
118
- // 添加列表数据
119
- if(!currentStore.elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
120
- }
121
- // 配置下拉偏移位置
122
- export function setSelectElementPosition(node, type) {
123
- // 不同元件切换
124
- selectElementStore(node.id, node.TID);
125
- const selectNode = commonStore[node.TID].selectDataPool[node.id];
126
- if(type === 'down') {
127
- if(nodeId === node.id) return;
128
- commonStore[node.TID].elementInteractivePoor.options = null;
129
- createSelectOptions(selectNode.data, node);
130
- }
131
- nodeId = node.id;
132
- setSelectDropdownPosition(node, selectNode.dom.selectDropdown);
133
- }
134
- function setSelectDropdownPosition(node, selectDropdown) {
135
- const selectEle = commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
136
- let left = selectEle.getBoundingClientRect().left; // 获取下拉元素距离窗体左侧位置
137
- let top = selectEle.getBoundingClientRect().top + node.rect.height;
138
- if(window.location.pathname.includes('workspace')) {
139
- // topol编辑器
140
- left = node.rect.x;
141
- top = node.rect.y + node.rect.height;
142
- }
143
- selectDropdown.style.left = `${left}px`;
144
- selectDropdown.style.top = `${top}px`;
145
- selectDropdown.style.width = `${node.rect.width}px`;
146
- const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
147
- selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
148
- }
149
-
150
- /**
151
- * 获取下拉选中的数据
152
- * @param e 节点选中事件
153
- * @param data 下拉元件节点数据
154
- * @param editData 编辑显下拉的数据
155
- */
156
- export function getSelectedData(e, data, editData) {
157
- const currentStore = commonStore[data.TID];
158
- const selectNode = currentStore.selectDataPool[data.id];
159
- if(!currentStore.elementInteractivePoor.options && data.selectDropdown) currentStore.elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
160
- let order = 0;
161
- let staticType = selectNode.staticType;
162
- if(!editData) {
163
- const parentNode = e.target.parentNode;
164
- const type = parentNode.getAttribute('type');
165
- if(type !== 'option') return;
166
- selectNode.slideState = false;
167
- selectNode.dom.selectDropdown.style.display = 'none';
168
- // 图标旋转
169
- selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
170
- // 选中节点操作
171
- order = parentNode.getAttribute('data-order');
172
- }else {
173
- order = editData.order;
174
- staticType = editData.staticType;
175
- }
176
- if(data.selectDropdown) {
177
- for(let i = 0, leng = currentStore.elementInteractivePoor.options.length; i < leng; i++) {
178
- let name = 'topology-select-dropdown-item';
179
- if(i == order) {
180
- name += ' selected';
181
- }else {
182
- name.replace(' selected', '');
183
- }
184
- currentStore.elementInteractivePoor.options[i].setAttribute('class', name);
185
- }
186
- }
187
- selectNode.optionOrder = order;
188
- const node = selectNode.data[order];
189
- selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
190
- selectNode.node.selected = {
191
- order: parseInt(order),
192
- id: node.id
193
- };
194
- if(staticType === selectStaticType.static) {
195
- // 数据统计
196
- const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
197
- if(!optionNode) return;
198
- // 切换数据
199
- currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
200
- const isInitTable = initTabSwitchPage(data.formData.bindBlockTag, optionNode.data, currentStore);
201
- setMapDataOptions(optionNode.option, optionNode.data);
202
- if(isInitTable) Store.set(`${data.TID}-LT:render`, true);
203
- }
204
- if(staticType === selectStaticType.dataShow) {
205
- // 数据展示
206
- }
207
- if(staticType === selectStaticType.visible) {
208
- // 显示隐藏
209
- const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
210
- if(optionNode) {
211
- // 有绑定图表则切换图表数据
212
- const selecteRealData = currentStore.selectRealDataPool[optionNode.data.id];
213
-
214
- selectNode.node.selected.id = selecteRealData && selecteRealData[order] && selecteRealData[order].id;
215
-
216
- currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
217
-
218
- setMapDataOptions(optionNode.option, optionNode.data);
219
- }
220
- const optionsVisibleData = currentStore.selectTabDataPool[data.id];
221
- if(!optionsVisibleData || !optionsVisibleData.size) return;
222
- for(const [key, value] of optionsVisibleData){
223
- const optionId = node.optionId || node.id;
224
- const eque = optionId === value.tag;
225
- currentStore.data.pens[value.order].visible = eque;
226
- currentStore.data.pens[value.order].visibleSwitch = eque;
227
- value.visible = eque;
228
- setElementSwitchTabState(currentStore.data.pens[value.order]);
229
- }
230
- Store.set(`${data.TID}-LT:render`, true);
231
- }
232
- }
233
- // 初始化Tab页签选中状态
234
- function initTabSwitchPage(bindBlockTag, data, currentStore) {
235
- if(!bindBlockTag) return false;
236
- // 初始化分类选中状态
237
- const tabData = currentStore.switchTabDataPool[`${bindBlockTag}Data`]; // 获取Tab组数据
238
- if(!tabData) return false;
239
- const tabKeys = Object.keys(tabData);
240
- const pens = currentStore.data.pens;
241
- if(!tabKeys.length || !pens[tabData[tabKeys[0]].order].activeImgeIndex) return false; //Tab默认选中第一个页签就退出程序,不执行初始化状态
242
- let tabInit = false;
243
- for (let tabNode of Object.values(tabData)) {
244
- const penNode = pens[tabNode.order];
245
- if(!tabInit) {
246
- data.params.tabVisitOrder = 0;
247
- data.tabData = {
248
- type: '',
249
- data: tabNode.tabData
250
- };
251
- }
252
- if(penNode) {
253
- penNode.activeImgeIndex = tabInit;
254
- tabInit = true;
255
- }
256
- }
257
- return true;
258
- }
259
- // 配置下拉展示的主题风格
260
- export function setSelectElementTheme(node) {
261
- const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
262
- const { selectEle, selectDropdown } = commonStore[node.TID].selectDataPool[node.id].dom;
263
- selectEle.setAttribute('class', `topology-select${themeType}`);
264
- selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
265
- }
266
- // 存储下拉Dom节点
267
- function selectElementStore(id, TID) {
268
- const selectNode = commonStore[TID].selectDataPool[id];
269
- if(!selectNode.dom.selectIconArrow) selectNode.dom.selectIconArrow = selectNode.dom.selectEle.querySelector('.topology-select-icon-arrow');
270
- if(!selectNode.dom.selectDropdown) {
271
- selectNode.dom.selectDropdown = document.querySelector('.topology-select-dropdown');
272
- selectNode.dom.selectDropdownUl = document.querySelector('.topology-select-dropdown-list');
273
- selectNode.dom.selectDropdownLi = document.querySelectorAll('.topology-select-dropdown-item');
274
- }
275
- }
@@ -1 +0,0 @@
1
- export declare function setElementSwitchTabState(node: any): void;
@@ -1,25 +0,0 @@
1
- import {jsonLength} from '../utils';
2
- import {commonStore} from "../store";
3
- // 设置tab切换显示隐藏时的 Dom元件状态
4
- export function setElementSwitchTabState(node) {
5
- if(node.children && node.children.length) {
6
- node.children.map((ch) => {
7
- ch.visible = node.visible;
8
- ch.visibleSwitch = node.visible;
9
- setElementSwitchTabState(ch);
10
- })
11
- }
12
- if(!(node.name === 'echarts' || node.name === 'select')) return;
13
- const currentStore = commonStore[node.TID];
14
- if(typeof currentStore.elementInteractivePoor.elementDataLength !== 'number') {
15
- currentStore.elementInteractivePoor.elementDataLength = jsonLength(currentStore.echartsDataPool) || jsonLength(currentStore.selectDataPool);
16
- }
17
- if(!currentStore.elementInteractivePoor.elementDataLength) return;
18
- const ele = currentStore.echartsDataPool[node.id] && currentStore.echartsDataPool[node.id].div ||
19
- currentStore.selectDataPool[node.id] && currentStore.selectDataPool[node.id].dom.selectEle;
20
- if(ele) {
21
- ele.style.display = !node.visible ? 'none': 'block';
22
- }else {
23
- currentStore.data.dataResize = 1;
24
- }
25
- }
@@ -1,3 +0,0 @@
1
- import { Node } from '../models';
2
-
3
- export declare function createTimeElement(node: Node): HTMLTimeElement;
@@ -1,44 +0,0 @@
1
- // 创建时间组件
2
- export function createTimeElement(node) {
3
- const timeBox = document.createElement('div');
4
- // timeBox.scrolling = 'no';
5
- timeBox.width = node.rect.width;
6
- timeBox.height = node.rect.height;
7
- let children =
8
- `<div class="timeWrapper" style="display: flex;flex-direction: initial; justify-content: center; font-size: ${node.font.fontSize}px;width:100%;height:100%; line-height:${timeBox.height}px; color:${node.font.color}; font-family:${node.font.fontFamily}">`+
9
- `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
10
- <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
11
- <div class="timeTextUp h" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px;height: 100%;">${node.h}</div>
12
- <div class="timeTextDown h" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.h}</div>
13
- </div>
14
- </div>`+
15
- `<div class="split" style="flex:1; position: relative;line-height:${timeBox.height}px">:</div>`+
16
- `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
17
- <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
18
- <div class="timeTextUp m" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px; height: 100%;">${node.m}</div>
19
- <div class="timeTextDown m" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.m}</div>
20
- </div>
21
- </div>`+
22
- `<div class="split" style="flex:1; position: relative;line-height:${timeBox.height}px">:</div>`+
23
- `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
24
- <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
25
- <div class="timeTextUp s" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px; height: 100%;">${node.s}</div>
26
- <div class="timeTextDown s" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.s}</div>
27
- </div>
28
- </div>`+
29
- `</div>`
30
- timeBox.setAttribute('id', node.id);
31
- timeBox.setAttribute('class', 'topology2dConfTime');
32
- timeBox.innerHTML = children;
33
- return timeBox;
34
- }
35
- export function updateTimeStyle(node, time) {
36
- time.querySelector('.timeWrapper').style.lineHeight = node.rect.height+'px';
37
- time.querySelector('.timeWrapper').style.fontSize = node.font.fontSize+'px';
38
- time.querySelector('.timeWrapper').style.fontFamily = node.font.fontFamily;
39
- time.querySelector('.timeWrapper').style.color = node.font.color;
40
- time.querySelectorAll('.split').forEach(element => {
41
- element.style.lineHeight = node.rect.height+'px';
42
- });
43
-
44
- }
@@ -1,4 +0,0 @@
1
- export * from './circle';
2
- export * from './diamond';
3
- export * from './line';
4
- export * from './triangle';
@@ -1,5 +0,0 @@
1
- export * from './circle';
2
- export * from './diamond';
3
- export * from './line';
4
- export * from './triangle';
5
- //# sourceMappingURL=index.js.map
@@ -1,4 +0,0 @@
1
- export * from './curve';
2
- export * from './line';
3
- export * from './mind';
4
- export * from './polyline';
@@ -1,5 +0,0 @@
1
- export * from './curve';
2
- export * from './line';
3
- export * from './mind';
4
- export * from './polyline';
5
- //# sourceMappingURL=index.js.map
@@ -1,2 +0,0 @@
1
- import { Node } from '../../models';
2
- export declare function fromDatePicker(ctx: CanvasRenderingContext2D, node: Node): void;
@@ -1,66 +0,0 @@
1
- import {Store} from 'le5le-store';
2
- import {rectangle} from './rectangle';
3
- import { createDatePickerElement, loadJS, setDataPickerElementStyle } from '../../element';
4
- import { s8 } from '../../utils';
5
- import {commonStore} from "../../store";
6
-
7
- export async function fromDatePicker(ctx, node) {
8
- // 绘制一个底图,类似于占位符。
9
- rectangle(ctx, node);
10
-
11
- if (!window.datePickerRegister) {
12
- //未注册datePicker插件
13
- const datePickerRegisterData = await loadJS(`${window.location.origin}/libary/laydate/laydate.js`).catch((e) => {
14
- console.error('datePicker插件加载失败>>>', e);
15
- });
16
- if(!datePickerRegisterData) return;
17
- }
18
-
19
- const currentStore = commonStore[node.TID];
20
-
21
- if (!currentStore.pickerDataPool[node.id]) {
22
- // 未创建该元件
23
- node.elementId = s8();
24
- const datePicker = createDatePickerElement(node);
25
- currentStore.pickerDataPool[node.id] = {
26
- dom: {
27
- container: datePicker
28
- }
29
- }
30
- document.body.appendChild(datePicker);
31
- // 添加当前节点到div层
32
- node.addToDiv();
33
- setDataPickerElementStyle(node);
34
- if(window.location.pathname.includes('workspace') && currentStore.options.type === 'topology') return;
35
- const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
36
- if((pickerOptions.min || pickerOptions.max) && (pickerOptions.type !== 'year' || pickerOptions.type !== 'month')){
37
- // 字符转换
38
- if(pickerOptions.min && isValidInteger(pickerOptions.min)) pickerOptions.min = Number(pickerOptions.min);
39
- if(pickerOptions.max && isValidInteger(pickerOptions.max)) pickerOptions.max = Number(pickerOptions.max);
40
- }
41
- pickerOptions.elem = `#picker${node.id}`;
42
- pickerOptions.done = function (val, date) {
43
- node.formData.selected = val
44
- date.value = val;
45
- Store.set(`${node.TID}-EVENT:change`, {node, date});
46
- }
47
- setTimeout(() => {
48
-
49
- laydate.render(pickerOptions);
50
-
51
- }, 100)
52
- }else {
53
- if(node.formData.resetStyle) {
54
- setDataPickerElementStyle(node);
55
- node.formData.resetStyle = false;
56
- }
57
- // if(!node.formData.render) return;
58
- // node.formData.render = false;
59
- // const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
60
- // Object.assign(node.formData.datePicker.config, pickerOptions);
61
- //resetDatePicker(node);
62
- }
63
- }
64
- function isValidInteger(str) {
65
- return /^-?\d+$/.test(str) && str !== '-' && !str.startsWith('+');
66
- }
@@ -1,61 +0,0 @@
1
- // import {} from './rectangle';
2
- import {rectangle, createDiv, s8, Topology} from '../../../../core';
3
- import {commonStore} from "../../store";
4
-
5
- export async function formOverflow(ctx, node) {
6
- // 绘制一个底图,类似于占位符。
7
- rectangle(ctx, node)
8
- console.log('绘制滚动组件--')
9
- // 添加当前节点到div层
10
- if (!node.elementId) {
11
- node.elementId = s8()
12
- }
13
- let formoverData = commonStore[node.TID].formoverDataPool[node.id];
14
- let id = node.formData.detailPageId
15
- const color = node.formData.scrollbarColor? node.formData.scrollbarColor: 'auto'
16
- const colorBg = node.formData.scrollbarColorBg? node.formData.scrollbarColorBg: 'auto'
17
- const scrollbarColor = color + ' ' + colorBg
18
-
19
- if (!node.elementLoaded && !formoverData) {
20
- console.log('是否存在--formoverData--0-',formoverData)
21
- if(!formoverData) {
22
- formoverData = {
23
- div: createDiv(node)
24
- };
25
- }else {
26
- formoverData.div = createDiv(node);
27
- }
28
- formoverData.div.setAttribute('class', 'topoOverflow');
29
- formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
30
- formoverData.div.style.setProperty('scrollbar-width', 'thin');
31
-
32
- node.elementLoaded = true
33
- document.body.appendChild(formoverData.div)
34
- // 添加当前节点到div层
35
- node.addToDiv()
36
- commonStore[node.TID].formoverDataPool[node.id] = formoverData;
37
-
38
-
39
- console.log('请求子页面接口-----id =',id)
40
- let canvas = new Topology(node.id, {
41
- rotateCursor: '/img/rotate.cur',
42
- })
43
- canvas.formOverflowOpen(node.formData.detailPageData)
44
- commonStore[node.TID].formoverCanvasDataPool[node.id] = canvas
45
- }else if(formoverData && id){
46
- console.log('是否存在--formoverData--1-',formoverData)
47
- formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
48
- formOverflowChange(node)
49
- }
50
- }
51
-
52
- // 更新滚动组件中子页面
53
- export function formOverflowChange(node) {
54
- //绘制画布
55
- console.log('更新滚动组件中子页面-',node)
56
- let canvas = commonStore[node.TID].formoverCanvasDataPool[node.id]
57
- let data = node.formData.detailPageData
58
- console.log('改变滚动组件中子页面-',data)
59
- canvas.formOverflowOpen(data)
60
- }
61
-
@@ -1,2 +0,0 @@
1
- import { Node } from '../../models';
2
- export declare function formSelect(ctx: CanvasRenderingContext2D, node: Node): void;
@@ -1,102 +0,0 @@
1
- import {rectangle} from './rectangle';
2
- import {
3
- createSelectElement,
4
- createSelectDropdown} from '../../element';
5
- import {
6
- setEventListener,
7
- s8} from '../../utils';
8
- import {selectDefaultData} from '../../../../static';
9
- import {commonStore} from "../../store";
10
-
11
- export function formSelect(ctx, node) {
12
- // 绘制一个底图,类似于占位符。
13
- rectangle(ctx, node);
14
- if (!commonStore[node.TID].selectDataPool[node.id]) {
15
- const currentStore = commonStore[node.TID];
16
- node.elementId = s8();
17
- node.dash = 4;
18
- currentStore.selectDataPool[node.id] = {
19
- slideState: node.selectDropdown,
20
- node: {
21
- id: node.id,
22
- color: node.font.color,
23
- fontSize: node.font.fontSize,
24
- selected: node.formData.selected || null
25
- },
26
- dom: {}
27
- };
28
- let bindBlockId = '';
29
- if(node.formData.bindBlockId) {
30
- // 去空格重新赋值
31
- bindBlockId = node.formData.bindBlockId.trim();
32
- node.formData.bindBlockId = bindBlockId;
33
- }
34
- if(node.formData.bindBlockTag) {
35
- // 去空格重新赋值
36
- node.formData.bindBlockTag = node.formData.bindBlockTag.trim();
37
- }
38
- let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
39
- if(bindBlockId && selectRealData) {
40
- // select与echarts互相关联
41
- if(node.formData.ids) {
42
- const optionIds = node.formData.ids.split(',');
43
- for (let i = 0; i < optionIds.length; i++) {
44
- if(selectRealData[i]) selectRealData[i].optionId = optionIds[i];
45
- }
46
- }
47
- currentStore.selectDataPool[node.id].data = selectRealData;
48
- currentStore.selectDataPool[node.id].node.selected.id = selectRealData[0].id;
49
- const echartsData = currentStore.echartsDataPool[bindBlockId];
50
- echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
51
- bindId: node.id
52
- };
53
- // select与Tab关联
54
- const bindBlockTagData = currentStore.switchTabDataPool[`${node.formData.bindBlockTag}Data`];
55
- if(bindBlockTagData) currentStore.echartsDataPool[bindBlockId].tabCorrelationType = 'select';
56
- }else {
57
- if(node.formData.ids) {
58
- const optionIds = node.formData.ids.split(',');
59
- const optionNames = node.formData.names.split(',');
60
- const optionsData = [];
61
- for (let i = 0; i < optionIds.length; i++) {
62
- optionsData.push({
63
- id: optionIds[i],
64
- name: optionNames[i]
65
- });
66
- }
67
- currentStore.selectDataPool[node.id].data = optionsData;
68
- }else {
69
- currentStore.selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
70
- }
71
- }
72
- const select = createSelectElement(node);
73
- currentStore.selectDataPool[node.id].dom.selectEle = select;
74
- document.body.appendChild(select);
75
- let selectDropdownEle = document.querySelector('.topology-select-dropdown');
76
- if(!selectDropdownEle) {
77
- selectDropdownEle = createSelectDropdown(node);
78
- const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
79
- parentEle.appendChild(selectDropdownEle);
80
- // 鼠标按下
81
- selectDropdownEle.addEventListener('mousedown', (e) => {
82
- setEventListener(e, node.TID);
83
- });
84
- }
85
- // 添加当前节点到div层
86
- node.addToDiv();
87
- }else {
88
- const selectNode = commonStore[node.TID].selectDataPool[node.id];
89
- if(selectNode.node.color === node.font.color && selectNode.node.fontSize === node.font.fontSize) return;
90
- const selectDom = selectNode.dom;
91
- if(!selectDom.selectInput) selectDom.selectInput = selectDom.selectEle.querySelector('.topology-select-input');
92
- selectDom.selectInput.style.color = node.font.color;
93
- selectDom.selectInput.style.fontSize = `${node.font.fontSize}px`;
94
- if(node.selectDropdown) {
95
- const liEle = selectDom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
96
- liEle.forEach(function(element) {
97
- element.style.color = node.font.color;
98
- element.style.fontSize = `${node.font.fontSize}px`;
99
- });
100
- }
101
- }
102
- }
@@ -1,2 +0,0 @@
1
- import { Node } from '../../models';
2
- export declare function iframePrimeval(ctx: CanvasRenderingContext2D, node: Node): void;
@@ -1,29 +0,0 @@
1
- import {rectangle} from './rectangle';
2
- import {s8} from "../../utils";
3
- import {createIframeElement} from "../../element";
4
- import {commonStore} from "../../store";
5
-
6
- export function iframePrimeval(ctx, node) {
7
- //console.log('iframePrimeval############', node)
8
- // 绘制一个底图,类似于占位符。
9
- rectangle(ctx, node);
10
- if (!commonStore[node.TID].iframeDataPool[node.id]) {
11
- node.elementId = s8();
12
- commonStore[node.TID].iframeDataPool[node.id] = {
13
- node: {
14
- id: node.id,
15
- src: node.iframe
16
- }
17
- };
18
- const iframe = createIframeElement(node);
19
- commonStore[node.TID].iframeDataPool[node.id].iframe = iframe;
20
- const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
21
- parentEle.appendChild(iframe);
22
- // 添加当前节点到div层
23
- node.addToDiv();
24
- }else {
25
- const iframeNode = commonStore[node.TID].iframeDataPool[node.id];
26
- if(iframeNode.node.src === node.iframe) return;
27
- iframeNode.iframe.src = node.iframe;
28
- }
29
- }