dcim-topology2d 2.0.8 → 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 (204) 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 +673 -332
  37. package/core/src/core.d.ts +4 -3
  38. package/core/src/core.js +367 -466
  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 -53
  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 -69
  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 -1
  69. package/core/src/preview.js +43 -111
  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 -11
  79. package/core/src/utils/conversion.js +0 -168
  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 -7
  151. package/chart-diagram/src/utils/changeOptions.js +0 -261
  152. package/chart-diagram/src/utils/conversion.d.ts +0 -19
  153. package/chart-diagram/src/utils/conversion.js +0 -432
  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 -170
  158. package/chart-diagram/src/utils/index.d.ts +0 -4
  159. package/chart-diagram/src/utils/index.js +0 -4
  160. package/chart-diagram/src/utils/render.d.ts +0 -8
  161. package/chart-diagram/src/utils/render.js +0 -228
  162. package/core/src/element/common.d.ts +0 -5
  163. package/core/src/element/common.js +0 -54
  164. package/core/src/element/iframe.d.ts +0 -3
  165. package/core/src/element/iframe.js +0 -12
  166. package/core/src/element/index.d.ts +0 -4
  167. package/core/src/element/index.js +0 -4
  168. package/core/src/element/select.d.ts +0 -11
  169. package/core/src/element/select.js +0 -263
  170. package/core/src/element/tab.d.ts +0 -1
  171. package/core/src/element/tab.js +0 -23
  172. package/core/src/middles/arrows/index.d.ts +0 -4
  173. package/core/src/middles/arrows/index.js +0 -5
  174. package/core/src/middles/lines/index.d.ts +0 -4
  175. package/core/src/middles/lines/index.js +0 -5
  176. package/core/src/middles/nodes/formoverflow.js +0 -61
  177. package/core/src/middles/nodes/formselect.d.ts +0 -2
  178. package/core/src/middles/nodes/formselect.js +0 -95
  179. package/core/src/middles/nodes/iframe.d.ts +0 -2
  180. package/core/src/middles/nodes/iframe.js +0 -29
  181. package/core/src/middles/nodes/index.d.ts +0 -48
  182. package/core/src/middles/nodes/index.js +0 -49
  183. package/core/src/store/common.d.ts +0 -9
  184. package/core/src/store/common.js +0 -5
  185. package/core/src/store/data.d.ts +0 -189
  186. package/core/src/store/data.js +0 -180
  187. package/core/src/store/index.d.ts +0 -2
  188. package/core/src/store/index.js +0 -2
  189. package/core/src/utils/assignment.d.ts +0 -6
  190. package/core/src/utils/assignment.js +0 -173
  191. package/core/src/utils/params.d.ts +0 -2
  192. package/core/src/utils/params.js +0 -60
  193. package/static/echartsDefaultData.js +0 -178
  194. package/static/element.js +0 -14
  195. package/static/form.js +0 -11
  196. package/static/index.js +0 -3
  197. package/store/actions.js +0 -1
  198. package/store/clear.js +0 -10
  199. package/store/index.js +0 -2
  200. package/style/common.css +0 -18
  201. package/style/editor.css +0 -13
  202. package/style/index.css +0 -4
  203. package/style/select.css +0 -143
  204. /package/myShape-diagram/{index.ts → myShape.ts} +0 -0
@@ -1,5 +1,3 @@
1
- import {Store} from "le5le-store";
2
-
3
1
  var __extends = (this && this.__extends) || (function () {
4
2
  var extendStatics = function (d, b) {
5
3
  extendStatics = Object.setPrototypeOf ||
@@ -16,18 +14,7 @@ var __extends = (this && this.__extends) || (function () {
16
14
  import {KeyType} from './options';
17
15
  import {Point} from './models';
18
16
  import { Common } from './common'
19
- import {
20
- downDataType,
21
- previewType,
22
- formatPadding,
23
- mousMoveFun,
24
- mousDownFun,
25
- omouseEventPrototDoWindowFn
26
- } from './utils';
27
- import {
28
- resetSelectInteractiveState,
29
- setSelectDropdownInteractiveState
30
- } from './element';
17
+ import {downDataType, formatPadding, mousMoveFun, mousDownFun, omouseEventPrototDoWindowFn} from './utils';
31
18
 
32
19
  var Preview = (function (_super) {
33
20
  __extends(Preview, _super);
@@ -36,14 +23,13 @@ var Preview = (function (_super) {
36
23
  _this.offscreen.getRoutineLayer(['AnimateLayer']);
37
24
  _this.scheduledAnimationFrame = false;
38
25
  _this.onMouseMove = function (e) {
39
- _this.store.data.dataResize = 0;
40
26
  // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
41
27
  if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
42
28
  // 防止异常情况导致mouseup事件没有触发
43
29
  _this.onmouseup(e);
44
30
  return;
45
31
  }
46
- if (_this.store.data.locked && _this.mouseDown) {
32
+ if (_this.data.locked && _this.mouseDown) {
47
33
  return;
48
34
  }
49
35
  _this.scheduledAnimationFrame = true;
@@ -59,13 +45,13 @@ var Preview = (function (_super) {
59
45
  hoverNode,
60
46
  moveType,
61
47
  eventNode
62
- } = mousMoveFun(_this.store.options.type, pos, _this.store.data.pens);
48
+ } = mousMoveFun(_this.options.type, pos, _this.data.pens);
63
49
  _this.moveIn.type = _this.moveInType.None;
64
50
  _this.scheduledAnimationFrame = false;
65
51
  _this.hideTip();
66
- _this.setAttributeForCanvasPoint('default');
52
+ _this.divLayer.canvas.style.cursor = 'default';
67
53
  if (hoverNode) {
68
- if(eventNode) _this.setAttributeForCanvasPoint('pointer');
54
+ if(eventNode) _this.divLayer.canvas.style.cursor = 'pointer';
69
55
  if(hoverNode.visible) _this.showTip(hoverNode, pos);
70
56
  _this.moveIn.type = moveType;
71
57
  }
@@ -82,15 +68,14 @@ var Preview = (function (_super) {
82
68
  var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
83
69
  _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
84
70
  if (e.altKey) {
85
- _this.setAttributeForCanvasPoint('pointer');
71
+ _this.divLayer.canvas.style.cursor = 'pointer';
86
72
  }
87
73
  if (_this.inputObj) {
88
74
  _this.setNodeText();
89
75
  }
90
- resetSelectInteractiveState(_this.moveIn.hoverNode);
91
- const {eventType, value, staticType} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
76
+ const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
92
77
  if (_this.moveIn.type == _this.moveInType.Nodes) {
93
- _this.setAttributeForCanvasPoint('pointer');
78
+ _this.divLayer.canvas.style.cursor = 'pointer';
94
79
  switch (eventType) {
95
80
  case downDataType.Window:
96
81
  omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
@@ -99,20 +84,16 @@ var Preview = (function (_super) {
99
84
  _this.dispatch('node', _this.moveIn.hoverNode);
100
85
  break;
101
86
  case downDataType.Showhide:
102
- _this.hidePenByTag(_this.store.data.pens, value);
87
+ _this.hidePenByTag(_this.data.pens, value);
103
88
  const obj = value ? JSON.parse(value) : {}
104
89
  const visibleRange = obj.visibleRange
105
90
  if (visibleRange == '1') {
106
91
  _this.openCount++
107
92
  }
108
- _this.render();
109
93
  break;
110
94
  case downDataType.Tabswitch:
111
95
  _this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
112
96
  break;
113
- case downDataType.Formselect:
114
- setSelectDropdownInteractiveState(_this.moveIn.hoverNode, staticType, previewType.Dcim);
115
- break;
116
97
  }
117
98
  }
118
99
  };
@@ -122,20 +103,16 @@ var Preview = (function (_super) {
122
103
  _this.mouseDown = null;
123
104
  _this.lastTranlated.x = 0;
124
105
  _this.lastTranlated.y = 0;
125
- if(_this.moveIn.eventNode) {
126
- _this.setAttributeForCanvasPoint('pointer');
127
- }else {
128
- _this.setAttributeForCanvasPoint('default');
129
- }
106
+ _this.divLayer.canvas.style.cursor = _this.moveIn.eventNode ? 'pointer' : 'default';
130
107
  };
131
108
  _this.divLayer.canvas.onmousemove = this.onMouseMove;
132
109
  _this.divLayer.canvas.onmousedown = this.onmousedown;
133
110
  _this.divLayer.canvas.onmouseup = this.onmouseup;
134
111
  _this.divLayer.canvas.onwheel = function (event) {
135
- if (_this.store.options.disableScale || _this.store.options.type === 'dialog') {
112
+ if (_this.options.disableScale) {
136
113
  return;
137
114
  }
138
- switch (_this.store.options.scaleKey) {
115
+ switch (_this.options.scaleKey) {
139
116
  case KeyType.None:
140
117
  break;
141
118
  case KeyType.Ctrl:
@@ -180,98 +157,56 @@ var Preview = (function (_super) {
180
157
  _this.divLayer.canvas.focus();
181
158
  return false;
182
159
  };
183
- window.onresize = function () {
184
- const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement;
185
- if(!isFullScreen && _this.isFullScreen){
186
- _this.moveIn.hoverNode.text = '全屏';
187
- _this.fitViewPreview(_this.isFullScreen);
188
- _this.isFullScreen = false;
189
- }else {
190
- // pageZoomOnly 表示topology页面只全局缩放,不对局部缩放进行调整,不执行render重绘。通常用于无任何操作事件的topology驾驶舱
191
- if(_this.store.options.type === 'topology' || _this.store.options.type === 'pageZoomOnly') return;
192
- const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
193
- const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
194
- _this.isResize = true;
195
- clearTimeout(_this.pageResizeTim);
196
- _this.pageResizeTim = setTimeout(() => {
197
- if(_this.isResize){
198
- const pageZoom = 1/zoom;
199
- _this.store.data.pageZoom = zoom;
200
- _this.store.parentElem.style.transform = `scale(${pageZoom})`;
201
- _this.store.parentElem.style.transformOrigin = '0 0';
202
- _this.store.parentElem.parentElement.style.overflow = 'hidden';
203
- _this.store.data.dataResize = 1;
204
- _this.isResize = false;
205
- Store.set('PAGE:zoom', zoom);
206
- _this.fitView();
207
- _this.render();
208
- }
209
- }, 1000);
210
- }
211
- };
212
160
  return _this;
213
- }
214
- Preview.prototype.setAttributeForCanvasPoint = function (type){
215
-
216
- this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
217
-
218
161
  };
219
162
  Preview.prototype.fitViewPreview = function (restore){
220
163
  this.fitView(null, restore);
221
164
  this.render();
222
165
  };
223
166
  // open - redraw by the data
224
- Preview.prototype.open = function (topoJSon, type) {
167
+ Preview.prototype.open = function (topoJSon) {
225
168
  this.conversionData(topoJSon);
226
- this.setBKImageRect();
169
+ this.parentElem.scrollLeft = 0;
170
+ this.parentElem.scrollTop = 0;
171
+ this.divLayer.clear();
227
172
  this.fitView();
228
173
  this.render(true);
229
174
  this.animate(true);
230
175
  };
231
- Preview.prototype.setBKImageRect = function () {
232
- if (this.store.data.bkImageRect) {
233
- this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
234
- this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
235
- this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
236
- this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
237
- this.store.data.bkImageRect.center = {
238
- x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
239
- y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
240
- }
241
- }
242
- };
243
176
  Preview.prototype.scale = function (scale, center, w, h) {
244
- if (this.store.data.scale * scale < this.store.options.minScale ||
245
- this.store.data.scale * scale > this.store.options.maxScale) {
177
+ if (this.data.scale * scale < this.options.minScale ||
178
+ this.data.scale * scale > this.options.maxScale) {
246
179
  return;
247
180
  }
248
- this.store.data.scale *= scale;
181
+ const scaleX = w ? w : scale;
182
+ const scaleY = h ? h : scale;
183
+ this.data.scale *= scale;
184
+ if(this.isFullScreen) {
185
+ this.ratioCord.ratio *= scale;
186
+ this.ratioCord.scaleX *= scaleX;
187
+ this.ratioCord.scaleY *= scaleY;
188
+ }else {
189
+ this.ratioCord.ratio = 1;
190
+ this.ratioCord.scaleX = 1;
191
+ this.ratioCord.scaleY = 1;
192
+ }
249
193
  !center && (center = this.getRect().center);
250
- for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
194
+ for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
251
195
  var item = _a[_i];
252
196
  item.scale(scale, center, w, h);
253
- // 驾驶舱底部区域元件,用于控制底部区域Dom宽高等元素自由变换,后期会删除
254
- if(item.tags && item.tags[0] && item.tags[0].includes('contromRoomBottom')) this.store.pens['contromRoomBottom'] = item;
255
197
  }
256
198
  };
257
199
  Preview.prototype.scaleTo = function (scale) {
258
- this.scale(scale / this.store.data.scale);
259
- this.store.data.scale = scale;
200
+ this.scale(scale / this.data.scale);
201
+ this.data.scale = scale;
260
202
  };
261
203
  // scale for origin canvas:
262
204
  Preview.prototype.fitView = function (viewPadding, restore) {
263
205
  if (!this.hasView())
264
206
  return;
265
207
  // 1. 重置画布尺寸为容器尺寸
266
- var parentElem = this.store.parentElem;
267
- var width = parentElem.offsetWidth,
268
- height = parentElem.offsetHeight;
269
- if(this.store.options.storeSubscribe) {
270
- width = this.store.options.width;
271
- height = this.store.options.height;
272
- }
273
- width *= this.store.data.pageZoom;
274
- height *= this.store.data.pageZoom;
208
+ var parentElem = this.canvas.parentElem;
209
+ var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
275
210
  this.canvasResize({
276
211
  width: width,
277
212
  height: height,
@@ -279,34 +214,31 @@ var Preview = (function (_super) {
279
214
  // 2. 图形居中
280
215
  this.centerView(viewPadding);
281
216
  // 3. 获取设置的留白值
282
- var padding = formatPadding(viewPadding || this.store.options.viewPadding);
217
+ var padding = formatPadding(viewPadding || this.options.viewPadding);
283
218
  // 4. 获取图形尺寸
284
219
  var rect = this.getRect();
285
- if(!rect.width) {
286
- const bkImageRect = this.store.data.bkImageRect;
287
- rect.width = bkImageRect && bkImageRect.width ? bkImageRect.width : width;
288
- rect.height = bkImageRect && bkImageRect.height ? bkImageRect.height : height;
289
- }
290
220
  // 6. 计算缩放比
291
- var w = (width - padding[1] - padding[3]) / rect.width ;
221
+ var w = (width - padding[1] - padding[3]) / rect.width;
292
222
  var h = (height - padding[0] - padding[2]) / rect.height;
293
223
  var ratio = w;
294
224
  if (w > h) {
295
225
  ratio = h;
296
226
  }
297
- // 保持缩放后的还原度
298
- if(typeof restore === 'boolean' && restore) ratio = w;
227
+ if(typeof restore === 'boolean' && restore) {
228
+ ratio = 1 / this.ratioCord.ratio;
229
+ w = 1 / this.ratioCord.scaleX;
230
+ h = 1 / this.ratioCord.scaleY;
231
+ }
299
232
  this.scale(ratio, undefined, w, h);
300
233
  this.canvas.scale(ratio, undefined, w, h);
301
234
  // 7. X抽滚动条隐藏
302
- this.store.parentElem.style.overflow = 'hidden auto';
235
+ this.parentElem.style.overflow = 'hidden auto';
303
236
  };
304
237
  Preview.prototype.destroy = function () {
305
238
  this.destroyStatic();
306
239
  this.onMouseMove = null;
307
240
  this.onmousedown = null;
308
241
  this.onmouseup = null;
309
- window.onresize = null;
310
242
  };
311
243
  return Preview;
312
244
  }(Common));
@@ -2,29 +2,27 @@ import { Options } from './options';
2
2
  import { Canvas } from './canvas';
3
3
  import {Point} from './models';
4
4
  export declare class RenderLayer extends Canvas {
5
+ parentElem: HTMLElement;
6
+ options: Options;
5
7
  offscreen: any;
6
8
  bkImg: HTMLImageElement;
7
9
  bkImgRect: {
8
- center: {
9
- x: number;
10
- y: number;
11
- },
12
10
  x: number;
13
11
  y: number;
14
12
  width: number;
15
13
  height: number;
16
14
  };
17
15
  bgRect: {
18
- // center: {
19
- // x: number;
20
- // y: number;
21
- // },
16
+ center: {
17
+ x: number;
18
+ y: number;
19
+ },
22
20
  x: number;
23
21
  y: number;
24
- // width: number;
25
- // height: number;
22
+ width: number;
23
+ height: number;
26
24
  };
27
- constructor(TID: String);
25
+ constructor(parentElem: HTMLElement, options: Options, TID: String);
28
26
  loadBkImg(cb?: any): void;
29
27
  clearBkImg(): void;
30
28
  render: () => void;
@@ -13,23 +13,22 @@ var __extends = (this && this.__extends) || (function () {
13
13
  })();
14
14
  import { Store } from 'le5le-store';
15
15
  import { Canvas } from './canvas';
16
- import { commonStore } from './store'
16
+ import {previewType} from './utils/construction'
17
17
  //let isQttFillStyle = false;
18
18
  var RenderLayer = /** @class */ (function (_super) {
19
19
  __extends(RenderLayer, _super);
20
- function RenderLayer(TID) {
20
+ function RenderLayer(parentElem, options, TID) {
21
21
  //isQttFillStyle = false;
22
- var _this = _super.call(this, TID) || this;
22
+ if (options === void 0) { options = {}; }
23
+ var _this = _super.call(this, parentElem, options, TID) || this;
24
+ _this.parentElem = parentElem;
25
+ _this.options = options;
23
26
  _this.bkImgRect = null;
24
27
  _this.initImage = false;
25
28
  _this.coverType = 'container';
26
29
  _this.bgRect = null;
27
- _this.scaleX = 1;
28
- _this.scaleY = 1;
29
- _this.ratio = 1;
30
30
  _this.render = function () {
31
- if(!commonStore || !commonStore[TID]) return;
32
- if (commonStore[TID].data.bkImage && !_this.initImage) {
31
+ if (_this.data.bkImage && !_this.initImage) {
33
32
  _this.loadBkImg(_this.render, 'pixi');
34
33
  return;
35
34
  }
@@ -38,8 +37,12 @@ var RenderLayer = /** @class */ (function (_super) {
38
37
  }
39
38
  var ctx = _this.canvas.getContext('2d');
40
39
  ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
41
- if (commonStore[TID].data.bkColor) {
42
- ctx.fillStyle = commonStore[TID].data.bkColor;
40
+ // if (_this.data.pens && _this.data.pens.length > 0 && !isQttFillStyle) {
41
+ // _this.data.pens.map((penItem) => {penItem.defaultFillStyle = penItem.fillStyle;})
42
+ // isQttFillStyle = true;
43
+ // }
44
+ if (_this.data.bkColor) {
45
+ ctx.fillStyle = _this.data.bkColor;
43
46
  ctx.fillRect(0, 0, _this.width, _this.height);
44
47
  }
45
48
  if (_this.bkImg && _this.bkImgRect) {
@@ -49,52 +52,53 @@ var RenderLayer = /** @class */ (function (_super) {
49
52
  ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height);
50
53
  };
51
54
  _this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'));
52
- commonStore[TID].parentElem.appendChild(_this.canvas);
55
+ _this.parentElem.appendChild(_this.canvas);
53
56
  return _this;
54
57
  }
55
58
  RenderLayer.prototype.scale = function (scale, center, w, h){
56
- if(!this.bkImgRect) {
57
- this.scaleX = w ? w : scale;
58
- this.scaleY = h ? h : scale;
59
- this.ratio = scale;
60
- return;
61
- }
59
+ if(!this.data.bkImage) return;
62
60
  if(!center) {
63
- center = this.bkImgRect.center;
61
+ center = this.data.bkImageRect ? this.data.bkImageRect.center : this.bgRect.center;
64
62
  }
65
63
  if (!w) {
66
64
  w = scale;
67
- this.bkImgRect.x = center.x - (center.x - this.bkImgRect.x) * scale;
68
- }else {
69
- this.bkImgRect.x = this.bgRect.x;
65
+ if(this.data.bkImageRect) {
66
+ this.data.bkImageRect.x = center.x - (center.x - this.data.bkImageRect.x) * w;
67
+ }else {
68
+ this.bgRect.x = center.x - (center.x - this.bgRect.x) * w;
69
+ }
70
70
  }
71
71
  if (!h) {
72
72
  h = scale;
73
- this.bkImgRect.y = center.y - (center.y - this.bkImgRect.y) * scale;
73
+ if(this.data.bkImageRect){
74
+ this.data.bkImageRect.y = center.y - (center.y - this.data.bkImageRect.y) * h;
75
+ }else {
76
+ this.bgRect.y = center.y - (center.y - this.bgRect.y) * h;
77
+ }
78
+ }
79
+ if(this.data.bkImageRect) {
80
+ this.data.bkImageRect.width *= w;
81
+ this.data.bkImageRect.height *= h;
82
+ this.bkImgRect = this.data.bkImageRect;
74
83
  }else {
75
- this.bkImgRect.y = this.bgRect.y;
84
+ if(this.initImage) {
85
+ this.bgRect.width *= w;
86
+ this.bgRect.height *= h;
87
+ }
88
+ this.bkImgRect = this.bgRect;
76
89
  }
77
- this.bkImgRect.width *= w;
78
- this.bkImgRect.height *= h;
79
- this.calcCenter();
80
- };
81
- RenderLayer.prototype.calcCenter = function () {
82
- this.bkImgRect.center.x = this.bkImgRect.x + this.bkImgRect.width / 2;
83
- this.bkImgRect.center.y = this.bkImgRect.y + this.bkImgRect.height / 2;
84
90
  };
85
91
  RenderLayer.prototype.loadBkImg = function (cb, pixi) {
86
92
  var _this = this;
87
- const bkImage = commonStore[_this.TID].data.bkImage;
88
- if (!bkImage || this.initImage) {
93
+ if (!this.data.bkImage || this.initImage) {
89
94
  return;
90
95
  }
91
96
  this.bkImg = new Image();
92
97
  this.bkImg.crossOrigin = 'anonymous';
93
- this.bkImg.src = bkImage;
98
+ this.bkImg.src = this.data.bkImage;
94
99
  this.bkImg.onload = function () {
95
100
  if(pixi && !_this.bkImgRect) {
96
- _this.bkImgRectResize({width: _this.width, height: _this.height});
97
- _this.scale(_this.ratio, undefined, _this.scaleX, _this.scaleY);
101
+ _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
98
102
  }else {
99
103
  //_this.bkImgRect = _this.coverRect(_this.canvas.width, _this.canvas.height, _this.bkImg.width, _this.bkImg.height);
100
104
  }
@@ -102,6 +106,10 @@ var RenderLayer = /** @class */ (function (_super) {
102
106
  cb();
103
107
  }
104
108
  _this.initImage = true;
109
+ _this.bgRect.center.x = _this.width / 2;
110
+ _this.bgRect.center.y = _this.height / 2;
111
+ _this.bgRect.width = _this.width;
112
+ _this.bgRect.height = _this.height;
105
113
  };
106
114
  };
107
115
  RenderLayer.prototype.clearBkImg = function () {
@@ -109,8 +117,14 @@ var RenderLayer = /** @class */ (function (_super) {
109
117
  this.bkImg = null;
110
118
  this.initImage = false;
111
119
  this.bgRect = {
120
+ center: {
121
+ x: this.width / 2,
122
+ y: this.height / 2
123
+ },
112
124
  x: 0,
113
- y: 0
125
+ y: 0,
126
+ width: this.width,
127
+ height: this.height
114
128
  }
115
129
  };
116
130
  RenderLayer.prototype.coverRect = function (canvasWidth, canvasHeight, imgWidth, imgHeight) {
@@ -135,50 +149,37 @@ var RenderLayer = /** @class */ (function (_super) {
135
149
  };
136
150
 
137
151
  RenderLayer.prototype.bkImgRectResize = function (size) {
138
- const bkImageRect = commonStore[this.TID].data.bkImageRect;
152
+ const bkImageRect = this.data.bkImageRect;
139
153
  if(!size) return;
140
- const { width, height } = size;
141
154
  if(bkImageRect) {
142
155
  let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
143
156
  let y = bkImageRect.y ? Number(bkImageRect.y) : 0;
157
+ const { width, height } = size;
144
158
  let bkWidth = bkImageRect.width ? Number(bkImageRect.width) : width;
145
159
  let bkHeight = bkImageRect.height ? Number(bkImageRect.height) : height;
146
160
  this.bkImgRect = {
147
- center: {
148
- x: x + bkWidth / 2,
149
- y: y + bkHeight / 2
150
- },
151
- x,
152
- y,
153
- width: bkWidth,
154
- height: bkHeight
155
- };
156
- this.bgRect = {
157
- x,
158
- y
161
+ x: x,
162
+ y: y,
163
+ width: bkImageRect.width ? bkImageRect.width : width,
164
+ height: bkImageRect.height ? bkImageRect.height : height
159
165
  };
160
166
  }else {
161
- this.bkImgRect = {
162
- center: {
163
- x: width / 2,
164
- y: height / 2
165
- },
166
- x: 0,
167
- y: 0,
168
- width,
169
- height
170
- };
167
+ this.bkImgRect = this.bgRect;
171
168
  }
172
169
  };
173
170
 
174
171
  RenderLayer.prototype.destroy = function() {
175
172
 
173
+ this.data = null;
174
+
176
175
  this.canvas = null;
177
176
 
178
177
  this.render = null;
179
178
 
180
179
  this.offscreen = null;
181
180
 
181
+ this.options = null;
182
+
182
183
  }
183
184
  return RenderLayer;
184
185
  }(Canvas));
@@ -0,0 +1,10 @@
1
+ import { TopologyData } from './models';
2
+ export declare class Socket {
3
+ url: string;
4
+ data: TopologyData;
5
+ socket: WebSocket;
6
+ constructor(url: string, data: TopologyData);
7
+ init(): void;
8
+ onmessage: (e: MessageEvent) => void;
9
+ close(): void;
10
+ }
@@ -0,0 +1,51 @@
1
+ import { EventType } from './models';
2
+ var Socket = /** @class */ (function () {
3
+ function Socket(url, data) {
4
+ var _this = this;
5
+ this.url = url;
6
+ this.data = data;
7
+ this.onmessage = function (e) {
8
+ if (!_this.data.pens.length || !e || !e.data) {
9
+ return;
10
+ }
11
+ var msg;
12
+ try {
13
+ msg = JSON.parse(e.data);
14
+ }
15
+ catch (error) {
16
+ msg = e.data;
17
+ }
18
+ for (var _i = 0, _a = _this.data.pens; _i < _a.length; _i++) {
19
+ var item = _a[_i];
20
+ for (var _b = 0, _c = item.events; _b < _c.length; _b++) {
21
+ var event_1 = _c[_b];
22
+ if (event_1.type === EventType.WebSocket) {
23
+ if (event_1.name && event_1.name === msg.event) {
24
+ item.doSocketMqtt(event_1, msg.data, _this.socket);
25
+ }
26
+ else if (!event_1.name && msg) {
27
+ item.doSocketMqtt(event_1, msg, _this.socket);
28
+ }
29
+ }
30
+ }
31
+ }
32
+ };
33
+ this.init();
34
+ }
35
+ Socket.prototype.init = function () {
36
+ var _this = this;
37
+ this.socket = new WebSocket(this.url);
38
+ this.socket.onmessage = this.onmessage;
39
+ this.socket.onclose = function () {
40
+ console.log('Canvas websocket closed and reconneting...');
41
+ _this.init();
42
+ };
43
+ };
44
+ Socket.prototype.close = function () {
45
+ this.socket.onclose = null;
46
+ this.socket.close();
47
+ };
48
+ return Socket;
49
+ }());
50
+ export { Socket };
51
+ //# sourceMappingURL=socket.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"socket.js","sourceRoot":"","sources":["../../../packages/core/src/socket.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,MAAM,UAAU,CAAC;AAEnD;IAEE,gBAAmB,GAAW,EAAS,IAAkB;QAAzD,iBAEC;QAFkB,QAAG,GAAH,GAAG,CAAQ;QAAS,SAAI,GAAJ,IAAI,CAAc;QAczD,cAAS,GAAG,UAAC,CAAe;YAC1B,IAAI,CAAC,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;gBAC3C,OAAO;aACR;YAED,IAAI,GAAkC,CAAC;YACvC,IAAI;gBACF,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;aAC1B;YAAC,OAAO,KAAK,EAAE;gBACd,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC;aACd;YAED,KAAmB,UAAc,EAAd,KAAA,KAAI,CAAC,IAAI,CAAC,IAAI,EAAd,cAAc,EAAd,IAAc,EAAE;gBAA9B,IAAM,IAAI,SAAA;gBACb,KAAoB,UAAW,EAAX,KAAA,IAAI,CAAC,MAAM,EAAX,cAAW,EAAX,IAAW,EAAE;oBAA5B,IAAM,OAAK,SAAA;oBACd,IAAI,OAAK,CAAC,IAAI,KAAK,SAAS,CAAC,SAAS,EAAE;wBACtC,IAAI,OAAK,CAAC,IAAI,IAAI,OAAK,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,EAAE;4BAC1C,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,GAAG,CAAC,IAAI,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBACjD;6BAAM,IAAI,CAAC,OAAK,CAAC,IAAI,IAAI,GAAG,EAAE;4BAC7B,IAAI,CAAC,YAAY,CAAC,OAAK,EAAE,GAAG,EAAE,KAAI,CAAC,MAAM,CAAC,CAAC;yBAC5C;qBACF;iBACF;aACF;QACH,CAAC,CAAC;QApCA,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,qBAAI,GAAJ;QAAA,iBAQC;QAPC,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAEvC,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG;YACpB,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;YAC1D,KAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;IACJ,CAAC;IA2BD,sBAAK,GAAL;QACE,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IACH,aAAC;AAAD,CAAC,AA7CD,IA6CC"}
@@ -1,4 +1,4 @@
1
- import { Point } from '../models';
1
+ import { Point } from '../models/point';
2
2
  export function flatNodes(nodes) {
3
3
  var result = {
4
4
  nodes: [],
@@ -1,6 +1,4 @@
1
1
  // @ts-ignore
2
- export declare const echartsStaticType: Array<string> = [];
3
- // @ts-ignore
4
2
  export declare const winEventActionFns: Array<string> = [];
5
3
  export interface MoveDataType {
6
4
  None?: string | number;
@@ -14,18 +12,20 @@ export interface MoveDataType {
14
12
  HoverAnchors?: string | number;
15
13
  Rotate?: string | number;
16
14
  }
15
+ export const moveDataType: MoveDataType;
17
16
  export interface DownDataType {
18
17
  Window?: string | number;
19
18
  Target?: string | number;
20
19
  Showhide?: string | number;
21
20
  Tabswitch?: string | number;
22
- Formselect?: string | number;
23
21
  }
22
+ export const downDataType: DownDataType;
24
23
  export interface PreviewType {
25
24
  Dcim?: string;
26
25
  Topology?: string;
27
26
  Logo?: string;
28
27
  }
28
+ export const previewType: PreviewType;
29
29
  export interface AnimateType {
30
30
  LeftFlow?: string;
31
31
  RightFlow?: string;
@@ -38,13 +38,4 @@ export interface AnimateType {
38
38
  Show?: string;
39
39
  Rotate?: string;
40
40
  }
41
- export interface SelectStaticType {
42
- static?:number;
43
- dataShow?:number;
44
- visible?:number;
45
- }
46
- export const moveDataType: MoveDataType;
47
- export const downDataType: DownDataType;
48
- export const previewType: PreviewType;
49
41
  export const animateType: AnimateType;
50
- export const selectStaticType: SelectStaticType;