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.
- package/chart-diagram/src/echarts/index.js +3 -6
- package/core/index.d.ts +1 -0
- package/core/index.js +1 -0
- package/core/src/activeLayer.d.ts +2 -10
- package/core/src/activeLayer.js +42 -41
- package/core/src/animateLayer.d.ts +3 -7
- package/core/src/animateLayer.js +10 -12
- package/core/src/calling.d.ts +1 -4
- package/core/src/calling.js +38 -41
- package/core/src/canvas.d.ts +1 -6
- package/core/src/canvas.js +17 -18
- package/core/src/common.d.ts +5 -5
- package/core/src/common.js +146 -109
- package/core/src/core.d.ts +3 -4
- package/core/src/core.js +222 -251
- package/core/src/divLayer.d.ts +2 -7
- package/core/src/divLayer.js +25 -25
- package/core/src/healps/changeData.js +20 -3
- package/core/src/hoverLayer.d.ts +2 -9
- package/core/src/hoverLayer.js +31 -34
- package/core/src/models/index.d.ts +0 -1
- package/core/src/models/index.js +0 -1
- package/core/src/offscreen.d.ts +1 -4
- package/core/src/offscreen.js +10 -8
- package/core/src/options.js +1 -0
- package/core/src/preview.d.ts +1 -13
- package/core/src/preview.js +26 -27
- package/core/src/renderLayer.d.ts +1 -3
- package/core/src/renderLayer.js +26 -31
- package/core/src/store/common.d.ts +9 -0
- package/core/src/store/common.js +5 -0
- package/core/src/store/data.d.ts +126 -0
- package/core/src/store/data.js +80 -0
- package/core/src/store/index.d.ts +2 -0
- package/core/src/store/index.js +2 -0
- package/core/src/utils/conversion.d.ts +7 -0
- package/core/src/utils/conversion.js +54 -0
- package/core/src/utils/dom.d.ts +4 -3
- package/package.json +1 -1
- package/core/src/models/data.d.ts +0 -26
- package/core/src/models/data.js +0 -77
- package/core/src/models/data.js.map +0 -1
- package/core/src/mqtt.d.ts +0 -14
- package/core/src/mqtt.js +0 -82
- package/core/src/mqtt.js.map +0 -1
- package/core/src/socket.d.ts +0 -10
- package/core/src/socket.js +0 -51
- package/core/src/socket.js.map +0 -1
package/core/src/divLayer.d.ts
CHANGED
@@ -1,11 +1,6 @@
|
|
1
|
-
import {
|
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(
|
38
|
+
constructor(TID: String);
|
44
39
|
addDiv: (node: Node) => void;
|
45
40
|
createPlayer(): void;
|
46
41
|
getMediaCurrent(): void;
|
package/core/src/divLayer.js
CHANGED
@@ -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(
|
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 =
|
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 =
|
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 =
|
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 =
|
220
|
+
_this.playBtn.className = options.pauseIcon;
|
225
221
|
} else {
|
226
222
|
_this.media.pause();
|
227
|
-
_this.playBtn.className =
|
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 (
|
424
|
-
this.canvas.style.width =
|
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 =
|
425
|
+
this.canvas.style.width = store.parentElem.clientWidth + 'px';
|
427
426
|
}
|
428
|
-
if (
|
429
|
-
this.canvas.style.height =
|
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 =
|
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
|
-
|
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
|
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
|
-
|
154
|
-
node.
|
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;
|
package/core/src/hoverLayer.d.ts
CHANGED
@@ -1,13 +1,6 @@
|
|
1
|
-
import {
|
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(
|
15
|
+
constructor(TID: String);
|
23
16
|
lineTo(to: Point, toArrow?: string): void;
|
24
17
|
lineFrom(from: Point): void;
|
25
18
|
lineMove(pt: Point, initPos: {
|
package/core/src/hoverLayer.js
CHANGED
@@ -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
|
-
|
5
|
-
|
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
|
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(
|
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
|
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 =
|
73
|
+
ctx.fillStyle = globalStore.options.hoverColor;
|
77
74
|
ctx.save();
|
78
75
|
// anchors
|
79
|
-
if (
|
80
|
-
|
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 ||
|
94
|
-
ctx.strokeStyle = anchor.strokeStyle ||
|
95
|
-
ctx.fillStyle = anchor.fillStyle ||
|
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 && !
|
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 =
|
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 (!
|
117
|
+
if (!globalStore.options.hideAnchor) {
|
121
118
|
for (var i = 0; i < this.node.rotatedAnchors.length; ++i) {
|
122
119
|
if (this.node.locked ||
|
123
|
-
|
124
|
-
|
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 ||
|
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
|
-
|
127
|
+
this.node.rotatedAnchors[i].strokeStyle || globalStore.options.hoverColor;
|
131
128
|
ctx.fillStyle =
|
132
|
-
|
133
|
-
|
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 ||
|
143
|
-
ctx.strokeStyle =
|
144
|
-
ctx.fillStyle =
|
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 =
|
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 =
|
173
|
-
ctx.strokeStyle =
|
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
|
package/core/src/models/index.js
CHANGED
package/core/src/offscreen.d.ts
CHANGED
@@ -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(
|
9
|
+
constructor(TID: String);
|
13
10
|
getRoutineLayer(auto?:[]): void;
|
14
11
|
render(): void;
|
15
12
|
destroy(): void;
|
package/core/src/offscreen.js
CHANGED
@@ -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(
|
19
|
-
|
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
|
-
|
44
|
-
|
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;
|
package/core/src/options.js
CHANGED
package/core/src/preview.d.ts
CHANGED
@@ -1,18 +1,6 @@
|
|
1
1
|
// @ts-ignore
|
2
|
-
import {
|
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);
|
package/core/src/preview.js
CHANGED
@@ -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
|
190
|
-
|
191
|
-
|
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.
|
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(
|
23
|
+
constructor(TID: String);
|
26
24
|
loadBkImg(cb?: any): void;
|
27
25
|
clearBkImg(): void;
|
28
26
|
render: () => void;
|