dcim-topology2d 1.0.3 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/chart-diagram/src/echarts/index.js +3 -6
  2. package/core/index.d.ts +1 -0
  3. package/core/index.js +1 -0
  4. package/core/src/activeLayer.d.ts +2 -10
  5. package/core/src/activeLayer.js +42 -41
  6. package/core/src/animateLayer.d.ts +3 -7
  7. package/core/src/animateLayer.js +10 -12
  8. package/core/src/calling.d.ts +1 -4
  9. package/core/src/calling.js +38 -41
  10. package/core/src/canvas.d.ts +1 -6
  11. package/core/src/canvas.js +17 -18
  12. package/core/src/common.d.ts +5 -5
  13. package/core/src/common.js +146 -109
  14. package/core/src/core.d.ts +3 -4
  15. package/core/src/core.js +222 -251
  16. package/core/src/divLayer.d.ts +2 -7
  17. package/core/src/divLayer.js +25 -25
  18. package/core/src/healps/changeData.js +20 -3
  19. package/core/src/hoverLayer.d.ts +2 -9
  20. package/core/src/hoverLayer.js +31 -34
  21. package/core/src/models/index.d.ts +0 -1
  22. package/core/src/models/index.js +0 -1
  23. package/core/src/offscreen.d.ts +1 -4
  24. package/core/src/offscreen.js +10 -8
  25. package/core/src/options.js +1 -0
  26. package/core/src/preview.d.ts +1 -13
  27. package/core/src/preview.js +26 -27
  28. package/core/src/renderLayer.d.ts +1 -3
  29. package/core/src/renderLayer.js +26 -31
  30. package/core/src/store/common.d.ts +9 -0
  31. package/core/src/store/common.js +5 -0
  32. package/core/src/store/data.d.ts +126 -0
  33. package/core/src/store/data.js +80 -0
  34. package/core/src/store/index.d.ts +2 -0
  35. package/core/src/store/index.js +2 -0
  36. package/core/src/utils/conversion.d.ts +7 -0
  37. package/core/src/utils/conversion.js +54 -0
  38. package/core/src/utils/dom.d.ts +4 -3
  39. package/package.json +1 -1
  40. package/core/src/models/data.d.ts +0 -26
  41. package/core/src/models/data.js +0 -77
  42. package/core/src/models/data.js.map +0 -1
  43. package/core/src/mqtt.d.ts +0 -14
  44. package/core/src/mqtt.js +0 -82
  45. package/core/src/mqtt.js.map +0 -1
  46. package/core/src/socket.d.ts +0 -10
  47. package/core/src/socket.js +0 -51
  48. package/core/src/socket.js.map +0 -1
@@ -1,11 +1,6 @@
1
- import { Options } from './options';
2
- import { Node } from './models/node';
3
- import { TopologyData } from './models/data';
1
+ import { Node } from './models';
4
2
  import { Layer } from './layer';
5
3
  export declare class DivLayer extends Layer {
6
- parentElem: HTMLElement;
7
- options: Options;
8
- protected data: TopologyData;
9
4
  canvas: HTMLDivElement;
10
5
  player: HTMLDivElement;
11
6
  curNode: Node;
@@ -40,7 +35,7 @@ export declare class DivLayer extends Layer {
40
35
  };
41
36
  private subcribe;
42
37
  private subcribeNode;
43
- constructor(parentElem: HTMLElement, options: Options, TID: String);
38
+ constructor(TID: String);
44
39
  addDiv: (node: Node) => void;
45
40
  createPlayer(): void;
46
41
  getMediaCurrent(): void;
@@ -25,16 +25,12 @@ import {Lock} from './models/status';
25
25
  import {PenType} from './models/pen';
26
26
  import {Layer} from './layer';
27
27
  import { setStyleForElementIdDiv, DomElements } from './utils'
28
+ import { commonStore } from './store'
28
29
  var DivLayer = /** @class */ (function (_super) {
29
30
  __extends(DivLayer, _super);
30
31
 
31
- function DivLayer(parentElem, options, TID) {
32
- if (options === void 0) {
33
- options = {};
34
- }
32
+ function DivLayer(TID) {
35
33
  var _this = _super.call(this, TID) || this;
36
- _this.parentElem = parentElem;
37
- _this.options = options;
38
34
  _this.canvas = document.createElement('div');
39
35
  // _this.player = document.createElement('div');
40
36
  // _this.videos = {};
@@ -95,7 +91,6 @@ var DivLayer = /** @class */ (function (_super) {
95
91
  }
96
92
  }
97
93
  };
98
- _this.data = Store.get(_this.generateStoreKey('topology-data'));
99
94
  // if (!_this.options.playIcon) {
100
95
  // _this.options.playIcon = 'iconfont icon-play';
101
96
  // }
@@ -114,7 +109,7 @@ var DivLayer = /** @class */ (function (_super) {
114
109
  _this.canvas.style.outline = 'none';
115
110
  _this.canvas.style.background = 'transparent';
116
111
  _this.canvas.setAttribute('class', 'canvas-point');
117
- parentElem.appendChild(_this.canvas);
112
+ commonStore[TID].parentElem.appendChild(_this.canvas);
118
113
  // parentElem.appendChild(_this.player);
119
114
  //_this.createPlayer();
120
115
  _this.subcribe = Store.subscribe(_this.generateStoreKey('LT:addDiv'), _this.addDiv);
@@ -164,6 +159,7 @@ var DivLayer = /** @class */ (function (_super) {
164
159
 
165
160
  DivLayer.prototype.createPlayer = function () {
166
161
  var _this = this;
162
+ let options = commonStore[_this.TID].options;
167
163
  this.player.style.position = 'fixed';
168
164
  this.player.style.outline = 'none';
169
165
  this.player.style.top = '-99999px';
@@ -181,7 +177,7 @@ var DivLayer = /** @class */ (function (_super) {
181
177
  this.progressCurrent = document.createElement('div');
182
178
  this.loop = document.createElement('i');
183
179
  var fullScreen = document.createElement('i');
184
- this.playBtn.className = this.options.playIcon;
180
+ this.playBtn.className = options.playIcon;
185
181
  this.playBtn.style.fontSize = '18px';
186
182
  this.playBtn.style.lineHeight = '20px';
187
183
  this.playBtn.style.cursor = 'pointer';
@@ -204,11 +200,11 @@ var DivLayer = /** @class */ (function (_super) {
204
200
  this.loop.style.margin = '0 10px';
205
201
  this.loop.style.padding = '2px 5px';
206
202
  this.loop.style.borderRadius = '2px';
207
- this.loop.className = this.options.loopIcon;
203
+ this.loop.className = options.loopIcon;
208
204
  this.loop.style.fontSize = '18px';
209
205
  this.loop.style.lineHeight = '20px';
210
206
  this.loop.style.cursor = 'pointer';
211
- fullScreen.className = this.options.fullScreenIcon;
207
+ fullScreen.className = options.fullScreenIcon;
212
208
  fullScreen.style.fontSize = '17px';
213
209
  fullScreen.style.lineHeight = '20px';
214
210
  fullScreen.style.cursor = 'pointer';
@@ -221,10 +217,10 @@ var DivLayer = /** @class */ (function (_super) {
221
217
  this.playBtn.onclick = function () {
222
218
  if (_this.media.paused) {
223
219
  _this.media.play();
224
- _this.playBtn.className = _this.options.pauseIcon;
220
+ _this.playBtn.className = options.pauseIcon;
225
221
  } else {
226
222
  _this.media.pause();
227
- _this.playBtn.className = _this.options.playIcon;
223
+ _this.playBtn.className = options.playIcon;
228
224
  }
229
225
  };
230
226
  this.progress.onclick = function (e) {
@@ -242,6 +238,7 @@ var DivLayer = /** @class */ (function (_super) {
242
238
  fullScreen.onclick = function () {
243
239
  _this.media.requestFullscreen();
244
240
  };
241
+ options = null;
245
242
  };
246
243
  DivLayer.prototype.getMediaCurrent = function () {
247
244
  if (!this.media) {
@@ -294,7 +291,7 @@ var DivLayer = /** @class */ (function (_super) {
294
291
  media.onended = function () {
295
292
  Store.set(_this.generateStoreKey('mediaEnd'), node);
296
293
  if (_this.media === media) {
297
- _this.playBtn.className = _this.options.playIcon;
294
+ _this.playBtn.className = commonStore[_this.TID].options.playIcon;
298
295
  }
299
296
  _this.playNext(node.nextPlay);
300
297
  };
@@ -316,7 +313,7 @@ var DivLayer = /** @class */ (function (_super) {
316
313
  if (!next) {
317
314
  return;
318
315
  }
319
- for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
316
+ for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
320
317
  var item = _a[_i];
321
318
  if (!(item instanceof Node)) {
322
319
  continue;
@@ -345,7 +342,7 @@ var DivLayer = /** @class */ (function (_super) {
345
342
  return node.img;
346
343
  };
347
344
  DivLayer.prototype.setElemPosition = function (node, elem) {
348
- setStyleForElementIdDiv(node, elem, this.data);
345
+ setStyleForElementIdDiv(node, elem, commonStore[this.TID].data);
349
346
  };
350
347
  DivLayer.prototype.removeDiv = function (item) {
351
348
  if (this.curNode && item.id === this.curNode.id) {
@@ -416,25 +413,30 @@ var DivLayer = /** @class */ (function (_super) {
416
413
  return txt;
417
414
  };
418
415
  DivLayer.prototype.resize = function (size) {
416
+ let store = commonStore[this.TID];
417
+ if(!store || !store.options) return;
419
418
  if (size) {
420
419
  this.canvas.style.width = size.width + 'px';
421
420
  this.canvas.style.height = size.height + 'px';
422
421
  } else {
423
- if (this.options.width && this.options.width !== 'auto') {
424
- this.canvas.style.width = this.options.width + 'px';
422
+ if (store.options.width && store.options.width !== 'auto') {
423
+ this.canvas.style.width = store.options.width + 'px';
425
424
  } else {
426
- this.canvas.style.width = this.parentElem.clientWidth + 'px';
425
+ this.canvas.style.width = store.parentElem.clientWidth + 'px';
427
426
  }
428
- if (this.options.height && this.options.height !== 'auto') {
429
- this.canvas.style.height = this.options.height + 'px';
427
+ if (store.options.height && store.options.height !== 'auto') {
428
+ this.canvas.style.height = store.options.height + 'px';
430
429
  } else {
431
- this.canvas.style.height = this.parentElem.clientHeight - 8 + 'px';
430
+ this.canvas.style.height = store.parentElem.clientHeight - 8 + 'px';
432
431
  }
433
432
  }
433
+ store = null;
434
434
  };
435
435
  DivLayer.prototype.render = function () {
436
- for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
436
+ if(commonStore[this.TID] || !commonStore[this.TID].data) return;
437
+ for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
437
438
  var item = _a[_i];
439
+ if(!(item instanceof Node)) item = new Node(item);
438
440
  if (!item.getTID()) {
439
441
  item.setTID(this.TID);
440
442
  }
@@ -457,8 +459,6 @@ var DivLayer = /** @class */ (function (_super) {
457
459
  this.canvas.ondragover = null;
458
460
  this.canvas.ondrop = null;
459
461
  this.canvas.onwheel = null;
460
-
461
- this.data = null;
462
462
  //end
463
463
  };
464
464
 
@@ -137,7 +137,23 @@ export function setStatisticalData(pen, echartData) {
137
137
  }
138
138
  }
139
139
  }
140
- if (displayMode === 5 && chartData){ // 饼图
140
+ if(displayMode === 4 && chartData) { // 电量图
141
+ const staticForType = node.data.params.staticForType ? node.data.params.staticForType : '';//统计类型:日,周,月,年
142
+ const chartOptions = staticForType ? chartData[`${staticForType}_Data`] : chartData;
143
+ node.data.echarts.option.yAxis[0].data = chartOptions.XData;
144
+ node.data.echarts.option.yAxis[1].data = chartOptions.seriesData;
145
+ node.data.echarts.option.series[0].data = chartOptions.seriesData;
146
+ if(!chartOptions.seriesData.length) {
147
+ node.data.echarts.option.series[1].data = [];
148
+ }else {
149
+ let barData = [];
150
+ for (let sd = 0; sd < chartOptions.seriesData.length; sd++) {
151
+ barData.push(100);
152
+ }
153
+ node.data.echarts.option.series[1].data = barData;
154
+ }
155
+ }
156
+ if (displayMode === 5 && chartData && Array.isArray(chartData)){ // 饼图
141
157
  const colors = node.data.echarts.option.color;
142
158
  const seriesData = [];
143
159
  chartData.map((chd, index) => {
@@ -150,8 +166,9 @@ export function setStatisticalData(pen, echartData) {
150
166
  node.data.echarts.option.series[0].data = seriesData;
151
167
  }
152
168
  if(displayMode === 6 && chartData){ // 仪表盘
153
- node.appearance.title.text = chartData.name;
154
- node.data.echarts.option.title.text = chartData.name;
169
+ // 仪表盘分两种,分别有不同的取值方式,下面两行先注释掉
170
+ // node.appearance.title.text = chartData.name;
171
+ // node.data.echarts.option.title.text = chartData.name;
155
172
  node.data.echarts.option.series[0].data[0].value = chartData.value;
156
173
  }
157
174
  return node.data.echarts;
@@ -1,13 +1,6 @@
1
- import { TopologyData } from './models/data';
2
- import { Rect } from './models/rect';
3
- import { Point } from './models/point';
4
- import { Line } from './models/line';
5
- import { Node } from './models/node';
6
- import { Options } from './options';
1
+ import { Rect, Point, Line, Node } from './models';
7
2
  import { Layer } from './layer';
8
3
  export declare class HoverLayer extends Layer {
9
- options: Options;
10
- protected data: TopologyData;
11
4
  line: Line;
12
5
  initLine: Line;
13
6
  node: Node;
@@ -19,7 +12,7 @@ export declare class HoverLayer extends Layer {
19
12
  dockLineY: number;
20
13
  root: Node;
21
14
  dragRect: Rect;
22
- constructor(options: Options, TID: String);
15
+ constructor(TID: String);
23
16
  lineTo(to: Point, toArrow?: string): void;
24
17
  lineFrom(from: Point): void;
25
18
  lineMove(pt: Point, initPos: {
@@ -1,8 +1,8 @@
1
1
  var __extends = (this && this.__extends) || (function () {
2
2
  var extendStatics = function (d, b) {
3
3
  extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
4
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
6
  return extendStatics(d, b);
7
7
  };
8
8
  return function (d, b) {
@@ -11,22 +11,17 @@ var __extends = (this && this.__extends) || (function () {
11
11
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
12
  };
13
13
  })();
14
- import { Point } from './models/point';
15
- import { Node } from './models/node';
16
- import { PenType } from './models/pen';
14
+ import { Point, Node, PenType, Lock } from './models';
17
15
  import { Store } from 'le5le-store';
18
- import { Lock } from './models/status';
19
16
  import { Layer } from './layer';
17
+ import { commonStore } from './store'
20
18
  var HoverLayer = /** @class */ (function (_super) {
21
19
  __extends(HoverLayer, _super);
22
- function HoverLayer(options, TID) {
23
- if (options === void 0) { options = {}; }
20
+ function HoverLayer(TID) {
24
21
  var _this = _super.call(this, TID) || this;
25
- _this.options = options;
26
22
  _this.hoverAnchorIndex = -1;
27
23
  _this.dockLineX = 0;
28
24
  _this.dockLineY = 0;
29
- _this.data = Store.get(_this.generateStoreKey('topology-data'));
30
25
  Store.set(_this.generateStoreKey('LT:HoverLayer'), _this);
31
26
  return _this;
32
27
  }
@@ -70,14 +65,16 @@ var HoverLayer = /** @class */ (function (_super) {
70
65
  };
71
66
  HoverLayer.prototype.render = function (ctx) {
72
67
  var _this = this;
73
- if (this.data.locked === Lock.NoEvent) {
68
+ if(!commonStore || !commonStore[_this.TID]) return;
69
+ var globalStore = commonStore[_this.TID];
70
+ if (globalStore.data.locked === Lock.NoEvent) {
74
71
  return;
75
72
  }
76
- ctx.fillStyle = this.options.hoverColor;
73
+ ctx.fillStyle = globalStore.options.hoverColor;
77
74
  ctx.save();
78
75
  // anchors
79
- if (this.options.alwaysAnchor) {
80
- this.data.pens.forEach(function (pen) {
76
+ if (globalStore.options.alwaysAnchor) {
77
+ globalStore.data.pens.forEach(function (pen) {
81
78
  if (pen.type === PenType.Line) {
82
79
  return;
83
80
  }
@@ -90,23 +87,23 @@ var HoverLayer = /** @class */ (function (_super) {
90
87
  continue;
91
88
  }
92
89
  ctx.beginPath();
93
- ctx.arc(anchor.x, anchor.y, anchor.radius || _this.options.anchorRadius, 0, Math.PI * 2);
94
- ctx.strokeStyle = anchor.strokeStyle || _this.options.hoverColor;
95
- ctx.fillStyle = anchor.fillStyle || _this.options.anchorFillStyle;
90
+ ctx.arc(anchor.x, anchor.y, anchor.radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
91
+ ctx.strokeStyle = anchor.strokeStyle || globalStore.options.hoverColor;
92
+ ctx.fillStyle = anchor.fillStyle || globalStore.options.anchorFillStyle;
96
93
  ctx.fill();
97
94
  ctx.stroke();
98
95
  }
99
96
  });
100
97
  }
101
98
  ctx.restore();
102
- if (this.node && !this.data.locked) {
99
+ if (this.node && !globalStore.data.locked) {
103
100
  if (!this.node.getTID()) {
104
101
  this.node.setTID(this.TID);
105
102
  }
106
103
  this.root = this.getRoot(this.node) || this.node;
107
104
  if (this.root) {
108
105
  ctx.save();
109
- ctx.strokeStyle = this.options.dragColor;
106
+ ctx.strokeStyle = globalStore.options.dragColor;
110
107
  ctx.globalAlpha = 0.2;
111
108
  if (this.root.rotate) {
112
109
  ctx.translate(this.root.rect.center.x, this.root.rect.center.y);
@@ -117,20 +114,20 @@ var HoverLayer = /** @class */ (function (_super) {
117
114
  ctx.strokeRect(this.root.rect.x, this.root.rect.y, this.root.rect.width, this.root.rect.height);
118
115
  ctx.restore();
119
116
  }
120
- if (!this.options.hideAnchor) {
117
+ if (!globalStore.options.hideAnchor) {
121
118
  for (var i = 0; i < this.node.rotatedAnchors.length; ++i) {
122
119
  if (this.node.locked ||
123
- this.node.hideAnchor ||
124
- (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
120
+ this.node.hideAnchor ||
121
+ (this.node.rotatedAnchors[i].hidden && this.hoverAnchorIndex !== i)) {
125
122
  continue;
126
123
  }
127
124
  ctx.beginPath();
128
- ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || this.options.anchorRadius, 0, Math.PI * 2);
125
+ ctx.arc(this.node.rotatedAnchors[i].x, this.node.rotatedAnchors[i].y, this.node.rotatedAnchors[i].radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
129
126
  ctx.strokeStyle =
130
- this.node.rotatedAnchors[i].strokeStyle || this.options.hoverColor;
127
+ this.node.rotatedAnchors[i].strokeStyle || globalStore.options.hoverColor;
131
128
  ctx.fillStyle =
132
- this.node.rotatedAnchors[i].fillStyle ||
133
- this.options.anchorFillStyle;
129
+ this.node.rotatedAnchors[i].fillStyle ||
130
+ globalStore.options.anchorFillStyle;
134
131
  ctx.fill();
135
132
  ctx.stroke();
136
133
  }
@@ -139,9 +136,9 @@ var HoverLayer = /** @class */ (function (_super) {
139
136
  if (this.dockAnchor) {
140
137
  ctx.save();
141
138
  ctx.beginPath();
142
- ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || this.options.anchorRadius, 0, Math.PI * 2);
143
- ctx.strokeStyle = this.options.dockStrokeStyle;
144
- ctx.fillStyle = this.options.dockFillStyle;
139
+ ctx.arc(this.dockAnchor.x, this.dockAnchor.y, this.dockAnchor.radius || globalStore.options.anchorRadius, 0, Math.PI * 2);
140
+ ctx.strokeStyle = globalStore.options.dockStrokeStyle;
141
+ ctx.fillStyle = globalStore.options.dockFillStyle;
145
142
  ctx.fill();
146
143
  ctx.stroke();
147
144
  ctx.restore();
@@ -151,7 +148,7 @@ var HoverLayer = /** @class */ (function (_super) {
151
148
  ctx.arc(this.hoverLineCP.x, this.hoverLineCP.y, 5, 0, Math.PI * 2);
152
149
  ctx.fill();
153
150
  }
154
- ctx.strokeStyle = this.options.hoverColor + '80';
151
+ ctx.strokeStyle = globalStore.options.hoverColor + '80';
155
152
  ctx.lineWidth = 1;
156
153
  if (this.dockLineX > 0) {
157
154
  var size = Store.get(this.generateStoreKey('LT:size'));
@@ -169,8 +166,8 @@ var HoverLayer = /** @class */ (function (_super) {
169
166
  }
170
167
  // Select nodes by drag.
171
168
  if (this.dragRect) {
172
- ctx.fillStyle = this.options.dragColor + '30';
173
- ctx.strokeStyle = this.options.dragColor;
169
+ ctx.fillStyle = globalStore.options.dragColor + '30';
170
+ ctx.strokeStyle = globalStore.options.dragColor;
174
171
  ctx.beginPath();
175
172
  ctx.strokeRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
176
173
  ctx.fillRect(this.dragRect.x, this.dragRect.y, this.dragRect.width, this.dragRect.height);
@@ -180,7 +177,7 @@ var HoverLayer = /** @class */ (function (_super) {
180
177
  if (!node.parentId) {
181
178
  return null;
182
179
  }
183
- for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
180
+ for (var _i = 0, _a = commonStore[this.TID].data.pens; _i < _a.length; _i++) {
184
181
  var item = _a[_i];
185
182
  if (item instanceof Node && item.id === node.parentId) {
186
183
  var n = this.getRoot(item);
@@ -196,4 +193,4 @@ var HoverLayer = /** @class */ (function (_super) {
196
193
  return HoverLayer;
197
194
  }(Layer));
198
195
  export { HoverLayer };
199
- //# sourceMappingURL=hoverLayer.js.map
196
+ //# sourceMappingURL=hoverLayer.js.map
@@ -1,4 +1,3 @@
1
- export * from './data';
2
1
  export * from './pen';
3
2
  export * from './node';
4
3
  export * from './line';
@@ -1,4 +1,3 @@
1
- export * from './data';
2
1
  export * from './pen';
3
2
  export * from './node';
4
3
  export * from './line';
@@ -1,15 +1,12 @@
1
- import { Options } from './options';
2
1
  import { Canvas } from './canvas';
3
2
  import { ActiveLayer } from './activeLayer';
4
3
  import { HoverLayer } from './hoverLayer';
5
4
  import { AnimateLayer } from './animateLayer';
6
5
  export declare class Offscreen extends Canvas {
7
- parentElem: HTMLElement;
8
- options: Options;
9
6
  activeLayer: ActiveLayer;
10
7
  hoverLayer: HoverLayer;
11
8
  animateLayer: AnimateLayer;
12
- constructor(parentElem: HTMLElement, options: Options, TID: String);
9
+ constructor(TID: String);
13
10
  getRoutineLayer(auto?:[]): void;
14
11
  render(): void;
15
12
  destroy(): void;
@@ -13,13 +13,12 @@ var __extends = (this && this.__extends) || (function () {
13
13
  })();
14
14
  import { Store } from 'le5le-store';
15
15
  import { Canvas } from './canvas';
16
+ import { Node } from './models'
17
+ import { commonStore } from './store'
16
18
  var Offscreen = /** @class */ (function (_super) {
17
19
  __extends(Offscreen, _super);
18
- function Offscreen(parentElem, options, TID) {
19
- if (options === void 0) { options = {}; }
20
- var _this = _super.call(this, parentElem, options, TID) || this;
21
- _this.parentElem = parentElem;
22
- _this.options = options;
20
+ function Offscreen(TID) {
21
+ var _this = _super.call(this, TID) || this;
23
22
  _this.activeLayer = null;
24
23
  _this.hoverLayer = null;
25
24
  _this.animateLayer = null;
@@ -40,9 +39,12 @@ var Offscreen = /** @class */ (function (_super) {
40
39
  Offscreen.prototype.render = function () {
41
40
  _super.prototype.render.call(this);
42
41
  var ctx = this.canvas.getContext('2d');
43
- ctx.strokeStyle = this.options.color;
44
- for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
42
+ if(!commonStore || !commonStore[this.TID]) return;
43
+ let store = commonStore[this.TID];
44
+ ctx.strokeStyle = store.options.color;
45
+ for (var _i = 0, _a = store.data.pens; _i < _a.length; _i++) {
45
46
  var item = _a[_i];
47
+ if(!(item instanceof Node)) item = new Node(item);
46
48
  if (!item.getTID()) {
47
49
  item.setTID(this.TID);
48
50
  }
@@ -57,9 +59,9 @@ var Offscreen = /** @class */ (function (_super) {
57
59
  if(this.animateLayer) {
58
60
  this.animateLayer.render(ctx);
59
61
  }
62
+ store = null;
60
63
  };
61
64
  Offscreen.prototype.destroy = function () {
62
- this.options = null;
63
65
  this.activeLayer = null;
64
66
  this.hoverLayer = null;
65
67
  this.animateLayer = null;
@@ -38,5 +38,6 @@ export var DefalutOptions = {
38
38
  autoExpandDistance: 200,
39
39
  keydown: KeydownType.Document,
40
40
  viewPadding: 0,
41
+ interval: 50
41
42
  };
42
43
  //# sourceMappingURL=options.js.map
@@ -1,18 +1,6 @@
1
1
  // @ts-ignore
2
- import {Options, Padding} from './options';
3
- import { Pen } from './models';
4
- import { Node } from './models';
2
+ import {Padding, Options} from './options';
5
3
  import { Point } from './models';
6
- import { Line } from './models';
7
- import { TopologyData } from './models';
8
- import { Lock } from './models';
9
- import { Offscreen } from './offscreen';
10
- import { RenderLayer } from './renderLayer';
11
- import { AnimateLayer } from './animateLayer';
12
- import { DivLayer } from './divLayer';
13
- import { Rect } from './models';
14
- import { Socket } from './socket';
15
- import { MQTT } from './mqtt';
16
4
  import {Common} from './common';
17
5
  export declare class Preview extends Common{
18
6
  constructor(parent: string | HTMLElement, options?: Options);
@@ -29,7 +29,7 @@ var Preview = (function (_super) {
29
29
  _this.onmouseup(e);
30
30
  return;
31
31
  }
32
- if (_this.data.locked && _this.mouseDown) {
32
+ if (_this.store.data.locked && _this.mouseDown) {
33
33
  return;
34
34
  }
35
35
  _this.scheduledAnimationFrame = true;
@@ -45,7 +45,7 @@ var Preview = (function (_super) {
45
45
  hoverNode,
46
46
  moveType,
47
47
  eventNode
48
- } = mousMoveFun(_this.options.type, pos, _this.data.pens);
48
+ } = mousMoveFun(_this.store.options.type, pos, _this.store.data.pens);
49
49
  _this.moveIn.type = _this.moveInType.None;
50
50
  _this.scheduledAnimationFrame = false;
51
51
  _this.hideTip();
@@ -73,7 +73,7 @@ var Preview = (function (_super) {
73
73
  if (_this.inputObj) {
74
74
  _this.setNodeText();
75
75
  }
76
- const {eventType, value} = mousDownFun(_this.options.type, _this.moveIn.eventNode);
76
+ const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
77
77
  if (_this.moveIn.type == _this.moveInType.Nodes) {
78
78
  _this.divLayer.canvas.style.cursor = 'pointer';
79
79
  switch (eventType) {
@@ -84,7 +84,7 @@ var Preview = (function (_super) {
84
84
  _this.dispatch('node', _this.moveIn.hoverNode);
85
85
  break;
86
86
  case downDataType.Showhide:
87
- _this.hidePenByTag(_this.data.pens, value);
87
+ _this.hidePenByTag(_this.store.data.pens, value);
88
88
  const obj = value ? JSON.parse(value) : {}
89
89
  const visibleRange = obj.visibleRange
90
90
  if (visibleRange == '1') {
@@ -109,10 +109,10 @@ var Preview = (function (_super) {
109
109
  _this.divLayer.canvas.onmousedown = this.onmousedown;
110
110
  _this.divLayer.canvas.onmouseup = this.onmouseup;
111
111
  _this.divLayer.canvas.onwheel = function (event) {
112
- if (_this.options.disableScale) {
112
+ if (_this.store.options.disableScale) {
113
113
  return;
114
114
  }
115
- switch (_this.options.scaleKey) {
115
+ switch (_this.store.options.scaleKey) {
116
116
  case KeyType.None:
117
117
  break;
118
118
  case KeyType.Ctrl:
@@ -166,46 +166,45 @@ var Preview = (function (_super) {
166
166
  // open - redraw by the data
167
167
  Preview.prototype.open = function (topoJSon) {
168
168
  this.conversionData(topoJSon);
169
- this.parentElem.scrollLeft = 0;
170
- this.parentElem.scrollTop = 0;
171
- this.divLayer.clear();
172
169
  this.fitView();
173
170
  this.render(true);
174
171
  this.animate(true);
175
172
  };
176
173
  Preview.prototype.scale = function (scale, center, w, h) {
177
- if (this.data.scale * scale < this.options.minScale ||
178
- this.data.scale * scale > this.options.maxScale) {
174
+ if (this.store.data.scale * scale < this.store.options.minScale ||
175
+ this.store.data.scale * scale > this.store.options.maxScale) {
179
176
  return;
180
177
  }
181
178
  const scaleX = w ? w : scale;
182
179
  const scaleY = h ? h : scale;
183
- this.data.scale *= scale;
180
+ this.store.data.scale *= scale;
184
181
  if(this.isFullScreen) {
185
- this.ratioCord.ratio *= scale;
186
- this.ratioCord.scaleX *= scaleX;
187
- this.ratioCord.scaleY *= scaleY;
182
+ this.store.ratioCord.ratio *= scale;
183
+ this.store.ratioCord.scaleX *= scaleX;
184
+ this.store.ratioCord.scaleY *= scaleY;
188
185
  }else {
189
- this.ratioCord.ratio = 1;
190
- this.ratioCord.scaleX = 1;
191
- this.ratioCord.scaleY = 1;
186
+ this.store.ratioCord = {
187
+ ratio: 1,
188
+ scaleX: 1,
189
+ scaleY: 1
190
+ }
192
191
  }
193
192
  !center && (center = this.getRect().center);
194
- for (var _i = 0, _a = this.data.pens; _i < _a.length; _i++) {
193
+ for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
195
194
  var item = _a[_i];
196
195
  item.scale(scale, center, w, h);
197
196
  }
198
197
  };
199
198
  Preview.prototype.scaleTo = function (scale) {
200
- this.scale(scale / this.data.scale);
201
- this.data.scale = scale;
199
+ this.scale(scale / this.store.data.scale);
200
+ this.store.data.scale = scale;
202
201
  };
203
202
  // scale for origin canvas:
204
203
  Preview.prototype.fitView = function (viewPadding, restore) {
205
204
  if (!this.hasView())
206
205
  return;
207
206
  // 1. 重置画布尺寸为容器尺寸
208
- var parentElem = this.canvas.parentElem;
207
+ var parentElem = this.store.parentElem;
209
208
  var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
210
209
  this.canvasResize({
211
210
  width: width,
@@ -214,7 +213,7 @@ var Preview = (function (_super) {
214
213
  // 2. 图形居中
215
214
  this.centerView(viewPadding);
216
215
  // 3. 获取设置的留白值
217
- var padding = formatPadding(viewPadding || this.options.viewPadding);
216
+ var padding = formatPadding(viewPadding || this.store.options.viewPadding);
218
217
  // 4. 获取图形尺寸
219
218
  var rect = this.getRect();
220
219
  // 6. 计算缩放比
@@ -225,14 +224,14 @@ var Preview = (function (_super) {
225
224
  ratio = h;
226
225
  }
227
226
  if(typeof restore === 'boolean' && restore) {
228
- ratio = 1 / this.ratioCord.ratio;
229
- w = 1 / this.ratioCord.scaleX;
230
- h = 1 / this.ratioCord.scaleY;
227
+ ratio = 1 / this.store.ratioCord.ratio;
228
+ w = 1 / this.store.ratioCord.scaleX;
229
+ h = 1 / this.store.ratioCord.scaleY;
231
230
  }
232
231
  this.scale(ratio, undefined, w, h);
233
232
  this.canvas.scale(ratio, undefined, w, h);
234
233
  // 7. X抽滚动条隐藏
235
- this.parentElem.style.overflow = 'hidden auto';
234
+ this.store.parentElem.style.overflow = 'hidden auto';
236
235
  };
237
236
  Preview.prototype.destroy = function () {
238
237
  this.destroyStatic();
@@ -2,8 +2,6 @@ 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;
7
5
  offscreen: any;
8
6
  bkImg: HTMLImageElement;
9
7
  bkImgRect: {
@@ -22,7 +20,7 @@ export declare class RenderLayer extends Canvas {
22
20
  width: number;
23
21
  height: number;
24
22
  };
25
- constructor(parentElem: HTMLElement, options: Options, TID: String);
23
+ constructor(TID: String);
26
24
  loadBkImg(cb?: any): void;
27
25
  clearBkImg(): void;
28
26
  render: () => void;