dcim-topology2d 2.2.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 (217) 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 -112
  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 +675 -343
  37. package/core/src/core.d.ts +4 -5
  38. package/core/src/core.js +385 -536
  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 +100 -86
  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 -63
  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/line.js +7 -7
  57. package/core/src/models/node.d.ts +0 -10
  58. package/core/src/models/node.js +101 -148
  59. package/core/src/models/pen.js +67 -27
  60. package/core/src/models/rect.js +2 -2
  61. package/core/src/mqtt.d.ts +14 -0
  62. package/core/src/mqtt.js +82 -0
  63. package/core/src/mqtt.js.map +1 -0
  64. package/core/src/offscreen.d.ts +4 -1
  65. package/core/src/offscreen.js +24 -26
  66. package/core/src/options.d.ts +1 -3
  67. package/core/src/options.js +0 -2
  68. package/core/src/poll.js +39 -0
  69. package/core/src/preview.d.ts +13 -2
  70. package/core/src/preview.js +43 -144
  71. package/core/src/renderLayer.d.ts +9 -11
  72. package/core/src/renderLayer.js +61 -60
  73. package/core/src/socket.d.ts +10 -0
  74. package/core/src/socket.js +51 -0
  75. package/core/src/socket.js.map +1 -0
  76. package/core/src/utils/canvas.js +1 -1
  77. package/core/src/utils/construction.d.ts +3 -36
  78. package/core/src/utils/construction.js +1 -29
  79. package/core/src/utils/conversion.d.ts +0 -15
  80. package/core/src/utils/conversion.js +0 -319
  81. package/core/src/utils/dom.d.ts +8 -0
  82. package/core/src/utils/dom.js +67 -0
  83. package/core/src/utils/dom.js.map +1 -0
  84. package/core/src/utils/index.d.ts +1 -2
  85. package/core/src/utils/index.js +1 -2
  86. package/core/src/utils/onmousevent.d.ts +0 -3
  87. package/core/src/utils/onmousevent.js +10 -42
  88. package/flow-diagram/src/comment/comment.anchor.d.ts +1 -1
  89. package/flow-diagram/src/comment/comment.anchor.js +1 -1
  90. package/flow-diagram/src/comment/comment.d.ts +1 -1
  91. package/flow-diagram/src/data/data.anchor.d.ts +1 -1
  92. package/flow-diagram/src/data/data.anchor.js +1 -1
  93. package/flow-diagram/src/data/data.d.ts +1 -1
  94. package/flow-diagram/src/data/data.rect.d.ts +1 -1
  95. package/flow-diagram/src/data/data.rect.js +1 -1
  96. package/flow-diagram/src/db/db.d.ts +1 -1
  97. package/flow-diagram/src/db/db.rect.d.ts +1 -1
  98. package/flow-diagram/src/db/db.rect.js +1 -1
  99. package/flow-diagram/src/display/display.anchor.d.ts +1 -1
  100. package/flow-diagram/src/display/display.anchor.js +1 -1
  101. package/flow-diagram/src/display/display.d.ts +1 -1
  102. package/flow-diagram/src/display/display.rect.d.ts +1 -1
  103. package/flow-diagram/src/display/display.rect.js +1 -1
  104. package/flow-diagram/src/document/document.anchor.d.ts +1 -1
  105. package/flow-diagram/src/document/document.anchor.js +1 -1
  106. package/flow-diagram/src/document/document.d.ts +1 -1
  107. package/flow-diagram/src/document/document.rect.d.ts +1 -1
  108. package/flow-diagram/src/document/document.rect.js +1 -1
  109. package/flow-diagram/src/externStorage/externStorage.anchor.d.ts +1 -1
  110. package/flow-diagram/src/externStorage/externStorage.anchor.js +1 -1
  111. package/flow-diagram/src/externStorage/externStorage.d.ts +1 -1
  112. package/flow-diagram/src/externStorage/externStorage.rect.d.ts +1 -1
  113. package/flow-diagram/src/externStorage/externStorage.rect.js +1 -1
  114. package/flow-diagram/src/internalStorage/internalStorage.d.ts +1 -1
  115. package/flow-diagram/src/internalStorage/internalStorage.rect.d.ts +1 -1
  116. package/flow-diagram/src/internalStorage/internalStorage.rect.js +1 -1
  117. package/flow-diagram/src/manually/manually.anchor.d.ts +1 -1
  118. package/flow-diagram/src/manually/manually.anchor.js +1 -1
  119. package/flow-diagram/src/manually/manually.d.ts +1 -1
  120. package/flow-diagram/src/manually/manually.rect.d.ts +1 -1
  121. package/flow-diagram/src/manually/manually.rect.js +1 -1
  122. package/flow-diagram/src/parallel/parallel.anchor.d.ts +1 -1
  123. package/flow-diagram/src/parallel/parallel.anchor.js +1 -1
  124. package/flow-diagram/src/parallel/parallel.d.ts +1 -1
  125. package/flow-diagram/src/queue/queue.d.ts +1 -1
  126. package/flow-diagram/src/queue/queue.rect.d.ts +1 -1
  127. package/flow-diagram/src/queue/queue.rect.js +1 -1
  128. package/flow-diagram/src/register.js +1 -1
  129. package/flow-diagram/src/subprocess/subprocess.d.ts +1 -1
  130. package/flow-diagram/src/subprocess/subprocess.rect.d.ts +1 -1
  131. package/flow-diagram/src/subprocess/subprocess.rect.js +1 -1
  132. package/layout/src/align.d.ts +1 -1
  133. package/layout/src/align.js +1 -1
  134. package/layout/src/layout.d.ts +1 -1
  135. package/layout/src/layout.js +1 -1
  136. package/myShape-diagram/{index.js → myShape.js} +1 -4
  137. package/package.json +1 -1
  138. package/sequence-diagram/src/focus/focus.anchor.d.ts +1 -1
  139. package/sequence-diagram/src/focus/focus.anchor.js +1 -1
  140. package/sequence-diagram/src/focus/focus.d.ts +1 -1
  141. package/sequence-diagram/src/focus/focus.rect.d.ts +1 -1
  142. package/sequence-diagram/src/focus/focus.rect.js +1 -1
  143. package/sequence-diagram/src/lifeline/lifeline.anchor.d.ts +1 -1
  144. package/sequence-diagram/src/lifeline/lifeline.anchor.js +1 -1
  145. package/sequence-diagram/src/lifeline/lifeline.d.ts +1 -1
  146. package/sequence-diagram/src/lifeline/lifeline.rect.d.ts +1 -1
  147. package/sequence-diagram/src/lifeline/lifeline.rect.js +1 -1
  148. package/sequence-diagram/src/register.js +1 -1
  149. package/chart-diagram/src/utils/changeOptions.d.ts +0 -8
  150. package/chart-diagram/src/utils/changeOptions.js +0 -267
  151. package/chart-diagram/src/utils/conversion.d.ts +0 -19
  152. package/chart-diagram/src/utils/conversion.js +0 -560
  153. package/chart-diagram/src/utils/drawGraphic.d.ts +0 -3
  154. package/chart-diagram/src/utils/drawGraphic.js +0 -97
  155. package/chart-diagram/src/utils/formatter.d.ts +0 -1
  156. package/chart-diagram/src/utils/formatter.js +0 -206
  157. package/chart-diagram/src/utils/index.d.ts +0 -5
  158. package/chart-diagram/src/utils/index.js +0 -5
  159. package/chart-diagram/src/utils/render.d.ts +0 -8
  160. package/chart-diagram/src/utils/render.js +0 -219
  161. package/chart-diagram/src/utils/surfaceParametricConversion.d.ts +0 -3
  162. package/chart-diagram/src/utils/surfaceParametricConversion.js +0 -252
  163. package/core/src/element/common.d.ts +0 -6
  164. package/core/src/element/common.js +0 -63
  165. package/core/src/element/datePicker.d.ts +0 -3
  166. package/core/src/element/datePicker.js +0 -44
  167. package/core/src/element/iframe.d.ts +0 -3
  168. package/core/src/element/iframe.js +0 -12
  169. package/core/src/element/index.d.ts +0 -5
  170. package/core/src/element/index.js +0 -6
  171. package/core/src/element/select.d.ts +0 -11
  172. package/core/src/element/select.js +0 -273
  173. package/core/src/element/tab.d.ts +0 -1
  174. package/core/src/element/tab.js +0 -20
  175. package/core/src/element/time.d.ts +0 -3
  176. package/core/src/element/time.js +0 -44
  177. package/core/src/middles/arrows/index.d.ts +0 -4
  178. package/core/src/middles/arrows/index.js +0 -5
  179. package/core/src/middles/lines/index.d.ts +0 -4
  180. package/core/src/middles/lines/index.js +0 -5
  181. package/core/src/middles/nodes/formDatePicker.d.ts +0 -2
  182. package/core/src/middles/nodes/formDatePicker.js +0 -107
  183. package/core/src/middles/nodes/formoverflow.js +0 -61
  184. package/core/src/middles/nodes/formselect.d.ts +0 -2
  185. package/core/src/middles/nodes/formselect.js +0 -111
  186. package/core/src/middles/nodes/iframe.d.ts +0 -2
  187. package/core/src/middles/nodes/iframe.js +0 -29
  188. package/core/src/middles/nodes/index.d.ts +0 -51
  189. package/core/src/middles/nodes/index.js +0 -53
  190. package/core/src/middles/nodes/switchs.d.ts +0 -2
  191. package/core/src/middles/nodes/switchs.js +0 -46
  192. package/core/src/middles/nodes/time.d.ts +0 -2
  193. package/core/src/middles/nodes/time.js +0 -98
  194. package/core/src/store/common.d.ts +0 -9
  195. package/core/src/store/common.js +0 -5
  196. package/core/src/store/data.d.ts +0 -196
  197. package/core/src/store/data.js +0 -193
  198. package/core/src/store/index.d.ts +0 -2
  199. package/core/src/store/index.js +0 -2
  200. package/core/src/utils/assignment.d.ts +0 -7
  201. package/core/src/utils/assignment.js +0 -216
  202. package/core/src/utils/params.d.ts +0 -3
  203. package/core/src/utils/params.js +0 -136
  204. package/static/echartsDefaultData.js +0 -178
  205. package/static/element.js +0 -14
  206. package/static/form.js +0 -11
  207. package/static/index.js +0 -3
  208. package/store/actions.js +0 -1
  209. package/store/clear.js +0 -10
  210. package/store/default.js +0 -22
  211. package/store/index.js +0 -3
  212. package/style/common.css +0 -15
  213. package/style/datePicker.css +0 -44
  214. package/style/editor.css +0 -16
  215. package/style/index.css +0 -5
  216. package/style/select.css +0 -143
  217. /package/myShape-diagram/{index.ts → myShape.ts} +0 -0
@@ -1,273 +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 type 功能作用区域类型:Dcim,Topology,Logo
90
- */
91
- export function setSelectDropdownInteractiveState(node, type) {
92
- const currentStore = commonStore[node.TID];
93
- const selectNode = currentStore.selectDataPool[node.id];
94
- if(!selectNode) return;
95
- if(downId !== node.id && type === previewType.Dcim) {
96
- // 点击的不是同一个下拉则重置交互样式,清空数据
97
- resetSelectInteractiveState(node);
98
- currentStore.elementInteractivePoor.options = null;
99
- }
100
- downId = node.id;
101
- currentStore.elementInteractivePoor.node = node;
102
- selectElementStore(node.id, node.TID);
103
- setSelectElementPosition(node);
104
- const { selectIconArrow, selectDropdown } = selectNode.dom;
105
- selectNode.slideState = !selectNode.slideState || node.selectDropdown; // 下拉展开状态
106
- let attrName = 'topology-select-icon-arrow';
107
- if(selectNode.slideState) {
108
- selectDropdown.style.display = 'block';
109
- attrName += ' reverse';
110
- }else {
111
- selectDropdown.style.display = 'none';
112
- attrName.replace(' reverse', '');
113
- }
114
- // 图标旋转
115
- selectIconArrow.setAttribute('class', attrName);
116
- // 添加列表数据
117
- if(!currentStore.elementInteractivePoor.options) createSelectOptions(selectNode.data, node);
118
- }
119
- // 配置下拉偏移位置
120
- export function setSelectElementPosition(node, type) {
121
- // 不同元件切换
122
- selectElementStore(node.id, node.TID);
123
- const selectNode = commonStore[node.TID].selectDataPool[node.id];
124
- if(type === 'down') {
125
- if(nodeId === node.id) return;
126
- commonStore[node.TID].elementInteractivePoor.options = null;
127
- createSelectOptions(selectNode.data, node);
128
- }
129
- nodeId = node.id;
130
- setSelectDropdownPosition(node, selectNode.dom.selectDropdown);
131
- }
132
- function setSelectDropdownPosition(node, selectDropdown) {
133
- const selectEle = commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
134
- let left = selectEle.getBoundingClientRect().left; // 获取下拉元素距离窗体左侧位置
135
- let top = selectEle.getBoundingClientRect().top + node.rect.height;
136
- if(window.location.pathname.includes('workspace')) {
137
- // topol编辑器
138
- left = node.rect.x;
139
- top = node.rect.y + node.rect.height;
140
- }
141
- selectDropdown.style.left = `${left}px`;
142
- selectDropdown.style.top = `${top}px`;
143
- selectDropdown.style.width = `${node.rect.width}px`;
144
- const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
145
- selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
146
- }
147
-
148
- /**
149
- * 获取下拉选中的数据
150
- * @param e 节点选中事件
151
- * @param data 下拉元件节点数据
152
- * @param editData 编辑显下拉的数据
153
- */
154
- export function getSelectedData(e, data, editData) {
155
- const currentStore = commonStore[data.TID];
156
- const selectNode = currentStore.selectDataPool[data.id];
157
- if(!currentStore.elementInteractivePoor.options && data.selectDropdown) currentStore.elementInteractivePoor.options = selectNode.dom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
158
- let order = 0;
159
- let staticType = selectNode.staticType;
160
- if(!editData) {
161
- const parentNode = e.target.parentNode;
162
- const type = parentNode.getAttribute('type');
163
- if(type !== 'option') return;
164
- selectNode.slideState = false;
165
- selectNode.dom.selectDropdown.style.display = 'none';
166
- // 图标旋转
167
- selectNode.dom.selectIconArrow.setAttribute('class', 'topology-select-icon-arrow');
168
- // 选中节点操作
169
- order = parentNode.getAttribute('data-order');
170
- }else {
171
- order = editData.order;
172
- staticType = editData.staticType;
173
- }
174
- if(data.selectDropdown) {
175
- for(let i = 0, leng = currentStore.elementInteractivePoor.options.length; i < leng; i++) {
176
- let name = 'topology-select-dropdown-item';
177
- if(i == order) {
178
- name += ' selected';
179
- }else {
180
- name.replace(' selected', '');
181
- }
182
- currentStore.elementInteractivePoor.options[i].setAttribute('class', name);
183
- }
184
- }
185
- selectNode.optionOrder = order;
186
- const node = selectNode.data[order];
187
- selectNode.dom.selectEle.querySelector('.topology-select-input').value = node.name;
188
- selectNode.node.selected = {
189
- order: parseInt(order),
190
- id: node.id
191
- };
192
- if(staticType === selectStaticType.static) {
193
- // 数据统计
194
- const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
195
- if(!optionNode) return;
196
- // 切换数据
197
- currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
198
- const isInitTable = initTabSwitchPage(data.formData.bindBlockTag, optionNode.data, currentStore);
199
- setMapDataOptions(optionNode.option, optionNode.data);
200
- if(isInitTable) Store.set(`${data.TID}-LT:render`, true);
201
- }
202
- if(staticType === selectStaticType.dataShow) {
203
- // 数据展示
204
- }
205
- if(staticType === selectStaticType.visible) {
206
- // 显示隐藏
207
- const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
208
- if(optionNode) {
209
- // 有绑定图表则切换图表数据
210
- const selecteRealData = currentStore.selectRealDataPool[optionNode.data.id];
211
-
212
- selectNode.node.selected.id = selecteRealData && selecteRealData[order] && selecteRealData[order].id;
213
-
214
- currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
215
-
216
- setMapDataOptions(optionNode.option, optionNode.data);
217
- }
218
- const optionsVisibleData = currentStore.selectTabDataPool[data.id];
219
- if(!optionsVisibleData || !optionsVisibleData.size) return;
220
- for(const [key, value] of optionsVisibleData){
221
- const optionId = node.optionId || node.id;
222
- const eque = optionId === value.tag;
223
- currentStore.data.pens[value.order].visible = eque;
224
- currentStore.data.pens[value.order].visibleSwitch = eque;
225
- value.visible = eque;
226
- setElementSwitchTabState(currentStore.data.pens[value.order]);
227
- }
228
- Store.set(`${data.TID}-LT:render`, true);
229
- }
230
- }
231
- // 初始化Tab页签选中状态
232
- function initTabSwitchPage(bindBlockTag, data, currentStore) {
233
- if(!bindBlockTag) return false;
234
- // 初始化分类选中状态
235
- const tabData = currentStore.switchTabDataPool[`${bindBlockTag}Data`]; // 获取Tab组数据
236
- if(!tabData) return false;
237
- const tabKeys = Object.keys(tabData);
238
- const pens = currentStore.data.pens;
239
- if(!tabKeys.length || !pens[tabData[tabKeys[0]].order].activeImgeIndex) return false; //Tab默认选中第一个页签就退出程序,不执行初始化状态
240
- let tabInit = false;
241
- for (let tabNode of Object.values(tabData)) {
242
- const penNode = pens[tabNode.order];
243
- if(!tabInit) {
244
- data.params.tabVisitOrder = 0;
245
- data.tabData = {
246
- type: '',
247
- data: tabNode.tabData
248
- };
249
- }
250
- if(penNode) {
251
- penNode.activeImgeIndex = tabInit;
252
- tabInit = true;
253
- }
254
- }
255
- return true;
256
- }
257
- // 配置下拉展示的主题风格
258
- export function setSelectElementTheme(node) {
259
- const themeType = node.formData.theme ? ` theme${node.formData.theme}` : '';
260
- const { selectEle, selectDropdown } = commonStore[node.TID].selectDataPool[node.id].dom;
261
- selectEle.setAttribute('class', `topology-select${themeType}`);
262
- selectDropdown.setAttribute('class', `topology-select-dropdown${themeType} documentDefine`);
263
- }
264
- // 存储下拉Dom节点
265
- function selectElementStore(id, TID) {
266
- const selectNode = commonStore[TID].selectDataPool[id];
267
- if(!selectNode.dom.selectIconArrow) selectNode.dom.selectIconArrow = selectNode.dom.selectEle.querySelector('.topology-select-icon-arrow');
268
- if(!selectNode.dom.selectDropdown) {
269
- selectNode.dom.selectDropdown = document.querySelector('.topology-select-dropdown');
270
- selectNode.dom.selectDropdownUl = document.querySelector('.topology-select-dropdown-list');
271
- selectNode.dom.selectDropdownLi = document.querySelectorAll('.topology-select-dropdown-item');
272
- }
273
- }
@@ -1 +0,0 @@
1
- export declare function setElementSwitchTabState(node: any): void;
@@ -1,20 +0,0 @@
1
- import {commonStore} from "../store";
2
- // 设置tab切换显示隐藏时的 Dom元件状态
3
- export function setElementSwitchTabState(node) {
4
- if(node.children && node.children.length) {
5
- node.children.map((ch) => {
6
- ch.visible = node.visible;
7
- ch.visibleSwitch = node.visible;
8
- setElementSwitchTabState(ch);
9
- })
10
- }
11
- if(node.attribute !== 'dom') return;
12
- const currentStore = commonStore[node.TID];
13
- if(!currentStore.elementInteractivePoor.dom) return;
14
- const ele = currentStore.elementInteractivePoor.dom[node.id];
15
- if(ele) {
16
- ele.style.display = !node.visible ? 'none': 'block';
17
- }else {
18
- currentStore.data.dataResize = 1;
19
- }
20
- }
@@ -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,107 +0,0 @@
1
- import {Store} from "le5le-store";
2
- import {rectangle} from './rectangle';
3
- import { createDatePickerElement, loadJS, setDataPickerElementStyle } from '../../element';
4
- import { s8, datePickerValueFormatting } from '../../utils';
5
- import {commonStore} from "../../store";
6
- import {datePickerType} from "../../../../store";
7
-
8
- export async function fromDatePicker(ctx, node) {
9
- // 绘制一个底图,类似于占位符。
10
- rectangle(ctx, node);
11
-
12
- if (!window.datePickerRegister) {
13
- //未注册datePicker插件
14
- const datePickerRegisterData = await loadJS(`${window.location.origin}/libary/laydate/laydate.js`).catch((e) => {
15
- console.error('datePicker插件加载失败>>>', e);
16
- });
17
- if(!datePickerRegisterData) return;
18
- }
19
-
20
- const currentStore = commonStore[node.TID];
21
-
22
- if (!currentStore.pickerDataPool[node.id]) {
23
- // 未创建该元件
24
- node.elementId = s8();
25
-
26
- if(currentStore.mqttParams.dataConfig.picker){
27
- // 日期元件关联绑定的元件数据
28
- const pickerConfig = currentStore.mqttParams.dataConfig.picker;
29
- for (let [key, config] of pickerConfig.entries()){
30
- if(config.dateId === node.id) {
31
- node.formData.realIds = node.formData.realIds ? `${node.formData.realIds},${key}` : key;
32
- node.formData.selected = config.dateStr;
33
- }
34
- }
35
- }
36
-
37
- const format = node.pickerOptions.format;
38
- const valueType = node.formData.valueType;
39
- const dateType = node.pickerOptions.type;
40
- node.pickerOptions.value = node.formData.selected || datePickerValueFormatting({
41
- formatType: format,
42
- valueType
43
- }).dateStr;
44
- const datePicker = createDatePickerElement(node);
45
- currentStore.pickerDataPool[node.id] = {
46
- format,
47
- valueType,
48
- dateType,
49
- dom: {
50
- container: datePicker
51
- }
52
- };
53
-
54
- document.body.appendChild(datePicker);
55
- // 添加当前节点到div层
56
- node.addToDiv();
57
- setDataPickerElementStyle(node);
58
- if(window.location.pathname.includes('workspace') && currentStore.options.type === 'topology') return;
59
- const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
60
- if((pickerOptions.min || pickerOptions.max) && (pickerOptions.type !== 'year' || pickerOptions.type !== 'month')){
61
- // 字符转换
62
- if(pickerOptions.min && isValidInteger(pickerOptions.min)) pickerOptions.min = Number(pickerOptions.min);
63
- if(pickerOptions.max && isValidInteger(pickerOptions.max)) pickerOptions.max = Number(pickerOptions.max);
64
- }
65
- let layDatePicker = null;
66
- pickerOptions.elem = `#picker${node.id}`;
67
- pickerOptions.done = function (val, date) {
68
- const { year, month, hours, minutes, seconds } = date;
69
- const map = {
70
- yyyy: year,
71
- MM: String(month).padStart(2, '0'),
72
- dd: String(date.date).padStart(2, '0'),
73
- HH: String(hours).padStart(2, '0'),
74
- mm: String(minutes).padStart(2, '0'),
75
- ss: String(seconds).padStart(2, '0')
76
- };
77
- node.formData.selected = val;
78
- date.valueStr = val;
79
- date.value = datePickerType[layDatePicker.config.type].replace(/yyyy|MM|dd|HH|mm|ss/g, match => map[match]);
80
- Store.set(`${node.TID}-EVENT:change`, {node, date});
81
- }
82
- setTimeout(() => {
83
-
84
- layDatePicker = laydate.render(pickerOptions);
85
-
86
- }, 100)
87
- }else {
88
- if(node.formData.resetStyle) {
89
- // 重置样式
90
- setDataPickerElementStyle(node);
91
- node.formData.resetStyle = false;
92
- }
93
- if(node.formData.render) {
94
- // 重置数据
95
- node.formData.render = false;
96
- const params = {
97
- format: node.pickerOptions.format,
98
- valueType: node.formData.valueType,
99
- dateType: node.pickerOptions.type
100
- };
101
- Object.assign(currentStore.pickerDataPool[node.id], params);
102
- }
103
- }
104
- }
105
- function isValidInteger(str) {
106
- return /^-?\d+$/.test(str) && str !== '-' && !str.startsWith('+');
107
- }
@@ -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,111 +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
- // 下拉切换类型
19
- const selectedType = node.events && node.events.find((item) => {
20
- return !!item.dcimStaticForType
21
- });
22
- currentStore.selectDataPool[node.id] = {
23
- slideState: node.selectDropdown,
24
- staticType: selectedType,
25
- node: {
26
- id: node.id,
27
- color: node.font.color,
28
- fontSize: node.font.fontSize,
29
- selected: node.formData.selected || null
30
- },
31
- dom: {}
32
- };
33
- let bindBlockId = '';
34
- if(node.formData.bindBlockId) {
35
- // 去空格重新赋值
36
- bindBlockId = node.formData.bindBlockId.trim();
37
- node.formData.bindBlockId = bindBlockId;
38
- }
39
- if(node.formData.bindBlockTag) {
40
- // 去空格重新赋值
41
- node.formData.bindBlockTag = node.formData.bindBlockTag.trim();
42
- }
43
-
44
- let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
45
- if(selectRealData) {
46
- // 数据统计之 select与echarts互相关联
47
- if(node.formData.ids) {
48
- // 显示隐藏类型下的数据统计,下拉节点数据处理
49
- const optionIds = node.formData.ids.split(',');
50
- for (let i = 0; i < optionIds.length; i++) {
51
- if(selectRealData[i]) selectRealData[i].optionId = optionIds[i];
52
- }
53
- }
54
- const selectData = currentStore.selectDataPool[node.id];
55
- selectData.data = selectRealData;
56
- selectData.node.selected ? selectData.node.selected.id = selectRealData[0].id : selectData.node.selected = { id: selectRealData[0].id };
57
- const echartsData = currentStore.echartsDataPool[bindBlockId];
58
- echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
59
- bindId: node.id
60
- };
61
- // select与Tab关联,主要用于下拉切换时当前画面绑定了tab切换的情况
62
- const bindBlockTagData = currentStore.switchTabDataPool[`${node.formData.bindBlockTag}Data`];
63
- if(bindBlockTagData) currentStore.echartsDataPool[bindBlockId].tabCorrelationType = 'select';
64
- }else {
65
- if(node.formData.ids) {
66
- // 下拉显示隐藏
67
- const optionIds = node.formData.ids.split(',');
68
- const optionNames = node.formData.names.split(',');
69
- const optionsData = [];
70
- for (let i = 0; i < optionIds.length; i++) {
71
- optionsData.push({
72
- id: optionIds[i],
73
- name: optionNames[i]
74
- });
75
- }
76
- currentStore.selectDataPool[node.id].data = optionsData;
77
- }else {
78
- currentStore.selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
79
- }
80
- }
81
- const select = createSelectElement(node);
82
- currentStore.selectDataPool[node.id].dom.selectEle = select;
83
- document.body.appendChild(select);
84
- let selectDropdownEle = document.querySelector('.topology-select-dropdown');
85
- if(!selectDropdownEle) {
86
- selectDropdownEle = createSelectDropdown(node);
87
- const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
88
- parentEle.appendChild(selectDropdownEle);
89
- // 鼠标按下
90
- selectDropdownEle.addEventListener('mousedown', (e) => {
91
- setEventListener(e, node.TID);
92
- });
93
- }
94
- // 添加当前节点到div层
95
- node.addToDiv();
96
- }else {
97
- const selectNode = commonStore[node.TID].selectDataPool[node.id];
98
- if(selectNode.node.color === node.font.color && selectNode.node.fontSize === node.font.fontSize) return;
99
- const selectDom = selectNode.dom;
100
- if(!selectDom.selectInput) selectDom.selectInput = selectDom.selectEle.querySelector('.topology-select-input');
101
- selectDom.selectInput.style.color = node.font.color;
102
- selectDom.selectInput.style.fontSize = `${node.font.fontSize}px`;
103
- if(node.selectDropdown) {
104
- const liEle = selectDom.selectDropdownUl.querySelectorAll('.topology-select-dropdown-item');
105
- liEle.forEach(function(element) {
106
- element.style.color = node.font.color;
107
- element.style.fontSize = `${node.font.fontSize}px`;
108
- });
109
- }
110
- }
111
- }
@@ -1,2 +0,0 @@
1
- import { Node } from '../../models';
2
- export declare function iframePrimeval(ctx: CanvasRenderingContext2D, node: Node): void;