dcim-topology2d 1.1.3 → 1.1.4
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/index.d.ts +2 -0
- package/chart-diagram/index.js +1 -0
- package/chart-diagram/src/echarts/index.d.ts +0 -1
- package/chart-diagram/src/echarts/index.js +106 -107
- package/chart-diagram/src/register.js +4 -3
- package/chart-diagram/src/utils/changeOptions.d.ts +4 -0
- package/chart-diagram/src/utils/changeOptions.js +163 -0
- package/chart-diagram/src/utils/conversion.d.ts +17 -0
- package/chart-diagram/src/utils/conversion.js +179 -0
- package/chart-diagram/src/utils/drawGraphic.d.ts +3 -0
- package/chart-diagram/src/utils/drawGraphic.js +97 -0
- package/chart-diagram/src/utils/index.d.ts +3 -0
- package/chart-diagram/src/utils/index.js +3 -0
- package/core/src/common.js +27 -30
- package/core/src/core.js +84 -59
- package/core/src/divLayer.d.ts +0 -26
- package/core/src/divLayer.js +22 -276
- package/core/src/healps/changeData.js +45 -22
- package/core/src/middles/arrows/index.d.ts +4 -0
- package/core/src/middles/arrows/index.js +5 -0
- package/core/src/middles/default.d.ts +1 -3
- package/core/src/middles/default.js +51 -51
- package/core/src/middles/index.js +3 -2
- package/core/src/middles/lines/index.d.ts +4 -0
- package/core/src/middles/lines/index.js +5 -0
- package/core/src/middles/nodes/iframe.d.ts +2 -0
- package/core/src/middles/nodes/iframe.js +12 -0
- package/core/src/middles/nodes/index.d.ts +46 -0
- package/core/src/middles/nodes/index.js +47 -0
- package/core/src/middles/nodes/pentagon.rect.js +1 -1
- package/core/src/middles/nodes/rectangle.rect.js +1 -1
- package/core/src/models/node.d.ts +6 -0
- package/core/src/models/node.js +16 -6
- package/core/src/preview.js +14 -0
- package/core/src/store/data.js +2 -0
- package/core/src/utils/dom.d.ts +2 -0
- package/core/src/utils/dom.js +66 -32
- package/package.json +1 -1
- package/static/echartsDefaultData.js +239 -95
- package/static/echartsStore.js +14 -0
- package/static/index.js +2 -1
- package/style/index.css +3 -0
@@ -0,0 +1,46 @@
|
|
1
|
+
export * from './arbitrarygraph';
|
2
|
+
export * from './arbitrarygraph.anchor';
|
3
|
+
export * from './arrow';
|
4
|
+
export * from './arrow.rect';
|
5
|
+
export * from './arrow.anchor';
|
6
|
+
export * from './circle';
|
7
|
+
export * from './circle.rect';
|
8
|
+
export * from './circle.anchor';
|
9
|
+
export * from './cloud';
|
10
|
+
export * from './cloud.rect';
|
11
|
+
export * from './cloud.anchor';
|
12
|
+
export * from './cube';
|
13
|
+
export * from './cube.rect';
|
14
|
+
export * from './cube.anchor';
|
15
|
+
export * from './cube.model';
|
16
|
+
export * from './diamond';
|
17
|
+
export * from './diamond.rect';
|
18
|
+
export * from './file';
|
19
|
+
export * from './formtable';
|
20
|
+
export * from './hexagon';
|
21
|
+
export * from './hexagon.anchor';
|
22
|
+
export * from './hexagon.rect';
|
23
|
+
export * from './image.rect';
|
24
|
+
export * from './image.anchor';
|
25
|
+
export * from './iframe';
|
26
|
+
export * from './line';
|
27
|
+
export * from './line.anchor';
|
28
|
+
export * from './line.rect';
|
29
|
+
export * from './message';
|
30
|
+
export * from './message.anchor';
|
31
|
+
export * from './message.rect';
|
32
|
+
export * from './pentagon';
|
33
|
+
export * from './pentagon.anchor';
|
34
|
+
export * from './pentagon.rect';
|
35
|
+
export * from './pentagram';
|
36
|
+
export * from './pentagram.anchor';
|
37
|
+
export * from './pentagram.rect';
|
38
|
+
export * from './people';
|
39
|
+
export * from './people.rect';
|
40
|
+
export * from './rectangle';
|
41
|
+
export * from './rectangle.rect';
|
42
|
+
export * from './tablePagination';
|
43
|
+
export * from './text';
|
44
|
+
export * from './triangle';
|
45
|
+
export * from './triangle.anchor';
|
46
|
+
export * from './triangle.rect';
|
@@ -0,0 +1,47 @@
|
|
1
|
+
export * from './arbitrarygraph';
|
2
|
+
export * from './arbitrarygraph.anchor';
|
3
|
+
export * from './arrow';
|
4
|
+
export * from './arrow.rect';
|
5
|
+
export * from './arrow.anchor';
|
6
|
+
export * from './circle';
|
7
|
+
export * from './circle.rect';
|
8
|
+
export * from './circle.anchor';
|
9
|
+
export * from './cloud';
|
10
|
+
export * from './cloud.rect';
|
11
|
+
export * from './cloud.anchor';
|
12
|
+
export * from './cube';
|
13
|
+
export * from './cube.rect';
|
14
|
+
export * from './cube.anchor';
|
15
|
+
export * from './cube.model';
|
16
|
+
export * from './diamond';
|
17
|
+
export * from './diamond.rect';
|
18
|
+
export * from './file';
|
19
|
+
export * from './formtable';
|
20
|
+
export * from './hexagon';
|
21
|
+
export * from './hexagon.anchor';
|
22
|
+
export * from './hexagon.rect';
|
23
|
+
export * from './image.rect';
|
24
|
+
export * from './image.anchor';
|
25
|
+
export * from './iframe';
|
26
|
+
export * from './line';
|
27
|
+
export * from './line.anchor';
|
28
|
+
export * from './line.rect';
|
29
|
+
export * from './message';
|
30
|
+
export * from './message.anchor';
|
31
|
+
export * from './message.rect';
|
32
|
+
export * from './pentagon';
|
33
|
+
export * from './pentagon.anchor';
|
34
|
+
export * from './pentagon.rect';
|
35
|
+
export * from './pentagram';
|
36
|
+
export * from './pentagram.anchor';
|
37
|
+
export * from './pentagram.rect';
|
38
|
+
export * from './people';
|
39
|
+
export * from './people.rect';
|
40
|
+
export * from './rectangle';
|
41
|
+
export * from './rectangle.rect';
|
42
|
+
export * from './tablePagination';
|
43
|
+
export * from './text';
|
44
|
+
export * from './triangle';
|
45
|
+
export * from './triangle.anchor';
|
46
|
+
export * from './triangle.rect';
|
47
|
+
//# sourceMappingURL=index.js.map
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Rect } from '../../models
|
1
|
+
import { Rect } from '../../models';
|
2
2
|
export function rectangleIconRect(node) {
|
3
3
|
node.iconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
4
4
|
node.fullIconRect = new Rect(node.rect.x + node.paddingLeftNum, node.rect.y + node.paddingTopNum, node.rect.width - node.paddingLeftNum - node.paddingRightNum, node.rect.height - node.paddingTopNum - node.paddingBottomNum);
|
package/core/src/models/node.js
CHANGED
@@ -21,7 +21,8 @@ import { defaultIconRect, defaultTextRect } from '../middles/default.rect';
|
|
21
21
|
import { text, tableText, defaultText, iconfont } from '../middles/nodes/text';
|
22
22
|
import { Store } from 'le5le-store';
|
23
23
|
import { abs, s8, animateType, createChildrenDivByElementId } from '../utils';
|
24
|
-
export
|
24
|
+
export const images = {};
|
25
|
+
export const defaultImages = {};
|
25
26
|
var Node = /** @class */ (function (_super) {
|
26
27
|
__extends(Node, _super);
|
27
28
|
function Node(json, noChild) {
|
@@ -35,6 +36,7 @@ var Node = /** @class */ (function (_super) {
|
|
35
36
|
_this.animateDuration = 0;
|
36
37
|
_this.animateFrames = [];
|
37
38
|
_this.type = PenType.Node;
|
39
|
+
_this.TID = json.TID;
|
38
40
|
_this.is3D = json.is3D;
|
39
41
|
_this.z = json.z;
|
40
42
|
_this.zRotate = json.zRotate || 0;
|
@@ -127,6 +129,7 @@ var Node = /** @class */ (function (_super) {
|
|
127
129
|
: '';
|
128
130
|
_this.animateAlone = json.animateAlone;
|
129
131
|
_this.iframe = json.iframe;
|
132
|
+
_this.iframePageAuto = json.iframePageAuto || false;
|
130
133
|
_this.elementId = json.elementId;
|
131
134
|
_this.audio = json.audio;
|
132
135
|
_this.video = json.video;
|
@@ -233,12 +236,10 @@ var Node = /** @class */ (function (_super) {
|
|
233
236
|
})
|
234
237
|
};
|
235
238
|
Node.prototype.addToDiv = function (type) {
|
236
|
-
if (this.
|
237
|
-
this.video ||
|
238
|
-
this.iframe ||
|
239
|
+
if (this.iframe ||
|
239
240
|
this.elementId ||
|
240
241
|
this.hasGif()) {
|
241
|
-
if(type) {
|
242
|
+
if(type || this.iframe) {
|
242
243
|
// 复合Echarts初始化
|
243
244
|
createChildrenDivByElementId(this);
|
244
245
|
}else {
|
@@ -405,9 +406,10 @@ var Node = /** @class */ (function (_super) {
|
|
405
406
|
//this.drawImg(ctx);
|
406
407
|
return;
|
407
408
|
}
|
409
|
+
const defaultImageNode = defaultImages[this.id];
|
408
410
|
var img = new Image();
|
409
411
|
img.crossOrigin = 'anonymous';
|
410
|
-
img.src = this.image;
|
412
|
+
img.src = defaultImageNode && defaultImageNode.status === 404 ? '' : this.image;
|
411
413
|
img.onload = function (e) {
|
412
414
|
_this.lastImage = _this.image;
|
413
415
|
_this.imgNaturalWidth = img.naturalWidth;
|
@@ -417,12 +419,20 @@ var Node = /** @class */ (function (_super) {
|
|
417
419
|
img: img,
|
418
420
|
cnt: 1,
|
419
421
|
};
|
422
|
+
if(defaultImageNode) delete defaultImages[_this.id];
|
420
423
|
Store.set(_this.generateStoreKey('LT:imageLoaded'), true);
|
421
424
|
if (!_this.gif && gif) {
|
422
425
|
_this.gif = true;
|
423
426
|
Store.set(_this.generateStoreKey('LT:addDiv'), _this);
|
424
427
|
}
|
425
428
|
};
|
429
|
+
img.onerror = function(e){
|
430
|
+
// 图片加载失败时预留默认图为空
|
431
|
+
defaultImages[_this.id] = {
|
432
|
+
img: '',
|
433
|
+
status: 404
|
434
|
+
};
|
435
|
+
};
|
426
436
|
};
|
427
437
|
Node.prototype.initDrawImg = function (ctx){
|
428
438
|
var _this = this;
|
package/core/src/preview.js
CHANGED
@@ -23,6 +23,7 @@ var Preview = (function (_super) {
|
|
23
23
|
_this.offscreen.getRoutineLayer(['AnimateLayer']);
|
24
24
|
_this.scheduledAnimationFrame = false;
|
25
25
|
_this.onMouseMove = function (e) {
|
26
|
+
_this.store.data.dataResize = 0;
|
26
27
|
// https://caniuse.com/#feat=mdn-api_mouseevent_buttons
|
27
28
|
if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
|
28
29
|
// 防止异常情况导致mouseup事件没有触发
|
@@ -175,10 +176,23 @@ var Preview = (function (_super) {
|
|
175
176
|
// open - redraw by the data
|
176
177
|
Preview.prototype.open = function (topoJSon, type) {
|
177
178
|
this.conversionData(topoJSon, type);
|
179
|
+
this.setBKImageRect();
|
178
180
|
this.fitView();
|
179
181
|
this.render(true);
|
180
182
|
this.animate(true);
|
181
183
|
};
|
184
|
+
Preview.prototype.setBKImageRect = function () {
|
185
|
+
if (this.store.data.bkImageRect) {
|
186
|
+
this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
|
187
|
+
this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
|
188
|
+
this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
|
189
|
+
this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
|
190
|
+
this.store.data.bkImageRect.center = {
|
191
|
+
x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
|
192
|
+
y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
|
193
|
+
}
|
194
|
+
}
|
195
|
+
};
|
182
196
|
Preview.prototype.scale = function (scale, center, w, h) {
|
183
197
|
if (this.store.data.scale * scale < this.store.options.minScale ||
|
184
198
|
this.store.data.scale * scale > this.store.options.maxScale) {
|
package/core/src/store/data.js
CHANGED
@@ -24,6 +24,7 @@ export var createStore = function () {
|
|
24
24
|
toArrowType: 'triangleSolid',
|
25
25
|
scale: 1,
|
26
26
|
locked: Lock.None,
|
27
|
+
dataResize: 1, // 数据是否加载,1是,0否
|
27
28
|
bkImageRect: null,
|
28
29
|
mqttOptions: {
|
29
30
|
clientId: s8()
|
@@ -61,6 +62,7 @@ export var clearStore = function (store, del) {
|
|
61
62
|
toArrowType: 'triangleSolid',
|
62
63
|
scale: 1,
|
63
64
|
locked: Lock.None,
|
65
|
+
dataResize: 1, // 数据是否加载,1是,0否
|
64
66
|
bkImageRect: null,
|
65
67
|
mqttOptions: {
|
66
68
|
clientId: s8()
|
package/core/src/utils/dom.d.ts
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
import { Node } from '../models';
|
2
2
|
import { visualization2DStore } from '../store';
|
3
3
|
export declare let DomElements: {};
|
4
|
+
export declare let DomIframes: {};
|
4
5
|
export declare function createChildrenDivByElementId(node: Node, data?: visualization2DStore): HTMLDivElement;
|
6
|
+
export declare function createIframeElement(node: Node): HTMLDivElement;
|
5
7
|
export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
|
6
8
|
export declare function createDiv(node: Node): HTMLDivElement;
|
7
9
|
export declare function loadJS(url: string, callback?: () => void, render?: boolean): void;
|
package/core/src/utils/dom.js
CHANGED
@@ -1,42 +1,74 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
1
|
+
import {Store} from 'le5le-store';
|
2
|
+
import {Lock} from '../models'
|
3
3
|
import {commonStore} from '../store';
|
4
|
+
|
4
5
|
export let DomElements = {};
|
6
|
+
export let DomIframes = {};
|
7
|
+
|
5
8
|
export function createChildrenDivByElementId(node, data) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
9
|
+
if (!data) data = commonStore[node.TID] && commonStore[node.TID].data;
|
10
|
+
// echarts图表的初始化渲染
|
11
|
+
if (node.elementId) {
|
12
|
+
if (!DomElements[node.id]) {
|
13
|
+
DomElements[node.id] = document.getElementById(node.id);
|
14
|
+
if (DomElements[node.id]) {
|
15
|
+
document.querySelector('.canvas-point').appendChild(DomElements[node.id]);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
setStyleForElementIdDiv(node, DomElements[node.id], data);
|
19
|
+
}
|
20
|
+
// iframe元件的初始化渲染
|
21
|
+
if (node.iframe) {
|
22
|
+
if (!DomIframes[node.id]) {
|
23
|
+
let iframe = document.getElementById(`iframe${node.id}`);
|
24
|
+
if (!(iframe && iframe.length)) iframe = createIframeElement(node);
|
25
|
+
DomIframes[node.id] = iframe;
|
26
|
+
if (DomIframes[node.id]) {
|
27
|
+
commonStore[node.TID].parentElem.appendChild(DomIframes[node.id]);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
setStyleForElementIdDiv(node, DomIframes[node.id], data);
|
11
31
|
}
|
12
|
-
}
|
13
|
-
setStyleForElementIdDiv(node, DomElements[node.id], data);
|
14
32
|
}
|
33
|
+
|
34
|
+
export function createIframeElement(node) {
|
35
|
+
const iframe = document.createElement('iframe');
|
36
|
+
// iframe.scrolling = 'no';
|
37
|
+
iframe.frameBorder = '0';
|
38
|
+
iframe.src = node.iframe;
|
39
|
+
iframe.width = node.rect.width;
|
40
|
+
iframe.height = node.rect.height;
|
41
|
+
iframe.setAttribute('id', `iframe${node.id}`);
|
42
|
+
iframe.setAttribute('class', 'topology2dConfIfram');
|
43
|
+
return iframe;
|
44
|
+
}
|
45
|
+
|
15
46
|
export function setStyleForElementIdDiv(node, elem, data) {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
47
|
+
if (!elem) {
|
48
|
+
return;
|
49
|
+
}
|
50
|
+
elem.style.position = 'absolute';
|
51
|
+
elem.style.outline = 'none';
|
52
|
+
elem.style.left = node.rect.x + 'px';
|
53
|
+
elem.style.top = node.rect.y + 'px';
|
54
|
+
elem.style.width = node.rect.width + 'px';
|
55
|
+
elem.style.height = node.rect.height + 'px';
|
56
|
+
if (node.rotate || node.offsetRotate) {
|
57
|
+
elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
|
58
|
+
}
|
59
|
+
// if (node.video && this.videos[node.id] && this.videos[node.id].media) {
|
60
|
+
// this.videos[node.id].media.style.width = '100%';
|
61
|
+
// this.videos[node.id].media.style.height = '100%';
|
62
|
+
// }
|
63
|
+
if (data && data.locked > Lock.None || node.locked > Lock.None) {
|
64
|
+
elem.style.userSelect = 'initial';
|
65
|
+
elem.style.pointerEvents = 'initial';
|
66
|
+
} else {
|
67
|
+
elem.style.userSelect = 'none';
|
68
|
+
elem.style.pointerEvents = 'none';
|
69
|
+
}
|
39
70
|
}
|
71
|
+
|
40
72
|
export function createDiv(node) {
|
41
73
|
var div = document.createElement('div');
|
42
74
|
div.style.position = 'absolute';
|
@@ -51,6 +83,7 @@ export function createDiv(node) {
|
|
51
83
|
div.id = node.id;
|
52
84
|
return div;
|
53
85
|
}
|
86
|
+
|
54
87
|
export function loadJS(url, callback, render) {
|
55
88
|
var loaderScript = document.createElement('script');
|
56
89
|
loaderScript.type = 'text/javascript';
|
@@ -66,4 +99,5 @@ export function loadJS(url, callback, render) {
|
|
66
99
|
});
|
67
100
|
document.body.appendChild(loaderScript);
|
68
101
|
}
|
102
|
+
|
69
103
|
//# sourceMappingURL=dom.js.map
|