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.
Files changed (42) hide show
  1. package/chart-diagram/index.d.ts +2 -0
  2. package/chart-diagram/index.js +1 -0
  3. package/chart-diagram/src/echarts/index.d.ts +0 -1
  4. package/chart-diagram/src/echarts/index.js +106 -107
  5. package/chart-diagram/src/register.js +4 -3
  6. package/chart-diagram/src/utils/changeOptions.d.ts +4 -0
  7. package/chart-diagram/src/utils/changeOptions.js +163 -0
  8. package/chart-diagram/src/utils/conversion.d.ts +17 -0
  9. package/chart-diagram/src/utils/conversion.js +179 -0
  10. package/chart-diagram/src/utils/drawGraphic.d.ts +3 -0
  11. package/chart-diagram/src/utils/drawGraphic.js +97 -0
  12. package/chart-diagram/src/utils/index.d.ts +3 -0
  13. package/chart-diagram/src/utils/index.js +3 -0
  14. package/core/src/common.js +27 -30
  15. package/core/src/core.js +84 -59
  16. package/core/src/divLayer.d.ts +0 -26
  17. package/core/src/divLayer.js +22 -276
  18. package/core/src/healps/changeData.js +45 -22
  19. package/core/src/middles/arrows/index.d.ts +4 -0
  20. package/core/src/middles/arrows/index.js +5 -0
  21. package/core/src/middles/default.d.ts +1 -3
  22. package/core/src/middles/default.js +51 -51
  23. package/core/src/middles/index.js +3 -2
  24. package/core/src/middles/lines/index.d.ts +4 -0
  25. package/core/src/middles/lines/index.js +5 -0
  26. package/core/src/middles/nodes/iframe.d.ts +2 -0
  27. package/core/src/middles/nodes/iframe.js +12 -0
  28. package/core/src/middles/nodes/index.d.ts +46 -0
  29. package/core/src/middles/nodes/index.js +47 -0
  30. package/core/src/middles/nodes/pentagon.rect.js +1 -1
  31. package/core/src/middles/nodes/rectangle.rect.js +1 -1
  32. package/core/src/models/node.d.ts +6 -0
  33. package/core/src/models/node.js +16 -6
  34. package/core/src/preview.js +14 -0
  35. package/core/src/store/data.js +2 -0
  36. package/core/src/utils/dom.d.ts +2 -0
  37. package/core/src/utils/dom.js +66 -32
  38. package/package.json +1 -1
  39. package/static/echartsDefaultData.js +239 -95
  40. package/static/echartsStore.js +14 -0
  41. package/static/index.js +2 -1
  42. 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/rect';
1
+ import { Rect } from '../../models';
2
2
  export function pentagonIconRect(node) {
3
3
  var w = node.rect.width / 2;
4
4
  var h = node.rect.height / 2;
@@ -1,4 +1,4 @@
1
- import { Rect } from '../../models/rect';
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);
@@ -7,6 +7,12 @@ export declare const images: {
7
7
  cnt: number;
8
8
  };
9
9
  };
10
+ export declare const defaultImages: {
11
+ [key: string]: {
12
+ img: string;
13
+ status: number;
14
+ };
15
+ };
10
16
  export declare class Node extends Pen {
11
17
  is3D: boolean;
12
18
  z: number;
@@ -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 var images = {};
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.audio ||
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;
@@ -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) {
@@ -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()
@@ -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;
@@ -1,42 +1,74 @@
1
- import { Store } from 'le5le-store';
2
- import { Lock } from '../models'
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
- if(!data) data = commonStore[node.TID].data;
7
- if (!DomElements[node.id]) {
8
- DomElements[node.id] = document.getElementById(node.id);
9
- if (DomElements[node.id]) {
10
- document.querySelector('.canvas-point').appendChild(DomElements[node.id]);
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
- if (!elem) {
17
- return;
18
- }
19
- elem.style.position = 'absolute';
20
- elem.style.outline = 'none';
21
- elem.style.left = node.rect.x + 'px';
22
- elem.style.top = node.rect.y + 'px';
23
- elem.style.width = node.rect.width + 'px';
24
- elem.style.height = node.rect.height + 'px';
25
- if (node.rotate || node.offsetRotate) {
26
- elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
27
- }
28
- // if (node.video && this.videos[node.id] && this.videos[node.id].media) {
29
- // this.videos[node.id].media.style.width = '100%';
30
- // this.videos[node.id].media.style.height = '100%';
31
- // }
32
- if (data && data.locked > Lock.None || node.locked > Lock.None) {
33
- elem.style.userSelect = 'initial';
34
- elem.style.pointerEvents = 'initial';
35
- } else {
36
- elem.style.userSelect = 'none';
37
- elem.style.pointerEvents = 'none';
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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dcim-topology2d",
3
- "version": "1.1.3",
3
+ "version": "1.1.4",
4
4
  "description": "",
5
5
  "main": "-",
6
6
  "scripts": {