dcim-topology2d 1.1.3 → 1.1.4

package/core/src/middles/nodes/index.d.ts

@@ -0,0 +1,46 @@
+export * from './arbitrarygraph';
+export * from './arbitrarygraph.anchor';
+export * from './arrow';
+export * from './arrow.rect';
+export * from './arrow.anchor';
+export * from './circle';
+export * from './circle.rect';
+export * from './circle.anchor';
+export * from './cloud';
+export * from './cloud.rect';
+export * from './cloud.anchor';
+export * from './cube';
+export * from './cube.rect';
+export * from './cube.anchor';
+export * from './cube.model';
+export * from './diamond';
+export * from './diamond.rect';
+export * from './file';
+export * from './formtable';
+export * from './hexagon';
+export * from './hexagon.anchor';
+export * from './hexagon.rect';
+export * from './image.rect';
+export * from './image.anchor';
+export * from './iframe';
+export * from './line';
+export * from './line.anchor';
+export * from './line.rect';
+export * from './message';
+export * from './message.anchor';
+export * from './message.rect';
+export * from './pentagon';
+export * from './pentagon.anchor';
+export * from './pentagon.rect';
+export * from './pentagram';
+export * from './pentagram.anchor';
+export * from './pentagram.rect';
+export * from './people';
+export * from './people.rect';
+export * from './rectangle';
+export * from './rectangle.rect';
+export * from './tablePagination';
+export * from './text';
+export * from './triangle';
+export * from './triangle.anchor';
+export * from './triangle.rect';

package/core/src/middles/nodes/index.js

@@ -0,0 +1,47 @@
+export * from './arbitrarygraph';
+export * from './arbitrarygraph.anchor';
+export * from './arrow';
+export * from './arrow.rect';
+export * from './arrow.anchor';
+export * from './circle';
+export * from './circle.rect';
+export * from './circle.anchor';
+export * from './cloud';
+export * from './cloud.rect';
+export * from './cloud.anchor';
+export * from './cube';
+export * from './cube.rect';
+export * from './cube.anchor';
+export * from './cube.model';
+export * from './diamond';
+export * from './diamond.rect';
+export * from './file';
+export * from './formtable';
+export * from './hexagon';
+export * from './hexagon.anchor';
+export * from './hexagon.rect';
+export * from './image.rect';
+export * from './image.anchor';
+export * from './iframe';
+export * from './line';
+export * from './line.anchor';
+export * from './line.rect';
+export * from './message';
+export * from './message.anchor';
+export * from './message.rect';
+export * from './pentagon';
+export * from './pentagon.anchor';
+export * from './pentagon.rect';
+export * from './pentagram';
+export * from './pentagram.anchor';
+export * from './pentagram.rect';
+export * from './people';
+export * from './people.rect';
+export * from './rectangle';
+export * from './rectangle.rect';
+export * from './tablePagination';
+export * from './text';
+export * from './triangle';
+export * from './triangle.anchor';
+export * from './triangle.rect';
+//# sourceMappingURL=index.js.map

package/core/src/middles/nodes/pentagon.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../models/rect';
+import { Rect } from '../../models';
 export function pentagonIconRect(node) {
     var w = node.rect.width / 2;
     var h = node.rect.height / 2;

package/core/src/middles/nodes/rectangle.rect.js

@@ -1,4 +1,4 @@
-import { Rect } from '../../models/rect';
+import { Rect } from '../../models';
 export function rectangleIconRect(node) {
     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);
     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.d.ts

@@ -7,6 +7,12 @@ export declare const images: {
         cnt: number;
     };
 };
+export declare const defaultImages: {
+    [key: string]: {
+        img: string;
+        status: number;
+    };
+};
 export declare class Node extends Pen {
     is3D: boolean;
     z: number;

package/core/src/models/node.js

@@ -21,7 +21,8 @@ import { defaultIconRect, defaultTextRect } from '../middles/default.rect';
 import { text, tableText, defaultText, iconfont } from '../middles/nodes/text';
 import { Store } from 'le5le-store';
 import { abs, s8, animateType, createChildrenDivByElementId } from '../utils';
-export var images = {};
+export const images = {};
+export const defaultImages = {};
 var Node = /** @class */ (function (_super) {
     __extends(Node, _super);
     function Node(json, noChild) {
@@ -35,6 +36,7 @@ var Node = /** @class */ (function (_super) {
         _this.animateDuration = 0;
         _this.animateFrames = [];
         _this.type = PenType.Node;
+        _this.TID = json.TID;
         _this.is3D = json.is3D;
         _this.z = json.z;
         _this.zRotate = json.zRotate || 0;
@@ -127,6 +129,7 @@ var Node = /** @class */ (function (_super) {
                         : '';
         _this.animateAlone = json.animateAlone;
         _this.iframe = json.iframe;
+        _this.iframePageAuto = json.iframePageAuto || false;
         _this.elementId = json.elementId;
         _this.audio = json.audio;
         _this.video = json.video;
@@ -233,12 +236,10 @@ var Node = /** @class */ (function (_super) {
         })
     };
     Node.prototype.addToDiv = function (type) {
-        if (this.audio ||
-                this.video ||
-                this.iframe ||
+        if (this.iframe ||
                 this.elementId ||
                 this.hasGif()) {
-            if(type) {
+            if(type || this.iframe) {
                 // 复合Echarts初始化
                 createChildrenDivByElementId(this);
             }else {
@@ -405,9 +406,10 @@ var Node = /** @class */ (function (_super) {
             //this.drawImg(ctx);
             return;
         }
+        const defaultImageNode = defaultImages[this.id];
         var img = new Image();
         img.crossOrigin = 'anonymous';
-        img.src = this.image;
+        img.src = defaultImageNode && defaultImageNode.status === 404 ? '' : this.image;
         img.onload = function (e) {
             _this.lastImage = _this.image;
             _this.imgNaturalWidth = img.naturalWidth;
@@ -417,12 +419,20 @@ var Node = /** @class */ (function (_super) {
                 img: img,
                 cnt: 1,
             };
+            if(defaultImageNode) delete defaultImages[_this.id];
             Store.set(_this.generateStoreKey('LT:imageLoaded'), true);
             if (!_this.gif && gif) {
                 _this.gif = true;
                 Store.set(_this.generateStoreKey('LT:addDiv'), _this);
             }
         };
+        img.onerror = function(e){
+            // 图片加载失败时预留默认图为空
+            defaultImages[_this.id] = {
+                img: '',
+                status: 404
+            };
+        };
     };
     Node.prototype.initDrawImg = function (ctx){
         var _this = this;

package/core/src/preview.js

@@ -23,6 +23,7 @@ var Preview = (function (_super) {
         _this.offscreen.getRoutineLayer(['AnimateLayer']);
         _this.scheduledAnimationFrame = false;
         _this.onMouseMove = function (e) {
+            _this.store.data.dataResize = 0;
             // https://caniuse.com/#feat=mdn-api_mouseevent_buttons
             if (_this.mouseDown && !_this.mouseDown.restore && e.buttons !== 1) {
                 // 防止异常情况导致mouseup事件没有触发
@@ -175,10 +176,23 @@ var Preview = (function (_super) {
     // open - redraw by the data
     Preview.prototype.open = function (topoJSon, type) {
         this.conversionData(topoJSon, type);
+        this.setBKImageRect();
         this.fitView();
         this.render(true);
         this.animate(true);
     };
+    Preview.prototype.setBKImageRect = function () {
+      if (this.store.data.bkImageRect) {
+        this.store.data.bkImageRect.x = this.store.data.bkImageRect.x ? Number(this.store.data.bkImageRect.x) : 0;
+        this.store.data.bkImageRect.y = this.store.data.bkImageRect.y ? Number(this.store.data.bkImageRect.y) : 0;
+        this.store.data.bkImageRect.width = this.store.data.bkImageRect.width ? Number(this.store.data.bkImageRect.width) : this.canvas.width;
+        this.store.data.bkImageRect.height = this.store.data.bkImageRect.height ? Number(this.store.data.bkImageRect.height) : this.canvas.height;
+        this.store.data.bkImageRect.center = {
+          x: this.store.data.bkImageRect.x + this.store.data.bkImageRect.width / 2,
+          y: this.store.data.bkImageRect.y + this.store.data.bkImageRect.height / 2
+        }
+      }
+    };
     Preview.prototype.scale = function (scale, center, w, h) {
         if (this.store.data.scale * scale < this.store.options.minScale ||
                 this.store.data.scale * scale > this.store.options.maxScale) {

package/core/src/store/data.js

@@ -24,6 +24,7 @@ export var createStore = function () {
             toArrowType: 'triangleSolid',
             scale: 1,
             locked: Lock.None,
+            dataResize: 1, // 数据是否加载，1是，0否
             bkImageRect: null,
             mqttOptions: {
                 clientId: s8()
@@ -61,6 +62,7 @@ export var clearStore = function (store, del) {
         toArrowType: 'triangleSolid',
         scale: 1,
         locked: Lock.None,
+        dataResize: 1, // 数据是否加载，1是，0否
         bkImageRect: null,
         mqttOptions: {
             clientId: s8()

package/core/src/utils/dom.d.ts

@@ -1,7 +1,9 @@
 import { Node } from '../models';
 import { visualization2DStore } from '../store';
 export declare let DomElements: {};
+export declare let DomIframes: {};
 export declare function createChildrenDivByElementId(node: Node, data?: visualization2DStore): HTMLDivElement;
+export declare function createIframeElement(node: Node): HTMLDivElement;
 export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
 export declare function createDiv(node: Node): HTMLDivElement;
 export declare function loadJS(url: string, callback?: () => void, render?: boolean): void;

package/core/src/utils/dom.js

@@ -1,42 +1,74 @@
-import { Store } from 'le5le-store';
-import { Lock } from '../models'
+import {Store} from 'le5le-store';
+import {Lock} from '../models'
 import {commonStore} from '../store';
+
 export let DomElements = {};
+export let DomIframes = {};
+
 export function createChildrenDivByElementId(node, data) {
-  if(!data) data = commonStore[node.TID].data;
-  if (!DomElements[node.id]) {
-    DomElements[node.id] = document.getElementById(node.id);
-    if (DomElements[node.id]) {
-      document.querySelector('.canvas-point').appendChild(DomElements[node.id]); 
+    if (!data) data = commonStore[node.TID] && commonStore[node.TID].data;
+    // echarts图表的初始化渲染
+    if (node.elementId) {
+        if (!DomElements[node.id]) {
+            DomElements[node.id] = document.getElementById(node.id);
+            if (DomElements[node.id]) {
+                document.querySelector('.canvas-point').appendChild(DomElements[node.id]);
+            }
+        }
+        setStyleForElementIdDiv(node, DomElements[node.id], data);
+    }
+    // iframe元件的初始化渲染
+    if (node.iframe) {
+        if (!DomIframes[node.id]) {
+            let iframe = document.getElementById(`iframe${node.id}`);
+            if (!(iframe && iframe.length)) iframe = createIframeElement(node);
+            DomIframes[node.id] = iframe;
+            if (DomIframes[node.id]) {
+                commonStore[node.TID].parentElem.appendChild(DomIframes[node.id]);
+            }
+        }
+        setStyleForElementIdDiv(node, DomIframes[node.id], data);
     }
-  }
-  setStyleForElementIdDiv(node, DomElements[node.id], data);
 }
+
+export function createIframeElement(node) {
+    const iframe = document.createElement('iframe');
+    // iframe.scrolling = 'no';
+    iframe.frameBorder = '0';
+    iframe.src = node.iframe;
+    iframe.width = node.rect.width;
+    iframe.height = node.rect.height;
+    iframe.setAttribute('id', `iframe${node.id}`);
+    iframe.setAttribute('class', 'topology2dConfIfram');
+    return iframe;
+}
+
 export function setStyleForElementIdDiv(node, elem, data) {
-  if (!elem) {
-    return;
-  }
-  elem.style.position = 'absolute';
-  elem.style.outline = 'none';
-  elem.style.left = node.rect.x + 'px';
-  elem.style.top = node.rect.y + 'px';
-  elem.style.width = node.rect.width + 'px';
-  elem.style.height = node.rect.height + 'px';
-  if (node.rotate || node.offsetRotate) {
-    elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
-  }
-  // if (node.video && this.videos[node.id] && this.videos[node.id].media) {
-  //     this.videos[node.id].media.style.width = '100%';
-  //     this.videos[node.id].media.style.height = '100%';
-  // }
-  if (data && data.locked > Lock.None || node.locked > Lock.None) {
-    elem.style.userSelect = 'initial';
-    elem.style.pointerEvents = 'initial';
-  } else {
-    elem.style.userSelect = 'none';
-    elem.style.pointerEvents = 'none';
-  }
+    if (!elem) {
+        return;
+    }
+    elem.style.position = 'absolute';
+    elem.style.outline = 'none';
+    elem.style.left = node.rect.x + 'px';
+    elem.style.top = node.rect.y + 'px';
+    elem.style.width = node.rect.width + 'px';
+    elem.style.height = node.rect.height + 'px';
+    if (node.rotate || node.offsetRotate) {
+        elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
+    }
+    // if (node.video && this.videos[node.id] && this.videos[node.id].media) {
+    //     this.videos[node.id].media.style.width = '100%';
+    //     this.videos[node.id].media.style.height = '100%';
+    // }
+    if (data && data.locked > Lock.None || node.locked > Lock.None) {
+        elem.style.userSelect = 'initial';
+        elem.style.pointerEvents = 'initial';
+    } else {
+        elem.style.userSelect = 'none';
+        elem.style.pointerEvents = 'none';
+    }
 }
+
 export function createDiv(node) {
     var div = document.createElement('div');
     div.style.position = 'absolute';
@@ -51,6 +83,7 @@ export function createDiv(node) {
     div.id = node.id;
     return div;
 }
+
 export function loadJS(url, callback, render) {
     var loaderScript = document.createElement('script');
     loaderScript.type = 'text/javascript';
@@ -66,4 +99,5 @@ export function loadJS(url, callback, render) {
     });
     document.body.appendChild(loaderScript);
 }
+
 //# sourceMappingURL=dom.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "",
   "main": "-",
   "scripts": {